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. For this lab (and for most subsequent labs), you will need to connect DrRacket to GIMP. The steps will feel a bit complex now, but they should get easier as time goes on. If you neglected to do so in the Linux lab, open a new terminal window and type /home/rebelsky/bin/csc151-setup.

c. Start both DrRacket and GIMP.

d. In GIMP, select DBus Server from under the MediaScript menu. You'll get no feedback that anything has happened, but GIMP is now ready to talk to DrRacket.

e. In DrRacket, add the following line to the Definitions pane, directly under the #racket language specification.

(require gigls/unsafe)

“gigls” is Grinnell's Improved GIMP Library for Scripting. (Well, it's really the Glimmer Improved GIMP Library for Scripting, but Glimmer is part of Grinnell.) The code we're using is “unsafe” because it is implemented in C and communicates with another program.

f. Click DrRacket's Run button. If all goes well, DrRacket will think for a moment and then give you a prompt in the interactions pane. If things don't go well, you'll probably see an incomprehensible error message. Ask your teacher or class mentor for help or refer to the list of possible error messages and their solutions.

Exercises

Exercise 1: A Simple Drawing

In the first self check, 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.

(define 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))

c. What do you expect the underlying representation to look like? Fill in the blanks below.

(drawing ellipse 255 "" ___ ___ ___ ___)

d. Check your answer experimentally.

> blue-circle

Exercise 2: Experiments with Rendering

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?

b. Check your answer experimentally.

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

d. Check your answer experimentally.

Exercise 3: Scaling Drawings

Consider the following definition.

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

a. In English, describe what shape you think this describes.

b. Check your answer experimentally by displaying the drawing.

c. Where is the left margin of the square? Where is the top margin? (Note that you can identify these margins visually or you can use drawing-left and drawing-top to have the computer identify them.)

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

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

Describe what you expect the result to look like.

e. Check your answer experimentally.

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 (hscale-drawing 0.75 sample2))

Describe what you expect the result to look like.

h. Check your answer experimentally.

Exercise 4: Order of Operations

As you know, when we're working with mathematics, the order in which we apply operations matters a lot. For example, if we both add two to and square a number, it matters whether we add first or square first. Does order matter in drawings? Let's consider a few examples. (Note: We explore the examples visually. You may also find it useful to see what the underlying representations look like.)

We'll start with a simple black circle along with copies of it colored red and blue.

(define subject (scale-drawing 40 drawing-unit-circle))
(define subject-red (recolor-drawing "red" subject))
(define subject-blue (recolor-drawing "blue" subject))

a. Suppose we want to translate the circle horizontally 50 units and vertically 50 units. Do you think the order we do those two operations matters? Why or why not?

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
                 (hshift-drawing 40 (vshift-drawing 50 subject-red))
                 (vshift-drawing 50 (hshift-drawing 40 subject-blue)))
  100 100))

c. Suppose we want to scale the circle horizontally by 1/2 and vertically by 3/2. Do you think the order we do those two operations matters? Why or why not?

d. Use the following code to check your answer.

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

e. Suppose we want to translate the circle horizontally by 50 units and scale it by 1/2. Do you think the order we do those two operations matters? Why or why not?

f. Use the following code to check your answer.

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

For Those With Extra Time

If you find that you have time left, you may want to do an extra problem, which focuses more on the programming side of what we've learned, or an exploration, which focuses a bit more on the design side.

Extra 1: Some Compound Drawings

Consider the following definitions.

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

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.