Science: Electromagnetic Spectrum
NASA has a unit with lesson plans at htttp://imagers.gsfc.nasa.gov/teachersite/UL.htm I especially recommend their first experiment where students use flashlights and mix colors of light. Most students have mixed pigment colors and are surprised to find out that mixing light does not provide the same results. While NASA also has a site where students can mix colors of light on the computer monitor and see the results, I strongly recommend giving students the opportunity to actually do the experiment in the classroom with flashlights or the stage lights described in the NASA lesson. After mixing colors of light on a white screen, have students try shining the different colors of light on different colored objects. What color is a red object when you shine a red light on it? What about when you shine a cyan light on a red object? Generalization question: How does this relate to complementary colors? How can you explain this pattern?
The teacher will need to select which of the questions and exercises
are appropriate for his/her class and the software available and adjust
the evaluation criteria accordingly. When
The Electromagnetic Spectrum Site http://imagers.gsfc.nasa.gov/ems/ems.html ...
Arizona State University's Patterns in Nature Site has a set of lessons for teaching about light and color with some nice illustrations found at: http://acept.la.asu.edu/PiN/mod/light/pattLightOptics.html
Ask a high energy astronomer: This site's page of past questions
about X-rays and gamma rays can enhance understanding of the electromagnetic
Found at http://imagine.gsfc.nasa.gov/docs/ask_astro/xrays.html
A great page on color vision and designing web pages that work for people with color blindness. http://www.lava.net/~dewilson/web/color.html This page is especially nice because it has pictures of how the same flower might appear to people with different defects in their color vision and some discussion of the genetics of color vision.
Brown University has a site where students can interactively explore light and visual effects. http://tux.cs.brown.edu/exploratory/appletindex.html
A web book on visual perception by Peter Kaiser at http://www.yorku.ca/eye/thejoy.htm
How the CIE color model works http://www.linocolor.com/colorman/sp_ciela_1.htm and http://www.linocolor.com/colorman/sp_ciela_2.htm
An interesting but advanced discussion of color perception and the historical development of color theory: http://kiptron.psyc.virginia.edu/steve_boker/ColorVision2/ColorVision2.html
An interesting scientific paper for the advanced student describing comparative ease of use of the different color models found at http://www.acm.org/sigchi/chi96/proceedings/papers/Douglas/sad_txt.htm
Read the material provided below and use this information to help you do the assigned exercises and questions.
Figure 1 - The electromagnetic spectrum
There is a narrow range of this electromagnetic energy from the sun and other light sources which creates energy of wavelengths visible to humans. Each of these wavelengths, from approximately 4000 Angstroms to 7000 Angstroms, is associated with a particular color response. For example, the wavelengths near 4000 Angstroms (400 nm) are violet in color while those near 7000 (700 nm) are red.
Figure 2 - The colors of the wavelengths of visible light
|Figure 3a - In the CIE model - Z coordinates are projected onto the XY plane|
|Figure 3b - The CIE color model mapped to X and Y coordinates|
Notice in Figure 3b that the perimeter edge marks the wavelengths of visible light. Along this edge will be the 'pure' spectral light colors. Other colors are developed by mixing varying amounts of different wavelengths. Notice the purples at the bottom do not have a wavelength associated with them. These purples are non-spectral colors, that is they can only be seen by mixing wavelengths from the two ends of the spectrum. White light is perceived when all three cones are stimulated, like purple it is only seen when light from many different wavelengths is mixed.
One use for the CIE model is to specify ranges of colors that can be
produced by a particular light source. This range is referred to as a gamut.
For example, a typical computer monitor has a color gamut much smaller
than all the possible colors. A color computer monitor produces color by
mixing specific red, green, and blue phosphors. As seen in the following
illustration, all the possible colors the monitor can produce fall within
a triangle defined by these red, green, and blue starting colors.
Though there is a solid scientific basis behind the CIE system and it provides a very precise way of specifying color, it is not terribly easy to use in practice. An alternative is start with the three primary colors computer monitors use: red, green, and blue.
Figure 5 - The three light primaries: Red, Green, and Blue
The three different colored phosphors are placed in groups very close to each other in groups of three; a triad(see Figure 5). Each triad of primary colored phosphors constitutes a single pixel on the computer monitor. The viewer does not see each phosphor, but the mix of the group of three: the pixel. In fact, it is very difficult to see even a single pixel. The viewer is likely to perceive the color of groups of pixels. By varying the intensity which these phosphors glow, the computer monitor can vary the perceived color at each pixel. As mentioned above, this manipulation of the phosphor intensity creates the gamut of colors which can be created on the computer monitor.
Figure 6 - Each pixel on the computer monitor is made up of a triad of red, green, and blue phosphors.
This mixing process can be represented by laying out all of the possible
color mixtures around in a circle. As you move in a circle from one primary
to the next, you add more of the primary you approach and less of the one
you are moving away from. When you are 180 degrees away from a primary,
you have none of it mixed in. This color is the complement
of the primary. Figure 7 shows the three complementary colors added to
the wheel. Each of these complements has an equal amount of the primaries
on either side of it and none of the primary opposite it:
Figure 7 - Light primary colors and their complements
These complementary colors are also called either the secondary colors or the print primary colors. The term print (or pigment) primaries refers to the fact that these complements to the light primaries are the colored inks used to mix all possible print ink pigments.
This process can continue filling in colors around the wheel. The next level colors, the tertiary colors, are those colors between the secondary and primary colors (Figure 8):
Figure 8 - The tertiary colors added to the primary and secondary colors
Figure 9 - The Hue, Saturation, Value (HSV) color model
You also perceive color changing along two other dimensions. One of the dimensions is lightness-darkness. How light or dark a color is is referred to either as a colors lightness or value. In terms of a spectral definition of color, value describes the overall intensity or strength of the light. If hue can be thought of as a dimension going around a wheel, then value is a linear axis like an axis running through the middle of the wheel (Figure 9).
The last dimension of color that describes our response to color is saturation. Saturation refers to the dominance of hue in the color. On the outer edge of the hue wheel are the 'pure' hues. As you move into the center of the wheel, the hue we are using to describe the color dominates less and less. When you reach the center of the wheel, no hue dominates. These colors directly on the central axis are considered desaturated. These desaturated colors constitute the grayscale; running from white to black with all of the intermediate grays in between. Saturation, therefore, is the dimension running from the outer edge of the hue wheel (fully saturated) to the center (fully desaturated), perpendicular to the value axis (Figure 9). In terms of a spectral definition of color, saturation is the ratio of the dominant wavelength to other wavelengths in the color. White light is white because it contains an even balance of all wavelengths.
These three dimensions of color: hue, saturation, and value constitutes a color model that describes how humans naturally respond to and describe color: the HSV model. Because the HSV model has three dimensions, it describes a solid volume. A horizontal slice of the model shown in Figure 9 creates a disk of the hues running around the perimeter. The farther down the value axis, the more restricted the saturation range (the radius of the disk) is and, therefore, the smaller the disk. You can think of the overall shape of the HSV model as being an upside-down cone, even though in reality the shape of the cone is somewhat distorted.
Another way you can slice the HSV model solid is vertically. If you took a slice along the saturation axis at a red hue, it might look something like Figure 10:
Figure 10 - A saturation/value slice of a specific hue in the HSV model
This wedge shows all of the saturation and value variations on this particular red. At the top of the wedge, the lightest red runs from high saturation on the right to white on the left. As you move down the wedge, the reds get darker and the saturation range from right to left gets narrower. We can take this theoretical wedge and actually try and see how many saturation and value variations on this red you can make. It might look something like Figure 11:
Figure 11 - Example saturation and value variations on a single red hue
The goal in Figure 11 was to create even increments of saturation going right to left and even increments of value top to bottom. This judgment was made by your 'eye', not by some numeric readout from a color mixing tool. Because you are using your 'eye', no one's wedge would exactly like anyone's else's. Notice that the end result in Figure 11 is not a perfect triangle. Though more color squares could have been made for the darker reds, you would not have been able tell the difference in color between them. Similarly, if you removed some of the squares in the lighter value range, you would have to have made bigger steps of saturation to get the full range that you can see.
Figure 12 - HSV color selection interface using a hue/saturation disk and value slider
With the interface shown in Figure 12, the user adjusts the darkness with a slider (seen below the disk) and then picks a hue/saturation combination within the disk. A larger swatch of the color is then shown in the New box. If you want to specify the color numerically, Hue is given as an angle while Saturation and Value are expressed as percentages.
An alternative interface is to create a Value/Saturation slice of a particular Hue:
Figure 13 - HSV color selection interface using a value/saturation rectangle and a hue slider
With the interface shown in Figure 13, the user adjusts the hue with the vertical slider and then picks a value/saturation combination in the rectangle. Notice that the left hand edge of the rectangle shows the grayscale while the top edge shows the saturation range of a lightest version of this red hue. Finally, notice that the lower right quadrant (dark and high saturation) does not contain very many useful colors. If this corner is trimmed, you end up with the value/saturation wedge seen in Figure 11. As in the previous HSV model interface, Hue is specified as an angle while Saturation and Value (referred to here as B(lack)) are percentages.
There are, of course, many other ways of specifying color. One way is to specify color with amounts of Red, Green, and Blue (the light primaries). Another is to specify amounts of Cyan, Magenta and Yellow (the print primaries):
Figure 14- CMYK color model selection interface
Notice that in addition to Cyan, Magenta, and Yellow, Black (referred to by the letter K) is also mixed in. Even though black can theoretically be made by mixing the three print primaries, for practical reasons, pure black ink is added to expand the range of colors.
Colors can also be created by picking two or more starting colors and then selecting among the various combinations of these colors:
Figure 15 - Color Blending selection interface
With the interface shown in Figure 15, the user picks four starting colors (in each corner) and 25 variations of differing percentages of the four colors are shown. The selected color in this case is a even mix of all four. Note that the R(ed), G(reen), and B(lue) values of the selected color are given. Instead of percentages, RGB values are usually specified with a 8-bit value range: 0-255.
Figure 16 - Multiple line graph coded with hue variation
In figure 16, three of the lines are coded with primary colors -- 120 degrees apart on the hue wheel -- while the fourth is fairly even split between blue and red. In addition, all of the colors are much darker and more saturated than the white background. These are the two areas of differentiation you are typically concerned with in a graph:
Figure 17 - Multiple line graph coded with a narrow range of hues
In Figure 17 all of the chosen hues were in a narrow range between red and magenta, making it difficult to distinguish them from each other. In addition, the colors were lighter and lower in saturation, adding to the difficulty in perceiving the differences.
What if you have to print the graph out on a grayscale printer? Then you may decide to pick a range of values of a single hue that both can be distinguished from each other and from the background:
Figure 18 - Multiple line graph coded with value variation of a single hue
The range of values used to code the line is limited by the white background. You want to use the widest range of values to distinguish the lines from each other, but the lightest line still has to be distinguishable from the background. On the color monitor, Figure 18 shows its hue. When printed on a grayscale printer, this hue disappears, just showing the change in value:
Figure 19 - Multiple line graph coded in grayscale and redundantly coded with shape marks
Notice in Figure 19, the lines have been redundantly coded with shape marks, to help with distinguishing them. When practical, it is a good practice to redundantly code line graphs with both shape and color. This helps cover situations where the color is not accurately reproduced and is helpful to people with defects in color vision.
Figure 20 - A grayscale LUT applied to a medical image
In the image in Figure 20, much of the interesting information in the lower-mid region of the image has image values around 200. These values are all mapped to a fairly narrow range of grays (approximately where the pointer is on the LUT). Just as with the line graph, the goal is to create a broad a range of color on one or more dimension of color; in this case, value. You can create a more rapid change in grays around the area of interest by compressing the grayscale so it ramps from white to black more rapidly about the value of 200:
Figure 21 - The grayscale LUT now ramps more rapidly about the image values of interest.
Hue can also be introduced to highlight areas of interest. A powerful technique is to introduce a single saturated color into the LUT to represent either a single image value or a range of image values:
Figure 22 - A saturated red is used to highlight a range of image values
In Figure 22, a saturated red is used to highlight a range of values around 200 in the image. The contrast of a saturated red against the desaturated grays stands out very nicely.
Alternatively, if there are multiple image value ranges of interest, the grayscale LUT can be substituted for a LUT made up of a range of hues:
Figure 23 - A medical image coded with a range of hues
This color LUT progresses in a serial fashion around the hue wheel, so that ranges of image values are represented by hues of the same family. This is the same scheme as in the grayscale where the grays move from white to black through the image values. Just as with the grayscale image, the lower-mid region of the image is represented by a fairly narrow range of hues. This can be improved by having the hues shift more rapidly in around the image value of 200 (approximately where the pointer is on the LUT in Figure 23):
Figure 24 - The image rendered with a compressed hue range
Now the all the image values below 200 are represented as black while the values from 200 to 255 are represented by 20 different hues, ranging across the full spectrum.
|Describes wavelength and color relation||2|
|Defines hue, saturation and value||3|
|Explains HSV model||5|
|Compares HSV to CIE||4|
|Describes how computer monitors produce color||4|
|Table showing advantages and disadvantages||6|
|Discuss using saturation for a LUT||5|
|Describes at least two accomodations for color blind viewer||4|
|Relate contrast and brightness to HSV||5|
|Lists color models and describes interfaces for your graphics package(s)||6|
|Create a value saturation wedge||10|
|Match HSV and RGB colors - compare changes in RGB to HSV||10|
|Create at least three alternative codings for a multiple line graph.||12|
|Discuss strengths and weakness of the alternative coding schemes||6|
|Create at least three alternative codings for an area rendering||12|
|Discuss strengths and weaknesses of alternative coding schemes||6|
Top of Page Lesson Plan Menu