1. Python: Simple Graphics and Event-driven Programming
Dennis Y. W. Liu
(Adapted from John Zelle’s slides)
Python Programming, 1/e

2. Objectives To construct a Graphical User Interface (GUI) window;
To construct various shapes, including dots, straight lines, circles, rectangles, triangles and ovals;
To understand the coordinate system in a GUI window;
To create simple interactive graphics using event-driven programming.

3. Simple Graphics Programming
The utilization of “objects” in Python can be better illustrated using Graphics programming.

4. Exercise 1
Download the graphics.py library from and save it to the following path:
In Windows:
C:\<pythron-home-directory>\Lib\site-packages
E.g., C:\Python34\Lib\site-packages
In Mac OS X:
/Library/Frameworks/Python.framework/Versions/3.x/lib/python3.x/site-packages/

5. Exercise 2 Type the following code in the Shell:
>>> import graphics
>>> win = graphics.GraphWin()

6. Window Creation and Termination
This creates a window on the screen.
Here the variable “win” represents the window and soon you will add other graphics on it.
To close the window, type
>>> win.close()
We will be working with quite a few commands from the graphics library. Python has an alternative form of import that can help out:
>>> from graphics import *
>>> win = GraphWin()
[Question] How to change the caption and the size of the window?

7. Exercise 3 Type the following code: >>> p = Point(50, 60)
>>> p = Point(50, 60)
>>> win = GraphWin()
>>> p.draw(win)

8. Drawing a Dot
By default, the window size created by the program is 200 x 200 pixels (width x height).
To locate a point (x, y) on the window, where x is the horizontal position and y is the vertical position, we use (0, 0) to represent the upper-left corner of the window.
(199, 199) are the coordinates of lower-right corner of the window.

9. Exercise 4 Type the following code: >>> p1 = Point(20, 30)
>>> p1 = Point(20, 30)
>>> p2 = Point(180, 165)
>>> line = Line(p1, p2)
>>> line.draw(win)

10. Drawing a Line
To draw a line, you have specify the coordinates of two ends of the line.
[Question] Can you draw a cross?

11. Exercise 5 Type the following code:
>>> center = Point(100, 100)
>>> circ = Circle(center, 30)
>>> circ.setFill('red')
>>> circ.draw(win)

12. Drawing a Circle
To draw a circle, we have to specify the center and the radius (in pixel) of the circle.
[Question] How to draw a circle that is centered at (20, 20) with a radius of 30 pixels?

13. Exercise 6 Type the following code:
>>> oval = Oval(Point(130, 240), Point(290, 330))
>>> oval.draw(win)

14. Drawing an Oval
To draw an oval, we have to specify the two coordinates of opposite corners of bounding box.
[Question] How to construct an oval with a size 50 x 80 pixels centered in the window?

15. Exercise 7 Type the following code: >>> win = GraphWin()
>>> win = GraphWin()
>>> rect = Rectangle(Point(30, 50), Point(170, 160))
>>> rect.draw(win)

16. Drawing a Rectangle
To construct a rectangle, we have to specify the two coordinates of opposite corners.
[Question] How to construct a blue rectangle with a size 38 x 49 pixels with (10, 20) as its top-left corner?

17. Exercise 8 Type the following code: >>> win = GraphWin()
>>> win = GraphWin()
>>> tri = Polygon(Point(30, 30), Point(70, 70), Point(90, 20))
>>> tri.draw(win)

18. Drawing a Triangle There is no triangle class.
There is a general class Polygon that can be used for any multi-sided, close shape.
It accepts any number of points and creates a polygon by using line segments to connect the points in the order given and to connect the last point back to the first.
[Question] Create a trapezium of your desired size. Is there any relationship among the points?

19. Exercise 9
Create a graphic window which looks like below. The window should have a width of 420 pixels and a height of 360 pixels.
[Hint: objectname.setOutline(color)]

20. Interactive Graphics Graphical interface can be used as input as well.
In a GUI environment, users typically interact with their applications by clicking on buttons, choosing items from menus, and typing information into on-screen text boxes.
A technique called event-driven programming is adopted.
An interface element (also called control) is placed on the window and waits for the user act on it (e.g., “click” on a button) to trigger an event.
An event will cause a series of code to be executed.

21. Drawing a Triangle
Write a program that allows the user to draw a triangle by clicking on three points in a window.

22. Drawing a Triangle (con’t)
# triangle.py
from graphics import *
def main():
win = GraphWin("Draw a Triangle")
win.setCoords(0.0, 0.0, 10.0, 10.0)
message = Text(Point(5, 0.5), "Click on three points")
message.draw(win)
# Get and draw three vertices of triangle
p1 = win.getMouse()
p1.draw(win)
  p2 = win.getMouse()
p2.draw(win)

23. Drawing a Triangle (con’t)
p3 = win.getMouse() p3.draw(win) # Use Polygon object to draw the triangle triangle = Polygon(p1, p2, p3) triangle.setFill("peachpuff") triangle.setOutline("cyan") triangle.draw(win) # Wait for another click to exit message.setText("Click anywhere to quit.") win.getMouse() main()

24. Exercise 10
Modify triangle.py. For each 3-click, the program should generate a triangle for the three points.

25. End