# Color

## Color Channels

As previously indicated, computer screens use a combination of red, green, and blue to produce all of the displayable colors. Similarly, in Processing, manipulating colors is merely a matter of specifying the amounts of red, green, and blue an object’s color contains.

To illustrate how scaling these color amounts (otherwise known as “channels") works, we shall start with a simpler example—grayscale.

Technically, a black and white image comprises two colors, black and white. These could be represented via 1 bit (e.g., 0 for black, 1 for white). However, in Processing (and life), there is more to the spectrum than black or white. Processing allocates 8 bits for specifying shades of gray. This means that there are 28, or 256, different shades of gray possible.

The boundaries for black and white in the spectrum are at opposite ends, just as they were in the 1 bit case. This means that the instruction `stroke(0);` would set the pen to produce black lines and the instruction `stroke(255);` would set the pen to produce white lines.

To demonstrate how the shades of gray vary between these two values, execute the following program:

Click to Download: `BlackAndWhite`

If you would like to see a slower gradation of grayscale, you can insert a `frameRate(10);` line in your `setup()` function.

## From Grayscale to Color

Although color seems much more complex than shades of gray, in reality, it is just a “triplication” of the same idea.

To illustrate how each of the red, green, and blue color channels works in the same way as grayscale, alter the `fill(blackwhite);` line to read `fill(blackwhite, 0, 0);`. How does this change the behavior of your program? Try `fill(0, blackwhite, 0);` and `fill(0, 0, blackwhite);`. What do they produce?

Finally, try `fill(blackwhite, blackwhite, blackwhite);`. What does this do? Why?

## Color Variables

Processing allows you to store colors as variables as well. Once you store a color, you can access its red, green, and blue components separately.

To illustrate this, execute the follow program that “averages” two colors:

Click to Download: `ColorAverager`

## Instructions

1. Use the RGB color model to color your figure from Loops. Although you can use an online Color Calculator like the one presented in the previous activity, Processing provides its own color selector tool as well. Access it in the Tools entry on the menu bar.
2. Add at least one additional keystroke that changes some color in your figure. For example, perhaps pressing “d” darkens the colors in your figure (makes the the color channels have lower values—less intensity), and pressing “l” lightens them (makes the color channels have higher values—more intensity).
3. Finally, note that you can alter the colors passed as parameters to the `stroke()`, `fill()`, and `background()` functions. Use each of these at least once in your coloring scheme.

## Submission

Submit the `.pde` of your Processing program.