DoomFirePSX | Fire effect from Doom PSX/Nintendo64 | Media library

(nota: a Minimal, Complete, and Verifiable example is provided at the end of this question)

Summary

1. Context, Aim & Problem

2. My (possibly wrong?) understanding of the author's explanations and sources - note: I have to explain it to you, since my errors can come from a bad understanding of what to do or a bad implementation of my behalf...

3. What I have done

4. Expected results, Actual results & Question

5. Minimal, Complete, and Verifiable example

Context, Aim & Problem

I study the animation of the famous DOOM game according to http://fabiensanglard.net/doom_fire_psx/, which consists in generating fire.

A full version of the author's code is: https://github.com/fabiensanglard/DoomFirePSX/blob/master/flames.html

I ended with this implementation but the result I have is an animation of noise (that's the problem). Indeed, at the end of this animation, I get this result:

My (possibly wrong?) understanding of the author's explanations and sources First approach: implementation of the main principles, and simplification of the fire (because replaced by a simple gradient of colors)

1. Set up a precisely filled color set: this set defines a gradient that looks like fire. There are 36 colours from white to black, and among them there are yellow, orange and red. This set does not contain any duplicates.

2. Iterate a first time on the canvas pixels. Here the goal is to color all pixels black (i.e.: the last color of the set).

3. Iterate a second time on the canvas. This time, we must color in white the pixels of the first line at the bottom (i.e.: the first color of the set).

4. Iterate again on the canvas, but only from the second bottom line (included), not from the first bottom line (which is thus excluded). For each iterated pixel, we modify its color in this way: we take the color of its direct lower pixel, we find the index of this color in all the colors, we add 1 to this index: we obtain another index called i2, we find the color whose index is i2, then we apply this color to this iterated pixel.

Once the execution is finished, there will be several gradients, each containing 36 lines (36 colors).

To make it really look like fire.

The program explained by http://fabiensanglard.net/doom_fire_psx/ goes further than that, of course: it uses the pseudo-random twice, to get something that doesn't look like a simple gradient but does look like fire.

The idea is as follows. For the pixel being iterated:

We get the color index of the pixel located just below. Then, we get the color, in the color set, whose index is this index + a random number involving a slight shift (by a maximum of 2 squares if I remember correctly). Thus, we can model the acceleration of the variation in the temperature of the particles.

And, in addition, we consider the pixel located a little to the left of the pixel being iterated. "A little bit" = according to the same random number of chip number 1. It is this pixel located a little to the left that will be assigned the color recovered in chip N°1. Thus, we can model the horizontal displacement to the left of the flames.

So we see that it is a triangle work (because we take the pixel being iterated, the one just below and the one a little to the left).

Pseudo-random used to model the acceleration of particle temperature variation acceleration

A random number is generated, between 0 and 3 both included and is used here:

firePixels[src - FIRE_WIDTH ] = pixel - (rand & 1);

A slight variation in the colour to be applied is therefore introduced.

Pseudo-random used to model the horizontal displacement to the left of the flames.

In addition to what we have just seen, pseudo-random used on the pixels, per line is also used.

This same random number is re-used here:

var dst = src - rand + 1; firePixels[dst - FIRE_WIDTH ] = pixel - (rand & 1);

Here, a slight shift is made horizontally.

What I have done

All the explanations above have been implemented, but my program outputs bad results. So:

1. Either I didn't understand well the thinking,

2. Or I badly implemented it.

You will find the implementation's sources below.

Expected results, Actual results & Question

I expect to have several vertical gradients (each from bottom to top). "Several" because my canvas' height is greater than the number of the colors of my gradients and because I use a modulo to choose the color to apply. These gradients must be like those of the curse (http://fabiensanglard.net/doom_fire_psx/).

The actual results are: I get several noises instead.

My question is: why doesn't it work? I think I well understood what to do. Perhaps I forgot ssomething in the implementation, but what?

My question is: why doesn't it work? I think I well understood what to do. Perhaps I forgot ssomething in the implementation, but what?

Minimal, Complete, and Verifiable example Launcher.java ...