We present a colorful fireworks display created with an animation of thousands of particles. The fireworks are created using abstract particles which are drawn as pixels to a bitmap. For added realism, we lighten up the sky when the fireworks explode, and also place a dark skyline over the animation. Click the screen shot below or this link to open the effect in a new window..
- Download all source files corresponding to this effects: fireworks.zip
About the Code
We have used two different types of particles in our examples at Flash and Math. In some examples, particles have been sprites, such as in Nova - Cosmic Interactive Particle Effect in AS3 Flash or A 3D Snowfall Effect with Realistic Turbulence and Sense of Depth. At other times, we have used abstract particles, which are not display objects. Instead, each abstract "particle" is simply a collection of data such as position and velocity. The actual drawing of the particles takes place on each frame when the particle positions are used to draw pixels to a bitmap. This abstract approach is explained in our tutorial Pixel Particles Made Simple - AS3 Flash Tutorial.
To create the fireworks, we make use of two types of abstract particles in our code. The "flares" will not be seen - these explode away from a central position when a new firework is created. On each frame, "sparks" will be emitted from the positions of each flare. The sparks will be drawn to a bitmap. The motion of the flares and sparks is governed by some simple physics simulation, including gravitational acceleration and slowing due to air resistance.
In order to assist with creating realistic motion, we use 3D particles with x, y, and z coordinates and 3D velocity vectors. However, for simplicity we will not bother with proper perspective projection of the particles. Instead we will simply project to the plane by ignoring z-coordinates while drawing. This is realistic, because fireworks are usually far away from the observer, where perspective effects are not noticeable.
We are using some simplified versions of the particle classes used in some of our other particle animations. Here, we have a simple Particle3D class which records only a few variables for a particle, such as position, velocity, and color, plus some "envelope" variables used to control how the particles evolve over time. We also make use of a Particle3DList class. This class simply takes care of storing the particles in a linked list, and contains methods for adding and removing particles to and from the list. When particles are removed, they are stored in what is called an "object pool" (we call it a "recycle bin") so that they can be reused later.
The colors are created by randomly selecting from an explicit list of colors created in the code. Some whitening and gradual fading of the particles is accomplished by applying a few filters to the bitmap data. See the well commented code for more details.
To simulate the way the sky lights up when fireworks explode, we place a black rectangle on the stage behind the fireworks, and lighten it with a ColorTransform. The brightening amount is determined by the number of particles presently being animated. We use a very slight blue tint for this backdrop. Stars are created by placing a star layer over the sky, and setting its blendMode to "lighten". This will make the stars contribute only light to the display (they will never darken it if the backdrop is lighter). The stars are created with random placement and brightness, but in such a way so that they tend to be brighter towards the top. A skyline is created by simply placing a black colored MovieClip over the top of the entire display.
A Few Related Flash and Math Particle Effects and Tutorials
- Flower Twist – Interactive 3D Bitmap Particles in AS3
- Astronaut - 3D Particle Effect in AS3 Flash CS4
- 100,000 Glowing 3D Particles Run Smoothly in Flash Player 10.1
- Nova - Cosmic Interactive Particle Effect in AS3 Flash
- A 3D Snowfall Effect with Realistic Turbulence and Sense of Depth
- A Rotating Bitmap in 3D Explodes into Particles
- Pixel Particles Made Simple - AS3 Flash Tutorial
- Fading Trail Effect for Flash AS3 Particle Animations - a Simple Example