loop-animation

ループするノイズNoise Field

格子状に並べた線分や点、四角が、時間方向に閉じたノイズに従って回転・伸縮し、場全体がうねるように動きます。

Canvas 2D で、図形を 1 つずつ計算して描いています。初期設定で再生しています。

時間方向に閉じたグラディエントノイズで、線分・点・四角の場がうねる

このシーンで作る

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

どう計算しているか

  1. 画面を「分割数」で決まるマス目に区切り、各マスの中心に要素を1つ置きます。
  2. 各点で、なめらかに変化する乱数の場(勾配ノイズ)を位置と時間から引き、値 nv(おおよそ −1〜1)を得ます。「ノイズの細かさ」は座標に掛ける倍率で、大きいほど隣どうしの値が大きく変わります。
  3. 線分は nv·2π·「回転量」だけ回転させます。点は nv に応じて半径を変え、四角と十字は回転と大きさの両方を nv で変えます。
  4. 色は nv を 0〜1 に直してパレットの数で区切り、値の範囲ごとに色を割り当てます。
n(t) = (N(x,y,s·t)·(1−t) + N(x,y,s·(t−1))·t) / √((1−t)²+t²)

ループがつながる理由

時刻 t のノイズと t−1 のノイズを t の割合で混ぜ合わせ、分散が変わらないように割り戻しています。t=0 と t=1 ではどちらも同じ断面を参照するので、最後のフレームが最初のフレームとつながります。「変化の大きさ」はこの時間方向の移動距離です。

調整できるパラメータ

形

要素線分・点・四角・十字
分割数6 〜 80(初期値 30)
長さ・大きさ0.1 〜 2(初期値 0.9)
線幅0.5 〜 14(初期値 3)

動き

ノイズの細かさ0.3 〜 8(初期値 1.8)
変化の大きさ0.2 〜 3(初期値 1)
回転量0.25 〜 3(初期値 1)

同じ分類のシーン(線・波)