Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
192
There is one new concept in this example and a little mathematical expression that may
need some clarification. The expression that might be problematic is the following:
float val = cellWidth*(255.0/width);
I need the decrementation of the color value to coincide with the number of steps in the
for loop. To ensure that this happens, I need to find the ratio between the width of
the display window and the maximum value of the color (255). I simply multiply this ratio
by the cellWidth interval to calculate how much to decrement the color value each step
of the loop. This gives me a smooth transition from 255 to 0 (or white to black). The new
concept I mentioned refers to using multiple statements within the head of the for loop,
separated by commas. This is a convenient thing to do. I could also have initialized a variable
outside of the loop and explicitly incremented/decremented it within the loop block,
but that’s more work. In truth, all three parts in the head of the for loop are optional (you
do need the semicolons, though). For example, this for loop will compile and run fine. I
used the break; command so that the loop doesn’t run infinitely.
for(;;){
print("i'm in this weird for loop");
break;
}
In the next modification, I applied the value shifting to both the vertical and horizontal
lines (see Figure 6-17). I also broke out of the square format to illustrate how the grid can
automatically size itself to the display window size/format. This is a good example of
why you want to try to base program measurements (if it’s at all practical) on the dimensions
of the display window, which allows your program to scale and adapt to different
environments.
size(500, 200);
background(0);
float cellWidth = width/50.0;
// find ratio of value range(255) to width
float valw = cellWidth*(255.0/width);
//vertical lines
for (float i=cellWidth, v=255; i