Discussion #7 - Animation


Animation is using the turtle, dressed in an appropriate costume, to tell a story by moving around the page. The process of creating an animation program may conveniently be divided into four steps:
 

  1. Decide on the story to be told. This may be elaborated or scaled back as you develop the program, but it is a good idea have in mind the general outline of your story before you begin to write the procedures. Remember the KISS principle (Keep It Simple, Stupid)
  2. Draw a background scene for the story. Use the turtle's regular drawing tools - fd, rt, lt, setx, sety, setpos, fill, shade, and stamp - as needed.
  3. Define the turtle's characteristics at the start of the animation.
  4. Write instructions to move the turtle through the animation, testing each step as you go.

    5.  
The best way to discuss these concepts is to work our way through a simple illustration. I shall describe an animation program that moves a car through a series of daredevil tricks: it will take off from a ramp, fly through the air, and land on top of a building! The background consists of the ramp and the building, which I drew on a page of the scrapbook named Daredevil by typing instructions in the command center. I could have used the mouse to move the turtle to her starting positions for these drawings instead of writing the setpos and setx instructions (since I do not need to save these instructions on the flip side of the Daredevil page), but I chose to draw the background with this procedure:
TO BACKGROUND
  pu
  setpos [-150 -110]
  pd
  seth 50
  fd 150
  sety -110
  pu
  setx 150
  pd
  seth 0
  repeat 2 [fd 150 rt 90 fd 75 rt 90]
  ht
END
From now on, It is important that I never use the command cg, as that will erase my background. It is also very important that I keep the turtle's pen up, so she will not inadvertently draw unwanted lines across the background.

As the next step in writing the program, I set the initial conditions for the turtle. These are called the turtle states. There are six of them:

1. The state of the turtle's pen. It is always up in an animation, since you do not want the turtle to leave a trail.

2. The state of the turtle's visibility. Is the turtle visible or hidden at the start of the animation? (I chose to start the animation with the car showing.)

3. The turtle's shape (I chose shape #27, the car.)

4. The turtle's color (I chose color #2, bright blue.)

5. The turtle's starting position on the page. I used the mouse to move the car to where I wanted it to start, and then I typed the instruction show pos This instruction displays the x-coordinate and the y-coordinate of the turtle's position, which I will use as input values for the setpos command.

6. The turtle's heading. What direction does she move? (I started the car moving straight across the page, a heading of 90 degrees.)

I wrote these six state instructions on one line in the command center:
 
pu st setsh 27 setc 2 setpos [-235 -103] seth 90.


Next, I copied this list of instructions on the flip side of the page as the first instruction line in the program. I dragged over the instruction line with the mouse to highlight it, pulled down the Edit menu at the top of the screen, and selected Copy. This will copy the highlighted instructions to the computer's clipboard. (The clipboard is a special memory section used for temporary storage.) Then I pressed <COMMAND/F> (hold down the Command key while you type the letter F) to flip the page and typed the Title line of the procedure: TO GO and pressed <RETURN>. (Of course, I could have named the animation anything I wanted to.)

Next, I pulled down the Edit menu again and selected Paste. The line I highlighted was copied from the clipboard to the program. I pressed  <COMMAND/F> again to return to the front side of the page and typed cc to clear the command center. Then I typed go to test the first instruction in my program.

I shall now develop the animation one line at a time by experimenting with instructions in the command center and observing the turtle's responses. Each line is a repeated series of short moves separated by waits, so I will be able to watch the car advance. To make the car move further, I use a greater number of repeats. To make the car move faster, I use longer steps or shorter waits. To make the car move slower, I use shorter steps or longer waits.

The first instruction moves the car from its starting position to the base of the ramp. My first trial looked like this:

repeat 10 [fd 5 wait 2]
This is the right idea, but I needed more repeats and probably should wait a little longer between jumps. So I used the up-arrow key to select the go command on the first line of the command center and pressed <RETURN>. This returned the car to its starting position.

Now I am ready to edit the second line and test it by pressing <RETURN>, perhaps like this:

repeat 20 [fd 5 wait 5]
The car went a little too far this time, and perhaps still a trifle too fast. So I selected go with the up-arrow key and pressed <RETURN> again to return the car to its starting position. Then I edited the second line again:
repeat 15 [fd 5 wait 8]
Perfect!

