Home▸Toys & Play▸2D Bouncing Ball — Spin, Friction & Energy Loss

🏐 2D Bouncing Ball — Spin, Friction & Energy Loss

A flat-canvas rigid-body bounce sim: four balls of different mass, size and restitution bounce together with real spin-friction coupling, air drag and a live energy graph.

Toys & Play2DEasy60 FPS📱 Mobile-adapted⇄ 3D version

About this simulation

A flat 2D companion to the 3D Bouncing Ball: instead of picking one ball at a time, four real balls — a steel bearing, a tennis ball, a rubber ball and a superball, each with its own real mass, radius, restitution and grip — drop together on the same floor. Every bounce solves a real tangential-impulse friction equation against the ball's spin, so a ball dropped with backspin genuinely kicks sideways on impact, and the total mechanical energy of the whole system is plotted live as it drains away.

🔬 What it shows

Four balls of different size and mass bounce side by side. Bounce height differs because restitution (e) differs; trajectories differ because air drag scales with radius² over mass, so the light superball loses more speed to drag than the heavy steel ball. A spin slider lets you see friction convert rotation into sideways motion at each bounce.

🎮 How to use

Set the drop height and an initial spin (rad/s, positive or negative), toggle air drag on or off, and press Drop. The per-ball table shows live height, horizontal velocity and spin for each ball; the graph beneath the canvas tracks total system energy decaying in real time.

💡 The physics

Each bounce solves J_n = m(1+e)|v_y|, then a tangential impulse J_t = -v_t/(1/m + r²/I) capped at μJ_n (Coulomb friction) — the same rigid-body contact model used in billiards and robotics bounce simulators, not a decaying-amplitude animation.

Frequently asked questions

How is this different from the 3D Bouncing Ball?

The 3D version drops one selectable ball and shows its coefficient-of-restitution decay in isolation. This 2D version runs four distinct balls simultaneously with a full tangential-friction contact solve, so spin visibly changes horizontal velocity at each bounce — a mechanic the 3D version does not model.

Why do the balls bounce to different heights if gravity is the same for all?

Bounce height after a vertical drop depends only on the coefficient of restitution e (height ratio = e²), not on mass — so the four balls, each with a different real e (0.55 to 0.92), rebound to genuinely different heights even though gravity acts on them identically.

How does spin change the bounce?

At contact, the ball's surface has a tangential velocity v_t = v_x + ωr. Friction opposes this, applying an impulse capped by μJ_n. If grip is enough to stop sliding, the impulse fully converts spin into horizontal velocity (or vice versa); otherwise kinetic friction applies the maximum allowed impulse. Positive spin therefore kicks the ball one way, negative spin the other.

Why does the light superball behave differently from the heavy steel ball?

Air drag force depends on cross-sectional area (∝ r²) while mass depends on volume (∝ r³ × density), so drag deceleration (force/mass) scales roughly as 1/r. The small, light superball loses proportionally more speed to air resistance than the large, dense steel ball — a real physical effect, not a scripted difference.

What does the energy graph actually track?

The sum, over all four balls, of translational kinetic energy (½mv²), rotational kinetic energy (½Iω²) and gravitational potential energy (mgh), sampled every frame. It only ever decreases, in steps at each bounce and smoothly under air drag — a genuine measurement of the simulated state, not a preset curve.

⚙ Under the hood

Four real balls of different mass, size and restitution bounce together on a flat canvas: real gravity, real coefficient-of-restitution bounce, a genuine tangential-impulse friction solve coupling spin to horizontal velocity at each bounce, optional quadratic air drag, and a live decaying total-energy graph.

bouncing ballcoefficient of restitutionrigid body physicsfriction impulsespinair dragenergy conservation

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install