(成果物)
はじめに
この記事では、Claude Sonnet 4を使って、フォトンの物理的性質を音楽に変換する教育的ゲーム「フォトン・ハーモニー」を短時間で実装する方法を紹介します。
量子物理学の複雑な概念を楽しく学べるインタラクティブな体験を、AIの力を借りて効率的に作成しました。
技術スタック
- HTML5/CSS3/JavaScript - フロントエンド実装
- Web Audio API - リアルタイム音声合成
- Canvas/CSS アニメーション - 視覚効果
- 物理演算 - プランク定数、光速を使った正確な計算
- Claude Sonnet 4 - コード生成とデザイン
実装の特徴
🔬 物理的正確性
// 物理定数を使った正確な計算
const PLANCK = 6.626e-34; // プランク定数
const LIGHT_SPEED = 3e8; // 光速
const EV_TO_JOULE = 1.602e-19; // eV変換
// 振動数計算 (c = λν)
const frequency = (LIGHT_SPEED / (wavelength * 1e-9)) / 1e12; // THz
// エネルギー計算 (E = hν)
const energy = (PLANCK * frequency * 1e12) / EV_TO_JOULE; // eV
🎵 波長→音階マッピング
// 可視光線の範囲を音階にマッピング
function wavelengthToNote(wavelength) {
const minWave = 200;
const maxWave = 1000;
const noteNames = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
const normalizedPos = (wavelength - minWave) / (maxWave - minWave);
const noteIndex = Math.floor(normalizedPos * noteNames.length);
const octave = Math.floor(normalizedPos * 3) + 3;
return noteNames[Math.max(0, Math.min(noteIndex, noteNames.length - 1))] + octave;
}
🌈 動的色変換
// 波長から正確な色を計算
function wavelengthToColor(wavelength) {
if (wavelength < 380) return '#8B00FF'; // UV
if (wavelength < 440) return `rgb(${Math.round((440-wavelength)/(440-380)*138)}, 0, 255)`; // 紫
if (wavelength < 490) return `rgb(0, ${Math.round((wavelength-440)/(490-440)*255)}, 255)`; // 青
if (wavelength < 510) return `rgb(0, 255, ${Math.round((510-wavelength)/(510-490)*255)})`; // 緑
if (wavelength < 580) return `rgb(${Math.round((wavelength-510)/(580-510)*255)}, 255, 0)`; // 黄
if (wavelength < 645) return `rgb(255, ${Math.round((645-wavelength)/(645-580)*255)}, 0)`; // オレンジ
if (wavelength < 750) return `rgb(255, 0, 0)`; // 赤
return '#8B0000'; // IR
}
実装済み機能
✨ コア機能
- リアルタイム演奏: スペクトラムをクリックして即座に音が鳴る
- 物理計算表示: 波長・振動数・エネルギーをリアルタイム表示
- 視覚効果: フォトンの軌跡と波の伝播アニメーション
🎼 音楽機能
- 虹のスケール: 可視光線全域を順次演奏
- 量子ハーモニー: ハーモニックな周波数の同時演奏
- 連続演奏モード: 複数音の重ね合わせ
🔬 物理シミュレーション
- 干渉効果: 量子的重ね合わせの視覚化
- ランダム光子: 確率的フォトン生成
- エネルギー表示: eV単位での正確な値表示
Claude活用のポイント
1. 段階的な要求
1. 「フォトンをいじって遊べるゲーム３つ考えて」→ アイデア生成
2. 「フォトンハーモニー作ってみて」→ 具体的実装
3. 「Qiita記事風にして」→ ドキュメント化
2. 物理的正確性の重視
- 実際の物理定数を使用
- 正確な数式の実装
- 教育的価値の確保
3. ユーザビリティの考慮
- レスポンシブデザイン
- タッチデバイス対応
- 直感的な操作性
実装時間の内訳
| フェーズ | 時間 | 内容 |
|---|---|---|
| アイデア出し | 30秒 | ゲームコンセプトの提案 |
| 基本実装 | 2分 | HTML/CSS/JavaScript生成 |
| 物理演算追加 | 30秒 | 正確な計算式の実装 |
| 合計 | 3分 | 完全動作するゲーム |
コードの特徴
Web Audio API活用
function playTone(frequency, duration = 0.5, wavelength = 550) {
initAudio();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
oscillator.type = 'sine';
// エンベロープ制御
gainNode.gain.setValueAtTime(0, audioContext.currentTime);
gainNode.gain.linearRampToValueAtTime(0.3, audioContext.currentTime + 0.01);
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration);
oscillator.start(audioContext.currentTime);
oscillator.stop(audioContext.currentTime + duration);
}
CSS アニメーション
@keyframes wave {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.photon {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
box-shadow: 0 0 15px currentColor;
transition: all 0.3s ease;
}
学習効果
物理学習
- 波動の性質: 波長と振動数の関係
- 量子力学: フォトンのエネルギー量子化
- 電磁スペクトラム: 可視光線から紫外線・赤外線まで
プログラミング学習
- Web Audio API: ブラウザでの音声処理
- 数値計算: 物理定数を使った正確な演算
- アニメーション: CSS/JavaScriptでの視覚効果
応用可能性
教育分野
- 物理授業での実演
- STEMエデュケーション
- 科学館での展示
技術応用
- 音楽制作ツール
- データビジュアライゼーション
- インタラクティブアート
まとめ
Claude Sonnet 4を活用することで、複雑な物理学の概念を含むインタラクティブなゲームをわずか3分で実装できました。
成功要因
- 段階的アプローチ: アイデア→実装→文書化の流れ
- 具体的指示: 物理的正確性を明確に要求
- 反復改善: 機能追加とブラッシュアップ
今後の展開
- VR/AR対応による3D表示
- 機械学習による楽曲生成
- マルチプレイヤー対応
AIを活用した開発により、専門知識を持たない開発者でも高度な教育コンテンツを短時間で作成できることが実証できました。