MOVING FIGURE ANIMATION
In this section we will explore the basic concepts of animation on the computer. We shall see how to make things walk, run, and fly from BASIC. You should understand that animation on the computer is so new and so revolutionary that very few of the new home computers are capable of it. And to be sure even the Apple is not totally set up for animation from BASIC, but it's darn close. The main requirements of a computer for animation are dense display format and a high-speed BASIC. If BASIC is slow then there will be objectionable flicker, and if the screen display is not dense enough the movement will not be fluid.
First, What Is an Animation?
An animation is a series of pictures, each slightly different than the one before it, presented to the viewer at a rate fast enough to give the impression of smooth real movement. We have seen how to make a simple object move across the screen, such as the bird, by constant plotting and replotting of the object. This is very trivial animation. True animation can be illustrated by simulating a moving figure such as a running bird, walking man, and so on. With moving figure animation we must be able to present a series of pictures of the object with the elements of the object (like the limbs) slightly displaced from their previous positions. If we want total realism we should show all bends, tilts, and other subtle changes that occur as the figure moves.
There are several ways to approach this problem from the viewpoint of programming. The best approach would be to use assembly language because it is so fast, but this would be beyond the scope of this book, and only a small number of professional programmers would understand it. The next best approach, and the one used here, is to do the animation from BASIC.
Walking Animation
Consider for a moment how we walk. Our upper legs (thighs) are hinged to our hips so they swing freely. Our lower legs (calves) are hinged to our thighs at the knee, and they too swing in an arc. Finally our feet are attached to our calves so that they too swing in a small arc. In general, all legs and arms have this feature of rotation. Does this suggest a technique that might be used on the Apple to create an animation of walking?
Example 26:
Write a program that animates a walking bird (knees bend backward compared to people's) on the Apple. Use a shape table with a single vector in it to represent one of the sections a leg. Have rotation values stored in DATA statements that set the position of the legs for each frame of the animation. Have the legs divided into an upper leg hinged at the hip, a lower leg hinged at the knee, and a foot hinged at the bottom of the lower leg. Since a bird has two legs, there will be six parts, with six rotations per frame or per DATA statement.
Solution:
Obtain an Animation Source
Begin by obtaining a source of animation frames for use in the program such as the one shown in Fig. 3-37 of the bird.* If you can't find such a source, you can make cardboard figures with hinged limbs to imitate the movements.
Convert the Source to Animation Schematic
Fig. 3-38 is a way to represent the several steps of the animation in two diagrams, each showing all the positions of a leg for the entire animation. As you can see the A leg follows a simple shifting motion while the B leg has much more extended movements.
Convert the Schematic to Rotations
Next we convert the angled positions of the legs to numbers inside of DATA statements. The first three numbers are the A leg rotations, the next three the B leg.
Write a Program to Use This Data (see p. 168)
As you can see the program is very simple, considering what it accomplishes. It begins by setting HIMEM: to 8046. Next variables INC and MAX are initialized. INC is the number added to the bird's X position each time it moves a leg. The larger INC the faster the bird moves. MAX is the number of DATA statements in the program. SI is set to 20 and represents the initial scale for the upper and lower legs, while S2 is set to 5 to represent the smaller scale of the foot (remember, we are using the same vector for the legs and feet).
0 HIMEM : 8046
1 INC = 2
2 MAX = 9
10 HGR : HCOLOR = 3 : X = 140 : Y = 70
11 S1 = 20 : S2 = 5
12 GOTO 1000
50 HPLOT X, Y : SCALE = S1 : ROT = R1 : DRAW 1 : ROT = R2 : DRAW 1 : ROT = R3 : SCALE = S2 : DRAW 1
55 HPLOT X, Y : SCALE = S1 : ROT = R4 : DRAW 1 : ROT = R5 : DRAW 1 : ROT = R6 : SCALE = S2 : DRAW 1 : RETURN
100 FOR I = 1 TO MAX
120 READ R1, R2, R3, R4, R5, R6
130 HCOLOR = 3 : GOSUB 50
135 FOR D = 1 TO PDL (0) : NEXT D
145 HCOLOR = 0 : GOSUB 50
146 X = X + INC
150 NEXT I
155 RESTORE
160 IF X > 220 THEN X = 20 : S1 = RND (1) * 50 + 10 : S2 = S1 / 4 : INC = S1 / 8
165 GOTO 100
200 REM
201 REM
300 REM START OF LEG MOVEMENTS
311 DATA 32, 26, 16, 38, 30, 16
312 DATA 33, 26, 16, 42, 32, 18
313 DATA 33, 26, 16, 44, 33, 20
314 DATA 34, 27, 16, 45, 24, 18
315 DATA 34, 27, 16, 43, 22, 12
316 DATA 35, 28, 16, 38, 18, 13
317 DATA 35, 28, 16, 32, 15, 8
318 DATA 36, 29, 16, 30, 16, 12
319 DATA 36, 29, 16, 32, 20, 12
998 REM
999 REM A ONE VECTOR SHAPE
1000 POKE 232, 110 : POKE 233, 31
1010 POKE 8046, 1 : POKE 8047, 0 : POKE 8048, 4 : POKE 8049, 0 : POKE 8050, 4 : POKE 8051, 0
1030 GOTO 100
The program jumps to line 1000, where the vector shape table is POKED into memory along with the starting address of the shape since we are not using SHLOAD.
Next we are sent to line 100, where the main work of the program begins with a FOR…NEXT loop. The loop causes six variables to be READ from the first DATA statement. Then the HCOLOR is made white and the GOSUB 50 is executed. This subroutine takes the six variables and uses each one as a rotation before drawing one of the legs. The subroutine starts with an HPLOT statement which determines where the upper leg will be drawn from (and hence the hips of the bird). Each part of the leg is drawn immediately after the one before it. Only scale and rotation are changed. The DRAW statement without an AT X, Y accomplishes this.
After leg A is drawn we draw leg B and leave the subroutine. The color is changed to black and the GOUSB 50 is used again, but this time to erase the legs. Then X is incremented and the loop repeats for the next DATA statement.
When all DATA statements have been executed and the loop is over, statement 160 checks the X position and if it is greater than 220 the bird is far enough right to overflow the HPLOT statement when a DRAW is executed. So we reset X to zero. To make the demonstration interesting we also use the RND statement to generate a random scale S1 so the legs will change size. S2 is made one quarter of S1 for the foot. INC, which controls speed, is made one-eighth the size of S1 so larger shapes move faster. Finally, the program jumps back to line 100 to repeat the drawing part with a new scale. Line 135 is used to put a delay in the redrawing proportional to the paddle setting so that we can manually slow down and speed up the animation.
Adding a Body Shape
At this point the animation will be a bodyless set of legs. To add a body we can define another shape in the shape table and do a DRAW 3 before drawing the legs. See Example 27.
Example 27:
Add a simple body to the bird legs using a third shape in the shape table. Store the shape vectors in DATA statements. Keep the number of vectors for the body under 50 to reduce the flicker effect.
Solution:
Draw the Body on 0.1-inch (0.25-cm) Grid Paper
As shown in Fig. 3–39 draw the bird's body as a series of up, down, right, or left vectors. Divide the vectors into logical subsections.
Convert the Body to Data Statements
Use the key for shapes (shown in Fig. 3–39) to convert the vectors to a series of numbers 0, 1, 2, or 3. These represent the vector's directions.
Modify the Program to Draw a Body
0 HIMEM : 8046
1 INC = 2
2 MAX = 9
10 HGR : X = 140 : Y = 85
11 S0 = 1 : S1 = 20 : S2 = 5 : R0 = 0
12 HCOLOR = 3
13 POKE - 16302, 0
14 GOTO 2000
50 SCALE = S1 : ROT = R1 : DRAW 1 AT X, Y : ROT = R2 : DRAW 1 : ROT = R3 : SCALE = S2 : DRAW 1 : SCALE = S1 : ROT = R4 DRAW 1 AT X, Y : ROT = R5 : DRAW 1 : ROT = R6 : SCALE = S2 : DRAW 1
60 SCALE = S0 : ROT = R0 : DRAW 2 AT X, Y : RETURN
100 RESTORE
105 FOR I = 1 TO MAX
120 READ R1, R2, R3, R4, R5, R6
130 HCOLOR = 3 : GOSUB 50
135 FOR D = 1 TO PDL (0) : NEXT D
146 X = X + INC
150 NEXT I
155 RESTORE
160 IF X < 220 THEN 100
165 S1 = RND (1) * 40 + 10 : S2 = S1 / 4 : INC = S1 / 8
166 INC = 30
170 S0 = S1 / 12 : IF S0 < 1 THEN S0 = 1
175 X = 20
176 HCOLOR = 0 : HPLOT 0, 0 : CALL 6 2454
180 GOTO 100
200 REM
201 REM
300 REM START OF LEG MOVEMENTS
311 DATA 32, 26, 16, 38, 30, 16
312 DATA 33, 26, 16, 42, 32, 18
313 DATA 33, 26, 16, 44, 33, 20
314 DATA 34, 27, 16, 45, 24, 18
315 DATA 34, 27, 16, 43, 22, 12
316 DATA 35, 28, 16, 38, 18, 13
317 DATA 35, 28, 16, 32, 15, 8
318 DATA 36, 29, 16, 30, 16, 12
319 DATA 36, 29, 16, 32, 20, 12
998 REM
999 REM A ONE VECTOR SHAPE
1000 POKE 232, 110 : POKE 233, 31
1010 POKE 8046, 1 : POKE 8047, 0 : POKE 8048, 4 : POKE 8049, 0 : POKE 80 50, 4 : POKE 8051, 0
1030 GOTO 100
2000 REM LEG VECTOR AND BODY
2001 REM VECTOR STORED HERE
2005 POKE 232, 110 : POKE 233, 31
2010 POKE 8046, 2 : POKE 8047, 0 : POKE 8048, 6 : POKE 8049, 0 : POKE 8051, 0 : POKE 8052, 4 : POKE 8053
2015 FOR DUM = 1 TO 54 : READ I : NEXT DUM
2020 FOR LOC = 8054 TO 8191
2025 READ ASEC, BSEC
2026 IF ASEC = 9 OR BSEC = 9 THEN 2060
2030 BYTE = (BSEC * 8) + ASEC + 36
2035 POKE LOC, BYTE
2045 NEXT LOC
2060 POKE LOC, 0 : POKE LOC + 1, 0 : GOTO 100
2100 REM
2101 DATA 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1
2102 DATA 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1
2103 DATA 0, 3, 3, 3, 3, 0, 3, 3, 0, 3, 3, 3, 3, 2, 3, 2, 3, 2, 2, 2, 2
2104 DATA 3, 2, 2, 3, 2, 2, 3, 2, 3, 3, 2, 3, 3, 3, 3, 2, 3, 3, 3
2105 DATA 2, 3, 3, 3, 2, 3, 3, 2, 3, 2, 3, 2, 3, 3, 2, 2, 1, 1, 2, 2, 1, 1, 2, 1, 1, 1, 1
2106 DATA 9, 9
The final program is simply an extension of the previous one. To use the full screen we do a POKE –16302, 0 at line 13 and then immediately go to line 2000, where the tables of the shape are POKEd in. As before, the leg vector is stored. The table header is different now because there are two shapes instead of one. Statement 2015 is a dummy loop that causes the DATA pointer to move past the leg movement vectors so it points at the beginning of the DATA statements in line 2101–2106. In line 2020 a loop is begun which reads the body data, converts it to numbers, and stores it in the shape table. The formula in line 2030 converts the numbers in the data statements to values for the shape table. Line 2026 checks for an end of table condition. When done we poke zero at the end of the table, and jump to line 100 to enter the animation routine. This part of the program works as before except we add a new statement to the drawing subroutine at line 60 to draw the body shape.
The size of the body is S0, which is made to be one-twelfth the size of S1. Fig. 3-40 shows a typical walk of the bird across the screen.
Further Animations
We don't need to limit animation to walking or running. The same techniques used here could be used to animate a bird flying with flapping wings, a body dangling from a rope in a game of hangman, a frog jumping or catching a fly with its tongue, a tree bending in the wind, and so on, limited only by your imagination and the number of vectors in the shape.
Return to Table of Contents | Previous Section | Next Section
