Title

Goals for today's lab

Today, you will learn how to write simple programs that rely upon user input and also how to use various shapes, colors, images and depths to build creative scenes like the ones shown below.

What we'll cover today:

  1. Downloading files from the cs server (via Fetch/WinSCP)
  2. Creating, saving and running Python files (Canopy)
  3. Asking for user input and printing to Canopy's interaction pane
  4. Experimenting with cs1graphics (Python)
  5. Uploading your lab work to the cs server (via Fetch/WinSCP)
Some useful links:

Set up for lab: Folders, Files and Canopy

We will connect to the CS server (cs.wellesley.edu) to download the folder that we need for today's lab. In lab, we'll use Fetch on the Macs, but there is an equivalent program called WinSCP for PCs.
  1. Use Mac's spotlight to find Fetch and start it
  2. Fetch will open this window

    Type in the name of the server (you can shorten it to cs when on campus), and your username (usually first initial and first 7 letters of last name) and your password. Your password will be the one you supplied in the account request form (if you forgot your password, email cs-sysadmin and ask them to reset it for you). Make sure you are connecting using SFTP (indicated by the second red oval above).
  3. If you login successfully, you will see this window:
  4. Double click on the cs111 folder to open it, and then on the download folder. This is where we will place programs for you to access.
  5. Drag a copy of the lab1_programs folder onto your desktop. Rename the folder from lab1_programs to yourname_lab1_programs. Each time you download a folder, change the name to reflect that it is yours.
    OLD NEW
  6. Look inside the folder and inspect the contents.

Let's start Canopy

Ok, time to write some python code! Let's get Canopy started (we will always use Canopy to write and run our code this semester). Use the spotlight to find Canopy (installed on all campus machines, and freely downloadable -- see Reference page).


Click on the Editor button, and then in the window that pops open, click on the "Create a new file" button. This will produce the window below. This is where you'll write your code.

  • Change your working directory to be, for today, your newly renamed lab1_programs folder. Click on the little arrow circled in purple and navigate to your lab1_programs folder. In general, you will have your relevant files in one folder on your Desktop, and you will set your working directory to be that folder.
  • You can type in the interactive python pane at the bottom to test things out
  • You can write your own python programs in the main window. Start out with comments, indicating your name, the date, and the contents of this file.
    # Oprah Winfrey
    # CS111, Lab 1
    # September 2, 2015
    # lab1.py
  • Save the file as lab1.py in your lab1_programs folder on your Desktop (either File > Save or click on the little disc icon)
  • You can run your file (nothing will happen just yet, but it's good to know how to run things). To run a python program, click on the green arrow, or Run > Run File or Command-R.

Part 1: Getting user input and printing in the interaction pane

In your file lab1.py, write some Python code that will run and produce output similar to that shown below. The yellow boxes represent Canopy's interaction pane. The user input is shown in blue bold italics.

Task 1a: Asking for a name

What is your name?  Hermione 
                                                                                                            Hi Hermione!
                                                                                                        

Task 1b: Printing length of name

What is your name?  Hermione 
                                                                                                                Hermione, your name contains 8 letters.
                                                                                                            

Task 1c: Asking for a favorite number

What is your favorite number?  5
                                                                                                                    Your fave number is 5!
                                                                                                                

Task 1d: Asking for both name and number and printing the name number times

The interaction pane would look like this:
What is your name?   Hermione 
                                                                                                                        What is your favorite number? 2
                                                                                                                        HermioneHermione
                                                                                                                    
Another run:
What is your name?   Voldemort
                                                                                                                        What is your favorite number?  6
                                                                                                                        VoldemortVoldemortVoldemortVoldemortVoldemortVoldemort
                                                                                                                    

Task 1e: Ranking ice cream flavors

In this task, the user provides their name, and then ranks three flavors. Then, your program will produce a line of stars reflecting the number entered for each flavor. Below are two sample runs of our ice cream ranking program:
What is your name?   Ron
                                                                                                                            Rate strawberry on a scale of 1-10:  10
                                                                                                                            Rate vanilla on a scale of 1-10:  2
                                                                                                                            Rate chocolate on a scale of 1-10:  5

                                                                                                                            Flavor ratings for Ron:
                                                                                                                            Strawberry: **********
                                                                                                                            Vanilla: **
                                                                                                                            Chocolate: *****

                                                                                                                        

What is your name?   Fred
                                                                                                                                Rate strawberry on a scale of 1-10:  4
                                                                                                                                Rate vanilla on a scale of 1-10:  8
                                                                                                                                Rate chocolate on a scale of 1-10:  1

                                                                                                                                Flavor ratings for Fred:
                                                                                                                                Strawberry: ****
                                                                                                                                Vanilla: ********
                                                                                                                                Chocolate: *

                                                                                                                            

Task 1f: Ranking ice cream flavors (with cleaner output)

In this task, the printing of the flavor rankings is aligned so that all the semicolons line up vertically. This makes it easier to see how the ice cream flavors stack up against each other. The only difference in output is that the flavors would print like this:
                                                                                                                                    Flavor ratings for Fred:
                                                                                                                                    Strawberry: ****
                                                                                                                                    Vanilla: ********
                                                                                                                                    Chocolate: *

                                                                                                                                

Part 2: Creating graphic scenes with cs1graphics

Create a new file called lab1_graphics.py, still within your lab1_programs folder.

Some sample scenes using cs1graphics


Task 2: Canvas and cs1graphics

Task 3: Drawing on the canvas

A Canvas is a place to draw. Here is how we make one in python (using cs1graphics):

Canvas()
Even better, give your canvas a name so you can add things to it later:
paper = Canvas()
[note: Canvas has a capital C, and is followed by parentheses]

Let's make Harry Potter Robot's rectangular face, using Rectangle from the cs1graphics package. Note that the cs1graphics.py file is in your lab1_programs folder, so your code can access that file via the import statement in your lab1.py program.

face = Rectangle() # not the face we want
face = Rectangle(250,300,Point(250,250)) # better
Make your face a different color. cs1graphics provides many colors (and later, you'll learn how to make your own colors). For now, you can use this color reference chart (generated in python!).

How to add something to your canvas:

  1. Create the object (Circle, Rectangle, etc)
  2. Name it (good idea so can refer to it later) by using the assignment operator (=)
  3. Add to your canvas
  4. Manipulate your shape (moveTo(),move(),setFillColor(),setBorderColor(),, etc)
Question: can you change the properties (e.g. color) after adding the shape to the canvas? Experiment to find out!

Below are some details on how to make the Harry Potter Robot face. Note that each shape has a center point (indicated by the green push pin). Think of that center point as a thumb tack, pinning the shape to the canvas. This will come in handy later when we learn how to rotate, scale and flip these shapes.

Some useful shapes:

Circle(radius, centerPoint)
Ellipse(width,height,centerPoint)
Rectangle(width, height, centerPoint)
Polygon(Point(x1,y1),Point(x2,y2), ... Point(xn,yn))
Path(Point(x1,y1),Point(x2,y2), ... Point(xn,yn))
Figure 3.4 in the Goldwasser and Letcher reading is useful when looking for how to manipulate shapes in cs1graphics.
Step 1: Eyeballs
Start with the left eyeball:
  • Center Point at (200,200) (default Circle center point is (0,0))
  • Radius is 25 (default radius is 10)
  • Color is blue
The right eye is quite similar. Make one to match the left eyeball.
Step 2: Nose

The three coordinate points are shown at right. Color Harry's nose any color you like.

Step 3: Mouth (rectangular)
Add an interior color to your mouth, and also change the thickness of the border of the mouth. Optional: add teeth (or fangs).
Step 4: Scar
The bolt shown at right has 4 points: you can make your own lightning bolt using these are a rough guideline.
Step 5: Text
You may choose your own text and color

A note about Harry's hair

Harry's hair is a Polygon with lots of points in it (to get the pointy bangs). Then, an ellipse is stuck on top of Harry's head to round it out. The ellipse is behind the face so that only the top shows (the figure at right shows the ellipse on top of the bangs for illustration purposes only). Both the ellipse and Harry's hair have the same color border as interior.
To generate a list of points like those used for the hair, we suggest that you use the only image editor Pixlr (you may also use Photoshop or similar graphics-editing software to glean the coordinates).

Your task: Add some hair to Harry's head. It can be very simple hair (and any color), but Harry does not like to be bald.

A little aside about Pixlr

Pixlr makes it easy to figure out coordinates by just opening a new tab in your browser.
  1. Drag the Harry Potter Robot hair image from the lab web age to your Desktop
  2. Click Pixlr to open Pixlr in a new tab
  3. Select "Open image from Computer" and navigate to the harry potter hair image
  4. Select the pointer on the toolbar.
  5. As you move your mouse (green circle in harry's hair), the X and Y coordinates (circled in green) are shown n the navigator window in the upper right corner of Pixlr.

Task 4: Experiment a bit, run your code, experiment a bit, run your code...

Images

The cs1graphics package allows you to incorporate images into your drawing. You'll need to place any images that you use in your lab1 folder. The cs1graphics package handles gif images best. Images are most smoothly incorporated when they have a transparent background. You can download images from the web, or can create your own. We've supplied a couple of transparent gif images for you to experiment with in your lab1_programs folder.

# the bubble.gif image must be in same folder as your python code
bubble = Image('bubble.gif')
bubble.moveTo(120,150) # move the bubble to a suitable position

Add glasses to Harry's face

The file glasses.gif is in your lab1_programs folder.


Depth

Experiment more with depth on your canvas. The default depth of objects is 50. Things with shorter depth, e.g. 30 are closer to the viewer, whereas longer depths, e.g. 100 are farther away (or behind other objects). Let's take a look at Grover's thought bubble:
This image clip has three separate parts, controlled by using depth (setDepth()):
  • the pale blue background is the background color of the original canvas
  • the thought bubble is a gif Image
  • the text "My name is Grover!" is on top of the bubble image
Add your own thought bubble to your Harry Potter robot drawing, and add your own text inside it. Note that there are two thought bubble graphics in your lab1_programs folder. We'd recommend the smaller one for the Harry Potter robot drawing (later, we'll learn how to scale images).

Task 5: Saving your work on the cs server

At the end of lab today (and every subsequent lab), you will save your work to your own personal account on the cs server. You will use Fetch to connect to cs.wellesley.edu, just as we did at the start of today's lab.

Type in your username and password and connect to the cs server. You will see this window:

Once you are successfully logged into your account, click on the cs111 folder in your account (circled above in red). Drop your lab1_programs folder into the Fetch window. Now it will be stored in your account in your cs111 folder. After you drag and drop your lab1_programs folder into the cs111 folder, it will look like this:

Now a copy of your code is safely stored in your account on the cs server (and you can access it via Fetch from any computer on campus). Note that when you turn in problem sets or exams to be graded, those will be dropped in the drop folder in your account (your_username/cs111/drop/).
For your final step, drag the lab1_programs folder from the Desktop into the Trash, then empty the Trash (Finder > Empty Trash), and then log yourself out.