Sprite Sheet Animation

Fireball Animation: Source Code

Fireball Animation Initialize Fireball Variables Prepare to Draw One Frame Draw One Frame Reset Fireball Variables Play the Animation Stop the Animation

Initialize Fireball Variables

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

// 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_DIAM = 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; 
 
function loadFireball(){

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

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

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

Draw One Frame

function drawFireball(){

ctx.beginPath();
 
// Use fractions of 1 to place additional color stops.
// within the radius of the gradient.
// For example 1 displays at the edge of the circle,
// 0 displays at the origin of the circle,
// 0.50 displays in between 
// the origin and the edge of the circle.
gradCircle = ctx.createRadialGradient(
 nXY,
 nXY,
 0,
 nXY,
 nXY,
 nRadius
);   

var nOffset = Number(0.0);

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_DIAM + nRadius;

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

}

Reset the Fireball Animation

/**
Reset all variables
needed for animation.
**/
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";
}

Prepare to Draw One Frame

/**
Prepare variables
to display
just one frame.
**/
function playOnce(){

nXY += 10;

nRadius += 2;

nFrameCount += 1;
drawFireball();

if(nXY > 250){

 reset();
 
}
}

Play the Fireball Animation

/**
 Display all
 frames 
 until the user
 selects the 'Stop'
 button.
**/
function playAnim(){

reset();

stopAnim();

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


Stop the Fireball Animation

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

if (timer != null){

 clearInterval(
  timer
 );
 
 timer = null;
 
 } 
}

Radial Gradient Examples

Animated Effects
Copyright © 2015 Seven Thunder Software. All Rights Reserved.