あけましておめでとうございます。 2015年も、よろしくおねがいします。
遊びで、JavaScriptの物理エンジンMatter.jsを使って羊を降らせてみました。
物理エンジンで有名なものに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, ...)
静的メソッドにオブジェクトを渡して仕事をしてもらう、という書き方になっています。タイプが多くなりがちですし、気になる人は気になるかもしれません。