Indexed Color Animation

Source Code

Sunset Color Animation HTML5 Animation Indexed Color

Introduction

Source code for the color animated, eight bit indexed, coffee pot.

JavaScript

var timer = null;     
 
// Increase to
// loop more times.
// Three sunrise sunsets.
var iCycleMax = new Number(
 3
); 

// Counts to limit
// color cycles.
var iCycleCount = new Number(
 0
);

// Index into
// array of colors.
var iCycle = new Number(
 0
);                                                                                     

Color Array

// Colors:
var aCycle = new Array(
"#000022",
"#220022",
"#440044",
"#330033",
"#220022",
"#003333",
"#002222",
"#111111",
"#222200",
"#333300",
"#444400",
"#223300",
"#004400",
"#002233",
"#000044",
"#000000"
);

// HTML image element
// displays color
// in transparent areas.
var elemA = null; 

// Web page element
// displays color
// and hex values.
var eColorDisplay = null;

// Maximum color
// array length.
var iCycleArrayLength = aCycle.length;

/**
 Save references to
 the image and
 display elements.
*/
function loadProject(){

elemA = document.getElementById(
 'a'
);

// Start with darkest color
// at array's end.
elemA.style.backgroundColor = aCycle[
 iCycleArrayLength-1
];

// Rectangular element
// displays just color
// and color names.
eColorDisplay = document.getElementById(
 "color-display"
); 
   
}

Start and Stop the Timer

/**
* Start the timer.
*/
function colorCycleStart(){

 iCycle = 0;
 
 iCycleCount = 0;
 
 if (timer == null && elemA != null){
 
  timer = setInterval(
  
   function(){
  
   colorCycleRun();
   
  },
   
   64
  ); 
 }    
}

/**
* Stop the timer.
*/
function colorCycleStop(){
if (timer != null){

 clearInterval(
  timer
 );
   
 timer = null;   
}    

 // Set the background color 
 // to the last color.
 elemA.style.backgroundColor = aCycle[
  iCycleArrayLength-1
 ];  
     
}

Display Colors

function colorCycleRun(){

 if (iCycle >= iCycleArrayLength){
 
  if (iCycleCount >= iCycleMax){
  
   colorCycleStop();
   
   return;
   
  }
  
  else { 
  
   iCycleCount++; 
   
   iCycle = 0;
   
  }
 } 

// Color the PNG image
// file background.
elemA.style.backgroundColor = aCycle[
 iCycle
];   

// Color the div element.
eColorDisplay.style.backgroundColor = aCycle[
 iCycle
]; 

// Display the hexadecimal
// color.
eColorDisplay.innerHTML = "Color:<br />"+aCycle[iCycle];

// Increase index into
// array of colors.
iCycle++;
 
}