ITエンジニア/デザイナ向けにオープンソースを毎日紹介

JavaScriptで有名な物理エンジンと言えばBox2Dですが、今回はまた違う選択肢を紹介します。

Matter.jsはモバイルにも対応した物理エンジンで、多くの面白い機能が備わったライブラリになります。

Matter.jsの使い方

多数のデモがありますので幾つか紹介します。こちらはよくありがちなブロック。マウスでドラッグして移動できます。
多数のデモがありますので幾つか紹介します。こちらはよくありがちなブロック。マウスでドラッグして移動できます。

カラーリング。
カラーリング。

振り子のデモ。
振り子のデモ。

壁にぶつかる巨大な玉。PVでもこんなシーンあったような。
壁にぶつかる巨大な玉。PVでもこんなシーンあったような。

投石機っぽいデモ。
投石機っぽいデモ。

単純に落下するだけでなく、その流れをスローモーションにしたり、逆にスピードアップさせたりできます。
単純に落下するだけでなく、その流れをスローモーションにしたり、逆にスピードアップさせたりできます。

カーテンっぽいデモ。
カーテンっぽいデモ。

ストレス。上の加重によって少しだけ沈み込んでいるのが分かります。
ストレス。上の加重によって少しだけ沈み込んでいるのが分かります。

こちらは落下のスローモーション化するデモ。映画っぽくて格好良いです。
こちらは落下のスローモーション化するデモ。映画っぽくて格好良いです。

Matter.jsはWebGLやCanvasもサポートしています。イベントにも対応しているのでJavaScriptと組み合わせてカスタマイズもできます。ブラウザはIE8から対応しています。

Matter.jsはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Matter.js - a 2D rigid body JavaScript physics engine

liabru/matter-js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2