A 2D physics sandbox built from scratch in vanilla JavaScript — circles, boxes, triangles, platforms, gravity, collisions, and a stable stack of bodies that doesn't jitter into the floor.
Just a thing I built to see if I could. No physics library, no engine wrappers — just collision detection, impulse resolution, broad-phase culling, and a position-correction pass on top of requestAnimationFrame.
Open index.html in a browser. Click toolbar buttons to spawn shapes:
| Tool | What it does |
|---|---|
| Circle / Box / Triangle | Drag-spawn a dynamic body |
| Platform | Spawn a static obstacle |
| Delete | Remove bodies |
| Pause / Reset | Self-explanatory |
| Gravity slider | 0 → 2000 px/s² (default 980, like Earth) |
Live readouts: object count and FPS.
- Broad + narrow phase collision — AABB pre-check before SAT-style narrow phase
- Stable stacking — position correction (Baumgarte) so towers of boxes don't sink or jitter apart
- Restitution + friction per body
- Sub-stepping to keep large delta-times from blowing up high-velocity collisions
- Pure DOM/Canvas rendering — no WebGL, no library
src/
├── main.js Bootstrap + game loop
├── input.js Mouse / keyboard handling
├── renderer.js Canvas drawing
├── physics.js Body integration, collisions, constraints
└── physics/ Per-shape collision routines
 |
 |
 |
 |
MIT.