SDF・ドメイン反復Goo Grid

どう計算しているか

1. 画面の各画素で、距離関数（ある点が図形の境界からどれだけ離れているかを返す関数）を計算します。座標をマスの大きさで割って切り捨て、どのマスにいるかを求めます。
2. 自分のマスと周囲8マスの図形までの距離を求め、smooth min（2つの距離を、なだらかにつないで小さい方を取る関数）で合成します。「溶け具合」を大きくすると、近くの図形同士が粘りけのある液体のようにつながります。
3. 各マスの時間のずれは「位相のずれ方」（中心からの距離、斜め、角度、市松）×「ずれ量」です。伸縮は座標を縮めて距離を求め直し、回転は回転行列で座標を回し、公転は中心を円軌道でずらします。
4. 「描き方」が塗りなら距離が負の部分を塗り、等高線や色帯なら距離を「線の密度」倍して小数部分や整数部分で線や帯を描きます。「線の流れ」で線が外側や内側へ流れます。

d = smin_{3×3}(sd(rot(p − c_ij(e)))),  e = ease(fract(t − ph·spread))

ループがつながる理由

伸縮と公転は cos・sin の1周期、回転は図形の対称角（「強さ」が大きいときはその2倍）なので、各マスは1ループで元の形に戻ります。線の流れも色数の整数倍だけずらすので、線の位置と色がループの境目でそろいます。

調整できるパラメータ

形

動き

同じ分類のシーン（タイル・格子）

• グリッド × 位相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ドット絵の図形がブロックごとに下へ崩れ落ち、画面の上から降ってきて元の位置に積み上がる動きです。
• 反応拡散風・シェーダーGLTuring Pattern複数方向の波を重ねてしきい値で切り分け、豹柄やサンゴ、迷路のような斑点や縞をうごめかせるシェーダーの模様です。