Dark Bit Factory & Gravity

PROGRAMMING => General coding questions => Topic started by: rain_storm on November 13, 2012

Title: Improving the basic fire effect
Post by: rain_storm on November 13, 2012

Basic fire effect as seen at Lodes Site (http://lodev.org/cgtutor/fire.html)
Produces effects such as the attached exe.

Now I have 64 bytes spare after this basic effect is in place and would like to make use of those bytes by improving the visuals. What options are available, How would I go about adding a coolmap for example?

Title: Re: Improving the basic fire effect
Post by: rain_storm on November 14, 2012

I found a good tutorial (http://freespace.virgin.net/hugo.elias/models/m_fire.htm) by HugoElias. The cool map alone wasn't enough to make it look good though. I had to play around with the pallet. This pallet worked best

Code: [Select]

for (int colour = 0; colour < 256; colour++) {
    Blue  = 0
    Green = min(2*colour, 255)
    Red   = min(4*colour, 255)
}

Here is the final release
http://www.pouet.net/prod.php?which=60743

Title: Re: Improving the basic fire effect
Post by: Hotshot on November 15, 2012

It ran Super Fast and Smooth on My Laptop :)

Good Fire Effect there  :)

Title: Re: Improving the basic fire effect
Post by: Tronix on November 16, 2012

Quote from: rain_storm on November 14, 2012

I found a good tutorial (http://freespace.virgin.net/hugo.elias/models/m_fire.htm) by HugoElias.

Many times i did fire effect, but never used "Cooling map". I think it is a very good idea.
BTW: i prefer this palette:

Code: [Select]

    for (c=0;c<=25;c++) { // black to red
        r[c]=(c*10);
        g[c]=0;
        b[c]=0;
    }
    for (c=26;c<=85;c++) { // red to yellow
        r[c]=255;
        g[c]=((c-25)*420) / 100;
        b[c]=0;
    }
    for (c=86;c<=141;c++) { // yellow to white
        r[c]=255;
        g[c]=255;
        b[c]=((c-86)*451) / 100;
    }
    for (c=142;c<255;c++) { // and then white only
        r[c]=255;
        g[c]=255;
        b[c]=255;
    }


Title: Re: Improving the basic fire effect
Post by: rain_storm on November 17, 2012

That is nice, You have more white in that pallet then the one I posted. The advantage of the one I posted is the size of the pallet generator. Two shifts (or adds) and two conditional moves. But of course such a simple generator is not going to output the best quality pallet.

The cool map is great for simulating convection. One thing that was mentioned by Hugo was that the cool map should be scrolled vertically at the same speed that the flames rise (one pixel per frame). I didn't implement this yet but he says that you can get nice tounges in the flames using this method.

Also his method for gathering heat is to take the pixels surrounding the current pixel and average
 x-1, y
 x+1, y
 x, y-1
 x, y+1

Code: [Select]

    +---+
    |   |
+---+---+---+
|   | X |   |
+---+---+---+
    |   |
    +---+

While in lodes version all of the heat is gathered from below the current pixel like this
 x-1, y+1
 x, y+1
 x+1, y+1
 x, y+2

Code: [Select]

    +---+
    | X |
+---+---+---+
|   |   |   |
+---+---+---+
    |   |
    +---+

With Hugos method heat will spread in any direction, while in Lodes method heat only rises.

Title: Re: Improving the basic fire effect
Post by: flightcrank on January 19, 2016

I implemented the HugoElias tutorial and came away with some really cool looking fire ! its the cooling map addition that really makes this effect look good.
(http://i.imgur.com/vn74mRm.png)

Title: Re: Improving the basic fire effect
Post by: spitfire on February 29, 2016

awesome, i still love this effect.

Isn't it interesting that the same basic blur box algorithm is at the heart of both the fire and the water ripple effect? Now we just need an earth and wind blur effect to have all the elements :)