Web Page Animation

16. Specific Path

Rather than having the object move to random destinations we could instead set up an array containing a number of destinations on the screen and have the object follow a path from one position to the next.

For the purpose of this example let's have our object srart in the top right corner of the screen and move to the centre, to the top left corner, back to the centre, then to the bottom left corner, back to the cenre again, to the bottom right corner, back to the centre yet again and then back to where it started in the top left corner to start over again. To handle this we add two arrays to handle the X and Y coordinates to the top of the script along with a variable to hold the array counter.

Next we amend our nextEnd function to use the next entry from the array as the next destination:

The final change is to amend the top of the start function to load the required entries into the array. We can't load the array before the page finishes loading because we need to check the screen size and object size to determine what the destinations should be.

You can of course have as many entries in the array as you want and set each to whatever coordinates that you want. Since the path I have set for this example uses the same values for several different positions in the array I have taken the shortcut of assigning all of the identical fields at the same time.