時計から始めよう。
周期の長さを Tとします。経過時間をTで割ると、1回転の進み具合がわかります。その小数部分は0から1未満を繰り返します。2πを掛けると、角度に変換できます。
p = (t / T) mod 1
θ = 2πp
θ = 2πp
ダイヤルは、見えない値を見える形にします。0°では印が上、90°では右にあります。1回転すると、つながる要素がすべて出発点に戻ります。
ダイヤルが回り、線が上下する。
想像の風に、木がそっと傾く。
ひとつのリズムが、すべてをつなぎます。
共通のリズムを奏でる、小さな装置。
ダイヤルを回して、つながりを見よう。01 / 動きの応答
02 / 共通の時計
ダイヤルの周りをドラッグするか、矢印キーで動かせます。
位置を変えると時計が止まり、動きをじっくり観察できます。
信号
s = 0.55 × sin(θ − 0°)いまの値
+0.39同時に：木はダイヤルの角度のサインに従います。
考え方 / 共通の原因から生まれる動き
形は違っても、
同じ 瞬間。
円形のダイヤル、グラフの線、揺れる木が、ひとつの装置のように感じられる。そのつながりは、繰り返す周期のどこにいるか、という共通の値から生まれます。
左右に分かれた装置をつくりましょう。片側には自然の形と細い曲線、もう片側には目盛りのある円盤。共通の位相が、両方の表示をつなぎます。
木は手続き的なイラストです。風の信号はこのレッスン用につくったもので、写真や自然の計測データから得たものではありません。
ひとつの座標を読む。
ダイヤルの横方向の位置は、 sin(θ)に比例します。印が円を回ると、この座標は−1から1の間を滑らかに行き来します。その値を時間軸に沿って描くと、サイン波になります。
x = cx + r sin(θ)
y = cy − r cos(θ)
y = cy − r cos(θ)
グラフは同じサインを振幅Aで描きます。オレンジの点は現在の位相です。木の上の枝はその値で傾き、幹の根元は固定されています。
少し遅れるだけで、印象が変わる。
振幅は応答の大きさを、位相のずれは応答のタイミングを決めます。ずれφを引くと、木と曲線の動きがダイヤルより遅れます。
s = A sin(θ − φ)
遅れの秒数 = Tφ / 360°
遅れの秒数 = Tφ / 360°
90°の遅れでは、応答が4分の1周期遅れます。180°では符号が逆になり、元の信号が右に傾くと、遅れた信号は左に傾きます。細い点線は、遅れのない曲線です。
揺れの大きさをゼロにすると、線は平らになり、木も静止します。時計は回り続けます。距離とタイミングは別々に調整できます。
ひとつの更新で、すべてを動かす。
アニメーションの時刻をひとつ読み、位相をひとつ計算します。同じフレーム内で、その位相からダイヤル、グラフ、木を更新します。それぞれに別の時計を与えると、少しずつずれることがあります。
phase += elapsedSeconds / cycleSeconds
フレームごとに固定量を足すのではなく、経過時間を使います。そうすれば、更新の速い画面でも動きの速さは変わりません。この装置は、一時停止・非表示・画面外で止まり、同じ位置から再開します。動きを減らす設定では停止した状態で始まりますが、ダイヤルやスライダーは使えます。
自分で試す / 説明できるリズム
呼吸するように。
そして、 少し待たせる。
「同時に」を選び、周期を10秒、揺れを小さくします。次に90°の遅れを加えましょう。応答は時計より2.5秒遅れます。
90°で止めましょう。遅れがなければ木は最も右に傾きます。90°の遅れがあれば静止します。スライダーを動かす前に、位置を予想できますか？
装置へ戻る ↑動きの裏にある、小さな数学 +
// One shared phase, updated from elapsed seconds.
phase = (phase + deltaSeconds / cycleSeconds) % 1;
const theta = phase * 2 * Math.PI;
const phi = delayDegrees * Math.PI / 180;
const signal = amplitude * Math.sin(theta - phi);
// Dial position. Screen y increases downwards.
const x = cx + radius * Math.sin(theta);
const y = cy - radius * Math.cos(theta);
// The base stays fixed; the crown moves more.
const shift = maxSway * signal * heightFraction ** 2;高さに応じて曲げる方法は、イラストの技法です。枝や風を物理的に再現するものではありません。内部ではラジアンを使い、操作画面では度数で表示します。
もっと試してみようサイン波の別の使い方：水をつくる ↗