Due: Thursday, April 11, 2024, at 10pm

You may work alone or with a partner, but you must type up the code yourself. You may also discuss the assignment at a high level with other students. You should list any student with whom you discussed each part, and the manner of discussion (high-level, partner, etc.) in a comment at the top of each file. You should only have one partner for an entire assignment.

You should submit your assignment as a a3.zip file on Moodle.

Getting started:

Both parts of this assignment will require you to use the graphics.py library. You should download a copy from here and save it in the same folder as your assignment code.

Parts of this assignment:

• Part 1: Making a picture
• Part 2: Placing checkers pieces
• Reflection

Comments and collaboration

As with all assignments in this course, for each file in this assignment, you are expected to provide top-level comments (lines that start with # at the top of the file) with your name and a collaboration statement. For this assignment, you have multiple programs; each needs a similar prelude.

You need a collaboration statement, even if just to say that you worked alone.

Note on style:

The following style guidelines are expected moving forward, and will typically constitute 5-10 points of each assignment (out of 100 points).

• Variable names should be clear and easy to understand, should not start with a capital letter, and should only be a single letter when appropriate (usually for i, j, and k as indices, potentially for x and y as coordinates, and maybe p as a point, c for a circle, r for a rectangle, etc.).
• It’s good to use empty lines to break code into logical chunks.
• Comments should be used for anything complex, and typically for chunks of 3-5 lines of code, but not every line.
• Don’t leave extra print statements in the code, even if you left them commented out.
• Make sure not to have code that computes the right answer by doing extra work (e.g., leaving a computation in a for loop when it could have occurred after the for loop, only once).

Note: The example triangle-drawing program on page 108 of the textbook demonstrates a great use of empty lines and comments, and has very clear variable names. It is a good model to follow for style.

Part 1: Making a picture

# You should be fully equipped to complete this part after Lesson 7 (Monday Apr. 8).

In this part, you will guide the user through making a picture. For example, your program could instruct a user to make a house by following these steps:

1. Click twice, indicating two corners of a rectangle for the house.
2. Click once, indicating the center point of the top edge of the door, which has width 1/5 that of the entire house.
3. Click once, indicating the center point of a circular window that has diameter half the width of the door.
4. Click once, indicating the peak of the roof.

An example interaction might be the following sequence:

There should also be a text display at the bottom of the window, explaining the different steps to the user.

You can design any type of picture you want, as long as it follows these guidelines:

• There must be at least three different shapes used (different classes in graphics.py).
• You must set at least three attributes between all of the shapes (ex: fill color, outline color, border width).
• You must require at least five clicks from the user.

Your code should be saved in a file called picture.py. You should also include a screenshot of an example of your final picture after running your program in picture.png.

Part 2: Placing checkers pieces

# You should be fully equipped to complete this part after Lesson 7 (Monday Apr. 8).

For this part, you will display a grid representing a game board (like in checkers or chess, but you don’t need to color the grid locations red/black). You will be randomly selecting where to place pieces such that there is one piece per row.

You should start by practicing displaying a grid. As seen in the earthquake visualization code on Friday, you can use the setCoords method of the GraphWin class to change the coordinate system to one you’re likely more familiar with.

Here is an example not changing the coordinates (assume graphics has already been imported):

# Make the window 
win = GraphWin("Regular Coordinates", 400, 300)

# Draw an arrow
p1 = Point(100, 100)
p2 = Point(300, 200)
line = Line(p1, p2)
line.setArrow("last")
line.draw(win)

# Wait for the user to click, then exit
win.getMouse()
win.close()

This is the result, alongside that of a program that also draws a grid (see below):

You can get the same arrow but use coordinates you’re more familiar with by using the setCoords method of the GraphWin class. To use this method, you should provide, in order, the minimum x, minimum y, maximum x, and maximum y values of the window. Here is an example of drawing the same arrow but changing the coordinates to what you might be used to:

# Make the window
win = GraphWin("Modified Coordinates", 400, 300)
win.setCoords(0.0, 0.0, 4.0, 3.0)   # set the min/max coords

# Draw an arrow
p1 = Point(1, 2) # much easier to understand!
p2 = Point(3, 1)
line = Line(p1, p2)
line.setArrow("last")
line.draw(win)

# Wait for the user to click, then exit
win.getMouse()
win.close()

Notice how the first point for the arrow is at (1,2) rather than (100,100). This is because instead of the bottom of the window being y=300, in the new coordinate system, the bottom is y=0 and the top is y=3.

You are now ready to draw the grid! Here is a snippet of code that uses a modified coordinate system to generate a grid. Note that setCoords is called with slightly different values to provide a little buffer on either side. The result is shown on the right, above.

# Make the window
win = GraphWin("A Grid!", 400, 300)
win.setCoords(-0.5, -0.5, 4.5, 3.5)   # set the min/max coords, with buffer

# Draw some vertical lines
x = 0
y1 = 0
y2 = 3
line = Line(Point(x, y1), Point(x, y2))
line.draw(win)

x = 1
y1 = 0
y2 = 3
line = Line(Point(x, y1), Point(x, y2))
line.draw(win)

# TODO: add more lines (wouldn't a loop be great?)

# Draw some horizontal lines
x1 = 0
x2 = 4
y = 0
line = Line(Point(x1, y), Point(x2, y))
line.draw(win)

# TODO: add more lines

# Draw an arrow
p1 = Point(1, 2)
p2 = Point(3, 1)
line = Line(p1, p2)
line.setArrow("last")
line.draw(win)

# Add some helpful labels
blLabel = Text(Point(0, -0.2), "(0,0)")
blLabel.draw(win)

brLabel = Text(Point(4, -0.2), "(4,0)")
brLabel.draw(win)

ulLabel = Text(Point(0, 3.2), "(0,3)")
ulLabel.draw(win)

urLabel = Text(Point(4, 3.2), "(4,3)")
urLabel.draw(win)

# Wait for the user to click, then exit
win.getMouse()
win.close()

For this part, your program should first ask the user how many grid cells there are (let’s call this n), and then draw an nxn grid. For each row, you should choose a random column to put a checker piece, and draw a red circle there. A radius of 0.35 times a grid cell size seems to look good.

Save your program in a file called randomPieces.py.

Here is a possible output:

Note that although you should only have one piece per row, there might be repeats in the columns, or empty columns.

Reflection

# You should be equipped to complete this part after finishing your assignment.

Were there any particular issues or challenges you dealt with in completing this assignment? How long did you spend on this assignment? Write a brief discussion (a sentence or two is fine) in your readme.txt file.

Here are some examples:

##### Reflection #####
# I couldn't figure out how to change the text in Part 1; I found the undraw() function in the graphics.py documentation PDF.
# I had issues drawing circles until I looked back at the earthquake program.
# I spent 7 hours on this assignment.

##### Reflection #####
# I had so much fun making my own picture in Part 1.
# Most of my trouble came from Part 2.  I couldn't figure out how to draw the circles in the middle,
# and then I realized I had to add 0.5 to move them off of the lines.
# I spent 7 hours on this assignment.

##### Reflection #####
# It went fine; I found what I needed in my notes and the graphics.py documentation.
# I spent 5 hours on this assignment.

Grading

This assignment will be graded out of 100 points, as follows:

• 5 points - submit a valid a3.zip file with all files correctly named

• 5 points - all code files contain top-level comments with file name, purpose, and author names

• 5 points - each code files’ top-level comments contain collaboration statement

• 10 points - code style enables readable programs

• 25 points - picture.py program uses three different shapes (4 pts), sets three attributes (4 pts), requires five user clicks (4 pts), draws shapes based on user clicks (8 pts), and gives instructions to the user (5 pts)

• 10 points - picture.png is a valid possible output from the program in picture.py

• 35 points - randomPieces.py asks the user for n (3 pts), draws an nxn grid (12 pts), draws one piece per row (12 pts) each in a random column (8 pts)

• 5 points - readme.txt file contains reflection

What you should submit

You should submit a single a3.zip file on Moodle. It should contain the following files:

• readme.txt (reflection)
• picture.py (Part 1)
• picture.png (example result from Part 1)
• randomPieces.py (Part 2)