Lab 5: Animation

In this week's lab, you will explore the Graphics module, a different approach to drawing shapes on the digital canvas. Each shape is an object, which offers you more control. One new capability is the ability to move shapes, which you will use to create an animated scene.

The goals this week are to:



Tasks

L0. The setup

Create a Lab05 folder on your computer where you store CS151 projects and labs, hopefully somewhere that is backed up (e.g. in Dropbox, Google Drive, Microsoft One Drive, etc.)

Open up a Terminal (e.g. Control+` in VS Code) and change the directory (cd) to the Lab05 folder.

L1. Downloads

Download each of the following files to your Lab05 folder (right-click the links and choose "Save As").

File type Links
Graphics Module Graphics module
Documentation (PDF)

Important: The Graphics documentation PDF contains a listing of all Graphics object types, their methods, and how they work. It is helpful to have this open as you work.

L2. Animate your collage

Copy lab4_collage.py from last week into your Lab05 folder and rename it lab5_collage_animation.py

L2a: Animate your collage

At the top of your file, import the time and random modules.

Immediately after your loop that draws the shapes in main, create an animation loop. This is a for loop that runs for a large number of iterations (e.g. 1000). On each iteration, you are going to move each one of your shapes by a certain amount. We will call each iteration of the animation loop a frame.

Inside your animation loop:

Running python3 lab5_collage_animation.py should show your collage and each shape should move around randomly. The animation should run until the user clicks.

L2b: Randomly change each shape's color

Every time you move a shape in the list, set its color randomly. Do this by generating a set of random RGB values (in the Graphic's module's convention, each is an integer between 0 and 255).

To set the fill color of the shape to the RGB values rather than a color name string (e.g. 'red'), replace the string parameter with: a tuple (r, g, b), where r, g, and b are your randomly generated ints. So the method call becomes something like: shape.setFill((r, g, b)). Note: the r, g, and b int values are a tuple like with turtle.

If you run lab5_collage_animation.py, you should see your animated collage. Every time the shapes move, they should take on a new color. Clicking the screen should close the program.

Hint: If you see only one shape moving/changing color, you might not be looping thru ALL your shapes in the list and moving each of them.

Take a screen recording of your collage animation. This is Required Image 1 to be included in your project report.


L3: Snowman animation

In this final task, you will create and animate a complex shape using the same process as you have been practicing, except we will organize your code in three separate functions:

The animation will have the snowman walk around.

The organization follows what you will be expected to do in the project.

L3a: Animate the snowman

Copy lab4_snowman.py from last week into your Lab05 folder and rename it lab5_snowman_animation.py

Let's make the snowman move! Copy-and-paste the following function signature that will move (take a step) on every iteration of the animation loop.

One way to think of the "animate" function: you are making a cartoon and this function specifies how your snowman should move since the last "still image" (frame) to form the current one. You will call this function from the animation loop in your "test" function to make the cartoon animate over an extended period of time.

def snowman_animate(shapes, frame, ):
    '''Move the snowman at the current iteration of the animation (frame).

    Parameters:
    -----------
    shapes: list with the 5 Oval objects in it that make up the snowman
    frame: int. Current iteration of the animation
    '''

Have your snowman move in the x-direction (horizontally) by 10 on even frames and -10 on odd frames. Always move the snowman in the y-direction (vertically) by 5.

L3b: Test the snowman animation

In snowman_test, add an animation loop (after drawing the snowman) in which you call the snowman_animate function that you just wrote.

Remember to add the sleep and checkMouse lines in the loop (you can copy-and-paste from your collage code).

Running lab5_snowman.py should show you a snowman shuffling back and forth as it moves down the screen. Clicking should end the animation.

Take a screen recording of your snowman animation. This is Required Image 2 to be included in your project report.

Get started with the project

Create a folder in your project folder and save all of your videos in it.

Once you are done with each of the lab tasks, you may start on the project.


© 2021 Hannen Wolfe and Oliver Layton