// 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,

  //Render=Matter.Render,

  World = Matter.World,

  Bodies = Matter.Bodies;

​

//variables.

var engine;

var boxA;

var world;

var boxes = [];

var ground;

​

function setup() {

  createCanvas(500, 500);

  background(0);

  // create an engine

  engine = Engine.create();

  world = engine.world;

  // run the engine

  Engine.run(engine);

  var options = {

    isStatic: true

  }

  ground = Bodies.rectangle(250, height-10, width, 10, options);

  World.add(engine.world, ground);

​

​

  // create a box

  //boxA = Bodies.rectangle(200, 200, 80, 80);//now in box class

​

  boxA = new Box(200, 100, 50, 50); //call box usiing new class 

  //console.log(boxA);

​

  // add all of the bodies to the world

  //World.add(engine.world, boxA);//now in box class

​

}

​

function mouseDragged() {

  boxes.push(new Box(mouseX, mouseY, 20, 20));

}

​

​

function draw() {

  background(0);

  //rect(boxA.position.x, boxA.position.y, 80, 80);//not needed now we have class.

  //boxA.show();

​

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

    boxes[i].show();

  }

  //visual of ground(not needed to make it function);

  stroke(255);

  strokeWeight(4);

  rectMode(CENTER);

  rect(ground.position.x, ground.position.y,width, 10);

}