Processing: Creative Coding and Computational Art

PROCESSING: CREATIVE CODING AND COMPUTATIONAL ART
424
Gradients
I’ll begin with some simple pixel gradients and then play with some images. This first
sketch, shown in Figure 10-17, creates a linear gradient and utilizes Processing’s set()
function. This function allows me to change the color of a pixel, as well as load an image
into the display window. For now, I’ll just show you how to change some pixels. The function
expects three arguments: set(x, y, color).
// Simple Linear Gradient
// January 12, 2006
// x and y axis
// constants
int Y_AXIS = 1;
int X_AXIS = 2;
void setup(){
size(400, 400);
// create some gradients
// background
color b1 = color(190, 190, 190);
color b2 = color(20, 20, 20);
setGradient(0, 0, width, height, b1, b2, Y_AXIS);
//center squares
color c1 = color(255, 120, 0);
color c2 = color(10, 45, 255);
color c3 = color(10, 255, 15);
color c4 = color(125, 2, 140);
color c5 = color(255, 255, 0);
color c6 = color(25, 255, 200);
setGradient(50, 50, 150, 150, c1, c2, Y_AXIS);
setGradient(200, 50, 150, 150, c3, c4, X_AXIS);
setGradient(50, 200, 150, 150, c2, c5, X_AXIS);
setGradient(200, 200, 150, 150, c4, c6, Y_AXIS);
}
void setGradient(int x, int y, float w, float h, ➥
color c1, color c2, int axis ){
// calculate differences between color components
float deltaR = red(c2)-red(c1);
float deltaG = green(c2)-green(c1);
float deltaB = blue(c2)-blue(c1);
// choose axis
if(axis == Y_AXIS){
/*nested for loops set pixels
in a basic table structure */