Extended Exercise: Drawing Simple Pictures

DrScheme provides the graphics teachpack draw.ss, which introduces simple graphics operations:

1. draw-solid-line, which consumes two posn structures, the beginning and the end of the line on the canvas, and a color.
2. draw-solid-rect, which consumes four arguments: a posn structure for the upper-left corner of the rectangle, a number for the width of the rectangle, another number for its height, and a color.
3. draw-solid-disk, which consumes three arguments: a posn structure for the center of the disk, a number for the radius of the disk, and a color.
4. draw-circle, which consumes three arguments: a posn structure for the center of the circle, a number for the radius, and a color.

Each drawing operation also comes with a matching clear- operation: clear-solid-line, clear-solid-rect, clear-solid-disk, and clear-circle. If these functions are applied to the same arguments as their matching draw- function, they clear the corresponding shapes of the canvas.

Drawing operations on computers interpret the screen as follows:

First, the origin of the plane is in the upper-left corner. Second, y coordinates grow in the downwards direction. Understanding the difference between this picture and the more conventional Cartesian plane is critical for drawing shapes with programs.

Exercise 6.2.1

Evaluate the following expressions in order:

1. (start 300 300), which opens a canvas for future drawing operations;
2. (draw-solid-line (make-posn 1 1) (make-posn 5 5) 'red), which draws a red line;
3. (draw-solid-rect (make-posn 20 10) 50 200 'blue), which draws a blue rectangle of width 50 parallel to the line; and
4. (draw-circle (make-posn 200 10) 50 'red), which draws a red circle of radius 50 and a center point at the upper line of the rectangle.
5. (draw-solid-disk (make-posn 200 10) 50 'green), which draws a green disk of radius 50 and a center point at the height of the upper line of the rectangle.
6. (stop), which closes the canvas.

The definitions and expressions in figure  draw a traffic light. The program fragment illustrates the use of global definitions for specifying and computing constants. Here, the constants represent the dimensions of the canvas, which is the outline of the traffic light, and the positions of three light bulbs.

;; dimensions of traffic light (define WIDTH 50) (define HEIGHT 160) (define BULB-RADIUS 20) (define BULB-DISTANCE 10) ;; the positions of the bulbs (define X-BULBS (quotient WIDTH 2)) (define Y-RED (+ BULB-DISTANCE BULB-RADIUS)) (define Y-YELLOW (+ Y-RED BULB-DISTANCE (* 2 BULB-RADIUS))) (define Y-GREEN (+ Y-YELLOW BULB-DISTANCE (* 2 BULB-RADIUS))) ;; draw the light with the red bulb turned on (start WIDTH HEIGHT) (draw-solid-disk (make-posn X-BULBS Y-RED) BULB-RADIUS 'red) (draw-circle (make-posn X-BULBS Y-YELLOW) BULB-RADIUS 'yellow) (draw-circle (make-posn X-BULBS Y-GREEN) BULB-RADIUS 'green) Figure: Drawing a traffic light

Exercise 6.2.2

Develop the function clear-bulb. It consumes a symbol that denotes one of the possible colors: 'green, 'yellow, or 'red, and it produces true. Its effect is ``to turn off'' the matching bulb in the traffic light. Specifically, it should clear the disk and display a circle of the matching color instead.

Choice of Design Recipe: See section  for designing functions that consume one of an enumeration of symbols.

Testing: When testing functions that draw shapes into a canvas, we ignore test expressions. Although it is possible to implement appropriate test suites, the problem is beyond the scope of this book.

Combining Effects: The primitive operations for drawing and clearing disks and circles produce true if they successfully complete their task. The natural way to combine the values and the effects of these functions is to use an and-expression. In particular, if exp1 and exp2 produce effects and we wish to see the effects of exp2 after those of exp1, we write

(and exp1 exp2)

Exercise 6.2.3

Develop a function draw-bulb. It consumes a symbol that denotes one of the possible colors: 'green, 'yellow, or 'red, and produces true. Its effect is ``to turn on'' the matching bulb in the traffic light. Solution

Exercise 6.2.4

Develop the function switch. It consumes two symbols, each of which stands for a traffic light color, and produces true. Its effects are to clear the bulb for the first color and then to draw the second bulb. Solution

Exercise 6.2.5

Here is the function next:

;; next : symbol -> symbol
;; to switch a traffic light's current color and to return the next one  
(define (next current-color) 
  (cond 
    [(and (symbol=? current-color 'red) (switch 'red 'green)) 
     'green] 
    [(and (symbol=? current-color 'yellow) (switch 'yellow 'red)) 
     'red] 
    [(and (symbol=? current-color 'green) (switch 'green 'yellow)) 
     'yellow])) 

Replace the last three lines of the program fragment in figure  with (draw-bulb 'red). This creates a traffic light that is red. Then use next to switch the traffic light four times. Solution