Schedule Readings Labs Assignments Mechanics Reference Contact CSC 151-01, 2008F

# Laboratory: Drawings as Values

Summary: In this laboratory, you will explore the model of images in which images are created by composing and modifying basic drawing objects.

## Preparation

a. In your Web browser, open a new window with the reference page for the drawings procedures. (You can reach the page by clicking on the References:Primary and then on the appropriate link)

b. Do not create a new image.

c. Figure out why we haven't asked you to create an image in this case, given that we've started all the recent labs by having you create an image.

## Exercises

### Exercise 1: Basic Explorations

In the following, whenever you are asked to name something, put the definition in the definitions pane. However, when you are asked to show something, put the command in the interactions pane.

a. Starting with the unit circle, create a circle of radius 50 and name that circle `d1`. Leave the circle black and filled. Put your definition of this circle in the definitions pane.

Hint! Instructions for creating a larger circle are in the reading.

b. Display your drawing with the following instruction, which you enter in the interactions pane.

````>` `(image-show (drawing->image d1 100 100))`
```

c. Create a new drawing, named `d2`, by coloring `d1` red.

d. Display the new drawing to see that you created it successfully.

e. Create a new drawing, named `d3`, by shifting `d2` right 100 units.

f. Display the new drawing to see that you created it successfully.

g. Create a new drawing, named `d4`, by grouping `d1` and `d3`.

h. Display the new drawing to see that you created it successfully.

i. Create a new drawing, named `d5`, by shifting `d4` upward 10 units.

j. Display the new drawing to see that you created it successfully.

k. Create a new drawing, named `d6`, by recoloring `d5` to yellow.

l. Display the new drawing to see that you created it successfully.

m. Create a new drawing, named `d7`, by grouping `d4` and `d6`.

n. Display the new drawing to see that you created it successfully.

o. What do you predict will be the effect of replacing the definition of `d1` by the following:

```(define d1 (drawing-scale drawing-unit-square 40))
```

### Exercise 2: A Simple Drawing

In the previous exercise, we created a complex drawing step-by-step, defining each intermediate drawing along the way. However, if we're drawing a single shape, we could also nest operations.

a. Write a single definition that creates a blue circle of radius 30, centered at (80,40). Name that circle `blue-circle`.

b. Display the new drawing in a 100x100 image to see that you created it successfully.

````>` `(image-show (drawing->image blue-circle 100 100))`
```

### Exercise 3: A Simple Drawing

You've just rendered your blue circle in a 100x100 image. Does image size affect rendering? Let's check that question.

a. What do you expect to have happen if you render `blue-circle` in a 200x200 image?

c. What do you expect to have happen if you render the same drawing in a 10x10 image?

### Exercise 4: Scaling Drawings

Consider the following definition.

```(define sample-square
(drawing-recolor
(drawing-hshift
(drawing-vshift
(drawing-scale
drawing-unit-square
40)
100)
60)
"green"))
```

a. What drawing does this describe?

c. Where is the left margin of the square? Where is the top margin?

d. Now, suppose we define a new drawing by scaling the square.

```(define sample2 (drawing-scale sample-square 1.5))
```

Describe what you expect the result to look like.

f. Where is the left margin of the scaled square? Where is the top margin? Were they what you expected? Why do you think they are what they are?

g. Now, suppose we define a new drawing by scaling the square in only one direction.

```(define sample3 (drawing-hscale sample2 0.75))
```

Describe what you expect the result to look like.

### Exercise 5: Order of Operations

As you know, when we're working with mathematics, the order in which we apply operations matters a lots. For example, if we have to both add two and square a number, it matters whether we add first or square first. Does order matter in drawings? Let's consider a few examples.

```(define subject (drawing-scale drawing-unit-circle 40))
```

a. Suppose we want to translate the square horizontally 50 units and vertically 50 units. Does the order we do those two operations matter?

b. Use the following code to check your answer. What do you expect it to do? Does it do what you expect?

```(image-show
(drawing->image
(drawing-group subject
(drawing-recolor (drawing-hshift (drawing-vshift subject 50) 40) "red")
(drawing-recolor (drawing-vshift (drawing-hshift subject 40) 50) "blue"))
100 100))
```

c. Suppose we want to scale the square horizontally by 1/2 and vertically by 3/2. Does the order we do those two operations matter?

```(image-show
(drawing->image
(drawing-group subject
(drawing-recolor (drawing-hscale (drawing-vscale subject 1.5) 0.5) "red")
(drawing-recolor (drawing-vscale (drawing-hscale subject 0.5) 1.5) "blue"))
100 100))
```

e. Suppose we want to translate the square horizontally by 50 units and scale it by 1/2. Does the order we do those two operations matter?

```(image-show
(drawing->image
(drawing-group subject
(drawing-recolor (drawing-hshift (drawing-scale subject 0.5) 40) "red")
(drawing-recolor (drawing-scale (drawing-hshift subject 40) 0.5) "blue"))
100 100))
```

## For Those With Extra Time

### Extra 1: Some Compound Drawings

Consider the following definitions.

```(define thing (drawing-recolor (drawing-scale drawing-unit-circle 30) "orange"))
(define g1
(drawing-group thing
(drawing-hshift thing 40)
(drawing-hshift thing 80)
(drawing-hshift thing 120)))
(define g2
(drawing-group g1
(drawing-recolor (drawing-vshift (drawing-hshift g1 20) 30) "green")
(drawing-recolor (drawing-vshift (drawing-hshift g1 40) 60) "blue")
(drawing-recolor (drawing-vshift (drawing-hshift g1 20) 90) "indigo")))
(define g3
(drawing-group (drawing-recolor g2 "black")
(drawing-recolor (drawing-hshift (drawing-vshift g2 5) 5) "white")
(drawing-hshift (drawing-vshift g2 10) 10)))
(define g4
(drawing-group g2
(drawing-hscale g2 1.5)
(drawing-vscale (drawing-vshift g2 5) 0.75)))
```

a. Describe what you think each of the four drawings will look like.

b. Check your answers experimentally. Note that some of these drawings take surprisingly long to render.

c. What clever (or not so clever) technique do these examples reveal?

## Explorations

Try using the drawing procedures to create a smiley face or an office building.