Animated Color Matrix (JavaScript Programming Tutorial) • Geekpedia

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.

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>

Animated Color Matrix

Animated Color Matrix

Nathan

Leave a Reply Cancel reply

Animated Color Matrix

Nathan

Leave a Reply Cancel reply

Related Posts