ブラウザで簡単な2D物理シミュレーション

Gigazineにも紹介されていたmatter-jsというライブラリを用いると, ブラウザ上で簡単な2Dシミュレーションができる.

http://brm.io/matter-js/

http://gigazine.net/news/20150122-matter-js/

matter.jsを使った物理シミュレーションの一番シンプルなやり方

  1. index.htmlを作成.
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <script src="Matterjs/matter.js"></script>
  </head>
  <body>
    <script type="text/javascript">
       // Matter.js module aliases
       var Engine = Matter.Engine,
       World = Matter.World,
       Bodies = Matter.Bodies;
       // create a Matter.js engine
       var engine = Engine.create(document.body);
       // create two boxes and a ground
       var boxA = Bodies.rectangle(400, 200, 80, 80);
       var boxB = Bodies.rectangle(450, 50, 80, 80);
       var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
       // add all of the bodies to the world
       World.add(engine.world, [boxA, boxB, ground]);
       // run the engine
       Engine.run(engine);
    </script>
   </body>
</html>
  1. index.htmlと同じフォルダにmatter.jsを配置する.
  2. index.htmlをブラウザで開くと長方形が2つ落下するデモが見れる.