Engine,

  Bodies,

  Composite,

  Body,

  Vector,

  Mouse,

  MouseConstraint,

} = Matter;

​

let engine;

​

// An array for all boxes

let shapes = [];

​

// An array for all boundaries

let boundaries = [];

let mybox;

let mouse;

let mouseConstraint;

let boxes = [];

let spheres = [];

let pyramids = [];

​

// CHANGE NUMBER OF START OBJECTS HERE ===>

let numOfObjects = 0;

​

​

let widthy = 1600;

let heighty = 800;

let zone1x = widthy-100;

let zone1y = heighty/6;

let zone2x = widthy-100;

let zone2y = heighty/6*2;

let zone3x = widthy-100;

let zone3y = heighty/6*3;

let zone4x = widthy-100;

let zone4y = heighty/6*4;

let zone5x = widthy-100;

let zone5y = heighty/6*5;

let expandit;

let contractit;

​

​

​

function setup() {

  pixelDensity(1);

  engine = Engine.create();

  let canvas = createCanvas(widthy, heighty);

  // img =loadImage('https://editor.p5js.org/oae233/sketches/Ci6eLCTM_/contract.png');

  expandit = loadImage('\expand.png');

  contractit = loadImage('\contract.png');

  mouse = Mouse.create(canvas.elt);

  let options = {

    mouse,

    constraint: {

      stiffness: 0.7,

    },

  };

  mouseConstraint = MouseConstraint.create(engine, options);

  Composite.add(engine.world, mouseConstraint);

​

  // Add a bunch of fixed boundaries

  boundaries.push(new Boundary(width / 2, height - 5, width, 10));

  boundaries.push(new Boundary(width / 2, 5, width, 10));

  boundaries.push(new Boundary(5, height / 2, 10, height));

  boundaries.push(new Boundary(width - 5, height / 2, 10, height));

​

  for (i = 0; i < numOfObjects; i++){

    mybox = new myBox(random(300),random(height/3,height/3*2));

    boxes.push(mybox);

    mysphere = new mySphere(random(300),random(height/3,height/3*2));

    spheres.push(mysphere);

    mypyramid = new myPyramid(random(300),random(height/3,height/3*2));

    pyramids.push(mypyramid);

  }

  // mybox = new myBox();

  // mybox2 = new myBox();

  // mysphere = new mySphere();

  // mypyramid = new myPyramid();

​

}

​

​

​

​

function draw() {

  background(255);

  Engine.update(engine);

  for (let i = 0; i < boundaries.length; i++) {

    boundaries[i].show();

  }

   // for (i = 0; i < numOfObjects; i++){

   //  boxes[i].render();

   //   spheres[i].render();

   //   pyramids[i].render();

   //  } 

  for ( boxxx of boxes){

    boxxx.render();

  }

   for ( mysphere of spheres){

    mysphere.render();

  }

   for ( mypyramid of pyramids){

    mypyramid.render();

  }

     // rect(zone1x,zone1y,80,80);

  image(expandit,zone1x-40,zone1y-40,80,80);

    // rect(zone2x,zone2y,80,80);

  image(contractit,zone2x-40,zone2y-40,80,80);

  noFill();

  stroke(0,255);

  strokeWeight(2);

     ellipse(zone3x,zone3y,80,80);

  rect(zone4x,zone4y,80,80);

  // rect(zone5x,zone5y,80,80);

  triangle(zone5x,zone5y-40, zone5x - 45, zone5y+40,zone5x+45,zone5y+40);

}

​

​

function mousePressed(){

  let mymouse = createVector(mouseX,mouseY);

  let zone3 = createVector(zone3x,zone3y);

  let zone4 = createVector(zone4x,zone4y);

  let zone5 = createVector(zone5x,zone5y);

  let zone3check = p5.Vector.dist(mymouse,zone3);

  let zone4check = p5.Vector.dist(mymouse,zone4);

  let zone5check = p5.Vector.dist(mymouse,zone5);

  if (zone3check < 40){

    spheres.push(new mySphere(zone3.x,zone3.y));

    // numOfObjects ++;

    print("hi");

  } else if (zone4check < 40){

    boxes.push(new myBox(zone4.x,zone4.y));

    // numOfObjects ++;

    print("hi");

  }else if (zone5check < 40){

    pyramids.push(new myPyramid(zone5.x,zone5.y));

    // numOfObjects ++;

    print("hi");

  }

}

​

class myBox {

  constructor(x,y) {

    this.r = 50;

    this.body = Bodies.rectangle(x, y, this.r, this.r);

    Composite.add(engine.world, this.body);

  }

