Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
726
Color, rather than being generated on a per-object basis, is part of an overall rendering
state, or graphics context. In Processing and Java, this graphics context is controlled by a
Graphics object, which sets properties of the rendering state, such as color and font, as
well as a few others. Graphics is the base class in Java that encapsulates this process,
allowing you to write relatively simple code, as in the Java example. Processing, as you’d
expect, encapsulates this stuff even further, removing the need for explicitly overriding the
paint() method, as in the Java example. The paint() method is the method that a Java
component (a component can be thought of as a panel—like the display window) calls
when it needs to paint something. What I’m actually doing in the Java example is redefining
the paint() method for my component, so when paint() is called normally by the
component, which happens automatically when the program starts, it will use my paint
method, instead of the component’s default one, to do what I want it to do—in this case,
paint a simple blue rectangle and circle on the screen. This process of using one method’s
implementation to replace another is referred to as method overriding, and is a fundamental
part of OOP.
If you run the Processing code, you’ll notice that the sketch includes two blue shapes. This
is because the state of the rendering context hasn’t been changed between the two calls
to the drawing functions. Thus, the fill is not really about those two shapes, but about the
current rendering state of the program at that point. Until you change the rendering state
color with another fill() command call, every new filled shape will be blue. I’ll shut up
about this now, but if you want to learn more about the Java Graphics class from Sun,
check out http://java.sun.com/j2se/1.4.2/docs/api/index.html. And here’s a link to
some more info about how painting works in Java: http://java.sun.com/products/
jfc/tsc/articles/painting/.
The next sketch is another example of the Color section’s Setting functions in action (see
Figure A-15). One of the functions, colorMode(), deserves a little clarification. Color can
be specified as RGB (red, green, blue—the default mode) or HSB (hue, saturation, brightness).
In addition, you can set the mathematical range to describe the color, or even each
part of the color. In my two calls to colorMode() in the example, the first call,
colorMode(RGB, 1.0), sets the mode to RGB and specifies the range of values to be set for
each component between 0.0 and 1.0. Thus, (0, 0, 0) would equal black, and (.5, .5, 0)
would equal yellow. The second call is pretty odd, and I only did it as an extreme example
of what is possible. colorMode(HSB, 100, 10, .1) sets the mode to HSB. It specifies the
hue value range from 0 to 100 (which is what you typically see with HSB values—0 to 100
percent), the saturation range from 0 to 10, and the brightness range from 0 to .1 (which
is pretty odd, indeed). However, it all works, and may even impress your friends (probably
not). Wikipedia has an interesting discussion on HSB (sometimes also referred to as HSV)
at http://en.wikipedia.org/wiki/HSB_color_space.
/*
Simple Color Example
Ira Greenberg, November 10, 2005
*/
size(200, 200);
background(200, 50, 40);
stroke(45);
fill(200, 200, 0);
rect(25, 50, 50, 50);