Fireball Animation: Source Code

Fireball Animation Introduction Load the Fireball Prepare to Draw One Frame Draw One Frame Reset Fireball Variables Play the Animation Stop the Animation Summary

Introduction

This page includes the source code, with comments, to animate a fireball with radial gradients, global composite operations, and global alpha. If you're unfamiliar with radial gradients, please see the introduction to radial gradients tutorial.

Shared Variables

The square fireball animation dimensions, applied to variable, N_DIM, equals 300. The default canvas is 300 pixels wide by 300 pixels high. However media queries, with style sheets, adjust the width of the animation for various screen sizes, in portrait or landscape orientation. In either case, the fireball animation renders square, stretched to fit responsive Web design for mobile and desktop devices.

Other variables include the time, N_TIME, representing milliseconds. Adjust N_TIME to modify animation speed. Number, I_RAD, maintains the minimum radius. Number, nXY, represents fireball coordinates, along both X and Y axes. Number, nXY, increases for each animation frame. Number, nFrameCount, tracks the current render frame, during animation. Array, aColors, includes color values applied to each radial gradient in the fireball animation.

// N_TIME is the number of
// milliseconds between 
// frames, during animation playback.
var N_TIME = new Number(
 100
);


// The dimensions of the canvas:
var I_DIM = new Number(
 300
);
 
var I_RAD = new Number(
 64
);
 
// Both X and
// Y coordinates.
var nXY = Number(
 0
);

// Variable as
// radius increases.
var nRadius = Number(
 8
);

var nFrameCount = Number(
 0
);

// Gradation
// colors.
var aColors = [
 "yellow",
 "orange",
 "red",
 "#500000",
 "black"
];
  
var timer = null;

// The canvas 2d context:
var ctx = null;

// Radial gradient:
var gradCircle = null;

// HTML element for debugging output:
var eDebug = null; 

Load the Fireball

The Web page's onload event activates function loadFireball(), after the page loads. Function loadFireball() retrieves elements from the HTML markup, including the canvas named, canvas, a CanvasRenderingContext2D named, ctx, and an HTML element for debugging named, eDebug. Last loadFireball() calls playAnim(), to render the animation. Function loadFireball() folows.

function loadFireball(){

 var canvas = document.getElementById(
  'cv'
 );

 ctx = canvas.getContext(
  '2d'
 );

 eDebug = document.getElementById(
  "eDebug"
 );
 
 playAnim();

}

Prepare the Fireball Animation

Prepare to display all frames until the user selects the Stop button. Function playAnim() resets variables, stops any existing animation, then starts the timer. Function reset() assigns starting values to shared variables. Function playAnim() follows.

function playAnim(){

 reset();

 stopAnim();

 // Every
 // N_TIME
 // milliseconds,
 // call playOnce().
 timer = setInterval(
  playOnce, 
  N_TIME
 );
 
}

Prepare to Draw One Frame

The timer activates function playOnce(). Function playOnce() prepares variables to display just one frame. Update the fireball's X and Y coordinate, nXY. Increment the frame counter, then call function drawFireball().

function playOnce(){

 nXY += 10;

 nRadius += 2;

 nFrameCount += 1;

 drawFireball();

 if(nXY > 250){

  reset();
 
 }
}

Draw One Frame

Function drawFireball() prepares and renders a radial gradient based on coordinate, nXY, variable radius, nRadius, and constant radius I_RAD. Notice drawFireball() simply accesses prepared colors from array, aColors. Function drawFireball() follows.

function drawFireball(){

ctx.beginPath(); 

gradCircle = ctx.createRadialGradient(
 nXY,
 nXY,
 0,
 nXY,
 nXY,
 nRadius
);   

var nOffset = Number(0.0);

// Add color stops.
// Use fractions of 1 for
// color stops
// within the radius of the 
// gradient.
// For example 1 displays 
// at the perimeter,
// 0 displays at the origin 
// of the circle,
// 0.50 displays in between 
// the origin and perimeter.
for (var i = 0; i < 5; i++){

 gradCircle.addColorStop(
  nOffset,
  aColors[i]
 );

 nOffset += 0.20;
}
    
ctx.fillStyle = gradCircle;

// Fill a rectangle.
// Top left corner
// offset by the radius.
var nTopLeft = nXY-nRadius;

var nDiameter = I_RAD + nRadius;

ctx.fillRect(
 nTopLeft,
 nTopLeft, 
 nDiameter,
 nDiameter
);  
 
ctx.fill(); 

}

Reset the Fireball Animation

Function reset() prepares the canvas and variables for a new animation. Start the fireball in the upper left corner. Assign zero to number, nXY. Assign property, globalCompositeOperation, the value source-over, to draw a rectangle over the previous animation. Second assign property, globalCompositeOperation, the value lighter, to add color channels as animation frames render. Additive color channels cause the fireball to appear brighter as rendered gradients overlap. Function reset() follows.

function reset(){

 nFrameCount = Number(
  0
 );

 nXY = Number(
  0
 );

 nRadius = Number(
  8
 );

 ctx.globalAlpha = 0.5;

 ctx.globalCompositeOperation = "source-over";

 ctx.clearRect(
  0,
  0,
  I_DIM,
  I_DIM
 );

 ctx.globalCompositeOperation = "lighter";

}

Stop the Fireball Animation

Function stopAnim() assigns null to the timer, when terminating animation. Value null serves as a flag. If the timer's not null then don't start another timer, until the current timer's stopped.

/**
 Stop the
 animation.
**/
function stopAnim(){

if (timer != null){

 clearInterval(
  timer
 );
 
 timer = null;
 
 } 
}

Summary

This page included the source code to animate a fireball with radial gradients, global composite operations, and global alpha.

See more amazing radial gradients. Love learning!

Radial Gradient Examples

Copyright © 2015 Seven Thunder Software. All Rights Reserved.