Graphics
Michael Liut (liutm@mcmaster.ca)
Ming Quan Fu(fumq@mcmaster.ca)
Brandon Da Silva(dasilvbc@mcmaster.ca)
www.michaelliut.ca/cs1md3
Graphics Package
 To use graphics, you first need to import it as it is a
library
 import graphics
 To actually use a GUI window, you will need to
open it up
 window = graphics.GraphWin()
 To close a window, use the close command
 window.close()
www.michaelliut.ca/cs1md3
Graphics Package
 Since there are many methods inside the graphics
library, there are short cuts to reduce the amount of
code you type
 Instead of import graphics, use from graphics
import *
 The * means you are importing everything inside
the library
 window = GraphWin()
www.michaelliut.ca/cs1md3
Graphics Package
 The default GUI window has a display size of
200px (length) by 200px (height)
 Think of the GUI window as a graph with each
pixel representing one unit
 Only be one coordinate plane
 The origin (0, 0) is the upper left corner
 X-Value increases as you move right
 Y-Value increases as you move down
www.michaelliut.ca/cs1md3
Graphics Package
 A point is just a pixel on the GUI
 To create a point…





varName = Point (x, y)
varName is the variable name
x is the value of the x coordinate
Y is the value of the y coordinate
point1 = Point (100, 100)
 After creating the point, you must display it
 point1.draw(window)
www.michaelliut.ca/cs1md3
Graphics Package
 varName = Circle(Point(x,y), r)
 varName is the name of the circle
 Point(x, y) is the center of the circle
 r is the radius
 varName = Text(Point(x, y), text)
 varName is the name of the text
 Point(x, y) is the center of the text
 text is a string denoted with double
quotations
www.michaelliut.ca/cs1md3
Graphics Package
 varName = Rectangle(Point1(x,y), Point2(x, y))
 varName is the name of the rectangle
 Point1(x, y) is the point of the upper left corner
 Point2(x, y) is the point of the lower right corner
 varName = Line(Point1(x, y), Point2(x, y))
 varName is the name of the line
 Point1(x, y) is the point of one of the endpoints
 Point2(x, y) is the point of the other end point
 Remember to display all your objects!
www.michaelliut.ca/cs1md3
Graphics Example 1
www.michaelliut.ca/cs1md3
Graphics Example 1 - RUN
www.michaelliut.ca/cs1md3
Graphics Example 2
www.michaelliut.ca/cs1md3
Graphics Example 2 - CTD
www.michaelliut.ca/cs1md3
www.michaelliut.ca/cs1md3
Graphics Example 2 - RUN
www.michaelliut.ca/cs1md3
Graphics Example 2 - RUN
www.michaelliut.ca/cs1md3
Graphics Example 2 - RUN
www.michaelliut.ca/cs1md3
Graphics Example 2 - RUN
www.michaelliut.ca/cs1md3
Graphics Example 2 - RUN
 Graphics window was terminated.
www.michaelliut.ca/cs1md3
setCoords Explanation
www.michaelliut.ca/cs1md3
https://ctools.umich.edu/access/content/group/8a0551bf-5d66-4a39004b-3a90ff183423/Lectures/Zelle%20-%20Chapter%2005.pdf
Graphics - Assignment 3
 Due: Tuesday March 13, 2014 BY 11PM
Expectations:
 Follow the format specified in the assignment.
 Read the assignment very carefully. Do NOT assume, if
you are unsure ask!
 Proper naming, use of functions, etc…
 YOU MUST COMMENT ALL YOUR CODE!
www.michaelliut.ca/cs1md3
Link to Guide
 On my website:
 http://www.michaelliut.ca/uploads/2/1/0/3/21032302/graphics.pdf
 This package includes descriptions of how to use the graphics
functions (included in graphics.py).
www.michaelliut.ca/cs1md3