Purpose: to become more familiar with graphics programming.

Warm Up: Today we're going to work in pairs. In pair programming, a team of two programmers works side-by-side at one computer, collaborating on the design and coding tasks. One student is the driver entering the program at the keyboard; the other student is the observer, making sure everything entered will work, suggesting changes, and collaborating on program design and fixing errors.

Each week, I generate partner assignments randomly; expect to work with someone different each time. Each pair will do the lab assignment on just one computer, so only one student should be logged in. Try to situate yourselves around the room so that there is space between teams.

1. It is extremely important that both team member understands the solution developed
2. If you have prior experience with Python, take the Observer role for Part 1
   

For the curious: pair programming is one aspect of a design methodology called Extreme Programming espoused by Kent Beck and other practitioners.

Warmup Questions:

1. What function can be used to generate random values? What module are they in?
    
2. How would you use random values to create random colors or movement values?
   
   
3. How can we center a square object in the canvas section of a window?
    
   
4. How do we display images (for example, photos) in a program? We can find out by looking in the documentation for the graphics module, as well as what image file types can be displayed.

Part 1. Programs that use Graphics.

We introduced the graphics module last week; it is explained in Zelle Chapter 4. This module includes classes used for creating windows, simple graphics, and handling input using mouse and keyboard. A reference describing how to use the classes can be found at Zelle Graphics Reference and a tutorial can be found at the CS115 Graphics Tutorial.

1.  In Terminal, change the directory to CS157 (look back at Lab 0 if you forgot how to do this).
   
   
2. Download the file rising_sun.py
   
   
3. Run the program; you'll have to click in the window multiple times to see the circle move up to the top of the window before the window closes. Notice that the circle has a border but no fill color.
   
   
4. Modify the program and make the changes suggested in the comments: make the window background some shade of blue, and make the circle (our 'sun') yellow.
   
   
5. Alternatively, you can make your own color for the sun by specifying the amount of red, green, and blue light to mix to create a custom color.  In the following, the amount of red is 15, the amount of green is 130, and the amount of blue is 20. Try this or pick your own values:
      sun.setFill(color_rgb(15, 130, 20))
    
   
6. Improve the RisingSun program in the ways listed below.
   
   • Add a Text object somewhere unobtrusive with instructions; it should say something like "Click mouse repeatedly" - think about where in the program the code for this should go.
   • Using the methods for Text, dress it up a bit by using a different, appropriate color, changing the font face, and changing the font size.
   • Once you have this working, try to have the text disappear when the user starts clicking the mouse.
   • Rather than set sun_x to 300, we could compute the center point so that the 'sun' is centered even if we change the width of the window. GraphWin has a method getWidth that makes this easy.
   • The variable dy sets the amount to move the circle on each mouse click. Right now it is always -20. Change that by trying out the uniform function from the random module discussed in class, so that the sun moves a different amount. Don't make the range too large, [-40, 10] should give interesting results. Think about what happens if the value for dy is positive.
      
7. We've not yet talked about statement like the one below (found around line 22). What do you think it is used for? Discuss among yourselves.
   

      while sun_y > 0:

8. Demonstrate the improved program to the instructor.

Part 2.  In which we see how to break things. Switch driver and observer.

1. Once your program works, open the editor again and experiment with typos (which we call syntax errors) in the program. Try each one of the following mistakes and then re-run the program.  On a sheet of paper, record what happens (error, weirdness, or no change). Correct any issues and try out the next one.
   
   
   • Change GraphWin to Graphwin
     
     
   • Change the indentation level of the call to main() on the last line by adding spaces or a tab
     
     
   • Change the indentation level of the line def main():
     
     
   • Remove the space between the greater than sign and the number 0 on line 21.  Is this an error?
     
     
   • Remove the blank line between window.close and the call to main
     
     
   • Remove the parentheses after main on the last line
     
   
   
2. Be prepared to share your list of errors with the instructor.
   

---