Concept
The concept is recreating Newton’s Cradle using the Matter.js physics engine. The goal is to duplicate how a real Newton’s Cradle works, where a series of suspended balls transfer energy through collisions when one ball is pulled back and released. I aimed to simulate this behavior by using physics-based properties like gravity, restitution, and constraints to make the motion feel as realistic as possible. Instead of manually animating the movement, the project relies on the physics engine to naturally calculate how the balls swing and interact, allowing me to explore how energy and motion behave in a simulated environment.
Highlight of some code
A part of the code I’m particularly proud of is the way I created Newton’s Cradle using a loop to generate both the balls and their constraints. Instead of manually placing each ball, I used a loop to calculate their positions and connect them dynamically, which made the code cleaner and easier to adjust.
const startX = CENTER_X - ((BALL_COUNT - 1) * SPACING) / 2;
for (let i = 0; i < BALL_COUNT; i++) {
const anchorX = startX + i * SPACING;
const anchorY = TOP_Y;
const ball = Bodies.circle(anchorX, anchorY + STRING_LENGTH, BALL_RADIUS, {
restitution: 1,
friction: 0,
frictionAir: 0.0005
});
const rope = Constraint.create({
pointA: { x: anchorX, y: anchorY },
bodyB: ball,
length: STRING_LENGTH,
stiffness: 0.9
});
balls.push(ball);
ropes.push(rope);
}
Sketch
Milestones:
- This stage is the very first version of Newton’s Cradle where the main goal was just to get the physics working. I created the balls and connected them with constraints so they hang and swing like a real cradle. I also set up gravity and collision so the motion looks natural and the energy transfers from one ball to another. There’s no interaction yet in this version it just runs on its own.
https://youtube.com/shorts/ISYsv6YzDNg?si=kNVKaXBV6mP5ucq0
The focus was on building the core physical system by creating circular bodies connected with constraints to simulate suspended balls and realistic energy transfer during collisions. Basic interactivity was introduced by allowing the user to click and drag individual balls, giving control over how motion is initiated, similar to a real cradle.
Challenges:
A difficulty was understanding how Matter.js handles physics, since the motion is not directly controlled but calculated by the engine, which made debugging harder. It also took time to properly connect the balls with constraints so they would swing correctly without breaking the structure. AI was very handy with this specific assignment as it was my first time using physics libraries.
Reflection
This project is based on the concept of recreating a Newton’s Cradle using the Matter.js physics engine. The goal is to duplicate how a real Newton’s Cradle works, where a series of suspended balls transfer energy through collisions when one ball is pulled back and released. I aimed to simulate this behavior by using physics-based properties like gravity, restitution, and constraints to make the motion feel as realistic as possible. Instead of manually animating the movement, the project relies on the physics engine to naturally calculate how the balls swing and interact, allowing me to explore how energy and motion behave in a simulated environment.
