Fire effect

Color palette

The fire effect is a simple effect that uses a predefined color palette and a directionnal blur filter.

First we have to define the color transition within the color palette, as we want to simulate the fire we can easily think that the color black will be the coldest and the color yellow will be the hottest. Here is such a color palette (256 colors):

In such a palette, the lowest index (here 0) refers to the coldest color and the highest index (here 255) refers to the hottest color.

Decreasing and smoothing the color intensity

To make realistic effect, the fire intensity must decrease and move up vertically. This is done by using a directional blur filter. Such a filter is applied by using a convolution product according to a predefined matrix (the same technique used in some filters downloadable on this website).

Here is an example of such matrix (the one used in my code):

The blur filter is applied from the top to the bottom of the bitmap, even if the blur filter is directional, this allows the spread of the fire from bottom to top. Here is an example with one pixel:

By shifting randomly the filter we produce a realistic fire effect. Such an operation is simply done by adding a random number to j column index.

Finally, the rendering bitmap is filled with colors picked up in our predefined color palette that gives the final result. As the fire always decreases at each iteration, the only thing to do is to permanently activate the pixels we want to keep persistent, this is done by copying the original bitmap pattern on the fire surface.