Matter.js tutorial for the absolute JS beginner

Physics engine is a program that allows you to simulate real-world physics in your apps: falling and sliding boxes, bouncing balls, chains etc. It is a great way to experiment with JavaScript, even at the absolute beginner level because it allows the programmer to create applications that look really cool without any advanced programming concepts.

You only need to understand:
- JavaScript: variables
- math: the coordinates system (this is taught to children around the age of 9 in most countries)

There are many great free physics engines on the web. I picked the open source Matter.js

This tutorial is intended to show some shortcuts to less experienced coders, since the original documentation could bit a bit intimidating.

We'll start with the template that creates the physical world:

let Engine = Matter.Engine,

Render = Matter.Render,

World = Matter.World,

Bodies = Matter.Bodies,

Composites = Matter.Composites;

let engine = Engine.create();

let render = Render.create({

element: document.body,

engine: engine

});

Engine.run(engine);

Render.run(render);

</script>

</body></html>

It's based on the minimal usage example, I just reduced it a bit and gift-wrapped it in html for you. The great thing is that you don't even have to understand what this code does - you can learn it later, for now let's concentrate on creating something that actually moves. From here on, you will typically need only two lines of code to add an object (a ball, a box or even a cloth)...

I left several empty lines - we'll fill them up in the next steps and you'll be able to track the changes.

Line [2] includes the 'matter.js' library in your JavaScript program. Now you can make 'calls' to the routines in the library, which does all the work for you: it calculates all the objects, forces, velocities and displays them on the screen. An empty world is just a black void, so let's add a ball:

Click here to (re-)start

let Engine = Matter.Engine,

Render = Matter.Render,

World = Matter.World,

Bodies = Matter.Bodies,

Composites = Matter.Composites;

let engine = Engine.create();

let render = Render.create({

element: document.body,

engine: engine

});

Engine.run(engine);

Render.run(render);

let ball=Bodies.circle(200, 10, 40);

World.add(engine.world, [ball]);

</script>

</body></html>

[17] creates it, [21] actually adds it to your world.

Copy the code above into a new file and save it as 'matter.htm'. Go to https://github.com/liabru/matter-js/releases and download the latest stable release (0.10.0 as of this writing) of the file 'matter.js'. Put 'matter.js' in the same folder as 'matter.htm' and open 'matter.htm' in a browser.

Point (0,0) is in the upper-left corner of the screen and the coordinates increase as you go down and right (so the Y axis is inverted compared to what you learned in 3rd grade - this convention is common in many programming languages).

You should see a white circle just falling down from the screen - boring! Let's add a floor:

Click here to (re-)start

let Engine = Matter.Engine,

Render = Matter.Render,

World = Matter.World,

Bodies = Matter.Bodies,

Composites = Matter.Composites;

let engine = Engine.create();

let render = Render.create({

element: document.body,

engine: engine

});

Engine.run(engine);

Render.run(render);

let ball=Bodies.circle(200, 10, 40);

let floor=Bodies.trapezoid(340,300,500,100,.9,{isStatic: true});

let myCar=Composites.car(390, 0, 100, 30, 40);

let myCradle=Composites.newtonsCradle(600, 100, 5, 10, 160);

World.add(engine.world, [ball,floor,myCar,myCradle]);

</script>

</body></html>

Please note that it's Static (isStatic: true), which means that gravity won't pull it down.
The floor is a trapezoid and the ball should roll down one of its sides.
Now let's add a car a Newton's cradle (it's that little desk toy with metal balls swinging on strings).
The parameters are: (x-coordinate, y-coordinate, number of balls, size of balls, length of string)

Click here to (re-)start

let Engine = Matter.Engine,

Render = Matter.Render,

World = Matter.World,

Bodies = Matter.Bodies,

Composites = Matter.Composites;

let engine = Engine.create();

let render = Render.create({

element: document.body,

engine: engine

});

Engine.run(engine);

Render.run(render);

let ball=Bodies.circle(200, 10, 40);

let floor=Bodies.trapezoid(340,300,500,100,.9,{isStatic: true});

let myCar=Composites.car(390, 0, 100, 30, 40);

let myCradle=Composites.newtonsCradle(600, 100, 5, 10, 160);

World.add(engine.world, [ball,floor,myCar,myCradle]);

</script>

</body></html>

The car hits the balls and messes them up. That's not how you're supposed to play: only one ball should be swinging at a time to demonstrate conservation of momentum! Let's try this instead:

Click here to (re-)start

let Engine = Matter.Engine,

Render = Matter.Render,

World = Matter.World,

Bodies = Matter.Bodies,

Composites = Matter.Composites;

let engine = Engine.create();

let render = Render.create({

element: document.body,

engine: engine

});

Engine.run(engine);

Render.run(render);

let ball=Bodies.circle(200, 10, 40);

let floor=Bodies.trapezoid(340,300,500,100,.9,{isStatic: true});

let myCar=Composites.car(390, 0, 100, 30, 40);

let myCradle=Composites.newtonsCradle(600, 100, 5, 10, 160);

World.add(engine.world, [ball,floor,myCar,myCradle]);

let world = engine.world;

let Mouse= Matter.Mouse;

let MouseConstraint=Matter.MouseConstraint;

let mouse = Mouse.create(render.canvas);

let mouseConstraint = MouseConstraint.create(engine, {mouse: mouse});

World.add(world, mouseConstraint);

let render.mouse = mouse;

</script>

</body></html>

This time we also added mouse control (using a Matter.js concept of a 'constraint')- grab the leftmost ball and pull it to the side, then let go.
You can also drag the cart and the ball around.

This was just a very simple demonstration, Matter.js can do much, much more - make sure you check out the demos on their website!

Check out these programming tutorials:

JavaScript:

Oldschool fire effect (20 lines)

Animated fractal (32 lines)

Starfield (21 lines)

Yin Yang with a twist (4 circles and 20 lines)

Tutorial - interactive, animated sprites

Your first program in JavaScript: you need 5 minutes and a notepad

Fractals in Excel

Python in Blender 3d:

Domino effect (10 lines)

Wrecking ball effect (14 lines)

3d fractal in Blender Python

Physics engine in your JavaScript program