Keith Thomson

Building a Simple Pendulum Simulation with p5.js and matter.js

This guide will show you how to create a physics-based pendulum simulation using the p5.js and matter.js frameworks. This project is simple enough to understand quickly but demonstrates physics interactions and rendering, making it meaningful for learning.

1. Setting Up Your Project

First, create a new folder for your project and add an index.html file. Include the libraries via CDN links.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pendulum Simulation</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.20.1/matter.min.js"></script>
</head>
<body>
    <script src="sketch.js"></script>
</body>
</html>

Create a new sketch.js file in the same folder. This is where we will write our simulation code.

2. Initializing matter.js in p5.js

We need to create the engine, world, and bodies. We'll create a pendulum with a bob and a fixed point.

// module aliases
const Engine = Matter.Engine,
      World = Matter.World,
      Bodies = Matter.Bodies,
      Constraint = Matter.Constraint;

let engine;
let world;
let pendulumBob;
let pendulumConstraint;

function setup() {
    createCanvas(600, 400);

    // create engine and world
    engine = Engine.create();
    world = engine.world;

    // create pendulum bob
    pendulumBob = Bodies.circle(300, 200, 20, { restitution: 0.9, density: 0.01 });
    World.add(world, pendulumBob);

    // create constraint (string)
    let options = {
        pointA: { x: 300, y: 100 },
        bodyB: pendulumBob,
        length: 150,
        stiffness: 1
    };

    pendulumConstraint = Constraint.create(options);
    World.add(world, pendulumConstraint);
}

function draw() {
    background(220);
    Engine.update(engine);

    // draw the pendulum string
    stroke(0);
    strokeWeight(2);
    line(pendulumConstraint.pointA.x, pendulumConstraint.pointA.y, pendulumBob.position.x, pendulumBob.position.y);

    // draw the bob
    fill(127);
    ellipse(pendulumBob.position.x, pendulumBob.position.y, 40);
}

3. Adding Interactivity

Let's allow the user to click and drag the pendulum bob.

function mouseDragged() {
    Matter.Body.setPosition(pendulumBob, { x: mouseX, y: mouseY });
}

This simple addition allows users to interact with the simulation and see realistic pendulum motion based on physics.

4. How It Works

Engine & World: matter.js uses these to simulate physics.
Bodies: The bob is a circle body with some restitution and density.
Constraint: Acts like a string connecting the fixed point to the bob.
p5.js Rendering: We draw the bob and line each frame using draw().
Interactivity: mouseDragged() updates the bob’s position, and physics handles the resulting motion.

5. Next Steps / Ideas

Add multiple pendulums to create a simple Newton's cradle.
Introduce obstacles or boundaries for collision testing.
Implement gravity changes and damping for more realistic motion.
Add color coding or trails to visualize the path of the pendulum.

This simulation demonstrates the power of combining p5.js for rendering and matter.js for physics, creating interactive and visually appealing experiments with minimal code.

Now, simply open your index.html in a browser to see the pendulum in action!