Tutorial 5

Submitting

Regardless of how you choose to complete the assignment, you MUST submit the file you worked on to Canvas.

If you’re attending the alternate tutorial (see schedule), please submit your .PY file and make sure your PM has recorded your attendance.

If you’re submitting in-class, make sure to check-in (there will be one question called CHECK-IN Q only available for the first 7 minutes of class) and check-out (there will be a three question survey called CHECKOUT SURVEY only available for the last 10 minutes of class) using PollEverywhere with your location verified.

If you’re submitting out-of-class, make sure to submit your .PY file to be graded. Take extra care to double check you've followed the instructions!

Learning Objectives

The goal of this tutorial is to get you more comfortable with event handlers. The demo files and lecture videos/slides for Lecture 15 - 17 might be helpful in completing this exercise! Remember, we expect you to watch the pre-recorded lecture BEFORE completing the tutorial.

Getting Started

You’ll need TWO modules your Tutorial 5 folder to complete today’s activity: cs110_p1 and pixel_friends both available below.

P1 Module File	P1 Module Docs	Pixel Friends Module	Pixel Friends Docs

Note: Sick of Mario? In addition to the mario and goomba functions from pixel_friends, there’s also heart and frank functions. Checkout how they work in the docs link!

Want to design your own pixel friend?

If you take a look at pixel_friends.py, you'll see that each design is just a big list of numbers – each one representing a unique color that pixel will take on. Someone (me) has pain stakenly designed mario, goomba, heart, frank, and link so that you don't have to go through that whole process. However, maybe you're a huge fan of 8-bit art. How might you design your own pixel friend?

Introducing Pixel Art Creator!!!!!!

Pixel Art Creator

HOW TO USE IT

Download the above .py file and place it in your project folder in the same place as file from the previous step.
Open it in IDLE and run it like normal. You'll see a grid appear (16 x 16).
When you click on a square in the grid it will fill in with a "color" number (like the Mario example from tutorial last week). Clicking on the same grid square multiple times will change the color (remember that all 1 squares will receive the same color; all 2 squares will receive the same color; etc.).
If you want to "clear" a square, right click on it (on a Mac, click with two fingers at the same time on your trackpad).
Once you've designed your new pixel art, hit the "Enter" or "Return" key on your keyboard and check the interpreter window. You'll see a big list (of lists) that contains your newly designed pixel art!

Use that design with the pixel_art function and your choice of color palette to draw your design!

You’ll also need TWO template files for today (note: remote submitters should submit BOTH):

Part 1 - Mouse Events Template	Part 2 - Keyboard Events Template

Part 1. Dealing with Mouse Events

Open 01_mouse_events.py (make sure it’s in the same folder as the earlier files) and complete the following tasks:

First, add a call to listen_for in the setup function that listens for clicks on the screen. When it hears clicks, it should call the add_new_goomba function which is defaults to just printing a message out when it is called. Once you’ve setup the listener, try running your program and seeing if anything gets printed in the interpreter window.
Modify the add_new_goomba function so that it adds a new Goomba wherever the user clicks. Make the size of the Goomba random as its drawn. Optional: come up with a way of tracking how many Goomba have been created so that each Goomba can have a unique tag (note: you’ll have to do this in the exercise!).
Now run your program again, and notice that your add_new_goomba function is invoked when you click the screen.
Now setup ANOTHER listener that listens for a drag event (checkout the documentation for listen_for) and also calls the add_new_goomba function.
Run it again and take over the world with either goombas, marios, hearts, and/or Franks.

Part 2. Dealing with Keyboard Events

Open 02_keyboard_events.py and complete the following tasks:

When the user presses the w-key, move one of the marios up 10 pixels.
When the user presses the a-key, move one of the marios left 10 pixels.
When the user presses the d-key, move one of the marios right 10 pixels.
When the user presses the s-key, move one of the marios down 10 pixels.

Part 3. Combining both Mouse and Keyboard Events

In the third exercise, you are going to use a global variable to track which creature your keyboard will control. To do this, you will combine the use of the click event handler and the keyboard event handlers.

Inside 02_keyboard_events.py do the following:

Create a global variable called active_tag and initialize it to "mario_0".
Update your move_mario function so that instead of always moving "mario_0", you reference the active_tag variable instead.
Modify the select_mario function so that it sets the active_tag variable based on mario on which the user clicks. Hint: use the global keyword (see below).
Test your code by making sure that when you click on a different creature, the keyboard moves the correct one.

need a global refresher?

If you want a variable to be accessible across a bunch of different parts of your program, you should make it a "global variable." However, because local variables take precedence over globals, inside functions, you need to specify which version of the variable you want to use. For example, in the below example we have a global variable named color that is updated within a function called change_color (notice the use of the global keyword that tells Python "by color we mean the global variable color not a new local variable named color")

color = "red"
def change_color():
    global color
    color = "green"

print(color)
change_color()
print(color)

Check it out in Python Tutor!

Part 4. Challenges

Note: if you're submitting remotely, you do not need to complete these but you do need to submit BOTH files you worked on (from Part 1 and Parts 2 - 3).

Make it so that as you move mario from left to right by hitting the keys that he shifts between his different “versions” that we used last week. Go checkout the mario function inside the mario module to see what parameter controls the version. (Hint: you’ll probably need to use a global variable to keep track of which version is being drawn over time).
Alternatively, try and make Mario “jump” when hitting the space bar. That is animate him briefly upward then downward again whenever someone hits the space bar.
Create a two player version where one set of 4 keys controls one mario and another set of 4 keys controls a different mario (or make it a luigi!)
In Project 1, you’ll be doing this same sort of thing but with YOUR custom creature rather than our pre-made Mario and Goombas. If you still have time in your tutorial-hour I highly recommend trying to repeat Parts 1 - 3 but this time replacing all of the “mario” and “goomba” parts of your program with your custom tagged creature from HW 5. This process can be difficult so if you start it in your tutorial you can ask lots of questions!

Extra time?

Start working on Exercise 6!