Dynamic Engine — 音の強さだけでなく、変わり方を眺める
マイク入力から光の輪や粒子を動かすDynamic Engine。バイブコーディングでつくった映像の実験を、音の強さ・変化量・ビート検出から掘り下げる。
音を映像にするとき、音量に合わせて図形を大きくするだけでも反応はつくれる。Dynamic Engineでは、音がどれだけ強いかに加えて、どう変わったかも映像に使う。AIと対話しながら、バイブコーディングでつくった実験的なWebアプリだ。
CONNECT SENSORSを押すとマイクの使用許可を求める。名称に「センサー」とあるが、現在のコードで使っている入力はマイクだ。声、手拍子、周囲で流れる音楽などを拾い、光の輪や粒子へ変換する。
音の強さ、変化量、その変化量
マイク入力はWeb Audio APIのAnalyserNodeで周波数ごとの値に分ける。その値の平均を、このアプリでは音の「エネルギー」として扱う。校正された音圧やデシベルを測っているわけではなく、映像を動かすための指標である。
前のフレームからエネルギーがどれだけ変わったかが、画面のVELOCITY。その変化量がさらにどれだけ変わったかが、ACCELERATIONになる。
同じ強さの音が続くときと、急に音が立ち上がるときでは、平均値が近くても変化量は違う。持続する音は光の中心を膨らませ、急な音は火花のような粒子を生む、という反応の違いをつくれる。
これらはフレーム間の差分であり、物体の速度や加速度ではない。経過時間で割る計算もしていないため、画面の更新頻度が変わると値の意味も変わる。
ビートとアタックを、別の反応にする
ビートの判定には低い周波数帯の強さと、エネルギーの変化の勢いを使う。条件を満たすと色相が変わり、中心から粒子が広がり、画面が揺れる。
アタックの判定は、音の強さが急に増えたかどうかを見る。こちらは画面のあちこちから鋭い粒子を出す。低音の拍と、手拍子のような急な立ち上がりを、別々の映像のきっかけにしている。
これはBPMを推定したり、音楽の拍を正確に追跡したりする仕組みではない。周波数帯と変化量に条件を置いて、音に反応する映像をつくる方法だ。
感度の表示と、実際に使われる値
コードには過去300フレームのエネルギーを残し、平均と標準偏差を求める処理がある。画面では「直近5秒」と紹介されているが、約5秒になるのは毎秒60フレームで更新できた場合だ。
BASE SENSITIVITYのスライダーは、ビート検出のしきい値に使われる。値を上げると平均からの差を大きく要求するため、ビートの条件は厳しくなる。一方、AUTO-SENSITIVITYとして表示する係数は計算されているものの、現在のコードでは描画や検出へ直接掛けていない。表示名だけで、すべてが自動調整されると受け取らないほうが実装に近い。
VISUAL INTENSITYは中心の光の大きさを調整する。PITCH RANGEの表示は、ある周波数範囲で最も強い成分を選ぶ簡易的な推定で、声や楽器の音程を正確に測るチューナーとは用途が異なる。
音を聞く以外の入口として
この実験の面白さは、音の変わり方を、図形の大きさ、回転、色、火花へ割り当てられるところにある。同じ入力でも、対応のルールを変えると違う映像になる。
次に育てるなら、更新頻度に依存しない差分計算、自動感度の係数をどこに使うか、マイクを明示的に止める操作が検討点になる。この記事はコードを読んだ範囲の説明であり、音楽ジャンルや端末を変えた際の検出精度は評価していない。