読者です 読者をやめる 読者になる 読者になる

幸福の物理

みんなに物理と工作と幸福をお届けするのだァ~!

HTML5+JavaScript+WebGLで1次元調和振動子をつくってみた

HTML5 JavaScript WebGL Three.js シミュレーション

はじめてのHTML5 de 物理シミュレーション

 三連休でできちゃいました!
マウスのドラッグでz軸を回転軸とした視点の回転、マウスのホイールで原点と中心とした視点の接近ができます。
WebGLに対応したブラウザのみ見ることができます。




Three.js <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C1%A5%E5%A1%BC%A5%C8%A5%EA%A5%A2%A5%EB">チュートリアル</a>1







念のため、スクリーンショット
f:id:shitaro2012:20140722005959p:plain

HTML5がアツいらしい

 この前、ロボット技術研究会の前期研究報告会がありました。
(参照:前期研究報告会 : 東京工業大学 ロボット技術研究会)
その中で、HTML5をつかったよく分からないけどすごい何かをつくった後輩のスライドが印象に残りました。
なんでもHTML5はすごいとかなんとか。
調べてみるとHTML5で物理シミュレーターをつくっている人もいたり。

HTML5による物理シミュレーション―JavaScriptでThree.js/jqPlo

HTML5による物理シミュレーション―JavaScriptでThree.js/jqPlo

 という訳でこのアツいHTML5を使わないわけにはいかないわけですよ!
早速つかってみました!

Three.jsがスゴいらしい

 調べてみるとWebGLってのがすごい奴みたいで、それが進化したHTML5と合わさってとんでもないことになったとか。
しかしWebGLを直打ちするのは闇らしい。そこでThree.jsの出番だ!

 歴史的背景などの詳細は他の人に回すとして、まずアニメーションをつくることに決めました。

はじめてのHTML5。はじめてのJavaScript

 HTML5JavaScriptも初めて触ったのでまだよくわからないことだらけです。
ただ、なんとなくのC++Python的感覚で打ち込んでみました。
もう少しいじってみて身体に覚えさせたいです。

 解くべき方程式は1次元調和振動子です。
\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}
となります.

 これをバババっと書くと冒頭のシミュレータようになります。確かに単振動してますね!

└(՞ةڼ◔)」<物理は単振動ゥ~!

*1:この場合は系の力学的エネルギーです。

*2:例えばオイラー法(Euler method)や4次のルンゲ・クッタ法(Runge-Kutta method)などが有名ですね。