Submission Details

Note Please take special note that you are only allowed to use special forms specifically introduced in the lecture videos / assignments.. The autograder will reject any submissions that use special forms we haven’t introduced.

Getting Started

In this assignment you’ll play with simple functions for making images that we’ll use later on in the course. The only problem that involves lambda expressions is the very last activity. NO OTHER ACTIVITIES require the use of lambdas.

Note: We’ve tried to make this assignment accessible to those who have trouble seeing colors, but please let us know if we can provide additional help.

In order to start this assignment, please download the following ZIP file, extract its contents, and open up exercise_1.rkt.

Exercise 1 Starter Files

Activity 1. Red Square

First, let’s make a 100x100 red square like the below:

Now you should give this square a name. In the Definitions Window type:

(define a-red-square your-code-for-the-square)

and hit run.

You can now refer to the square by typing a-red-square into the interaction window or any code you write.

VERY Important Note: The names you give your images (i.e. the names after the word “define”) must be exactly as described otherwise the autograder will reject your submission!

Activity 2. Blue Circle

Now let’s make a blue circle of radius 50.

Define it as the name: a-blue-circle.

Activity 3. NU Stop Sign

There’s a ton of built-in colors in the ISL, stored in special data object called the color-database<%>. We won’t worry about the details of this more complex piece of data right now, but suffice it to say that when Racket sees you’ve given it a String as a color input, it looks that string up in this database to see if it has a matching color and replaces that string with the actual “recipe” for that color.

; make-color: number number number -> Color
; or slightly more specifically...
; make-color: (integer-in 0 255) (integer-in 0 255) (integer-in 0 255) -> Color

Use the make-color function to create our new color and then use that as an input to some function that allows us to make a regular octagon that is solid and has a side length of 100.

Define it as the name: a-northwestern-stop-sign.

Activity 4. Outline Mode

Repeat Activities 1, 2, and 3 but use outline mode:

outlined-square	outlined-circle	outlined-stop-sign

Define them as the names outlined-square, outlined-circle, and outlined-stop-sign respectively.

Activity 5. Compound Images

Now let’s make compound images from simpler images. Use overlay, above, and beside to make the following compound images, defined as follows.

row-of-hexagons
column-of-hexagons
nested-hexagons

Make sure to draw out or imagine the dataflow diagrams for each of these. You don’t need to turn them in–just draw them on some scratch paper or a whiteboard to make sure you understand how the data moves through the chain of calls. All of the hexagons in the first two should have side-length 50. The hexagons in the third image will have side-lengths of 10, 20, 30, and 40.

Activity 6. Debugging Exercise

In the starter file under activity 6, you’ll see a “commented” line of code that looks like the below but is preceded by a semi-colon.

(overlay (circle 30 "solid" "green" square 100 "solid" "orange")))

This function call is supposed to generate the following shape:

First uncomment the line (remove the preceding semi-colon) and run your program again. You should see an exception in DrRacket and it should also highlight the responsible function call. You have three tasks here:

• Restyle the code so it fits our style guidelines (see Lecture 2 - the function call should be 7 lines long if correctly styled)
• Think about how this function call should work by drawing a Data Flow Diagram for it on a piece of paper. See if the shape helps you notice the issue.
• Fix the issue with the function so it produces above shape and restyle the code (the correctly styled fix program will be 6 lines).
• Finally, define this shape as the variable debugging-exercise

Activity 7. Rotating

Read the documentation for the rotate function and try making an image that looks like this:

Define it as barbie-bowtie. You can use the use official Barbie pink via the color function with a RGB values of 218, 24, and 132 respectively. The triangle’s should both be equilateral with side-length 50 (hint: the rotate angle with 30 and -30)!

Activity 8. Flag of Chicago

Now, make the flag of Chicago:

You might need some more functions than the ones we have discussed so far. You may find radial-star and overlay/xy to be helpful. Remember all the functions in the ISL are explained in the documentation (linked earlier) and your image doesn’t need to be exact! Define it as flag-of-chicago. And again, make sure that you can sketch out the dataflow diagram for it.

Activity 9. Your Own Design

Make a custom image of your own design. It must have at least 4 shapes and 2 different colors. You could make a smiley face, a Frankenstein, a bowling ball, a logo, a checkerboard, a house – whatever you’d like. Define it as my-custom-design. We might feature some of the best creations on Piazza!

Activity 10. Writing a Simple Function

Now write a simple function, glasses, that makes a picture of a pair of glasses. It takes two inputs, the first is the lens design (an image) and the second is the design for the bridge that joins the two lenses (also an image). It should output an image with two copies of the lens, joined by the bridge. So if you say:

(glasses (circle 50 "outline" "black")
         (rectangle 20 2 "outline" "black"))

You should get something like this:

Remember, a lambda expression is one that allows you to specify something is a function that needs to be evaluated with inputs rather than just a regular old piece of data. So for example, we can make a new function by saying:

(lambda (lens bridge)
          output-code)

Where output-code is whatever code you want to use to make the image of the glasses. The word lambda tells the system we’re making a new function, and the (lens bridge) part tells the system that the output code can refer to the inputs passed to the function by the names lens and bridge, respectively. When the function is called, the system will substitute the first argument passed to the function, whatever it may be, for the name lens wherever it appears in the output-code and it will substitute the second argument in for the name bridge.

That’s how you make a new function, but making the function doesn’t give it a name. You do that by wrapping it in a define expression. So, your program should look something like this:

(define glasses
   (lambda (lens bridge)
      output-code))

Your job here is to decide what output-code should be. It’s going to want to make two copies of the lens and place them around a copy of the bridge. Remember that you can insert whatever the user provided for the lensand bridge into your code just by saying lens and bridge respectively.

Feel free to change the names lens and bridge to something else if you prefer.

Double Check your Work

Make sure you’ve uncommented all of those built-in check-expect calls as they will double check you’ve defined all of your variables correctly. A few minutes after you submit, you’ll receive results of the autograder running on your file. You can submit 1 additional time to fix issues. You are welcome to ask questions about your exercise on Piazza, but if you post code make sure it is in a private post.