Fireworks Screensaver

How the Fireworks works

Fireworks screensaver: getting a good result

Fireworks are the classic first example of a particle system, the technique behind almost every spark, splash, flame and smoke effect in games and film. The term comes from William Reeves at Lucasfilm, who used it in 1983 to describe the wall of fire in the Genesis sequence of Star Trek II. The idea is simple: instead of animating one complicated object, you spawn many tiny ones, give each a position, a velocity and a lifetime, and apply the same few rules to all of them every frame. This fireworks simulator needs only two kinds of particle, rockets and sparks, and a handful of lines of physics.

How the fireworks simulator works

A rocket starts at the bottom of the canvas with a strong upward speed, scaled to the height of the screen so bursts land in the upper part on any display, plus a small random sideways drift. Gravity slows it every frame. When its upward speed has almost gone, at the top of its arc, it is replaced by a burst: a ring of sparks at that point, each given a random direction and a random speed.

Sparks feel gravity too, but more gently, and they lose 2 % of their speed every frame to air drag. That drag is why a burst flies out fast, slows, hangs for a moment and then droops, which is exactly the shape of a real peony shell. Each spark lives for roughly one to two seconds and fades as it ages, so the outer edge of a burst dims first.

Colour works like a real shell. Each rocket picks a hue at launch, and its sparks inherit it with a small random spread, so a burst reads as one colour with some variation rather than a rainbow. The rocket itself is drawn pale so it stays visible without competing with the burst.

The three sliders

At 60 frames a second, a launch rate of 4 averages between two and three rockets a second, a steady display. At 20 it is about twelve a second, a finale. At 0 nothing launches on its own and the sky is yours: click anywhere on the canvas to fire a rocket from that point along the bottom, at any rate setting.

Burst size runs from 24 sparks at 2 to 144 at 12. Large bursts fly faster and fill more of the screen, and take longer to fall.

Trails are a painter's trick rather than extra particles. The canvas is never fully cleared. Instead, every frame is covered by a translucent near-black layer, so everything already drawn dims a step and the trail behind each spark is the ghost of earlier frames. At 1 the layer is almost opaque and you see only the current positions. At 10 it is thin, so streaks linger and a heavy volley builds up a glowing haze.

Reading the result

The panel refreshes about twice a second with two counts:

• Launched is the total number of rockets fired since the page loaded, automatic and clicked together.
• Sparks is how many spark particles are alive right now. It is the best measure of how hard the sketch is working. A single burst at the default size adds 72, and a finale at full burst size can keep well over a thousand in the air.

If the animation stutters on an older phone, watch the Sparks count as you lower the burst size or launch rate. Smoothness returns once it drops, because the work per frame grows with the number of live particles.

Where real fireworks get their colours

The simulator picks hues at random, but a pyrotechnician is limited by chemistry. Each colour comes from a metal salt that glows at a characteristic wavelength when heated:

• Red from strontium compounds, the most common colour in any display.
• Green from barium.
• Blue from copper, the hardest colour to make well, because the flame has to stay within a narrow temperature range or the blue washes out to white.
• Orange and yellow from calcium and sodium. Sodium is so bright that a trace of it can swamp every other colour, which is why it is kept out of blue and purple mixes.
• White and silver from burning magnesium, aluminium or titanium.

Tips

• Fire by hand. Set the launch rate to 0, the burst size high and the trail long, then click a rhythm across the canvas. It is a quiet, fireworks-safe way to mark a celebration with pets or small children in the house.
• Capture a burst. Pause at the moment a burst is widest, then save the PNG. A long trail gives a long-exposure photograph look.
• Go fullscreen for a screensaver. Rockets already in the air carry on through the resize.
• Explore other particle effects. The matrix rain sketch uses the same fade-trail trick with falling characters, and the flow field generator moves thousands of particles along a noise field to draw with them.

Related tools