Animation

The graphics library does an excellent job at creating single-frame graphical images to view. However, this library is also capable of creating animated scenes on the screen. Here, I using the term “animation” to refer to any type of graphical movement on the screen. This could be movement of characters in a video game, animating a short film, or causing things on the screen to change in reaction to a mouse clicks and movement. The graphics library accomplishes this in the same way that all other motion is shown on a screen, including YouTube videos, movie theater premiers, and video games. The way this is accomplished is using a series of still images shown in quick succession, to make motion appears as if it is occurring.

When a movie is being filmed for release in the theater, the cameras work by capturing many individual still pictures and a really fast sequence. These individual pictures are stored in-order, and when replayed back they give the effect of having captured the motion of the actors and other events in the scene. When you go to see this movie in a theater on the big screen, what your eyeballs are actually viewing is a long sequence of individual still images. Each image is displayed in the screen for a small fraction of a second before moving onto the next, and the next, and the next. For theater-quality films, there are typically 24 frames (images) cycled through each second. We refer to the number of images displayed per second as the frame-rate of the movie. Theater films are often 24 frames-per-second (FPS), but many other types of videos use either 30 FPS or 60 FPS for smoother motion and better clarity.

If a videographer were to film a ball being dropped, the frames of the video might look something like this.

Notice that in the first frame, the ball begins near the top of the image. In the next frame, the ball is slightly lower, as in the next one, and the next one. Individually, these just look like static pictures of a ball, in different positions. However, if played back very quickly, it would appear as if the ball was actually being dropped.

This same exact principle is what is used to create animations on canvases with the graphics library. The programmer must write the graphics drawing code in such a way that an individual frame is drawn on the screen, left there for a small fraction of a second, and then replaced with a new drawing representing the next frame of the animation sequence. This process must repeat over and over. It could even be that the program repeats this process infinitely, or until the user of the program decides to quit. To get this working in python with graphics, we use what is called an animation loop. The animation loop is a loop (typically a while loop) that is responsible for controlling the creation, drawing, and pausing of each frame, and then moving on to the next one. The standard outline for such a loop is as follows:

canvas = graphics(500, 350, 'animation')

# The animation loop
while True:
    canvas.clear()
    # Draw stuff for 1 frame here
    canvas.update_frame(30)

Lets go over whats going on in this code, in detail:

• Before the loop begins, a canvas must be created using the graphics constructor function. This is used as-usual. The width, height, and title of the window must be specified here.
• A while loop is constructed with a condition of simply True. This is whats known as an infinite loop in computer programming. This loop will never end unless the program is terminated by the user or the computer running it shuts off. Though it may seem odd, this is exactly what we want for many animations. The program should continue creating and displaying new graphics frames until the user is done with the program.
• Within the loop, the very first things is a call to canvas.clear(). This function clears away any shapes that are on the canvas. On the first iteration of the loop it may do nothing. On every other iteration, this makes sure to clear away shapes from the old frame so that a fresh one can be drawn.
• Next, this is where the code goes to draw a frame. Any drawing code can be put here, including calls to functions like ellipse and rectangle.
• After the frame has been drawn, a call to update_frame must be made. The argument of this function represents the desired frame-rate. Whatever number is put here determines how long the frame will pause on the screen for, before the loop continues on to the next one.

A good first example of seeing this in-action will be to create an animation of a dropping ball, as was given in the example earlier. We can start simple. Initially, lets just change the code so that (A) we have a main function (which is general good practice) and so that (B) we draw a single gray ball at the top middle of the canvas:

def main():
    canvas = graphics(500, 350, 'ball drop')

    while True:
        canvas.clear()
        canvas.rectangle(0, 0, 500, 350, 'orange')
        canvas.ellipse(250, 50, 75, 75, 'gray')
        canvas.update_frame(30)

main()

If you were to execute this code from your IDE, you should see the following canvas, with no animation:

Even though we have the animation loop in the code, nothing is animating. The loop is running, and repeating many times. You could even try this out by adding a print('animate!') within the loop, and you would see it print out many times as the canvas remains still. This is because each time a new frame is drawn, nothing is changing. Each frame draws the gray ball in the exact same place and with the exact same size. In order to make the ball animate, something about it must change after each frame is drawn. Since we want to make the ball look as if it is falling, this probably means that the y value should change (specifically, increase) a little bit between each frame. This can be accomplished by adding a variable that will keep track of the y-coordinate of the ball. This will be updated when each frame is drawn, which will give it the falling effect.

def main():
    canvas = graphics(500, 350, 'ball drop')

    y = -100
    while True:
        canvas.clear()
        canvas.rectangle(0, 0, 500, 350, 'orange')
        canvas.ellipse(250, y, 75, 75, 'gray')
        y += 4
        canvas.update_frame(30)

main()

When this is run, it will produce the falling ball!

In an animated scene, more than object can be moving at once, and in more than one direction. Take a careful look at the animated canvas shown below.

Rearrange the code shown below so that it would produce this canvas when executed. Take special note of which ball appears on top of the other when they intersect in the middle of the canvas. This tells you shich ball should be drawn first in the animation loop.

coord = -100 

while True:

    canvas.update_frame(30)

    canvas.ellipse(coord, 175, 75, 75, 'blue')

    coord += 4

    canvas.rectangle(0, 0, 500, 350, 'orange')

    canvas.clear()

    canvas.ellipse(250, coord, 75, 75, 'gray')

Animation can also be utilized as a component of user interaction. Animations can occur when a user types on the keyboard, moves the mouse, or clicks on an area of the screen. Some of these techniques will be covered in the next lessons.