HTML5+JavaScript+WebGLで１次元調和振動子をつくってみた
はじめてのHTML5 de 物理シミュレーション
三連休でできちゃいました！
マウスのドラッグでz軸を回転軸とした視点の回転、マウスのホイールで原点と中心とした視点の接近ができます。
WebGLに対応したブラウザのみ見ることができます。
念のため、スクリーンショット↓
HTML5がアツいらしい
この前、ロボット技術研究会の前期研究報告会がありました。
(参照：前期研究報告会 : 東京工業大学 ロボット技術研究会)
その中で、HTML5をつかったよく分からないけどすごい何かをつくった後輩のスライドが印象に残りました。
なんでもHTML5はすごいとかなんとか。
調べてみるとHTML5で物理シミュレーターをつくっている人もいたり。
HTML5による物理シミュレーション―JavaScriptでThree.js/jqPlo
- 作者: 遠藤理平
- 出版社/メーカー: カットシステム
- 発売日: 2013/02
- メディア: 単行本
- この商品を含むブログ (4件) を見る
という訳でこのアツいHTML5を使わないわけにはいかないわけですよ！
早速つかってみました！
Three.jsがスゴいらしい
調べてみるとWebGLってのがすごい奴みたいで、それが進化したHTML5と合わさってとんでもないことになったとか。
しかしWebGLを直打ちするのは闇らしい。そこでThree.jsの出番だ！
歴史的背景などの詳細は他の人に回すとして、まずアニメーションをつくることに決めました。
はじめてのHTML5。はじめてのJavaScript。
HTML5もJavaScriptも初めて触ったのでまだよくわからないことだらけです。
ただ、なんとなくのC++やPython的感覚で打ち込んでみました。
もう少しいじってみて身体に覚えさせたいです。
解くべき方程式は１次元調和振動子です。
\begin{eqnarray}
m\frac{\mathrm{d}^2 x(t)}{\mathrm{d} t^2} = -kx(t)
\end{eqnarray}
これをベルレ法(Verlet method)で数値積分しました。
このベルレ法はシンプレクティック性があるために保存量*1が常に保存されるアルゴリズムです。
一方、シンプレクティック性のないアルゴリズム*2は長時間のシミュレーションに対して必ず保存されるべき量が計算誤差によって増大してきます。
また、比較的実装が簡単なのも利点です。
詳細は時間があるときにでも。
さて、先ほどの微分方程式を初期条件が\(x(t=0)=x_{0}, v(t=0)=0\)のもとで解くと
\begin{eqnarray}
x(t)=x_{0} \cos(\omega t)
\, &,\
v(t)=-x_{0}\omega \sin(\omega t)
\, &,\
\omega = \sqrt{\frac{k}{m}}
\end{eqnarray}
となります．
これをバババっと書くと冒頭のシミュレータようになります。確かに単振動してますね！
└(՞ةڼ◔)」＜物理は単振動ゥ～！
