CSC111 Lab 10 2010

This lab deals with classes, objects, and graphics. It builds on the examples we saw in class on Monday and Wednesday.

You may find the following document describing the different graphic objects introduce in the Zelle's textbook useful.

Classes for a wheel and a Car

Below is the code we wrote in class yesterday:

# carNew.py
# D. Thiebaut
# first program using a class to define                                                                               
# a new graphic object: a wheel, which                                                                
# is made of 2 concentric circles.  The class
# Wheel supports methods to initialize the
# graphics object, draw it on the window,
# and move it.

from graphics import *
W = 400
H = 400

#----------------------------------------------------------------
class Wheel:
    """A class with two concentric circles"""

    def __init__( self, center, r1, r2 ):
        """constructor"""
        self.radius1 = min( r1, r2 )
        self.radius2 = max( r1, r2 )
        self.circ1 = Circle( center, self.radius1 )
        self.circ2 = Circle( center, self.radius2 )
        
    def draw( self, win ):
        """draws the wheel on the graphics window win"""
        self.circ2.draw( win )
        self.circ1.draw( win )

    def move( self, dx, dy ):
        self.circ1.move( dx, dy )
        self.circ2.move( dx, dy )

    def setFill( self, color1, color2 ):
        self.circ1.setFill( color1 )
        self.circ2.setFill( color2 )

    def getRadius1( self ):
        """returns the smallest radius"""
        return self.radius1

    def getRadius2( self ):
        """returns the largest radius"""
        return self.radius2

class Car:
    def __init__( self, P1, P2 ):
        self.body = Rectangle( P1, P2 )
        w =abs( P2.getX()-P1.getX() )
        h =abs( P2.getY()-P1.getY() )
        center1 = Point( w/4+P1.getX(), P2.getY() )
        center2 = Point( P2.getX()-w/4, P2.getY() )
        r2      = w/8
        r1      = r2/2
        self.w1 = Wheel( center1, r1, r2 )
        self.w2 = Wheel( center2, r1, r2 )

    def setFill( self, bodyc, tirec, insidec ):
        self.body.setFill( bodyc )
        self.w1.setFill( tirec, insidec )
        self.w2.setFill( tirec, insidec )

    def draw( self, win ):
        self.body.draw( win )
        self.w1.draw( win )
        self.w2.draw( win )

    def move( self, dx, dy):
        self.body.move( dx, dy )
        self.w1.move( dx, dy )
        self.w2.move( dx, dy )

#----------------------------------------------------------------
def waitForClick( win, message ):
    """ waitForClick: stops the GUI and displays a message.  
    Returns when the user clicks the window. The message is erased."""

    # wait for user to click mouse to start
    startMsg = Text( Point( win.getWidth()/2, win.getHeight()/2 ), message )
    startMsg.draw( win )    # display message
    win.getMouse()          # wait
    startMsg.undraw()       # erase


def main():
    """demo program for wheel: draws wheel on screen"""
    global W, H
    win = GraphWin( "wheel demo", W, H )
    waitForClick( win, "click to start" )

    #--- create new wheel object ---
    #w = Wheel( Point( W/2, H/2 ), 20, 40 )
    #w.setFill( "black", "yellow" )
    #w.draw( win )

    car = Car( Point( 20, 20 ), Point( 120, 60 ) )
    car.setFill( "red", "yellow", "black" )
    car.draw( win )
    waitForClick( win, "click to move" )


    #--- move the wheel ---
    for i in range( 100 ):
        car.move( 3, 0 )

    waitForClick( win, "click to end" )

main()

• Run the program a few times to make sure you understand how it works.

• Assume that the programmer writing the main program (we always assume that the programmer writing the main program is different from the programmer writing the classes, as is most often the case in real life) forgot the rule that when building a car, the first point passed to the constructor is the top left point of the rectangle defining the body, and that the second point is the bottom right point of the body.

Instead the programmer creates the object car as follows:

   car = Car( Point( 120, 60 ), Point( 20, 20 ) )

Make this modification and run your program. What happens?

• Fix the class Car so that the user can specify any point in any order (top-left, bottom-right), or (top-right, bottom-left), or (bottom-left, top-right), and constructor will correctly define the body and the wheels to fit the shape defined by the two points.

• Oh, by the way, the car is a two-door convertible. Add a door to the car. The door should be a simple rectangle in the middle of the body of the car, between the two wheels. (You may want to sketch the shape of the car on paper and figure out what proportions to use to position the door.)

• Add a windshield to the car as well. Light blue might be a nice color for it. :-)

Random cars going in random directions

• Make your program create a list of 5 cars.

• Each car has a random horizontal velocity, making it go left, or right.

• Make your program move all 5 cars at the same time, until all the cars have exited the window. As soon as the cars all disappear your program will stop.

Displaying the Fish

• get a copy of the file allfish.tgz (available here as well):

 getcopy allfish.tgz

• then unpack it

 tar -xzvf allfish.tgz

• Take a look at what is in your directory:

 ls

See all the fish files there?

• You are going to create a Web page with a picture of all of them, just so that you can see what they look like.

• Copy all the fish files to your public_html directory. This is the directory where you can store Web pages that will be visible on the Web.

  cp fish*.gif public_html

• go to your public_html directory

 cd public_html

• list all the fish files:

 ls -1                      (that's ell ess space minus one)

• save the list in a file, which will become a python program

 ls -1  >   generateWebPage.py

• emacs the file generateWebpage.py and add the following code around your list of fish files:

text = """
 
  (put the list of fishXX.gif file names in this string, one per line, as it appears in the file)


"""
print "<html><body><h1>Fish in need of an aquarium...</h1><ul>"
for fish in text.split( "\n" ):
    fish = fish[:-1] # remove the '*' at the end of the file
    print "<hr><li> %s <img src=\"%s\">" % ( fish, fish )
print "</ul></body></html>"

• Run the program once

  python generateWebPage.py

• Verify that it generates a list of html statements with the fish names inside the code.

• Now run the program again, but make it store the output into a file which will become a Web page:

 python generateWebPage.py  > index.html

• Make the file index.html readable by the Web server:

 chmod a+r index.html

• Point your browser to http://cs.smith.edu/~111c-xx/index.html (replace xx by your 2-letter Id) and verify that you get a collection of pictures of fish.

Now you know what they look like! :-)

• Figure out which fish you like best, and remember its name. We'll assume for this lab that it is fish15.gif.

Creating a graphics fish

• Create the following python program and run it:

from graphics import *


def waitForClick( win, message ):
    """ waitForClick: stops the GUI and displays a message.  
    Returns when the user clicks the window. The message is erased."""

    # wait for user to click mouse to start
    startMsg = Text( Point( win.getWidth()/2, win.getHeight()/2 ), message )
    startMsg.draw( win )    # display message
    win.getMouse()          # wait
    startMsg.undraw()       # erase


def main():
    win = GraphWin( "Fish", 400, 400 )
    waitForClick( win, "click to start" )

    fish = Image( Point( 200, 200 ), "fish15.gif" )
    fish.draw( win )

    waitForClick( win, "click to end" )
    win.close()

main()

Question 1

Make your fish appear on one end of the screen and slowly move to the other side of the screen and disappear.

Question 2

Create a school of 3 or 4 fish, which you'll keep in a list, and move from one end of the screen to the other.

Question 3

Make the fish go horizontally with a random up-down motion (more in class about this...)