Now it's time to program the next phase, up the ramp. I started with a change of heading, and then experimented with values for fd and wait To simulate increased speed up the ramp, I could increase the distance travelled or decrease the wait time, or both. After a good deal of experimenting I decided on this instruction:

seth 50 repeat 25 [fd 6 wait 5]
Now would be a good time to add these two lines to the program on the flip side of the page. I highlighted the two instructions with the mouse (being careful not to include the go command), copied them to the clipboard, flipped the page, and pasted them under the first instruction line of the procedure. I then returned to the front side, erased the two lines from the command center, moved up to the go command, and pressed <RETURN>. This took me through the first two moves of my animation.

As the car leaves the ramp, I want it to soar in an arc through the air. I need to adjust the heading again, and then move the car through a series of very short distances and very small turns. I will shorten the wait time, since it will take a lot of repeat's to get the car where I want it. After a good deal of experimenting, I decided on this instruction:

seth 30 repeat 80 [fd 3 rt 2 wait 0.5]
followed by these instructions, which drop the car gently on the roof top and roll it to a precarious stop at the edge of the building:
repeat 18 [fd 2 rt 2 wait 1] seth 90 repeat 35 [fd 1 wait 3]
Again, it is time to copy these three lines to the flip side so they may be added to the developing go procedure. I used the same technique as for the previous instruction lines.

Well, that about does it except for adding some text to the screen and hiding the car when the program is finished, in preparation for repeat performances of my animation. The primitive command tab moves the text cursor five spaces to the right. I set the font to 24-point Geneva by selecting these values from the Font menu before running the program. I typed the following lines of text directly onto the flip side of the page, rather than copying them from the command center. After the first instruction line (that sets the initial conditions) and before starting the animation, I added the text lines:

wait 100 tab pr [Hold your breath!] wait 100 tab pr [HERE I GO ... ] wait 100 ct
After the last line of the animation, I added:
wait 50 repeat 2 [tab] pr [made it!!] wait 100 ct wait 50 ht
Summarizing these instruction lines, my animation procedure on the flip side of the page looks like this:
TO GO
  pu
  st
  setsh 27
  setc 2
  setpos [-235 -103]
  seth 90
  wait 100
  tab
  pr [Hold your breath]
  wait 100
  tab
  pr [HERE I GO ...]
  wait 100
  ct
  repeat 15 [fd 5 wait 8]
  seth 50
  repeat 25 [fd 6 wait 5]
  seth 30
  repeat 80 [fd 3 rt 2 wait 0.5]
  repeat 18 [fd 2 rt 2 wait 1]
  seth 90
  repeat 35 [fd 1 wait 3]
  wait 50
  repeat 2 [tab]
  pr [I made it!!]
  wait 100
  ct
  wait 50
  ht
END


It is sometimes better to use the command center instead of the scrapbook page to display messages that appear during the run of an animation, so as not to interfere with the animation itself. This may be done by substituting the primitive type for print. It is not possible to use tab or to change the font style or size of text that is displayed in the command center, but if you have messages that should be kept separate from the graphics page, using the command center is a convenient alternative.

In Unit #11, you will learn how to add sound to your animations. And another Big Animation Surprise is waiting for you in Unit #13!
 

Exploration #7

New Commands

tab Moves the text cursor five spaces to the right from its current position.

type number, word, or list Displays the input value in the command center without an automatic <RETURN> at the end.

show number, word, or list Similar to type, except that the input value is followed by an automatic <RETURN>. If the input is a list, the brackets are displayed.

New Reporter

pos Outputs a list containing the x-coordinate and the y-coordinate of the turtle's position.
 

1. Type the sample animation above on the flip side of a new page. Make adjustments as you see fit to the inputs in order to speed up, slow down, or change the course of the car's flight.

2. If the car had not stopped in time, it would have fallen off the building. Program this sad climax, taking advantage of the rotation option for the car shape found on the shapes page. (You will need to copy the rotated car to a new shape, and change shapes just before the fall.)

3. Design a new animation, perhaps using the helicopter shape and taking it on a wild ride.