Animated Sunburst Tutorial

Visual Effect with Radial Gradient Stops

Animated Sunburst Example Initialize Colors Composite Operation Tips Summary HTML Markup JavaScript CSS Source Code Page

Overview

This article explains how to make an animated sunburst. The sunburst effect is created with animated stop colors within a radial gradient.

This tutorial assumes readers know how to create radial gradients with color stops. For more information regarding radial gradients, see the introduction to radial gradients tutorial.

Initialize Colors

Create an Array of objects with fields for red, green, and blue color channels. The example projects calls the objects containing color channels radColor. Each radColor object maintains properties representing red, green, and blue color channels. An array is initialized and filled with radColor references.

Each color stop uses the prepared color channel values. The red, green, and blue values will be assigned to radial gradient stop colors during animation. The animation runs faster with color values prepared in advance.

The following listing demonstrates creating one radColor reference. See the source code for details which demonstrate how to Initialize and Create the Color Array.

function radColor(n){
 this.r = n * 8;
 this.g = n * 4;
 this.b = 0; 
}

Class radColor represents one set of color channels. The property representing the red channel is named r. The property representing the green channel is named g. The property representing the blue channel is named b. JavaScript fills the array named aColors, with references of radColor. Each radColor element in array aColors maintains a set of red, green, and blue color channel values.

Start the Animation

A timer to starts and stops the animation. The timer runs a set number of loops then stops itself automatically.

Tap the canvas or select the Start button to see the animation. Either selection activates function startSunburst(). Function startSunburst() creates a new timed interval, which calls the function playOneFrame(), every 100 milliseconds. First create one radial gradient named gradOneStop. The animation reuses variable gradOneStop. Second reset the canvas with a call to function resetSunburst(). Third create a timer to activate playOneFrame() every N_TIME milliseconds. When the Web page loads variable N_TIME receives the value 100. The following listing includes the entire startSunburst() function.

function startSunburst(){

if (gradOneStop == null){

gradOneStop = ctx.createRadialGradient(
 N_DIM_HALF,
 N_DIM_HALF,
 0,
 N_DIM_HALF,
 N_DIM_HALF,
 N_DIM_HALF
);    
}

resetSunburst();

if (timer == null){

 timer = setInterval(
  playOneFrame, 
  N_TIME
 );
}
} 

Display One Frame at a Time

Function playOneFrame() processes code to draw one frame.

Function playOneFrame() increments an index into the Array of colors named aColors. Function playOneFrame() maintains a loop counter as well. If the Array index equals the length of the color Array, then playOneFrame() increments the loop counter, resets the Array index to zero, and creates a new RadialGradient. If the loop counter equals the maximum number of loops, then playOneFrame() stops the timer.

Function playOneFrame() calls drawOneStop() for each index into the color array.

Draw a Frame

Function drawOneStop() uses array index nIdx to access one element from the color Array. Then drawOneStop() creates color stops from the r, g, and b values of the radColor reference. drawOneStop() uses the index into the array to create the first stop position as well.

The following listing demonstrates accessing a radColor from Array aColors with index nIdx. JavaScript then creates the first stop value with nIdx as well. The following listing includes the entire drawOneStop() function. After some tinkering the animation eventually created and displayed three color stops per frame. Perhaps a better name for drawOneStop() would have been drawThreeStops().

function drawOneStop(){
  
var p = aColors[nIdx];
 
//The stop position is based
// on the current index
// into the color array: 
var k = 1/(nIdx + 1);

try {   
p = aColors[nIdx]; 
 
gradOneStop.addColorStop(
 k,
 "rgb("+p.r+", "+p.g+", "+p.b+")"
); 
  
gradOneStop.addColorStop(
 0.8,
 "rgba(0,0,0,0.8)"
);

gradOneStop.addColorStop(
 1,
 "black"
);

ctx.fillStyle = gradOneStop;

// Filling the entire canvas:  
ctx.fillRect(
 0,
 0,
 N_DIM, 
 N_DIM
);
   
ctx.fill();

}

catch(err){
 eDebug.innerHTML = "error:"+err.toString();
}  
}

Number nIdx is the current index into the color Array. k becomes the first stop position. See the Animated Sunburst Source Code, for more details regarding running the sunburst animation.

Composite Operation

One key to the success of this short animation is the use of the lighter globalCompositeOperation value. Global composite operations compose one set of colors over the next set of colors.

Set the globalCompositeOperation property to lighter allowing lighter colors of the sunburst to display over each other. Each drawing operation adds color values from the prior drawing operation. Color channels overlay each other during the animation. The lighter setting adds values together from overlapping colors. Colors become brighter over the course of the animation.

The following line of code assigns lighter to the 2D context's globalCompositeOperation property.

ctx.globalCompositeOperation = "lighter";

Reset

When JavaScript resets the animation, temporarily assign source-over to the 2D context's globalCompositeOperation. Redraw the background with fully opaque black. See the Reset the Animation source code for details.

The following listing includes the entire resetSunburst() function. Notice resetSunburst() first assigns source-over to the global composite operation, fills the canvas with black, then assigns lighter, before exiting. The animation draws circular gradients. The lighter setting allows each gradient to appear brighter than the gradient drawn before. Variable N_DIM is a number representing the canvas width and height.

 
function resetSunburst(){
 
// Default composite operation
// Just draw over whatever's below: 
ctx.globalCompositeOperation = "source-over";

ctx.fillStyle = "#000000";

ctx.fillRect(
 0,
 0,
 N_DIM, 
 N_DIM
);
 
// Each frame displays the
// sum of the brightest color components: 
ctx.globalCompositeOperation = "lighter";
 
nLoopMax = new Number(0);

nIdx = 0; 
}

Tips

It took some experiments to select the right combination of globalAlpha, globalCompositeOperation, stop positions, red, green, and blue stop colors. For example, with globalCompositeOperation set to source-over and globalAlpha set to 0.5, some of the background showed through and the sunburst animation displayed. However the sunburst effect wasn't very bright. Sometimes it's helpful to modify a few settings. This goal with this animation was to create something relatively simple.

Summary

This article explained how to make an animated sunburst. The sunburst effect is created with animated stop colors within a radial gradient.

For more information regarding radial gradients, see the Introduction to Radial Gradients tutorial. For information regarding loading a background image, see the Display the Background section of the graphical Graphical Explosion Effect Tutorial. See this tutorial's Animated Sunburst Source Code Web page. Select a link below to see more visual effects.

Have fun and love learning!

More Visual Effects

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