About Particle Playground
A one-day experiment in what the browser's Canvas API can do — zero dependencies, zero build steps.
What is it?
Particle Playground is an interactive physics simulation running entirely in your browser. Six interaction modes let you pull, push, swirl, paint, explode, and consume particles in real time. It was built for fun on a single afternoon to see how far you can push the native browser APIs before you ever reach for a library.
What it demonstrates
- Canvas API — all rendering is manual: arcs, lines, shadow blur, alpha compositing, no WebGL
- Spatial grid — O(n) nearest-neighbor lookup replaces the naive O(n²) brute-force for connection lines, sustaining 60fps at 300+ particles on mid-range hardware
- requestAnimationFrame loop — physics, culling, and draw all happen in a single tightly-controlled frame budget; no
setInterval - Six interaction modes — attract, repel, vortex, draw, explode, and black hole, each with distinct force math
- Touch support — pinch to scale influence radius, two-finger swipe to cycle modes
- Share URL — the full simulation state (palette, mode, particle count, speed, and more) encodes to a
?state=base64query parameter
Tech stack
Served by a custom .NET 10 minimal API with a hand-rolled template engine. The frontend is three files: one HTML, one CSS, one JS — no npm, no bundler, no framework. Part of the JustHTML.dev collection of vanilla web experiments.
Built by Coder B — a software engineer who enjoys building things from scratch to understand how they work.