SonicBloomは、p5.jsとWeb Audio APIを活用して作られた、音と映像が調和したインタラクティブアート作品です。ペンタトニックスケールと黄金比に基づく音響理論と、物理演算によるパーティクルシステムが組み合わさり、ユーザーの操作に応じて美しい視覚・聴覚体験を生み出します。
- 🎵 音楽理論に基づく音響システム: ペンタトニックスケール、黄金比、倍音構造による調和の取れたサウンド
- ⚡ リアルタイム物理演算: 高度なパーティクルシステムによる自然な動きと相互作用
- 🖱️ 直感的インタラクション: マウス操作による即座の視覚・聴覚フィードバック
- 🎨 動的ビジュアルエフェクト: 5種類の異なるエフェクトモードと3秒間のドラッグトレイル
- 🚀 最適化されたパフォーマンス: オブジェクトプールとメモリ管理による滑らかな体験
- 🔧 設定駆動アーキテクチャ: カスタマイズ可能な全パラメータと統一されたエラーハンドリング
| 操作 | 効果 | 説明 |
|---|---|---|
| 初回クリック | 🔊 サウンドシステム開始 | Web Audio APIの制限により、最初のクリックで音声を有効化 |
| クリック | 💥 爆発エフェクト | クリック位置を中心とした爆発的パーティクル生成 |
| ドラッグ | 🌊 パーティクル操作 | マウス軌跡に沿ってパーティクルが引き寄せられ、3秒間の美しい軌跡を表示 |
| Space | ⏸️ 一時停止/再開 | アニメーションの停止・再開 |
| R | 🔄 リセット | 全パーティクルとエフェクトをリセット |
| M | 🔇/🔊 ミュート | サウンドシステムのオン/オフ |
| D | 📊 デバッグ情報 | パフォーマンス統計とシステム情報の表示 |
- 同時爆発を楽しむ: Spaceキーで一時停止中に複数箇所をクリックしてパーティクルをセット → 再開すると一斉に爆発！
- パーティクル誘導: ドラッグでパーティクルを引き寄せて誘導。素早くドラッグすると、より強力に引き寄せられます！
| キー | モード | 視覚効果 | 音響効果 | 特徴 |
|---|---|---|---|---|
| 1 | 🎆 爆発 | 放射状拡散、リバーブ効果 | 低音衝撃 + 高音煌めき | バランスの取れた基本モード |
| 2 | 🌈 トレイル | 軌跡表示、ディレイエコー | ペンタトニック旋律 | 美しい軌跡と余韻のあるサウンド |
| 3 | 🌙 虹色パルス | 色相変化、倍音フィルター | ハーモニック和音 | 色彩豊かな視覚と豊かな音響 |
| 4 | 🌍 重力 | 重力シミュレーション | ピッチベンド | 物理的リアリティのある動き |
| 5 | 🌀 渦巻き | 回転運動、LFO変調 | 空間的パンニング | 動的で立体的な体験 |
- 基準周波数: 432Hz（調和の取れた自然周波数）
- スケール: ペンタトニック（C-D-E-G-A）による癒しの音階
- 倍音構造: 黄金比（1.618）に基づく美しい音色
- 空間音響: ステレオパンニングによる立体音場
- 位置連動: マウス位置に応じた音程とパンニング
- 速度感応: ドラッグ速度による音量とエフェクト強度
- アンビエント: 70BPMの心拍リズムによる安らぎ
- リアルタイム合成: 全サウンドがリアルタイム生成
# 1. リポジトリをクローン
git clone https://github.com/takunagai/sonicbloom.git
cd sonicbloom
# 2. 依存関係をインストール
npm install
# 3. 開発サーバーを起動
npm run dev # http://localhost:8000注意: p5.soundライブラリのCORS制限により、ローカルHTTPサーバーでの実行が必須です。
- p5.js 1.9.0 & p5.sound: クリエイティブコーディングフレームワーク（CDN経由）
- Web Audio API: リアルタイム音声処理
- Vanilla JavaScript: ES6+ モジュラー設計
- http-server: 軽量Node.js HTTPサーバー
sketch.js- p5.jsメインループconfig.js- 設定値一元管理soundSystem.js- 音響システム（Web Audio API）particleSystem.js- パーティクル管理システムdragTrail.js- ドラッグ軌跡管理
config.js で各種パラメータを調整可能：
Config.PARTICLES.MAX_COUNT = 2000; // 最大パーティクル数
Config.CANVAS.TARGET_FPS = 120; // 目標フレームレート
Config.SOUND.DEFAULT_MASTER_VOLUME = 0.8; // 音量設定詳細な開発ガイドラインは CLAUDE.md を参照してください。
- 音が出ない: 最初にクリックして音声を初期化してください（Web Audio API制限）
- 動作が重い: Dキーでデバッグ情報を表示し、パーティクル数を確認（1000個以下推奨）
- CORSエラー:
file://ではなくHTTPサーバー経由でアクセス（npm run dev）
Issue報告やPull Requestを歓迎します。詳細な開発ガイドラインは CLAUDE.md を参照してください。
このプロジェクトは MIT License の下で公開されています。
✨ 美しい音と映像の調和をお楽しみください ✨
SonicBloom - Where Sound Meets Art