The Tron (1982) movie, in addition to inspiring me and a lot of people of my generation when we were younger, was also a pioneering effort for computer-generated graphics in film.

Ken Perlin, who worked on Tron was frustrated by the "machine-like" appearance of the models in the movie, and then he developed a method of creating textures with a mathematical algorithm that could be applied to images to introduce that random quality that real world has, less perfect computer-generated imagery.

These procedural textures can be used to lots of things, but I focused on a way generate smoke,fire and water surfaces.

Perlin Noise functions, generates a noise texture, who look random , but it is not random at all.
Perlin algorithm also creates noise over multiple layers, each called an octave, which is twice the frequency of the octave below it.
This two properties are the base of using perlin noise, to generate our fire, water, or other effects.

Examples of perlin noise:

For creating water or fire like effects, we can now use "DisplacementMapFilter".
This fileter will create a displacement of the pixels in function of the color level of the mask we apply.
The math of this method is quite simple, and the results can be seen here:

So, how can we now create fire ?

We can create a simple gradient background, with the colors we want for our fire, The Perlin noise itself will create sections of light and dark that work perfectly for a displacement map to distort the fire pattern,

The task now is to distort the field in a manner that calls to mind a flame.
For that, we turn to Perlin noise.

The bitmap data used for the Perlin noise, needs to keep the "randomSeed" property constant with time, to create the same noise image each frame,
but "perlinOffset" holds the offset positions for both octaves that we generate. So if we alter these offsets each time we will create animated fire.

So now, we just need to distort our image using the Perlin noise each frame to generate our fire.

Click here to see the demo. ( requires flash ).

In resume:

  • Make a gradient source movie clip that contains out fire color and shape.
  • Create a flame granularity texture using "perlinNoise".
  • Create fire flames using "DisplacementMapFilter" on a "perlinNoiseBitmap" and then apply on our Fire gradient.

Altering the parameters of the Perlin noise and our background image, we can generate easily smoke, electric currents, clouds or watter surfaces.


Click to see a demo and configurate the parameters. ( requires flash ).