loop-animation

軌道上の点Lissajous Dots

縦と横で周波数の異なる正弦波がつくるリサージュ曲線の上を、たくさんの点が等間隔に並んで行進するループです。

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

整数比のリサージュ曲線上を点が行進する。点どうしを結ぶと糸かけ模様になる

このシーンで作る

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

どう計算しているか

  1. 曲線上の位置は媒介変数 s を使って x = sin(「横の周波数」·2πs + 位相差)、y = sin(「縦の周波数」·2πs) で求め、「大きさ」で拡大します。「軌道線」をオンにすると、この曲線全体を薄く描きます。
  2. 「点の数」が n のとき、k 番目の点は s = k/n + 「1ループの周回数」·t に置きます。全員が同じ速さで曲線を進むので、間隔を保ったまま行進して見えます。
  3. 「結ぶ相手」を 1 以上にすると、k 番目の点と k + c 番目の点を線で結びます(番号は n で割った余りで循環)。たくさんの線が重なって糸かけのような模様になります。
  4. 点の半径は 1 + 「点の脈動」·sin(2π(「脈動の波数」·k/n − t)) 倍に変化し、大小の波が点の列を伝わっていきます。
p(s) = R·(sin(2πa·s + δ), sin(2πb·s)),  s = k/n + speed·t

ループがつながる理由

周波数がどちらも整数なので、曲線は s が 1 増えると完全に元へ戻ります。点は 1 ループで整数周だけ進み、脈動も sin の中の t が 1 進むと一周するため、最後のフレームは最初とつながります。

調整できるパラメータ

形

点の数3 〜 400(初期値 90)
横の周波数1 〜 9(初期値 3)
縦の周波数1 〜 9(初期値 2)
位相差0 〜 1(初期値 0.25)
大きさ0.2 〜 1.2(初期値 0.8)
点の大きさ0 〜 40(初期値 7)
軌道線オン/オフ(初期値 オン)
結ぶ相手(0で無効)0 〜 60(初期値 0)
線幅0.5 〜 8(初期値 1.5)

動き

1ループの周回数1 〜 4(初期値 1)
点の脈動0 〜 1(初期値 0.5)
脈動の波数1 〜 12(初期値 3)

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