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

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.

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

Exercise 1 Download the graphics.py library from http://mcsp.wartburg.edu/zelle/python/ 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/

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

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?

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

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.

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)

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

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

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?

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

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?

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

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?

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

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?

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)]

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.

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

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)

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()

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

End