Introductory Objects and Graphics 1

Wes Griffin & Sue Evans

Adapted from the CS1 Course at Swarthmore College by Lisa Meeden

Hit the space bar for next slide

Learning Outcomes

A basic understanding of object-oriented programming concepts.
An ability to create objects and call methods on objects.
Familiarity with the graphics library included with the textbook.

Procedural Programming

The classic style of computer programming is called procedural programming.

Statements are executed sequentially, one after the other.
```
>>> x = 3.5
>>> y = 4.7
>>> print x * y
```
- First, x is assigned the value 3.5
- Second, y is assigned the value 4.7
- Finally, the result of x * y is printed
Data is passive, that is, functions operate on data.
```
>>> len("spam")
>>> ord('a')
```
Data and the functions that operate on the data are separate.

Object-Oriented Programming

There is a more recent style of computer programming called object-oriented programming.

Data and methods are combined into objects.
Objects know stuff and can do things.
Objects interact by sending each other messages.
A message is a request for an object to perform one of its actions.
We call methods on objects to send messages to them.

Imagine a program to manage an ATM. Each account the ATM knows about is an object. The account objects hold pieces of data and respond to certain messages.

Class: BankAccount(name, startingBalance)
Data: accountNumber, name, balance
Methods: getBalance, makeDeposit, makeWithdrawal

Creating Objects and Sending Messages

To create an object of a class we call the constructor:
<className>(<param1>, ...)

>>> acct1 = BankAccount("Betsy Horner", 1000)
>>> acct2 = BankAccount("Jordan Wales", 675)

To call methods on objects, we use dot notation:
<object>.<methodName>(<param1>, ...)

>>> acct1.getBalance()
1000
>>> acct1.makeDeposit(500)
>>> acct1.getBalance()
1500
>>> acct2.makeWithdrawal(200)
>>> acct2.getBalance()
475

We are going to explore objects in the context of simple graphics programming.

<class-name> refers to the class that we want to create a new instance of. For example, GraphWin is the class name.
The <param1>, ... refer to parameters that can be passed to the constructor. The number and type of the parameters differs based on the class.

Creating and Closing Windows

The textbook provides an easy-to-use module for working with graphics in Python. To use the module, it has to be imported first:
```
>>> from graphics import *
```
To work with graphics, we need a canvas, or window on the screen. A window is an object of the class GraphWin. To create a window, we call the GraphWin constructor:

>>> window = GraphWin()

A new window will appear on the screen. We call the object representing this window an instance. The instance has been assigned to the variable window.

The GraphWin class defines a number of actions for window objects, one being close. To call the close method on the window object, we use dot notation:

>>> window.close()

More On Windows

A window is made up of two-dimensional grid of pixels.
The horizontal axis is called X.
The vertical axis is called Y.
The upper lefthand corner is the origin (0, 0).
The lower righthand corner is (width, height).

The GraphWin constructor takes three parameters: title, width, and height:

>>> GraphWin(<title>, <width>, <height>)

When the parameters are not specified, they have the following default values:

title: Graphics Window
width: 200
height: 200

Object Data and Methods

Once we have created an instance of a class, we access the data it holds using dot notation:

>>> window = GraphWin()
>>> window.width
200

If we create another instance of a class, it has different data:

>>> newWindow = GraphWin("My Window", 500, 500)
>>> newWindow.width
500

To access methods of an object, we use dot notation. Depending on how they are defined, methods may take parameters:

>>> window.setBackground("red")

Methods only affect the object they are called on:

>>> newWindow.setBackground("purple")

More on Object References

The Point class defines a single point, or pixel, on the window. The constructor takes two arguments, an x and y coordinate:

>>> p = Point(50, 60)

When a new instance of a point is created, the variable (p) refers to that object.
If we create another instance, we have a different object and reference:

>>> q = Point(100, 300)

If we make the following assignment:
```
>>> q = p
```
then the q variable now references the object pointed to by p:

Objects Referencing Other Objects

Objects can refer to other objects as part of the object data.
The Circle class defines a circle with a center and a radius.
The constructor has two parameters, a Point specifying the center and a radius:
```
>>> circ = Circle(Point(100, 300), 30)
```
Notice that we create an instance of Point as we create an instance of Circle.
To actually draw the circle in one of the windows, we have to use the draw method

>>> circ.draw(newWindow)

Drawing Lines

The Line class defines how to draw a single line.

The constructor has two parameters, a start Point and an end Point:

>>> line = Line(Point(50, 100), Point(175, 325))
>>> line.draw(newWindow)

Notice that we create two instances of Point as we create an instance of Line.

Tic-Tac-Toe Exercise

How would you draw this tic-tac-toe board ?

Since you've just seen the graphics library syntax for the first time, you need not write correct Python code for this exercise. You can just show the calculations you would use to determine where each of the Points should be and which of those Points will be connected with a line.

Changing Coordinate Systems

So far we have been using window coordinates to specify locations for primitives.
So how did you draw the tic-tac-toe board ?

You might try to draw two vertical lines at one-third and two-thirds of the window width and corresponding horizontal lines at one-third and two-thirds of the window height.
These calculations necessarily depend on the width of the window.
Is there a better way?

What if we could change the coordinates of the window so that:
The upper lefthand corner is still the origin (0, 0).
The lower righthand corner is (3, 3).

Then we could draw vertical lines from (1, 0) to (1, 3) and (2, 0) to (2, 3) and horizontal lines from (0, 1) to (3, 1) and (0, 2) to (3, 2).
The window class has a setCoords() method that does just this.

Tic-Tac-Toe Window

from graphics import *

def main():
    win = GraphWin("Tic-Tac-Toe", 400, 400)

    # set coordinates to go from (0,0) in upper left to (3,3) in lower right
    win.setCoords(0.0, 0.0, 3.0, 3.0)

    # draw vertical lines
    Line(Point(1, 0), Point(1, 3)).draw(win)
    Line(Point(2, 0), Point(2, 3)).draw(win)

    # draw horizontal lines
    Line(Point(0, 1), Point(3, 1)).draw(win)
    Line(Point(0, 2), Point(3, 2)).draw(win)

    # wait for a mouse click before closing window
    win.getMouse()
    win.close()

main()