informa
3 min read
article

HTML5 Canvas : Animating Gradients For Cheap Retro FX

Create color-cycling text inspired by retro Atari title screens on The HTML5 Canvas

I'm currently updating the manuscript for HTML5 Canvas for O'Reilly and I need to add a new example to the text chapter of the book. This week I decided to see if I could replicate an old-style Atari color-cycle in HTML5 using the Canvas API alone: no bitmaps or anything other helpers.  The results are below here: (click to see the exmaple)


colorcycle.PNG

(http://www.8bitrocket.com/html5canvas/colorcycle/ColorCycle.html)


(note, if you can't see this try it in Google Chrome.  If you are using the default browser on an Android device, switch to Chrome for Android.) At first I did not know how I was going to achieve this, but the answer came fairly quickly.    I decided to use the Canvas API  createLinearGradient() function.   createLinerGradient() works like this.  You set-up a gradient "line" the represents the direction of the color gradient.  Then you create "color stops" that represent the colors to the gradient.    I'll show this in the code  code later. To get started, I first, I set-up an animation loop:

function drawScreen() {
}
function gameLoop() {
   window.setTimeout(gameLoop, 20);
   drawScreen() 
}

Next, I created a simple array of objects that represented the colors of the gradient and the color stops.  Colors stops are percentage of the gradient. I started with red, then added yellow, blue, green, purple, and red again.  I had to add red twice so that the color flowed back the beginning.  Notice that the percentages for both reds are only 1/2 of the others (.125 as instead of  .25)

var colorStops = new Array(
 {color:"#FF0000", stopPercent:0},
 {color:"#FFFF00", stopPercent:.125},
 {color:"#00FF00", stopPercent:.375},
 {color:"#0000FF", stopPercent:.625},
 {color:"#FF00FF", stopPercent:.875},
 {color:"#FF0000", stopPercent:1});

Next, inside the drawScreen()  function I created the gradient. First, I set-up up a gradient on the current path.  The  arguments to the function represent the "line" that the gradient will follow.  Since I wanted the gradient to be in a straight vertical line, I centered it in the middle of the canvas, and drew it directly down to the bottom.

var gradient = context.createLinearGradient( 
               theCanvas.width/2,
               0,
               theCanvas.width/2, 
               theCanvas.height);

Next, I loop through the colorStops array calling gradient.addColorStop() for each color in the array.    A "gradient color stop"() has two arguments: the color and the percentage.  I already set these up in the array, so now they are just applied in a loop. After each gradient color stop() is added, I increment the percentage of each color by .015.  This effectively moves the color "up" .  If the gradient color stop percentage value goes above 1, I set it back to 0, which moves it back to the bottom of the gradient.

for (var i=0; i < colorStops.length; i++) {     
   var tempColorStop = colorStops[i];     
   var tempColor = tempColorStop.color;     
   var tempStopPercent = tempColorStop.stopPercent;     
   gradient.addColorStop(tempStopPercent,tempColor);    
   tempStopPercent += .015;     
   if (tempStopPercent > 1) {
       tempStopPercent = 0;
   }
   tempColorStop.stopPercent = tempStopPercent;;
   colorStops[i] = tempColorStop;
 }

In reality, the gradient is not being "animated", I'm just changing the location of each color by changing the gradient color Stop percentage.  However, the effect is the same.  It looks like the colors are cycling. Finally, I display the text using the gradient as the color for fillStyle.

  context.fillStyle = gradient;
  context.fillText ( message, xPosition ,yPosition);

That's it.  I'm sure all kinds of other, way more awesome, effects can be created with animated gradients, but this is just a start. You can get the code here.

Latest Jobs

Treyarch

Playa Vista, California
6.20.22
Audio Engineer

Digital Extremes

London, Ontario, Canada
6.20.22
Communications Director

High Moon Studios

Carlsbad, California
6.20.22
Senior Producer

Build a Rocket Boy Games

Edinburgh, Scotland
6.20.22
Lead UI Programmer
More Jobs   

CONNECT WITH US

Register for a
Subscribe to
Follow us

Game Developer Account

Game Developer Newsletter

@gamedevdotcom

Register for a

Game Developer Account

Gain full access to resources (events, white paper, webinars, reports, etc)
Single sign-on to all Informa products

Register
Subscribe to

Game Developer Newsletter

Get daily Game Developer top stories every morning straight into your inbox

Subscribe
Follow us

@gamedevdotcom

Follow us @gamedevdotcom to stay up-to-date with the latest news & insider information about events & more