Processing: Creative Coding and Computational Art

Next, I assign values to some primitive variables:
// controls banding of gradient
interval = 255/5;
Because the gradient will go from black to white, I made the interval variable a factor
of 255 (255 equals white). This way, I can step from black to white an equal number of
steps—in this case, five. The next line may look a little strange:
// radial width and height
gradientWidth = gradientHeight = width;
If I write it out in English, its meaning will be clearer: the value of width is assigned to the
variable gradientHeight, which is then assigned to the variable gradientWidth. When you
use the single-equal sign (=), it means assignment, not equals. Assignment statements are
evaluated right to left, which is why this compound assignment statement works. Also,
remember that width is a built-in Processing property that holds the width I made the
sketch window with the function call size(200, 200). gradientWidth and gradientHeight
are variables I declared that will hold the width and height of the gradient. I could have
written the statement in two lines, as well:
gradientHeight = width;
gradientWidth = gradientHeight;
Setting the center of the gradient, I defined the variables xpos and ypos with the expressions
width/2 and height/2, respectively. If you’ve never coded before, it may look odd to
use a mathematical expression as something to be assigned, but it’s perfectly legal and
common in programming. Remember, computers are really just super-powerful (and
expensive) calculators.
xpos = width/2;
ypos = height/2;
The line noStroke(); turns off any stroke rendering, which is on by default in Processing
when you render an ellipse or rectangle. noStroke() is another built-in Processing function.
The rest of the program paints the gradient:
fill(interval);
ellipse(xpos, ypos, gradientWidth, gradientHeight);
fill(interval*2);
ellipse(xpos, ypos, gradientWidth-interval, gradientHeight-interval);
fill(interval*3);
ellipse(xpos, ypos, gradientWidth-interval*2, ➥
gradientHeight-interval*2);
fill(interval*4);
ellipse(xpos, ypos, gradientWidth-interval*3, ➥
gradientHeight-interval*3);
fill(interval*5);
ellipse(xpos, ypos, gradientWidth-interval*4, ➥
gradientHeight-interval*4);
CODE GRAMMAR 101
71
3