loop-animation

ジグザグ・シェブロンChevron Flow

山形に折れ曲がった色の縞が流れ続け、ジグザグの深さが呼吸するように変わります。

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

山形の縞が流れ続け、ジグザグの角度が呼吸するように深くなったり浅くなったりする

このシーンで作る

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

どう計算しているか

  1. ジグザグの形は、三角波 1 − 4|fract(u) − 0.5| と正弦波を「角の鋭さ」の割合で混ぜて作ります。u = x/「ジグザグの幅」で、さらに sin(2πt)·「横方向のずれ」だけ横に揺らします。
  2. 高さ「縞の太さ」の帯の上辺と下辺を同じジグザグでずらして塗り、帯を縦に積み重ねます。色はパレットの色に背景色を1つ加えた列を順番に使います。
  3. ジグザグの深さは「ジグザグの深さ」× (1 − b/2 + b/2·cos 2πt) で、b は「深さの呼吸」です。全体は「全体の角度」だけ回転させてから描きます。
y = k·band + shift + amp(t)·zig(x/period + s·sin 2πt)

ループがつながる理由

縞は「流れの速さ」×色数×縞の太さ だけ動き、色数ぶんの帯は色の並び1周分にあたるので、t=1 では色の並びが元と同じになります。深さと横ずれは cos(2πt) と sin(2πt) で決まるため、これらも元に戻ります。

調整できるパラメータ

形

縞の太さ10 〜 150(初期値 40)
ジグザグの幅40 〜 600(初期値 180)
角の鋭さ0 〜 1(初期値 1)
全体の角度-90 〜 90(初期値 0)

動き

ジグザグの深さ0 〜 300(初期値 80)
深さの呼吸0 〜 1(初期値 0.6)
流れの速さ0 〜 4(初期値 1)
横方向のずれ0 〜 1(初期値 0.25)

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