超簡単!Processingの制作物を動画ファイルに書き出す方法

processing

Yasu
どうもこんにちは!Tekito+Style.meを運営しているYasu(@98nasi_nori)です。Processingをほそぼそと勉強中です。

Processingで制作していると、せっかくの作品を動画に書き出したい!そんな方も多いかなと思います。Processingでの動画の書き出しは実は簡単にできます!

ということで、今回はその方法をステップごとにご紹介していきます。Processingを勉強中の方はぜひご参考下さいね。

Processingで動画を書き出す方法

1) コードの差し込み

Processingで動画を書き出す方法

まずが出力したい作品のコードのdrawの部分の最後に、

saveFrame(“frames/######.png”);

の文を差し込みます。この一文加えることで、作品を画像ファイル(png)として書き出すことができます。コードを差し込んだら、「再生」をクリックします。

2) framesフォルダの確認

Processingで動画を書き出す方法

再生すると、対象となる作品のファイルと同じフォルダの中に「frames」のフォルダが作成されます。再生している間、その中に作品のpngファイルが作成されます。

3) ムービーメーカーで書き出し

Processingで動画を書き出す方法

pngファイルが作成されていることを確認できたら、いよいよ動画に変換させます。

まずはProcessingのメニューにある「ツール」から、「ムービーメーカー」を選択します。

Processingで動画を書き出す方法

ムービーメーカーの設定画面が表示されます。

「Drag a folder with image files into the field below」の欄には、先ほど作成された「frames」フォルダがあるパスを選択します。

Processingで動画を書き出す方法

幅と高さは出力される動画のサイズです。任意のサイズを設定します。またFramerateも任意のものを設定します。通常は30ほどで問題ないですが、独自の数値をコード中に設定している場合はそちらを入力しましょう。

また音楽ファイルも動画に設定できますので、もし音源などあればファイルのパスを設定しておきましょう。

設定が完了したら、「Create Movie」を選択します。

Processingで動画を書き出す方法

最後に動画を書き出す箇所を指定し、「保存」を選択します。

Processingで動画を書き出す方法

すると書き出しが始まり、進行中の画面が表示されます。

まとめ

以上でProcessingで制作したものを動画に書き出すステップは完了です!

動画として書き出してみると、また違った見え方ができますよ。制作した作品があれば、せっかくですのでぜひ動画として書き出してみてはいかがでしょうか。

Processing初心者におすすめな定番参考書籍 ↓↓
これを読んでおけばProcessingの基礎が身につきます。学習を始めたばかりの方はぜひ目を通しておきましょう!

デザインやProcessingについて学ぶなら ↓↓

Webデザインスクール・専門学校に通うメリット・デメリットを経験者が比較してみた

2019-09-01








Aboutこの記事を書いた人

「Tekito+Style.me」の中の人。都内で働くWebディレクター/マーケター。早稲田大学卒。時々旅人な27歳です。主にサービスの企画・ディレクション、グロースハック、SEO対策、UX設計などしてます。開発やデザインも細々と挑戦してます… 学生時代は世界一周してました(過去約40ヶ国訪問)。お気に入りの国はベトナム、モロッコ、台湾など。南国のビーチでまったり余生を過ごしたい派。好物はビールと生ハム、あとカニカマ。