How to create realistic smoke effects with astronomical photos

I was lucky enough to attend the Flash On The Beach conference in Brighton this week, and one of the highlights was Robert Hodgin of talking about his stunning work, including his famous Solar and Weird Fishes pieces. His Magnetosphere engine is now the default music visualiser in iTunes 8.

In passing, he mentioned that his smoke effects were created using photographs of nebulae. He didn't give any details about exactly how this works, but I thought it was such a good idea that I decided to have a go for myself.

The concept I came up with is simple: use a particle system to generate smoke-like behaviour, but instead of drawing each particle as a simple "blob," draw an image of a nebula. The older the particle, the larger and more transparent the image. Fairly simple, but it creates remarkably realistic effects.

The particle system I used is based on the Traer physics library (in fact, I used some of their sample code to create the smoke behaviour) but you could use any system you like.

The images I used are show below. I took pictures of nebulae I found via Google and cropped out the most interesting parts, then applied a circular gradient mask in Photoshop and saved the resulting image as a transparent PNG. The original PNG images are included in the ZIP file which is linked at the bottom of this post.

Here are a couple of videos showing the results from this process:

UPDATE: The videos have been moved to Vimeo, please see: Smoke 1, Smoke 2, Smoke 3.

The Processing source code for my simple example (along with the images used to create it) can be found in this ZIP file: If you run this code, you'll first see the particles drawn as red dots. If you press the 'i' key, the images will be drawn. Pressing 'p' hides the red dots. Finally, the 'm' key toggles mouse following mode. Don't forget, you'll need the Traer physics library for this to work. I used the OpenGL drawing mode because it considerably speeds up image drawing, but it will work using the default Processing renderer.

This is just a basic sketch of how the idea works, and as I said, I have no idea if this is exactly how Robert Hodgin does it. Either way, I think it looks pretty good.


blog comments powered by Disqus