2D Gradient

example processing for-loop pretty
void setup() {
  size(256, 256);
  noSmooth();
}

void draw() {
  for(int y = 0; y < height; y++){
    for(int x = 0; x < width; x++){
      stroke(0, x, y);
      point(x, y);
    }
  }
}
Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

This code uses a nested for loop to loop over every pixel in the window. For each pixel, it creates a color based on that pixel’s position, and draws the pixel in that color. This creates a 2D color gradient.

gradient

All of the magic happens on this line:

stroke(0, x, y);

This line sets the stroke value to a color based on the x and y variables. Think about some example points, what their x,y values are, and what color that generates when fed into the stroke() function.

Try playing with the parameters passed into the stroke() function. Rearrange them to be stroke(x, y, 0) or add in numbers like stroke(x, 100, y) to see what colors you can come up with!

gradient gradient gradient

Tweak Ideas

Go back up