CSC111 Lab 11

Today we work in Mac OS mode!

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.

Working on the Local Mac

Today you are going to work with large images, which will make our python programs very slow if they run on beowulf and display images on your Mac. All the pixels have to travel over the network from beowulf to your Mac. Instead you are going to login using your 111c-xx account to the Mac in front of you. You'll develop your program on the Mac, run them on the Mac, and display the graphics on the Mac. The only drawback is that your program and image files will be on the Mac and not in your beowulf account. You will be shown at the end of the lab how to transfer them to your 111c-xx account.

• Open two terminal windows. Make them different background colors.

• In the first window, which we'll call the beowulf terminal, ssh to beowulf using your 111c-xx account

• In the other window, which we'll call the local terminal, don't do anything

Get the graphics.py module on your local Mac

• In the beowulf terminal:

    getcopy graphics.py             (not really necessary since it should be there already)

• In the local terminal:

    rsync -av 111c-xx@beowulf.csc.smith.edu:graphics.py  .

Make sure you replace xx by your 2-letter Id, and that you do not forget the dot at the end of the command!

• Check that graphics.py is on your local Mac:

   ls -l
   total 64
   drwx------+  6 111c  24100    204 Apr 14 12:38 Desktop
   drwx------+  8 111c  24100    272 Apr 14 12:38 Documents
   drwx------+  5 111c  24100    170 Apr 14 12:38 Downloads
   drwx------+ 42 111c  24100   1428 Apr 14 12:38 Library
   drwx------+  4 111c  24100    136 Apr 14 12:38 Movies
   drwx------+  3 111c  24100    102 Apr 14 12:38 Music
   drwx------+  3 111c  24100    102 Apr 14 12:38 Pictures
   drwxr-xr-x+  4 111c  24100    136 Apr 14 12:38 Public
   drwxr-xr-x+  5 111c  24100    170 Apr 14 12:38 Sites
   -rw-r--r--   1 111c  24100  28760 Mar  3 13:30 graphics.py

• You can now develop your python programs in the local terminal the exact same way you were on beowulf.

Fish (Reported from Lab 10)

• Point your browser to http://maven.smith.edu/~111c/index.html

• See all the fish? Make a note of the name of one of the fish, and get a copy of its file in the local terminal.

  lwp-rget http://maven.smith.edu/~111c/fishxx.gif             (replace xx by the actual number of the fish you want)

• Write a new graphics program and copy/paste the following code in it:

.

from graphics import *
H = 400
W = 400

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():
    global H, W
    win = GraphWin( "Fish Tank", W, H )
    waitForClick( win, "click to start" )

    fish = Image( Point( W/2, H/2 ), "fish15.gif" )  # replace 15 by the number of your fish
    fish.draw( win )

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

main()

 
.

• Add a for loop and make the object fish move by dx, dy some fixed number of steps...

• Create a an new class which is a fish, with its own file name, and its own dx and dy.

• Create an object issued from the class. Verify that you can make the object move on the screen.

• Create a school of several fish that move around the screen. The fish may move in opposite directions, but we'll assume that all fish move in the direction of where their head points to!!!

• Make the fish go up or down, slightly, randomly, as it moves forward...

Aquarium

In this section you will apply a background image to the window. It will be the image of a fish tank, and you will make your fish move about in the tank.

The steps will be:

1. get the image of the tank
2. find the image dimension
3. define a graphics window with the same dimensions
4. paste the tank image on the graphics window
5. display a fish in the window
6. move the fish around...

• Get a copy of this image to the local terminal

  lwp-rget  http://cs.smith.edu/~111c/tank2.gif

• Find the image dimension.

  identify  tank2.gif

  tank2.gif GIF wwwxhhh wwwxhhh+0+0 8-bit PseudoClass 256c 261kb 

• Note the www and hhh integers, representing the width and height of the image.

• Modify your python program and make the graphics window as wide and as high as the image.

• Paste the image on your window as a background image:

   H = hhh   # use the same number as above
   W = www  # use the same number as above
  
   win = GraphWin( "111c-xx Aquarium", W, H  )
   background = Image( Point( W/2, H/2 ), "tank2.gif" )
   background.draw( win )

• Verify that you get a nice aquarium and fish!

Your own aquarium

• Use Google and search for other images of aquariums that you can use instead of tank2.gif. Use the advanced search feature to select only GIF files (or specify "aquarium filetype:gif" in the search bar).

• Once you have the image showing by itself in the browser, full size, copy its URL.

• At the Linux prompt, in the terminal window, type:

   wget http://theUrlOfTheGifFileYouWantToGet.gif

• Verify that your directory now contains a new gif file.

   ls -ltr 

• To see it on the screen, try

   display yourFileName.gif

(It is possible that this command may not work... But give it a chance to run, as it takes a while to open up the image)

• Repeat the steps of the section above to paste the aquarium into your graphics window.

Copying the Files from the Local Mac to your Beowulf Account

• In the Local Terminal, type in the following commands to copy all your new files to your beowulf account:

     rsync -av *.py  111c-xx@beowulf.csc.smith.edu
     rsync -av *.gif  111c-xx@beowulf.csc.smith.edu

Where you will replace xx by your 2-letter Id.

• That's it! Verify that all your files are now in your 111c-xx beowulf account.

• You're done!