1. 5. COMPUTING WITH GRAPHICS OBJECTS Dennis Y. W. Liu and Rocky K. C. Chang October 8, 2015 (Adapted from John Zelle’s slides)

2. Objectives To construct a Graphical User Interface (GUI) window; To construct various shapes, including dots, straight lines, circles, rectangles, triangles and ovals; To combine various shapes to construct complicated graphics; To understand the process of developing a graphical interface; To understand the coordinate system in a GUI window; To construct a bar chart and a line graph; To create interactive graphics using event-driven programming.

3. The Object of Objects Basic idea – view a complex system as the interaction of simpler objects. An object is a sort of active data type that combines data and operations. Objects know stuff (contain data) and they can do stuff (have operations). Objects interact by sending each other messages.

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

5. EXERCISE 5.1 Download the graphics.py library from http://mcsp.wartburg.edu/zelle/python/ and save it to the following path:http://mcsp.wartburg.edu/zelle/python/ C:\ \Lib\site-packages E.g., C:\Python34\Lib\site-packages For MAC: Macintosh HD\Library\Frameworks\Python.framework\Versions\3.4\lib\python3.4\site- packages

6. EXERCISE 5.2 Type the following code in the Shell: >>> import graphics >>> win = graphics.GraphWin()

7. 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?

8. EXERCISE 5.3 Type the following code: >>> p = Point(50, 60) >>> win = GraphWin() >>> p.draw(win)

9. Drawing a Dot By default, the window size created by the program is 200 x 200 pixels (height x width). 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.

10. EXERCISE 5.4 Type the following code: >>> p1 = Point(20, 30) >>> p2 = Point(180, 165) >>> line = Line(p1, p2) >>> line.draw(win)

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

12. EXERCISE 5.5 Type the following code: >>> center = Point(100, 100) >>> circ = Circle(center, 30) >>> circ.setFill(‘red’) >>> circ.draw(win)

13. 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?

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

15. 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?

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

17. 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?

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

19. 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?

20. EXERCISE 5.9 Create a graphic window which looks like below. The window should have a dimension of 420 x 360. [Hint: objectname.setOutline(color)]

21. More complex graphics for data representation Suppose we want to develop a program to determine the future value of an investment. The formula is given by: future value = principle * (1 + annual_interest_rate) year We invest $2000 at 15% interest for 5 years. The following table shows the growth of the investment: YearsValue 0$2,000.00 1$2,300.00 2$2,645.00 3$3,041.75 4$3,498.01 5$4,022.71

22. More complex graphics for data representation We would like to display the information in a bar chart like below:

23. More complex graphics for data representation How can we achieve it? Programming with graphics requires careful planning. You will probably need a pencil and a piece of paper to draw some diagrams and scratch out calculations. Step 1: Designing using Pseudocode Step 2: Writing the Code

24. Step 1: Designing using Pseudocode The following pseudocode illustrates the flow of logic of the program: Create a GraphWin Draw scale labels on left side of window Draw bar at position 0 with height corresponding to principal For successive years 1 through 5 Calculate principal = principal * (1 + annual interest rate) Draw a bar for this year having a height corresponding to principal

25. The Coordinates and Lengths

26. Step 2: Writing the Code # futval_bar_chart.py from graphics import * def main(): # Let us assume the principal and annual interest rate is fixed principal = 2000 apr = 0.15 # Create a graphics window with labels on left edge win = GraphWin("Investment Growth Chart", 320, 240) win.setBackground("white") Text(Point(20, 230), ' 0.0K').draw(win) Text(Point(20, 180), ' 1.0K').draw(win) Text(Point(20, 130), ' 2.0K').draw(win) Text(Point(20, 80), ' 3.0K').draw(win) Text(Point(20, 30), ' 4.0K').draw(win) # Draw bar for initial principal barWidth = 45 height = principal * 0.05

27. Step 2: Writing the Code (con’t) bar = Rectangle(Point(50, 230), Point(50 + barWidth, 230 - height)) bar.setFill("green") bar.setWidth(2) bar.draw(win) # Draw bars for successive years for year in range(1, 6): # calculate value for the next year principal = principal * (1 + apr) # draw bar for this value xll = year * barWidth + 50 height = principal * 0.05 bar = Rectangle(Point(xll, 230), Point(xll + barWidth, 230 - height)) bar.setFill("green") bar.setWidth(2) bar.draw(win) input("Press to quit") win.close() main()

28. EXERCISE 5.10 Convert the bar chart above to a line chart as shown below:

29. 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.

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

31. 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)

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

33. EXERCISE 5.11 Modify triangle.py. For each 3-click, the program should generate a triangle for the three points.

34. END