06.
02 Basic Animation
Although there are different techniques available for animation, in this course we will use a
method that builds on what has been covered. Pre-computer animation techniques involved
showing a series of pictures in rapid succession. We use this approach for simple animation in
Python.
In concept, we will draw and display a picture, show it briefly, destroy that picture then and
replace it with a new picture that is slightly different. A sequence of these pictures will give the
effect of animation.
Timer
We already know how to draw simple graphics. We just need to know how to control the timing
of these displays. We import a library (what else? ) for a time function, called simply time.
Then we code time.sleep(<seconds>) where we want the program to “sleep” or pause.
<seconds> indicates how long the program execution will pause – this time can also be written
with decimals, eg 0.2 for 2 tenths of a second.
Putting it all together
Animation is an ideal application for looping. During each loop, an image is drawn. At the end of
the loop, the program is paused. This allows the user to see the picture. Without this pause, the
image will appear and disappear so fast the user cannot see the pictures (loops execute in
fractions of a second).
After the pause is done, and the loop resumes execution, the image is destroyed, and a new
loop begins drawing a new picture. However, there will be small changes to the picture. As the
loop continues to execute, the collective effect to the user, is an animation.
Before coding, a designer needs to decide how each picture is coded, and how a loop can be
used to generate the next picture in sequence. An example of this will be given later.
The basic template for an animation program can be found in the file
06.02_basic_animation_template.py
An explanation of the statements follows:
line 1: import tkinter
line 2: import time
line 3: DELAY_SECONDS = .3
line 4: window = tkinter.Tk()
line 5: window.geometry("500x500")
line 6: window.title("Basic Animation")
line 7: for i in range(10):
line 8: canvas = tkinter.Canvas(window, ...)
line 9:
line 10: canvas.pack()
line 11: canvas.update()
line 12: time.sleep(DELAY_SECONDS)
line 13: canvas.destroy()
line 14: window.mainloop
line 1, 2: Libraries needed, in particular the new time library
line 3: Sets how long an image will appear to the user; optional to make it a constant as done
here. The units are seconds.
line 4 – 6: Basic window creation
line 7: Add a loop to control how many images/pictures will be shown. Can be a “while” loop.
This template just has the animation run for approximately 3 seconds. You can change this to
have the animation run as long as needed.
line 8: Create a Canvas on the window
line 9: All the graphic creation statements go here.
line 10: Arranges the widgets using the pack() manager
line 11: Not entirely sure why this is needed; just doesn’t seem to work without this
line 12: time.sleep() pauses the loop; during this pause, the image/picture is onscreen for the
user to view …..
line 13: then, the canvas is destroyed using destroy(), This is the end of the loop, and the loop
starts at the top, and creates a new canvas and a new image/picture.
For animation to work, this new picture will be slightly different than the one just destroyed.
The two pictures in succession create the illusion of movement.
line 14: The usual *.mainlop () to allow the user to close the window.
Moving Ball Example
See 06.02_moving_ball.py in the classroom.
CUSTOM_COLOUR= "#DDC51F"
Defines a custom colour. Note that it uses hexadecimal numbers.
upper_left_x = 0
upper_left_y = 100
lower_right_x = 50
lower_right_y = 150
The program uses *.create_oval() to create a circle. The function requires the position of the
upper left corner of the rectangle, and the bottom right position. These variables indicate the
coordinates for these corners, respectively. So the animation’s first oval starts in a rectangle
whose upper left corner is at (100, 0), and whose lower right corner is at (150, 50)
ball = canvas.create_oval(upper_left_x, upper_left_y,
lower_right_x, lower_right_y,
fill=CUSTOM_COLOUR)
In the block of the loop, the oval is created. Variables are used for the corner coordinates so we
can change them in future iterations of the loop.
upper_left_x = upper_left_x + 10
lower_right_x = lower_right_x + 10
When the image/picture is done and destroyed, the code sets up the location of the corners for
the next picture of an oval. Each of the x-coordinate variables is increased by 10 pixels, which
means the next picture of an oval is created 10 pixels shifted to the right.
06.02 Basic Animation
06.02.01
Write a program that makes a rectangle move upwards from the bottom middle
of the window.
When the rectangle reaches as high as it is coded to go, make it change colour.
06.02.02
Write a program that draws an oval whose long axis is horizontal. Write the code to
make the oval stand vertically, as if it rotated around a middle point. Then have the oval
lay horizontal again, then stand vertically.
06.02.3
Write a program draws a line, then draws another line that starts where the first one
ends. This second line’s endpoint will be a random location on the canvas. When the
second line appears, the first disappears. Then repeat 6 times more.
Advanced: Have the lines change colours too, using 3 colours that repeat.
06.02.4
Write a program that creates an animation that starts as a rectangle on side of the
window, then travels to the left. As it travels, it shrinks in dimension until it basically is a
dot half way across. Then as it continues, it grows again until it reaches the other side
back to its original size.
Hint: This requires a little bit of pre-planning and math.
06.02.5
Write a program that creates an animation where a triangle is drawn at a random
location on the canvas. Then after 2 seconds it disappears and a quadrangle appears in
another random position. Every 2 seconds another polygon appears until after 20
seconds, a final 10-sided polygon is generated.
Hint: Can use a list to manage the multiple points.
