Mr Speaker

On the way to work today I remembered an old trick to create a “fire” effect: you randomly assign a colour to the pixels on the bottom row of the screen (in the same hue) and for each row above it take the average of the 3 pixels immediately below it, and 1 pixel that is two rows below it.

Like so:

 *
123
 4

The effect “smooths out” the colours as they move up the screen. If you make the colours start at white, then move through yellow, red, and black – then it looks all fire-y. But adding the array look-up just killed my browser, so I’m sticking with black & white and calling it “smoke”. Pretty useless, but there you go.

I had originally done it with the createImageData and putImageData API calls – but decided to change it to drawing circles instead of pixels. This was horrrribly slow, so I moved on to filled rectangles. Also horrrribly slow, but passable.

Check the “smoke” effect (requires Canvas)