loop-animation

波打つ地形Wave Mesh

斜め上から見下ろした格子の地形が、波紋・交差波・ノイズで上下にうねり、手前の面が奥の線を隠します。

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

斜め上から見下ろした格子の地形が、波紋・交差波・ノイズでうねる。隠面処理つき

このシーンで作る

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

どう計算しているか

  1. 「分割数」×「分割数」の格子点を作り、座標 (u, v) を 45° 回転させてひし形に置きます。縦方向を「見下ろす角度」で縮め、高さぶんだけ上へずらすことで、簡易的な斜め投影にしています。
  2. 高さは、波紋なら中心からの距離 r を使った sin(2π(r·「波の細かさ」 − 周期数·t))、交差波なら u 方向の sin と v 方向の cos の積、ノイズなら時間方向に閉じたノイズで決めます。波紋は外側ほど少し弱めます。
  3. マス目は奥から手前へ、斜めの列(i + j が等しい列)ごとに描きます。「隠面処理」がオンのときは、各マスを先に背景色で塗ってから枠線を描くので、後から描く手前のマスが奥の線を隠します。
  4. 色は行番号でパレットを順に使います。「線」を横線のみにすると、各マスの上下の辺だけを描きます。
h = sin(2π(|uv|·freq − cycles·t)),  Y = (u+v)·tilt/√2 − amp·h

ループがつながる理由

波紋と交差波の時間の項は整数の「1ループの周期数」× t なので、t=1 で位相がちょうど整数周期進んで形が戻ります。ノイズは始めと終わりで同じ値になるように作ったノイズを使っています。

調整できるパラメータ

形

波波紋・交差波・ノイズ
分割数6 〜 60(初期値 26)
大きさ0.4 〜 1.6(初期値 1)
見下ろす角度0.15 〜 1(初期値 0.5)
隠面処理オン/オフ(初期値 オン)
線格子・横線のみ
線幅0.5 〜 8(初期値 2)

動き

高さ0 〜 200(初期値 60)
波の細かさ0.5 〜 10(初期値 3)
1ループの周期数1 〜 4(初期値 1)

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