Difference between revisions of "CSC111 Lab 11"

From dftwiki3
Jump to: navigation, search
(Your own aquarium)
(Get the graphics.py module on your local Mac)
 
(33 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
<br />
 +
<br />
 +
<br />
 +
<br />
 +
<center>
 +
<font size="+3">Today we work in Mac OS mode!</font>
 +
</center>
 +
<br />
 +
<br />
 +
<br />
 +
<br />
 +
{|
 +
| width="45%" |
 +
__TOC__
 +
|
 
<bluebox>
 
<bluebox>
 
<br>
 
<br>
This lab deals with classes, objects, and graphics.  It builds on the examples we saw in class on Monday and Wednesday.
+
This lab deals with classes, objects, and graphics in ''local'' mode.  It builds on the examples we saw in class recently.  It '''does not''' involve ''inheritance''.
<br>
+
 
 +
[[Image:fileicon-pdf.png | right | 35px|link=http://cs.smith.edu/dftwiki/images/1/17/ZelleGraphicsDescription.pdf]]You may find the following [[media:ZelleGraphicsDescription.pdf|document]] describing the different graphic objects introduce in the Zelle's textbook useful.
 
</bluebox>
 
</bluebox>
 +
|}
 +
<br />
 +
<br />
  
 
<br />
 
<br />
 
<br />
 
<br />
  
<tanbox>
+
 
[[Image:fileicon-pdf.png | right | 35px|link=http://cs.smith.edu/dftwiki/images/1/17/ZelleGraphicsDescription.pdf]]You may find the following [[media:ZelleGraphicsDescription.pdf|document]] describing the different graphic objects introduce in the Zelle's textbook useful.
+
==Working on the Local Mac==
</tanbox>
+
 
<br />
+
<bluebox>
 +
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.
 +
</bluebox>
 
<br />
 
<br />
 +
 +
* 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 local terminal, use emacs to create the file '''graphics.py'''.  It will contain Zelle's graphics library.
 +
 +
 +
* Copy/Paste [[CSC111 Zelle graphics.py | graphics.py]] to your emacs window.
 +
 +
 +
* Save the file and exit emacs.
 +
 +
 +
* 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 [[CSC111 Lab 10 | Lab 10]])==
 
==Fish (Reported from [[CSC111 Lab 10 | Lab 10]])==
 +
  
 
* Point your browser to http://maven.smith.edu/~111c/index.html
 
* Point your browser to http://maven.smith.edu/~111c/index.html
  
* See all the fish?  Make a note of one of the fish, and get a copy of its file as follows
 
  
   getcopy fishxx.gif           ''(replace xx by the actual number of the fish you want)''
+
* 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/fish0.gif http://maven.smith.edu/~111c/fish'''xx'''.gif]            ''(replace xx by the actual number of the fish you want)''
 +
 
 +
 
 +
* Verify that the fish file is not in your directory, in the local terminal.
 +
 
  
 
* Write a new graphics program and copy/paste the following code in it:
 
* Write a new graphics program and copy/paste the following code in it:
Line 59: Line 121:
 
.
 
.
 
</source>
 
</source>
 +
  
 
* Add a for loop and make the object ''fish'' move by dx, dy some fixed number of steps...
 
* 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 a an new class which is a fish, with its own file name, and its own dx (and maybe dy).
 +
 
  
 
* Create an object issued from the class.  Verify that you can make the object move on the screen.
 
* 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!!!
+
 
 +
* Create a school of several fish (the same fish replicated several times is fine for this exercise) 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!!!
 +
 
 +
 
 +
* In case your fish move too fast, look at the '''sleep()''' function in the [http://docs.python.org/library/time.html '''time'''] module.  It allows you to pause for some fraction of seconds while going through the loop...  It could be useful to slow things down...
 +
 
  
 
* Make the fish go up or down, slightly, randomly, as it moves forward...
 
* Make the fish go up or down, slightly, randomly, as it moves forward...
 +
 +
===Mirror Image of a Fish===
 +
 +
* If you have a fish that has its head to the left and you want to have the same image, but the mirror image with the head to the right, you can ''flop'' the image, as follows:
 +
 +
 +
      convert  fish15.gif  -flop  fish15b.gif
 +
 +
* Now '''fish15b.gif''' is the mirror image of '''fish15.gif'''.
 +
 +
* The command should be available on the iMacs (to be verified), and allows you go mirror any image, in the horizontal direction.
  
 
==Aquarium==
 
==Aquarium==
Line 77: Line 158:
 
# get the image of the tank
 
# get the image of the tank
 
# find the image dimension
 
# find the image dimension
# define a graphics window with the same dimension
+
# define a graphics window with the same dimensions
# paste the tank image on the window
+
# paste the tank image on the graphics window
# display a fish on the window
+
# display a fish in the window
# move the fish...
+
# move the fish around...
 
</bluebox>
 
</bluebox>
  
Line 94: Line 175:
 
<br />
 
<br />
  
* Get a copy of this image:
+
* Get a copy of this image to the local terminal
  
   getcopy tank2.gif
+
   lwp-rget  http://cs.smith.edu/~111c/tank2.gif
  
 
* Find the image dimension.  
 
* Find the image dimension.  
  
   identify tank2.gif
+
   identify tank2.gif
 
   
 
   
 +
:the output will be something like:
 +
 
   tank2.gif GIF <font color="magenta">www</font>x<font color="magenta">hhh</font> <font color="magenta">www</font>x<font color="magenta">hhh</font>+0+0 8-bit PseudoClass 256c 261kb  
 
   tank2.gif GIF <font color="magenta">www</font>x<font color="magenta">hhh</font> <font color="magenta">www</font>x<font color="magenta">hhh</font>+0+0 8-bit PseudoClass 256c 261kb  
  
 
* Note the '''www''' and '''hhh''' integers, representing the width and height of the image.
 
* 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.
 
* 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:
 
* ''Paste'' the image on your window as a background image:
  
Line 114: Line 201:
 
     background = Image( Point( W/2, H/2 ), "tank2.gif" )
 
     background = Image( Point( W/2, H/2 ), "tank2.gif" )
 
     background.draw( win )
 
     background.draw( win )
 +
  
 
* Verify that you get a nice aquarium and fish!
 
* Verify that you get a nice aquarium and fish!
  
 
==Your own aquarium==
 
==Your own aquarium==
 
+
[[Image:aquarium3.gif | right | 200px]]
 
* 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).
 
* 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).
  
Line 128: Line 216:
  
  
     wget ''http://theUrlOfTheGifFileYouWantToGet.gif''
+
     lwp-rget  ''http://theUrlOfTheGifFileYouWantToGet.gif''
  
  
Line 143: Line 231:
  
 
:(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)
 
:(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==
 +
 +
* The simplest for right now is to mail your programs to yourself, as follows:
 +
 +
      mail yourname@smith.edu < lab11.py                ''(replace lab11.py by the actual name of your program)''
 +
 +
* Verify that you have the programs in your mailbox.
 +
 +
<!--
 +
* In the Local Terminal, type in the following commands to copy all your new files to your beowulf account:
 +
 +
      rsync -av *.py  111c-<font color="magenta">xx</font>@beowulf.csc.smith.edu
 +
      rsync -av *.gif  111c-<font color="magenta">xx</font>@beowulf.csc.smith.edu
 +
 +
:Where you will replace <font color="magenta">xx</font> by your 2-letter Id.
 +
 +
* That's it!  Verify that all your files are now in your 111c-xx beowulf account.
 +
-->
 +
 +
* You're done!
  
 
<br />
 
<br />

Latest revision as of 17:13, 15 April 2010





Today we work in Mac OS mode!






This lab deals with classes, objects, and graphics in local mode. It builds on the examples we saw in class recently. It does not involve inheritance.

Fileicon-pdf.png
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 local terminal, use emacs to create the file graphics.py. It will contain Zelle's graphics library.



  • Save the file and exit emacs.


  • 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)


  • 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)


  • Verify that the fish file is not in your directory, in the local terminal.


  • 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 maybe 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 (the same fish replicated several times is fine for this exercise) 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!!!


  • In case your fish move too fast, look at the sleep() function in the time module. It allows you to pause for some fraction of seconds while going through the loop... It could be useful to slow things down...


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

Mirror Image of a Fish

  • If you have a fish that has its head to the left and you want to have the same image, but the mirror image with the head to the right, you can flop the image, as follows:


      convert  fish15.gif  -flop  fish15b.gif
  • Now fish15b.gif is the mirror image of fish15.gif.
  • The command should be available on the iMacs (to be verified), and allows you go mirror any image, in the horizontal direction.

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...




Tank2.gif




  • 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

the output will be something like:
  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

Aquarium3.gif
  • 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:


   lwp-rget  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

  • The simplest for right now is to mail your programs to yourself, as follows:
     mail yourname@smith.edu < lab11.py                (replace lab11.py by the actual name of your program)
  • Verify that you have the programs in your mailbox.


  • You're done!