LOGO Animation - Coding for Kids - Fun Way to Learn Programming

What is Animation

Animation is a technique to make static images move across the computer screen. Moving the graphics images is called animation. Animation is the basis for all video games.

As discussed on the Abouts page, animation is a Graphics Programming technique to make the images such as cars, rockets, people, etc. move on the screen

This page explores how to write LOGO Animation programs. Animation is fun for any programmer (kids or adults).

Going from Static Graphics Images to Moving Images

Let’s explore how we can move the graphics image that we create using turtle.

Note: Additional Animation programming examples are done using Tkinter Canvas, Pygame, and Turtle Animation pages of this website

LOGO Commands to Animate Images

To develop animation programs, we will use a few LOGO commands that we have not talked about yet. Let us first explain these commands before we get to writing programs to do animation.

PENERASE Command

Syntax: PENERASE

Description: PENERASE command (short form PE) sets the pen’s position to “down” and the pen’s mode to “erase”. In erase mode, the pen will erase the image that we just drew.

You might ask – what is the point of erasing the image we just drew? Well, when we do animation, we move the image from one position to a new location and successive new locations. If we did not erase the original image at the previous location, the computer screen will show the trace of the image going from the original location to the new location.

As the image (the object such as a car or rocket) continues to move across the screen, a trail of all images in the previous locations will be visible, if the images at previous locations are not erased. To show a smooth motion of the image, it is necessary to erase the image at all previous locations.

PENPAINT Command

Syntax: PENPAINT

Description: PENPAINT command (short form PPT) sets the pen’s position to “down” and the pen’s mode to “paint”. The PENPAINT command is sort of the opposite of the PENERASE command. In paint mode, the PENPAINT command restores the pen to normal use to draw the image.

To create animation programs, the PENPAINT command is used after the PENERASE command to enable the turtle to draw the image at its new location. Use the PENPAINT command to restore the pen to normal use.

WAIT Command

Syntax: WAIT delay

Description: WAIT command delays further execution of the next command for a time as specified in delay input. If delay is 600, the next instruction will be executed 600/60 = 10 seconds later. To ensure that the animation image does not move too fast for the eye to see, it is necessary to insert the WAIT command between the PENERASE command and the PENPAINT command.

Example

WAIT 60

When the Wait 60 command is executed, the next instruction waits for one second before execution. In this example, the successive images will be painted with a delay of one second between drawing each successive image as the image moves across the screen.

CLEAN Command

Syntax: CLEAN

Description: Erases all lines that the turtle has drawn on the graphics window. The turtle’s state (position, heading, pen mode, etc.) is not changed.

In the following sections, we will use the PENERASE, PENPAINT, CLEAN, and WAIT commands to do simple animation of images.

Animation Programs Using LOGO

Let us now use the above commands to develop a few animation programs.

Launch A Rocket

The following program draws a rocket image. It uses the PENERASE, WAIT, and PENPAINT commands to do a rocket launch.

PROGRAM EXAMPLE: LAUNCH A ROCKET

Program name: ROCKET_FLY.lgo

; Procedure to draw the body of the rocket. Step 2)
TO BODY
REPEAT 2[FORWARD 100 LEFT 90 FORWARD 40 LEFT 90]
LEFT 180
end
; Procedure to draw the nose cone of the rocket. 
TO NOSECONE                            ;Step 1)
RIGHT 30 
REPEAT 3[FORWARD 40 RIGHT 120]
RIGHT 150
end

; Procedure to draw the rocket image. Step 3)
; Call procedures “NOSECONE” and procedure “BODY”.
To ROCKET
NOSECONE
BODY
end
; Procedure to make the rocket fly.
TO FLY                          ;Step 4)
PENUP                           ;Step 5)
SETPOS[0 -250]                  ;Step 6)
PENDOWN                         ;Step 7)
HIDETURTLE                      ;Step 8)
REPEAT 200 [ROCKET WAIT 1 PENERASE ROCKET FORWARD 10 PENPAINT]; Step 9)
ROCKET                          ;Step 10)
end

Below is the animation produced by the ROCKET_FLY.lgo program:

LOGO ANIMATION: LAUNCH A ROCKET USING PENERASE< PENPAINT, ANT WAIT COMMANDS

Detailed Explanation of the Program:

