CS5nm, Fall 2008

ex06: drawing simple figures with PyGame

Goals for this lab

By the time you have completed this lab, you should be able to

This exercise is preparation for a future exercise, in which you will make your own drawing function.

Step by Step Instructions

Step 0: Getting Started

Step 0a: Open IDLE to the usual starting point

See lab01, step 3, and ex05 step 0 for instructions on bringing up IDLE to the "usual starting point" (Python Shell on the left, window for code on the right).

Step 0b: Create a CS5NM/ex06 folder

Find your CS5NM folder—on your Desktop, or in your Documents folder, or on your N:\ drive—wherever you created it. If you didn't create one yet, now would be a good time to do so. It is a good habit to have "one place" where you store all your work for this class (at least one place on each computer where you do your work).

Create a folder inside your CS5NM folder called ex06. We'll store all your files for this exercise in that folder. That will make things a lot easier.

Whether you call your folder CS5NM or cs5nm doesn't matter that much in this case, as long as you are consistent and remember which way you named it.

Step 1: Loading the "drawHousesWithFunctions.py" program

Load the Python program below into your code window, save it to a file called ex06ChrisHatworthy.py inside your CS5NM/ex06 folder—except don't use ChrisHatworthy, use your name, e.g.

Here's where to get the code:


Then, run the program.

If you are in the Mesa lab, or if you have correctly installed PyGame on your computer, you should see houses appear in a window on your screen!

If so, proceed to step 2:

What if I get an error message:

If you get the following error message, then it means PyGame is not correctly installed on your computer. Instructions on what to do appear below.

 Traceback (most recent call last):
 File "/Users/pconrad/cs5nm/ex06/drawHousesWithFunctions.py", line 7, in <module>
 import pygame
 ImportError: No module named pygame

If PyGame is not installed on your computer

  1. If you are working on your own computer, you have two options:
  2. If you are working in the Mesa lab run by Instructional Computing (or Rincon, Leadbetter or Gaviota), then the software should be installed there properly. Be sure that you followed the instructions precisely, and make sure the error message is not something different from the one shown above. If you are still having trouble, then contact your instructor for help.

Step 2: Add a few houses

In this step, we'll modify the code so that instead of just three houses, there are five houses.

Step 2a: Change the comment at the top

At the top of the file is a comment that looks like this:

# drawHousesWithFunctions.py   Draw some houses on the screen (using functions)
# P. Conrad for CS5nm, 10/06/2008

Change it to look like this (use your name instead of Chris Hatworthy, and today's date in place of 10/09/2008)

# ex06ChrisHatworthy.py   Draw some houses on the screen (using functions)
# Chris Hatworty for CS5nm, 10/09/2008, ex06

# Based in part, on drawHousesWithFunctions.py, code by P. Conrad, 10/06/2008. 

Note that this gives credit both to the original author (in this case, P. Conrad) and to yourself. The finished product will be a combination of the efforts of both P. Conrad, and you.

Note: From now on, you should always do that in this course whenever you make changes to a file and submit it. This is an important part of documenting your program, and is one of the things you'll be graded on, so try to remember this. (For a while, I'll remind you, but after a few exercises, I'll expect you to have learned to do this without a reminder.)

Step 2b: Add some functions calls to make a whole neighborhood.

In lecture, and in your readings in the textbook, we've been talking about the difference between a function call, and a function definition.

So, by now, you should be able to locate the function calls to drawHouse(). You'll see that there are three of them.

Change the file so that there are at least five houses in all (more if you like.) Some rules (you'll be graded on these):

Use at least one color that isn't defined yet. To do that, you'll need need to add new variables and assignments statements for those colors, next to where red, green, white and blue are defined. Remember the colors are a 3-tuple of (red, green, blue), where each of those numbers is an integer between 0 and 255.

When you have a nice looking neighborhood of at least five houses, you can go on to step 3

Step 3: Adding a window to the houses

In this step, we want to make a change. We will add a window to each of the houses, so each one, looks like this:

House with and without window

We'll make the following assumptions:

We'll set up a set of assignments statements to help us make the points easier. We add these at the end of the function defintion for drawHouse. Note that they MUST be indented at the same level as the other statements in the body of the drawHouse function to be considered part of that function definition.

   # define some points for the window
   winLeft = x + 0.5 * width
   winRight = x + 0.9 * width
   winTop = y - 0.4 * height
   winBot = y - 0.2 * height
   winMidVert = x + 0.7 * width    # vertical midpoint line passes through here
   winMidHoriz = y - 0.3 * height

Now we add some more Python statements to do the drawing. In each case, we have first an assignment statment that sets up a list of points. Then we have a function call to pygame.draw.lines()that draws some lines. I've left some "blanks" (_____) in the last pair of statements, that you need to fill in yourself. If you cut and paste in this code, be sure to take out all the underscores (the ____ characters) after you fill in the correct answers!

  # third parameter to pygame.draw.lines is True, meaning here that
  #   means we connect the last point back to the first

winOutsidePoints = [ (winLeft, winBot), (winRight, winBot), (winRight, winTop), (winLeft, winTop)] pygame.draw.lines(screen, color, True, winOutsidePoints, lineThickness

# False here for third parameter means DON'T connect last point back to first

winVertLine = [ (winMidVert, winTop), (winMidVert, winBot) ] pygame.draw.lines(screen, color, False, winVertLine, lineThickness

winHorizLine = [ ________________________________________________ ] pygame.draw.lines(screen, color, False, _______, lineThickness)

When you've filled in the code, try running. Note the magic of programming with functions: you add your code in one place (the function definition) and all of the house get the new window!

When you are done with this step, try a more challenging exercise: step 4.

Step 4: Adding a door to the houses

In this step, we want to add a door to the house, so that it looks something like this (this is just an approximation—don't worry about matching this "pixel for pixel".)

House before and after adding a door

You are on your own here!

Look at what we did to add a window to the houses—how we approached the problem, step by step. Follow a similar plan of attack for making your door.

You'll be adding some more lines of code to the end of the function definition for drawHouse().

When you are done your neighborhood should have houses with windows and doors—and you are finished with this exercise! All that is left, is to submit for grading.

Step 5: Submitting on GauchoSpace

This week, you do not need to make a transcript file. To grade your program, we'll run it ourselves, and see what the output looks like.

Submit the files ex6YourName.py on GauchoSpace as your submission for Exercise ex06.

Then you are finished with this exercise!

If you want to try something more, think about writing another function, something like:

You might need "circles" as well as lines. We'll talk about how to draw those in a future lecture or exercise.

Or you can use Google to look up "PyGame draw circle".

Evaluation and Grading (100 pts)

Due Date: 10/22/2008 (5pm)

Ex06 is due Wednesday 10/22 at 5pm. You should try to complete as much of this as you can before your next lab, so that if you have questions or problems, you can ask about them during lab. You can also get help during office hours. See the course website, http://www.cs.ucsb.edu/~pconrad/cs5nm for information on scheduled office hours.

Copyright 2008, Phillip T. Conrad, CS Dept, UC Santa Barbara. Permission to copy for non-commercial, non-profit, educational purposes granted, provided appropriate credit is given; all other rights reserved.