CS21 Lab 6: graphics, objects

Due Saturday, March 9, before midnight.

Make sure all programs are saved to your cs21/labs/06 directory. Files outside this directory will not be graded.

  $ update21
  $ cd ~/cs21/labs/06

Programming Tips

• Use a comment at the top of the file to describe the purpose of the program. Include your name and the date.
• Use meaningful variable and function names.
• Write your programs incrementally (a little bit at a time) and test as you go
• Here is a link to documentation for the Zelle graphics library.

Topics for this assignment

• objects
• graphics

1. Draw an Animal Face

In the file drawFace.py, write a program that draws an animal face using the graphics library. Below are two examples of animal faces drawn by previous CS21 students:

Here are more details on this part of the lab assignment:

• The faces should be centered in the graphics window and largely fill the space.
• Your program should keep the face on the screen until the user clicks the mouse. Then, the gaphics window should close and your program should end.
• You should base the positions and sizes of the facial features based on coordinates where (0,0) is the lower left corner and (100,100) is the upper right.
  • use the setCoords method to set these coordinates.
• Your face should draw correctly in different-sized windows. Be sure to test this. You can assume the window will always be square.
• Use several different colors.
• Use several different shapes.

Note: For symmetrical shapes like eyes or ears, you can 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.

Have fun! Your image does not have to be of the highest artistic quality.

2. Springtime Flowers

Spring is just around the corner, and in anticipation we will create an interactive program to make a meadow of unique flowers. Using mouse clicks, your program will allow the user to specify the location and height of as many flowers as they'd like. When they are done making flowers they can quit the program by clicking on the black border at the bottom of the window.

Open the program drawFlowers.py and work incrementally toward drawing a picture like the one above.

1. Begin by importing the graphics library after your opening comment and before the main program. In the main program create a graphics window and set the background of the window to a sky-like color. Also use the getMouse() method of the window to wait until the user clicks before ending the program. Test your program.

2. Create a function makeGrass(window) that takes the graphics window and makes a rectangle that is half the size of the window, is located in the bottom half of the window, and is colored green. Call the function in the main program to test that it works.

3. Create a function makeBorder(window) that takes the graphics window and makes a rectangle that is 5% of the window's height, is colored black and is positioned at the very bottom of the window. Call the function in the main program to test that it works.

4. Add a while loop to the main program so that it continues to accept mouse clicks until the user clicks in the black border area. You'll know this has happened when the y-component of the clicked point is greater than 95% of the window's height. Test that this works.

5. Create a function makeFlower(window, click1) that takes the graphics window and a point generated from a mouse click. This point represents the location of the center of the blossom of the flower (click 1 in the picture below). This function should draw a circle to represent the blossom that has a radius which is 5% of the window's width. This function should then get a second mouse click (click 2 in the picture below), representing the end of the stem. It should draw a line between click1 and click2. Don't worry about adding colors now, just be sure you can make this skeleton of a flower first. Call this function inside the main program's loop.

6. Edit your makeFlower(...) function to make the blossom of the flower a random color. Add a smaller inner circle to the flower that is also a random color. Make the stem thicker and add color if you'd like. Test your program to check that you are getting random colors each time.

7. The graphics library layers objects in the order they are drawn. While drawing the flower, we want the user to see the blossom of the flower appear as soon as they do the first click, so we need to draw this first. Then when we want the stem to appear as soon as they make the second click. Thus the stem will be drawn on top of the blossom, which doesn't look good. To make our flower look nicer, after we've drawn the stem, we can call redraw() on the blossom. Test the program after this change.

8. Edit your makeFlower(...) function to add the leaves. Use the getCenter() method to find the center point of the stem. Make two symmetrical Oval objects, one above the center point, and one below. Ovals are defined by a bounding rectangle based on two points. Each of your leaves will use the stem's center point as one of these points. For the left leaf, create another point that is above and to the left of the stem's center point. For the right leaf, create another point that is below and to the right of the stem's center point. Test that your program creates the leaves correctly.

9. Once you've completed these steps, your program should be drawing a lovely meadow of flowers. Show it to your friends, and give them a taste of spring too.

3. (Extra Challenge) Extending drawFlower()

There are many possible ways of extending your Springtime Flower program. In a new file extendedFlowers.py try adding one of the following features:

1. Make a new function called makeBigLittleFlower() which is like drawFlower() but that draws flowers that are not only randomized in color, but also in the diameter of their blossom and center (within a range you specify).

2. Make a new function called makeCloudyFlower() which is like drawFlower(), but replaces unrooted flowers with clouds. In other words, if the second click to draw a flower is in the blue region, makeCloudyFlower undraws the blossom and center, and replaces them with a cloud.

3. Make a new function called makeDistantFlower() which is like drawFlower() but that uses the color_rgb(red, green, blue) function to specify colors such that flowers are darker if rooted closer to the top (or back) of the green field, and lighter if they are rooted closer to the bottom (or front). This will mean changing the color of the blossom and center between undrawing and redrawing.

4. Make a new function called makeCustomFlower() that draws flowers in a way you specify. Be creative and have fun!

4. Answer the Questionnaire

Each lab has a short questionnaire at the end. Please edit the QUESTIONS-06.txt file in your cs21/labs/06 directory and answer the questions in that file.

Hints, Tips, and Links

Alternative graphics library documentation

When choosing colors as strings, you can use the colorPicker to find valid names.

$ python3
>>> from colorPicker import colorPicker
>>> colorPicker()
purple2 = color_rgb(145, 44,238)

If you want other RGB colors, try the online color picker then use the following syntax:

clr = color_rgb(145,44,238)
shape.setFill(clr)

Turning in Your Labs

Don't forget to run handin21 to turn in your lab files! You may run handin21 as many times as you want. Each time it will turn in any new work. We recommend running handin21 after you complete each program or after you complete significant work on any one program.