Lab 3: Animation, Conditionals, and Random Module

Goals

After the lab, you should be proficient at

  1. using objects and APIs
  2. solving problems with a graphics API
  3. creating basic web pages to display images
  4. solving problems that require making decisions
  5. using functions available in the random module

Linux: Preparing for Lab

  1. As usual, create a directory for the programs and output you develop in this lab.
  2. Copy graphics.py in /home/courses/cs111/handouts/lab3/ into your lab3 directory.
  3. Objective: Programming in Python

    We'll practice writing several Python programs, each in their own text file. Name the files lab3.1.py through lab3.6.py.

    Your programs will be graded on correctness, style, and how well you tested them. Make sure you adhere to the good development and testing practices we discussed in class. Your code should be readable and your output should be useful and well-formatted.

    After you've developed a correct solution to each program, restart IDLE or close and reopen the IDLE "shell" by running the program again (using F5), demonstrate that the program works using several good test cases, and save the output to a file named lab3.x.out, where x is the problem number.

    Reference Material for Graphics Programming

    1. (20) Create a program that draws "something significant", such as a scene, a house, or a face, using the graphics library. Here are some guidelines to follow:
      • Your program should keep the drawn face/house/scene on the graphics window until the user clicks the mouse. Then the graphics window should close and your program should end.
      • Use a variety of colors and several different types of shapes.
      • For symmetrical features (such as eyes or ears), remember to use the clone method to make a copy of the original shape. Then draw the cloned shape in the window and move it to the desired location.
      • You may want to use the setCoords method of the GraphWin object to adjust the coordinates of the window. (See the reference above for more information about setCoords.)

      Screen Capture:

      • To save the image you created, in the terminal, open the program xv, using the command xv &.
      • Right click on the window with the fishes that pops up.
      • You should get an "xv controls" window that looks like:
      • Click the "Grab" option.
      • You should get a window that describes how to use "Grab".
      • Make sure no other windows are covering your image window. Click "Grab" and then use the left mouse button to click on the window that your image is displayed in. Your best bet is probably to click in the "header" at the top of the image.
      • You should get another "copy" of your window, but this time, the window is actually an image and its label reads something about "xv".
      • Back in the "xv controls" window, click "Save". You should get an "xv save" window that looks something like this:
      • In the "Save file:" box at the bottom of the screen, give the image an appropriate name, with a ".gif" extension (if that's the format you selected for the file). Then click "OK".

      You've saved the image!

      Some previously created images to inspire you:

    2. (15) Add some sort of animation to the picture you created above. For example, you could make an entire face move around the window or you could have a feature of a face move (such as a blinking eye). Note: this is not simply the click and move we did before we did animation. You can allow a user to click to move things, but you must animate that movement.

      If you want to animate a group of objects, moving together, you can use the GraphObjectGroup class. There is an example of using the GraphObjectGroup class in the example.py file in the /home/courses/cs111/handouts/lab3 directory. The example code may not make sense yet, but just follow the example and ask questions.

    3. (10) Write a program that takes as input two numbers--the first is the Patriots' score for the Super Bowl at the end of regulation play and the second is the Giants' score at the end of regulation. Then use only if statements (no elses or elifs) to print "The Patriots win" if the first number is bigger, "The Giants win" if the second number is bigger, and "They tied! We're going to overtime!" if the numbers are equal.
    4. (15) Copy the previous program and modify it so that it uses elses (no elifs). Is this version better or worse than the previous version? Think about how much work the computer has to do and the control flow diagram (performance), and how easy it is for a human to understand what is going on (readability). Write your thoughts in comments.
    5. (10) Copy the previous program and modify it to use if-elif-else structure instead. In comments, compare the readability of the old version and the new version. (The efficiency of the two programs is likely the same.)
    6. (25) Application. Write a simple Super Bowl simulation program. You'll perform 10 simulations and keep track of how many games the Patriots win and how many games the Giants win. In the end, you'll print out the overall winner (who won the most games), based on your simulation.

      To determine the winner for a game, generate a random number between -6 and 8, inclusive. If the generated number is positive, the Patriots (the first team/AFC team) win. Otherwise, the Giants (the second team/NFC team) win.

      Style. You should be able to easily modify this program to run next year (when the Dolphins and the Panthers are in the Super Bowl...). As discussed in class, using constants makes your program more generalizable and flexible. For full credit, you must use constants for the name of each team, the minimum and maximum difference values, and the number of times you simulate the game.

      Demonstration. Run your program at least once with 20 simulated games, which should require only one change to your program. Then, run your program again with 10 simulated games.

      Extensions. You're only a few weeks into programming, but you're already able to write a basic game simulator. In comments in code, describe 3 extensions you would make to this program to make the program "better", e.g., make it a more sophisticated simulation or more customizable or easier to use. What would be required for you to be able to implement those extensions? Time to implement it? Programming knowledge? Be specific about what constructs/knowledge you'd need to write your extended version.

      Example Runs:

      Simulated Game 1 Patriots won
      Simulated Game 2 Giants won
      Simulated Game 3 Patriots won
      Simulated Game 4 Patriots won
      Simulated Game 5 Patriots won
      Simulated Game 6 Giants won
      Simulated Game 7 Giants won
      Simulated Game 8 Patriots won
      Simulated Game 9 Patriots won
      Simulated Game 10 Giants won
      ------------------------------
      The Patriots are predicted to win 6 out of 10 times.
        
      Simulated Game 1 Patriots won
      Simulated Game 2 Giants won
      Simulated Game 3 Patriots won
      Simulated Game 4 Patriots won
      Simulated Game 5 Giants won
      Simulated Game 6 Giants won
      Simulated Game 7 Giants won
      Simulated Game 8 Giants won
      Simulated Game 9 Patriots won
      Simulated Game 10 Patriots won
      ------------------------------
      The simulation is inconclusive.
        

    Objective: Creating a New Web Page

    It's time to revisit our web pages. (You knew we'd get back to this sooner or later!)

    1. Go into your public_html directory.
    2. Copy your index.html file into a file called lab3.html (in the public_html directory).
    3. Copy the screen capture image from your lab into your public_html directory.
    4. Open lab3.html in jEdit.
    5. Modify the Lab 3 web page to have an appropriate, title, header, and information.
    6. Modify your Lab 3 web page to display the image you created.
    7. Clean up your Lab 3 page so that it only contains the image, a link to your home page, and any appropriate text. (In other words, get rid of the stuff that should only be on your index.html page.)
    8. Modify your index.html page to link to your Lab 3 web page.
    9. Verify your web pages look correct in the browser. Make sure that the URL in the location bar starts with "http://" and not "file://" to verify that anyone on the Web can view your web pages.

    Finishing up: What to turn in for this lab

    1. IDLE and jEdit may create backup files with the "~" extension. Delete these files from your lab directory to save paper when you print.
    2. Copy your lab3 directory into the turnin directory. (Review the UNIX handout if you don't remember how to do that.)
    3. Before printing, move the graphics.py, graphics.pyc (actually, this one can be deleted rather than moved), and your screenshot out of your labs/lab3 directory; otherwise, the print out will be long and screwed up. You can move those files back into your lab3 directory after you've printed. In other words, you should only have the .py files you wrote and the .out files you created in your directory when you print.
    4. Turn in your printed lab assignment, using the printLab.sh command.
    5. Again, you should probably print from the labs directory.

      Print the file using the lpr command introduced in the first lab.

    Labs are due at the beginning of Friday's class. You should hand in the printed copy at the beginning of class, and the electronic version should be in the turnin directory before 1:20 p.m. on Friday.

    Ask well before the deadline if you need help turning in your assignment!

    Grading (105 pts)