反応拡散風・シェーダーTuring Pattern
複数方向の波を重ねてしきい値で切り分け、豹柄やサンゴ、迷路のような斑点や縞をうごめかせるシェーダーの模様です。
複数方向の波を重ねてしきい値で切り、豹柄・サンゴ・迷路のような斑点や縞をうごめかせる(WebGL2)
このシーンで作るパラメータ、色、エフェクトを変えて、GIF・APNG・WebP・MP4・WebM で書き出せます。
どう計算しているか
- 「波の方向の数」だけ、向きを180°の範囲に等分した平面波 cos(p·方向·細かさ + 2πwt + 初期位相) を足し合わせて平均します。平面波は一方向にだけ縞が並ぶ波です。
- その値をしきい値で白黒に分けます。しきい値が高いと値の大きい所だけが残って斑点に、0付近だと迷路状の縞に、低くして反転すると穴あきの模様になります。
- 境界は fwidth(隣の画素との値の差)を使った smoothstep でぼかし、ギザギザを抑えています。
- 計算の前に、座標を時間で動くなめらかな揺らぎ(ゆっくり動く波の重ね合わせ)で少しずらし、「有機的なゆがみ」で量を変えます。「領域ごとに色分け」も同じ揺らぎでパレットの色を混ぜて決めます。
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) |
同じ分類のシーン(タイル・格子)
- グリッド × 位相Ripple Grid格子に並んだ図形が、中心からの距離などで決まる時間差をもって伸縮・回転・公転し、波紋のような動きを作ります。
- 図と地の反転Flip Tiles市松模様の正方形が90°回転し、回り終えるたびに図と地が入れ替わって、同じ模様が続いていく反転タイルです。
- 十字・図と地Cross Tiles平面をすき間なく埋める十字形が90°回転し、前半と後半で図と地が入れ替わって模様が途切れずに続きます。
- 三角・六角タイルTri / Hex Tiling三角形や六角形の敷き詰めが位置ごとの時間差で回転し、重なった部分をXOR合成で抜いて模様を作ります。
- トルシェ・タイルTruchet Flow四分円や対角線を描いた正方形タイルが波のように90°ずつ回転し、つながった曲線の迷路が組み替わり続けます。
- スライドパズルSlide Grid格子の行が左右に1マス、続いて列が上下に1マスずれる動きを交互の向きで繰り返す、スライドパズルのような模様です。
- 網点Halftone Waves印刷の網点のように並んだ点の大きさを、円軌道を回る波源から広がる波の重ね合わせで変化させます。
- 歪む市松Warp Checker市松模様の上を見えないレンズが円軌道で周回し、模様を膨らませたりへこませたりするオプアートです。
- ドミノ倒しDomino Wave並んだ板が端から順に倒れて隣の板にもたれかかり、しばらく止まったあと逆の順で起き上がるドミノの動きです。
- 折り紙Origami Foldマスごとの正方形が対角線で半分に折れて裏の色を見せ、また開いて元に戻る、折り紙のような動きです。
- ヘリンボーンHerringbone杉綾模様に組んだ長方形のレンガが、長い辺を軸に1枚ずつ裏返って色が入れ替わっていく動きです。
- 菱形・5回対称Rhombus Rosette太い菱形と細い菱形を同心円状のリングに並べ、リングごとに時間差をつけて半回転させる回転対称の模様です。
- ピクセルの崩落Pixel Fallドット絵の図形がブロックごとに下へ崩れ落ち、画面の上から降ってきて元の位置に積み上がる動きです。
- SDF・ドメイン反復GLGoo Grid格子状に繰り返した距離関数の図形が、隣同士で溶け合いながら伸縮・回転・公転するシェーダーの模様です。