【Processing】簡単なアニメーションを作成してみよう！

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ファイル)が生成されていきます。実行結果で示すように、各フレームの状態が保存されます。作成された画像ファイルをつなぎ合わせることで、動画ファイルを作成していきます。

コード

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();
}