12
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

matter.js を使ってみた

物理演算アプリに使われているmatter.jsを使ってみた。

以下の感じの物を作った。

matter.gif

Gifの技術がなくてわかりにくく、申し訳ないですが、網のようなものとボールを出現させて物理的な動きを行わせることができます。

作り方

  • matter.jsをインストール
  • 作業ディレクトリを作成し、以下のようなディレクトリ配下にする。

matter
- matter.js
- index.html
- app.js

  • それぞれに以下の記述をする
index.html
<main id="stage"></main>

<script src="matter.js"></script>
<script src="app.js"></script>

app.js
(function() {

  var Engine = Matter.Engine;
  var World = Matter.World;
  var Bodies = Matter.Bodies;
  var Body = Matter.Body;
  var MouseConstraint = Matter.MouseConstraint;
  var Render = Matter.Render;
  var Events = Matter.Events;
  var Composites = Matter.Composites;
  var engine = Engine.create(document.body, {
    render: {
      options: {
        width: 1000,
        height: 600,
        pixelRatio: 1,
        background: '#fafafa',
        wireframeBackground: '#222',
        hasBounds: true,
        enabled: true,
        wireframes: true,
        showSleeping: true,
        showDebug: true,
        showBroadphase: true,
        showBounds: true,
        showVelocity: true,
        showCollisions: true,
        showSeparations: true,
        showAxes: true,
        showPositions: true,
        showAngleIndicator: false,
        showIds: false,
        showShadows: false,
        showVertexNumbers: false,
        showConvexHulls: true,
        showInternalEdges: true
      }
    }
  });

  // isStatic:静的(完全固定) 地面と棒を追加
  var ground0 = Bodies.rectangle(0, 610, 1, 1000, { isStatic: true });
  var ground1 = Bodies.rectangle(100, 610, 1, 1000, { isStatic: true });
  var ground2 = Bodies.rectangle(200, 610, 1, 1000, { isStatic: true });
  var ground3 = Bodies.rectangle(300, 610, 1, 1000, { isStatic: true });
  var ground4 = Bodies.rectangle(400, 610, 1, 1000, { isStatic: true });
  var ground5 = Bodies.rectangle(500, 610, 1, 1000, { isStatic: true });
  var ground6 = Bodies.rectangle(600, 610, 1, 1000, { isStatic: true });
  var ground7 = Bodies.rectangle(700, 610, 1, 1000, { isStatic: true });
  var ground8 = Bodies.rectangle(800, 610, 1, 1000, { isStatic: true });
  var ground9 = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
  var group = Body.nextGroup(true),
        particleOptions = { friction: 0.00001, collisionFilter: { group: group }, render: { visible: false }},
        constraintOptions = { stiffness: 0.06 },
        cloth = Composites.softBody(200, 200, 20, 12, 5, 5, false, 8, particleOptions, constraintOptions);

    for (var i = 0; i < 20; i++) {
        cloth.bodies[i].isStatic = true;
    }

  // クリックしたら操作できる。
  var mousedrag = MouseConstraint.create(engine, {
      element: document.body, 
      constraint: {
        render: {
          strokeStyle: "rgba(255, 255, 255, 255)" //マウスの動きを表示する(白)
        }
      }
    });

  World.add(engine.world, [cloth, ground0, ground1, ground2, ground3, ground4, ground5, ground6, ground7, ground8, ground9, mousedrag]);

  for (var i = 0; i < 10; i++) {
    var rnd = parseInt(Math.random() * 10);
    var x = 320 + rnd * 10;
    var y = 0 - rnd * 120;
    rnd2 = parseInt(Math.random() * 640);
    var x2 = rnd2;
    var y2 = 0 - rnd2 * 2;

    World.add(engine.world, [
        Bodies.circle(x, y, 49, { //ボールを追加
            density: 0.0005, // 密度
            frictionAir: 0.06, // 空気抵抗
            restitution: 1, // 弾力性
            friction: 0.01, // 本体の摩擦
            render: { //ボールのレンダリング
          options: {
            showAngleIndicator: true,
            showIds: true,
            showShadows: true,
            showVertexNumbers: true,
          }
            },
            timeScale: 1.5 //時間の倍率を設定(1で1倍速)
        }),
    ]);

  }
// 物理シミュレーションを実行
Engine.run(engine);
})();

とても楽しいので、慣れてきたらゲームアプリ作ろうと思います。
目標1月中。機械学習も用いたものにしたいなぁ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
12
Help us understand the problem. What are the problem?