// http://codingtra.in

// http://patreon.com/codingtrain

// Code for: https://youtu.be/urR596FsU68

​

// Daniel Shiffman

// Matter.js + p5.js Examples

// 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(800, 600);

​

  // create an engine

  engine = Engine.create();

​

  // create two boxes and a ground

  boxA = Bodies.rectangle(400, 200, 380, 380);

  boxB = Bodies.rectangle(450, 450, 80, 80);

  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);

}

​

// Using p5 to render

function draw() {

  // I could ask for everything in the world

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

​

  background(51);

​

  // Basic demo

  // Getting vertices of each object

  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

  var vertices = boxB.vertices;

  fill(255);

  beginShape();

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

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

  }

  endShape();

​

  // Ground vertices

  var vertices = ground.vertices;

  beginShape();

  fill(127);

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

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

  }

  endShape();

}

​