Lab 1: Part 4: cs1graphics
This semester, we'll make frequent use of a Python library called cs1graphics which facilitates the creation of graphic scenes in Python.
Today, we're going to start by constructing this simple design:
...but to get you inspired with what else you'll be able to create, here are some scenes created by past CS111 students:
(Hover a thumbnail to see a larger view)
Before we dig in, a preface that we'll be using some programming terms such as...
- objects (as in a Circle object, or Canvas object)
- methods (as in the
.addmethod we used to add shapes to our Canvas)
These terms will be explained in more detail in upcoming lectures, so don't fret if you don't fully understand what they mean yet.
These resources will be useful whenever you're working with cs1graphics
- Goldwasser & Letscher, Sec. 3.1-3.2: Getting Started with Graphics
- cs1graphics Documentation
- cs1graphics colors
To start working with cs1graphics, first create a new file in Canopy and save it as
smiley.py in your
lab01 folder on the Desktop.
Then, in Canopy, goto Preferences, followed by the Python tab.
In the drop down menu for PyLab backend, select Inline(SVG).
This setting is necessary to load cs1graphics Canvases in Canopy.
Add the following line at the top of your
smiley.py file so that it imports all (as indicated by the
*) the features in the cs1graphics library:
from cs1graphics import *
Note: It's important that your Working Directory is synced to your current file, as we went over when setting up Canopy. If not, this line will not be successful in finding the cs1graphics library that's in your lab01 folder.
Create a Canvas
The first step to drawing a scene in cs1graphics is to create a Canvas object which uses this syntax:
paper = Canvas()
In this example, we stored our Canvas object in a variable named
If you run this code, you'll see the default Canvas window is small, with a white background; we'll customize this in a moment.
Closing the Canvas
In Canopy, after you run a program that creates a cs1graphics Canvas, you will not be able to close the generated Canvas— your cursor will turn into the “rainbow wheel of death”.
Instead, you have to force the Canvas to close by restarting the Python kernel via one of the following two methods:
- Method 1: Restart the kernel via keyboard shortcuts
- Click on the Canopy editor window to make it active (Important: it won't work if the Canvas window is inactive).
- Then, on a Mac, press
.(The command key and the period key at the same time).
- Method 2: Restart the kernel via the menu
- Go to Run > Restart kernel.
You will often have to run your program many times before you get your scene how you want it, so it's important that you're comfortable with closing the Canvas windows.
Customize the Canvas
As we saw, a Canvas defaults to a small size with a white background. These properties (size, color, etc) can be set by creating your Canvas with comma separated arguments like so:
paper = Canvas(500, 500, 'lightcyan', 'Smiley')
Here's a breakdown of the 4 arguments we added:
500= the width
500= the height
lightcyan= the background color; see the cs1graphics color reference chart for more options
Smiley= the title for the Canvas window
Your customized Canvas should look like this:
Basic shapes: Circle face
cs1graphics can create common shapes like circles, squares, rectangles, polygons, and paths. You can also add text and .gif images to your scenes.
Let's start simple with a circle— create a new
Circle object, and store it in a variable called
face like so:
face = Circle()
Then, add this new shape to the Canvas (which we stored in the variable
paper), like so:
When you first run this code, you'll see just the circle's bottom right edge at the top left corner of the Canvas.
This is because a default circle is pretty small, and centers itself at the top left point (0,0) on the Canvas.
Like the Canvas, we'll need to add arguments to adjust this:
face = Circle(100, Point(250, 275))
Here's a breakdown of the 2 arguments we added:
200= radius of the circle
Point(250, 250)= center Point of the circle
- A Point is an Object in cs1graphics, just like a Circle is
- A Point takes an x,y coordinate as its 2 arguments
Changing the color of a Circle is not something that can be done as part of the initial circle creation, however, it is something that can be done after the Circle is created using a method called
setFillColor; the syntax for that looks like this:
face = Circle(100, Point(250, 275)) face.setFillColor('gold')
At this point, your scene should look like this:
Your turn: add two eyes
Using what you learned above, add two circle eyes on the face.
Experiment with the radius and center Point to get two eyes that look proportional to the face, in an appropriate spot on the face.
You can refer to the cs1graphics color options page to pick your eye color of choice.
While we came up with the above argument values for the circle (e.g. 200 for the radius), we did not make up the arguments themselves. Instead, we relied on the cs1graphics documentation to tell us how they (the cs1graphics authors) programmed Circle objects to work, and we followed those instructions.
For example, here's a snapshot from the Circle reference page
In the highlighted description box, we learn what the Circle does, and what parameters it takes, as well as what those parameters will default to if they're not set.
The documentation pages may be a little daunting at first— there's a lot of syntax and info that will be unfamiliar. The information presented in the docs will become clearer with time and experience.
Another shape: Rectangles
We pulled the following information from the cs1graphics documentation page for Rectangles:
Construct a new instance of a Rectangle. The reference point for a rectangle is its center. w the width of the rectangle (default 20) h the height of the rectangle (default 10) centerPt a Point representing the placement of the rectangle's center (default Point(0,0) )
Using this info, and what you learned about Circles above, create a hat made of one or more rectangles.
To create a curved “half moon” shape for the mouth, we'll get creative by overlapping two circles like so:
Because our top circle will be gold, it'll blend in nicely with the face as if it's not even there, like this:
To make the smile, add the following code to the bottom of your file:
mouthBottom = Circle(75, Point(250, 270)) mouthBottom.setFillColor('black') paper.add(mouthBottom) mouthTop = Circle(80, Point(250, 250)) mouthTop.setFillColor('gold') mouthTop.setBorderColor('gold') paper.add(mouthTop)
When you run this code, you'll see the smile, but our tricky "cover" circle is now obscuring the eyes and ruining the whole effect!
This demonstrates that objects in cs1graphics have depth, and by default, objects “stack” on top of one another in the order they're added to the Canvas.
To fix this issue, move all of the code for the mouth up in your file, right after you create the face and before you create the eyes.
When you run your code again, your smiley face should look much better! If the dimensions of your drawing differs from ours at all, adjust as needed.
Aside: Another fix to depth issues like this is to use a method called
setDepth to explicitly change the stacking order of objects. Objects with shorter depths are closer to the viewer, whereas larger depths are farther away.
For our finishing touches, let's add a Text object:
label = Text('Welcome to CS111!', 18) label.setFontColor('black') label.moveTo(250,25) paper.add(label)
Discuss the following questions with your partner:
- What three methods were used in this code?
- How many arguments does the Text object take?
- What are those arguments?
Still have some time?
Try adding an image to your scene. We have provided you with five transparent gif
images that you can use in lab today. They can be viewed in your
Note that all the images are gif (.gif works best with cs1graphics) and are already cropped to the desired size for our canvas with transparent backgrounds.
# Note that the image (rainbow.gif) must be in # the same folder as your lab01.py file rainbow = Image('rainbow.gif') rainbow.moveTo(250,250)
The code snippet above is missing one line that makes the rainbow appear -- you and your partner can figure what that line is. Then you should see this:
See if you can make changes to your code to re-arrange the rainbow to appear behind the smiley face:
Table of Contents
- Lab 1 Home
- Part 1: Lab workflow with Cyberduck
- Part 2: Canopy intro
- Part 3: Text in boxes & otterInspect
- Part 4: cs1graphics
- Part 5: Save your work