Particle smoke effect
- July 14th, 2012
- Posted in Development . Web
- Write comment
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
A computer graphs 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 edges, remember there are no straight lines in nature and we wnat this to look natural. If you do this will cause a straight line on the sprite down the edge, no matter how feint it is generally quite noticeable when they are blended together.
Step 2 – Load the sprite and render it
Ultimately there is not much too 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.
just wanted to say this is such a great effect .i layered this with illuminated.js and came up with http://the-underground.co.uk/ugtest/illum1/test.html
brilliant effect ty for sharing it
Glad you found it useful and like the look of what you managed to achieve with it, works nicely with the background colours :).
I have noticed that you hard coded the width and height of the canvas, you may want to have a look at this and particularly the updateBounds function as this will update the canvas to fit all the available space if it is resized 🙂
This is really really neat. I updated your code and converted it to a jQuery plugin. That allows to add a smoke particle effect as a background to HTML elements.
You can see it at https://bloodforge.com/post/the-jquery-bloodforge-smoke-effect