Bouncy Ball PlaygroundBeta

About Bouncy Ball Playground

Every object in this sandbox is a circle. Circles store no velocity, only their current and previous positions (position Verlet), and each 1/60 s frame is split into six substeps. In each substep gravity, air drag and the pointer force move the circles, fast circles sweep their path and stop at the first circle they touch, any circle outside the walls bounces back in, and then overlapping circles push each other apart in two passes.

Handling up to 6000 circles means you cannot test every pair. The screen is divided into cells as wide as the largest circle's diameter, and each circle is only tested against circles in its own cell and the neighbouring ones (a uniform-grid broadphase). When the circles are spread out, the work grows roughly in proportion to their number.

Circles do not rotate and have no surface friction. Features of a full rigid-body game engine, such as a ball rolling or a stack of bricks, are not here. What the tool does show is thousands of grains colliding and flowing, and the trade-offs of computing that cheaply and fast.

How overlaps are pushed apart, and what Wall bounce does

When two circles overlap, they are moved apart along the line between their centres by the depth of the overlap. Mass is taken as proportional to area (radius squared), so the lighter circle moves further. Nothing computes a velocity at the moment of impact. Only positions are corrected, which is what Jakobsen (2001) called handling collisions and penetrations by projection. Because the correction becomes part of the next step's velocity, velocity never needs to be fixed separately.

The catch is that circle-on-circle collisions barely bounce. Undoing the overlap removes the approach speed, but nothing adds a rebound speed in the opposite direction. The Wall bounce slider, a coefficient of restitution, applies only to the walls and floor. At 0.6 a circle leaves a wall at 60% of the speed it hit with, and a dropped circle reaches 0.6² = 36% of its previous height on each bounce. That is why collisions between circles look dull, more like sand or grain than billiard balls.

Tunnelling: why fast objects pass through things

If collisions are only checked by asking whether two shapes overlap at the end of a substep, an object that moves clean past another within one step misses the collision entirely. This is called tunnelling. Engines such as Box2D prevent it with continuous collision detection (CCD), sweeping each shape from its old position to its new one, and let you flag especially fast objects as bullets.

This tool uses a simple form of CCD, a swept-circle test. Any circle that moves further than its own radius in one substep (1/360 s) has its whole path, from previous to new position, checked against other circles. If it touches one on the way, it stops at the point of contact, and the relative speed along the contact direction is removed and shared by mass, just as in an inelastic circle collision. When both circles move less than their radius, their relative motion in one step cannot exceed the sum of their radii, so they cannot skip past each other and are not swept. So even with the explosion strength at maximum, circles no longer pass through one another. The walls clamp coordinates, so nothing gets through them either. The circles still do not rotate and have no friction.

Why a pile looks slightly squishy

Separating one pair pushes the neighbouring pair back into overlap, so settling everything takes repeated passes. This tool resolves every pair's overlap twice per substep. Stack 2,000 circles of radius 5 px in a narrow box and the deepest overlap drops from about 10 px (a full diameter) with a single pass to around 1 px. Four passes would squeeze out a little more, but with 6,000 circles a frame would cost about twice as much again, so the tool uses two. More substeps also help, at a proportional cost. That is why game engines expose iteration and substep counts as settings.

Because the circles have no friction, a heap cannot hold a slope. Real sand settles at a stable angle of repose, but here a tilted pile spreads out flat like water.

Worked examples

How to use it

1. Choose a mode: pour, attract, repel, explode or shake.
2. Press or drag on the canvas to pour circles or apply force.
3. Change gravity, wall bounce, size, strength and tilt. On a phone, tilting the device changes the direction of gravity.

Key terms

Broadphase

A step that picks out only the pairs that might be close enough to touch, before any exact checks. Here it is a uniform grid.

Tunnelling

Skipping a collision because an object moved too far in one time step.

Coefficient of restitution

Separation speed after an impact divided by approach speed before it. A value of 1 means a bounce with no energy lost.

Frequently asked questions