あけましておめでとうございます。 2015年も、よろしくおねがいします。

遊びで、JavaScriptの物理エンジンMatter.jsを使って羊を降らせてみました。

A Happy New Year 2015!  110chang.com

物理エンジンで有名なものにBox2dのJavaScript版、Box2dWebがあります。

Box2dWebはシミュレーションとデバッグビューアーは提供されますが、表現は他のライブラリを使うか自力で実装しなければなりません。

一応、さわってはみたものの今回はパスしました。

Matter.js

Matter.jsはα版なのでプロダクションには使わないほうがいい、とのことですが、

  • 同一エンジン上でシミュレーションも表現もできる
  • マウスの扱いが楽(3行)
  • ドキュメントが整理されている

ので、ちょっとしたことならMatter.jsの方が断然簡単と思います。buggyなところはあります。

  • 凹多角形がマウスに反応しない
  • ときどき物体がすり抜ける

SoftBodyの振る舞いが気に入ったので、羊のテクスチャを貼って使いました。羊に見えるかどうかは、どうでしょうね。。

http://brm.io/matter-js-demo/#softBody

文字はIllustratorでSVGを書き出してpolygon要素のプロパティを引っこ抜いて整形しました。おそらく曲線は使えないので直線で近似する必要があります。

ドキュメントが整理されてるとはいえ英語なので、ソースとドキュメントとにらめっこで結構大変でした。

書き方が独特

JavaScriptならではというか、一見クラスっぽく見えるものは全て静的メソッド(的なもの)を持っていて、インスタンス(的なもの)はメソッドを持たずプロパティだけを保持しています。

Matter.Body.rotate(body, ...)

静的メソッドにオブジェクトを渡して仕事をしてもらう、という書き方になっています。タイプが多くなりがちですし、気になる人は気になるかもしれません。