Whoever said it was wrong to play with fire?

over the winter holiday I decided it might be a good idea to exercise my programming abilities and take on an assignment that may be beneficial for the future. I wanted to work on something that would integrate the information I learned in my classes last semester, and have the end product be something that looked cool,  nothing too difficult but a nice little challenge to keep my developer juices flowing.

I have always had a a fascination with particle systems and they are a perfect way to combine the subjects of computer graphics, computer animation, and data structures. So what better place to start than a nice simple fire rendering animation?

overall the task wasn’t to hard, but it’s one of those things where the more time you put into it, the more aesthetically pleasing your end result will be. The seemingly daunting task was actually really easy when I broke it down into smaller steps, and other than maybe one or two minor obstructions, it was actually quite fun. 

Taking it nice and slow, I began with a simple quad in openGL, interpolating from one point to another. 
 
this was probably the easiest part and obviously very visually un-appealing… in fact, this doesn’t look anything like fire at all.
the next step was to multilply that particle and spread them out all over the place.
I also needed to think of a way to contain the particles so that they represented fire.

I now needed to create an array of red, upward rising, square particles, and probably give them a little more variance in the X axis. To contain the particles I defined an inverse parabola, and tweaked the variables such that the “flame” would look more like a candle. hmm, let’s see how this turns out.
 
well this is a bit better. at least now there are some particles(1000 to be exact) flowing in random directions making the basic shape of a flame. When you look at a real fire though, you will notice that it doesn’t really stay one colour, and as a flame gets farther away from it’s source it will start to turn yellow. Well this shouldn’t be too hard. in fact we don’t even need colour interpolation. simply incrementing the G values of each particle is enough to slowly make each particle turn a little bit more yellow with each passing frame. now we are getting closer to a fire effect.


well now that I have a nice flowing flame that changes color and everything, I can probably just call it a day because I’m not gonna get any farther right?

nope! although the retro fire effect is kinda cool, and very minecraft-esque, it’s a little blocky for my taste, so I decided to go ahead and really try to make this flame look pretty.
Unfortunately this is where I ran into a bit of trouble. I wanted to make each particle have a bit of a glow effect, which involves the use of alpha blended textures. To achieve this I needed to use texture loading, which for the longest time, OpenGL was giving me nothing but troubles. 

 here is a sample of the alpha blended texture I used on a black background to obtain this desired effect. I generated this image simply by creating a gradient in Photoshop that spreads radially from white to transparent. I used the PNG file format because it supports alpha channels making them much easier to work with. 

The final product is actually pretty cool. I am sure I could do more with it, but for now I think I accomplished something pretty interesting, and learned some good techniques for making particles look pretty and slightly more realistic.

 
well I hope this blog post has been enjoyable for anyone who chooses to read it, and maybe even proven useful for anyone struggling with getting their particles to look nice. Hopefully in my Intermediate Computer Graphics class, I will learn some new really cool techniques for making better more Aesthetically pleasing particles with shaders and and the GPU. 
until next time!