19 May 2010HTML 5 Canvas Sheet Fire Effect
Initially I built the traditional “Hello World!” program of the graphics world … the Starfield effect! I was working on a 2d canvas but projecting from a 3D particle system. The maths are relatively easy to get right even if you are out of practice. However this was too easy and I grew bored even though I did create a fireworks system that looked pretty.
I decided to move onto pixel based simulation and that is when I remembered the sheet fire effect as above. I used to love putting the effect in assembly demos back in the day. It is a simple system where each pixel is assigned a heat. The heat of a pixel is a function of the average heat of the surrounding pixels in the previous time frame with more weight given to the pixels below the current pixel. The heat decays each time step. (i.e. heat rises and dissipates over time). The bottom row of pixels has randomly generated heat. The heat value is then mapped to a pixel value. In the example above I used a linear mapping between heat and intensity of the red color. A more interesting mapping could map heat values to a spectrum of colors such as red → yellow → blue → white.