Lab 1: Part 4: cs1graphics

Introducing 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:

Smiley final

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

Created by: cs111 staff

Vocabulary preface

Before we dig in, a preface that we'll be using some programming terms such as...

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.

Reference

These resources will be useful whenever you're working with cs1graphics

Configure Canopy

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.

Import cs1graphics

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

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.

Default canvas

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:

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:

  1. 500 = the width
  2. 500 = the height
  3. lightcyan = the background color; see the cs1graphics color reference chart for more options
  4. Smiley = the title for the Canvas window

Your customized Canvas should look like this:

A customized cs1graphics Canvas

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:

paper.add(face)

When you first run this code, you'll see just the circle's bottom right edge at the top left corner of the Canvas.

A default circle

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:

  1. 200 = radius of the circle
  2. 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:

The start of the smiley face

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.

Face with eyes added

Aside: Documentation

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

Documentation for Circle objects

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.

Examples:

Smiley Hat

Mouth

To create a curved “half moon” shape for the mouth, we'll get creative by overlapping two circles like so:

Smiley mouth technique

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!

Mouth with wrong depth

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.

Smiley final

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.

Text

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:

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 lab01 folder.

images folder content

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:

smiley w rainbow

See if you can make changes to your code to re-arrange the rainbow to appear behind the smiley face:

smiley w rainbow in back

Table of Contents