At My Fingertips

Documentation

Pac-Man Animation

In this activity you will exercise function definition, lists and repetition and implement the pacman_animation function to recreate the following animation.

pacman animation

The Pac-Man

The pacman function should produce a Pac-Man graphic of the given radius and whose mouth is open at the given angle mouth_angle.

If you haven't, you should solve the PyTamaro iconPac-Man activity first, and save the pacman function in your toolbox by clicking on the icon

SaveToToolboxButtonSurrounded.png

on the cell containing the pacman function definition.

Once you are done, come back here and import the pacman function from your toolbox by running the next code cell.

Loading...

Animations

Pytamaro offers a show_animation function, hover over the name of the function and read the documentation. As you can notice, the show_animation function takes a parameter of type list[Graphic], therefore you need to pass a list of Graphics to the function for it to show them one after the other as an animation.

Each of the elements in the given list of graphics will be represented as a frame in the animation. Since the size of the animation is fixed (cannot change frame by frame), all elements in the list should have the same size!

the Pac-Man Tile

Do you think these two Graphics have the same size?

two pacmans

What about these two?

two pacmans background

The first two Pac-Mans occupy a different width, but with the square background the size of the squares is fixed!

Therefore, we can solve the problem of having different-sized Pac-Mans for different mouth angles by using a fix-sized background! There is another question we need to ask ourselves: how should we place the Pac-Man on the background? The following animation is obtianed by combining the Pac-Man at the center of the background, by using overlay.

pacman overlay animation

It is because the overlay function combines two graphics at their center by placing one on top of the other. Since the Pac-Mans have different sizes (as we covered before), using overlay gives the impression that the Pac-Man is moving horizontally!

To give a more natural result, the Pac-Man graphics should not only all have the same size (we can achieve this by using a background), but the Pac-Mans should all be in the same position!

A solution for this would be to use pin and compose to fix the position of the Pac-Man to the left side of the background, like in the following animation.

pacman animaiton

If you have done the PyTamaro iconPac-Man Maze Tiles activity, then you have already implemented a function that creates a Pac-Man pinned on the left side of a black square background: the pacman_tile function.

If you already have an implementation for it we suggest you go and save it in your toolbox, in fact you might needed it for another activity as well (the Pac-Man Maze).

If you haven't done that activity yet, implement a pacman_tile function here: it should take the side of the square (therefore the diameter of the Pac-Man) and the Pac-Man's mouth_angle, and return the Pac-Man combined to the center_left of a black square background.

Loading...

Lists of Graphics

As we noticed before, the show_animation function, takes a parameter of type list[Graphic]. We need a way to create a list of graphics where each Pac-Man's mouth is open a little wider than the previous Pac-Man's.

For this purpose, let's implement a pacman_list function that returns the needed list of Graphics.

A List of Pac-Mans

Description of the Function

Let's now focus on the pacman_list function. We want this function to produce a list[Graphic] (a list of Graphics), containing an arbitrary number of Pac-Man graphics, where the first Pac-Man starts with an arbitrary minimum mouth angle and each of the following Pac-Mans have their mouth open a little bit wider, until they reach an arbitrary maximum mouth angle, and then decrease again to approach the initial mouth angle. The radius of the Pac-Mans can also be arbitrary but all Pac-Mans in the same list should have the same radius.

Here are two examples of elements of the lists of graphics that you should be able to obtain with your pacman_list function

five pacmans

three pacmans

Choosing the Parameters

The choice of parameters depends on what we want the function to be able to do. If we want to be able to choose the color of the Pac-Mans, then parameterizing the color would be a good idea. In our case we want the color to be fixed (yellow), therefore the color of the Pac-Mans should not be a parameter of the function. On the other hand, we want to be able to choose the number of Pac-Mans in our list, therefore one of the parameters of the function would be the number of Pac-Mans.

Given the description of the function, it should take the following parameters:

  • side: the side of each Pac-Man tile (diameter of the Pac-Man)
  • min_angle: the minimum angle of the mouth opening of the Pac-Man, in degrees
  • max_angle: the maximum angle of the mouth opening of the Pac-Man, in degrees
  • pacman_count: the wanted number of Pac-Man graphics in the list

What about Types?

The side should be of type float, since it could also take floating point numbers (like 120.5). The type of min_angle and max_angle should also be float, since a mouth angle like 60.2° would be valid. The type of pacman_count (and for numbers used for counting in general) should be int, since you can only have an integer amount of Pac-Mans.

Therefore, these will be the parameters of our function:

def pacman_list(side: float, min_angle: float, max_angle: float, pacman_count: int)

Implement the function

Now, implement the pacman_list function so that it creates a list of Pac-Man graphics as we discussed!

Remember to use the pacman_tile function to have a background for the Pac-Man.

Loading...

List Comphrehensions

Did you write something like this?

def pacman_list(...) -> list[Graphic]:
    middle = pacman_count // 2
    step_angle = (max_angle - min_angle) / middle

    result = []
    for i in range(middle):
        # add increasing Pac-Mans to resulting list
        result.append(pacman_tile(side, min_angle + i * step_angle))

    for i in range(pacman_count - middle):
        # add decreasing Pac-Mans to resulting list
        result.append(pacman_tile(side, max_angle - i * step_angle))
    return result

Well done! Did you know that python offers the ability to refactor this code using list comprehensions, that allow you to fill a list based on values from another list (like a range of values)? The following code does the same thing as the one above!

def pacman_list(...) -> list[Graphic]:
    middle = pacman_count // 2
    step_angle = (max_angle - min_angle) / middle
    
    increasing_pacmans = [
        pacman_tile(side, min_angle + i * step_angle) 
        for i in range(middle)
    ]
    decreasing_pacmans = [
        pacman_tile(side, max_angle - i * step_angle) 
        for i in range(pacman_count - middle)
    ]
    return increasing_pacmans + decreasing_pacmans  # join the two lists

The code in [] brackets can be written in one line, but we split it to have shorter lines.

Do you understand this code? Do you agree that the two implementations are equivalent?

The Pac-Man Animation

As you may have noticed, we now have a way to produce a list of Pac-Man graphics, and pytamaro offers the show_animation function that allows us to output a list of graphics interpreted as an animation.

Use the show_animation function and your pacman_list function to create an animation.

Pay attention to the parameters of the pacman_list function! Try to create an animation of Pac-Mans with a side of 160, starting with a mouth angle of 20 and reaching a mouth angle of 120. Use 10 as the number of frames (the number of Pac-Man graphics in the list).

Additionally, the show_animation can take the duration of each frame as the second parameter if the default value (40ms) is too short. In our case it is, therefore call show_animation with 100 as the second parameter.

Loading...

What You Learned

In this activity you learned how to produce animations with the show_animation function, by providing it with a list of graphics and a frame duration. We also discussed some specifics, like the fact that all frames should be graphics of the same size.

You practiced the use and creation of lists using loops, and you were introduced to the concept of list comprehensions.

You may have noticed that you can join two lists together using +!

You also had a chance to practice choice of parameters when defining the pacman_listfunction and you even chose the types of the parameters.

You imported the pacman function from your toolbox, and possibly also the pacman_tile function.


This activity has been created by LuCE Research Lab and is licensed under CC BY-SA 4.0.

Pac-Man Animation

Logo of PyTamaro

PyTamaro is a project created by the Lugano Computing Education Research Lab at the Software Institute of USI

Privacy PolicyPlatform Version c08406b (Wed, 20 Nov 2024 12:30:00 GMT)