Hatena::ブログ(Diary)

flashrod このページをアンテナに追加 RSSフィード

2008-06-04 dynamics engine for javascript

[]JavaScriptのダイナミクスエンジンを作ったよ 22:26 JavaScriptのダイナミクスエンジンを作ったよを含むブックマーク

JSTweener- JavaScript でモーショントゥイーンするライブラリ をみて、こりゃ物理エンジンJavaScript化できるよなーと思ってから放置してたらJavaScriptで物理シミュレーション であっさりBox2DをJavaScript化されてしまって、先を越されたのに悔しくなくてむしろ自分がやらなくても誰かやってくれて楽だとか考えているのでこれでは技術者としてだめだと思ってやってみることにした。

やっぱりAPEが小さくてよいと思ったのでJavaScriptに移植してみる。元はAPEだけど、表示部分とエンジン部分に分離したやつを一度作っていたので、それをもとにJavaScript化した。

JavaScriptは今までbookmarkletくらいしか書いたことがなかったので、クラスとかのために、prototype.jsの使い方を調べたり、Firebugインストールしたり、結構大変だった。これでもう俺もいっぱしのJavaScriptプログラマーだよ。

Box2DJSの人が「あっさり動きました。」などと書いてあるので甘く見てたら全く動かなくてなんだそれ。もう本当に出来る人が楽とか言うのは全くあてにならないよ。まあでも2週くらいかな、動くまで。

f:id:flashrod:20080604222319p:image

Theo Jansen Walker もいちおう動く。ものすごく遅いけど。

動くデモは以下から。

ダウンロードが必要ならデモページを名前をつけて保存とかで。

(追記)どうやらxhtmlはだめっぽいのでダウンロードページへのリンクにしてみました。試したい人は一度ダウンロードしてからFirefoxで開いてみてください。

Firefox でしか動作確認してないので他のブラウザは分からない。デモでは描画にSVGを使っているのでIEでは動かない。エンジン部分はSVGには依存してないので、デモ部分だけ修正すればIEでも動くんじゃないかと思う。

prototype.jsも使っているのはClass.create()と$superと$()くらいしかない。

ライセンスはもとのAPEMITライセンスなのでこれもおなじで。

使い方

最初に

  1. Engineを作る
  2. CircleやRectやSpringを作ってGroupにいれる
  3. GroupをEngineに登録する

毎フレームに

  1. Engineのstep()を呼べば1フレーム分動く
  2. 各粒子の位置を画面に反映する

Engineのpaint()を呼べば各粒子のpaint()が呼び出されるので、CircleやRect派生クラスを作って、paint()をオーバーライドすれば、後はSVGでもVMLでもcanvasでも何でも好きなところに描けば良い。

Box2DJSより後発な以上どこが良いのかというと、ファイルサイズが小さい、だけかな。速度はBox2DJSのほうが速いかもしれない。ドミノ倒しをやるならBox2Dで、ビリヤードピンボールで済むのならこれで、よいのでは。

やっぱりAS3と比べると遅くて明らかに実用的ではない。Firefox 4に期待かな。