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:
If you would like to see a slower gradation of grayscale, you can insert a
frameRate(10); line in your
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?
fill(blackwhite, blackwhite, blackwhite);. What does this do? Why?
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:
- 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.
- 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).
- Finally, note that you can alter the colors passed as parameters to the
background()functions. Use each of these at least once in your coloring scheme.
.pde of your Processing program.
Reference Starting Points