SDF・シェーダーMetaballs
整数周波数で周回する複数の円の距離関数をなめらかに合成し、液体のように溶け合う形を描くシェーダーのループです。
整数周波数で周回する球が smooth-min で溶け合う。等高線や色帯でも描ける（WebGL2）
このシーンで作るパラメータ、色、エフェクトを変えて、GIF・APNG・WebP・MP4・WebM で書き出せます。
どう計算しているか
- GPU 上で画面の各ピクセルについて、「球の数」の円それぞれまでの距離関数（ある点が図形の境界からどれだけ離れているかを返す関数）を計算します。
- 各円の中心は「軌道の大きさ」·(sin 2π(fx·t + h), cos 2π(fy·t + h)) で動きます。fx, fy は 1 か 2 の整数で、h や半径の違いは「シード」から作る疑似乱数で決めます。
- 距離を合成するときは単純な最小値ではなく、指数と対数を使ったなめらかな最小値（smooth min）を使います。「溶け具合」が大きいほど、近づいた円同士が太い首でつながります。
- 「描き方」が塗りなら距離が負の部分を塗ります。等高線は距離に「線の密度」を掛けた値の整数ごとに線を引き、色帯はその値の整数部分で色を塗り分けます。
d = smin_k(|p − cᵢ(t)| − rᵢ), cᵢ = A·(sin 2π(fₓt+h), cos 2π(f_y t+h))ループがつながる理由
円の中心は整数周波数の sin・cos で動くので t = 1 で元の位置に戻ります。等高線や色帯は「線の流れ」×色数（色帯は色数+1）本ぶんだけ値をずらすため、1 ループで色の並びがちょうど一巡して元の見た目と一致します。
調整できるパラメータ
形
| 球の数 | 2 〜 16（初期値 7） |
|---|---|
| 大きさ | 0.05 〜 0.6（初期値 0.2） |
| 溶け具合 | 0.001 〜 0.8（初期値 0.25） |
| 描き方 | 塗り・等高線・色帯 |
| 線の密度 | 2 〜 60（初期値 14） |
| 線幅(px) | 0.5 〜 12（初期値 2.5） |
動き
| 軌道の大きさ | 0 〜 1.2（初期値 0.55） |
|---|---|
| 線の流れ | 0 〜 4（初期値 1） |
| シード | 0 〜 99（初期値 3） |
同じ分類のシーン（点・軌道）
- 点・公転Dot Orbit格子に並んだ点がそれぞれ小さな円や往復の軌道をたどり、点ごとの位相のずれで波紋や渦の錯視が生まれるループです。
- 軌道上の点Lissajous Dots縦と横で周波数の異なる正弦波がつくるリサージュ曲線の上を、たくさんの点が等間隔に並んで行進するループです。
- 周転円・フーリエEpicycles回転する円をいくつも連ねた腕の先端が、整数周波数の重ね合わせによって対称なロゼット模様を描き続けるループです。
- 振り子の波Pendulum Wave1ループの往復回数が1回ずつ違う振り子を並べ、揃っては崩れる波や渦のような模様をつくるループです。
- 糸かけString Art円周上の点 i から点 i×m へ糸を張る掛け算の糸かけで、両端の点が回転するにつれて包絡線の形が変わるループです。
- 群れFlock小さな矢じりの群れが整数周波数の軌道に沿って泳ぎ、集まったり散ったりを繰り返す魚群のようなループです。
- ニュートンのゆりかごNewton's Cradle端の玉が振り下ろされてぶつかると反対側の玉が跳ね上がる、ニュートンのゆりかごを周期関数で再現したループです。
- 惑星の軌道Orbital Dance公転周期が整数比の2つの惑星を一定間隔で線で結び、線の残像が花のような模様を描いていくループです。
- パーティクルの図形Particle Shapes点が集まって図形をつくり、渦を巻きながら散らばって次の図形へ集まり直すことを繰り返すループです。
- ボロノイ・シェーダーGLVoronoi Cells整数周波数で漂う母点から最も近い点ごとに画面を分けるボロノイ分割を、細胞や境界線、等距離線で描くシェーダーのループです。