What makes a bounce feel real: drop, grab and throw a basketball, a tennis ball or a bowling ball, on Earth, the Moon or Jupiter, and watch each bounce rise a little lower. No sign-up and no libraries.
- Seven balls: super ball, basketball, tennis ball, ping-pong ball, golf ball, bowling ball and clay ball, each with its own bounciness, air drag, size and weight.
- Four gravities: Moon, Mars, Earth and Jupiter.
- Bounciness (the coefficient of restitution) and Air drag on sliders.
- Click to drop a ball, grab one and throw it; the balls bump into each other, and the heavy ones push the light ones around.
- Squash and stretch (the first of Disney's principles of animation), a fading Trail, Slow motion, and a Sound for every bounce, louder for the hard ones.
- A graph of the height over time, with the number of bounces and how much of its height the ball keeps each time.
- Pause and Download PNG; the address of the page keeps the settings, to share them.
Positions are in meters and speeds in meters per second, stepped 480 times a second. Gravity pulls the ball down and air drag slows it with the square of its speed. Each bounce sends it back up at e times the speed it came down with (e is its bounciness), so it rises to e² of the height of the bounce before: about 60% for a basketball. The bounces get shorter by e each time too, so even though there are infinitely many of them in theory, they all fit in a few seconds.
The CSS version is a few lines of keyframes: one animation moves the ball across, another moves it up and down with ease-out and ease-in to fake gravity.
No build and no dependencies: open index-javascript.html (or index.html for the CSS version) in a browser.
Had fun browsing the app? Buy me a coffee by becoming a sponsor.
Copyright (c) 2020-2026 Olivier Giulieri.
Bouncing Ball is released under the MIT license.