Animation

The tools we are going to use for animation are going to be PyGame and Python. There is information on how to install pygame linked here.

PyGame

PyGame provides you with a couple core things:

  1. A way to interact with a canvas
  2. A set of ways to draw shapes and images to the canvas
  3. A procedure for repeating the code and updating the screen to make things animated

There are a couple initial things for pygame.

I have outlined the basic code here:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import pygame

##### INIT SECTION
# Define some colors
BLACK = (0, 0, 0)
WHITE = (255, 255, 255)
GREEN = (0, 255, 0)
RED = (255, 0, 0)

size = (700, 500)
done = False

pygame.init()

screen = pygame.display.set_mode(size)
clock = pygame.time.Clock()

pygame.display.set_caption("My Animation")

This is the header code for pygame. It does the following things:

  1. Imports the pygame library

  2. Defines some basic colors. These are in the RGB format in tuples.

  3. Define the size of the screen as a tuple.

  4. Create a boolean variable to represent whether the animation is done yet.

  5. pygame.init() starts the pygame engine.

  6. After the engine is started, you can set the screen size and get the clock.
    • the clock is useful for setting and changing the frames per second.

  7. You can also optionall set the title of the screen

With this part, you are not quite done. You now need to have the game loop!

Game Loop

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# -------- Main Program Loop -----------
while not done:
    #### EVENT CHECK SECTION
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            done = True

    #### CLEAR THE SCREEN
    screen.fill(WHITE)

    #### DRAWING SECTION

    # empty

    #### TELL THE SCREEN TO UPDATE
    pygame.display.flip()

    #### TELL THE CLOCK YOU WANT 60 FRAMES PER SECOND
    clock.tick(60)


# Close the window and quit.
pygame.quit()

You should combine this code with the code from the last second. When run together, it should open a blank white screen. Let me know if it doesn’t, because then there is something wrong.

Drawing Objects

Pygame has several different objects it can draw. There is a specific format to them. There are complete docs at the pygame docs, but I will describe a couple things here.

The screen object created in the initial section is very important. It is used to reference the screen for drawing! Inside the drawing section in the while loop, add the following:

1
pygame.draw.rect(screen, BLACK, (0, 0, 100, 100))

This code does the following:

  1. It uses the pygame.draw.rect function draw a rectangle

  2. It uses the screen object to draw to the screen

  3. It uses the BLACK color to pick the rectangle’s color

  4. It uses a 4-length tuple (0,0,100,100) to define the shape of the rectangle.
    • The format of this tuple is: (left_x, top_y, width, height)

The pygame website describes this code as: rect(Surface, color, Rect, width=0) -> Rect. This means that the rect(...) function takes as input the Surface, which we call screen, a color, a capital-R Rect, and optionally the width. The arrow means it returns back a capital-R Rect.

The capital-R Rect is a specific PyGame variable type. I will show how to use that in the next section. But, you can also just use tuples in this case. We also aren’t saving the Rect that it produces.

Explore the code on the pygame docs. Explore the different shapes. To list them here:

rect(Surface, color, Rect, width=0) -> Rect
polygon(Surface, color, pointlist, width=0) -> Rect
circle(Surface, color, pos, radius, width=0) -> Rect
ellipse(Surface, color, Rect, width=0) -> Rect
arc(Surface, color, Rect, start_angle, stop_angle, width=1) -> Rect
line(Surface, color, start_pos, end_pos, width=1) -> Rect
lines(Surface, color, closed, pointlist, width=1) -> Rect

We are not importing the functions completely, so we are calling them as pygame.draw.* where the * is polygon, circle, rect, etc.

Keeping track of state

The structure of the pygame code is:

create variables and initialize them

start loop
    draw and update things inside the loop
    the loop ends when the animation ends

close the window

In order to keep track of the state of things, you have to create variables to represent the state in the first part.

An easy way to play with this is to create x and y variables and set them to some number like 0

x = 0
y = 0

then use them to draw the object inside the loop.

## inside the loop
pygame.draw.rect(surface, BLACK, (x, y, 100, 100))

Finally, you can then change the x and y inside the loop!

x += 1
y += 1

Now, the object will move!

The core elements of the game loop

The game loop follows this pattern:

  1. Handle Events
  2. Update states
  3. Draw everything

Where you should go from here

Your goal now is to make an animation. You can continue to use variables like above and use functions to modify those variables. You can also use classes, which are described elsewhere and in the cookbooks linked below.

You should work on doing the following:

  1. Putting the game loop inside a function or inside a class
  2. Put the event handling, state updating, and drawing inside functions or classes.

You should also answer the following questions:

  1. What is the overall goal of your animation?
  2. What are the pieces of your animation?
  3. How do those pieces change over time?
  4. What variables do you need to represent those changes?
  5. What python syntax is really useful for all of these things?

In addition to the main cookbooks, there are a couple additional cookbooks which you can use: