CS5nm, Fall 2008

ex09: drawing your own figures with PyGame

Goals for this lab

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

This exercise builds on the work you did previously in exercise ex06

Step by Step Instructions

Step 0: Getting Started

Before starting, open IDLE to the usual starting point (Python Shell on the left, window for code on the right), and create an ex09 folder somewhere for storing your files. See previous exercises for detailed instructions.

Step 1: Reviewing the files

Take a look at the web page below:


In this web page, you'll find links to three files:

Not suprisingly, the first two files are ones that can draw houses and snowmen. Each of them, though is a little different from the ones we've seen before. They incorporate the idea of "test cases" that we worked with in ex05 and ex08.

They also use lists and tuples in ways that are a bit new, so we'll go over these in lecture. Using lists and tuples can make our code a bit cleaner and easier to understand. Also, we'll learn how to work with circles.

Both drawHousesWithTests.py and drawSnowMenWithTests.py are incomplete—they contain places where you need to fix some errors, and places where you need to add some test cases. You'll save these files under the names ex09HousesYourName.py and ex09SnowmenYourName.py, and then run them and fix them.

Meanwhile, ex09StartingPoint.py is a starting point for you to use in coming up with routines to draw your own figure. You'll save this file under the name ex09YourName.py, (e.g. ex09MarjoriePotts.py, or ex09LobsangLudd.py) and use it to draw whatever you registered on the forum in GauchoSpace.

The forum in GauchoSpace? Say What?

You shoud have received an email inviting you to sign on to GauchoSpace and register a drawing idea. If not, check your email, or check with your TA and/or instructor during your next lab session. You will need to register your drawing before you can complete the later steps in this exercise.

You don't need to register to get started, but the sooner you register the better, because the sooner you register, the more choices you'll have.

Why can't we just start in on our drawing?

The reason for having you work with the other two files first is to get comfortable with the idea of how they work. They illustrate some techniques that will be helpful in coming up with your own drawings.

Step 2: Working with drawHousesWithTests.py

Copy and Paste drawHousesWithTests.py into your code window, save it to a file called ex09HousesYourName.py (e.g. ex09HousesMollyMichon.py or ex09HousesTheoCrowe.py) inside your ex09 folder.

Then, run the program. You should see some test cases output, and no graphics will appear. It will look like this:

Test makeHouseFrame test 1 passed.
Test makeHouseFrame test 2 passed.
Test makeHouseFrame test 3 passed.
Test makeHouseWindowFrame test 1 passed.
Test makeHouseWindowHoriz test 1 passed.
Test makeHouseWindowHoriz test 2 passed.
Test makeHouseWindowVert test 1 failed: expected [(184, 140), (184, 170)] but I got [(184.0, 160.0), (184.0, 208.0)]

To see the graphics, you'll need to type this in the Python Shell Window (you don't type the >>> part)

>>> draw()

That will be true of all three files we work with this week—you need to type draw() to see the graphics. We've moved the drawing code into a function definition for a function named draw() so that we can call it up only when we want it. That allows us to work with test cases at the Python shell prompt while we are fixing up our program and "getting the bugs out".

If you see the houses, you can see why the one test case is failing—part of this code, the part that draws the vertical line in the window, is definitely wrong. You'll see that problem in the graphics output.

Your tasks in Step 2:

When you are finished with this, you may proceed with Step 3—some code to draw a snowman.

Step 3: Fixing the snowman code

Copy and Paste drawSnowManWithTests.py into your code window, save it to a file called ex09SnowmanYourName.py (e.g. ex09SnowmanMollyMichon.py or ex09SnowmanTheoCrowe.py) inside your ex09 folder.

Then, run the program. You should see some test cases output, and no graphics will appear. It will look like this:

Test makeSnowmanPoints test1 failed: expected (100, 80, 20, 100, 45, 15, 100, 20, 10) but I got (100, 80.0, 20.0, 100, 45.0, 15.0, 100, 35.0, 10.0)

To see the graphics, just like with the previous file, you'll need to type this in the Python Shell Window (you don't type the >>> part)

>>> draw()

If you see the snowmen—or should we call them "persons of snow?"—you can see that there is something "not right". Thus the failure in the one test case.

Here's are two pictures to illustrate what was intended with the snowman. The picture on the left shows the snowman with specific points—these are the ones used in the test case. The picture on the left show the snowman with general points—ones computed "in terms of" x,y,and height—which also happen to be the formal parameters of the makeSnowmanPoints() function. Look at these pictures as you look at the code, and see if you can figure out what went wrong?

Snowman with specific computed points Snowman with general points (formula in terms of x,y,height)

Now, using these diagrams, add another test case that is correct, and fix the formula. When you do, the test cases should pass, and the snowman will appear drawn correctly.

Your tasks in Step 3:

What if there is a small gap between the circles (esp. the blue snowman)?

Even after you fix the routines, there might be a slight gap between the three circles (see illustration below—especially the gap between the head and middle of the blue snowman).

I think this may be a result of the fact that PyGame only allows integers for its circle drawing routines. There may be a way around this—we'll talk later in the course about how to approximate circles with many sided polygons—it may be that we need to use this trick to draw better circles. But you don't need to worry about that for this exercise—if your finished product looks like the picture below, you are done.

