目次
Processingでアニメーションの準備
前回の記事「座標系の平行移動と回転」で、translate関数を使って家の列を描画するコードを作成しました。このコードを少し書きかえて、家が増えていくアニメーションにしてみます。
フレームループの考え方
Processingでアニメーションを作成するためには、「フレームループの概念」を理解しておく必要があります。静止画であっても、それを素早く切り替えて表示させれば、まるで動いているかのように見せることができます。「フレーム」という言葉は、個々の静止画を指しています。Processingでは、フレームループによって連続的に画面を再描画しています。パラパラ漫画をイメージしてください。複数枚の静止画を素早く切り替えることで、まるでアニメーションのように見えると思います。
構造化
Processingには、アニメーションの基本構造を書くために、「setup()」と「draw()」という2つの関数ブロックがあります。プログラムが起動すると、setup()関数ブロック内のコードが一度だけ実行されます。ここでは、キャンバスのサイズや背景色、変数の初期化など、初期化のためのコードを書きます。draw()関数のブロック内のコードは、フレームごとに繰り返し呼び出されます。ループの中で図形の場所や色、形を変化させてアニメーションにします。このループは、プログラムが終了するか、noLoop()関数が呼ばれるまで続きます。draw()関数が呼び出される頻度は、frameRate関数を使うことによって、設定することができます。
setup()関数とdraw()関数のイメージを図示すると、下図のようになります。

家を表示するアニメーション
家の列を表示するコードを書きかえて、家が増えていくアニメーションになるようにしました。コードとその実行結果を示します。以前のコードでは、setup()からhouse関数を呼び出していましたが、今回draw()を追加して、その中から呼び出すように変更しました。こうすることで、フレームごとにhouse関数が呼び出され、家が増えていくように見せることができます。
13行目のsaveFrame()は、ウィンドウの状態を画像として保存するための関数です。画像を保存する際に、自動的に連番を含むファイル名になります。この例では、フレームごとに、framesというディレクトリに画像ファイルが保存されていきます。
14行目のif文では、家の位置x0が400より大きくなっときにnoLoop()関数を呼び出して、フレームループを停止しています。
17行目〜28行目のhouse関数の内容に変更はありません。
このコードを実行すると、「frames」というディレクトリが作成され、その中に画像ファイル(pngファイル)が生成されていきます。実行結果で示すように、各フレームの状態が保存されます。作成された画像ファイルをつなぎ合わせることで、動画ファイルを作成していきます。
コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | int x0; void setup() { size(500, 200); frameRate(1); x0 = 10; } void draw() { house(x0, 20); x0 += 50; saveFrame("frames/####.png"); if (x0 > 400) noLoop(); } void house(int x, int y) { pushMatrix(); translate(x, y); fill(91, 66, 61); triangle(15, 0, 0, 15, 30, 15); fill(0, 100, 255); rect(0, 15, 30, 30); fill(255, 255, 255); rect(15, 30, 10, 15); popMatrix(); } |
実行結果

静止画をつなげて動画ファイルに変換
いよいよ作成した画像をつなげて動画ファイルを作成します。この記事では、次の2つの方法を紹介します。
- Processingの「ムービーメーカー」で変換する
- ImageMagicの「convertコマンド」で変換する
Processingの「ムービーメーカー」で変換する
Processingには、「ムービーメーカー」という動画作成の機能が付属しています。ムービーメーカーを使うには、まずProcessingのメニューにある「ツール」から「ムービーメーカー」選択します。

「ムービーメーカー」を選択すると、次の画像のような設定画面が表示されますので、必要な設定を行なった後、「動画を作成」をクリックします。

動画ファイルを格納する場所とファイル名を設定する画面が表示されますので、指定して「保存」をクリックすると動画ファイルが作成されます。
これでProcessingのムービーメーカーを使って、動画ファイルを作成することができました!
ImageMagicの「convertコマンド」で変換する
「convertコマンド」を使うためには、まずimageMagicをインストールする必要があります。インストール方法については、他サイトを参考にしてください。ここでは「convertコマンド」で動画ファイルに変換する方法だけ紹介します。
コマンドの使い方は簡単で、framesディレクトリに移動して次のコマンドを実行するだけです。
コマンドを実行すると、「house_mov1.gif」という動画ファイルが作成されます。

動画のフレームレートを調整したければ、次のように「-delay」オプションをつけます。

これでconvertコマンドを使って、動画ファイルを作成することができました!簡単ですね!!
まとめ
今回の記事では、Processingでアニメーションを作成して、それを動画ファイルにする方法を紹介しました!今後、ジェネラティブアートや物理シミュレーションを作成して、動画として紹介していければと思います!!
コメントを残す