Intro to matter.js V5

let body; // will refer to a physics body (a circle, with a mass, radius, position, velocity, etc)

let colours = ["#Dec3c3", "#e7d3d3", "#f0e4e4", "#f9f4f4"]

let balls = []

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  let engine = Matter.Engine.create(); //The physics engine!

  Matter.Runner.run(engine);

​

  //Create an array of balls 

  for (let i=0; i < 10; i++) {

    balls.push(Matter.Bodies.circle(random(0, width), 10, 20)) //x, y, radius

  }

  Matter.Composite.add(engine.world, balls); //add our balls to the world for simulation

  // Give the balls some properties

    for (let ball of balls) {

    ball.friction = 0;

    ball.frictionAir = 0;

    ball.restitution = 1;

  }

​

// Making some ramps 

  rampBody1 = Matter.Bodies.rectangle(200, 400, 400, 20, {

    isStatic: true

  });

  Matter.Composite.add(engine.world, rampBody1);

​

  rampBody2 = Matter.Bodies.rectangle(900, 200, 400, 20, {

    isStatic: true

  });

  Matter.Composite.add(engine.world, rampBody2);

​

  roof = Matter.Bodies.rectangle(550, 1, 1100, 30, {

    isStatic: true

  });

  Matter.Composite.add(engine.world, roof);

​

  movingRamp = Matter.Bodies.rectangle(mouseX, 10, 400, 20, {

    isStatic: true

  });

  Matter.Composite.add(engine.world, movingRamp);

​

  rampBody1.friction = 0;

  roof.friction = 1

​

  roof.restitution = 1.1

  movingRamp.restitution = 1.1

​

​

  Matter.Body.setAngle(rampBody1, radians(30))

  Matter.Body.setAngle(rampBody2, radians(-30))

​

}

​

function draw() {

  background("#f0e4e4");

  for (let ball of balls) {

    circle(ball.position.x, ball.position.y, 40)

  }

​

  drawShape(rampBody1)

  drawShape(rampBody2)

  drawShape(roof)

​

​

  Matter.Body.setPosition(movingRamp, {

    x: mouseX,

    y: 900

  })

  drawShape(movingRamp)

​

}

​

function mousePressed() {}

​

​

​

function drawShape(body) {

  beginShape();

  for (let vert of body.vertices) {

    vertex(vert.x, vert.y);

  }

  endShape(CLOSE)

}