Live demo
BouncyBalls
Browser physics toy where balls bounce inside a rotating circular wall until they find the moving gap and escape.
velocity vector
Why I built it
I wanted a compact physics toy that makes motion, collision, and escape behavior visible without needing a long explanation.
What it does
- Simulates balls bouncing inside a rotating circular boundary.
- Moves a gap around the wall so balls can eventually escape.
- Turns simple vector math into a visual, tweakable browser experiment.
Tech stack
JavaScript / TypeScriptReactCanvasVector math
Build / Deployment
- App type
- Standalone browser physics demo
- Code location
- Separate project repo
- Front end
- React, Canvas, JavaScript / TypeScript
- Engine
- Vector math and animation loop
- Deployment
- bounce.gavinnesom.com
- Public URL
- https://bounce.gavinnesom.com
- Notes
- Portfolio links out to the standalone demo instead of absorbing the app source.
Architecture / How it works
- The project is treated as a standalone browser simulation rather than part of the portfolio app.
- The core behavior is a render loop with position, velocity, wall-collision, and escape-state calculations.
- The portfolio links out to the public BouncyBalls demo while keeping the standalone app separate.
What I built
- A canvas-based simulation loop.
- Ball motion, wall collision, escape logic, and a rotating gap concept.
- A visual toy that can become a standalone subdomain demo.
What I learned
- How quickly simple vector rules become interesting when rendered well.
- Why simulation controls need to stay out of the way of the core motion.
- How to balance playful visuals with understandable physics.
Current status
The simulation has a public standalone demo at bounce.gavinnesom.com.
Next steps
- Add clearer simulation controls without crowding the canvas.
- Replace the placeholder visual with a real screenshot or captured animation frame.
- Keep the standalone demo separate from the portfolio site.