Graphics

Object Oriented Programming

• Object Oriented Programming (OOP) is a
popular design/implementation method in
industry
• OOP involves:
• Creating (instantiating) objects
• Accessing instance variables
• Using methods
• Python supports both procedural
programming (what you have been doing so
far) and OOP

2
 Before we begin…
• Some OOP terminology
• Object: a particular
instance of a class
• “Hello” is an instance of
str class
• 34 is an instance of int
class
• [2,3,4] is an instance of
list class

3
 OOP Terminology
• Class: is a template or blueprint for an
object
• A class bundles data and functionality
• Contains methods and member
(instance) variables

4
 OOP Terminology
• Methods define the operations that are
allowed for a particular object eg.:
• .append( ) is a list method
• .upper( ) is a str method
• .count( ) is a method in both str and list
classes
• Member variables or instance variables store
the data in an object and other attributes eg.
• f.closed is set to True when f is closed

5
 graphics.py
• Is an OOP based module
• Open source
• Easy to use. Used to:
• Draw shapes (2D)
• Capture mouse and keyboard events

6
 graphics.py: Set up
• Obtain a copy of graphics.py from
meskanas
• Place a file in the folder of your Python
program
• Add an import line to the top of your
program

from graphics import *

7
 graphics.py: Set up
• Full documentation can be found at:
https://mcsp.wartburg.edu/zelle/python/
graphics/graphics.pdf

• An online reference can also be found at:

https://mcsp.wartburg.edu/zelle/python/
graphics/graphics/index.html

8
 GraphWin Canvas
• Everything is displayed on a window or
GraphWin object
• A GraphWin must be created before
objects can be drawn
• Multiple GraphWin objects can exist

9
 GraphWin Canvas
• Syntax:
win = GraphWin(title, width, height)

Window title as string width as int height as int

• To construct a GraphWin object or instance, we

must pass the three parameters
• win is a an object of instance of the GraphWin class

10
 GraphWin Methods
• In order to call these methods, we need a
GraphWin object
• getMouse( )
• Waits for a mouse click on the window and
returns the coordinates of the mouse click
• checkMouse( )
• returns the coordinates of the last mouse
click or None if the mouse was not clicked
• close( )
• Closes the on-screen GraphWin

11
 GraphWin Canvas
• Let’s create a GraphWin object with the
following arguments:

• Title = ‘My First Canvas’

• Width = 600
• Height = 400

12
 GraphWin Methods

For this window, the upper left-corner has the coordinate (0,0)
and the lower-right corner has a coordinate (600,400)

13
 GraphWin Methods
• setBackground(color)
• Color can be specified in one of 3 ways:
• String eg. ’green’
• Hex color as string #RRGGBB eg. ‘#80aaff’
• An rgb value eg. color_rgb(45, 145, 89)

• setCoords(ll_x, ll_y, ur_x, ur_y)

• Set the coordinates of the window
• Currently drawn objects are redrawn and
subsequent drawings are done with respect to
the new coordinate system

14
GraphWin Methods

15
 GraphWin Methods
• plot(x, y, color)
• Draw pixel at coordinate (x, y) and set
color (color is optional)
• plotPixel(x, y, color)
• Draw pixel at raw coordinate (x, y),
ignoring any coordinate
transformations, and set color (color is
optional)

16
 GraphWin Methods
• getKey( )
• Waits for user to press a key and
returns that key as string
• checkKey( )
• returns the last key that was pressed
or None if no key was pressed since
last call

17
 GraphWin Methods
• getWidth( )
• returns the width of the window in
pixels as an integer
• getHeight( )
• returns the height of the window in
pixels as an integer

18
 GraphWin Methods
• isClosed( )
• Checks if window is closed. Returns True
or False
• isOpen( )
• Checks if window is open. Returns True or
False
• flush( )
• Graphics can sometimes get backed up
• Flush can force a fast render which can
(sometimes) speed up the display process

19
 Class Hierarchy
• GraphicsObject is the base class for all
drawable objects in graphics.py
• This means that all classes in graphics.py
inherit from GraphicsObject
• A child class has all methods and instance
variables of the parent class
• Advantage: we don’t have to re-
implement methods

20
 Classes
Class that inherit from GraphicsObject:
• Point: 2D point object
• Line: a line segment object
• Circle: a circle object
• Rectangle: a rectangle object
• Oval: an oval object
• Polygon: a polygon object
• Text: a text object
• Entry: a text entry object
• Image: an image object

21
 Hierarchy
GraphicsObject = is-a

Point _BBox Polygon Text Entry Image

Rectangle Oval Line

Circle

22
 Classes
• Inherited methods from GraphicsObject:
• setFill(color) #set object interior color
• setOutline(color) #set object outline color
• setWidth(pixels) #set object outline width
• draw( ) #draw object on GraphWin
• undraw( ) #undraw object
• move(dx, dy) #move object dx units in
the x-direction and dy units in the y-
direction

23
 Classes
• All objects have a config attribute (member
variable) which is a dictionary
• config contains information about the
objects fill, outline and width.
• A printout of obj.config.keys( ) will show all
information held in config

24
 Point
• Point(x, y) constructs a point object at
(x, y)
• config keys are outline and fill
• getX( ) returns the x-coordinate
• getY( ) returns the y-coordiante

25
 Line
• Line(Point(x1, y1), Point(x2, y2)) constructs
an oval object enclosed by the rectangle
(x1, y1) and (x2, y2)
• config keys are outline and fill and width
• getP1( ) returns a point object
• getP2( ) returns a point object
• getCenter( ) returns midpoint (point
object) between point1 and point2

26
 Rectangle
• Rectangle(Point(x1, y1), Point(x2, y2))
constructs a rectangle whose opposite
corners are (x1, y1) and (x2, y2)
• config keys are outline and fill and width
• getP1( ) returns point1
• getP2( ) returns point2
• getCenter( ) returns midpoint between
point1 and point2

27
 Circle
• Circle(Point(x1, y1), r) constructs a circle
object whose centre is (x1, y1) and radius
is r
• config keys are outline and fill and width
• getRadius( ) returns the radius of the circle

28
 Polygon
• Polygon(Point(x1, y1), Point(x2, y2), ….)
constructs a polygon with the given points
as vertices.
• config keys are outline and fill and width
• getPoints( ) returns a list of points used to
construct the polygon

29
 Text
• Text(Point(x1, y1), string) constructs a text object
centred at (x1, y1).
• config keys are justify and fill and text and font
• getText( ) returns text object’s string
• setText(s) sets the text of the object to s
• setFace(family) sets the font family eg. arial
• setSize(pt_size) sets the size
• setStyle(style) sets the style eg. bold, italic, bold
italic
• setTextColor(color) sets the text color. Color can be
hex, rgb_color or color string

30
 Entry
• Entry(Point(x1, y1), width) constructs an entry
object centred at (x1, y1) and of given width.
• getText( ) returns the string that is in the entry box
• setText(s) sets the text in the entry box to s
• setFace(family) changes the font family eg. arial
• setSize(pt_size) sets the size
• setStyle(style) sets the style eg. bold, italic,
bold italic
• setTextColor(color) sets the text color. Color
can be hex, rgb_color or color string

31
 Image
• Image(Point(x1, y1), filename) constructs an
image object centred at (x1, y1) and of given
image file.
• Image(w, h) creates and empty image of size w x
h
• getAnchor( ) returns the centre point of image
• getWidth( ) get image width
• getHeight( ) get image height
• getPixel( x, y) returns the pixel rgb as a list
• setPixel( x, y, color) sets pixel at (x, y) to color
• save(filename) save image to filename

32