SVG Science Simulator｜画像生成と会話するAIの魅力と可能性
https://note.com/chat_gpt777/n/ne786a1e73427
最近、いろいろなソフトウェアを開発してきて、 SVG（Scalable Vector Graphics）というものに興味を持つようになってきました。数式と直接対応した座標系で描画するものです。png、jpg等の画像で表現するわけでなく、テキスト表記で表します。拡大しても乱れ、ひずまないそんな画像が表現できます。ただ、きめ細かくする表現は不得意です。リアルタイムにSVGアニメーションで可視化する等得意です。これからの開発の方向に向いている手法だと感じています。そのうちはやるだろうと思います。
SVG Science Simulator
物理・数学・化学をブラウザ上でリアルタイムにSVGアニメーションで可視化する、教育向けインタラクティブシミュレーター、ブラウザ上で動作し、インストール不要。スライダーを動かすとリアルタイムにアニメーションが変化し、 数式と視覚表現が同時に更新されます。波動・光・重力・フーリエ変換・カオス理論など、 教科書では理解しにくい抽象的な概念を直感的に体験できます。
Canvas ではなく SVG（Scalable Vector Graphics） を使用しているため、 どんな画面サイズでも鮮明に表示され、数式と直接対応した座標系で描画できます。
6つのシミュレーション
SIM 01 — 波動
〜 波動シミュレーション
y = A·sin(kx − ωt)
正弦波がリアルタイムに動き、2つの波を重ね合わせた合成波も同時に表示されます。 振幅・波長・角振動数・位相差を自由に変えることで、干渉・うなり・定常波などの現象を観察できます。 波の上の粒子が上下に振動する様子も可視化されています。
振幅 A
波長 λ
角振動数 ω
位相差 φ
合成波 ON/OFF
SIM 02 — 光学
◈ 光の屈折・全反射
n₁sinθ₁ = n₂sinθ₂
スネルの法則を視覚化します。入射角・屈折率を変えると、光線の進む方向がリアルタイムに変化。 入射角が臨界角を超えると全反射が起き、光が境界面で完全に反射される現象を観察できます。 光ファイバーや水中から空気への光の振る舞いに対応します。波面アニメーションも表示されます。
入射角 θ₁
屈折率 n₁（媒質1）
屈折率 n₂（媒質2）
光の色（波長）
SIM 03 — 重力
◉ 重力シミュレーション（N体問題）
F = Gm₁m₂ / r²
ニュートンの万有引力の法則に基づき、複数の天体が互いに引き合う様子をシミュレートします。 初期設定では太陽＋惑星2つの3体問題が表示されます。天体を追加することも可能で、 軌跡・速度ベクトルが表示されます。初期条件のわずかな違いで軌道が全く変わる「カオス」が体験できます。
重力定数 G
時間スケール
軌跡の長さ
速度ベクトル表示
惑星追加ボタン
SIM 04 — 数学
∿ フーリエ変換
f(t) = Σ aₙsin(nωt)
フーリエ級数展開をアニメーションで可視化します。回転する円（エピサイクル）の先端が描く軌跡が、 画面右側に波形として出力されます。「項数 N」を増やすほど矩形波・三角波に近づいていく 様子が視覚的にわかります。下部にはスペクトル棒グラフも表示されます。
項数 N（1〜20）
回転速度
波形タイプ（矩形/三角/ノコギリ）
SIM 05 — カオス理論
◎ 二重振り子（カオス）
ラグランジュ方程式
2つのおもりが連結された振り子です。初期角度をわずかに変えるだけで軌道が全く異なる カオスの典型例です。RK4（4次ルンゲクッタ法）という高精度な数値積分で計算されており、 第2振り子の軌跡がカラフルに描画されます。減衰係数を加えてエネルギーが失われる様子も確認できます。
初期角度 θ₁・θ₂
質量比 m₂/m₁
減衰係数
SIM 06 — 数学
∞ リサジュー図形
x=A·sin(at+δ), y=B·sin(bt)
2方向の単振動を合成した軌跡です。周波数比 a:b によって直線・円・8の字・複雑な閉曲線など、 様々な形状が生まれます。位相差 δ を変えると形がスムーズに変化します。 オシロスコープで実際に観測できる図形で、音響や電気工学にも応用されます。
SVG Science Simulator
https://pasopia.velvet.jp/2026/soft/index073.html
SVG Science Simulator — 解説ガイド
https://pasopia.velvet.jp/2026/soft/svg-science-simulator-guide.html
