loop-animation

反応拡散風・シェーダーTuring Pattern

複数方向の波を重ねてしきい値で切り分け、豹柄やサンゴ、迷路のような斑点や縞をうごめかせるシェーダーの模様です。

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

複数方向の波を重ねてしきい値で切り、豹柄・サンゴ・迷路のような斑点や縞をうごめかせる(WebGL2)

このシーンで作る

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

どう計算しているか

  1. 「波の方向の数」だけ、向きを180°の範囲に等分した平面波 cos(p·方向·細かさ + 2πwt + 初期位相) を足し合わせて平均します。平面波は一方向にだけ縞が並ぶ波です。
  2. その値をしきい値で白黒に分けます。しきい値が高いと値の大きい所だけが残って斑点に、0付近だと迷路状の縞に、低くして反転すると穴あきの模様になります。
  3. 境界は fwidth(隣の画素との値の差)を使った smoothstep でぼかし、ギザギザを抑えています。
  4. 計算の前に、座標を時間で動くなめらかな揺らぎ(ゆっくり動く波の重ね合わせ)で少しずらし、「有機的なゆがみ」で量を変えます。「領域ごとに色分け」も同じ揺らぎでパレットの色を混ぜて決めます。
v = avg_i cos(k·(p·d_i) + 2π·w_i·t + φ_i),  a = step(th, v)

ループがつながる理由

各平面波の時間の係数 w は「動きの速さ」の1倍か2倍に符号をつけた整数で、揺らぎを作る波の時間周波数も整数です。そのためどの波も1ループで整数周期進み、模様全体が最初の状態に戻ります。

調整できるパラメータ

形

模様斑点・迷路・穴あき
模様の細かさ5 〜 80(初期値 26)
波の方向の数3 〜 12(初期値 7)
有機的なゆがみ0 〜 1.5(初期値 0.45)
領域ごとに色分けオン/オフ(初期値 オン)

動き

動きの速さ1 〜 4(初期値 1)
シード0 〜 99(初期値 3)

同じ分類のシーン(タイル・格子)