2008-06-04 dynamics engine for javascript
■[ダイナミクスエンジン]JavaScriptのダイナミクスエンジンを作ったよ 
JSTweener- JavaScript でモーショントゥイーンするライブラリ をみて、こりゃ物理エンジンもJavaScript化できるよなーと思ってから放置してたらJavaScriptで物理シミュレーション であっさりBox2DをJavaScript化されてしまって、先を越されたのに悔しくなくてむしろ自分がやらなくても誰かやってくれて楽だとか考えているのでこれでは技術者としてだめだと思ってやってみることにした。
やっぱりAPEが小さくてよいと思ったのでJavaScriptに移植してみる。元はAPEだけど、表示部分とエンジン部分に分離したやつを一度作っていたので、それをもとにJavaScript化した。
JavaScriptは今までbookmarkletくらいしか書いたことがなかったので、クラスとかのために、prototype.jsの使い方を調べたり、Firebugをインストールしたり、結構大変だった。これでもう俺もいっぱしのJavaScriptプログラマーだよ。
Box2DJSの人が「あっさり動きました。」などと書いてあるので甘く見てたら全く動かなくてなんだそれ。もう本当に出来る人が楽とか言うのは全くあてにならないよ。まあでも2週くらいかな、動くまで。
Theo Jansen Walker もいちおう動く。ものすごく遅いけど。
動くデモは以下から。
ダウンロードが必要ならデモページを名前をつけて保存とかで。
(追記)どうやらxhtmlはだめっぽいのでダウンロードページへのリンクにしてみました。試したい人は一度ダウンロードしてからFirefoxで開いてみてください。
Firefox でしか動作確認してないので他のブラウザは分からない。デモでは描画にSVGを使っているのでIEでは動かない。エンジン部分はSVGには依存してないので、デモ部分だけ修正すればIEでも動くんじゃないかと思う。
prototype.jsも使っているのはClass.create()と$superと$()くらいしかない。
ライセンスはもとのAPEがMITライセンスなのでこれもおなじで。
使い方
最初に
- Engineを作る
- CircleやRectやSpringを作ってGroupにいれる
- GroupをEngineに登録する
毎フレームに
- Engineのstep()を呼べば1フレーム分動く
- 各粒子の位置を画面に反映する
Engineのpaint()を呼べば各粒子のpaint()が呼び出されるので、CircleやRect派生クラスを作って、paint()をオーバーライドすれば、後はSVGでもVMLでもcanvasでも何でも好きなところに描けば良い。
Box2DJSより後発な以上どこが良いのかというと、ファイルサイズが小さい、だけかな。速度はBox2DJSのほうが速いかもしれない。ドミノ倒しをやるならBox2Dで、ビリヤードやピンボールで済むのならこれで、よいのでは。
