CS177:
Programming in Multimedia
Objects
Recitation Topic:
Graphics Library
Python Programming, 2/e
1
Objectives



To be familiar with the various graphic objects
available in the graphics library.
To understand the fundamental concepts of
computer graphics, especially the role of coordinate
systems
To be able to write simple graphics programs using
the graphics library.
Python Programming, 2/e
2
Simple Graphics Programming


This chapter uses the graphics.py
library supplied with the supplemental
materials.
Two location choices for graphics.py


In Python’s Lib directory with other
libraries
In the same folder as your graphics
program
Python Programming, 2/e
3
Simple Graphics Programming

Since this is a library, we need to
import the graphics commands
>>> import graphics

A graphics window is a place on the
screen where the graphics will appear.
>>> win = graphics.GraphWin()

This command creates a new window titled
“Graphics Window.”
Python Programming, 2/e
4
Simple Graphics Programming

Windows can be closed/destroyed by
issuing the command
>>> win.close()
Python Programming, 2/e
5
Simple Graphics Programming


It’s tedious to use the graphics.
notation to access the graphics library
routines.
from graphics import *
The “from” statement allows you to
load specific functions from a library
module. “*” will load all the functions,
or you can list specific ones.
Python Programming, 2/e
6
Simple Graphics Programming

Doing the import this way eliminates
the need to preface graphics commands
with graphics.
>>> from graphics import *
>>> win = GraphWin()
Python Programming, 2/e
7
Simple Graphics Programming



A graphics window is a collection of points
called pixels (picture elements).
The default GraphWin is 200 pixels tall by 200
pixels wide (40,000 pixels total).
One way to get pictures into the window is
one pixel at a time, which would be tedious.
The graphics routine has a number of
predefined routines to draw geometric
shapes.
Python Programming, 2/e
8
Point




The simplest object is the Point. Like points
in geometry, point locations are represented
with a coordinate system (x, y), where x is
the horizontal location of the point and y is
the vertical location.
The origin (0,0) in a graphics window is the
upper left corner.
X values increase from right to left, y values
from top to bottom.
Lower right corner is (199, 199)
Python Programming, 2/e
9
Point Example
>>> p = Point(50, 60)
>>> p.getX()
50
>>> p.getY()
60
>>> win = GraphWin()
>>> p.draw(win)
>>> p2 = Point(140,
100)
>>> p2.draw(win)
Python Programming, 2/e
10
Circles

Given a 2-Dimensional plane,
what two things do you need to
draw a circle?
Python Programming, 2/e
11
Circles

Like circles in geometry, circles in
graphics library are represented by the
center of the circle which is a Point
and the radius of the circle
Python Programming, 2/e
12
Circle Example
>>>
>>>
>>>
>>>
center = Point(100, 100)
win = GraphWin()
cir = Circle(center, 40)
cir.draw(win)
Python Programming, 2/e
13
Rectangle


Rectangles are the graphics object in
graphics module which take the two
points as parameters
These two points are the two ends of
the diagonals of the rectangle
Python Programming, 2/e
14
Rectangle Example
>>>
>>>
>>>
>>>
>>>
p1 = Point(100, 100)
p2 = Point(150,150)
win = GraphWin()
rect = Rectangle(p1,p2)
rect.draw(win)
Python Programming, 2/e
15
How can you draw a square?

We have a problem here. There is
no method in graphics library to
draw a square. Can you suggest a
way?
Python Programming, 2/e
16
Lines


We can interpret lines as a series of
points connecting the origin point to the
destination point in one direction in a
single dimension.
Lines in graphics library are represented
in the same way and Line() takes two
points as parameters and draws a line
between those two points.
Python Programming, 2/e
17
Line Example
>>>
>>>
>>>
>>>
>>>
p1 = Point(100, 100)
p2 = Point(150,150)
win = GraphWin()
line = Line(p1,p2)
line.draw(win)
Python Programming, 2/e
18
Ovals


Ovals in graphics library are drawn
inside a rectangle specified by two
points in the window.
Oval takes two points as its parameter
and constructs an oval in the bounding
box determined by those two points.
Python Programming, 2/e
19
Oval Example
>>>
>>>
>>>
>>>
>>>
p1 = Point(50, 100)
p2 = Point(150,150)
win = GraphWin()
oval = Oval(p1,p2)
oval.draw(win)
Python Programming, 2/e
20
Polygons



Polygons are the figures that has a
closed path consisting of lines joining
the given set of points
Polygon() takes variable number of
points as arguments and creates a
polygon joining those set of points
Eg. Polygon(point1, point2, point3, …)
Python Programming, 2/e
21
Polygon Example
>>>
>>>
>>>
>>>
>>>
>>>
p1 = Point(50, 100)
p2 = Point(100,150)
p3 = Point(75, 50)
win = GraphWin()
polygon = Polygon(p1,p2)
polygon.draw(win)
Python Programming, 2/e
22
Generic methods supported by every
Graphics object







setFill(color) : Fills the interior of object with specified color
setOutline(color): Sets the outline of object to the given colot
setWidth(pixels): Sets the width of the outline to specified
pixels.
draw(graphWin): Draws the object to the given window
undraw(): Undraws the graphics object from a graphics
window
move(dx,dy): Moves the graphics object dx units in x
direction and dy units in y direction
clone(): returns the duplicate of that graphics object. The
clones are always in undrawn state. You need to call draw()
on those objects to draw them on window.
Python Programming, 2/e
23
Getting it all together
from graphics import *
def main():
win = GraphWin()
drawFace(win)
drawEyes(win)
drawNose(win)
drawLips(win)
drawTeeth(win)
def drawFace(win):
centerOfFace = Point(100, 100)
face = Circle(centerOfFace, 50)
centerOfLeftEye = Point(80,75)
face.draw(win)
def drawEyes(win):
centerOfLeftEye = Point(80,75)
leftEye = Circle(centerOfLeftEye, 10)
centerOfRightEye = Point(120,75)
rightEye = Circle(centerOfRightEye, 10)
leftEye.draw(win)
rightEye.draw(win)
Python Programming, 2/e
24
Getting it all together (Cont.)
def drawNose(win):
noseEdge1 = Point(100, 90)
noseEdge2 = Point(90, 110)
noseEdge3 = Point(110,110)
nose = Polygon(noseEdge1, noseEdge2, noseEdge3)
nose.draw(win)
def drawLips(win):
lipsEdge1 = Point(80,125)
lipsEdge2 = Point(120, 125)
lips = Line(lipsEdge1, lipsEdge2)
lips.draw(win)
def drawTeeth(win):
toothPoint1 = Point(90,125)
toothPoint2 = Point(95, 130)
toothPoint3 = Point(110, 125)
toothPoint4 = Point(115, 130)
tooth1 = Rectangle(toothPoint1, toothPoint2)
tooth2 = Rectangle (toothPoint3, toothPoint4)
tooth1.draw(win)
tooth2.draw(win)
main()
Python Programming, 2/e
25
Python Programming, 2/e
26