Lab: Decomposition

Assigned

Monday, 2 November 2020

Summary

In this laboratory, you will practice algorithmic decomposition by analyzing and writing code to draw basic pictures in Racket.

In the reading, we introduced the foundational technique of algorithmic decomposition where we express a complex problem in terms of smaller, easier-to-solve problems. We can decompose any problem, no matter the domain. However, the image-drawing facilities of Racket give us a natural way of visualizing decomposition. We will, therefore, begin our journey into programming by practicing algorithmic decomposition with images. This lab will give you some experience decomposing problems as well as typing out basic Racket code.

Exercises

Introducing Pair Programming

For these next four exercises, we will try out pair programming. Pair programming is a particular discipline of collaborative programming that we will be using extensively in our lab work. We’ll have more to say in the coming weeks about the nitty-gritty of working in pairs, but we would like you to dive head-first into the experience.

Online, pair programming is quite simple to do:

• One person, the driver, will share their screen via MS Teams and is in control of keyboard. They will type in the code that the pair collaboratively designs and focuses on making sure the code is syntactically correct.
• The other person, the navigator, steers the design of the program. They take charge of solving the problem as well as acting as a second pair of eyes on the code. They are also responsible for keeping track of the time spent on the problem.

Between each exercise, you will swap driver and navigator roles so that you and your partner get experience with both roles. If you are in a group of three, you will have two navigators and one driver! Make sure to rotate roles so that everyone gets a turn as the driver.

To help facilitate quick swaps between driver-navigator roles, we have created A- and B-side starter files for you to edit in and share with your partner when you are driver. Because this lab involves images (which we can’t embed in a plaintext source file), the remainder of this write-up will contain lab instructions. However, in future labs, you will see more of the instruction text shifted to the starter files rather than the lab’s webpage, so that you have everything you need to complete the lab in one place.

For this exercise, decide who will be the driver first. The driver should download the A-side file:

• decomposition-a.rkt

The navigator should download the B-side file:

• decomposition-b.rkt

And the driver should open up DrRacket, share their screen and drive code entry. The other person will be the navigator and direct program design.

Finally please note these guidelines when working in pairs:

• Only the driver should be typing in code. The navigator should not be implementing the required programs in parallel to the driver. As navigator, you should be practicing your problem solving skills, not your program writing skills.
• In addition, as the navigator, please do not work ahead in your file. Focus entirely on the current problem that your driver-partner is working through.

If your partner is not following these guidelines, please let a member of the course staff know so that we can resolve the situation.

Exercise 1: Party

(A-side: Spend 10 minutes working collaboratively on this problem.)

Your pair should work on defining an image called party-people that looks like this:

.

To draw equilateral triangles use the triangle function, e.g.,

; Creates an equilateral triangle with sides of length
; 10 (in pixels) that is solid and green.
(triangle 10 'solid "green")

Like the reading, use the technique of algorithmic decomposition to break down the image into smaller parts that are simpler to implement. Your code should use define commands to explicitly name these smaller parts so that your code reflects that decomposition you identified.

Exercise 2: Cottage

(B-side: spend 15 minutes working collaboratively on this problem.)

Now, switch roles! The navigator of the previous problem should become the driver. They should share their screen and the exercise will be written in their decomposition-b.rkt file.

Now, try building a program that defines cottage as the following image:

.

Again:

1. Use algorithmic decomposition to break down this image into smaller parts, using defines to explicitly name the smaller parts you identified.
2. When you are done, notify the course staff using the @lab-help tag and share your results from exercises 2 and 3.

Exercise 3: Falling dominoes

(A-side: Spend 15 minutes working collaboratively on this problem.)

Switch roles yet again!

For this exercise, we’ll introduce two new drawing functions:

• (rotate deg img) produces the image img but rotated deg degrees counter-clockwise.
• (beside/align yalign img1 img2 ...) places the images img1, img2, …, side-by-side as with beside. However the are aligned relative to yalign which can be one of the following strings:
  • “top”
  • “bottom”
  • “middle”
  • “center”
  • “baseline” The images are aligned according to this policy, e.g., beside/align behaves like beside if it is passed middle.

Coincidentally, above/align also exists with options to align "left", "right", "middle", or "center".

Use these functions to define an image falling-dominoes that looks as follows:

Before tackling this problem, I recommend that you experiment with rotate and beside/align to get a feel for how they work. Try out a few examples in the Again, use functional decomposition and name the components of your image appropriately with defines.

Detour!

It will take about 5–10 minutes to wrap up and submit this lab. See the instructions at the end of the lab for what you should do. While I’d prefer that you get to exercise 4, I also want to make sure that you are able to turn things in by the end of class. It’s fine if you do not submit exercise 4, but you should try to get to it on your own.

Exercise 4: Sun Triangles

(B-side: Spend 20 minutes working collaboratively on this problem.)

Switch roles one last time!

Here’s one more function for this exercise:

• (overlay img1 img2 ...) places the images img1, img2, …, on top of each other.

In addition, when we specify the fill of an image, e.g., using "solid" as in (square 50 "solid" "red"), we can also specify a number, e.g., (square 50 100 "red"). The number, which must range from 0–255 is interpreted as the degree of transparency of the shape’s color. 0 is interpreted as fully transparent whereas 255 is equivalent to "solid".

Use these functions to define an image sun-triangles that looks as follows:

The image is a collection of transparent yellow triangles with black outlines on top of an orange circle.

This one is a bit trickier than the previous ones, and there is a few ways you might approach it. Not all approaches will result in the exact same image, so we aren’t looking for your result to be identical, but it is possible, and we encourage you to think carefully about your decomposition to get that result.

At the very least, you will need to draw yellow triangles with outlines. To achieve this effect, you should use overlay and two triangles with a combination of "solid" and "outline" fills.

If you are still in class at this point, notify the course staff that you are done via the @lab-help tag and show them your work!

Submitting your lab

At this point, your team should have completed the definitions in both decomposition-a.rkt and decomposition-b.rkt. Find a way to combine these into one file, decomposition.rkt and ensure that both team members have a copy of that file. Be aware that if you named any auxiliary defines the same between the two files, you will need to rename them to avoid conflicts!

Once you have all the exercises in your file, you can rename it to decomposition.rkt—it is now complete! Finally, one member of your group can upload the completed decomposition.rkt file to Gradescope for this lab. As in the prior lab, make sure that you upload you work as a group assignment and you include your partner in the submission!

I would recommend that you use Teams or email to exchange files or portions thereof. You might also consider using a lightweight snippet sharing service to do this instead.
College policy appears to indicate that I can mention such services, but not recommend them. Some options my colleagues have mentioned include:

• ctxt.io (free, lightweight)
• pastebin (free, ad-ridden)
• gist.github.com (free, requires account)