All of these problems are for practice. You are freely encouraged to work together and you do not need to submit any of this work for a grade.

Single Loops

1. The book gives code for drawing a pyramid, with one rectangle per level (see pyramidLoop.py) It uses a geometric sketch (left) as a model, producing the final image (right) with a parameter controlling the size and number of levels.
   

   Modify that code so that instead of a pyramid, you get a staircase rising to the right, with one rectangle per level
   

   Spoiler: my code (with absolute geometry), my code (with relative geometry)

2. Try to build a single Polygon object having a staircase shape. You can create a Polygon object, perhaps with no points originally, and then use the loop and the addPoint(p) method to complete the polygon.
   

   Spoiler: my code (with absolute geometry), my code (with relative geometry)

3. Much as we can build a polygon, we can graph a function by making a Path object and then repeatedly adding (x,y) points to that path. In this example, we graph the parabola defined by the function $y = 0.01 * (x-300)^2$.
   

   Spoiler: my code

4. You have probably noticed by now that in most of our example figures thus far this year, we have been providing a convenient grid that marks off 100x100 pixel squares as landmarks for laying out the geometry on our canvases. It's time for you to learn how to make those grid lines on your own. Create a script that draws these grid lines at 100-pixel intervals. Write your code in a way so that it automatically works based on the given window size. If the window size is not a multiple of 100, then its okay that there will be a partial row/column diagramed. For example, the following is the desired result for a 580x320 canvas
   

   Spoiler: my code

5. Can you make a picket fence, with a variable height, width, and number of pickets? We suggest making the gap between pickets exactly the same as the width of a picket. Here is a view of such a fence by itself
   
   and here is the fence incorporated into our standard house scene.
   

   Spoiler: my code

6. How about the following rainbow:
   
   in which the user specifies the outer and inner radius, as well as a list of colors. (We used the list colors = ['red', 'orange', 'yellow', 'green', 'blue', 'blueviolet', 'darkviolet'] and then have a loop variable that is used as an index to this list to pick the color.)

   Note that the rainbow was created as a series of cocentric circles drawn on top of each other, including a final small skyblue circle for the interior.
   Spoiler: my code

7. Another way for us to have fun is with colors. The following gradient could be computed by drawing a series of vertical lines, each 1-pixel wide, but changing the color choice for each line by setting the (r,g,b) based on a loop variable. Here is an example that interpolates from red (at left) to blue (at right).
   
   Spoiler: my code

8. Can you figure out the pattern to these lines? We connect (0,0) to (0,400), then connect (0,5) to (5,400), then (0,10) to (10,400), etc.
   
   Spoiler: my code

9. Variant in which we need not assume the canvas is a square, and where we rely on variable numStrings to control the density of the drawing.
   
   Spoiler: my code

10. Hmm...how much can we get out of this technique?
    
    Spoiler: my code

11. This is the challenge round! In particular, can you figure out which of the sets of lines should be drawn first and which should be drawn last?
    
    Spoiler:
    Big hint
    my code

Nested Loops

12. The book gives code for drawing a pyramid using indivdual squares, placed with a nested loop (see pyramidNested.py)
    

    Modify that code so that instead of a pyramid, you get a staircase rising to the right.
    

    Spoiler: my code

13. Try to build the following brick wall using 3x1 ratio bricks.
    

    Spoiler: my code

14. Try to build a more traditional staggered brick wall using 3x1 ratio bricks. The key to get the staggering is by using the modulus operator on a level index, as level % 2 will equal 0 on even-numbered rows and 1 on odd-numbered rows. That difference can be used to vary the number of bricks per row and the offset of their horizontal placement.
    

    Spoiler: my code

15. Feeling really board? How about a hex-brick walkway (bring your trigonometry)
    
    Spoiler: just kidding

16. While our earlier color gradient depended only on a one-dimensional pattern of vertical lines, we can make more interesting color patterns by varying pixel colors as a function of two dimensions. However, making a bunch of separate 1x1 cs1graphics objects will be too slow (even the many vertical lines was a bit taxing).

    cs1graphics supports an Image class that let's you make pixel-level manipulations. As a brief tutorial, you can create an initially transparent image object with a given width and height as

        art = Image(width,height)

    Then you can manipulate any number of individual pixels with commands such as

        art.setPixel(x, y, color)

    where color can be specified by name or by (r,g,b) tuple, where those are intensity values from 0 to 255. For example setPixel(x,y, (255,0,255)) produes bright magenta. For the Image class, we intentionally do not re-render changes after each call to setPixel. Instead, there is a updatePixels() method that must be called to force the rendering of the image to the screen.

    Using the new Image class, we can have some fun with colors, in particular by setting (r,g,b) tuples based on loop variables. For example, here is an image that is based on letting the red component vary inversely with the x-coordinate, the green component vary based in (x+y) combined, and the blue component vary based solely on the y-coordinate.
    
    Here are some other effects based on various uses of the (x,y) values to model the color choice.