Physics Balls HTML CSS JS — Canvas Gravity Simulation

A physics balls simulation drops colorful spheres onto a canvas where they fall under gravity, bounce off the walls, and collide elastically with one another. Click anywhere to launch a new ball upward. It is one of the clearest ways to learn real-time animation, vector math and 2D collision response in the browser using nothing but the HTML5 Canvas 2D API and requestAnimationFrame. This walkthrough explains every piece.

The animation loop

At the heart of the simulation is a fixed-step loop driven by requestAnimationFrame. The loop function calls update() to advance the physics, then draw() to render the frame, then schedules itself again. requestAnimationFrame synchronizes with the display refresh (typically 60Hz), pauses automatically in background tabs to save battery, and gives smooth, tear-free motion. Using a constant per-frame step (rather than scaling by elapsed time) keeps the math simple and stable for a demo, though a production engine would normalize by delta-time.

The ball model

Each ball is a plain object holding position (x, y), velocity (vx, vy), radius r, a hue for color, and a mass. The mass is set to r * r — proportional to area — so larger balls carry more momentum and shove smaller ones aside realistically. When you click, spawnBall reads getBoundingClientRect to convert the click into canvas coordinates, assigns a random radius, a small random horizontal velocity, and a strong upward velocity (vy = -8 - random) so the ball leaps before gravity pulls it down. A MAX_BALLS cap shifts the oldest ball off the array to bound the per-frame collision cost.

Gravity and integration

In update, every ball first has gravity applied: b.vy += GRAVITY. This constant downward acceleration is the discrete form of v = v + a*t. Then position is integrated with b.x += b.vx; b.y += b.vy — semi-implicit (symplectic) Euler integration, which uses the freshly updated velocity and stays stable for gravity-driven motion far better than naive explicit Euler.

Wall collisions and restitution

After moving, each ball is tested against the four canvas edges. If a ball's edge crosses a wall — for example b.x - b.r < 0 — its position is clamped back inside (b.x = b.r) and its velocity component is reflected and scaled by the restitution coefficient BOUNCE: b.vx = Math.abs(b.vx) * BOUNCE. Restitution below 1 means energy is lost on each bounce, so balls gradually settle; a value of 1 would bounce forever. Using Math.abs and forcing the correct sign guarantees the ball moves away from the wall even if floating-point drift left it slightly embedded.

Ball-to-ball elastic collisions

The most educational part is the pairwise collision response. A double loop checks every unique pair (i, j). Two circles overlap when the distance between centers is less than the sum of their radii: sqrt(dx*dx + dy*dy) < a.r + b.r. When they do, resolveCollision runs.

It first computes the collision normal — the unit vector along the line connecting the two centers: nx = dx/dist, ny = dy/dist. It then finds the relative velocity along that normal via the dot product dot = (a.vx - b.vx)*nx + (a.vy - b.vy)*ny. If dot > 0 the balls are already separating, so it returns to avoid sticking. Otherwise it applies the 1D elastic collision impulse projected onto the normal: impulse = 2 * dot / (a.mass + b.mass). Each ball's velocity is adjusted by the impulse weighted by the other ball's mass — a.vx -= impulse * b.mass * nx and b.vx += impulse * a.mass * nx. This is the standard conservation-of-momentum-and-energy formula for equal-restitution collisions, exchanging velocity in proportion to mass.

Finally it resolves overlap. Because discrete steps let balls interpenetrate, the code pushes them apart by half the overlap each along the normal: overlap = (a.r + b.r - dist) / 2. Without this positional correction, balls would jitter or sink into each other.

Rendering and the trail effect

draw offers two modes. Normally it clears the canvas each frame with clearRect and repaints the dark background. With the trail toggle on, instead of clearing it paints a translucent rectangle over the whole canvas: fillStyle = 'rgba(13,13,26,0.15)' then fillRect. Each frame slightly darkens the previous one, so old positions fade out gradually, leaving comet-like motion trails. This is a classic and cheap canvas technique — never clearing, only fading.

Each ball is drawn with a createRadialGradient offset toward the top-left to fake a light source, giving a glossy 3D sphere look, with the two gradient stops derived from the ball's hue in HSL color space. HSL makes it trivial to generate visually distinct, evenly spaced colors by spacing hues — here (hueCounter * 37) % 360 walks around the color wheel.

Controls

Sliders bound to GRAVITY and BOUNCE let you feel how acceleration and restitution change the behavior live, the checkbox toggles trails, and Clear empties the array. Because all state lives in the balls array and two scalars, the controls simply mutate those values and the next animation frame reflects them.

Put together, this simulation demonstrates the core loop of every 2D physics engine: integrate forces, detect collisions, resolve them with impulses and positional correction, and render — all in a couple hundred lines with no dependencies.