Processing: Creative Coding and Computational Art

Figure 10-19. Wave Gradient sketch
Hopefully this last sketch didn’t cook your computer. Between the two nested loops,
there’s a fair amount of processing. The gradient is determined by a simple sine wave with
increasing frequency; this is what gives the gradient its asymmetry. The color is determined,
somewhat arbitrarily, by some simple expressions. The red component is generated
by the sine function, the green component is based on 255 (minus the value of the sine
function), and the blue component is determined by the counter j. In all three cases, the
component color values calculated by the expressions are remapped to a range of 0 to
255. Definitely mess around with some of the values, especially the color expressions and
the frequency. At the bottom of the function, the third for loop fills gaps in the gradient,
similarly to what was done in the radial gradient sketch. You can also try changing the
fillGap variable to see what happens. Using the set() function is relatively straightforward,
but not the fastest way to change pixel data in Processing.
Faster pixel functions
There are three other language structures (two functions and an array) that can speed
things up. The three structures are loadPixels(), updatePixels(), and pixels[]. The
first structure, loadPixels(), creates an array of pixels (assigned to the built-in global variable
pixels[]) of the entire display window. The number of pixels in the display window
can be calculated by width * height. So, for example, a 400 ✕ 400 display would equal
160,000 pixels. Here’s some evidence:
size(400, 400);
loadPixels();
print(pixels.length);
COLOR AND IMAGING
429
10