Bloodforge Smoke Effect

I stumbled upon a very neat piece of code written by Jonny Cornwell for a particle smoke effect. The concept was really neat, but I really wanted it to be easier to use. The end result is a jQuery plugin that allows the developer to add a particle smoke effect background to any element on the page.

See it in action by visiting my blog at https://bloodforge.com/#!/post/the-jquery-bloodforge-smoke-effect

Version History

• 1.4: Performance improvements & code cleanup. Remove fps setting. Resize handling. Changed defaults. The density setting can now be changed after initialization.
• 1.3: Allow the dynamic setting of SmokeEffect options.
• 1.2: Smoke is now drawn directly to the canvas. You can now set the color of the smoke. Added color, opacity, and particleRadius settings. Removed backgroundColor, image, imageWidth, imageHeight settings.
• 1.1: Removed webkit-specific drawing since it is no longer supported. Removed forceBackgroundRenderer setting.
• 1.0: Initial release.

Support all modern browsers

<div id="smoke-effect" style="padding: 2em;">    This works in all modern browsers! </div> <script>       $('#smoke-effect').SmokeEffect(); </script>

NOTE: In Microsoft Edge, this may cause flashing of the background. Instead, write directly to a canvas as described below.

Write directly to a canvas element

Also, if you call this directly on a CANVAS tag, it will draw directly to that element. This is the ideal method of using this plugin since it has the least impact on performance.

<canvas id="smoke-effect-canvas" width="300" height="100" /> <script>    $('#smoke-effect-canvas').SmokeEffect(); </script>

Options

• color: The color of the smoke. Default is black. If you pass a RGBA value, the alpha component will be ignored. To set the alpha, see opacity below.
• opacity: The opacity of the color defined above. Default is 0.2
• density: A number indicating how dense the smoke is. The higher the number, the more dense. The default is 10
• maximumVelocity: A number indicating how quickly the smoke travels in pixels per second. The actual travel speed is somewhere in between 0 and this number. Default is 50
• particleRadius: The radius of each smoke particle. Default is 150 pixels.

Example of setting all options (you don't need to set all}:

$('selector').SmokeEffect( {     color: 'red',     opacity: '0.35',     density: 12,     maximumVelocity: 75,     particleRadius: 300 } );

Dynamically chaning options

You can also change certain settings after initialization. This applies to color, opacity, maximumVelocity, and particleRadius. For example:

$('selector').SmokeEffect('option', 'color', '#ff00ff');