loop-animation

モアレMoiré

同心円や縞を2組重ね、片方を少しずらしたり傾けたりすることで、干渉模様(モアレ)が流れるように動きます。

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

2組の同心円や縞をわずかにずらして重ね、干渉模様が流れるように動く

このシーンで作る

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

どう計算しているか

  1. 同心円は「間隔」ごとに半径を増やした円の束で、縞は同じ間隔の平行な直線の束です。2組をパレットの1色目と2色目で重ねて描きます。
  2. 同心円モードでは、2つの中心を半径「ずれの大きさ」の円周上で互いに反対側に置き、角度 2π·「1ループの周回数」·t で回します。中心の距離が変わるたびに、重なりから生じる太い模様(モアレ)の形も変わります。
  3. 縞モードでは、2組を ±「角度の揺れ」·sin(2πt) だけ逆向きに回転させ、片方を cos で横にずらします。ずらし量は間隔で割った余りを使うので、縞が1本ぶん以上ずれることはありません。
  4. 同心円 × 縞モードは、一方を揺れる縞、もう一方を周回する同心円にした組み合わせです。
c₁ = off·(cos φ, sin φ),  c₂ = −c₁,  φ = 2π·cycles·t

ループがつながる理由

動きはすべて sin(2π·周回数·t) と cos(2π·周回数·t) で決まり、周回数は整数です。t=1 で中心位置も回転角も t=0 と同じ値に戻ります。

調整できるパラメータ

形

模様同心円・縞・同心円 × 縞
間隔6 〜 60(初期値 16)
線幅0.5 〜 20(初期値 6)

動き

ずれの大きさ0 〜 300(初期値 90)
角度の揺れ(度)0 〜 30(初期値 6)
1ループの周回数1 〜 4(初期値 1)

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