🗺️ 全体像 — 3人の登場人物とデータの流れ

🎭 3人の登場人物

VJam の p5 まわりは、ざっくり3つの部品でできている。

🖌️ ① プリセット(絵を描く本体)

src/presets/p5/*.js。plasma-wave hypnotic equalizer など 378個。 自分で書くコードが入る場所はここ。

🎬 ② P5Engine(舞台監督)

src/engines/p5-engine.js。プリセットを動かす管理役。デッキ A / B ごとに1人。 仕事 = プリセットを起動する・重ねる(最大5層、モバイル3層)・フェードで出し入れ・毎フレーム音を配る。

📇 ③ registry(目録)

src/presets/registry.js。378個を名前で引ける台帳。

'p5:plasma-wave': () => import('./p5/plasma-wave.js')

の形で 名前 → ファイルを対応づける。 使う時に初めて読み込む(= 遅延ロード。最初に全部読まないので軽い)。

🔊 データの流れ:音が絵になるまで

🎵 マイク / 曲
   ↓
Web Audio API        ← ブラウザ標準。音を生の数字にする(数百個でゴチャゴチャ)
   ↓
AudioAnalyzer        ← VJam自作(audio-analyzer.js)。生データを見て
                        「低音はこれくらい」「今 拍が来た」を計算(=要約する人)
   ↓
AudioData            ← 7つの数字に整理(audio-data.js)
   ↓
P5Engine.updateAudio(audioData)   ← 舞台監督が受け取る
   ↓
各プリセット.updateAudio(audioData) ← 起動中の全プリセットに配る
   ↓
🎨 プリセットがその数字で絵を変える

ポイント: プリセット側は Web Audio API の難しい部分を一切触らなくていい。 配達されてくる「7つの数字」を使うだけ。面倒な解析は AudioAnalyzer が肩代わりしている。

🎨 7つの数字 = VJ の絵の具パレット

audio-data.js が持つのは、たった7つ。

数字	意味	絵でどう使うか
beat	拍が来た瞬間(true/false)	色を切り替える・フラッシュ・形をパッと変える
bpm	テンポ(120 とか)	アニメの速度を曲に合わせる
strength	その拍の強さ	反応の大きさを加減する
rms	全体の音量	画面全体の明るさ・密度
bass	低音(キック/ベース)	主役。脈動・拡大・爆発
mid	中音(声/リード/スネア)	中間の揺れ・うねり
treble	高音(ハイハット/シンバル)	きらめき・粒子・細かい動き

実戦の勘所:

• 🥁 bass が一番の働き者。キックでドンッと画面が動くのは大体これ
• ✨ treble はキラキラ担当。粒子や細部の揺れ
• ⚡ beat は瞬間芸。拍の瞬間だけ色が変わる/弾ける

💡 これが VJ 作りの本質 同じ7つの数字でも、絵のどの値に掛けるかで全く違うビジュアルになる。