## Python 2.6 Graphics Cookbook

Over 100 great recipes for creating and animating graphics using Python

- Create captivating graphics with ease and bring them to life using Python
- Apply effects to your graphics using powerful Python methods
- Develop vector as well as raster graphics and combine them to create wonders in the animation world
- Create interactive GUIs to make your creation of graphics simpler
- Part of Packt’s Cookbook series: Each recipe is a carefully organized sequence of instructions to accomplish the task of creation and animation of graphics as efficiently as possible

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.

## Simple animation of a GIF beach ball

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.

### Getting ready

We need a suitable *GIF* image of an object that we want to animate. An example of one, named *beachball.gif* has been provided.

### How to do it…

Copy a *.gif* fle 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 fle 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()

cycle_period = 100

cw = 300 # canvas width

ch = 200 # 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()

### How it Works

The image of the beach ball is shifted across a canvas. 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.

## The vector walking creature

We make a pair of walking legs using the vector graphics. We want to use these legs together with pieces of raster images and see how far we can go in making appealing animations. We import Tkinter, math, and time modules. The math is needed to provide the trigonometry that sustains the geometric relations that move the parts of the leg in relation to each other.

### Getting ready

We will be using Tkinter and time modules to animate the movement of lines and circles. You will see some trigonometry in the code. If you do not like mathematics you can just cut and paste the code without the need to understand exactly how the maths works. However, if you are a friend of mathematics it is fun to watch sine, cosine, and tangent working together to make a child smile.

### How to do it…

Execute the program as shown in the previous image.

# walking_creature_1.py

# >>>>>>>>>>>>>>>>

from Tkinter import *

import math

import time

root = Tk()

root.title(“The thing that Strides”)

cw = 400 # canvas width

ch = 100 # canvas height

#GRAVITY = 4

chart_1 = Canvas(root, width=cw, height=ch, background=”white”)

chart_1.grid(row=0, column=0)

cycle_period = 100 # time between new positions of the ball (milliseconds).

base_x = 20

base_y = 100

hip_h = 40

thy = 20

#===============================================

# Hip positions: Nhip = 2 x Nstep, the number of steps per foot per stride.

hip_x = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 60, 60] #15

hip_y = [0, 8, 12, 16, 12, 8, 0, 0, 0, 8, 12, 16, 12, 8, 0] #15

step_x = [0, 10, 20, 30, 40, 50, 60, 60] # 8 = Nhip

step_y = [0, 35, 45, 50, 43, 32, 10, 0]

# The merging of the separate x and y lists into a single sequence.

#==================================

# Given a line joining two points xy0 and xy1, the base of an isosceles triangle,

# as well as the length of one side, “thy” . This returns the coordinates of

# the apex joining the equal-length sides.

def kneePosition(x0, y0, x1, y1, thy):

theta_1 = math.atan2((y1 – y0), (x1 – x0))

L1 = math.sqrt( (y1 – y0)**2 + (x1 – x0)**2)

if L1/2
# The sign of alpha determines which way the knees bend.

alpha = -math.acos(L1/(2*thy)) # Avian

#alpha = math.acos(L1/(2*thy)) # Mammalian

else:

alpha = 0.0

theta_2 = alpha + theta_1

x_knee = x0 + thy * math.cos(theta_2)

y_knee = y0 + thy * math.sin(theta_2)

return x_knee, y_knee

def animdelay():

chart_1.update() # This refreshes the drawing on the canvas.

chart_1.after(cycle_period) # This makes execution pause for 200 milliseconds.

chart_1.delete(ALL) # This erases *almost* everything on the canvas.

# Does not delete the text from inside a function.

bx_stay = base_x

by_stay = base_y

for j in range(0,11): # Number of steps to be taken – arbitrary.

astep_x = 60*j

bstep_x = astep_x + 30

cstep_x = 60*j + 15

aa = len(step_x) -1

for k in range(0,len(hip_x)-1):

# Motion of the hips in a stride of each foot.

cx0 = base_x + cstep_x + hip_x[k]
cy0 = base_y – hip_h – hip_y[k]
cx1 = base_x + cstep_x + hip_x[k+1]
cy1 = base_y – hip_h – hip_y[k+1]
chart_1.create_line(cx0, cy0 ,cx1 ,cy1)

chart_1.create_oval(cx1-10 ,cy1-10 ,cx1+10 ,cy1+10, fill=”orange”)

