Smoke animations

[paulscode]

I have been playing around with Photoshop to try and create some billboardable smoke animations with alpha (keyframes in .png format).  What I've been doing is drawing some grey cloud shapes and applying blur effects to them.  My results thus far have been ok, but I can't seem to make the smoke "lumpier" (areas inside the shape that are more transparent than other areas).  Does anyone have experience with this, or know of some good photoshop tutorials?

[C3R14L.K1L4]

Holy s*** doing that work by hand and frame by frame... mercenary job... and if you want it fluid (with high fps) -> more job
I have no experience in photoshop's masks (I think they're related to transparency, right?) but in paint shop pro you can easily do that by taking the original smoke image and create a new mask from the pixel's intensity value so you'll end with a graymap as alpha map. Then you can go back and forth between the smoke and transparency images refining what you want.

Look at the following skillfully drawn images: 



nice smoke hein?



creating the mask



from illuminance



result



viewing the mask, then allowing editing it



inverting the mask and doing some excellent painting work -> extremelly sexy smoke

I think it's this you wanted to know but as I said, doing this is boring... Doing a "simple" program to generate smoke and save it's animation may prove worthwhile on the long run... And there must be free software for this (procedural generation and animation?...)

[paulscode]

Thanks for the illustrated explanation!  After looking over this, I think I have figured out what I am doing wrong.  This appears to be more or less the same procedure I am using in Photoshop, the only difference is that I am starting with a single solid black-and-white cloud shape and applying a Gaussian blur filter to it.  The result is unlike your nice lumpy/billowy starting image, in that the entire shape is darker toward the center and lighter toward the outside, rather than having a lumpy look to it.  That seems to be the part I am missing to make my smoke more cloudy.  From the look of your image, I assume you started with unconnected shapes of various sizes rather than a single shape, correct?  I'll try playing around some more to try and get a starting image like what you have here.

Holy s*** doing that work by hand and frame by frame... mercenary job... and if you want it fluid (with high fps) -> more job

Well, my plan is to only procude like 3 or 4 keyframe images with incremented alpha intensities.  Then in my game I would cycle through them on a billboarded quad with TRANSPARENCY_MODE_ADD and LIGHTING_NO_LIGHTS.  But rather than simply jumping from keyframe to keyframe, instead I would transition between them using setAdditionalCollor with an intensity-per-milisecond value, setScale with a scale-per-milisecond value, and translate with an offset-per-milisecond value.  That way, faster fps should result in a more fluid animation without having to draw more keyframes.  I have no idea how this will end up looking, but I'll post an example when I get it working.

[paulscode]

Ok, I found a pretty good method for creating lumpy smoke.  I start with a simple spray-painted image with areas of different saturations to give it some feel of depth:



I then invert that, apply the Gaussian blur, and use it as a mask, resulting in:



This was only my first attempt, and it is already much closer to the kind of look I was trying for.  I still want even more depth, but at least I am on the right track now.  I'll probably try playing around with different color combinations to see what I can come up with.

Thanks again for the help!

[paulscode]

After playing around with this some more, I have finally been able to achieve my goal of nice fluffy smoke images.  I thought I would outline the procedure for anyone interested (using Microsoft Paint and Adobe Photoshop).

1) In Paint, use the Airbrush tool to draw a simple smoke sphere.  Use white, black, and shades of gray to make it look "lumpy" like a cloud, something like this:


2) Load your cloud in Adobe Photoshop, and go to Image->Adjust->Invert.  The result should be a mask that looks like this:


3) Open an image of some real-life smoke.  I used the following jpeg of cigarette smoke:


4) Go to Image->Image Size, and make your smoke image the same size as the mask in step 2 (make sure "Constrain Proportions" is not checked).

5) With the "Select" tool on, right-click the resized image and choose "Select All".

6) Go to File->New, and make a new image the same size as the mask in step 2 (make sure "Transparent" is selected).

7) Go to Edit->Paste.

8 ) Go to Layer->Add Layer Mask->Hide All.

9) In the Layer Pannel, choose the "Channels" tab.

10) Turn on the Eye next to "Layer 1 Mask":


11) Go to the mask image created in step 2, select all, and copy.

12) Return to the new image from step 6, and paste.

13) Go to Filter->Blur->Gaussian Blur

14) Move the slider to achive the desired fuzzyness, and click Ok

15) Return to the "Layers" tab in the Layer Pannel, and select the "Layer Thumbnail" to see the final result:


I will now begin programming the smoke animation in jPCT, and I'll post a demo applet when I get it working properly.

[C3R14L.K1L4]

Humm, I want to see the ending result
What kind of smoke are you trying to produce? From a cigar? Fire? Soot?

[paulscode]

For now I want something like exhaust smoke.  However, this procedure could be used for many kinds of smoke and explosions by simply changing the shape of the mask, the photo, the amount of blur, and the alpha channel.

[paulscode]

Ok, I have finished writing the demonstration:

http://www.paulscode.com/demos/SoundSystem/12MAY2009/Helicopter.html

This is a proof of concept more than anything.  I only used two keyframes and a simple sphere shape moving in a straight line.  The affect could be improved with more keyframes and using something like a cosine function for more realistic movement.

The code is still pretty ugly at the moment.  This is going to be the new and improved helicopter demo when it is finished, and I'll post the source code on my 3D Sound System thread when it is complete.

[C3R14L.K1L4]

Ehehehe, a smoking helicopter
Well done, and if you animate the smoke clouds (and perhaps some kind of morphing between frames) that would be perfect.

[JavaMan]

Cool, it looks like its about to sputter out.  Very smooth animation on my box.

I know this is just test for smoke and nothing to do with sound, but as a side note, I opened up the applet in new tab in FireFox3. When I closed that tab, the helicopter sound continued to play until I ended the java thread in Vistas task manager.  

[paulscode]

I know this is just test for smoke and nothing to do with sound, but as a side note, I opened up the applet in new tab in FireFox3. When I closed that tab, the helicopter sound continued to play until I ended the java thread in Vistas task manager.  

Thanks for noticing that.  It is because I never called SoundSystem's cleanup() method.  In JavaSound (which this applet is using at the moment), looping sources will continue to play until Java is shut down (usually by closing all browser windows).  If I had used OpenAL, even worse things could happen (for one user, forgetting to call cleanup resulted in the OS crashing and his computer had to be rebooted).  This is a great example of why it is always important to call the cleanup method at the end of a program when using SoundSystem.

[JavaMan]

(for one user, forgetting to call cleanup resulted in the OS crashing and his computer had to be rebooted

Gulp, uh I'm glad you were using JavaSound. With this Vista thing that might have happened!