The jQuery Bloodforge Smoke Effect

by filip 11. June 2015 23:07

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.

The latest source files are located here:


Webkit

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

This works in webkit!

The above code should work on webkit browsers (so Chrome, Safari).


Support all modern browsers

To make it work on Internet Explorer and Firefox, use the forceBackgroundRender flag. This has a much bigger performance hit (there is no performance hit on webkit since the standard render method is used), but it may be acceptable based on the size of the background.

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

This works in all modern browsers!

Write directly to a canvas element

Also, if you call this directly on a CANVAS tag, it will draw directly to that element.

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


Options

  • backgroundColor: A hex or rgba value indicating the background color for the effect. If the container already has a background, the effect will inherit that. If the container does not have a background, it will be set to rgba(0, 0, 0, 0.5).
  • density: A number indicating how dense the smoke is. The higher the number, the more dense. The default is 8.
  • maximumVelocity: A number indicating how quickly the smoke travels. Default is 1
  • fps: A number indicating how often to redraw the smoke. Default is 15
  • forceBackgroundRender: If set to true, this will make the SmokeEffect work in browser that are not based on webkit. However, this comes at a performance hit. The default is false
  • image: The image to use as the smoke particle. This can be either a URL or a Base64 string of the image. You can change the color of the smoke by changing the image. If you provide a custom image, you need to update the imageWidth and imageHeight properties described below.
  • imageWidth: The width of the image for the smoke particle. Default is 128 pixels.
  • imageHeight: The height of the image for the smoke particle. Default is 128 pixels.

Example of setting all options (you don’t need to set all}.

$('selector').SmokeEffect( {
    backgroundColor: '#FF0000',
    density: 12.
    maximumVelocity: 1.5,
    fps: 20,
    forceBackgroundRender: true,
    image: 'http://myurl.com/mySmokeImage.png',
    imageWidth: 100,
    imageHeight: 150
} );

Tags:

Bloodforge Band

Looking for the Bloodforge band site? Click here.

About Filip Stanek

Death Note Pic I'm a developer at ACG in Cincinnati, OH. I like ASP.NET, Flash, and other web technologies, & enjoy playing chess, video games, etc.

Currently playing:

Disqus

Month List