Having just finished a basic particle engine I thought I would quickly use this as a basis to make a smoke / fog effect.

How?

Step 1 – Make your sprite

In computer graphics the smoke effect image which is used along with the particle is commonly known as a sprite. I made the sprite using GIMP which is free to use. I created a transparent png and then used a few brushes and the airbrush with a grey colour, nice and easy. The most important thing here is to not draw all the way to the edge. If you were to do so, no matter how feint, it is generally quite noticeable when they sprite is blended. Remember there are no straight lines in nature and we want this to look natural.

Step 2 – Load the sprite and render it

Ultimately there is not much to it, I used the basic particle engine as the start point for this. Finished code here

Notable differences

• In the particle draw function if the image has been set I draw that instead of the circle as before
• The image is loaded asynchronously so before setting the source, the instructions of what to do when loaded need to be specified. In this scenario we are just going to go through all the particles and set the image on them.

Notes

Quite a log can be achieved using images in particle engines, these are more commonly known as sprites in this context. Also when using sprites you can get away with using fewer particles to create more complex visual effects. Here is a version of the smoke effect while also drawing the centre point of the particle so show how many particles are on screen.

That’s it

As usual feel free to make requests for what you would like to see on the backlog.