Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
426
The Simple Linear Gradient example uses a custom setGradient() function that allows
you to specify the size, position, colors, and axis of the gradient within the display window.
The nested for loops in the function may look a little confusing. The math stuff is simpler
than it looks. Initially in the function, the three local variables deltaR, deltaG, and deltaB
are assigned the differences between the R, G, and B components, respectively, within the
two colors. The rest of the problem involves iterating each component from color c1 to
color c2 evenly in the for loops. By dividing the delta values by the axis dimension, I get
the ratio of the delta to the height, which I then multiply by the counter j. This way, even
though j is incremented by 1 in the loop, the ratio will translate to the appropriate value
for the color component, creating a smooth, continuous gradient. Also, the reason I subtract
the y and x from j in both loop options is to ensure that the beginning of the gradient
begins with c1, not c1 plus the value of x or y. As always, play with this sketch and
change things. I also recommend calling some println() commands and checking on the
values of variables during the for loops. When I debug my programs (which takes up too
much of my time), I am constantly calling println() with a variable name as an argument
to see how the program is working.
Next, I’ll create the radial gradient shown in Figure 10-18. (Please be patient—this sketch
can take some time to render.)
// Simple Radial Gradient
// January 12, 2006
void setup(){
size(400, 400);
background(0);
smooth();
// create a simple table of gradients
int columns = 4;
int radius = (width/columns)/2;
// create some gradients
for (int i=radius; i