You’re visiting the personal website of Joost Schuttelaar.

Take a look


You can e-mail me at jelephants @ jstsch.com (anti-spam: please remove the mammal with the big snout).

Twitter feed @jstsch

Sorry, feed is gone. API has been killed by Twitter.

Recent posts

Old-skool fire demo effect in Javascript/Canvas

Saturday April 5 2014

For fun and to experiment a bit with RequestAnimationFrame I reimplemented one of the classic demo effects using Javascript and the Canvas element.

[open fire effect full-screen in a new window]

The code and algorithm is based on the fire example in The Demo Effects Collection, originally in C (source). The algorithm is pretty simple: randomly pixels are turned on/off in the bottom row. Each row is then shifted up, blurred with the next row (from the previous frame), decayed and color mapped.

At 30FPS it takes about 17% CPU in Safari on my mid-2010 MacBook Pro 17”. Quite a bit for something that used to run on machines a thousand times less powerful, but of course this would’ve been implemented in assembly back then instead of Javascript :)

The flame intensity randomizes by default. You can set it manually using 1…9 on your keyboard (and 0 to go back to random mode). You can also tweak the rendering resolution by resizing the canvas element. The FPS can also be modified by altering the source.


Fractal @ Friday October 7 2016 03:17
Love it!

(never shown, not required)
(not required)