In class notes week 4

So far, we have been learning one style of programming known as procedural programming. This style has two main players data and functions. Data are stored in variables and play a rather passive role. Variables can only store information, they can't really do anything with that information. Functions on the other hand, can process information (input) and generate new data (output). Think of some of the functions we have seen so far. What input do they take and what output do they generate?

Object oriented programming combines elements of variable and functions into objects. Each object can store data like a variable, but unlike a variable, object can call methods which can change or return information like a function. The data that an object is stored is called that particular object's state. Each object is a particular instance of a class. A class describes the general properties of objects in the class, and the general methods, but does not describe the state for any particular instance. Let's make this a bit more concrete. Let's think about the class of people we know as Students. Students in general have some properties that describe their state. What might some of these properties be? Students also might perform certain actions. What might some of these actions be? A Student object is a particular student you might have in mind. That student has specific values for the general properties described by the Student class.

The Graphics Class

One natural use for object oriented programming (OOP) is for drawing graphical shapes (objects). The author of the textbook has designed a special graphics module for use in this class.

>>> import graphics
>>> help(graphics)
>>> from graphics import *

We also have posted a Graphics Quick Reference online. Objects are created by calling a constructor. The constructor has the same name as a class and is responsible for creating specific instance of a class (an object). Let's create a graphics window and add some objects.

>>> win=GraphWin("hello", 200, 200)
>>> center = Point(100,100)
>>> center.draw(win)
>>> circ1 = Circle(center, 50)
>>> circ1.draw(win)
>>> circ1.setFill("red")

Try creating some more objects and trying out their methods.

Exercises

Create a w04-graphics subdirectory in your cs21/class directory. Then from within your week04 subdirectory, copy over some python files from my public directory:

    $ cd 
    $ cd cs21/inclass
    $ pwd
      /home/your_user_name/cs21/inclass

    $ mkdir w04-graphics     
    $ cd w04-graphics
    $ pwd
      /home/your_user_name/cs21/inclass/w04-graphics

    $ cp ~adanner/public/cs21/w04-graphics/* .
    $ ls
      animate.py  bullseye.py  circle_shift.py  test_graphics.py

The graphics library

To use the graphics library, first import it at the top of your program:

  from graphics import *

Next create a new graphics window object, and then create gui objects to draw into this window:

   
   # creates new GraphWin object, 500x500 pixels in size
   win = GraphWin("My GUI Program", 500, 500)
   
   # creates a new Circle object centered at 50,50 with a radius of 20 pixels
   circ = Circle(Point(50,50), 20)

   # invoke the setFill method of the Circle object referred to by circ  
   circ.setFill("red")                
   
   # draw the Circle object refered to by circ in GraphWin win
   circ.draw(win)

We are going to do some of the following together in class:

open test_graphics.py in vim. It contains some example code that draws different type objects to one of two graph windows. Let's try changing some things.
open bullseye.py. Together we are going to write a program that draws a bullseye to the graphics window. It should consist of 4 concentric circles, of two or more colors, that are drawn centered in the graphics window.
open circle_shift.py. Try running it in python. Together we will change this program so that after first drawing the initial cirle, each time the user clicks on a new spot, the circle is shifted to the new location. The shifting will happen four times, and on the fifth mouse click the program will exit.
open animate.py. Let's look at this program together. Once we figure out what it is doing, lets change the code so that the animation will be repeated 3 times, each end point will be determined by the user's mouse click. If we want to repeat the same action multiple times, what language construct do we use? ...

Built-in classes

Note: we may not get to this topic this week. You will not be asked to know this material until we cover it in class. It turns out two of the data types we have talked about so far, are really built-in classes in python; strings and lists. We will introduce method dot notation on these classes and then examine classes for graphics that are custom built for the textbook.

>>> s="hello"
>>> s.upper()
'HELLO'

In this context, upper is a method in the string class and can operate on any string object. If you would like to know which methods are available in the string class, run help(str) in the python shell. Note there are many more methods in the string class than there are functions in the string module. The general syntax for calling a method on a object is

<object name>.<method name>(<parameters>)

In the string class, upper, lower, title, isupper, islower, isalpha, split,join, and strip are all methods you are likely to use at least once this semester.

Lists are the other type of built-in data type that are actually part of a class. If you type help(list) in the python shell, you will get a list of list methods. Ignore the ones beginning with underscores __. Take a look at append and reverse. We'll talk about others as needed.

>>> l=range(5)
>>> l=range(5)
>>> l
[0, 1, 2, 3, 4]
>>> l.append(7)
>>> l
[0, 1, 2, 3, 4, 7]
>>> silly = l.append(8)
>>> print silly
None
>>> print l
[0, 1, 2, 3, 4, 7, 8]
>>> l.reverse()
>>> l
[8, 7, 4, 3, 2, 1, 0]
>>>

What does append return? What does append do? The answers to these questions are a common source of confusion for beginners (and even sometimes experts.)

OOP and Graphics

The graphics library