Processing でアニメーション・動画を作成する簡単な手順：Processing How To

Processing をやり始めると、一度やってみたくなるのがアニメーション・動画の作成。

自分の作成した絵を動かしてみたい！ ですよね？

このノートでは、Processing を使ってパラパラ漫画方式でアニメーション・動画を作成する手順を解説いたします。

流れとしては以下です。
1.パラパラ漫画の全コマ（フレーム）の静止画を作成
2.作成したコマ（フレーム）を動画に変換

パラパラ漫画を作ったことのある方ならお分かりかと思いますが、対象を少しずつ動かした静止画を沢山作り、それらを順番に素早く表示することで、まるで動いているかのように見せるというものです。

説明用の作例はこれで。
え？ 全然ジェネラティブアートじゃない？ まあ、まあ、まあ、今回は動画にする手順がメインですから。ここはひとつ。ね？

アニメーションも動画も同じものを表すとし、以降は動画という言葉で統一します。コマはフレームという言葉で統一します。

1.パラパラ漫画用の静止画を作成

まずは動画の全フレームの静止画を作成しましょう。

Processing では setup() 実行後に draw() が繰り返し実行されます。
この draw() 中に saveFrame() を書いておけば、その時点の絵をファイルとして保存してくれます。

フレーム毎に別々のファイル名で保存しないと意味ないですし、ソースコードと同じところに沢山の画像ファイルが出来てしまうと整理がつかなくなるので、

saveFrame("frames/####.png");

としておきましょう。

こうすると frames というディレクトリ中に全ての画像ファイルが保存されます。
#### のところには何回目の draw() かの数値（＝フレーム数）が入ります。

なので、draw() を 5回動かしたとすると、5フレーム分の

frames/0001.png
frames/0002.png
frames/0003.png
frames/0004.png
frames/0005.png

というファイルが出来ます。

　・フレーム数は 1から始まる。
　・#### が桁数になる。
　・頭はゼロで埋めてくれる。
という感じです。

frames というディレクトリは無ければ自動で作成してくれますので、あらかじめ作る必要はありません。

さて、これでファイルは作れますが、じゃあ何個まで作るのかということになります。
20fps（1秒間に 20フレームを再生）で 5秒間の動画を作るとすると、 20fps x 5s = 100f で 100個まで作ればよいわけですね。

Processing では今何フレーム目（＝何回目の draw()）かを frameCount で取得することができます。
ですので、100フレーム分の静止画が必要なら、

saveFrame("frames/####.png");
if (frameCount >= 100) {
  exit();
}

としておけば、100枚の静止画を作成したのちに自動的に止まります。

それらを盛り込んだ、作例のソースコードがこちらです。

// 18.04.05 アニメーション、動画の作成方法
// 20fps * 5s = 100f
// Processing 3.2.1

void setup() {
 size(600, 600);
 colorMode(HSB, 360, 100, 100, 100);
 noStroke();
 background(0, 0, 0);
}

void draw() {
 fill(
      frameCount,
      80,
      90,
      100
      );

 float eLocate = (frameCount -1) * 6;
 float eRadius = (frameCount -1) % 50;
 ellipse(
         eLocate,
         eLocate,
         eRadius,
         eRadius
         );
 ellipse(
         600 - eLocate,
         eLocate,
         50 - eRadius,
         50 - eRadius
         );

 saveFrame("frames/####.png");
 if (frameCount >= 100) {
   exit();
 }
}

2.作成したコマ（フレーム）を動画に変換

さて、これで動画用の全静止画の用意ができました。
あとはこれを動画ファイルに変換するだけです。

方法としては主に
 1)Processing 付属のムービーメーカーを使う
 2)外部コマンドを使う
の 2つの方法があります。

1) Processing 付属のムービーメーカーを使う
Processing のエディタには「ムービーメーカー」という動画の生成機能が付属しています。

静止画を保存したディレクトリを指定して [Create movie] ボタンを押し、動画の保存先とファイル名を指定するだけの簡単操作！

とっても手軽に動画に変換できます。

手軽ではあるんですが、生成される動画ファイルの容量が大きくなりがちなのと、静止画を作り直しては動画に変換を何度も繰り返していると、手動で操作するのがだんだん億劫になってきます。

2) 外部コマンドを使う
いちいち GUI で操作なんて億劫、そんなプログラマーとしての美徳、正しい「怠惰」の心を持つ方は、コマンドラインで動画に変換するのもいいですね。
ここでは簡単に紹介だけします。

mp4 に変換するには ffmpeg を使っています。
Twitter に上げる用にはこう。

ffmpeg -y -r 20 -pattern_type glob -i "./frames/*.png" -an -pix_fmt yuv420p -vcodec h264 -profile:v baseline sample.mp4

※Twitter に上がった後の画質に不満があり、試行錯誤中です。

これで変換すると、作例の動画の場合、ファイル容量は 24K Byte になりました。
Processing 付属の「ムービーメーカー」で作成した場合は、214K Byte の容量でした。

画質はムービーメーカーで作成したものの方が若干キレイな気がします。（プラシーボ効果？いや、ビットレートが桁違いなので絶対キレイなはず）

アニメーションGIF なら ImageMagick の convert を使って、

convert -delay 5 frames/*png sample.gif

さらにこうすれば無限ループ再生の GIF が作れます！

convert -loop 0 -delay 5 frames/*png sample.gif

ファイル名は頭がゼロで埋まっているので文字列としてソートしても順番どおりになり、何も考えずに各種コマンドに読ませることができます。

これらコマンドについてはまた別の機会にご紹介したいと思います。

わざわざファイルに保存しないといけないの？

今回の作例のようなものであればファイルに保存しなくてもスケッチを実行すればそれがそのまま動画になってますよね？
fps も frameRate() で指定することができますし、saveFrame() を入れないほうが動きもスムーズです。

しかし、より複雑な計算が必要な絵を書くことになると、1フレーム描画するのに 10分かかるなんてこともザラに出てきます。（え？私のマシンが非力なだけ？）
このような場合には、パラパラ漫画方式で動画にするしかないと思います。

逆に、このパラパラ漫画方式なら、どんなにスゴイ絵でも自在にヌルヌル動かすことができますよ！
あなたのジェネレーティブアートでも、ぜひお試しください！

ご参考

フレーム、動きの速さ/滑らかさ、アニメーション中の動作のタイミングを合わせる方法など、「アニメーション中の時間を自在にあやつろう！ タイミング編 : Processing Tips」も見てみてください。

他の作例

これは一枚の描画に結構時間がかかるパターン。

これのイメージの元ネタがわかる方がいらっしゃると嬉しいなぁ。