In Class: Week 4


Run update21 to download this week's files and move to our class directory:

    % cd 
    % update21 
    % cd cs21/class/week04
    % pwd
      /home/your_user_name/cs21/class/week04
    % ls
      animate.py  bullseye.py  circle_shift.py  duplicate.py  test_graphics.py
	

Topics


The graphics library

To use the graphics library, first import it at the top of your program:
  from graphics import *
Next create a new graphics window object, and then create gui objects to draw into this window:
   win = GraphWin("My GUI Program", 500, 500)   # creates new GraphWin object, 500x500 pixels in size

   circ = Circle(Point(50,50), 20)    # creates a new Circle object centered at 50,50 with a radius of 20 pixels
   circ.setFill("red")                # invoke the setFill method of the Circle object referred to by circ        
   circ.draw(win)                     # draw the Circle object refered to by circ in GraphWin win

Some more notes on using the Graphics library are available here


We are going to do some of the following together in class:
  1. open test_graphics.py in vim. It contains some example code that draws different type objects to one of two graph windows. Let's try changing some things.

  2. open bullseye.py. Together we are going to write a program that draws a bullseye to the graphics window. It should consist of 4 concentric circles, of two or more colors, that are drawn centered in the graphics window.

  3. It seems like we were very repetitive in creating the circles, how can simplify the process by using a for-loop to createa fixed-sized dart board with circles whose radius depends on the total number of circles we wish to draw.

  4. Together, we'll try one last variation: how can we adjust the window size instead of the difference in radius between each circle

  5. open circleshift.py. Try running it in python. Together we will change this program so that after first drawing the initial cirle, each time the user clicks on a new spot, the circle is shifted to the new location. The shifting will happen four times, and on the fifth mouse click the program will exit.

  6. open duplicate.py. We are going to try to use an existing Circle object as a starting point for creating a similar second Circle object. The attempt at doing this doesn't work. Let's think about why not and how to fix it.

  7. open animate.py. Let's look at this program together. Once we figure out what it is doing, lets change the code so that the animation will be repeated 3 times, each end point will be determined by the user's mouse click. If we want to repeat the same action multiple times, what language construct do we use? ...

  8. We'll practice using color_rgb(red,green,blue) to generate any color we want by specificying the magniture of red, green, and blue colors with integer values between 0 and 255. We can also use the colorPicker() method in the colorPicker library using the interactive python shell. This methods loads up a graphical color palette which we can click and obtain the name and red/green/blue values of any color we like.