Bouncing Balls (Real Physics)

What it is

A small, real rigid-body simulation: spheres with mass, bounciness and friction collide with each other and the walls of a box, spin as they roll, and come to rest. It is calculated once at a fixed step, then played back frame by frame, so the same seed always gives the same motion and video export is exact. The result is just numbers (positions and spins), so you can draw the balls any way you like: flat 2D, glossy 3D, chrome or glass.

Reuse it in your own idea

• Draw the balls as chrome spheres inside a glass box in Three.js (see the Bouncing Marbles in a Box example).
• Use positions to drive 2D emoji, logos or product photos falling into a pile.
• Use only the first second (balls still in the air) for a drop-in transition.

Which part is reusable

src/bouncing-balls.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

• Spheres only, inside an axis-aligned box. Not a general physics engine.
• During hard impacts balls can overlap by up to about 0.05 units for a step before correction (measured ≤ 0.05 with default sizes).
• Slow contacts are treated as resting (no bounce) so piles settle instead of jittering.