if k >= 0 and k
# Trajectory of the right foot.

ax0 = base_x + astep_x + step_x[k]
ax1 = base_x + astep_x + step_x[k+1]
ay0 = base_y – step_y[k]
ay1 = base_y – step_y[k+1]
ax_stay = ax1

ay_stay = ay1

if k >= len(step_x)-1 and k
# Trajectory of the left foot.

bx0 = base_x + bstep_x + step_x[k-aa]
bx1 = base_x + bstep_x + step_x[k-aa+1]
by0 = base_y – step_y[k-aa]
by1 = base_y – step_y[k-aa+1]
bx_stay = bx1

by_stay = by1

aknee_xy = kneePosition(ax_stay, ay_stay, cx1, cy1, thy)

chart_1.create_line(ax_stay, ay_stay ,aknee_xy[0], aknee_xy[1], width = 3, fill=”orange”)

chart_1.create_line(cx1, cy1 ,aknee_xy[0], aknee_xy[1], width = 3, fill=”orange”)

chart_1.create_oval(ax_stay-5 ,ay1-5 ,ax1+5 ,ay1+5, fill=”green”)

chart_1.create_oval(bx_stay-5 ,by_stay-5 ,bx_stay+5 ,by_stay+5, fill=”blue”)

bknee_xy = kneePosition(bx_stay, by_stay, cx1, cy1, thy)

chart_1.create_line(bx_stay, by_stay ,bknee_xy[0], bknee_xy[1], width = 3, fill=”pink”)

chart_1.create_line(cx1, cy1 ,bknee_xy[0], bknee_xy[1], width = 3, fill=”pink”)

animdelay()

root.mainloop()

### How it works…

Without getting bogged down in detail, the strategy in the program consists of defning the motion of a foot while walking one stride. This motion is defned by eight relative positions given by the two lists *step_x (horizontal)* and *step_y (vertical)*. The motion of the hips is given by a separate pair of x- and y-positions *hip_x* and *hip_y*.

Trigonometry is used to work out the position of the knee on the assumption that the thigh and lower leg are the same length. The calculation is based on the sine rule taught in high school. Yes, we do learn useful things at school!

The *time-animation regulation* instructions are assembled together as a function *animdelay()*.

### There’s more

In Python *math* module, two arc-tangent functions are available for calculating angles given the lengths of two adjacent sides. *atan2(y,x)* is the best because it takes care of the crazy things a tangent does on its way around a circle – tangent ficks from minus infnity to plus infnity as it passes through 90 degrees and any multiples thereof.

A mathematical knee is quite happy to bend forward or backward in satisfying its equations. We make the sign of the angle negative for a backward-bending bird knee and positive for a forward bending mammalian knee.

### More Info Section 1

This animated walking hips-and-legs is used in the recipes that follow this to make a bird walk in the desert, a diplomat in palace grounds, and a spider in a forest.

## Bird with shoes walking in the Karroo

We now coordinate the movement of four *GIF* images and the striding legs to make an Apteryx (a fightless bird like the kiwi) that walks.

### Getting ready

We need the following *GIF* images:

- A background picture of a suitable landscape
- A bird body without legs
- A pair of garish-colored shoes to make the viewer smile
- The walking avian legs of the previous recipe

The images used are *karroo.gif*, *apteryx1.gif*, and *shoe1.gif*. Note that the images of the bird and the shoe have transparent backgrounds which means there is no rectangular background to be seen surrounding the bird or the shoe. In the recipe following this one, we will see the simplest way to achieve the necessary transparency.

### How to do it…

Execute the program shown in the usual way.

# walking_birdy_1.py

# >>>>>>>>>>>>>>>>

from Tkinter import *

import math

import time

root = Tk()

root.title(“A Walking birdy gif and shoes images”)

cw = 800 # canvas width

ch = 200 # canvas height

#GRAVITY = 4

chart_1 = Canvas(root, width=cw, height=ch, background=”white”)

chart_1.grid(row=0, column=0)

cycle_period = 80 # time between new positions of the ball (milliseconds).

im_backdrop = “/constr/pics1/karoo.gif”

im_bird = “/constr/pics1/apteryx1.gif”

im_shoe = “/constr/pics1/shoe1.gif”

birdy =PhotoImage(file= im_bird)

shoey =PhotoImage(file= im_shoe)

backdrop = PhotoImage(file= im_backdrop)

chart_1.create_image(0 ,0 ,anchor=NW, image=backdrop)

