物理・数学・化学をブラウザ上でリアルタイムにSVGアニメーションで可視化する、教育向けインタラクティブシミュレーター
SVG Science Simulator は、物理・数学の重要な現象を「見て・動かして・理解する」ための インタラクティブ可視化ツールです。
ブラウザ上で動作し、インストール不要。スライダーを動かすとリアルタイムにアニメーションが変化し、
数式と視覚表現が同時に更新されます。波動・光・重力・フーリエ変換・カオス理論など、
教科書では理解しにくい抽象的な概念を直感的に体験できます。
Canvas ではなく SVG（Scalable Vector Graphics） を使用しているため、
どんな画面サイズでも鮮明に表示され、数式と直接対応した座標系で描画できます。
スライダーを動かすと、アニメーションと数値データが即座に更新されます。60fps で滑らかに動作。
各シミュレーションの画面に対応する数式を常に表示。視覚と数学の橋渡し役になります。
外部ライブラリ・インストール・サーバー不要。HTML ファイルをダブルクリックするだけで起動。
各シミュレーションの現在値（周期・エネルギー・角度など）をリアルタイムでパネルに表示。
正弦波がリアルタイムに動き、2つの波を重ね合わせた合成波も同時に表示されます。 振幅・波長・角振動数・位相差を自由に変えることで、干渉・うなり・定常波などの現象を観察できます。 波の上の粒子が上下に振動する様子も可視化されています。
スネルの法則を視覚化します。入射角・屈折率を変えると、光線の進む方向がリアルタイムに変化。 入射角が臨界角を超えると全反射が起き、光が境界面で完全に反射される現象を観察できます。 光ファイバーや水中から空気への光の振る舞いに対応します。波面アニメーションも表示されます。
ニュートンの万有引力の法則に基づき、複数の天体が互いに引き合う様子をシミュレートします。 初期設定では太陽＋惑星2つの3体問題が表示されます。天体を追加することも可能で、 軌跡・速度ベクトルが表示されます。初期条件のわずかな違いで軌道が全く変わる「カオス」が体験できます。
フーリエ級数展開をアニメーションで可視化します。回転する円（エピサイクル）の先端が描く軌跡が、 画面右側に波形として出力されます。「項数 N」を増やすほど矩形波・三角波に近づいていく 様子が視覚的にわかります。下部にはスペクトル棒グラフも表示されます。
2つのおもりが連結された振り子です。初期角度をわずかに変えるだけで軌道が全く異なる カオスの典型例です。RK4（4次ルンゲクッタ法）という高精度な数値積分で計算されており、 第2振り子の軌跡がカラフルに描画されます。減衰係数を加えてエネルギーが失われる様子も確認できます。
2方向の単振動を合成した軌跡です。周波数比 a:b によって直線・円・8の字・複雑な閉曲線など、 様々な形状が生まれます。位相差 δ を変えると形がスムーズに変化します。 オシロスコープで実際に観測できる図形で、音響や電気工学にも応用されます。
画面上部のタブ（波動・光の屈折・重力・フーリエ変換・二重振り子・リサジュー）をクリックすると、シミュレーションが切り替わります。切り替え後も各シミュレーションは独立して動き続けます。
画面右側のコントロールパネルにスライダーが並んでいます。ドラッグしながら動かすと、シミュレーションがリアルタイムに変化します。数値も自動的に更新されます。
各タブの右上にある「PAUSE」ボタンを押すとアニメーションが一時停止します。じっくり状態を観察したいときに使ってください。もう一度押すと再開します。
「RESET」ボタンを押すと、時刻・軌跡・状態がすべてリセットされます。重力シミュレーションでは天体の配置も初期値に戻ります。
右パネル中段の「データ読み出し」エリアには、現在の物理量が表示されます。たとえば波動では「波数 k」「周期 T」「位相速度 v」「エネルギー E」がリアルタイムで更新されます。スライダーを動かしながらこれらの数値の変化を観察すると、数式との関係が直感的に理解できます。
Canvas でなく SVG を使用。解像度独立で、どの画面でも鮮明に表示。
ブラウザの描画サイクルに同期した最大 60fps のスムーズなアニメーション。
二重振り子に使用。4次ルンゲクッタ法により高精度な微分方程式の数値解を計算。
ライブラリ・フレームワーク不要。純粋な HTML / CSS / JavaScript のみで動作。
Canvas（ビットマップ描画）と違い、SVG はベクター形式のため数式の座標系と直接対応しています。 各波・光線・軌跡を DOM 要素として管理できるので、パラメータの変更が即座に反映され、 拡大してもジャギーが生じません。教育的な数値表示との統合も容易です。
Chrome / Edge / Firefox / Safari などの最新ブラウザで動作します。 Internet Explorer には対応していません。 Google Fonts を使用しているため、初回読み込み時はインターネット接続が必要です（オフラインでも動作しますがフォントは代替表示になります）。
プロジェクターで投影しながら、スライダーをリアルタイム操作して数式の意味を説明できます。
教科書の式を見ながらパラメータを変え、「振幅を2倍にすると波はどう変わるか」などを実験できます。
「全反射はいつ起きるか？」「フーリエ項数を無限大にすると？」などを視覚的に探求できます。
リサジュー図形・フーリエのエピサイクル・カオス軌跡など、科学の中の美的な現象を楽しめます。
① 波動：振幅を変えずに波長だけ変えたとき、位相速度はどう変わるか観察する。
② 光の屈折：n₁ > n₂ の状態で入射角を少しずつ増やし、全反射が起きる瞬間を探す。
③ フーリエ：項数 N を 1 → 2 → 5 → 20 と増やしながら、矩形波に収束する様子を観察する。
④ 二重振り子：初期角度 θ₁ を 120° と 121° で比較し、しばらく後に軌跡がまったく異なることを確認する。