ループアニメーションの仕組み

このサイトのアニメーションは、すべて「時刻 t を受け取って 1 枚の絵を描く関数」として作っています。t は 1 ループの間に 0 から 1 まで進み、フレーム i では t = i ÷ フレーム数 です。t = 1 のときの絵が t = 0 の絵とぴったり一致するように式を組んでおけば、最後のフレームから最初のフレームへ戻るときに継ぎ目が生まれません。

一致させるための方法はいくつかあります。周期的な動きは sin(2π·k·t) の k を整数にして、ちょうど k 回で元に戻るようにします。回転は図形の対称性の分だけにとどめます（四角なら 90°、六角形なら 60°）。要素ごとに時間をずらすときは、ずらした後の時刻を 0〜1 に折り返します。ズームし続ける絵は、1 段ぶん進んだところで元の絵と同じになるように、拡大率と色の並びを合わせます。ノイズで揺らす場合は、ループする形に作り変えたノイズを使います。

各シーンのページでは、絵をどう計算しているか、なぜループがつながるのかを、実際のコードに沿って簡単に説明しています。アニメーションはこのページの上でもブラウザが計算して描いています。