CS21 Lab 6: Graphics, Using Objects

Due Saturday, March 4, before midnight

Programming Tips

As you write programs, use good programming practices:

  • Use a comment at the top of the file to describe the purpose of the program (see example).

  • All programs should have a main() function (see example).

  • Use variable names that describe the contents of the variables.

  • Write your programs incrementally and test them as you go. This is really crucial to success: don’t write lots of code and then test it all at once! Write a little code, make sure it works, then add some more and test it again.

  • Don’t assume that if your program passes the sample tests we provide that it is completely correct. Come up with your own test cases and verify that the program is producing the right output on them.

  • Avoid writing any lines of code that exceed 80 columns.

    • Always work in a terminal window that is 80 characters wide (resize it to be this wide)

    • In vscode, at the bottom right in the window, there is an indication of both the line and the column of the cursor.

Function Comments

All functions should have a top-level comment! Please see our function example page if you are confused about writing function comments.

Are your files in the correct place?

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

$ update21
$ cd ~/cs21/labs/06
$ pwd
/home/username/cs21/labs/06
$ ls
Questions-06.txt
(should see your program files here)

Goals

The goals for this lab assignment are:

1. Sunflowers

In the file sunflowers.py, write a program that draws simple version of Sunflowers using the graphics library.

Sunflowers

1.1. createFlower and drawFlower

Write a function called createFlower which creates all the parts of your flower, puts them in a list, and returns that list. (Note that this function should not draw the flower!)

Write another function called drawFlower which takes a list of flower parts and a graphics window, and draws the flower parts in the window.

Requirements:

  • The sunflower should be centered in the graphics window and largely fill the space. (This means that your createFlower function will need to know how big the window is!)

  • Your sunflowers should draw correctly in different-sized windows. Be sure to test this. You can assume the window will always be square but could be a different size.

  • Use several different colors in your sunflower.

  • Use several different shapes in your sunflower.

When you have written both of these functions, you should be able to call them from main:

def main():
  windowWidth = 400
  windowHeight = 400
  myWindow = GraphWin("Low-resolution sunflowers by Van Gogh",windowWidth,windowHeight)
  myFlowerParts = createFlower(windowWidth) # this creates one list of flower parts, which are centered in the window and fill most of the window
  drawFlower(myFlowerParts, myWindow)

main()

You are allowed some artistic license here. Your image does not have to look exactly like Van Gogh’s work! An example of how this might look:

one sunflower

1.2. Making several flowers using moveFlower

Now we would like to reuse our createFlower code in order to draw several identical sunflowers in different locations.

Write a function moveFlower which takes a list of flower parts and moves them all over by the same amount. If every part is moved by the same amount, the parts should all stay together and still look like a flower when drawn.

You should consider which parameters the moveFlower function will need.

1.3. Putting it together

Using your functions, write a program which draws several sunflowers. Your main should be short and straightforward to read, and it should rely on calling your other functions.

Your program should keep the sunflowers on the screen until the user clicks the mouse. Then, the graphics window should close and your program should end.

Useful hint: The default coordinates in a GraphWin object treat (0,0) as the upper left corner. If you would prefer to have (0,0) in the lower left (the way that math coordinates commonly work), you can use the setCoords() method to set these coordinates: check out the documentation for graphwin.

1.4. Example

Have fun! Your image does not have to be of the highest artistic quality. Here’s a sample output where the flower petals are all the same color:

several sunflowers

Here’s another example, where the flower petals use two different colors - you can use as many colors as you like!. There are no bonus points for using more colors, but you should show at least two different colored petals. several sunflowers with different colored petals

The placement of the flowers (i.e., which flower is placed on the top vs. below), and where you place the flowers on the screen are both arbitrary. For the several flowers graphic, you should have at least three flowers.

2. Trees

Write a program trees.py that allows a user to interactively draw a spring scene consisting of multiple trees in bloom.

Trees

Open the program trees.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 function. In the main function 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 function 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 function to test that it works.

  4. Add a while loop to the main function 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 the top of the border rectangle. Test that this works.

  5. Create a function makeTree(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 tree’s canopy. (click 1 in the picture below). This function should draw a circle to represent the tree’s canopy. that has a radius which is 10% 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 trunk. 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 tree first. Call this function inside the main function’s loop.

  6. Edit your makeTree(…​) function to make the tree’s canopy a random color. Make the trunk 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 tree, we want the user to see the tree’s canopy appear as soon as they do the first click, so we need to draw this first. Then when we want the tree’s trunk to appear as soon as they make the second click. Thus the trunk will be drawn on top of the canopy, which doesn’t look good. To make our flower look nicer, after we’ve drawn the tree’s trunk, we can call undraw() and then call draw(…​) again on the canopy. Test the program after this change.

  8. Once you’ve completed these steps, your program should be drawing lovely trees.

Clicks

2.1. Example

The video below shows a sample of the program in use.

Your program can assume as long as the tree’s canopy isn’t on the bottom border that the tree can be drawn. We don’t care if the trunk goes into the border.

3. Answer the questionnaire

Each lab will have 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.

Once you’re done with that, run handin21 again.

4. Extending makeTree() — optional

This is an optional extra challenge. This part does not affect your grade so please only attempt this after completing the rest of your lab. It is simply an extra challenge, if you want to try it.

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

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

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

3) Make a new function called makeDistantTree() which is like drawTree() 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 canopy and center between undrawing and redrawing.

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

Answer the Questionnaire

Each lab will have 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.

Once you’re done with that, you should run handin21 again.

Submitting lab assignments

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

Logging out

When you’re done working in the lab, you should log out of the computer you’re using.

First quit any applications you are running, like the browser and the terminal. Then click on the logout icon (logout icon or other logout icon) and choose "log out".

If you plan to leave the lab for just a few minutes, you do not need to log out. It is, however, a good idea to lock your machine while you are gone. You can lock your screen by clicking on the lock xlock icon. PLEASE do not leave a session locked for a long period of time. Power may go out, someone might reboot the machine, etc. You don’t want to lose any work!