Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
728
Creating & Reading
As discussed previously, color is specified as three components, for red, green, and blue
(RGB). (You can also specify a fourth component, alpha, for controlling transparency.)
Most typically on the computer, color is referred to as a hexadecimal value. The
hexadecimal system uses 16 as the base, instead of 10, as in the more common decimal
system. To account for 16 unique numbers, the letters A, B, C, D, E, and F are used along
with the numbers 0 through 9. Also remember that 0 counts as a digit, so F is equal to 15,
while B equals 11. Numbers larger than 15 are created by using additional places, just as in
the decimal system. However, the values are raised by 16 instead of 10. So, the number FF
would be equal to 15 * 16 + 15, which equals 255, and the number AFB would equal (10 *
16 * 16) + (15 * 16) + 11, which equals 2,811. To allow the computer to know that you
want it to perform calculations using base 16 instead of base 10, you write 0x before the
value. So, AFB would be specified as 0xAFB.
Try running this one-line sketch, which should output 2811:
println(0xAFB);
In Processing, you can also use also the # symbol to specify a color value, as in the following
line:
color orange = #FF7700;
Each color is specified as a six-digit hexadecimal value, where the first two numbers specify
the red component, the next two the green, and the final two the blue. For example,
the colors red, green, and blue are specified as #FF0000, #00FF00, and #0000FF. Of course,
you can any put legal hexadecimal characters (0 through 9 and A through F) in any of the
six slots to create up to 16,777,215 different colors.
The seven functions red(), brightness(), blue(), saturation(), green(), hue(), and
alpha() extract specific values out of a color. For example, if I want the blue component
of the color 0xFFE56D, I can use this simple code:
color c = 0xFFE56D;
print(blue(c));
I can use the exact same structure for most of the functions within this section. Here’s
code to extract the saturation of a color:
color c = 0xFFE56D;
print(saturation(c));
Curiously, if you look at what the API has to say about the red() function, there’s a mysterious
blurb in the Description section: “The red() function is easy to use and understand,
but is slower than another technique. To achieve the same results when working in
colorMode(RGB, 255), but with greater speed, use the >> (right shift) operator with a bit
mask” (see http://processing.org/reference/red_.html).
Right shift operator, bit mask—what is this stuff? Unfortunately, there’s not much else to
go on in the API. It seems there may be some pretty scary stuff lurking beneath the surface