loop-animation

二重らせんDouble Helix

奥行きに応じて大きさと濃さを変えた点で二重らせんを描き、横に流れながら回転して見えるようにします。

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

奥行きに応じて大きさの変わる点で描いた二重らせんが、横に流れながら回転する

このシーンで作る

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

どう計算しているか

  1. 画面を「本数」ぶんの段に分け、各段に「1本あたりの点の数」だけ x 方向へ点を並べます。
  2. 点ごとの角度は a = 2π(「巻き数」·k/n − 「1ループの回転数」·t + 段番号·「行ごとの時間差」) です。y = sin(a)·「太さ」を高さに使い、もう1本の鎖は a に π を足して反対側に置きます。
  3. cos(a) を奥行き z とみなし、z が大きい(手前の)点ほど半径を大きく、不透明にします。z の小さい順に並べ替えて描くので、手前の点が奥の点の上に重なります。
  4. 「横棒」をオンにすると、同じ x にある2本の鎖の点を半透明の線で結び、はしご状にします。
a = 2π(freq·k/n − cycles·t),  y = amp·sin a,  z = cos a

ループがつながる理由

時間の項は整数の「1ループの回転数」× t だけなので、1ループで角度がちょうど整数回転し、すべての点が元の位置と奥行きに戻ります。

調整できるパラメータ

形

本数1 〜 12(初期値 3)
1本あたりの点の数8 〜 120(初期値 40)
巻き数0.5 〜 6(初期値 2)
太さ20 〜 300(初期値 90)
点の大きさ1 〜 30(初期値 9)
横棒オン/オフ(初期値 オン)
線幅0.5 〜 8(初期値 2)

動き

1ループの回転数1 〜 4(初期値 1)
行ごとの時間差0 〜 1(初期値 0.25)

同じ分類のシーン(線・波)