loop-animation

オシロスコープOscilloscope

オシロスコープのビームがリサージュ図形や波形をなぞり、後ろに残光の尾を引いて光ります。

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

XY 表示のリサージュ図形や波形が、蛍光面の残光とにじみをまとって光る

このシーンで作る

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

どう計算しているか

  1. XY モードでは、ビームの位置を x = sin(2π·「横の周波数」·s + δ)、y = sin(2π·「縦の周波数」·s) で決めます。これはリサージュ図形(縦横の振動を組み合わせた曲線)で、δ は「位相の回転」で回るずれです。
  2. 波形モードでは、x を fract(s) で左端から右端へ走らせ、y を2つの sin の重ね合わせにします。右端から左端へ戻る区間は線を描きません。
  3. ビームの先頭は s = t·「ビームの周回数」で、そこから「残光の長さ」ぶん過去までを 360 本の短い線分で描きます。古い線分ほど透明度を (k/360)^1.6 で下げ、先頭には明るい点を置きます。
  4. 「にじみ」が 0 より大きいときは、太く薄い線を2回重ねてから本来の線を描き、光がにじむ様子を表します。
P(s) = R·(sin(2π·a·s + 2π·drift·t), sin(2π·b·s)),  s ∈ [head−len, head]

ループがつながる理由

周波数が整数なので、軌跡は s が 1 進むごとに同じ形に戻ります。ビームの位置は整数周回ぶん、位相のずれは整数回転ぶん進んで t=1 で終わるので、最後のフレームが最初と一致します。

調整できるパラメータ

形

表示XY(リサージュ)・波形
横の周波数1 〜 9(初期値 3)
縦の周波数1 〜 9(初期値 4)
大きさ0.3 〜 1(初期値 0.8)
目盛りオン/オフ(初期値 オン)
にじみ0 〜 1(初期値 0.7)
線幅0.5 〜 8(初期値 2.5)

動き

残光の長さ0.05 〜 1(初期値 0.55)
ビームの周回数1 〜 8(初期値 2)
位相の回転-3 〜 3(初期値 1)

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