The Applet Color Play enables you to study the way that colors are represented digitally and to manipulate the colors of images digitally. The material below illustrates how this Applet can be used. It is written for students. To learn more about the Applet Color Play see its Users Manual.

You've probably heard computer terms like "pixel" and "RGB." These terms refer to the way that computers display pictures and other information on a computer screen or monitor. The display is generally a rectangular array of pixels. Two factors contribute to the amount of information that can be displayed and its appearance -- the number of pixels and their size. One common display has 768 rows of pixels arranged in 1024 columns. If the display is monochrome then the intensity of each pixel can be represented by a real number between zero and one. If the real number associated with a particular pixel is zero then that pixel is black. If the real number associated with a particular pixel is one then the brightness or intensity of that pixel is turned all the way up -- the highest intensity that can be produced on the display. A monochrome picture can be represented by a matrix with the same number of rows as the height of the picture and the same number of columns as its width. For example, the monochrome picture below is represented by a matrix with 285 rows and 422 columns. Each entry in the matrix is a real number between zero and one representing the brightness of a particular pixel.

Color displays produce color by combining light with three different colors -- red, green, and blue. The three pictures below show these three different color components for the picture above from Bryce Canyon.

The color picture of Bryce Canyon at the top of this page is represented by three matrices, each of which has 285 rows and 422 columns. Each entry is a real number between zero and one. One matrix represents the red component, one represents the green component, and one represents the blue component. Because pictures are represented by matrices of real numbers they can be manipulated by using mathematics. This is the idea behind the special effects in movies like Star Wars; the lifelike animation in movies like Shrek; and the blurring of reality and virtual reality in movies like Matrix.

In this module you will experiment with manipulating or transforming the colors in the Bryce Canyon picture. The nine entries in the 3 by 3 form (or matrix) below enable you to produce a new picture based on the original picture but with the colors transformed in various ways. Each of the three rows of the form describes one color component of the new picture. The first row describes the red component of the new picture; the second row describes the green component of the new picture; and the third row describes the blue component of the new picture.

The entry for each color component of each pixel of the new picture is computed by a formula of the form:

For example, suppose you wanted to produce the same picture as the original picture. You would use the following three formulas:

new red   = 1 * (original red) + 0 * (original green) + 0 * (original blue)
new green = 0 * (original red) + 1 * (original green) + 0 * (original blue) 
new blue  = 0 * (original red) + 0 * (original green) + 1 * (original blue) 

As another example, suppose you wanted to produce a new picture isolating just the red component of the original picture. You would use the following three formulas:

new red   = 1 * (original red) + 0 * (original green) + 0 * (original blue)
new green = 0 * (original red) + 0 * (original green) + 0 * (original blue) 
new blue  = 0 * (original red) + 0 * (original green) + 0 * (original blue) 

To display shades of grey we use the same value for the red, green, and blue components. The three formulas below will convert a color picture to a monochrome picture.

new red   = .333 * (original red) + .333 * (original green) + .333 * (original blue)
new green = .333 * (original red) + .333 * (original green) + .333 * (original blue) 
new blue  = .333 * (original red) + .333 * (original green) + .333 * (original blue) 

If you want to think of the above calculations as using matrices
to represent linear transformations, let X represent the 3X1 matrix (vector)
that represents the current RGB values for a pixel, and let A represent the 
3X3 transformation matrix determined by the three rows of RGB multipliers 
given in each of the above examples, then AX=Y represents the resulting 3X1 
matrix (vector) of transformed RGB values. In the first example A=I, where 
I is the Identity matrix. In the second example A is the projection operator 
onto the Red (first) coordinate.

Fill in the nine entries in the form below using the three formulas above. Then press the Make new picture with transformed colors button to produce a picture isolating just the red component of the Bryce Canyon picture. Depending on the speed of your computer it make take as much as one minute to produce the new picture. The new picture will appear in a new window, so that you can compare the new picture with the original.

Try the above suggestions and the recommended experiments that follow:

Experiments:

Experiment 1: Exchange the colors red and blue.

Experiment 2: Transform red to green; green to blue; and blue to red.

Experiment 3: Make a new picture that preserves the colors of the original but makes them all darker.

Experiment 4: Make a new picture that preserves the colors of the original but makes them all lighter.

Experiment 5: Make a new picture showing what Bryce Canyon would look like near sunset.

Note: different people may produce different answers for some of these experiments. Be prepared to explain how you interpreted the instructions for each experiment and why you chose that interpretation.

Experiment 6: Be creative. Produce a weird and wild rendition of the Bryce Canyon picture.

Notes:

Mathematically, the formulas used to transform the old colors into the new colors can produce numbers that are greater than one BUT the display device is limited in the colors it can produce. Thus, the value of each of the red, green, and blue components is restricted to the range zero through one.

Although mathematically we represent the intensity of each of the red, green, and blue components by a real number between zero and one, these components are represented internally by integers with values between zero and 255.