loop-animation

マーブル・シェーダーMarbling

絵の具を水に浮かべて混ぜたようなマーブル模様を、ノイズで座標を何度もゆがめて作り、ゆっくり流します。

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

絵の具を水に流したようなマーブル模様が、渦を巻きながらゆっくり流れる(WebGL2)

このシーンで作る

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

どう計算しているか

  1. 画素の座標に「模様の大きさ」を掛け、ノイズの値だけ座標をずらします。これを「混ぜる回数」だけ繰り返し、ずらした座標でまたノイズを引くので、渦を巻くように混ざった形になります。「渦の強さ」はずらす量です。
  2. ここで使うノイズは、向きと細かさの違う 7 つの平面波(一方向に進む sin 波)を足し合わせたもので、「シード」で向きや位相の組み合わせが変わります。
  3. ゆがめた座標 q から v = q.x·「縞の数」/4 + q.y·0.15 という斜めの縞の値を作ります。直線の縞が座標のゆがみで曲がり、マーブル模様に見えます。
  4. なめらかは sin(2v) でパレットのグラデーションを引き、縞は v の整数部分で色を切り替え、細線は v の整数の境目だけを描きます。
q ← q + warp·(n(q, t), n(q + 5.2, t)),  v = q.x·bands/4 + 0.15·q.y

ループがつながる理由

ノイズを作る各平面波は、時間の項が ±1 か ±2 の整数 × 2πt です。t=1 で全ての波がちょうど整数周期進んで元に戻るため、それを何度重ねたゆがみも元に戻ります。

調整できるパラメータ

形

描き方なめらか・縞・細線
模様の大きさ0.5 〜 8(初期値 2.2)
縞の数1 〜 30(初期値 6)

動き

渦の強さ0 〜 3(初期値 1.1)
混ぜる回数1 〜 4(初期値 3)
シード0 〜 99(初期値 2)

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