アニメーション中の時間を自在にあやつろう！ タイミング編 : Processing Tips

Processing をやっていると、静止画だけでなくアニメーション（動画）にも挑戦したくなってきます。
このノートでは、アニメーションの中のあるタイミングで何かしたい、ある時間周期で何かしたいという場合の Tips を紹介します。

但し！ この方法は deconbatch の我流 Tips です。 他にもっといい方法があるかもしれませんので、その点ご了承ください。
いい方法見つけたら私にも教えてくださいね♥

まずは fps って何？ ： Processing でアニメーション基本のキ

Processing でアニメーション作成するということは、絵を少しずつ変えながら何枚も描いてそれを連続で見せるということで、基本的にパラパラマンガと同じです。

絵の枚数はパラパラマンガの場合はコマ数、Processing の場合はフレーム数と呼びます。（呼びましょう。呼んでください。）

パラパラマンガは速くパラパラするとアニメーションも速く動きますね。
Processing で作るアニメーションも動画に変換する際に速くも遅くもできます。

その速さの単位を fps （毎秒のフレーム数、frames per second）と言います。
一秒間に何枚の絵をパラパラするかということで、この値が大きければ速いということになります。

参考：YouTube Creators 最適なフレームレートの選び方
https://creatoracademy.youtube.com/page/lesson/frame-rate#strategies-zippy-link-2

fps 値が大きいほど滑らかな動きを表現できますが、それだけ多くの絵を描く必要が出てきます。30fps で 5秒間のアニメーションを作るには 30fps x 5s = 150f で 150枚の絵が必要、60fps だと倍の 300枚も必要になりますね。たった 5秒で 300枚… 大変ですねこりゃ…

アニメーションの中に実時間を持ち込む

さて、25fps のアニメーションを作る場合、25フレーム毎に何かアクション（描画とか、移動とか、色を変えるとか）を起こせば、そのアクションは動画上では 1秒おきに発現することになります。

そして、Processing のコード中で今何枚目のフレームを描いているかは frameCount で取得できます。

ということは、もう簡単ですね！

if (frameCount % 25 == 0) {
// action!
}

とすることで、1秒間おきにアクションを起こせることになります。

試しに 1秒間おきにだんだん大きな円を描いてみましょう。

  // timing sample 01
 //  background(0, 0, 0);
 if (frameCount % 25 == 0) {
   fill(150, 80, 80, 100);
   ellipse(
           0,
           0,
           100 * frameCount / 25,
           100 * frameCount / 25
           );
 }

ね！？

大きさや色を連続的に変えて、時間間隔で周期をつけてみましょう。
・2秒毎に 30度回転
・3秒毎に色の変化の周期
・1秒毎に大きさの変化の周期

  // timing sample 02
 if (frameCount % 50 == 0) {
   rotateVal = radians(30 * frameCount / 50);
 }
 rotate(rotateVal);

 fill(
      map(frameCount % 75, 0, 74, 150, 300),
      80,
      80,
      100
      );
 rect(
      0,
      0,
      map(frameCount % 25, 0, 24, 200, 400),
      map(frameCount % 25, 0, 24, 200, 400)
      );

コードだけでは完結できない

先の 1秒毎に円が大きくなるサンプルですが、あれだけだったら実はもっと簡単にできて、大きさの違う円の絵を一枚ずつ用意（5秒分なら5枚）して、1fps の動画に変換すればいいわけです。
その際、Processing のコードでは frameCount を意識する必要はありません。

もう一方の段階的に色や大きさが変化する例も 25fps の動画という前提で 1秒おきなどということが実現できています。

このように、Processing で描いた絵を動画に変換する際に指定する fps値によってアニメーション中の時間の速さは変わってきます。
つまり、Processing のコードだけで完結させることはできないわけです。

そういうわけですので、作成の際にはコード中の頭にでもコメントで fps値を描いておくとよいと思います。

アニメーションの世界の時間単位

1秒間に何枚の絵をパラパラするかを表す fps値、この逆数を取れば spf、つまり1枚の絵を何秒間表示するかという時間を得ることができます。
25fps のアニメーションなら 1枚の絵の表示は 1 / 25 = 0.04 秒間 ということになります。
ということは、25fps のアニメーションで起こせるアクションの最小時間は 0.04秒となり、この倍数でのみアクション可能、言い換えれば 25fps の世界の時間単位は 0.04秒ということになります。

しかし、まあ、0.何秒というシビアなことをやりたいのであればこのような計算が必要になりますが、実際には 1秒おきとか 2秒おき、あるいは 100フレーム毎に何かしたいという場合がほとんどかと思います。

まとめ

というわけで、

if (frameCount % 50 == 0) { 

や

map(frameCount % 25, 0, 24, 200, 400)

を使ってタイミングバッチリなアニメーションを作りましょう！