JavaScriptな物理計算エンジンmatter.jsで遊ぶ

そろそろちゃんとしたホームページがほしいなあと。

ホームページって言ったらあれだよなんか技術デモみたいなのが動くみたいな感じのやつだろうと思いまして。 派手にもしたいから物理演算とかだよなーでもそんなん作る気力も技術も無いだろうしーということで。

割と最近に出た物理演算matter.jsについて調べてます。javascriptで物理演算ができます。もちろんwebで動きます。 2000年前半のホームページとか作ってた身からするとリッチになったものだなだと・・・。

ただ、これまだまだ新しいのであまり情報が無い。 でも、形を落としたり動かしたり一般的なことはそんなに難しくないと思います。

matter.js githubのGetting-startedよりコードを拝借。 まずは動く最低限のコードを見ないと私は頭がこんがらがるので、 これがシンプルな最低限のコードです。表示するならもちろんこれにhtmlとmatter.js本体が必要です。

window.onload = function() {

// https://github.com/liabru/matter-js/wiki/Getting-started
   // Matter.jsモジュールに別名を付ける
   var Engine = Matter.Engine,
       World = Matter.World,
       Bodies = Matter.Bodies;

   // Matter.js エンジン作成
   var engine = Engine.create(document.body);

   // 二つの箱(四角)と地面を作る
   var boxA = Bodies.rectangle(400, 200, 80, 80);
   var boxB = Bodies.rectangle(450, 50, 80, 80);
   //isStatic:静的(完全固定)
   var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

   // 二つの箱(四角)と地面を追加
   World.add(engine.world, [boxA, boxB, ground]);

   // Matter.js エンジン起動
   Engine.run(engine);

}

これを動かすとこんな感じ。上から箱が落ちてきます。

Matter.Bodies.rectangleはそのまま長方形を作る関数です。引数はx,y,width,height,[options] といった感じ。 これをそのままMatter.Bodies.circleとかに変えると円になります。

他にも台形(trapezoid)とか多角形(polygon)とか用意されているので、これだけでもいろいろ遊べます。 画像を入れたりSVGを使うことも標準でできるらしいのだけれど、 その辺はAPI Documentsにて。