Stacked towers of boxes knocked down by a swinging wrecking ball.
A small rigid body physics engine: boxes and circles with mass, rotation and friction. Collisions are found with the separating axis theorem, contact points come from clipping, and an iterative impulse solver with warm starting keeps tall stacks and pyramids standing. A wrecking ball on a chain of distance joints swings through towers of wood, stone and glass, throwing up dust and shattering the glass, then the scene clears and rebuilds.
Try it. Drag any body to throw it. Click empty space to drop a box. Press R to rebuild.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a small 2D rigid body physics engine with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Simulate in meters.
- Give each box a position, angle, velocity, angular velocity, mass and moment of inertia. A static ground box has zero inverse mass.
- Detect box versus box contacts with the separating axis theorem: test every face normal of both boxes, and keep the axis with the least penetration.
- Find contact points by clipping the other box's incident edge against the side planes of the reference face.
- Resolve contacts with sequential impulses: about ten iterations per step, accumulating a normal impulse that never pulls and a friction impulse clamped by the normal one. Add a small position bias so overlaps slowly correct.
Once that works, make it beautiful:
- Keep contacts between frames, matched by which edges produced them, and warm start each step with last frame's impulses. This is what lets a tall stack stand still, so build a tower and a pyramid to prove it.
- Add circles, then a heavy wrecking ball hanging from a chain of distance joints that swings through the towers.
- Give the blocks wood, stone and glass looks, drop shadows, and dust puffs on hard impacts.
- Let me drag bodies with the mouse and click empty space to drop a new box.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as glass that shatters, sleeping bodies that stop simulating when still, or joints for ragdolls and bridges.
