SDF・等高線Contour Tunnel

どう計算しているか

1. WebGL のシェーダーで、画面の各ピクセルについて「図形 A」「図形 B」の距離関数（ある点が図形の境界からどれだけ離れているかを返す関数）を計算します。
2. 2つの距離を混ぜる割合を 0 → 1 → 0 と変えるので、図形 A から B へ変形してまた戻ります。「モーフの強さ」でどこまで B に近づくかを決めます。
3. 距離に「縞の数」を掛けて時刻を引き、その小数部分で縞を作ります。小数部分が「縞の太さ」より小さいところだけ塗るので、等高線状の帯が並び、時刻とともに帯が外へ流れて見えます。「多色の縞」では整数部分を色番号に使います。
4. 描く前に座標を回転させます。回転角は中心からの距離 × sin(2πt) ×「ねじれ」と「回転」の和なので、遠いほど強くねじれ、全体も回ります。

v = d(p)·freq − t·cycles·P,  塗る: fract(v) < duty

ループがつながる理由

縞は1ループで「流れる速さ」×色数ぶんの整数本だけ移動するので、縞の位置も色の順番も元に戻ります。モーフの割合とねじれは t = 0 と t = 1 でどちらも 0 になり、「回転」は整数周だけ回ります。

調整できるパラメータ

形

動き

同じ分類のシーン（放射・回転）

• 放射・回転対称Polar Rings同心円上に並んだ図形がリングごとに少しずつ遅れて回り、渦や花のような模様が浮かんでは消えるループアニメーションです。
• 形状モーフShape Morph丸・三角・四角などの輪郭を同じ数の点で表し、点どうしを補間して形を滑らかに変形させ続けるループアニメーションです。
• 入れ子の回転Twist Stack大きさの違う多角形を中心にそろえて重ね、内側ほど遅れて回すことで、ねじれた渦が現れてはほどけるループアニメーションです。
• 万華鏡Kaleidoscope扇形の中で図形を動かし、それを回転と鏡写しで円周に並べることで、万華鏡のような対称模様を作るループアニメーションです。
• 葉序・螺旋Phyllotaxis黄金角ずつ角度をずらして点を並べ、ひまわりの種のような螺旋模様が中心から湧き出して外へ流れ続けるループアニメーションです。
• 無限ズームInfinite Zoom多角形の辺上の点を結んで一回り小さい多角形を作る操作を繰り返し、その入れ子の渦へ無限に吸い込まれていくループアニメーションです。
• 遠近トンネルPerspective Tunnel遠くから迫ってくるリングの列を遠近法で描き、うねる軸とねじれでくねった筒の中を進んでいるように見せるループアニメーションです。
• 花の開閉Bloom何重にも重なった花弁が外側の層から時間差で開いては閉じ、並べると花畑のように波打つループアニメーションです。
• 時計の針の群れClock Swarm格子状に並んだ時計の2本の針が一斉に回り、模様 A と模様 B の間を行き来するループアニメーションです。
• スピログラフSpirograph大きな歯車の内側や外側を小さな歯車が転がり、穴に差したペンが花模様を描いていくループアニメーションです。
• 吸い込まれる渦Black Hole極座標の格子が渦を巻きながら中心の穴へ吸い込まれ続け、中心に近いほど強くねじれるループアニメーションです。