loop-animation

ボロノイ・シェーダーVoronoi Cells

整数周波数で漂う母点から最も近い点ごとに画面を分けるボロノイ分割を、細胞や境界線、等距離線で描くシェーダーのループです。

WebGL2 のシェーダーで、画素ごとに計算して描いています。初期設定で再生しています。

整数周波数で漂う母点がつくるボロノイ分割。細胞・境界線・等距離線で描ける(WebGL2)

このシーンで作る

パラメータ、色、エフェクトを変えて、GIF・APNG・WebP・MP4・WebM で書き出せます。

どう計算しているか

  1. 「母点の数」の点を「シード」から作る疑似乱数で画面に散らし、それぞれを「漂う大きさ」·(sin 2π(fx·t + h), cos 2π(fy·t + h)) だけ動かします。fx, fy は 1 か 2 の整数です。
  2. GPU 上で各ピクセルについてすべての母点までの距離を測り、一番近い距離 d1 と二番目に近い距離 d2、一番近い母点の番号を求めます。どの母点に最も近いかで画面を分けたものがボロノイ分割です。
  3. d2 − d1 は境界線上で 0 になるので、これが「境界の太さ」より小さいところを境界とみなします。「描き方」が細胞なら境界の内側を母点ごとの色で塗り、「細胞の丸み」で角を削ります。
  4. 等距離線では、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)

同じ分類のシーン(点・軌道)