Assignment 3: Drawing Procedures

Consider the following Scheme code.

(define sample
  (drawing-hshift
   (drawing-vshift
    (drawing-group
     (drawing-scale 
      drawing-unit-circle 
      100)
     (drawing-scale 
      (drawing-recolor drawing-unit-circle "yellow") 
      90)
     (drawing-vshift
      (drawing-hscale
       (drawing-vscale 
        drawing-unit-circle
        40)
       60)
      10)
     (drawing-hscale
      (drawing-vscale
       (drawing-recolor drawing-unit-circle "yellow")
       40)
      60)
     (drawing-vshift
      (drawing-group
       (drawing-hshift
        (drawing-group
         (drawing-hscale
          (drawing-vscale
           (drawing-recolor drawing-unit-circle "white")
           15)
          30)
         (drawing-hscale
          (drawing-vscale
           (drawing-recolor drawing-unit-circle "blue")
           15)
          15))
        18)
       (drawing-hshift
        (drawing-group
         (drawing-hscale
          (drawing-vscale
           (drawing-recolor drawing-unit-circle "white")
           15)
          30)
         (drawing-hscale
          (drawing-vscale
           (drawing-recolor drawing-unit-circle "green")
           15)
          15))
        -18))
      -15))
    50)
   50))

Believe it or not, but this code draws a smiley face.

Can you tell what part of the code generates what part of the face?

While the code sucessfully draws a smiley face, it is not very customizable - it draws only one size of smiley face, at only one location, and in only one way. Wouldn't it be much nicer if we could customize the face?

This weeks's second theme may sound a bit more straightforward: “Put a square peg in a round hole.” That is, we start with something like the following image:

How do we achieve this image? To solve the problem, we'll need to break it down into more manageable pieces.

Breaking down problems into manageable pieces is an essential skill computer scientists need. Once the pieces are small enough, you can implement them. And then you put the solution together from all the individual pieces you've solved.

But wait: There's more! Often, in the process of solving a clearly stated problem your imagination will run wild; and you will think of cool and beautiful things that you can do using the pieces you've created to solve the given problem. Then the creative artist in you can come out and express itself. So once you've done all we've specifically asked you to do, the final exercise will give you free rein to produce something beautiful, or at least compelling.

As we noted, the smiley code builds only one appearance of smiley face, with a fixed size and location. Wouldn't it be nice to be able to do more? Let's generalize that code!

Write a procedure, smiley, based on the code given above, that takes some inputs and draws a smiley face based on those inputs. Minimally, your procedure should have parameters that represent the the width, height, and center of the smiley face. But you may consider other possible inputs: eye color or shape, mouth color or shape, perhaps the size or relative position of some of the features.

Think carefully about naming the parameters you choose. Write 6Ps documentation so that we can understand how to use your procedure.

(a) Write a procedure (square-thing col row side-length color) that creates a drawing of a square with the specified side length whose top-left corner is at (col,row) and has the appropriate color.

(b) Write a procedure (round-thing col row diameter color) that creates a drawing of a circle with the specified diameter whose top-left corner is at (col,row) and has the appropriate color.

(a) Write a procedure (round-peg-in-square-hole col row side-length peg-color hole-color), which creates a square of the specified side length and top left corner at (col,row) with a circle that is as large as possible inserted.

(image-show (drawing->image (round-peg-in-square-hole 20 20 50 "red" "black") 100 100))

(b) Next we will want to put a square peg in a round hole, but there are a few challenges to tackle first. The round peg in the square hole was easy because both things (the round-thing and the square-thing) had the same coordinates for their top left corners and the side-length of the square was the same as the diameter of the circle. Neither of these two facts will hold for the square peg in a round hole.

What is the side length of the largest square that will fit inside a circle? To answer this question, you'll need to use the Pythagorean theorem and the lengths indicated by the diagram below.

Once you've figured the answer, write the procedure (largest-square-in-circle diameter) to calculate the side length of the largest square that will fit into a circle of the specified diameter.

Similarly, you will note that for a square in a circle, the top left corners don't match anymore. In fact there is an offset. With a little more geometry, you could confirm this procedure calculates the offset appropriately:

(define largest-square-offset 
  (lambda (diameter) 
    (/ (- diameter
          (largest-square-in-circle diam)) 
        2)))

Note that this procedure depends on yours, so in order for it to be correct, yours will have to be correct also.

(c) Now that you have largest-square-in-circle and largest-square-offset, you can write the procedure (square-peg-in-round-hole col row diameter peg-color hole-color), which takes a circle of the specified diameter and top left corner at (col,row) inserts a square that is as large as possible.

(image-show (drawing->image (square-peg-in-round-hole 20 20 50 "red" "black") 100 100))

With some (less than?) basic building blocks in place, you can now show off your creativity and imagination. The following procedure puts a round peg in a square hole in a round peg in a square hole.

(define double-round-peg-in-square-hole
  (lambda (col row diameter peg-color hole-color)
    (drawing-group 
      (round-peg-in-square-hole col row diameter peg-color hole-color)
      (round-peg-in-square-hole
        (+ col (largest-square-offset diameter))
        (+ row (largest-square-offset diameter))
        (largest-square-in-circle diameter)
        peg-color
        hole-color))))

(a) Write code to generate two drawings as shown in the following two images. You may find it useful to write other helper procedures, such as one that creates a round peg in a square hole centered at a particular location.

(b) Use the techniques and procedures above, as well as any others you deem useful or interesting, write a program that generates an interesting image by combining at least four peg-in-hole drawings in any geometry or color arrangement you wish. Here is an example; your imagination should show there are many other possibile explorations.