Assignment #5 Part (a): Quilt

Due: 11:55pm (Pacific Time) on Tuesday, July 27th

---

For this project, you'll combine decomposition with code that draws lines, ovals etc. to make some neat patterns. All parts of HW5 are due Tues July 27th 11:55 p.m. PT.

Warmups: "parsehw" on Server

This week's warmups are on string while-loop patterns: parsehw. The last double-while problem depends on the Friday lecture.

Turn In Turn In Warmups to Paperless

quilt.zip

To get started, download quilt.zip. Open that .zip file to get a "quilt" folder containing the quilt.py file for this program. Open the quilt folder with the PyCharm open... menu command to get started.

main()

For the quilt program, we provide working main() function. Depending on the command line arguments, main() calls one or another of your functions as shown below.

The quilt drawing is made of three different "patch" drawings: bars, eye and bowtie. Each patch type is drawn by its own function, and these functions are the first three parts of the project.

a. draw_bars()

def draw_bars(canvas, left, top, width, height, n):

This function draws a rectangle and then a series vertical bars (see examples below).

1. Draw a rectangle frame on the passed in canvas with the rectangle's upper left corner at the given left,top and extending the given width and height. Draw the rectangle with color='lightblue'.

2. Draw N black vertical lines on the canvas. The first line should be on the left edge of the patch, covering the left side line of the border rectangle. The last line should be at the right edge, covering the right side line of the border rectangle. All the other lines should be evenly spaced between the 2 sides. The N parameter is guaranteed to be at least 2.

To test that your functions are using parameters properly, main() divides the window into 4 quadrants, and calls your draw_bars() function once to draw in the upper left quadrant, and a second time to draw in the lower right quadrant.

Here is a command line run of the program to draw the bars patch, 300 pixels wide, 200 pixels hight, with N of 10:

$ python3 quilt.py -bars 300 200 10

Here is a run of the same size, but asking for 17 bars

$ python3 quilt.py -bars 300 200 17

And here is a run asking for 8 bars with patch size 200x200

$ python3 quilt.py -bars 200 200 8

Note that if your Python code hits an error, the exception printout will be in the terminal where you launched the program, so be sure to look there if your output is going wrong. Close the graphics window to exit the python program when done.

Divide And Conquer aside: you don't want to type in a big program (or any large project) and then test the whole thing at the end. The best practice is to proceed in smaller pieces — build a part of it, and test that part right away. Then build and test the next part, and so on. CS106A project writeups naturally follow this best practice, talking about project sub-parts, and "milestone" tests of each part as you gradually build up the whole program. These graphics functions do not lend themselves to Doctests, so we are testing them by running them individually and looking at the output.

b. draw_eye()

def draw_eye(canvas, left, top, width, height, n):

1. Draw the lightblue border rectangle, the same as for the bars.

2. Draw a yellow oval, with the upper left of its bounding box at left,top and extending for width,height. The oval should just barely cover up the border rectangle on the four sides.

3. Draw N black lines starting from the center of the oval. Use regular division / to compute the x,y of the center of the oval (recall that the drawing functions work fine with float numbers - if you ask it to draw at x=93.4, it just uses 93). Extend each black line to N points on the bottom edge of the border rectangle, distributed along the edge evenly in the same way as the bars patch.

The following command line calls your draw_eye(), 300 x 200, 10 lines:

$ python3 quilt.py -eye 300 200 10

c. draw_bowtie()

def draw_bowtie(canvas, left, top, width, height, n):

1. Draw the lightblue border rectangle as before.

2. Draw N red lines as follows. N will be 2 or more. The first line is from the upper left corner to the lower right corner of the patch. The next line moves down on the left, and up on the right. Continuing this pattern with the lines evenly spaced until the last line starts from the lower-left corner and goes to the upper right corner. Draw each line in 1 step, from its point on the left edge to its point on the right edge (vs. drawing 2 line segments, each to the middle).

One approach: for each line 0, 1, 2, ... N-1, compute a "y_delta" amount which is the vertical distance from the start point. For the left side, the deltas move down from the upper left corner. For the right side, the deltas move up from the lower right corner.

To draw a line of a specific color, use the color= parameter like this: canvas.draw_line(0, 0, 10, 10, color='red')

The following command line runs draw_bowtie(), 300 x 200, 10 lines:

$ python3 quilt.py -bowtie 300 200 10

Milestone: 3x Patches

Build and debug your code until it can draw all 3 patch types correctly for various sizes and values of N.

d. Quilting Bee

The last part uses decomposition to build the whole quilt. See the similar example in lecture.

The draw_quilt() function creates a canvas of the passed in width and height. The quilt will be made of an n-by-n grid of sub-rectangles, each the same size. We'll call the width and height of each sub-rectangle the sub_width and sub_height.

Compute the sub_width and sub_height for the quilt. For example if the overall canvas is 800 pixels wide and N is 9, the sub_width is 88, i.e. 800 divided by 9, rounding down is 88. Use the int division // operator.

Many times we have written a nested y/x loop to go over all the pixels in an image. In this case we want a nested loop over the row/col numbers of the patches, e.g. row=0 is the top row of patches, row=1 is the next row of patches and so on.

    # loop over rows and columns of patches
    for row in range(n):
        for col in range(n):
            # Draw one patch of the grid of patches

What is the x,y pixel coordinate of upper left corner of the patch at row,col? What is its width and height? What do you do to draw a patch there?

Milestone: Eye Test

Inside the row/col loop, call draw_eye() to draw an eye for every patch in the quilt to test that the row/col logic is working. Below is the command line to call your draw_quilt() function, here creating a 500 x 300 canvas with N of 5. That creates 5 x 5 grid of patches, and each patch also uses N of 5 (we're using N for two things here - the number of patches, and the internal N of each patch).

$ python3 quilt.py -quilt 500 300 5

Patch Rotation

We want a scheme to draw a different patch type in every spot in the grid. There is a standard programming trick for this situation, where we want to cycle through patches like: eye, bars, bowtie, eye, bars, bowtie, eye, ...

Inside the loops, compute a choice int from the row and col numbers like this:

    choice = (row + col) % 3

The % modulo operator divides by 3 and returns the remainder. The result of % n is always in the range 0, 1, .. n-1. In this case choice will cycle through a pattern 0, 1, 2, 0, 1, 2, 0.

Use choice to rotate between the different patch types: 0=eye, 1=bars, 2=bowtie. Change the inside of the row/col loop to draw the right patch type depending on the choice. That is the deliverable state for your quilt program.

Here is the command line to run draw_quilt():

$ python3 quilt.py -quilt 600 400 6

Here's a quilt with a relatively low value of n=3 giving it a more abstract look. One is reminded of our earlier research in the area of art suitable for hotels.

$ python3 quilt.py -quilt 400 400 3

All Done

As a final test, try a nice big quilt like this

$ python3 quilt.py -quilt 1200 800 10

quilt-done10.png

When all of the code is working, you should be able to draw a quilt with various sizes and various values of N. This program puts together loops, applied math, and drawing, and leverages decomposition for sub-problems. Save your quilt.py file to turn in to Paperless as hw 5.2 with your data-stripes.py file.

Background

Stanford senior lecturer Julie Zelenski (teaches CS106B) created the original "quilt" assignment, with different quilt-squares each drawn its own function, as a graphical way to play with decomposition. (see the Nifty Assignments archive) Nick Parlante created this version for CS106A-python, adapting the ideas to Python, proportionate drawing, and using the command-line to test milestones.