Return to Color Play Page

Color Play User's Manual

You've probably heard computer terms like "pixels" and "RGB." These terms refer to the ways 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.

The Color Play applet enables instructors and curriculum developers in mathematics to produce modules using matrices and linear transformations to produce striking results changing the colors of images. The screenshot above shows a very simple example, in which a full color image was converted digitally to a black-and-white image. This screenshot is part of a sample module introducing color and color transformations.

Among the possible uses of Color Play are:

One can customize existing Color Play modules by changing the image or images used or one can create entirely new modules using the Color Play applet and the ideas discussed here.

The simplest interactive modules using Color Play include a form like the form shown below.

This form enables the user to create a new image modifying the colors of the original image. Colors are represented using three basic colors – red, green, and blue. Thus, the color of each pixel in the image is represented by a vector of the form (x, y, z) with each of the coordinates x, y, and z being between zero and one. The color black is represented by the vector (0, 0, 0); the color white is represented by the vector (1, 1, 1); the color red is represented by the vector (1, 0, 0); the color green is represented by the vector (0, 1, 0); and the color blue is represented by the vector (0, 0, 1). The form above enables the user to transform colors using a transformation of the form

where u, v, and w are the new color coordinates and x, y, and z are the original color coordinates. This transformation is applied to the color representation of each pixel. For example, if the form is filled out as shown below

the image shown on the first page becomes

This is an extreme and somewhat weird example of the kinds of color changes that can be produced with digital image processing using tools like Color Play.

For readers with an interest in and some knowledge of Web Page development, and particularly knowledge of HTML, Java Script and Java, the next sections describe programming details. It explains how to write the HTML code for the form that will receive the user's response. It explains how to write the Java script to take the input from the response form and use it to dynamically create a HTML document that will apply the input parameters for RGB colors to the pixels and producer the resulting image. Finally, it lists the files necessary to make this application work and the necessary Color Play parameters. For those without such interest and/or knowledge, you may return to the Color Play main page.

Return to Color Play Page

The html code producing the form shown above is

<form name = "response">

<table cellpadding = 10>

<tr>

<td><b><center>New color</center></b></td>

<td><b><center>multiplier for original red</center></b></td>

<td><b><center>multiplier for original green</center></b></td>

<td><b><center>multiplier for original blue</center></b></td>

</tr>

<td><b>Red</b>

<td><input type = "textfield" cols = "10" name = "red_from_red" value = "Enter red from red"></td>

<td><input type = "textfield" cols = "10" name = "red_from_green" value = "Enter red from green"></td>

<td><input type = "textfield" cols = "10" name = "red_from_blue" value = "Enter red from blue"></td>

</tr>

<tr>

<td><b>Green</b>

<td><input type = "textfield" cols = "10" name = "green_from_red" value = "Enter green from red"></td>

<td><input type = "textfield" cols = "10" name = "green_from_green" value = "Enter green from green"></td>

<td><input type = "textfield" cols = "10" name = "green_from_blue" value = "Enter green from blue"></td>

</tr>

<tr>

<td><b>Blue</b>

<td><input type = "textfield" cols = "10" name = "blue_from_red" value = "Enter blue from red"></td>

<td><input type = "textfield" cols = "10" name = "blue_from_green" value = "Enter blue from green"></td>

<td><input type = "textfield" cols = "10" name = "blue_from_blue" value = "Enter blue from blue"></td>

</tr>

</table>

<p><center>

<input type = "button" value = "Make new picture with transformed colors" onclick = "respond()">

</center></p>

</form>

and the Javascript code that processes this form is

<script language="JavaScript">

function respond()

{

var width = 422

var height = 285

var picture_filename = "bryce.gif"

var red_from_red = document.response.red_from_red.value

var red_from_green = document.response.red_from_green.value

var red_from_blue = document.response.red_from_blue.value

var green_from_red = document.response.green_from_red.value

var green_from_green = document.response.green_from_green.value

var green_from_blue = document.response.green_from_blue.value

var blue_from_red = document.response.blue_from_red.value

var blue_from_green = document.response.blue_from_green.value

var blue_from_blue = document.response.blue_from_blue.value

var win = open("", "unusedname")

win.document.clear()

win.document.writeln("<html><head><title>Colors Transformed</title></head><body>")

win.document.write("<p><center><applet archive = 'Color Play.jar' code = 'Color Play.class' width = ")

win.document.write(width)

win.document.write(" height = ")

win.document.write(height)

win.document.writeln(">")

win.document.write("<param name = 'file_name' value = ")

win.document.write(picture_filename)

win.document.writeln(">")

win.document.write("<param name = 'width' value = ")

win.document.write(width)

win.document.writeln(">")

win.document.write("<param name = 'height' value = ")

win.document.write(height)

win.document.writeln(">")

win.document.write("<param name = 'red_from_red' value = ")

win.document.write(red_from_red)

win.document.writeln(">")

win.document.write("<param name = 'red_from_green' value = ")

win.document.write(red_from_green)

win.document.writeln(">")

win.document.write("<param name = 'red_from_blue' value = ")

win.document.write(red_from_blue)

win.document.writeln(">")

win.document.write("<param name = 'green_from_red' value = ")

win.document.write(green_from_red)

win.document.writeln(">")

win.document.write("<param name = 'green_from_green' value = ")

win.document.write(green_from_green)

win.document.writeln(">")

win.document.write("<param name = 'green_from_blue' value = ")

win.document.write(green_from_blue)

win.document.writeln(">")

win.document.write("<param name = 'blue_from_red' value = ")

win.document.write(blue_from_red)

win.document.writeln(">")

win.document.write("<param name = 'blue_from_green' value = ")

win.document.write(blue_from_green)

win.document.writeln(">")

win.document.write("<param name = 'blue_from_blue' value = ")

win.document.write(blue_from_blue)

win.document.writeln(">")

win.document.writeln("</applet>")

win.document.writeln("<br>")

win.document.writeln("</body></html>")

}

</script>

This code generates a new Web page on-the-fly using the applet Color Play to transform the colors in the original image.

Parts list:

To reproduce this module place the following parts in a directory on your Web site (whether it is on your own hard drive or another server).

Basic Color Play parameters:

 

Advanced Color Play parameters:

The Color Play applet can handle slightly more general color transformations – of the form:

For example, a color negative of an image can be produced by the color transformation

Three more parameters are used for these more general color transformations:

 

Return to Color Play Page