Indexed Color Animation

Source Code

Indexed Color Animation Tutorial Coffee Pot Color Animation Introduction JavaScript Color Array function colorCycleRun() More Color Tutorials!

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 the timer.
*/
function colorCycleStart(){

 iCycle = 0;
 
 iCycleCount = 0;
 
 if (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
 ];  
     
}
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:
"+aCycle[iCycle]; // Increase index into // array of colors. iCycle++; }
Copyright © 2015 Seven Thunder Software. All Rights Reserved.