Having just finished a basic particle engine I thought I would quickly use this as a basis to make a smoke / fog effect.
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
- 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.
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.
As usual feel free to make requests for what you would like to see on the backlog.
[…] Fire effects […]
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
[…] BloodForge Smoke Effect Plugin is easy to setup and integrate in html and WordPress websites. Based on a particle smoke effect posted by Jonny Cornwell. […]