In this lab you will explore some simple animations. Begin by downloading the starter files. You will begin with anim1.html and proceed in numerical order through anim3.html.
The First Animation: A Straight Line
The first animation file is set up with a simple animation right from the start: a box moves from left to right. Study the javascript code until you understand how it works. Where is the animation set up? What happens on each iteration? Where is the state of the object stored?
Your task for this section is to alter the direction of motion so that the box follows the thin line. What part of the program needs to change for this to happen? When you have achieved the cirrect direction of motion, next see if you can change the speed. Can you make it twice as fast? Twice as slow? (There are two ways to do this; try to achieve it without changing the frequency with which the animate function is called.)
The Second Animation: Square Dance
For the second animation, your job is once more to make a square move. However, this time it needs to follow a pattern -- also a square! Modify the code so that the black square follows the path indicated by the thin silver line. When it reaches a corner it should change directions to follow the next adjacent side. A counter t has already been set up for you to use. The box should continue to shuttle around the square forever.
The Third Animation: Squaring the Circle?
For the third animation, you should make the square follow the circular path indicated by the thin silver line. It should rotate as it goes around, so that one face of the square is always on the inside of the circle, and the opposite face is always on the outside. You should achieve this by adding appropriate transformations before the square is drawn. This one is a little trickier than the previous two: you might need several transformations together. (My solution uses two translations and a rotation, not necessarily in that order. But there are also other ways to do it.)