The program defines three procedures.

Procedure NOSECONE

Step 1): The Procedure NOSECONE defines steps to draw the nose-cone of the rocket, which is simply a triangle of side length = 40.

Step 2): Procedure BODY defines the statements to draw the body of the rocket, which is simply a rectangle of height 100 and width 40.

Procedure ROCKET

Step 3): The Procedure ROCKET calls the procedure NOSECONE and the procedure BODY to draw the complete rocket.

Procedure FLY

Step 4): We define the procedure FLY

To fly the rocket, we define the procedure FLY. The FLY procedure has statements numbered 5) through 10).

Step 5): PENUP

Lift the pen up, so that the turtle does not draw on the screen.

Step 6): SETPOS[0 -250]

Move the turtle to a convenient position on the screen using the SETPOS command.

Step 7): PENDOWN

Set the turtle pen down to enable the turtle to draw.

Step 8) HIDETURTLE

Hides the turtle so that it does not show on the screen.

FLY the Rocket

Step 9) REPEAT 200 [ROCKET WAIT 1 PENERASE ROCKET FORWARD 10 PENPAINT]

Step 9) REPEATS the commands within the square brackets 200 times. Step 9) embeds the commands WAIT, PENERASE, and PENPAINT.

In Step 9), the instruction first calls the ROCKET procedure to paint the rocket image at the turtle’s current position.

Then, the WAIT 1 command delays the painting of each next image by 1/60^th of a second.

The WAIT command is followed by the PENERASE command. The PRNERASE command erases the rocket image that the program just drew.

The statement 9) calls Procedure ROCKET again; the rocket is moved 10 pixels from the original position, and the PENPAINT command enables the turtle to draw the rocket image at a location 10 pixels from the previous location.

Statement 9) repeats the above steps 200 times. That is, the program will paint the rocket image 200 times at locations that are 10 pixels away from the previous rocket location.

Since each image is painted after a delay of 1/60th of a second, our eyes perceive the rocket is flying.

Step 10) ROCKET

After completion of the REPEAT loop, this step calls the procedure “ROCKET” to display the rocket image in the middle of the screen.

Copy this program on your computer and run the program to see the rocket launch.

Bouncing Ball Animation

To further illustrate how to do animation using LOGO, let us write a program to make a ball bounce. The following is the program. Run it on your computer and see the ball bouncing up and down.

PROGRAM EXAMPLE: BOUNCING BALL ANIMATION

Program Name: BALLBOUNCE.lgo

TO BALL
; PROCEDURE TO DRAW A RED BALL.
HIDETURTLE ; HIDE TURTLE SO THE TURTLE DOES NOT SHOW ON SCREEN
SETPENCOLOR 4 ; MAKE THE BALL RED COLOR
SETPENSIZE 50 ; SET PEN SIZE LARGE SO AS TO FILL THE CIRCLE
CIRCLE 25 ; BALL RADIOUS IS 25
END

TO BALLBOUNCE
; PROCEDURE TO BOUNCE THE BALL.
; THE BALL WILL BOUNCE 10 TIMES UP AND 10 TIMES DOWN.
REPEAT 10 [
REPEAT 10 [BALL WAIT 10 PENERASE BALL FORWARD 10 PENPAINT] ;STEP 1)
RIGHT 180 ;REVERSE THE DIRECTION OF THE BALL TRAVEL.       ;STEP 2)
REPEAT 10 [BALL WAIT 10 PENERASE BALL FORWARD 10 PENPAINT] ;STEP 3)
BALL ; CALL PROCEDURE "BALL" TO DISPLAY THE FINAL POSITION OF THE BALL. STEP 4)
]

end

BALLBOUNCE; Call the BALLBOUNCE procedure. Step 5)

When we run the “BALLBOUNCE” program, the image below shows the animation.

LOGO ANIMATION BALL GOING UP AND DOWN

Detailed Explanation of the Program:

Procedure BALL:

This procedure draws a circle of radius 25 pixels with a red outline and thick pen width of 25 to fill the whole circle with red color.

Procedure BALLBOUNCE:

Step 1): REPEAT 10 [BALL WAIT 1 PENERASE BALL FORWARD 10 PENPAINT]

This statement is similar to the REPEAT statement in Launch a Rocket program. This statement calls the procedure “BALL” and paints the ball image going up in ten iterations. The turtle is facing up in this loop.

