Web Page Animation

14. Any Angle

Objects are not limited in what direction that they can move. Instead of moving at an exact 45 degree angle we can just specify a destination on the screen and have the object move in a straight line on any angle at all.

Because we are no longer going to be moving in just one direction or the same distance in both directions each time our object moves, we need to work out the comparative rate at which the object needs to move in both the horizontal and vertical directions. To do the necessary calculations let's add some new functions to our script.

Defining these functions will make our coding much clearer since the appropriate step sizes need to be modified by multiplying them by the direction and rate in order to have the object move toward the appropriate destination.

Instead of testing the end position to determine whether we have reached our final destination we'll check the distance remaining to be moved instead which will make it easier to tell when we need to swap directions. This means that we don't need to globally define variables to hold the end position.

Next let's change the start function to specify an end position in the exact centre of the screen (both horizontally and vertically) and use our new functions to modify the distance to be moved in each direction for each call to the mover function. You can of course make the destination any point on the screen just by substituting the calculations for the eX and eY variables when they are first defined.

Finally, we need to change the mover function to apply the appropriate movements and to reverse the direction once the object has moved the appropriate distance.

Note that we now have both stepx and stepy being added to the position since the fields themselves will be negative whenever they need to be. Also instead of swapping the start and end locations we just reverse the step sizes and reset the distance to be moved back to its original value. This also does away with the need for the mover function to test which way that the object needs to move which removes one of our if statements.