Live demo
Bouncy Balls
Why it’s useful
I wanted a compact physics toy to test how quickly AI-assisted coding could help turn motion, collision, and escape behavior into a working browser demo.
What it does
- Simulates balls bouncing inside a rotating circular wall.
- Spawns bouncy balls inside the circular wall.
- Lets balls eventually escape through a configurable gap.
- Turns simple vector math into a visual, tweakable browser experiment.
Current status / Next steps
Current status
- Live static demo at bounce.gavinnesom.com.
- The first version focuses on wall-ball collisions, gap escape behavior, and simple browser controls.
- The demo is intentionally small for now, leaving gravity and ball-to-ball collisions as clear next experiments.
Next steps
- Add clearer simulation controls without crowding the canvas.
- Add gravity simulation.
- Add ball-to-ball collisions.
Build / Deployment
JavaScript · HTML Canvas · CSS · Vercel
Vercel serves the static HTML, CSS, and JavaScript files at bounce.gavinnesom.com.
Source
The demo lives in a small static project made of HTML, CSS, and JavaScript files.
Build
No framework build step is required; the browser runs the JavaScript directly.
Deploy
Vercel publishes the static files to bounce.gavinnesom.com.
Architecture / How it works
Canvas scene
The browser canvas draws the circular wall, moving gap, and bouncing balls.
Frame update
Each frame updates ball positions, checks wall collisions and gap escapes, then redraws the scene.
Collision and escape rules
Balls bounce off the solid wall. When they reach the gap, they can leave the circular wall.
Design Principles
User controls
- Controls make the demo more engaging than a passive animation.
- The interface should stay out of the way of the motion.
Simple first pass
- The first version focuses only on ball-wall interactions.
- Fun color choice pulls toward "fun toy" and away from "physics lesson."