1. 1 Python Programming: An Introduction to Computer Science Chapter 3 Objects and Graphics

2. 2 Object Oriented Programming The ‘classic’ point of view of a programmer was that the program instructions were the active part, the data just sat there and was manipulated. A new paradigm became popular in the 80’s: OOP The idea is that programs should be considered as interactions of objects. An object was a structure that “knew things” (i.e. had data values) and “did things” (i.e. had operations to do on the data) (There’s quite a bit more to the paradigm than that, but that will do for now.)

3. 3 OOP (cont) Modern computer programs are built using an object-oriented approach. Most applications you ’ re familiar with have Graphical User Interfaces (GUI) that provide windows, icons, buttons and menus. These were provided as classes to the programmer – they did NOT have to write everything from scratch to make an interface. This is why people like OOP – the details can be ignored, the objects do things for you!

4. 4 Graphics Library A commonly used graphics library for Python is named Tkinter. This is not a simple package to use! The author of this book (Zelle) wrote a library “on top of” Tkinter, to make it easier to use. It’s called graphics.py First check to see if you have it already C:\Python32\Lib\site-packages\graphics.py If you don’t, go to Zelle’s site and get it Graphics Module Reference: Graphics Module Reference

5. Python Programming, 2/e5 Graphics Library This chapter uses the graphics.py library supplied with the supplemental materials. Two locations you can put the file In Python ’ s Lib\site-packages directory with other libraries In the same folder as your graphics program

6. 6 Objects in Graphics The graphics library is set up as a collection of object templates Point, Circle, Rectangle, Line and so on These templates are called “classes”. They are the “pattern” for what a particular object should be. Example: a Point class would have data about the position of the point (x, y) and functions that could do things with that information

7. 7 Objects in Graphics You call a function called a “constructor” to make a new object from the class. Constructor methods are almost always the same name as the name of the class. (Objects are also called “instances”.) Once you have an object constructed, it has a name. You can give the object commands by calling the methods (functions) that it knows about.

8. 8 Objects in Graphics Example: p = Point(200, 300) # p is now an object from class Point p.draw(win) p.move(0, 5) Note the syntax: “dot notation”. The statement or expression starts with the object name, followed by a dot, then the name of the method and its arguments, if any.

9. Setup for using graphics You have to import the graphics library You can use either “import graphics” or “from graphics import *” or “from graphics import GraphWin, Point, Circle” If you use “import graphics” you then refer to all the functions from the library as “win = graphics.GraphWin()” If you use one of the other imports, you can omit the “graphics.”

10. GraphWin Objects A GraphWin object represents a window on the screen where graphical images may be drawn. A program may define any number of GraphWins.

11. Creating a Graphics Window to draw on Typically the first thing done win = GraphWin() This is a call to a constructor to make a GraphWin object. It has no arguments but it still needs the parentheses to make Python see it as a function call The object that is returned from the constructor is stored in the variable win

12. Creating a Graphics Window to draw on GraphWin(title, width, height): Constructs a new graphics window for drawing on the screen. The parameters are optional, the default title is ``Graphics Window'‘ and the default size is 200 x 200. There are optional arguments: first argument is the title of the window (in the title bar), the 2 nd and 3 rd arguments are the width and height in pixels (a pixel is the smallest location on the screen which can be turned ‘on’ or ‘off’)

13. Coordinate system The graphic window uses a coordinate system It uses two numbers, x and y, to refer to a location on the window The origin of the system by default, is the upper left corner of the graphics window. Note that this makes the y coordinates behave differently than you are used to in algebra.

14. Coordinate system Y coordinates start at 0 at the TOP of the window and increase as the location moves DOWN the window. X coordinates behave normally, 0 at the left and increases as you move right on the window. Yes, there is a way to change this if you want.

15. What methods you can use? Suppose right now you have created a graphic window. win = GraphWin() What method can you use?

16. Coordinate system setCoords(xll, yll, xur, yur): Sets the coordinate system of the window. The lower-left corner is (xll, yll) and the upper-right corner is (xur, yur). All subsequent drawing will be done with respect to the altered coordinate system e.g. win.setCoords(0, 0, 20,20)

17. Ending a graphics program Please do these things! If you forget them, you can eventually lock up your IDE and sometimes even your operating system! At the end of the graphics part of the program, you want two lines win.getMouse() win.close()

18. Ending a graphics program This assumes you have a graphics window called win. It waits for the user to click somewhere in the window, then closes the window.

19. Ending a graphics program getMouse(): Pauses for the user to click a mouse in the window and returns where the mouse was clicked as a Point object. close(): Closes the on-screen window. Again: win.getMouse(), win.close()

20. Point Class Point(x,y) : Constructs a point having the given coordinates. The two methods that can be used by the instance of Point class getX()Returns the x coordinate of a point. getY()Returns the y coordinate of a point.

21. Line class What is needed to specify a line? The easiest way is with 2 points line1 = Line(Point(100, 25), Point(17, 92)) This creates an object called line1, which is actually a line segment drawn from one point to the other point given

22. Line class When you are ready to display the line on the graphics window, you use the statement line.draw(win) This assumes that win is a GraphWin which has already been set up

23. Circle class What information does the computer need to draw a circle? A center point and a radius (distance from center to edge of circle) my_eye = Circle(Point(100, 150), 25) This creates an object called my_eye which is a circle. It has two arguments; first one is a Point object, second one is a number (can be integer or float)

24. Circle class This does NOT make the circle appear on the graphics window, you have to call the draw method my_eye.draw(win) You can do other things with the Circle object before you draw it, like setFill (to change color), setWidth (to make the line thicker), etc.

25. Rectangle class What is needed to specify a rectangle? There are several ways, but the easiest is to give two Points. One is considered the upper left corner and the other is the lower right corner. Which one is which? Does not matter, the library figures it out.

26. Rectangle class rect = Rectangle(Point(100, 300), Point(300, 250)) This will draw a rectangle that is 200 pixels wide and 50 pixels tall (300-100) wide, (300-250) tall Just like the Circle class, this can be colorized, drawn on the graphics window, etc.

27. Polygon class A polygon is a generic shape. Its sides can be any length at any angle. How would you specify a shape like that? By giving all the points where the sides connect to each other.

28. Polygon class poly = Polygon(Point(100, 300), Point(300, 25), Point(70, 92)) This will draw a triangle. It draws a line segment from the first point to the second, from the second to the third and so on, and then a line segment from the last point to the first. Obviously the order of the points in the arguments matters!

29. Colors The colors available in this library are the ones available in the Tkinter library. There is a list of the color names with their colors here http://wiki.tcl.tk/37701 http://wiki.tcl.tk/37701 These can be used with setFill() to color the inside of a shape And with setOutline() to color the line which draws the shape