ブラウザで簡単な2D物理シミュレーション
Gigazineにも紹介されていたmatter-jsというライブラリを用いると, ブラウザ上で簡単な2Dシミュレーションができる.
http://gigazine.net/news/20150122-matter-js/
matter.jsを使った物理シミュレーションの一番シンプルなやり方
- 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>
- index.htmlと同じフォルダにmatter.jsを配置する.
- index.htmlをブラウザで開くと長方形が2つ落下するデモが見れる.