Laboratory: Raster Graphics and RGB Colors
a. Create and show a 9x5 image called landscape.
b. As you may recall, the initial color associated with an image is the
current background color. Change the background color to yellow.
c. Create and
show a 5x7 image called portrait.
d. Increase the magnification of each image to 800%
so that you can see changes to individual pixels.
e. Save your StalkerNet picture to
/home/username/Desktop/me.jpg,
load that picture, name it self-portrait, and show it in
a new window.
How do you save your StalkerNet picture? You first find
yourself in StalkerNet. Next, you right click on the picture,
select from the menu
that appears, navigate to the desktop, and choose the name
me.jpg.
Although Grinnell College owns the copyright in your StalkerNet picture
and tells us so repeatedly in strong language, our use of that picture
for this lab and elsewhere in the class clearly falls under the rubric
of fair use.
Exercise 1: Changing Selected Pixels
a. Make the top-left pixel of portrait and
landscape red. Recall that
you set pixels using (image-set-pixel!
image column
row color)
and that you can get a color from its name with (color-name->rgb
"name").
b. Make the bottom-right pixel of each of the two images black.
Exercise 2: A Simple Figure
Write instructions to make a green
plus sign in the exact center of portrait. The plus sign
should be three pixels wide and three pixels high.
Exercise 3: Selecting New Colors
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 RGB values,
and name them fave1, fave2, and fave3.
Add these definitions to your library file.
For example, if hot pink were my favorite color, I might write
(define fave1 (color-name->rgb "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.
Exercise 4: Representing 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.
Exercise 5: Getting Information from Existing Images
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
rgb->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 (rgb-new 255 0 0),
(rgb-new 0 255 0), and (rgb-new 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 (rgb-new 255 0 0))
c. Explore your answers by using rgb->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 (rgb-new 255 255 0),
(rgb-new 255 0 255), and (rgb-new 0 255 255)?
b. Explore your answers by setting various pixels in landscape
to the specified colors.
c. Explore your answers by using rgb->color-name
to find the names associated with these colors.
Exercise 8: Reduced Components
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 (rgb-new 192 192 0),
(rgb-new 128 128 0), (rgb-new 64 64 0),
(rgb-new 192 64 0), and (rgb-new 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?
Exercise 9: Common Components
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.
Exercise 10: Your Favorite Colors, Revisited
In an earlier exercise, you defined three favorite colors.
Your definitions looked something
like the following:
(define fave1 (color-name->rgb "hotpink"))
(define fave2 (color-name->rgb "aquamarine"))
(define fave3 (color-name->rgb "wheat"))
a. Determine the red, green, and blue components of fave1
using rgb-red, rgb-green, and
rgb-blue.
b. Determine the red, green, and blue components of fave2,
using rgb->string.
c. Determine the red, green, and blue components of fave3,
using rgb->rgb-list.
Explorations are intended for students interested in further
exploring the design aspects of these techniques. They also
provide students who finish early with extra activities that may
challenge them in different ways.
Exploration 1: Generating Colors
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).
Exploration 2: Composition in Blues
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.
Exploration 3: Color Context
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?
Exploration 4: Related Colors
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.
