We present here a fire effect which is built out of distorted Perlin noise and a few filtering steps. The result is a billowing and chaotic fire rising from the base of the display. The effect makes use of the perlinNoise method of the BitmapData class, plus a ColorMatrixFilter and a DisplacementMapFilter. Click the screen shot below or on this link to open the effect in a new window:
- Download all source files corresponding to the fire effect: fire.zip
Download the zip package linked above for the complete, commented, and easy to customize source code.
How the effect is created
The basic idea behind the effect is to use Perlin noise to distort another Perlin noise display. The variation over time occurs due to a smooth scrolling of the Perlin noise. Here we are repurposing the code used in our AS3 Flash: Low CPU Clouds Animation - Perfect for Mobile effect, with some modification. The ScrollingPerlinNoise class used here creates a seamless Perlin noise display which is smoothly scrolled over time using the same bitmap copying techniques as in our clouds effect.
Below we describe the steps used to create the fire, but it is also instructive to simply open up the fla file and experiment with it. In the onEnter function inside the main fla file, you will see the drawing and filtering steps used. Comment out some of the filtering steps to see the effect they have.
Here are the details behind the steps used to create the fire effect:
- Two instances of the ScrollingPerlinNoise class (which we call "clouds") are used to create the fire. These are grayscale Perlin noise displays which will smoothly scroll over time. We make the two copies scroll in different directions in order to create some scattered motion. The fire effect can be created with just one instance of these clouds, but we have found that using two layers fills out the fire better.
- A half-ellipse shape with a gradient fill is drawn over the clouds to round out the top of the display and make it smoothly fade to black at the top.
- We now change the grayscale image to firey colors. This could be handled with the palleteMap method of the BitmapData class, as we did in our wood texture AS3 WoodTexture Class - Apply Wood Texture to Any Display Object example. Here, however, we use a ColorMatrixFilter in a clever way to convert the colors to red, yellow, and white. The multipliers and offsets combine with the built-in clamping of color channel values of a ColorMatrixFilter to create the coloring. Dark grays will turn into red, medium grays will become yellow due to red and green mixing, and light grays will become white due to all of the color channels being pushed to high values and then clamped at 255.
- After coloring the clouds, we apply a blur which blurs more in the y-direction, to mix the colors and stretch out the image.
- We then apply a DisplacementMapFilter to distort the clouds into a wild fire display. The source for the DisplacementMapFilter is another instance of the ScrollingPerlinNoise class. Because it continuously scrolls, the distortion of the image rapidly changes over time.
- Finally, we do a little more touching up of the effect by applying another slight blur.
This series of drawing and filtering steps may seem rather convoluted, but it's the type of thing that results simply from experimenting with filters and Perlin noise. Experiment with the code and see what else you can come up with!