Objects and GraphicsZelle - Chapter 5Charles Severance - www.dr-chuck.com

Textbook: Python Programming: An Introduction to Computer Science, John Zelle (www.si182.com)

Coverage

• 5.1, 5.2 - Objects

• 5.3 - Simple Graphics Programming

• 5.4 - Graphics Objects

• 5.6 - Coordinate Systems

• 5.7 - Interactive Graphics

• 5.8 - Documentation for the Graphics Objects

What is Object Oriented?

• Object Oriented Programming groups data and code into logically named reusable “Objects”

• We design our objects to make the most sense to the programmer using the object(s)

GraphWin object

Circle Object

Textobject

Programs “Orchestrate” Objectshttp://www.kapralova.org/MORAL.htm

Oboe

FluteClarinet

FrenchHorns

TimpaniTriangle

The objects have skills and abilities that the conductor does not have. The objects each have their individual music sheets. The conductor organizes and sequences

the objects - telling them when to start - when to stop - and how loud to be.

Objects

Two Steps

• First we must create the objects

• For the conductor - this is tapping on the music stand to get everyone’s attention

• For Programming this is called “constructing” the objects

• Then we link them together and use them

In Programming...

• Objects contain data - they “know stuff”

• Objects have capabilities - they “can do stuff” - they can perform operations

• I am a Circle

• I know my center is 50, 50

• I know my radius is 30

• I know I am red

• I can draw myself on a window if asked

Using Objects in Python

>>> from graphics import *>>> win = GraphWin()>>> win.setCoords(0,0,100,100)>>> t = Text(Point(50,10), "Centered Text")>>> t.draw(win)>>> center = Point(50,50)>>> circ = Circle(center,30)>>> circ.setFill('red')>>> circ.draw(win)

Objects “know stuff” and “do stuff”

# import all the functions in graphicsfrom graphics import *# construct a graphics windowwin = GraphWin()# set the soft dimensions of the window to be 100 x 100win.setCoords(0,0,100,100)# construct a text objectt = Text(Point(50,10), "Centered Text")# Tell the text object to draw itself on the windowt.draw(win)# Construct a circle centered at 50, 50 with radius of 30circ = Circle(Point(50,50),30)# Set the color of the circle to redcirc.setFill('red')# Tell the circle to draw itself on the windowcirc.draw(win)

Programming with Objects

• Create the objects (construct the objects)

• win = GraphWin()

• Alter data stored in the object

• circ.setFill(‘red’)

• Tell the object to perform some operation

• circ.draw(win)

The Art of Object Oriented Design

• People craft their objects to be easy and natural to use

• Objects often also mimic the real world

Using the Zelle Graphics Object

Graphics Objects

• Take care of all of the mundane details when drawing images, text boxes, and shapes in graphics

• You can look at the source code if you like

• You must have graphics.py in the same directory as your program

$ ls -ltotal 80-rw-r--r--@ 1 csev staff 34093 Feb 18 13:36 graphics.py-rw-r--r-- 1 csev staff 238 Feb 18 13:38 simple.py$ cat simple.pyfrom graphics import *

win = GraphWin()win.setCoords(0,0,100,100)t = Text(Point(50,10), "Centered Text")t.draw(win)center = Point(50,50)circ = Circle(center,30)circ.setFill('red')circ.draw(win)

where = win.getMouse()print wherecharles-severances-macbook-pro:simple csev$ python simple.pyPoint(36.683, 66.834)

Choosing Coordinate System

• When placing objects on the window, you have two choices

• Actual pixels on the screen

• A logical coordinate system

z-143

Using Actual Pixels

• You can use actual pixels - but you are responsible when the screen is resized.

from graphics import *

win = GraphWin("A Title", 200, 200)circ = Circle(Point(50,50),30)circ.setFill('red')circ.draw(win)

where = win.getMouse()print where

(50,50)

(200,200)

(0,0)

Using a Logical Coordinate System• You can place objects into a logical coordinate system that lays on top

of the pixels. When using logical coordinates, the lower left is 0,0

from graphics import *win = GraphWin("A Title", 200, 200)win.setCoords(0,0,1,1)circ = Circle(Point(0.25, 0.75),0.15)circ.setFill('red')circ.draw(win)where = win.getMouse()print where (0.0,0.0)

(0.25,0.75)

(1.0,1.0)

Which Coordinate System?

