Demonstrate Newton's Laws with Matter.js

This article explains how to build interactive 2D physics simulations using the Matter.js physics engine to clearly demonstrate Isaac Newton’s three laws of motion. By manipulating parameters such as mass, force, friction, and restitution, developers and educators can create real-time collision experiments where users directly observe, test, and verify fundamental physical principles in the browser.

Setting Up the Interactive Environment

To run collision experiments, initialize the core modules of Matter.js: Engine, Render, Runner, Bodies, Composite, and MouseConstraint. The MouseConstraint module is crucial because it allows users to click, drag, and launch bodies, transforming static equations into hands-on experiments.

const { Engine, Render, Runner, Bodies, Composite, Mouse, MouseConstraint } = Matter;

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

Render.run(render);
Runner.run(Runner.create(), engine);

// Add interactive mouse controls
const mouse = Mouse.create(render.canvas);
const mouseConstraint = MouseConstraint.create(engine, { mouse: mouse });
Composite.add(engine.world, mouseConstraint);

Demonstrating Newton's First Law: The Law of Inertia

Newton’s First Law states that an object will remain at rest or move at a constant velocity in a straight line unless acted upon by a net external force.

To demonstrate this in Matter.js:

  1. Disable environmental resistance by setting engine.gravity.y = 0 and setting the body's frictionAir: 0 and friction: 0.
  2. Create a moving body and a stationary body.
  3. Observe that the moving body travels indefinitely across the canvas at constant velocity until it collides with a canvas boundary or another mass.
engine.gravity.y = 0;

const movingPuck = Bodies.circle(100, 300, 20, {
  frictionAir: 0,
  friction: 0,
  restitution: 1 // Perfectly elastic collision
});

Matter.Body.setVelocity(movingPuck, { x: 5, y: 0 });
Composite.add(engine.world, movingPuck);

Demonstrating Newton's Second Law: Force Equals Mass Times Acceleration (F = ma)

Newton's Second Law defines the relationship between an applied force, the mass of an object, and its resulting acceleration. When the same magnitude of force is applied to objects of different masses, the lighter object accelerates faster.

To demonstrate this in an experiment:

  1. Create two bodies with identical dimensions but different densities using the density property.
  2. Apply an identical force vector simultaneously using Matter.Body.applyForce.
  3. Track or observe the difference in acceleration and final velocity prior to collision.
const lightBox = Bodies.rectangle(200, 200, 40, 40, { density: 0.001 });
const heavyBox = Bodies.rectangle(200, 300, 40, 40, { density: 0.01 });

Composite.add(engine.world, [lightBox, heavyBox]);

// Apply identical force to both bodies along the X-axis
const forceVector = { x: 0.05, y: 0 };
Matter.Body.applyForce(lightBox, lightBox.position, forceVector);
Matter.Body.applyForce(heavyBox, heavyBox.position, forceVector);

The light box immediately accelerates at ten times the rate of the heavy box, verifying the inverse relationship between mass and acceleration for a given force.

Demonstrating Newton's Third Law: Action and Reaction

Newton's Third Law states that whenever one body exerts a force on a second body, the second body exerts an equal and opposite force on the first. This principle is best demonstrated through collisions and momentum conservation, such as in a Newton’s Cradle or head-on elastic impacts.

To demonstrate an equal and opposite reaction:

  1. Create two identical circular bodies with restitution: 1 (perfect elasticity) and zero friction.
  2. Launch one body directly toward a stationary body of equal mass.
  3. Upon impact, the moving body transfers its entire momentum to the stationary body and comes to a complete stop, while the struck body moves forward with the exact initial velocity of the impactor.
const ballA = Bodies.circle(300, 300, 25, {
  restitution: 1,
  friction: 0,
  frictionAir: 0
});

const ballB = Bodies.circle(450, 300, 25, {
  restitution: 1,
  friction: 0,
  frictionAir: 0
});

Composite.add(engine.world, [ballA, ballB]);

// Launch ballA into the stationary ballB
Matter.Body.setVelocity(ballA, { x: 6, y: 0 });

When unequal masses collide, Matter.js calculates impulse forces symmetrically: each body experiences an equal impulse magnitude in opposite directions, causing the lighter body to undergo a larger change in velocity than the heavier body.