Lab 2 cs1graphics: Layers
- cs1graphics: creating and drawing objects
- cs1graphics: clone, rotate, flip, scale
- Layers in cs1graphics
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
/lab02/cones.py in Canopy.
The code you see in this file creates a
Layer that contains two objects:
- the cone (a
- the ice cream scoop (a
We want to keep the cone and scoop together as one unit, so we add them to a Layer (called
# 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?
- The upper left corner of the Canvas is the origin at 0,0.
- the center of the ice cream cone (see Figure 1 above) is (0,0).
There is another useful tool that you can use called
graphicsState. You'll need to import it (the file
graphicsState.py is inside your
from graphicsState import *
Then you can use the
printState function which will show you the state of any
cs1graphics object. For example,
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>
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>
printState also works for Layers:
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
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
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
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
Helper 2) Draw a grid
Helper 3) Mark coordinates of mouse clicks
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).
cs1graphicsHelper tools may come in handy during lab today, or whenever you are working with
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.
First, create a new Layer, say
doubleTreat, to store our new double scoop design:
doubleTreat = Layer()
Then, create a clone of the existing
treat Layer and it add it to this new
single = treat.clone() doubleTreat.add(single)
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.
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:
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
- Comment out adding these Layers to the Canvas so that when you run the file, your Canvas is blank.
- Moving forward, you will use the
doubleTreatLayers to create more complex patterns on your Canvas.