EN 💥 2D Ball Collisions — Canvas Momentum Lab
Canvas2D ball-collision sandbox. Adjust ball count, mass ratio, restitution and gravity and watch momentum and kinetic energy conserved in real time.
What It Demonstrates
Total momentum is conserved on every impact regardless of restitution e; kinetic energy is conserved only when e=1 (perfectly elastic) and drops as e falls toward 0 (perfectly inelastic).
How to Use
Drag Restitution (e), change the Mass ratio for asymmetric velocity exchanges, add Gravity for pile-ups, or drag a ball with the mouse.
About 2D Ball Collisions — Canvas Momentum Lab
This is the plain-Canvas2D companion to the Three.js-rendered 2D Collisions — Momentum and Energy simulation. Both pages run the exact same impulse-based collision response; only the rendering layer differs.
Frequently Asked Questions
What does this 2D companion show that the 3D version doesn't?
The physics is identical — the same impulse formula drives both — but this version renders on a plain Canvas2D surface instead of a Three.js/WebGL scene, so the flat 2D math maps directly to screen pixels with no camera or renderer layer in between.
What is the coefficient of restitution?
e is the ratio of separation speed to approach speed along the contact normal. e=1 is perfectly elastic (no kinetic energy lost); e=0 is perfectly inelastic (balls stick together).
Canvas2D ball-collision sandbox with momentum and energy conservation. Adjust ball count, mass ratio, restitution and gravity.
2D · Canvas2D renderer · 60 FPS target · runs fully client-side, no install