1. Xiaojuan Cai Computational Thinking 1 Lecture 5 Objects and Graphics Xiaojuan Cai （蔡小娟） cxj@sjtu.edu.cn Fall, 2015

2. Xiaojuan Cai Computational Thinking 2 Objective To understand the concept of objects. To be familiar with the various objects available in the graphics library. To understand the fundamental concepts of computer graphics. To be able to write simple interactive graphics programs using the graphics library.

3. Xiaojuan Cai Computational Thinking 3 Roadmap Object-oriented approach Graphics programming Graphics objects graphics.py Example: future value Interactive graphics

4. Xiaojuan Cai Computational Thinking 4 OO methodology data type = data + operations. The traditional programming view: data is passive – it ’ s manipulated and combined with active operations. The object-oriented approach: data is active – it carries out operations.

5. Xiaojuan Cai Computational Thinking 5 Basic idea of OO Object-oriented: software systems are interaction of objects. Objects know stuff (contain data) and they can do stuff (have operations). Computation (interaction): sending message to objects. Pure OO: everything is Object.

6. Xiaojuan Cai Computational Thinking 6 Example: student The student object would contain data like: Name, ID number, Courses taken, Home Address, GPA, … The student object would response to these messages: printHomeAddress Print GPA, ….

7. Xiaojuan Cai Computational Thinking 7 Example: student Print the home address of all the students. Traditional: for every student check the data, find out the home address and print it OO: for every student send printHomeAddress message ( student.printHomeAddress() )

8. Xiaojuan Cai Computational Thinking 8 Everything is object Each course might be an object containing data: Instructor Student roster … And operations: Add/delete a student …

9. Xiaojuan Cai Computational Thinking 9 Basic concepts of OO Class: the template of objects, defining the types of data an object can have and operations it can do. Object: the instance of some class Objects of the same class can have different data, E.g., Student A and B have different ID numbers. Message = operation = methods

10. Xiaojuan Cai Computational Thinking 10 Roadmap Object-oriented approach Graphics programming Graphics objects graphics.py Example: future value Interactive graphics

11. Xiaojuan Cai Computational Thinking 11 Graphics programming Graphical User Interfaces (GUI) provide windows, icons, buttons and menus. Graphics libraries: Python standard libray: Tkinter Zelle’s graphics.py (beginner-friendly) Put graphics.py in the lib folder, or in the same folder with your graphics programs. http://mcsp.wartburg.edu/zelle/python/, put it in your site-package http://mcsp.wartburg.edu/zelle/python/

12. Xiaojuan Cai Computational Thinking 12 Simple test >>> import graphics >>> win = graphics.GraphWin() >>> win.close() >>> from graphics import * >>> win = GraphWin()

13. Xiaojuan Cai Computational Thinking 13 Graphics window A graphics window is a collection of pixels. Default size: 200 pixels * 200 pixels. Predefined geometric shapes: point, line, circle, oval, rectangle, polygon, text, button, …

14. Xiaojuan Cai Computational Thinking 14 Point Point = 1 pixel Create a new point: p = Point(x,y) Operations include: p.getX(), p.getY(), p.draw(win), p.undrawn p.move(dx,dy), p.setfill(c), p.setOutline(c) p.clone()

15. Xiaojuan Cai Computational Thinking 15 Line Create a new line: l = Line(p1,p2) Operations include: l.getP1(), l.getP2() l.setArrow(string) l.getCenter()

16. Xiaojuan Cai Computational Thinking 16 Circle Create a new circle: c = Circle(p1,r) Operations include: c.getCenter(), c.getRadius() c.getP1(), c.getP2()

17. Xiaojuan Cai Computational Thinking 17 Rectangle Create a new rectangle: rec = Rectangle(p1,p2) Operations include: rec.getCenter(),rec.getP1(), recc.getP2()

18. Xiaojuan Cai Computational Thinking 18 Oval Create a new oval: o = Oval(p1,p2) Operations include: o.getCenter(), c.getP1(), c.getP2()

