CS8, Fall 2010

lab04: ("lab four")
Programming can be fun and creative


Goals for this lab

This lab is a chance to play and learn at the same time.

Working with your pair, you'll write some functions to make draw simple graphics in Python.

At first, I'll suggest what you should draw.

Then, it will be up to you.

You'll also learn how to put your work on the web so that you can share it with others.

Step by Step Instructions

Step 0: Find your new pair partner.

See the page on Gauchospace that lists new assignments, or ask your TA for your new assignment.

Step 1: Read over the entire lab together

It will really help if you both understand the big picture before moving on.

Step 2: Register what you want to draw on Gauchospace

As you now know, if you've read through the entire lab, later in this lab, you will be writing four functions to draw your own objects—be that a dog, a cat, a baseball diamond, a surfboard, a palm tree—whatever.

The object is that your four functions are unique to your programming pair—no one else in the class is drawing the same thing.

So, to make sure that this is the case, I've set up a discussion board on Gauchospace. Please visit Gauchospace, and look for the discussion board that says "REGISTER LAB04 PAIR PARTNERS AND DRAWINGS HERE".

So, first, discuss between the two of you (or three of you) what you want to draw.

On that board, indicate what you plan to draw for lab04.

Then, make sure that no-one posted any of your four items earlier than you did. If so, they win, and you'll have to choose a different item.

You don't have to register your objects before moving on to step 3—but the sooner you do, the more likely you'll get your first choice of object.

Eventually, you are going to group your four (or six) objects into some kind of picture or scene—so you might want to choose things that will go together in some way. Or you can choose things that don't go together at all, just to make some absurdist art—e.g. a fluffy bunny and an Uzzi, for example, or a surfboard on a pizza. Whatever floats your boat.

Frequently Asked Questions

Can I draw the same thing I drew for lab01? Yes as long as no-one else picked it first on the discussion board.

I posted something, then I changed my mind about what I want to draw. Is that ok? Yes. it is ok to change your mind about what you want to draw, as long as you make a new post on the discussion board, and as long as no-one else is already drawing your new choice.

Step 3: Decide whose account you are going to work in

Note: DO NOT share passwords with each other. That is a violation of your account agreement, and can result in suspension of your computing privileges at UCSB.

Instead, what you should do is:

Remember: you are jointly responsible for your submission.

Although it is only required for one of you to submit the work for grading, each of you is responsible to make sure this gets done—and you are both responsible for the joint submission.

Step 4: Learning how to make simple web pages

In this step, we'll learn how to make a simple web page.

