// This example is based on examples from: http://brm.io/matter-js/

​

​

var Engine = Matter.Engine;

var Render = Matter.Render;

var World = Matter.World;

var Bodies = Matter.Bodies;

var Composite = Matter.Composite;

​

var engine;

​

var boxA;

var boxB;

var ground;

​

function setup() {

  createCanvas(640, 480);

​

  // create an engine

  engine = Engine.create();

  // create two boxes and a ground

  boxA = Bodies.rectangle(400, 200, 80, 80, {

    isStatic:false,

    restitution: 0.8

  });

  boxB = Bodies.circle(490, 50, 20, {

    isStatic:false,

    restitution: 0.8

  });

  ground = Bodies.rectangle(400, 460, 810, 60, {

    isStatic:true,

    restitution: 0.8

  });

​

  World.add(engine.world, [boxA, boxB, ground]);

​

  // run the engine

  Engine.run(engine);

}

​

// Using p5 to render

function draw() {

​

  // var bodies = Composite.allBodies(engine.world);

​

  background(51);

​

  var vertices = boxA.vertices;

  fill(255);

  beginShape();

  for (var i = 0; i < vertices.length; i++) {

    vertex(vertices[i].x, vertices[i].y);

  }

  endShape();

​

  // boxB vertices

  vertices = boxB.vertices;

  fill(255);

  beginShape();

  for (var i = 0; i < vertices.length; i++) {

    vertex(vertices[i].x, vertices[i].y);

  }

  endShape();

​

  // Ground vertices

  vertices = ground.vertices;

  beginShape();

  fill(127);

  for (var i = 0; i < vertices.length; i++) {

    vertex(vertices[i].x, vertices[i].y);

  }

  endShape();

}