loop-animation

周転円・フーリエEpicycles

回転する円をいくつも連ねた腕の先端が、整数周波数の重ね合わせによって対称なロゼット模様を描き続けるループです。

Canvas 2D で、図形を 1 つずつ計算して描いています。初期設定で再生しています。

整数周波数の円を連ねた腕の先端が、対称なロゼット模様を描き続ける

このシーンで作る

パラメータ、色、エフェクトを変えて、GIF・APNG・WebP・MP4・WebM で書き出せます。

どう計算しているか

  1. 「円の数」だけ円を用意し、それぞれに回転の周波数、半径、初期角度を割り当てます。半径と初期角度は「シード」から作る乱数で決まり、半径は番号が大きいほど「円の縮み方」に従って小さくなります。
  2. 周波数は 1, 1+k, 1−k, 1+2k, 1−2k … の形にします(k は「対称数」)。どの周波数も k で割ると 1 余るので、合成した曲線は k 回回転対称になります。
  3. ペン先の位置は、各円の (cos, sin) に半径を掛けたベクトルを順に足し合わせて求めます。複素数の回転を足し合わせるのと同じ計算で、フーリエ級数による曲線の表現に相当します。
  4. 「円と腕」をオンにすると、前の円の先端を次の円の中心にして円と半径の線を描きます。「残像の長さ」の分だけ過去のペン先の軌跡を、古いほど薄く細く描きます。
z(s) = Σ r_j·e^{i(2π f_j s + φ_j)},  f_j = 1 + m_j·k

ループがつながる理由

すべての円の周波数が整数なので、媒介変数が 1 進むと各円がちょうど整数回転して腕全体が元の形に戻ります。ペン先は 1 ループで「1ループの周回数」だけ曲線を周回します。

調整できるパラメータ

形

円の数2 〜 12(初期値 5)
対称数2 〜 12(初期値 5)
シード0 〜 999(初期値 7)
大きさ0.3 〜 1.2(初期値 0.85)
円の縮み方0.3 〜 2(初期値 1)
円と腕オン/オフ(初期値 オン)
全体の軌跡オン/オフ(初期値 オン)
残像の長さ0 〜 1(初期値 0.35)
線幅0.5 〜 12(初期値 4)

動き

1ループの周回数1 〜 4(初期値 1)

同じ分類のシーン(点・軌道)