In this chapter, we will cover:
- Simple animation of a GIF beach ball
- The vector walking creature
- Bird with shoes walking in the karroo
- Making a partially transparent image with Gimp
- Diplomat walking at the palace
- Spider in the forest
- Moving band of images
- Continuous band of images
- Endless background a passing cloudscape
Vector graphics as seen in Chapter 2, Drawing Fundamental Shapes and Chapter 3, Handling Text can be shrunk and expanded to any size and in any direction using simple algebra. They can be animated with rotations using basic trigonometry. Raster graphics are limited. They cannot be resized or rotated dynamically while the code is executing. They are more cumbersome. However, we can get tremendous effects when we combine both vector and raster graphics together. The one thing that Python cannot do is to rotate a GIF image by itself. There are ways of mimicking rotation reasonably but there are limitations you will appreciate after trying out some of these recipes. PIL can rotate them, but not dynamically on a Tkinter canvas. We explore some possibilities and workarounds here.
Because we are not altering and manipulating the actual properties of the images we do not need the Python Imaging Library (PIL) in this chapter. We need to work exclusively with GIF format images because that is what Tkinter deals with.
We will also see how to use "The GIMP" as a tool to prepare images suitable for animation.
We want to animate a raster image, derived from a photograph.
To keep things simple and clear we are just going to move a photographic image (in GIF format) of a beach ball across a black background.
We need a suitable GIF image of an object that we want to animate. An example of one, named beachball.gif has been provided.
Copy a .gif file from somewhere and paste it into a directory where you want to keep your work-in-progress pictures.
Ensure that the path in our computer's file system leads to the image to be used. In the example below the instruction ball = PhotoImage(file = "constr/pics2/beachball.gif") says that the image to be used will be found in a directory (folder) called pics2, which is a sub-folder of another folder called constr.
Then execute the following code.
# photoimage_animation_1.py
#>>>>>>>>>>>>>>>>>>>>>>>>
from Tkinter import *
root = Tk()
root.title("Animating a Photo Beachball")
cycle_period = 100
cw = 320 # canvas width
ch = 120 # canvas height
canvas_1 = Canvas(root, width=cw, height=ch, bg="black")
canvas_1.grid(row=0, column=1)
posn_x = 10
posn_y = 10
shift_x = 2
shift_y = 1
ball = PhotoImage(file = "/constr/pics2/beachball.gif")
for i in range(1,100): # end the program after 100 position # shifts.
posn_x += shift_x
posn_y += shift_y
canvas_1.create_image(posn_x,posn_y,anchor=NW, image=ball)
canvas_1.update() # This refreshes the drawing on the # canvas.
canvas_1.after(cycle_period) # This makes execution pause for # 100 milliseconds.
canvas_1.delete(ALL) # This erases everything on the # canvas.
root.mainloop()
The image of the beach ball is shifted across a canvas in exactly the same manner that was used in Chapter 4, Animation Principles. The difference now is that the photo type images always occupy a rectangular area of screen. The size of this box, called the bounding box, is the size of the image. We have used a black background so the black corners on the image of our beach ball cannot be seen.