Submitting

Regardless of how you choose to complete the assignment, you MUST submit the file you worked on to Canvas. You can complete the assignment by: 1. Doing it on your own and submitting it to be graded; 2. Coming to class on Wednesday and working on it in your tutorial team; 3. attending one of our alternate tutorial times (see OH schedule - the second tab that says “Alternate Tutorial Times”).

IF YOU ARE SUBMITTING REMOTELY

If you’re submitting remotely, your submitted file will be graded for completeness and correctness via an autograder. Make sure your functions are named as the assignment specifies exactly.

IF YOU ARE IN CLASS OR AT AN ALT TUTORIAL

Remember the Alternative Tutorial Schedule (these are hosted throughout the day on Tuesday and Wednesdays) is available on the Office Hours Spreadsheet on the tab labeled “Alternative Tutorials.”

Then your file will be graded for participation (i.e. it’s okay if you haven’t finished the entire thing because you may have spent time asking a question; helping a friend; etc.) along with what we call a ‘peer review.’ Find one other person in your group that is finished and peer review each other’s work. Here are the things to check:

  1. Does their code look readable and neat?
  2. Can you understand what their code does by reading it?
  3. How was their solution different from yours (if at all)?
  4. Does their program run and generate the correct results?

Once you’ve debriefed, both of you should fill out this attendance Google Form. NOTE: You will need the NetID of the person's whose code you reviewed. This form will only be available near the end of the tutorial session.

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
  1. If you downloaded cs110_p1 prior to 4pm on Monday Feb 17, you'll need to download the new version and replace your old version.
  2. Next, download the above .py file and place it in your project folder in the same place as file from the previous step.
  3. Open it in IDLE and run it like normal. You'll see a grid appear (16 x 16).
  4. 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.).
  5. 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).
  6. 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:

  1. First, add a call to setup_listener 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.
  2. 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!).
  3. Now run your program again, and notice that your add_new_goomba function is invoked when you click the screen.
  4. Now setup ANOTHER listener that listens for a drag event (checkout the documentation for setup_listener) and also calls the add_new_goomba function.
  5. 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:

  1. When the user presses the w-key, move one of the marios up 10 pixels.
  2. When the user presses the a-key, move one of the marios left 10 pixels.
  3. When the user presses the d-key, move one of the marios right 10 pixels.
  4. 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:

  1. Create a global variable called active_tag and initialize it to "mario_0".
  2. Update your move_mario function so that instead of always moving "mario_0", you reference the active_tag variable instead.
  3. 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).
  4. 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).

Extra time?

Start working on Exercise 6!