19. Xiaojuan Cai Computational Thinking 19 Polygon Create a new polygon: p = Polygon(p1,p2,…), or p = Polygon(pointsList) Operations include: p.getPoints()

20. Xiaojuan Cai Computational Thinking 20 Text Create a new text: t = Text(center,text) Operations include: t.settext(newtext),t.gettext(), t.setcolor(c)

21. Xiaojuan Cai Computational Thinking 21 Sample codes >>> win = GraphWin('Shapes') >>> center = Point(100, 100) >>> circ = Circle(center, 30) >>> circ.setFill('red') >>> circ.draw(win) >>> label = Text(center, "Red Circle") >>> label.draw(win) >>> rect = Rectangle(Point(30, 30), Point(70, 70)) >>> rect.draw(win) >>> line = Line(Point(20, 30), Point(180, 165)) >>> line.draw(win) >>> oval = Oval(Point(20, 150), Point(180, 199)) >>> oval.draw(win)

22. Xiaojuan Cai Computational Thinking 22 Objects: creation Create an object from a class: = (, ) Send message to objects:. (,,…)

23. Xiaojuan Cai Computational Thinking 23 Draw a circle

24. Xiaojuan Cai Computational Thinking 24 Make a copy Wrong code leftEye = Circle(Point(80,50),5) rightEye = leftEye rightEye.move(20,0) Correct code leftEye = Circle(Point(80,50),5) rightEye = Circle(Point(100,50),5) Better code leftEye = Circle(Point(80,50),5) rightEye = leftEye.clone() rightEye.move(20,0) leftEye rightEye leftEye rightEye

25. Xiaojuan Cai Computational Thinking 25 Review: variables >>>x = 3 >>>type(x) >>>x = 'hi' >>>type(x) >>>x = Point(3,3) >>>type(x) x3 ih Point(3,3)

26. Xiaojuan Cai Computational Thinking 26 Review: alias 3y >>>x = 3 >>>y = x >>>x = 'hi' xih>>>x = 3 >>>y = x >>>x = x + 1 x 3y 4 >>>x = [1,2,3] >>>y = x >>>x[2] = 4 x 1y 4 23

27. Xiaojuan Cai Computational Thinking 27 Roadmap Object-oriented approach Graphics programming Graphics objects graphics.py Example: future value Interactive graphics

28. Xiaojuan Cai Computational Thinking 28 Future value Print an introduction Input principal and apr Repeat 10 times: principal = principal * (1 + apr) Output the principal Graphing future values

29. Xiaojuan Cai Computational Thinking 29 Design the graphic view

30. Xiaojuan Cai Computational Thinking 30 setCoords(xll,yll,xur,yur) The lower-left corner (xll,yll), the upper- right corner (xur,yur). All the subsequent drawing will be done w.r.t. the altered coords except for plotPixel Advantages: Easy to program Adjust automatically if you change the size of canvas.

31. Xiaojuan Cai Computational Thinking 31 Roadmap Object-oriented approach Graphics programming Graphics objects graphics.py Example: future value Interactive graphics

32. Xiaojuan Cai Computational Thinking 32 GUI Users interact with applications by Clicking a button, choosing items from menus, and typing information into text boxes. Event-driven programming draws interface elements and then waits for events.

33. Xiaojuan Cai Computational Thinking 33 Getting Mouse Clicks GraphWin class has getMouse method, which once invoked, will cause the program pauses and wait for the mouse clicks. And it will return the point where the user clicked. win = GraphWin("Click Me!") p = win.getMouse() print "You clicked (%d, %d)" % (p.getX(), p.getY())

34. Xiaojuan Cai Computational Thinking 34 Handling Textual Input There ’ s also an Entry object that can get keyboard input. It understands setText and getText, with one difference that the input can be edited. input = Entry(Point(2,3), 5) input.setText("0.0") celsius = eval(input.getText())

35. Xiaojuan Cai Computational Thinking 35 Conclusion An object is a computational entity that combines data and operations. Every object is an instance of some class. The graphics module provides a number of classes: GraphWin, Point, Line, Circle, Oval, Rectangle, Polygon, Text, Entry, … Alias can cause unexpected results. Use clone instead.