Laboratory: Raster Graphics and RGB Colors

a. Make the top-left pixel of portrait and landscape red. Recall that you set pixels using (image-set-pixel! image column row color).

For some unknown reason, GIMP does not always show updates to pixels. To force it to show the update, you may have to click on the window or open another window with the image.

b. Make the bottom-right pixel of each of the two images blue.

Write instructions that use multiple calls to image-set-pixel! make a green plus sign in the exact center of portrait. The plus sign should be three pixels wide and three pixels high.

As you've noted, we regularly suggest colors for you to use. Of course, you should not be limited by our suggestions for possible colors. Write down the names of five of your favorite colors and then see if any of them are defined by using context-list-colors. For example, if one of my favorite colors is a kind of pink (say, hot pink), I might write

> (context-list-colors "pink")

a. Using those results or other explorations of the color space, pick three color names that you like, find the corresponding encoded RGB values, and name them fave1, fave2, and fave3.

For example, if hot pink were my favorite color, I might write

(define fave1 (color-name->irgb "hotpink"))

You may find it easiest to consider a color using context-set-fgcolor!. For example, if I wanted to see what hot pink looked like, I might use

> (context-set-fgcolor! "hotpink")

b. Set some pixels to your favorite colors.

Recall that you can find out the value Mediascript associates with a name by typing it in the interactions window and then hitting enter.

a. Find out what values Mediascript associates with your three favorite colors. For example, type fave1 to identify what value is used for fave1.

b. Are those values clearer or less clear than the names you've used?

c. (Optional) Hypothesize what those values represent. You might find it useful to create a few colors which have only one of the three components.

a. Set the color of the center pixel in portrait to the color of the center pixel in self-portrait. (Hint: Use image-width and image-height to find the width and height of self-portrait.)

b. Find out the names of the colors of some pixels in self-portrait using image-get-pixel and irgb->color-name.

The primary colors are the colors in which one of the three components has the full value (255) and the other two components are 0.

a. What colors do you expect to get from (irgb 255 0 0), (irgb 0 255 0), and (irgb 0 0 255)?

b. Explore your answers by setting various pixels in landscape to the specified colors. For example, you might set the top-left pixel to the first color with

> (image-set-pixel! landscape 0 0 (irgb 255 0 0))

c. Explore your answers by using irgb->color-name to find the names associated with these colors.

The secondary colors are those you get when you set two components to 255 and the third to 0.

a. What colors do you expect to get from (irgb 255 255 0), (irgb 255 0 255), and (irgb 0 255 255)?

b. Explore your answers by setting various pixels in landscape to the specified colors.

c. Explore your answers by using irgb->color-name to find the names associated with these colors.

In the previous two experiments, we set the level of components to 255 or to 0. Let's consider what happens if the components are less than 255.

a. What colors do you expect to get from (irgb 192 192 0), (irgb 128 128 0), (irgb 64 64 0), (irgb 192 64 0), and (irgb 64 192 0)?

b. Check your predictions by setting various pixels in landscape to the specified colors.

c. Determine what names Mediascript associates with these colors. Are they good names?

a. What do you expect to have happen if all three components of a color are 128? If all three components are 255? If all three components are 0?

b. Check your answers by setting a pixel to each color and by finding Mediascript's name for that color.

After you are done checking your answers, you should read the notes on this problem.

In an earlier exercise, you defined three favorite colors. Your definitions looked something like the following:

(define fave1 (color-name->irgb "hotpink"))
(define fave2 (color-name->irgb "aquamarine"))
(define fave3 (color-name->irgb "wheat"))

a. Determine the red, green, and blue components of fave1 using irgb-red, irgb-green, and irgb-blue.

b. Determine the red, green, and blue components of fave2, using irgb->string.

c. Determine the red, green, and blue components of fave3, using irgb->rgb-list.

It should make some sense that the color 0/0/0 is black, since black is the absence of any color. To many, though, it makes less sense that 255/255/255 is white. However, if you ask a physicist, she will tell you that white is the combination of every color of light, so saturation of all three components makes sense. Alternately, we can simply think of white as the opposite of black. Once we know white and black, we can expect that every color with common components in between white and black is some kind of grey, so 128/128/128 is medium grey. (Or is that “medium gray”?)

Return to the problem.

It is useful to be able to visualize the relationship between the RGB numbers and the colors they represent. Sometimes it's just fun to see how well you can guess the components of a color. For each of the following colors, guess the RGB components, build a pixel of that color to see how close you got, and then try again.

a. The dominant color of your skin.

b. A color of your shirt.

c. The color of the desks in this room.

d. The color of the sky right before a storm.

e. A color of your choice (which you should describe first).

Create a new 9x5 image called canvas. Fill the pixels of the canvas with variations of blue to produce something you find compelling.

If those instructions are too vague, you might consider how to use those shades of blue to make an image that induces some mood, such as relaxation or playfulness.

While the representation of colors using red, green, and blue components is relatively straightforward, it ignores a significant issue: Human perception. Perhaps not so surprisingly, the way we perceive a particular color depends greatly upon the surrounding colors. We can use the techniques we've learned so far to explore this issue.

a. Create and show two images, canvas-light and canvas-dark, each 9x5. The background color of the first canvas should be a light grey, about 64/64/64. The background color of the second canvas should be a dark grey, about 192/192/192. Zoom in on each canvas to the full 16:1 magnification.

b. Set the center pixel of each canvas to a medium grey, 128/128/128.

c. Do the center pixels look the same to you? Should they?

Pick a technique for generating a group of eight or so related colors. For example, you might choose a variety of complements to some color, you might choose colors in which the ratio of red to green and of red to blue is consistent (e.g., red is always twice green and triple blue), or you might start with a single color and find variants by repeatedly adding 16 to each component.

Create an interesting 5x5 image using those colors.

You may still be wondering about the integer encoding of RGB colors. See what integers you get for the following colors and then hypothesize how the encoding is computed.