Tutorials
- ASP.NET
- C#
- C++
- Java
- JavaScript
- MySQL
- PHP
- Ruby
- SQL
- VB.NET
Code
How To
News
Forums
Pictures
Videos
Icons
Newsgroups

Building a C# Chat Client and Server

A step by step tutorial teaching you how to create your own chat client and chat server easily in C#, for local networks or the Internet.

in C# Programming Tutorials

Getting Hard Drive Information

A C# tutorial showing you how to make use of WMI to extract information on disk drives, such as model, capacity, sectors and serial number.

in C# Programming Tutorials

UPS Shipping Calculator

This tutorial will teach you how to calculate the shipping cost based on the weight, height, length and depth of the box, the distance and the UPS service type.

in PHP Programming Tutorials

Create Your Own Rich Text Editor

Creating a Rich Text Editor using JavaScript is easier to do than you might think, thanks to the support of modern browsers; this tutorial will walk you through it.

in JavaScript Programming Tutorials

Tutorials

Programming Tutorials

ActionScript (5)
ASP (7)
ASP.NET (28)
Assembly (1)
C (6)
C# (132)
C++ (33)
CSS (6)
General (4)
HTML (6)
Java (28)
JavaScript (38)
MySQL (2)
Objective C (1)
Pascal (1)
PHP (61)
Python (3)
Ruby (18)
Silverlight (1)
SQL (8)
VB.NET (5)
Visual Basic (3)

IT Jobs

From CareerBuilder

Geekpedia » JavaScript Tutorials » Animated Color Matrix

Animated Color Matrix

This tutorial, especially recommended to beginners, will give you a better understanding of the JavaScript language: how to use loops, arrays and functions to create a fun animation.

On Saturday, February 10th 2007 at 07:48 PM

By Sorin Sodolescu (View Profile)

(Rated 4.9 with 7 votes)

Contextual Ads

More JavaScript Resources

See this code in action

This JavaScript will make the background color of a few DIV objects change by creating animation patterns. Let's start by creating the HTML that will later be manipulated by the JavaScript function.
First, we create a master DIV:

This will contain 9 other divs that we will use for the animation:

And then we close the master div:

</div>

We have to set the event that will trigger the function that we're about to declare; to make the function start when de page loads we'll specify it in the body tag.

I've used CSS to set the div's background-color property in such a way that it creates a pattern; the lower row's divs are offset by 1 div. We are now ready to write the JavaScript function.Because we want to use the function to change the div's background color into a certain color, we will have to use the If/Else If/Else statement. I will associate a variable "a" with the matrix's state (for the default state, "a" will be 0). The animation will play over and over, because the function contains a loop, so we have to declare the "a" variable outside of the function, otherwise every time the function will be called, "a" will be assigned to 0.

Now, we have to declare and initiate some arrays with all the possible color combinations a row can have.

colors= new Array()
colors[0]="green"
colors[1]="red"
colors[2]="blue"
colors2= new Array()
colors2[0]="blue"
colors2[1]="green"
colors2[2]="red"
colors3= new Array()
colors3[0]="red"
colors3[1]="blue"
colors3[2]="green"

We also have to declare 3 more variables (the number of the first div on each row), variables that we will use to identify the divs when changing colors.

var b=1
var c=4
var d=7

When changing colors we have to know what's the current patern, this is when we use the a variable. We know what pattern the matrix has when the page loads so we can now write how the colors will change.
We'll write a For loop that will move the colors on each row one div to the right using the variables and arrays we have declared earlier:

To change the color of all of the divs, we have to increment the b, c and d variables, so all of the IDs will have declared properties.

      b++
      c++
      d++
   }

Now, to avoid entering in this loop again, we increment the "a" variable by 1. Next we use the setTimeout() method to make the function loop every 0.5 seconds so we can set the other patterns.

a++
setTimeout(animate, 500)
}

At this point "a" equals 1, so we will write the code for the next pattern in the Else If statement. This part is just like the previous one, except now we will assign the arrays offset by one.

else if (a==1)
{
   for (i=0;i<3;i++)
   {
      document.getElementById(b).style.backgroundColor=colors2[i]
      document.getElementById(c).style.backgroundColor=colors3[i]
      document.getElementById(d).style.backgroundColor=colors[i]
      b++
      c++
      d++
   }
   a++
   setTimeout(animate,500)
}

We have to do this one more time in order to get the desired pattern. This time a=2, but since this is the last statement we can just an Else statement. This time we'll assign a the 0 value, so the function will start over.

else
{
   for (i=0;i<3;i++)
   {
      document.getElementById(b).style.backgroundColor=colors3[i]
      document.getElementById(c).style.backgroundColor=colors[i]
      document.getElementById(d).style.backgroundColor=colors2[i]
      b++
      c++
      d++
   }
   a=0
   setTimeout(animate,500)
}
}
</script>

The script is now complete. If you want to see how this works, just copy the code below:

<html>
<head>
<title>JavaScript Animaton</title>
<script type="text/javascript">
var a=0
function animate()
{
   var b=1
   var c=4
   var d=7
   colors= new Array()
   colors[0]="green"
   colors[1]="red"
   colors[2]="blue"
   colors2= new Array()
   colors2[0]="blue"
   colors2[1]="green"
   colors2[2]="red"
   colors3= new Array()
   colors3[0]="red"
   colors3[1]="blue"
   colors3[2]="green"

   if (a==0)
   {
      for (i=0;i<3;i++)
      {
         document.getElementById(b).style.backgroundColor=colors[i]
         document.getElementById(c).style.backgroundColor=colors2[i]
         document.getElementById(d).style.backgroundColor=colors3[i]
         b++
         c++
         d++
      }
      a++
      setTimeout(animate,500)
   }
   else if (a==1)
   {
      for (i=0;i<3;i++)
      {
         document.getElementById(b).style.backgroundColor=colors2[i]
         document.getElementById(c).style.backgroundColor=colors3[i]
         document.getElementById(d).style.backgroundColor=colors[i]
         b++
         c++
         d++
      }
      a++
      setTimeout(animate,500)
   }
   else
   {
      for (i=0;i<3;i++)
      {
         document.getElementById(b).style.backgroundColor=colors3[i]
         document.getElementById(c).style.backgroundColor=colors[i]
         document.getElementById(d).style.backgroundColor=colors2[i]
         b++
         c++
         d++
      }
      a=0
      setTimeout(animate,500)
   }
}
</script>
</head>