ボロノイ・シェーダーVoronoi Cells
整数周波数で漂う母点から最も近い点ごとに画面を分けるボロノイ分割を、細胞や境界線、等距離線で描くシェーダーのループです。
整数周波数で漂う母点がつくるボロノイ分割。細胞・境界線・等距離線で描ける(WebGL2)
このシーンで作るパラメータ、色、エフェクトを変えて、GIF・APNG・WebP・MP4・WebM で書き出せます。
どう計算しているか
- 「母点の数」の点を「シード」から作る疑似乱数で画面に散らし、それぞれを「漂う大きさ」·(sin 2π(fx·t + h), cos 2π(fy·t + h)) だけ動かします。fx, fy は 1 か 2 の整数です。
- GPU 上で各ピクセルについてすべての母点までの距離を測り、一番近い距離 d1 と二番目に近い距離 d2、一番近い母点の番号を求めます。どの母点に最も近いかで画面を分けたものがボロノイ分割です。
- d2 − d1 は境界線上で 0 になるので、これが「境界の太さ」より小さいところを境界とみなします。「描き方」が細胞なら境界の内側を母点ごとの色で塗り、「細胞の丸み」で角を削ります。
- 等距離線では、d1 に「等距離線の密度」を掛けた値の整数ごとに線を引き、母点を中心とする同心円状の線と境界線を重ねて描きます。
e = d₂ − d₁, sᵢ(t) = bᵢ + A·(sin 2π(fₓt+h), cos 2π(f_y t+h))ループがつながる理由
母点の動きは周波数が整数の sin・cos だけでできているため、t = 1 ですべての母点が元の位置に戻り、分割全体も最初のフレームと一致します。
調整できるパラメータ
形
| 母点の数 | 3 〜 40(初期値 18) |
|---|---|
| 描き方 | 細胞・境界線・等距離線 |
| 境界の太さ | 0 〜 0.1(初期値 0.012) |
| 等距離線の密度 | 4 〜 80(初期値 30) |
| 細胞の丸み | 0 〜 1(初期値 0) |
動き
| 漂う大きさ | 0 〜 0.6(初期値 0.18) |
|---|---|
| シード | 0 〜 99(初期値 4) |
同じ分類のシーン(点・軌道)
- 点・公転Dot Orbit格子に並んだ点がそれぞれ小さな円や往復の軌道をたどり、点ごとの位相のずれで波紋や渦の錯視が生まれるループです。
- 軌道上の点Lissajous Dots縦と横で周波数の異なる正弦波がつくるリサージュ曲線の上を、たくさんの点が等間隔に並んで行進するループです。
- 周転円・フーリエEpicycles回転する円をいくつも連ねた腕の先端が、整数周波数の重ね合わせによって対称なロゼット模様を描き続けるループです。
- 振り子の波Pendulum Wave1ループの往復回数が1回ずつ違う振り子を並べ、揃っては崩れる波や渦のような模様をつくるループです。
- 糸かけString Art円周上の点 i から点 i×m へ糸を張る掛け算の糸かけで、両端の点が回転するにつれて包絡線の形が変わるループです。
- 群れFlock小さな矢じりの群れが整数周波数の軌道に沿って泳ぎ、集まったり散ったりを繰り返す魚群のようなループです。
- ニュートンのゆりかごNewton's Cradle端の玉が振り下ろされてぶつかると反対側の玉が跳ね上がる、ニュートンのゆりかごを周期関数で再現したループです。
- 惑星の軌道Orbital Dance公転周期が整数比の2つの惑星を一定間隔で線で結び、線の残像が花のような模様を描いていくループです。
- パーティクルの図形Particle Shapes点が集まって図形をつくり、渦を巻きながら散らばって次の図形へ集まり直すことを繰り返すループです。
- SDF・シェーダーGLMetaballs整数周波数で周回する複数の円の距離関数をなめらかに合成し、液体のように溶け合う形を描くシェーダーのループです。