Snowmen, with slight gap


When you are finished with this, you may proceed with Step 4—your own drawing!

Step 4: Your own drawing!

Now you are ready to do your own drawing. You may use the techniques from either the houses, or the snowman, or you can combine these techniques.

Register your drawing first

Be sure you register your drawing on GauchoSpace before starting work—that means, simply, tell us what you plan to draw.

Each student must choose something different to draw. If you do the same drawing as someone else in the class, you will not earn any credit for your work—and who gets to draw what is "first come, first served" as determined by the posts on the forum in GauchoSpace.

Getting Started

You may use the file ex09StartingPoint.py as a starting point to work from, or you can use either of the two files from Step 2 or Step 3 (the house or the snowman file).

Save this file to ex09YourName.py, or perhaps even better, something like ex09StarfishYourName.py (if you are drawing a starfish), or ex09SurfboardYourName.py if you are drawing a surfboard, etc. That will help us when grading to know immediately what it is you are trying to draw—though, we hope it will be obvious.

It may be helpful to start with pencil and paper, drawing diagrams similar to the ones we did for the house on the green worksheet (See ex04), or for the Snowman (see images above).

It is perfectly reasonable to combine both sequences of straight lines (like we used in drawHouse()) with circles (like we used in drawSnowman()).

Be sure that you include at least three examples of your drawing (three function calls)

These calls should use different dimensions—that is, your drawing routine should be capable of drawing surfboard of different sizes, or iPods of different sizes, or whatever, as well as different colors.

Want to get fancy?

Although it is not required, you may also experiment with other kinds of drawing routines—you can discover all the possibilities at www.pygame.org. There are routines for arcs, and filled shapes, etc.

But don't go too crazy—when I've given similar assignments in the past, some folks have gotten a bit obsessive, drawing a full scale drawing of the Golden Gate Bridge, for example, down to every last beam and supporting cable. A "cartoon" bridge is more what we are going for—try to avoid going off the deep end. I'm sure you have other classes you need to be doing work for as well!

Some things to keep in mind (to help you finish quicker, and earn a better grade)

Program that uses good programming practices will earn more points than those that don't.

Here are some good practices:

If you use either the house or snowman drawing program as a starting point, be sure that you go through carefully and change any variable names or comments that have to do with houses and snowmen to ones that have to do with your topic!

Be sure, also, to fix any lines that have @@@ on them, and to include a proper header comment at the very top of the file with your name, the date, the purpose of the program, and the filename.

Step 5: Submitting on GauchoSpace

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

Step 5a: One important thing before you submit—add a call to draw() to the bottom of each of your three files

However, we do ask one important thing! Before you submit, add this line to the bottom of each of your three files, with no indentation.


That way, when we double click on your file and run it, it will immediately run all the test cases, and produce your drawing. This will make the grading go much faster for your TA and your instructor—and given that we have to run over 150 programs and check them, we'll definitely appreciate this!

Step 5b: Go over the grading rubric below and the tips above (to maximize your grade)

Towards the end of this web page, there is a grading rubric—that is, a chart showing how much each part of the assignment is worth in terms of points. Your TA and your instructor will use this grading rubric to evalulate your work, so to maximize your grade, you may want to look this over and double check that you have done everything required of you.

Also, in Step 4, there were some "hints" on how to maximize your grade. Review these also before submitting.

If you have any questions, consult your TA or instructor before submitting your work to GauchoSpace for grading

(At some point, I may stop reminding you to do this—I'll expect that you'll remember to do this before you submit because "learning has taken place".)

Step 5c: Submit three files on Gauchospace:

The three files are:

ex09HousesYourName.py, ex09SnowmenYourName.py, ex09YourName.py.

The last one could also be ex09StarfishYourName.py if you are drawing a starfish, ex09SurfboardYourName.py if you are drawing a surfboard, etc.

Of course you know by now that I don't literally want the characters YourName, but rather your actual name. I'll stop reminding you of this now—I think you know by now what I mean when I write that!

Evaluation and Grading (200 pts)

Grading Rubric:

Step Item Points  
2,3,4,5 Naming and submitting your files correctly 15  
2,3,4 Fixing the header comment in each of the three files 15  
2 Adding four tests in ex09HousesYourName.py,
one for makeHouseWindowFrame(),
one for makeHouseWindowVert(),
and two for makeHouseDoor()
2 Fixing the makeHouseWindowVert() function 10  
2 Fixing the makeHouseDoor() function and adding code to call the function 20  
3 Adding a test case for makeSnowmanPoints() 10  
3 Fixing makeSnowmanPoints() so that it operates correctly 10  
Writing your own file  
4 Using good programming practices (as explained in Step 4 instructions):
separating generating points from drawing
having at least two test cases (that pass) where applicable
having header comments on your code
choosing meaningful variables names
4 Drawing is recognizable, and your drawing routine works properly. 20  
4 There are at least three different instances of your drawing,
with different sizes, colors.
2,3,4,5 No left over comments or variables names from old code
(e.g. @@@ comments, or references to houses or snowmen in a file that has nothing to do with houses or snowmen)
5 Having a call to draw() at the bottom of each of your files 10  


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

Ex09 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.