• For early applications it is simplest to use a logical coordinate system from (0,0) to (1,1)

• This is easier to visualize as coordinates are a percentage of the overall screen height

• Later when you want more precise control over every pixel, you can switch to actual pixels.

The “Contract”

• The builder of the object (In this case John Zelle) defines a “contract” that is provided to we programmers who are using the object

• We must follow the contract to get at the features and capabilities in the object

z-151

Creating a Graphic Window

>>> from graphics import *>>> win = GraphWin()>>> win2 = GraphWin("My Title", 300, 300)

A Point Object

• A point object captures an X, Y position - we use point objects to indicate where things are to be placed on a window

>>> pt = Point(10,10)>>> print ptPoint(10, 10)

A Circle Object

• We can make a Circle with a center point and radius

• We can retrieve data from the Circle object if we like

• Making a Circle does not draw the Circle on the window

• We make the circle, then set up some things like color - and then draw the circle

A Circle Object

Retrieve information

from a circle.

Construct (create) a circle

object.

Common Capabilities

This shows capabilities that many different objects can do. For example all objects

can draw themselves on a window or set a

fill color.

A Rectangle Object

• Rectangles are described by their corners

>>> win = GraphWin()>>> win.setCoords(0,0,1,1)>>> r1 = Rectangle(Point(0.1, 0.1), Point(0.5, 0.5))>>> r1.setFill('red')>>> r1.draw(win)

(0.1,0.1)

(0.5,0.5)

Mouse Clicks• You can wait for a mouse click and then get the point where the

mouse was clicked

>>> win = GraphWin()>>> win.setCoords(0,0,1,1)>>> r1 = Rectangle(Point(0.1, 0.1), Point(0.5, 0.5))>>> r1.setFill('red')>>> r1.draw(win)>>> where = win.getMouse()>>> print wherePoint(0.90452, 0.79397)

Click here

z-146

from graphics import *

win = GraphWin("Circles", 300, 300)win.setCoords(0,0,1,1)for i in range(5): where = win.getMouse() print i, where circ = Circle(where, 0.1) circ.setFill('green') circ.draw(win)

win.getMouse()

$ python circles.py0 Point(0.14716, 0.86288)1 Point(0.13712, 0.61873)2 Point(0.32107, 0.57191)3 Point(0.34114, 0.48495)4 Point(0.71906, 0.26421)

Putting Text on the Screen

• We can create a text object centered at a particular position on the screen

• We can set various attributes about the text

Simple Text Example

>>> win = GraphWin()>>> win.setCoords(0,0,1,1)>>> txt = Text(Point(0.5, 0.9), "Hello")>>> txt.draw(win)

Reading Text Input

Reading Input from Screen

$ cat entry.pyfrom graphics import *win = GraphWin()win.setCoords(0,0,1,1)entry = Entry(Point(0.5,0.5),20)entry.draw(win)win.getMouse()print entry.getText()$ python entry.py Fun to type

Using Images

from graphics import *

win = GraphWin("Sakaiger", 400, 400)win.setCoords(0,0,1,1)for i in range(5): where = win.getMouse() print i, where img = Image(where, "sakaiger-150.gif") img.draw(win)

win.getMouse()

$ python image.py0 Point(0.74937, 0.71178)1 Point(0.43108, 0.52381)2 Point(0.68922, 0.33584)3 Point(0.09774, 0.92481)4 Point(0.15539, 0.37845)

Advanced Feature - Games

• For games - you cannot wait for a mouse click - the game must continue even if you don’t click

• Clicking in the game can change the game

• There is a feature in a newer version of graphics.py to read the mouse without waiting

New Features

• win.clearLastMouse()

• Clears the last clicked position of the mouse

• win.getLastMouse()

• Gets the last clicked position of the mouse without waiting

from graphics import *import time

win = GraphWin()win.setCoords(0,0,1,1)

circle = Circle(Point(0.5,0.5), 0.1)circle.draw(win)

win.clearLastMouse()while True: circle.move(0.01, 0.01) time.sleep(.1) last = win.getLastMouse() if last != None : if last.getX() > 0.9 and last.getY() > 0.9: break circle.undraw() circle = Circle(last, 0.1) circle.draw(win) win.clearLastMouse()

Summary

• The Object Oriented Approach gives us access to objects to do our work

• We don’t need to worry about how the objects get their work done.

• The Zelle Graphics Objects provide a simple set of capabilities to allow us to do graphics in Python