<button class="drop-ball">Drop the Ball</button>
<button class="slow-mo">Slow Motion</button>
<button class="norm-mo">Normal Motion</button>
<button class="fast-mo">Fast Motion</button>
<br>
body {
  text-align: center;
  margin: 10px;
}

canvas {
  margin: 20px auto;
}

button {
  color: white;
  background: orange;
  border: none;
  padding: 10px;
  font-weight: 300;
  font-size: 1.2em;
  font-family: 'Lato';
  margin: 10px;
  cursor: pointer;
  outline: none;
}
var Engine = Matter.Engine,
  Render = Matter.Render,
  World = Matter.World,
  Bodies = Matter.Bodies;

var engine = Engine.create();

var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: 800,
    height: 400,
    wireframes: false
  }
});

var topWall = Bodies.rectangle(400, 0, 810, 30, { isStatic: true });
var leftWall = Bodies.rectangle(0, 200, 30, 420, { isStatic: true });
var rightWall = Bodies.rectangle(800, 200, 30, 420, { isStatic: true });
var bottomWall = Bodies.rectangle(400, 400, 810, 30, { isStatic: true });

World.add(engine.world, [topWall, leftWall, rightWall, bottomWall]);

Engine.run(engine);

Render.run(render);


var addCircle = function () {
 var ball = Bodies.circle(Math.random()*400 + 30, 30, 30);
  ball.restitution = 1;
ball.frictionAir = 0.001;
  return ball;
};

$('.drop-ball').on('click', function () {
    World.add(engine.world, addCircle());
});

$('.slow-mo').on('click', function () {
    engine.timing.timeScale = 0.5;
});

$('.norm-mo').on('click', function () {
    engine.timing.timeScale = 1;
});

$('.fast-mo').on('click', function () {
    engine.timing.timeScale = 1.5;
});



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.11.0/matter.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js