Source code: https://github.com/Leftium/fx/blob/main/src/routes/fire-plas...

I made this naive fire effect as realistic as possible; arguably more realistic than some simulations based on real fire fluid dynamics[1]. The naive algorithm uses a kernel to simulate convection, diffusion, and cooling of heat. Described in more detail by Joakim Hårsman[2]. Also see working demo of the OG fire algorithm by Justin Greisiger Frost[3]

While canvas + CPU gets surprisingly good performance, this effect would probably run much faster on the GPU. On mobile, this version is sized to work better: https://fx.leftium.com/fire-plasma?standardSize=0&text=Le

In my improved version, flames "lick" the bottom of the floating text. This is my favorite part. It was totally unexpected and just emerged from the algorithm. Compare to Joakim's version by changing the text: https://fx.leftium.com/fire-plasma?text=%E2%97%AF

Major improvements over prior art:

- True-color fire gradient/palette with transparency looks decent over non-black backgrounds : https://fx.leftium.com/fire-plasma?bgColor=

- Fire seeded with perlin noise + brownian fractal movement: fire is overall less uniform while avoiding "random mess" at base of fire: https://fx.leftium.com/fire-plasma?fireSeedIndex=3

- More complex fire kernel for more realistic looking fire

This was one of the first projects I have recently worked on without the assistance of a coding agent. I only chatted with LLM's a few times to get ideas and help with type errors. As a result, I feel this project took more time, but the code is more succinct/hand-crafted.

---

I wonder if anyone can find other pleasing values for the fractal noise seed. The values can be adjusted via URL params like this: https://fx.leftium.com/fire-plasma?octaves=4&lacunarity=2&ga...

You can also view the perlin noise by itself using this URL: https://fx.leftium.com/fractal-noise?octaves=4&lacunarity=2&...

For a description of octaves, lacunarity, gain, etc: https://gamedev.stackexchange.com/a/197862/229

[1]: https://www.escapemotions.com/experiments/fluid_fire_3/

[2]: https://ghostinthecode.net/2016/08/17/fire.html

[3]: https://jdfio.com/pages-output/demos/x-mode/

Show HN: Realistic procedural fire effect via naive algorithm