Assignment 2.1: Zoog Upside Down
Name: ZoogUpsideDown
Folder: LP\Ch02
0. Save this Assignment document to your LP\Ch02 folder.
1. Enter the Zoog code (below right), which is adapted from p. 27 of the Learning Processing
textbook. Use MS-Word's Zoom feature to magnify
the code if you can't read it.
2. Except for the Bounding Rectangle – which is red
– the colors of Zoog's body parts are greyscale values.
Assign new non-greyscale color values to Zoog's body,
head, eyes and legs . Do NOT alter the color of the
Bounding Rectangle.
3. Make the fill color of the head 50% transparent.
Display the image. Describe what you discover
about the rectangle used for Zoog’s body.
Answer 1:
CHANGE the parameters of the rect() method in the
body section so that the body rectangle and the head
circle DO NOT OVERLAP. To do this, you will need to
reduce the height of Zoog’s body by half.
4. Finally, change the parameters in the code so that
Zoog will be drawn upside-down. Make sure that the
drawing stays inside the red bounding rectangle. Do
NOT alter the coordinates of the red bounding
rectangle.
Do NOT approximate the parameter values. To get
credit for this assignment, the values must be
EXACT. Calculate them.
Before you attempt to change your program, do the
exercises on the next page.
1|Page
Note that the TRUE coordinates of the red bounding rectangle – which we want to use as a
frame around Zug – should be the following:
 upper left corner is (70, 40)
 width=60
 height = 120
Question: Why are the coordinates for the red bounding rectangle in the program
slightly different? (try using the coordinates above in your program and see what
happens…)
Answer 2:
(a) To draw Zug upside-down, you will need to understand what CENTER drawing mode means.
When you set the drawing mode to center, the (x,y) point of the rect() or ellipse() method is
the center point of the rectangle or oval that is drawn.
For the rectangle or ellipse:
The formula for the horizontal coordinate of its left side will be at xCenter – width/2.
The formula for the vertical coordinate of its top side will be at yCenter – height/2.
What is the formula for the horizontal coordinate of the right side ?
What is the formula for the vertical coordinate of the bottom side ?
Answer 3:
Formula for Horizontal Coordinate:
Formula for Vertical Coordinate:
(b) Calculate the Bounding Rectangle for each of Zoog's body parts.
Then calculate where each of these bounding rectangles needs to be in the inverted drawing.
Fill in the table below.
Answer 4:
Upside-down
Width, Height
Current
(xCenter, Center)
x= y=
x= y=
x= y=
x= y=
Current
Width, Height
w= h=
w= h=
w= h=
w= h=
PART
Current
(x1, y1)
Current
(x2, y2)
Upside-down
(x1, y1)
Upside-down
(x2, y2)
Left Leg
Right Leg
x1= y1=
x1= y1=
x2= y2=
x2= y2=
x1= y1=
x1= y1=
x2= y2=
x2= y2=
PART
Body
Head
Left Eye
Right Eye
2|Page
Upside-down
(xCenter, yCenter)
x=
x=
x=
x=
y=
y=
y=
y=
w=
w=
w=
w=
h=
h=
h=
h=