Fire Flame Demo Effect in Javascript

To run the demo in a larger window click the Bigger Canvas button. To exit press any key or click your mouse.


0 fps

This is an attempt to reproduce a fire effect demo from the good old DOS demo days. Each pixel here is represented by a single integer, 0 is for black (cold) and 255 is for yellow (hot), with orange and red shades in between. The bottom 2 rows are filled randomly with hot and cold pixels.


The color for each pixel is determined by calculating the average of the neighboring pixels and subtracting a small random value. The locations of the pixels chosen for the calculation affect the patterns made by the flames. All the pixels are then mapped to the appropriate color based on the "heat" of the pixel and the frame is displayed on the canvas. Each pass over the pixel array calculates a single frame of the animation which is then displayed on the HTML5 canvas.

Pixel Calculation

In this implementation the pixels marked as A are used to calculate the average for pixel P.

Click here to view editable code to play with

One thought on “Fire Flame Demo Effect in Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *