Lab 1.

Goals for today's lab

What we'll cover today:

1. Downloading files from the cs server (via Fetch/WinSCP)
2. Creating, saving and running Python files (Canopy)
3. Experimenting with cs1graphics (Python)
4. Uploading your lab work to the cs server (via Fetch/WinSCP)

Some sample scenes coded in Python using cs1graphics

	by Rachel Seo and Sheree Liu
	by Sian Carr & Julia O'Donnell
by Helen Huang & Cece Tsui
by Evelyn Taylor-McGregor, Some Louis & Nour Azzouz

Task 1: Folders and Files

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.

Task 2: Canvas and cs1graphics

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.

• There is a setting that you need to change (this is a one-time thing).
  Canopy > Preferences > Python tab. In the drop down menu for PyLab backend, select Inline(SVG) (see image below)

• 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
# 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).
• To make fun graphics, we will use the cs1graphics.py file. In order for your program to be able to access that file, you need to include this line in your python program:
  from cs1graphics import *
  This line basically tells your program that it can use everything (the * stands for everything) in the cs1graphics.py file.
• 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.
• There is an important glitch that you need to know about when drawing on canvases using cs1graphics. After you run your program in Canopy, you will NOT be able to close the generated canvas. Your cursor will turn into the rainbow wheel of death. To close the canvas without quitting out of Canopy, on a Mac you can press Command-. (The command key and the period key at the same time). [You can also use the menus Run > Restart kernel]. This will restart the python kernel -- and will ask for confirmation -- click yes -- and allow the canvas to go away.
• Ok, you are now ready to start drawing some pictures!

Task 3: Drawing on the canvas

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)

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:

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

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

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

Images

# 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

Depth

• 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

Task 5: Saving your work on the cs server

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.