Assignment 4: Blending Colors

A common effect in digital graphics is a color blend, in which colors range more or less smoothly from one color to another. For example, the following image shows a blend from blue to red. Isn't it beautiful?

What tools does one need to construct blends like the above? You must know how to manipulate the red, green, and blue components of colors used in digital images. And you know how to do that. In particular, you can extract the red, green, and blue components of a color using rgb-red, rgb-green, and rgb-blue, and you can construct an RGB color using rgb-new. Along with basic mathematical operations and the image-set-pixel! operation, this is enough to let you construct small color blends.

a. Write and document a procedure, (rgb-average color1 color2) that takes two RGB colors as parameters and computes the average of those two colors. That is, the procedure should produce a new RGB color where the red component is the average of the red components of the two colors, the green component is the average of the green components of the two colors, and the blue component is the average of the blue components of the two colors.

You should document the rgb-average procedure using the 6 P's.

b. Consider the following procedures that build an image for a five-pixel blend. You should test the procedure with a few pairs of colors, such as blue and red, green and yellow, and Pacific salmon and Oregon salmon. (You will need to use cname->rgb to convert color names into the corresponding RGB colors.)

;;; Procedure:
;;;   image-five-pixel-blend
;;; Parameters:
;;;   startcolor, an RGB color
;;;   endcolor, an RGB color
;;; Purpose:
;;;   Creates a 5x1 pixel image that contains a blend from startcolor to
;;;   endcolor.
;;; Produces:
;;;   fiveblend, an image identifier
(define image-five-pixel-blend
  (lambda (startcolor endcolor)
    (image-five-pixel-blend-helper (image-new 5 1) startcolor endcolor)))
(define image-five-pixel-blend-helper
  (lambda (fivebyone startcolor endcolor)
    (image-set-pixel! fivebyone 0 0 startcolor)
    (image-set-pixel! fivebyone 4 0 endcolor)
    (image-set-pixel! fivebyone 2 0 (rgb-average startcolor endcolor))
    (image-set-pixel! fivebyone 1 0 
                      (rgb-average startcolor
                                   (image-get-pixel fivebyone 2 0)))
    (image-set-pixel! fivebyone 3 0 
                      (rgb-average endcolor
                                   (image-get-pixel fivebyone 2 0)))
    fivebyone))

i. Explain why you think image-five-pixel-blend uses a helper procedure.

ii. Explain why you think image-five-pixel-blend-helper ends with fivebyone.

c. Write and document a procedure, (rgb-weighted-average weight color1 color2), that takes a weight between 0 and 1 and two RGB colors, and computes the RGB color made up of weight parts of color1 and (- 1 weight) parts of color2.

It is easiest to think about this procedure in terms of particular components. Suppose the red component of color1 is 0 and the red component of color2 is 120. If weight is 0.2, then the red component of the weighted average will be 96 (that is, 0.2*0 + 0.8*120). If weight is 0.75, then the red component of the weighted average will be 30 (that is, 0.75*0 + 0.25*120).

For another example, suppose the green component of color1 is 200 and the green component of color2 is 0. If weight is 0.2, then the green component of the weighted average will be 40 (that is 0.2*200 + 0.8*0). Similarly, if weight is 0.75, then the green component of the weighted average will be 150 (that is 0.75*200 + 0.25*0).

What if the components are both non-zero? Suppose the blue component of color1 is 120 and the blue component of color2 is 180. If weight is 0.2, then the green component of the weighted average will be 168 (0.2*120+0.8*180 = 24+144). If weight is 0.75, then the green component of the weighted average will be 135 (you can do the math).

d. Write a procedure, (image-11-pixel-blend startcolor endcolor) that creates an image 11 pixels wide and 1 pixel high that is a blend from startcolor to endcolor. startcolor and endcolor should be RGB colors. To compute the color for each pixel, you should call the rgb-weighted-average procedure that you wrote in part (c). Use image-five-pixel-blend and its helper as a model for your procedure(s).

e. Use image-11-pixel-blend to compute color blends from three colors to their pseudo-complements. What do you notice about the colors in the middle of these blends? Why do you get those colors?

Write a procedure, (rgb-square-blend top-left-color top-right-color bottom-left-color bottom-right-color), that creates a 5x5 image with each parameter RGB color in the specified position and a blend of those colors in between.

You should be able to blend the colors along the edges, using a technique much like the one we just used for one-dimensional blends. How should you blend the colors in the middle? It's up to you.

We intend to evaluate your assignment on the correctness and elegance of your solution. That is, is what you've done something that could be reasonably considered a blend, and have you chosen a technique that is clear and easy to understand.