Step 2): RIGHT 180

Turn the turtle 180 degrees so that the turtle is pointing down.

Step 3): REPEAT 10 [BALL WAIT 1 PENERASE BALL FORWARD 10 PENPAINT]

This statement does the same as the statement in step 1), except since the turtle is facing down, the ball moves in the downward direction.

Repeat the Loop

Steps 1) through step 3) repeat in a loop 10 times with the ball changing its bounce direction after each loop.

Step 4:) Call procedure “BALL” to display the final position of the ball after all 10 REPEAT loops have been exhausted.

Step 5): This is the main program. It calls the “BALLBOUNCE” procedure to run the program.

Animation Using Two Versions of an Image

This section shows how you can do animation by creating two images that are slightly different from each other and making the LOGO program switch between the two images at a fast rate. The switching of two images at a fast rate will give the impression of animation.

In the program below, we make an image of a standing boy. Then, we make an image of the same boy in a jumping up position. The LOGO program steps are the following:

Display the first image.
Wait for a short time
Erase the first image.
Draw the second image in the place where the first image was.
Wait for a short time.
Erase the second image
Go back to step 1) and repeat steps 1) through 6). Keep on repeating steps 1) through 6) until the number specified in the REPEAT statement is exhausted.

Credits: The program below has been adapted from:

PROGRAM EXAMPLE: ANIMATION USING TWO VERSIONS OF AN IMAGE

Program Name: Animation_using_two_images.lgo

TO ArmPosition1
; DRAW ARMS FOR FIGURE IN POSITION-1
	setpensize 8 ;  Use wide pen size so that it fills up the shape.
	forward 5
	right 45 forward 50 back 50
	left 90 forward 50 back 50
	right 45
	back 5

end

TO ArmPosition2
; DRAW ARMS FOR FIGURE IN POSITION-2
	setpensize 8
	forward 5
	right 90 forward 50 back 50
	left 180 forward 50 back 50
	right 90
	back 5

end

TO BODY
; DRAW FIGURE'S BODY
	pendown
	setpensize 16
	forward 40 back 80 forward 40

end

TO FigurePosition1
; DRAW FIGURE IMAGE IN POSITION-1
	BODY ; Call Procedure 'BODY'.
	HEAD ; Call Procedure 'HEAD'.
	ArmPosition1 ; Call Procedure 'ArmPosition1".
	LegsPosition1 ; Call procedure 'LegsPosition1'.

end

TO FigurePosition2
; DRAW FIGURE IMAGE IN POSITION 2
	BODY ; Call Procedure 'BODY'.
	HEAD ; Call Procedure 'HEAD'.
	ArmPosition2 ; Call Procedure 'ArmPosition2".
	LegsPosition2 ; Call procedure 'LegsPosition2'.

end

TO HEAD
; DRAW FIGURE'S HEAD
	forward 25
	setpensize 16
	CIRCLE 16 ;  Draw the head in the shape of a circle of radius 16.
	back 25

end

TO LegsPosition1
; DRAW FIGURE'S LEGS IN POSITION 1.
	setpensize 8
	back 35
	right 135 forward 60 back 60
	right 90 forward 60 back 60
	left 225
	forward 35

end

TO LegsPosition2
; DRAW Figure'S LEGS IN POSITION-2.
;
	setpensize 8
	back 35
	right 150 forward 60 back 60
	right 60 forward 60 back 60
	left 210
	forward 35

end

TO MAIN
; THIS IS THE MAIN PROGRAM THAT DOES ANIMATION.
; IT CALLS PROCEDURES FigurePosition1 AND FigurePosition2.
	hideturtle 
	home 
	setpencolor 4 ; Draw the image in red color.
	setheading 0 ; Point turtle’s nose point in the up direction (North).
	REPEAT 10 [FigurePosition1 WAIT 30 CLEAN FigurePosition2 WAIT 30 CLEAN]
	FigurePosition2 ; At the end of the program show FigurePosition2.

end
MAIN; Call the main program.

Below is the animation output of the program “Animation_using_two_images.lgo”.

LOGO ANIMATION USING TWO SLIGHTLY DIFFERENT IMAGES

Click here to to go to the next section “LOGO INTERACTIVE”.