Starting Position

Our layers are defined and can from now on be addressed easily. To start the animation, we must determine the various possible coordinates of these layers. This is the job of the lance() function:

34: function lance ()
35: {
36: cy = new Array();
37: pos = new Array(0,2,4,6,8,10,12,14,16,18);
38: dy = new Array(1,1,1,1,1,1,1,1,1,1);
39:
40: for (i=0;i<20;i++) {
41: if (type==1) {cy[i] = Math.round(100 * Math.cos ((i/20)*3.14159)) + y;}
42: if (type==2) {cy[i] = Math.round(100 * Math.tan ((i/20)*3.14159/2))+ y;}
43: if (type==3) {cy[i] = Math.round(100 * Math.sin ((i/20)*3.14159))+ y;}
44: }
45:
46: setTimeout ("deplace()",50);
47: }

To determine the coordinates for moving our layers, we are going to use three different arrays.

The first array, cy, will contain all the possible coordinates for the different layers, according to the chosen movement type. These coordinates are pre-calculated on lines 40-44 through more or less complex mathematical functions. This saves us having to use relatively long calculations once the animation has started, thus speeding up its execution.

The second array, pos, contains a factor to be applied to each layer. To create our waves effect, a layer has to be positioned with an offset of two points relative to the others (line 37). This factor is then combined with the array of coordinates cy to define the exact displaying coordinates for each letter.

The last array (dy) contains a variable 1 or -1 which corresponds to the layer's direction of movement.