Fireworks Simulator
JS Canvas Particle Simulator
01 — Project Overview
A canvas-based fireworks simulator with user controls for color, timing, density, and sound effects.
Solo Developer.
Stack
02 — The Problem
Goal
Learn Canvas particle system fundamentals and user-controlled real-time simulation.
User Issue
Casual exploration of particle physics and Canvas 2D rendering.
03 — The Process
Particle Pool
Used an object pool to recycle dead particles rather than continuously allocating new objects, keeping frame rate smooth.
Key Challenge
Creating convincing gravity + air-drag physics for falling sparks without a physics engine.
particle.vy += 0.05; // gravity
particle.vx *= 0.98; // drag
particle.vy *= 0.98;04 — The Solution
A fully interactive fireworks simulator with user-controlled burst parameters, color, and explosion sound effects.
05 — Results & Learnings
Impact
Demonstrated Canvas particle system fundamentals with a genuinely delightful interactive experience.
Learnings
Learned object pooling as a performance pattern for particle systems.
What I'd do differently
Would add WebGL rendering for thousands of simultaneous particles.