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.
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).
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 doesn't matter that much in this case, as long as you are consistent and remember which way you named it.
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.
Run Modulefrom the
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:
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 >>>
In this step, we'll modify the code so that instead of just three houses, there are five houses.
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.)
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
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
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:
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.
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".)
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.
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".
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.