loop-animation

干渉縞・シェーダーInterference

円を描いて周回する複数の波源から広がる波を重ね合わせ、渦を巻くように動く干渉縞を描きます。

WebGL2 のシェーダーで、画素ごとに計算して描いています。初期設定で再生しています。

周回する複数の波源から広がる波が重なり、干渉縞が渦を巻く(WebGL2)

このシーンで作る

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

どう計算しているか

  1. 「波源の数」ぶんの点を、半径「波源の軌道」の円周上に等間隔で置きます。偶数番目と奇数番目で逆向きに、「波源の周回」の回数だけ回します。
  2. シェーダー(GPU で画素ごとに計算するプログラム)で、各画素から各波源までの距離 d を求め、sin(2π(d·「波の細かさ」 − 「1ループの波の数」·t)) を足し合わせて平均します。波源から同心円状に波が外へ進みます。
  3. 波の山と谷が強め合ったり打ち消し合ったりして、干渉縞ができます。2値では合計が正か負かで塗り分け、細線では合計が 0 になる境目だけを細い線で描きます。
  4. 色帯では、合計値を「色帯の段数」で区切り、1段おきに色を付けて残りを透明にします。
v = (1/n)·Σ sin(2π(|p − sᵢ(t)|·freq − cycles·t))

ループがつながる理由

波の位相の項も、波源の回転角の項も、整数 × t です。t=1 で波はちょうど整数周期進み、波源は整数周して元の位置に戻るので、模様が最初と一致します。

調整できるパラメータ

形

波源の数1 〜 8(初期値 3)
波の細かさ2 〜 80(初期値 7)
描き方2値・色帯・細線
色帯の段数2 〜 12(初期値 4)

動き

波源の軌道0 〜 1.2(初期値 0.45)
1ループの波の数1 〜 6(初期値 1)
波源の周回-3 〜 3(初期値 1)

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