Sam Allgaier

Current messings around in P5.js: DOOM fire

Credits

I found the general method to produce this DOOM-styled fire generation from this website. It steps though the basic methodology, and at the bottom it has a codepen link to a full implementation if your interested in seeing it that way. I just ended up following the loose methodology, along with adding a render buffer—to better reference the previous frame— and expanded the capabilities of the color palette beyond the original 36 colors used.

Methodology

As stated above, the methodology can be found here; however, here's a breif rundow of how it works:

  1. Begin by setting the bottom row of pixels to some value corresponding to 'peak brightness' (in DOOM—or at least the website I listed—this would be 36 to go with the corresponding 36-color palette). Leave the remaining pixels black.
  2. Copy the value of each pixel to the row above to simulate flame rising.
  3. To add in some fun randomness, shift the pixel a little bit to the left or right as you move it up.
  4. To simulate the fire dissapating, reduce the brightness by a (small) random amount as you move it up.
  5. Render tthe flames! Originally this was done with a lookup table and a color palette. For a simpler approach you could just map the brightness to the red channel. I'll share what I did below.

Mapping brightness to a color gradient

You may think that the color gradient is not just a simple, one-step, linear gradient... and you'd be correct! I tried messing around with the RGB values in different ways to get a good flame effect, but I wasn't getting anything that looked quite as good. I ended up disecting the original color palette in MATLAB to see if I could get a good curve of best fit to interpolate more values if I upped the resolution.

graph of RGB data compared to brightness

By plotting the RGB values as brightness varied, I was able to see that each color channel just followed a few discrete linear segments! From there is was trivial to easily render from brightness to color along the flame. I mainly show this because I think it's interesting to see how these simple linear segments generate a color palette fit for a flame.