base_x = 20

base_y = 190

hip_h = 70

thy = 60

#==========================================

# Hip positions: Nhip = 2 x Nstep, the number of steps per foot per stride.

hip_x = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 60, 60] #15

hip_y = [0, 8, 12, 16, 12, 8, 0, 0, 0, 8, 12, 16, 12, 8, 0] #15

step_x = [0, 10, 20, 30, 40, 50, 60, 60] # 8 = Nhip

step_y = [0, 35, 45, 50, 43, 32, 10, 0]

#=============================================

# Given a line joining two points xy0 and xy1, the base of an isosceles triangle,

# as well as the length of one side, “thy” this returns the coordinates of

# the apex joining the equal-length sides.

def kneePosition(x0, y0, x1, y1, thy):

theta_1 = math.atan2(-(y1 – y0), (x1 – x0))

L1 = math.sqrt( (y1 – y0)**2 + (x1 – x0)**2)

alpha = math.atan2(hip_h,L1)

theta_2 = -(theta_1 – alpha)

x_knee = x0 + thy * math.cos(theta_2)

y_knee = y0 + thy * math.sin(theta_2)

return x_knee, y_knee

def animdelay():

chart_1.update() # Refresh the drawing on the canvas.

chart_1.after(cycle_period) # Pause execution pause for X millise-conds.

chart_1.delete(“walking”) # Erases everything on the canvas.

bx_stay = base_x

by_stay = base_y

for j in range(0,13): # Number of steps to be taken – arbitrary.

astep_x = 60*j

bstep_x = astep_x + 30

cstep_x = 60*j + 15

aa = len(step_x) -1

for k in range(0,len(hip_x)-1):

# Motion of the hips in a stride of each foot.

cx0 = base_x + cstep_x + hip_x[k]
cy0 = base_y – hip_h – hip_y[k]
cx1 = base_x + cstep_x + hip_x[k+1]
cy1 = base_y – hip_h – hip_y[k+1]
#chart_1.create_image(cx1-55 ,cy1+20 ,anchor=SW, image=birdy, tag=”walking”)

if k >= 0 and k
# Trajectory of the right foot.

ax0 = base_x + astep_x + step_x[k]
ax1 = base_x + astep_x + step_x[k+1]
ay0 = base_y – 10 – step_y[k]
ay1 = base_y – 10 -step_y[k+1]
ax_stay = ax1

ay_stay = ay1

if k >= len(step_x)-1 and k
# Trajectory of the left foot.

bx0 = base_x + bstep_x + step_x[k-aa]
bx1 = base_x + bstep_x + step_x[k-aa+1]
by0 = base_y – 10 – step_y[k-aa]
by1 = base_y – 10 – step_y[k-aa+1]
bx_stay = bx1

by_stay = by1

chart_1.create_image(ax_stay-5 ,ay_stay + 10 ,anchor=SW, im-age=shoey, tag=”walking”)

chart_1.create_image(bx_stay-5 ,by_stay + 10 ,anchor=SW, im-age=shoey, tag=”walking”)

aknee_xy = kneePosition(ax_stay, ay_stay, cx1, cy1, thy)

chart_1.create_line(ax_stay, ay_stay-15 ,aknee_xy[0], aknee_xy[1],

width = 5, fill=”orange”, tag=”walking”)

chart_1.create_line(cx1, cy1 ,aknee_xy[0], aknee_xy[1], width = 5,

fill=”orange”, tag=”walking”)

bknee_xy = kneePosition(bx_stay, by_stay, cx1, cy1, thy)

chart_1.create_line(bx_stay, by_stay-15 ,bknee_xy[0], bknee_xy[1],

width = 5, fill=”pink”, tag=”walking”)

chart_1.create_line(cx1, cy1 ,bknee_xy[0], bknee_xy[1], width = 5,

fill=”pink”, tag=”walking”)

chart_1.create_image(cx1-55 ,cy1+20 ,anchor=SW, image=birdy, tag=”walking”)

animdelay()

root.mainloop()

### How it works…

The same remarks concerning the trigonometry made in the previous recipe apply here. What we see here now is the ease with which vector objects and raster images can be combined once suitable *GIF* images have been prepared.

### There’s more…

For teachers and their students who want to make lessons on a computer, these techniques offer all kinds of possibilities like history tours and re-enactments, geography tours, and, science experiments. Get the students to do projects telling stories. Animated year books?