loop-animation

等高線の地図Contour Map

時間とともに形を変えるノイズの地形を等高線で描き、地図のように5本ごとに太い線を入れます。

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

時間方向に閉じたノイズの地形を等高線で描く。地図のように5本ごとに太い計曲線が入る

このシーンで作る

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

どう計算しているか

  1. 画面を「解像度」で格子に区切り、各格子点の高さを、時間方向に閉じたノイズから 0〜1 の値として求めます。「地形の細かさ」はノイズを引く座標の倍率です。
  2. 高さ 1/本数、2/本数…ごとに等高線を引きます。各マスの4隅が基準より高いか低いかを 4 ビットの番号にまとめ、その番号に応じてマスの中に線分を引きます(マーチングスクエア法)。
  3. 線分の端点は、辺の両端の高さを直線補間して、ちょうど基準の高さになる位置に置きます。これで隣のマスの線分とつながり、なめらかな曲線になります。
  4. 「計曲線」がオンなら5本ごとに線幅を 2.4 倍にし、「高さで色分け」がオンなら高さに応じてパレットの色を変えます。
code = Σ [vₖ > iso]·2ᵏ,  端点 = x + (iso − a)/(b − a)·cell

ループがつながる理由

地形のもとになるノイズは、時刻 t と t−1 の断面を混ぜ合わせたもので、t=0 と t=1 で同じ値になります。地形が元に戻るので、等高線も同じ形に戻ります。

調整できるパラメータ

形

解像度30 〜 160(初期値 90)
等高線の本数4 〜 40(初期値 16)
線幅0.5 〜 6(初期値 1.5)
計曲線(5本ごとに太く)オン/オフ(初期値 オン)
高さで色分けオン/オフ(初期値 オン)

動き

地形の細かさ0.3 〜 5(初期値 1.6)
変化の大きさ0.2 〜 3(初期値 0.9)

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