Spectacular fireworks display with realistic particle physics. Rockets launch, explode into hundreds of sparks with colour trails, then fade with gravity and air drag. Each explosion is unique.
Particle system with gravity, air drag and colour interpolation. Explosions distribute particles on a sphere with random velocities.
Click anywhere to launch a firework at that position. Watch the automatic show or create your own patterns by rapid clicking.
Firework colours come from different metal salts: strontium (red), barium (green), copper (blue), sodium (yellow). The "chrysanthemum" pattern is spherical because charge is packed in a perfect ball.
This simulation models a pyrotechnic display as a 2D particle system on an HTML canvas. A rocket climbs the night sky, stalls at a target height, then bursts into hundreds of glowing sparks spread evenly around a circle with randomised speeds. Each spark is advanced every frame using simple Euler integration: gravity adds to vertical velocity, air drag scales horizontal velocity, and a life counter fades its brightness, producing organic, lifelike motion.
The Particles slider sets how many sparks each burst releases (30 to 200), Gravity controls how quickly they arc back down, and the Trail slider tunes how long the light streaks linger. Six colour palettes, a continuous Auto Party mode and click-to-launch interaction complete the toy. Particle systems like this power explosions, smoke and sparks in video games, film visual effects and physics teaching.
What does this fireworks simulation actually show?
It shows a rocket rising into the sky and exploding into a shower of sparks that fan outward and fall under gravity. It is a particle system: each spark is an independent point with its own position, velocity, colour and lifespan, all updated frame by frame to create a realistic firework burst.
How does the explosion spread the sparks?
When a rocket reaches its target height it spawns the chosen number of particles evenly around a full circle. Each spark gets an angle of roughly two-pi times its index divided by the total, plus a small random jitter, and a random speed between about 2 and 5. A separate burst of 20 fast glitter sparks is added for sparkle.
What is the equation behind each spark's motion?
Each frame the code does vy = vy + g, then x = x + vx and y = y + vy, with vx = vx times 0.985 for air drag. Here g is the Gravity slider and (vx, vy) is the spark's velocity. This is basic Euler integration of projectile motion, the same physics that governs any object thrown under gravity.
Particles sets how many sparks each explosion releases, from 30 up to 200. Gravity sets how strongly sparks are pulled back to earth, from 0.02 to 0.4 pixels per frame squared. Trail sets the fade factor (0.8 to 0.99): higher values leave longer, smoother light streaks because old frames decay more slowly.
Instead of clearing the canvas each frame, the loop paints a translucent black rectangle over it with opacity 1 minus the Trail value. Older spark positions are only partly erased, so they fade gradually into smooth streaks of light. Each particle also keeps a short list of its last few points to draw a tapering stroke.
Each palette maps a spark's position in the burst to an HSL hue and lightness. Rainbow sweeps the full 360-degree hue wheel, Gold stays near yellow, Ice near cyan-blue, Fire near red-orange, Pink near magenta and Matrix near green. This mimics how real fireworks use different metal salts to produce distinct colours.
The core motion is a faithful, if simplified, model of projectiles under constant gravity with linear drag, so the parabolic arcs are realistic. However, units are screen pixels rather than metres, drag is a simple velocity multiplier rather than a proper quadratic air-resistance law, and the values are tuned for a pleasing visual rather than for quantitative accuracy.
The rocket launches with an upward velocity scaled to the distance to its target height and gains 0.06 of downward velocity each frame. The loop triggers the explosion when the rocket reaches its target height or when its vertical velocity turns positive, meaning it has stopped climbing. That moment of stall is when a real shell's bursting charge would fire.
When enabled, a counter fires a small batch of one or two rockets roughly every 80 frames at random positions across the upper portion of the screen, staggered slightly in time. It runs continuously until you press Stop, giving a hands-free show. You can still click to add your own fireworks at the same time.
The same technique drives countless visual effects: explosions, fire, smoke, rain, sparks and magic in video games and films, water spray in engineering visualisations, and crowd or fluid demonstrations in physics education. Particle systems are valued because complex, natural-looking behaviour emerges from many simple objects each following the same rules.