   checkLoc(){

    let zone1 = createVector(zone1x,zone1y);

    let zone2 = createVector(zone2x,zone2y);

     let zone3 = createVector(zone3x,zone3y);

    if (this.body.position.x > (zone1.x - 40) && this.body.position.y > (zone1.y - 40) && this.body.position.x < (zone1.x + 40) && this.body.position.y < (zone1.y + 40)&& mouseX > (zone1.x - 40) && mouseY > (zone1.y - 40) && mouseX < (zone1.x + 40) && mouseY < (zone1.y + 40)){

      Body.scale(this.body,1.01,1.01);

      this.r*=1.01;

    } else if (this.body.position.x > (zone2.x - 40) && this.body.position.y > (zone2.y - 40) && this.body.position.x < (zone2.x + 40) && this.body.position.y < (zone2.y + 40)&& mouseX > (zone2.x - 40) && mouseY > (zone2.y - 40) && mouseX < (zone2.x + 40) && mouseY < (zone2.y + 40)){

      Body.scale(this.body,0.99,0.99);

      this.r*=0.99

    }

  }

​

  render() {

    this.checkLoc();

    rectMode(CENTER);

    push();

    let forcepos = createVector(0,0);

    let force = createVector(0.001,0);

    let antigrav = createVector(0,-0.001*this.body.mass);

    // Body.applyForce(this.body, this.body.position, force); 

    Body.applyForce(this.body, this.body.position, antigrav);  

    translate(this.body.position.x, this.body.position.y);

    rotate(this.body.angle);

    stroke(this.body.position.y,0,255);

    fill(250,250,0);

    rect(0,0, this.r, this.r);

    pop();

  }

}

​

class mySphere {

  constructor(x,y) {

    this.r = 50/2;

    this.body = Bodies.circle(x, y, this.r);

    Composite.add(engine.world, this.body);

  }

  checkLoc(){

    let zone1 = createVector(zone1x,zone1y);

    let zone2 = createVector(zone2x,zone2y);

    if (this.body.position.x > (zone1.x - 40) && this.body.position.y > (zone1.y - 40) && this.body.position.x < (zone1.x + 40) && this.body.position.y < (zone1.y + 40)&& mouseX > (zone1.x - 40) && mouseY > (zone1.y - 40) && mouseX < (zone1.x + 40) && mouseY < (zone1.y + 40)){

      Body.scale(this.body,1.01,1.01);

      this.r*=1.01;

    } else if (this.body.position.x > (zone2.x - 40) && this.body.position.y > (zone2.y - 40) && this.body.position.x < (zone2.x + 40) && this.body.position.y < (zone2.y + 40)&& mouseX > (zone2.x - 40) && mouseY > (zone2.y - 40) && mouseX < (zone2.x + 40) && mouseY < (zone2.y + 40)){

      Body.scale(this.body,0.99,0.99);

      this.r*=0.99

    }

  }

​

  render() {

    this.checkLoc();

    rectMode(CENTER);

    push();

    let forcepos = createVector(0,0);

    let force = createVector(0.001,0);

    let antigrav = createVector(0,-0.0001*this.body.mass);

    // let antigrav = createVector(0,-0.0024);

    // Body.applyForce(this.body, this.body.position, force); 

    Body.applyForce(this.body, this.body.position, antigrav);  

    translate(this.body.position.x, this.body.position.y);

    rotate(this.body.angle);

    stroke(this.body.position.y,0,255);

    fill(255,100,0);

    circle(0,0, this.r*2);

    pop();

  }

}

​

class myPyramid {

  constructor(x,y) {

    this.body = Bodies.polygon(x, y,3, 50/1.5);

    Composite.add(engine.world, this.body);

  }

  checkLoc(){

    let zone1 = createVector(zone1x,zone1y);

    let zone2 = createVector(zone2x,zone2y);

    if (this.body.position.x > (zone1.x - 40) && this.body.position.y > (zone1.y - 40) && this.body.position.x < (zone1.x + 40) && this.body.position.y < (zone1.y + 40)&& mouseX > (zone1.x - 40) && mouseY > (zone1.y - 40) && mouseX < (zone1.x + 40) && mouseY < (zone1.y + 40)){

      Body.scale(this.body,1.01,1.01);

      this.r*=1.01;

    } else if (this.body.position.x > (zone2.x - 40) && this.body.position.y > (zone2.y - 40) && this.body.position.x < (zone2.x + 40) && this.body.position.y < (zone2.y + 40)&& mouseX > (zone2.x - 40) && mouseY > (zone2.y - 40) && mouseX < (zone2.x + 40) && mouseY < (zone2.y + 40)){

      Body.scale(this.body,0.99,0.99);

      this.r*=0.99

    }

  }

​

  render() {

    this.checkLoc();

    rectMode(CENTER);

    push();

    this.verts = this.body.vertices;

    let forcepos = createVector(0,0);

    let force = createVector(0.001,0);

    // let antigrav = createVector(0,-0.001);

    let antigrav = createVector(0,-0.0024*this.body.mass);

    // Body.applyForce(this.body, this.body.position, force); 

    Body.applyForce(this.body, this.body.position, antigrav);  

    // translate(this.body.position.x, this.body.position.y);

    // rotate(this.body.angle);

    // print(this.verts[0].x);

    stroke(this.body.position.y,0,255);

    fill(0,255,0,200);

    triangle(this.verts[0].x, this.verts[0].y, this.verts[1].x, this.verts[1].y,this.verts[2].x, this.verts[2].y);

    pop();

  }

}

​