(You'll need to repeat step 4 for both (or all three) pair partners—so that each of you has a web page.)

The first web page we will create will be at the following URL (except it will have your username in place of the words yourusername.)

So the first thing we need to do is create the folder that corresponds to this URL.

http://www.cs.ucsb.edu/~yourusername/cs8/lab04/sample.html

Step 4a: Making the directory for the web page

Bring up a terminal, and use these two commands:

-bash-4.1$ mkdir -p ~/public_html/cs8/lab04
-bash-4.1$ cd ~/public_html/cs8/lab04

The first command is the familiar mkdir command—but with an extra option. The -p option stands for path and indicates that the command should create the entire path—that is, with one command, we'll create:

~/public_html
~/public_html/cs8
~/public_html/cs8/lab04

The second command (cd ~/public_html/cs8/lab04) puts us all the way down there—three directories down—with just one command.

This would be the equivalent of doing all of the following commands—but we did it with just two commands!

-bash-4.1$ cd
-bash-4.1$ mkdir public_html
-bash-4.1$ cd public_html
-bash-4.1$ mkdir cs8
-bash-4.1$ cd cs8
-bash-4.1$ mkdir lab04
-bash-4.1$ cd lab04

Note also, how many mouse clicks it would take to do all of that with clicking in windows—this is a case where the command line definitely saves us effort and time!

Step 4b: Making the HTML code for the web page

To create the HTML code, we need to use some kind of program that allows us to create and edit files.

If you don't already know one of the Unix-based text editors (emacs, vi, or vim), the easiest things to do is just use the editor that is already built into IDLE. That is, we'll just "pretend" we are making a new Python file, but in the end, we'll save it as an HTML file.

This causes a bit of a quirk, as we'll see—since IDLE at first thinks we are writing Python code, it will try to use colors that are appropriate to Python code. Once we save the file with a name that ends in .html, this quirk will go away.

If you already know another Unix text editor—emacs, vi, or vim—you can use one of those. If you are interested in learning one of those, your instructor can point you to resources for learning those—if you are going on to CS16, you'll need to learn that skill eventually anyway.

Open up IDLE (the command, as you may know by now, is ~pconrad/cs8/cs8idle), and go to "New" to create a new window—the kind of window that you would normally use for Python function definitions.

But instead of typing in Python code, type in the following—this is HTML code, the language used for making web pages. Use your name instead of "Jennifer" (and perhaps "he" instead of "she" as needed.)


HTML code for simple web page

Notice that the words is and for come up in orange, and everything after the ' mark comes up in green—until the end of the line. Can you figure out why? (Hint: it has to do with that fact that IDLE thinks you are trying to write Python code)

The next step is to save this as an HTML file. You'll use the normal way of saving, but there is a small change that is crucial to getting your page to save correctly—so follow along with the diagrams below.

First, use the "Save As" option from the File menu:

Save As Option from File Menu in IDLE

Then, in the box that comes up, navigate to the public_html/cs8/lab04 directory.

Navigating to public_html

Navigating to public_html/cs8/lab04 and selecting All Files

Once you are in the public_html/cs8/lab04 directory—pull down the drop box at the bottom where you can select All files (*) instead of Python and text files (*.py,*.pyw,*.txt) as shown above. This is important, because you want to save your file as a .html file instead of as a Python file.

Then, type in the name sample.html as the filename, as shown below:

Putting in sample.html as the name

Once you've saved the file with a name ending in .html, you should see that the special coloring that was intended for Python all goes away as shown below:

sample.html without special coloring

Your file show now be on the web! You can look at the URL shown below to verify this:

http://www.cs.ucsb.edu/~yourusername/cs8/lab04/sample.html

It should look something like this:

What the web page should look like

If you find that the web page doesn't look right, check your HTML code for any mistakes. Here's a quick guide to how HTML code works:

What if I get "Forbidden"?

If you get a window like this when you try to look at your web page, it may have to do with file permissions. To fix the problem, you'll need to type these Unix commands:

-bash-4.1$ chmod 711 ~
-bash-4.1$ chmod -R 755 ~/public_html

These chmod commands use octal numbers to change the permission modes of files and directories

By permissions, we mean "who is allowed to see the files".

The details of how file permissions work—and how those connect to octal numbers—are explained on the following web page which you may like to explore another time.

http://www.cs.ucsb.edu/~pconrad/cs16/topics/chmodQuiz1/

For now, we need to move on though, because there's lots more to do on today's lab!

Repeat Step 4 for the other pair partner(s) in your group before moving on.

When you've done that, move on to step 5.

Step 5: Create a directory for lab04, and bring up a new IDLE window

Create a ~/cs8/lab04 directory. If you've forgotten how, consult lab03.

Note that ~/cs8/lab04 is NOT the same as the ~/public_html/cs8/lab04 directory!

It will be crucial to note the difference in this lab!

Open IDLE, bring up the New Window, save the file under as lab04a.py under ~/cs8/lab04

Start by putting a header comment at the top, with your names, date, the name of the assignment, and a one line description of what the file is for.

The one line description can be something like

# names of pair partners, date, assignment

# A bunch of functions to draw cool pictures

Now proceed with Step 6.

Step 6. Surprise: no starting point file!

This week, you are starting from scratch. You may, however borrow at will from your previous lab submissions. Your submissions for lab01 and lab03 may be very useful places to borrow from.

Be sure that when you write function definitions, you include header comments above each function definition.

Eventually, we'll talk about some general guidelines for these—but for now, follow the examples in lab03. Note what each function has in front of it, and see if you can work out the pattern. You'll be graded in part on these comments in front of your functions, so be sure to spend some time getting them just right.

Ok, that wasn't really a step. The next one is though.

Step 7: Create a function that can draw a circle of any radius, at any point

Call your function drawCircleAtXY. The parameters should be:

This one is easy. It is actually a "special case" of drawPolygonAtXY from lab03. Just draw a 100 sided polygon, and it will pretty much look like a circle.

drawPolygonAtXY(t,r,360,x,y)

So, I sort of did that one for you, though you still have to make the function definition. You should also make a testDrawCircleAtXY() function, modeled after the ones in lab03 for testing drawPolygonAtXY and drawStarAtXY. Choose where to put some circles. You might want to put them all in a certain quadrant (say, the first quadrant) to leave room for other stuff we are going to draw.

Yes, I know: cTurtle already has a function to draw a circle.

Darn it—we were supposed to keep that a secret—because:

But you all discovered it on your own, so the cat was out of the bag. Anyway—humor me, and pretend you didn't know about the fred.circle() function

My Turtle is too slow!

You can speed up your Turtle by doing the following—right after you create Mary or Fred, use Mary.speed(0)—that's the fastest speed possible. You can also vary the speed between 1 (very slow) and 10 (reasonably fast).

Why did the programmers that created cTurtle choose 1 to be slow, 10 to be fast, and 0 to be the "fastest speed possible"? I don't know. They just did.

Step 8. Create a function definition to draw a snowman.

Now that you can draw a circle, write a function definition that can draw a snowman of any height, at any place in the x,y plane.

Your function should take four parameters:

The snowman you draw should be three circles on top of each other, with the bottom circle being the largest, the top circle being the smallest, and the middle circle in between the other two. Use the following proportions:

Adding "a corncob pipe, a button nose, and two eyes made out of coal" is optional.

If you have a test function like this one:

def testDrawSnowman():
# create a turtle
frosty = cTurtle.Turtle("turtle")
drawSnowman(frosty, 100, 50, 40)
drawSnowman(frosty, 150, 150, 40)
Your output should look something like this (plus or minus a corn cob pipe or two).

testSnowman output

 

Step 9: A new house drawing function

In lab01, you made a function to draw a house using "absolute positioning"—the house was drawn wherever the turtle happened to be. Depending on which way the turtle was facing, we'd get a house tilted one way or another.

In this lab, we are going to try a different approach. Instead of drawing the house wherever the turtle happens to be, we are going to specify exactly where we want the house to be, and exactly how wide and how tall.

In our function call to drawHouse, we'll specify:

So, the first line of the function definition should be:

def drawHouse(t,w,h,x,y):
Based on those formal parameter names, here's what the house should be like. We can see that there are five points on the house, and once we know the x and y coordinates of those points, we can just draw the house using t.goto() statements. I've filled in three of the five points for you—the other two are left for you as an exercise.

House Points Labelled

As an hint to what your house drawing function might look like, here's a function that draws a simple square using absolute positioning:

def drawSquare(t,w,x,y):

   
    # pick up the pen, move to the starting point, and put the pen down
    t.up()
    t.goto(x ,    y )
    t.down()
# draw all four lines, then pick the pen back up t.goto(x + w, y ) t.goto(x + w, y + w ) t.goto(x , y + w ) t.goto(x , y) t.up()

Here's a test function, and the output. Note how we use a for loop with the range() function to draw several different squares of different sizes, at different x coordinates (keeping y=0 for all of them)

def testDrawSquare():
bob = cTurtle.Turtle("turtle")
for i in range(1,5):
drawSquare(bob, i*10, i*50, 0 )

testDrawSquare

So with that example, try now writing a function to draw a house. Here's a test function, and some sample output. Again, note the use of the for loop to try out different values for the height and width parameters:

def testDrawHouse():
bob = cTurtle.Turtle("turtle")
houseWidth = 20
houseHeight = 30
for i in range(0,200,50):
drawHouse(bob,houseWidth,houseHeight,i,0)
houseWidth = houseWidth+10
houseHeight = houseHeight+15

testDrawHouse output

Step 10: An overall test function—and some more cool tricks

Next, make a function that runs all of your tests so far, namely:

def testDrawings():
   testDrawSnowman()
   testDrawHouse()
   testDrawSquare()

Note that in order to be able to see if all these tests work, you may need to "plan out" your use of the space in which your Turtle works—that is, you don't want any of your drawings to overlap each other, so you may need to plan for:

Later on, the screen is going to get even more crowded, and planning will be a must!

Did you say cool tricks?

Now that we can draw lines, circles, polygons and stars, and we see that we can use loops to make repeated drawings, what's left?

Well, lots! Fills, and colors, just to name two:

In the cTurtle module, if you call t.begin_fill() before you start drawing, and t.end_fill() when you are finished, anything you draw in between gets filled in.

With that in mind, we can generalize the square function so that we can draw squares that are either filled in or not. The final parameter fill will be a boolean value—either True or False—that indicates whether we want to fill in the square or not.
def drawSquare(t,w,x,y,fill):

    
    # pick up the pen, move to the starting point, and put the pen down
    t.up()
    t.goto(x ,    y )
    t.down()

  
    if (fill):
      t.begin_fill()

   
# draw all four lines, then pick the pen back up t.goto(x + w, y ) t.goto(x + w, y + w ) t.goto(x , y + w ) t.goto(x , y) t.up() if (fill): t.end_fill()

Here's what that looks like when we call it with a modified version of testDrawSquare()

testDrawSquareWithFills

Two things to notice in the output, and in the new version of the testDrawSquare function (which appears below).

def testDrawSquare():
    bob = cTurtle.Turtle("turtle")
    bob.color("red","blue")
    for i in range(1,5):
        drawSquare(bob, i*10, i*50, 0 , i%2==0)

You are encouraged to play around with the colors—see what colors cTurtle knows about. The book indicates that "most reasonable color names are recognized". (Green? Grey? Purple? Pink? Aqua? Olive? Khaki? Chartreuse?)

You can also come up with exotic colors by using a different form of the t.color() function that takes six numbers: t.color(r1,g1,b1,r2,g2,b2). Read about this on p. 480 of your textbook. Note that you may need to call t.colormode() first in order to know for sure what the interpretation of the numbers will be.

Step 11: Putting your Turtle's creations on the web

It is nice to be able to share our work with others. So, we'd like to be able to take our Turtle's creations, and put them on the web so others can see them.

So, when you are running IDLE via the ~pconrad/cs8/cs8idle command, in addition to doing import cTurtle at the top of your file, you can also put import turtle2web and you'll get access to an additional function that allows you put your drawings online.

Note: This step is an experiment. The code to put cTurtle creations on the web didn't come with Python or the textbook, but is a "hack" by Prof. Conrad.

By "hack",we mean a solution that while it "gets the job done", isn't as "robust" as we might hope for—that means it might break in unexpected ways—and it hasn't been as thoroughly tested as most of the other stuff we are doing with Python. So, please try it out, but if you run into problems, be patient as we try to work those out.

We tested it for the first time during Summer 2010, and it seemed to work fine&emdash;but it is still possible that some bugs may exist.

Also, please note that this will ONLY WORK IF YOU ARE RUNNING IDLE WITH ~pconrad/cs8/cs8idle
it will not work if you are running in your own private copy of Python/IDLE.

Even if you copy the turtle2web.py file to your PC or Mac (the way you copied cTurtle.py), it still won't work.

So do this part on the systems in CSIL or Cooperóor if you need to do it from your own computer:

How to do it

Suppose you have a function that draws somethingólet's say for example, the testDrawings() function from Step 10, and you want your drawing to appear on the web.

First, to the top of your file, right after the import cTurtle, add this line of code:

import turtle2web

Before doing anything else, save your code and run your code again to make sure that nothing breaks.

Then, if that's ok, try adding this line inside your testDrawings() function:

  turtle2web.saveIt("cs8/lab04","testDrawings")

Here's what that would look like:

def testDrawings():
   testDrawSnowman()
   testDrawHouse()
   testDrawSquare()
   turtle2web.saveIt("cs8/lab04","testDrawings")

 

When you run the command, it should look like this:

>>> ================================ RESTART ================================
>>> 
>>> testDrawings()
Visit: http://www.cs.ucsb.edu/~pconrad/cs8/lab04/testDrawings.jpg
>>> 

If you copy that web address (URL) into your web browser, you should see a picture of everything your turtle(s) drew drew on your screen. Unlike the Turtle window itself, though, this is an image file that will stay on the web until you delete it or write a new picture over the top of it.

This will allow us to make an image gallery of all the cool pictures that you draw in this class.

Again—a reminder that this ONLY works if you run IDLE using the ~pconrad/cs8/cs8idle command—the turtle2web module is not a standard part of Python.

Why can't I just copy turtle2web.py to my own PC or Mac?

Even if you copy the turtle2web.py file to your PC or Mac (the way you copied cTurtle.py), it still won't work. Here's why:

The turtle2web module needs direct access to your public_html directory—which it has when you are working in CSIL or Cooper, but not if you are running on your own machine.

 

Step 12: Enough playing around—time for you to get creative with your own drawings!

Now is the time when, if you haven't yet chosen your four (or six) objects, you need to do it.

Because your next step is to make functions that can draw those objects.

What you draw is up to you, though there are some ground rules:

What are you waiting for? Get started!

When you've got four objects, and a test function for each, you are ready to start finishing up this lab. There are just a few more steps.

Step 13: Updating the testDrawings function

Your TA will run two functions to test your program, the first of which is called testDrawings().

We already started writing that function in Step 10—but now we need to update that function for our new creations, and to put our stuff on the web.

Find the testDrawings() function and add to it the functions that you used to test your new drawings:

def testDrawings():
testDrawSnowman() testDrawHouse() testDrawIPod() testDrawSkateboard() testDrawSurfboard() testDrawBasketball()
turtle2web.saveIt("cs8/lab04","testDrawings")

What your TA should see in this case is a collection of snowMen, Houses, iPods, skateboards, surfboards, and basketballs, of different sizes, with none of them overlapping.

This might mean some adustment to some of the function calls inside those functions to move things around. Sine you've got more than four things now, its' not enough to divide up into the four quadrants—you may need to make some more careful divisions inside those quadrants as well.

You should also be able to see your creation on the web now.

Please note: the username in the URL will be that of whoever the driver is at the time you run your code. To make sure that the URLs appear under both accounts, please run your final program under both pair partners (or all three pair partners) accounts to ensure that the images appear in both (or all three) places on the web.

Step 14: Making a go() function, and putting your go() functions' output online.

The final function, the go() function, is the one where you get to be the most creative. Find a way to put your four (or six) objects together into some kind of interesting scene. You can also use words on your drawing (see. p. 476 in the textbook) and you can incorporate additional objects (you aren't limited to just the four required ones).

The go() function should also put its output on the web—for this one, use the function call:

turtle2web.saveIt("cs8/lab04","go")

That way, everyone in the class should have a file:

http://www.cs.ucsb.edu/~username/cs8/lab04/go.jpg

and we'll be able to just browse through all of those files to see everyone's creativity.

Note: if you are doing part of this lab on your own Mac or PC, you can comment out the turtle2web stuff while you work offline, like this:

# import turtle2web
...
# turtle2web.saveIt(bob,"cs8/lab04","go")

When you have a test() function and a go() function, and everything is on the web (under both, or all three accounts) you are ready to submit!

Note: The snowman and the house functions don't need to be demonstrated in your test() and go() functions. The TA can test those separately.

Step 15: Check over your program to see if it is ready to submit

Before you submit your assignment, check these things:

Step 16 : Submit your assignment using the turnin program on CSIL

To submit your assignment, you need to bring up a terminal window on CSIL.

 


Evaluation and Grading Rubric (300 pts)

Points Item Steps
10 Naming the file lab04.py and having a comment at the top of the file that complies with the instructions  
10 Correct drawSnowman() and testDrawSnowman() functions  
10 Correct drawHouse() and testDrawHouse() functions  
60 Four (or six*) functions that draw particular figures of your own choosing.
To get full credit, these MUST
  • be registered on the Gauchospace "Register your lab04 pair partners and drawings here" forum
  • be different items from those being drawn by every other student
    (you can verify that by looking at the other drawings on the forum)

Note that it is ok to change your mind about what you said your were going to draw—if you registered "schematic diagram of the Death Star from Star Wars IV" and then changed your mind and decided to draw a "USB thumb drive" instead, that's fine. Just be sure to update your post!

*You need four functions if you are in a pair, six if you are working in a group of three.

 
60 Four (or six*) test functions that go along with the drawing functions  
20 A testDrawings() function that calls the testDrawSnowman(), testDrawHouse, and the four (or six*) test functions for your drawings.  
25 a go() function that combines the four (or six*) drawings into some kind of "scene"  
15 Removing all irrelevant comments (e.g. the @@@ ones, or ones that go with the original source of copied/pasted code from other examples) from your final submission  
15 Good comments for each of your functions, both right before each function to explain what it does, and inside the functions (to introduce what each part of the code is doing.)  
15 Submitting on time and according to instructions.  
60

Following the instructions necessary to put your sample web pages and your drawing creations on the web at both (or all three*) of the websites for the members of the pair (or group of three).

Those websites should be as follows (but with your username in place of username)

http://www.cs.ucsb.edu/~username/cs8/lab04/sample.html
http://www.cs.ucsb.edu/~username/cs8/lab04/testDrawings.jpg
http://www.cs.ucsb.edu/~username/cs8/lab04/go.jpg

For pairs: 3 web pages x 10 pts each x 2 people = 60 pts

For groups of 3: 6 pts for sample.html, 7pts for go.jpg and 7 pts for testDrawings.jpg
That's 20 pts per person x 3 people = 60 pts.

 
???    

 

Due Date: Wednesday, October 27, 5pm.

But: you are encouraged to finish it sooner!
In particular, you are encouraged to finish it before your lab next week, i.e. by midnight on Thursday October 21. You will have another lab next week, and it is important not to fall behind.

We will accept lab04 "late" (with a 30 point penalty) from 5:01pm on 10/27 through 11:59pm on Monday 11/01---after that, we will assign a zero if it is not turned in.


Copyright 2010, 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.