Lab 2 cs1graphics: Layers

Goals

Task 0: Review transformations worksheet

(A worksheet will be handed out in lab to complete this task)

This template shows the following code without the transformations (rotate, scale, flip) to the boxes. On your worksheet, sketch how these transformations would change the boxes.

test = Canvas(800,600,'peachpuff','transformations')
box = Rectangle(150,100,Point(0,0)) # centered at (0,0)
box.setFillColor('ivory')
box.setBorderColor('ivory')

box1 = box.clone()
test.add(box1)
box1.moveTo(300,300)
box1.rotate(20)

box2 = box.clone()
test.add(box2)
box2.moveTo(600,150)
box2.scale(2)

box3 = box.clone()
test.add(box3)
box3.moveTo(100,500)
box3.flip(45)

Layers in cs1graphics

An ice cream cone Layer

Open /lab02/cones.py in Canopy.

The code you see in this file creates a Layer that contains two objects:

We want to keep the cone and scoop together as one unit, so we add them to a Layer (called treat).

# Your name here
# Your username here
# CS111 Lab02
# Fall 2017
# cones.py
# Layers and Transformations

from cs1graphics import *

# Ice cream cone design consisting of a Circle scoop and Polygon cone
treat = Layer()

scoop = Circle(50,Point(0,0)) # centered at (0,0)
scoop.setFillColor('blue')
scoop.setBorderColor('blue')

cone = Polygon(Point(-50,0),Point(50,0),Point(0,180))
cone.setFillColor('tan')

treat.add(cone)
treat.add(scoop)

# Note: added the scoop 2nd so it would cover the top part of cone

Figure 1: Ice Cream Cone

Task 1: Display a treat

In the starting code we've given you, we've only created an ice cream cone design in a Layer, but we haven't taken the steps to make the Layer show up on a Canvas.

Next, you need to a) create a Canvas, b) clone the treat layer, c) add the clone to the Canvas, and c) position the clone.

First up, the Canvas:

#              w    h    bgColor   title
paper = Canvas(900, 700, 'ivory', 'i scream u scream')

(We're starting with a rather large Canvas so we'll have room to add more designs later.)

Then, clone the treat and add it to the Canvas:

treat1 = treat.clone()
paper.add(treat)

At this point, if you run your code, you should see your design but it'll be tucked up in the top left corner of the Canvas window:

Why does this happen?

graphicsState

There is another useful tool that you can use called graphicsState. You'll need to import it (the file graphicsState.py is inside your lab02 folder).

from graphicsState import *

Then you can use the printState function which will show you the state of any cs1graphics object. For example,

printState(scoop)

will print this information about your scoop:

<Circle:
  radius=50.0,
  fillColor='blue',
  borderColor='blue',
  borderWidth=1.0,
  referencePoint=(0.0, 0.0),
  depth=50>

and

printState(cone)

will show this:

<Polygon:
  points=[(-50.0, 0.0), (50.0, 0.0), (0.0, 180.0)],
  fillColor='tan',
  borderColor='black',
  borderWidth=1.0,
  referencePoint=(-50.0, 0.0),
  depth=50>

Note: printState also works for Layers:

printState(treat)

will print the following:

<Layer:
  contents=    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    <Polygon:
      points=[(-50.0, 0.0), (50.0, 0.0), (0.0, 180.0)],
      fillColor='tan',
      borderColor='black',
      borderWidth=1.0,
      referencePoint=(-50.0, 0.0),
      depth=50>
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    <Circle:
      radius=50.0,
      fillColor='blue',
      borderColor='blue',
      borderWidth=1.0,
      referencePoint=(0.0, 0.0),
      depth=50>
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~,
  referencePoint=(0.0, 0.0),
  depth=50>

Remember that you can always use graphicsState to correctly place objects on the canvas.

Back to our ice cream cone

Here is our current state:

Fix this by using the moveTo method to relocate the treat to the center of the Canvas:

Note: the reason we worked with a clone of the treat Layer is so we can alter the position of the clone, without impacting the position of the original treat Layer. This way, we can create more designs from the treat Layer.

Task 2: Some nifty cs1graphics helper tools

Susan Buck wrote some useful cs1graphics helper tools which are included in your lab02 folder under the filename cs1graphicsHelper.py.

To utilize these helpers, add the following import statement after the line that imports cs1graphics:

from cs1graphicsHelper import *

With this helper included, you can now take advantage of the following tools...

Helper 1) Draw reference points

Usage: drawReferencePoints(your_Canvas_name_here)

Example: drawReferencePoints(paper):

The reference points are shown as orange dots (there is only one reference point on the Canvas above). If the object is a Layer, then a small x appears inside the dot. The center of the ice cream scoop is the reference point of the treat Layer.

Helper 2) Draw a grid

Usage: drawGrid(your_Canvas_name_here, grid_spacing)

Example: drawGrid(paper, 100):

Example: drawGrid(paper, 50):

Helper 3) Mark coordinates of mouse clicks

Usage: markClicks(your_Canvas_name_here)

Example: markClicks(paper):

With markClicks invoked, the Canvas will show the (x,y) coordinates of mouse clicks in red which allows you to find the coordinate values you need for placing your objects.

This last tool, markClicks, is processor intensive, so when you're not actively using it, put a # in front of the line to “comment it out” (i.e. disable it).

# markClicks(paper)

The cs1graphicsHelper tools may come in handy during lab today, or whenever you are working with cs1graphics.

Task 3: Double scoop

Next we want to build upon our treat design to create a new ice cream cone that has two scoops of ice cream, for example:

We could build everything from scratch again (the cone, the circle, etc.) but we already have that done in the treat Layer, so we'll build upon that.

Step 1

First, create a new Layer, say doubleTreat, to store our new double scoop design:

doubleTreat = Layer()

Step 2

Then, create a clone of the existing treat Layer and it add it to this new doubleTreat Layer.

single = treat.clone()
doubleTreat.add(single)

Step 3

Then, create new Circle scoop and add it to the doubleTreat Layer, making it whatever “flavor” (i.e. color) you want. Position this second scoop so it sits above the first scoop.

Step 4

Finally, add the doubleTreat Layer the the Canvas and position it in the center.

You can use drawReferencePoints() to check the reference point of your doubleTreat Layer. It should show this:

Aside: Depth

When adding more than one object to a Layer (or the Canvas), the most recently added object appears on top of the other objects. You may adjust the overlap of objects by using setDepth (see cs1graphics setDepth documentation here). Objects with higher depth are shown behind objects with lower depths. In other words, the smaller the depth, the closer the object is to the viewer.

Task 4: Clean up cones.py (so we can use it later)

At this point, your cones.py file creates a treat Layer and a doubleTreat Layer.

Table of Contents