Introductory Objects and Graphics 2

Sue Evans & Wes Griffin

Adapted from the CS1 Course at Swarthmore College by Lisa Meeden

Press space bar for next slide

Learning Objectives

Become more familiar with object-oriented programming terms
An ability to create objects and call methods on objects
Explore the different classes of the graphics library
Examine the code necessary to use the graphics library

Objects and Methods Review

Objects are created by calling the constructor of a class:

>>> win = GraphWin("Circles", 500, 500)
>>> circ = Circle(Point(100, 300), 30)

Object data and methods are accessed using dot notation:

>>> win.width
500
>>> win.setBackground("purple")
>>> circ.setFill("yellow")
>>> circ.draw(win)

We say circ refers to an instance of the Circle class.
Graphics Library Quick Reference

Interactive Graphics

Graphics programs are almost always interactive.
Users can click on buttons, select menu items, and type in text fields.
Graphics programs use a technique called event-driven programming to handle input from the user.
The graphics module we are using handles this aspect for us and provides a few simple methods for handling user input.

Mouse Input

The GraphWin class defines a getMouse() method that waits for the user to click the mouse and then returns a Point representing where the mouse click occurred:

>>> from graphics import *
>>> win = GraphWin("Click Me!")
>>> for i in range(10):
>>>     p = win.getMouse()
>>>     print "You clicked (", p.getX(), ",", p.getY(), ")"
>>>     print "You clicked (%d, %d)" % (p.getX(), p.getY())
>>> win.close()

Here's the output

You clicked ( 91 , 29 )
You clicked (91, 29)
You clicked ( 47 , 110 )
You clicked (47, 110)
You clicked ( 196 , 170 )
You clicked (196, 170)
You clicked ( 14 , 7 )
You clicked (14, 7)
You clicked ( 94 , 103 )
You clicked (94, 103)
You clicked ( 196 , 6 )
You clicked (196, 6)
You clicked ( 6 , 194 )
You clicked (6, 194)
You clicked ( 93 , 196 )
You clicked (93, 196)
You clicked ( 198 , 196 )
You clicked (198, 196)
You clicked ( 36 , 47 )
You clicked (36, 47)

Circle Methods

The next example we'll see is more complex, and uses the following methods of the Circle object.
The setOutline() and setFill() each have a single parameter to specify the color of the outline or fill of a circle respectively:

>>> circ = Circle(Point(50, 50), 20)
>>> circ.setOutline("red")
>>> circ.setFill("yellow")

The draw() method draws the circle on a GraphWin object passed as the parameter:

>>> win = GraphWin("Circles")
>>> circ.draw(win)

The getCenter() method returns a Point object that indicates where the center of the circle is:

>>> center = circ.getCenter()
>>> print "The center is at (%d, %d)" % (center.getX(), center.getY())
The center is at (50, 50)
>>>

Moving Circles

A more interesting example using mouse input, is to move a circle to wherever the user clicks in a window:

>>> win = GraphWin("Moving Circles", 500, 500)
>>> circ = Circle(Point(100,100), 50)
>>> circ.setOutline("red")
>>> circ.setFill("red")
>>> circ.draw(win)

>>> for i in range(5):
>>>    moveTo = win.getMouse()
>>>    current = circ.getCenter()
>>>    dx = moveTo.getX() - current.getX()
>>>    dy = moveTo.getY() - current.getY()
>>>    circ.move(dx,dy)

Moving Circles Step-By-Step

The first half of the code creates the window and circle and draws the circle:

>>> win = GraphWin("Moving Circles", 500, 500)
>>> circ = Circle(Point(100,100), 50)
>>> circ.setOutline("red")
>>> circ.setFill("red")
>>> circ.draw(win)

The second half of the code is more interesting; it starts by getting the Point on the screen where the mouse was clicked and the Point where the circle is currently located:

>>> moveTo = win.getMouse()
>>> current = circ.getCenter()

Given the two points, the program can calculate the distance between those points:

>>> dx = moveTo.getX() - current.getX()
>>> dy = moveTo.getY() - current.getY()

The circle is then moved, relative to its current position, to where the mouse was clicked:

>>> circ.move(dx, dy)

Animation

We've seen how we can move objects in the graphics window using the move() method.
As soon as move() is called on an object, it is instantly moved.
Could we use the move() method to animate the movement of objects?
What if we moved an object only a small amount towards the final destination of the object?
Could we pause for a little bit and then move the object closer?
We could continue to do this until we had moved the object to its final position.

We need a method from the time module to accomplish this: sleep().
This method is passed a float representing the number of seconds to pause the program before continuing execution:

from time import sleep
sleep(1.0) # Pause for 1 second

Displaying Text

We can use a new class Text to display text in the window.
The constructor has two parameters, a Point specifying the center of the text and the text to draw:

>>> text = Text(Point(100, 180), "This is a string")

The Text class has a few useful methods:

setSize() sets the size of the displayed text.
setStyle() sets a style for the text. Possible values are: 'bold', 'normal', 'italic', 'bold italic'
setFace() sets the typeface for the text. Possible values are: 'helvetica', 'arial', 'courier', 'times roman'
setText() changes the text currently displayed by the object to the new string that's passed to this method.

Drawing Connected Lines

Another example using mouse input is to draw lines where the user clicks:

# Filename: tenlines.py
# Author:   Wes Griffin & Sue Evans
# Date:     5/?/09
# Section:  All
# Email:    bogar@cs.umbc.edu
#
# This program draws connected lines using mouse
# clicks as input for the next line position.


from graphics import *


# drawLines() draws 10 connected lines using mouse
# clicks to get the position of the next line
# Inputs: none
# Output: none
def drawLines():
    win = GraphWin("Drawing Lines", 400, 400)
    win.setBackground("cyan")
    
    msg = Text(Point(200, 380), "Click mouse to draw 10 connected lines")
    msg.setSize(12)
    msg.setStyle('bold')
    msg.draw(win)
    
    p1 = Point(20, 20)
    circ = Circle(p1, 5)
    circ.setFill('black')
    circ.draw(win)

    for i in range(10):
        p2 = win.getMouse()
        circ = Circle(p2, 5)
        circ.setFill('black')
        circ.draw(win)
        line = Line(p1, p2)
        line.setWidth(2)
        line.draw(win)
        p1 = p2

    msg.setText("Click once more to quit")
    win.getMouse()
    win.close()



def main():

    drawLines()


main()

Additional User Input

The Entry class provides a text box that a user can type into.
The constructor takes two parameters, a Point specifying the center of the entry and a width:

>>> entry = Entry(Point(100, 100), 25)

Once an entry instance has been drawn into a window, the user can type text into the box.
The text can be retrieved by the getText() method on the entry instance.

The getText() method returns the string the user typed in the entry box, however, this string may contain initial or following spaces. So string.strip should be used to remove the spaces before using the string.

>>> fill = entry.getText()
>>> circle.setFill(string.strip(fill))

If what is entered is to be used as a number, it's necessary to use eval to change the string to a number

>>> length = eval(entry.getText())

The Entry class also has the set of methods for the Text class for setting the size, style, and typeface of the text.