Computable Minds
Tutorial en español: Jquery fire plugin

Jquery fire plugin: fire animation and fire texture generator

Jquery fire pluginis a Jquery plugin to create animations and images of fire on your page, or to generate, copy and use them independently of this plugin. If you use the first option, the size of the images will don't use any space (only 4.5kb that occupies the plugin compressed with gzip and the space required for the Jquery library). Only it has a problem, due to the use of the new canvas element of HTML5, it doesn't work with Internet Explorer 7 or any prior version, but in these cases you can do that appears an image directly with the conditionals comments of IE. To generate the image of the fire texture you can use the following form:

Working

You must include the Jquery library and the plugin, the last version is the 0.62, which you can download with this link or in the following examples of use:

The functionality over Internet Explorer 8 is limited only to the image mode and you have to include additional javascript file that is provided in the following example:

Javascript code for call the plugin, with some example parameters:

$(document).ready(function() {
  $('#fire').fire({
                speed:20,
                maxPow:5,
                gravity:0,
                flameWidth:3,
                flameHeight:0,
                fadingFlameSpeed:8      
        });
  });

We can assign the effect to any kind of element, preferably a div:

The widht and the height of the effect can be specified with the prior parameters or in the CSS code:

#fire{width:150px;height:100px;}

HTML code:

Also we can use it directly over a canvas object:

Parameters:

The most important parameter is the parameter mode, that is explained next, to understand the rest of parameters is recommended use the upper form.

mode String Default value:'anim'

Establish the working model of the plugin, the possible values are:

'anim': Animation mode. The fire is an animation.

'background': Background mode. The fire is an fix image (established with the background-image property of CSS). If the size of the element on which applies has an width bigger than the established with the parameter width, then the fire is drawn as a texture that can be repeated without cuts over the X axis (appreciable only if the parameter 'burnBorders' is true).

'image': Image mode. The fire is a fixed image that is created inside a new element img.

Establish the mode:

$(document).ready(function() {
  $('#fire').fire({mode:'anim'});
});

Global parameters

This parameters affect to all the working models ('anim','image' and 'background').

width Integer Default value:null

Width of the image or the animation.

If wasn't established in the initialization will get the widht of HTML element. If wasn't established the widht neither in the initialization nor in the HTML element, will throw an exception.

height Integer Default value:null

Height of the image or animation.

If wasn't established in the initialization will get the height of HTML element. If wasn't established the height neither in the initialization nor in the HTML element, will throw an exception.

maxPow Integer Default value:3

Value between 0 and 10 that determines the maximum power of the fire.

Changing this value will do that the fire be more or less intense and arrive more o less high.

minPow Integer Default value:1

Value between 0 and the value of the parameter 'maxPow' that determines the minimum power of the fire.

This value only can be appreciated if the parameter maxPowZone doesn't has the value 'uniform', because it determines the minimum intensity in rest of the modes of that parameter.

maxPowZone String Default value:'uniform'

Establish the part of the effect that will have the maximum and minimum fire power, established with the parameters maxPow and minPow, respectively.

Possible values:

  • 'uniform': All the parts appears with the maximum power.
  • 'left': The left part appears with the maximum power and the right with the minimum.
  • 'right': The right part appears with the maximum power and the left with the minimum.
  • 'center': The central part appears with the maximum power and the sides with the minimum.
  • 'sides': The central part appears with the minimum power and the sides with the maximum.
  • 'random': Changes the mode randomly each time the fire is draw.

gravity Integer Default value:5

Value between 0 and 10 that determines the gravity of the planet.

Affects to the height of the fire and the shape of the flames.

fireTransparency Integer Default value:0

Value between 0 and 100.

Increase it allows that the level of transparency of the flames increase according to the vanishing. This parameter doesn't works with Internet Explorer 8.

A value of 0 leaves the background totally black.

globalTransparency Integer Default value:0

Value between 0 and 100.

The level of global transparency assign a level of transparency to all the fire effect.

flameWidth Integer Default value:2

Value between 0 and 4.

Modifies the widht of the flames

flameHeight Integer Default value:2

Value between 0 and 4

Modifies the height of the flames.

fadingFlameSpeed Integer Default value:2

Value between 0 and 20.

The fading speed of the flames produces that the flames will vanish before according to the increase of this value.

yOffset Integer Default value:0

Trim the fire from below at the specified height.

plasm Boolean Default value:false

When is true activated the plasm mode that makes the flames have an aspect more granulated than in the normal mode.

This mode consumes slightly less CPU.

cartoon Boolean Default value:false

Activated gives aspect of cartoon to the fire.

burnBorders Boolean Default value:true

If we establish the parameter burnBorders to false, will not appear fire in the borders right and left.

Exclusive parameters of the animation mode

mode:'anim'

speed Integer Default value:20

Minimum value 1.

Frames per second that you wish that has the animation.

Depending principally of the browser, the established size and the machine where is executed, the real value perhaps don't reach the desired one.

showFps Boolean Default value:false

Show, in the top right corner, the real number of frames per second that is showing.

mouseEffect Boolean Default value:true

If it's activated, appears a flame when move the mouse over.

mouseId String Default value:none

Here you can assign a mouse listener block different to the used for the fire effect, specifying the id. This is useful when you have a semi-transparent block over the effect and you want use the mouse effect. Example:


    Some text over the fire effect

Exclusive parameters of the mode image and background

mode:'image'

mode:'background'

steps Integer Default value:120

When the effect is initialized in the animation mode, the fire appears from below until it reaches its maximum height. This parameter indicates the number of steps that must pass before to take the image that will show in the browser.

Depending on the configuration of the rest of parameters can be necessary modify this value to get the desired image.

Where more higher be this value, more time will pass for show the result.

showLoad Boolean Default value:true

Shows the percentage of rendering of the image, while it's calculating.

Optionally can add a message at the left side of this percentage with the parameter loadMessage.

LoadMessage String Default value:''

Establish the message that will show at the left side of the rendering percentage while is calculating the image. The parameter showLoad must be true to show it.

Functions:

change

In the animation mode we can change any parameter of this mode, while it's visualizing with the function change. Example:

$('#fire').fire('change',{plasm:true});

play

In the animation mode, makes that it continues if previously have been stopped with the function stop. Example:

$('#fire').fire('play');

stop

In the animation mode, makes that it stops if it's moving.

$('#fire').fire('stop');

playStop

In the animation mode, makes that it stops if it's moving or that continues if it's stopped. Example:

$('#fire').fire('playStop');

getDataURI

In any mode, returns the image that is showing now encoded with the schema data:uri

$('#fire').fire('getDataURI');