Creating a Rainbow filled window in Processing

Question

This one is for a school assignment. I am new to Processing software and I want to create a rainbow-filled window exactly like in the picture (at the center) below.

The program on the left is the one I have right now. The program in the center is what I want it to look like. On the right is the code I am using. I'll copy-paste it here.

void setup() {
  size(255, 255);
}
void draw() {
noStroke();
colorMode(RGB, 255,255,255);
for (int i = 0; i <255; i++) {
  for (int j = 0; j < 255; j++) {
    stroke(j,i,128);
    point(i, j);
  }
}
}

Any help, suggestions, adjustments to the code would be greatly appreciated. Thanks in advance.

Answer 1

You would benefit from some pseudocode. Never underestimate the power of pseudocode.

In this image, everything you need to do is written plain as day:

Since we're working in RGB, and that the image tells you what to do with red, green and blue, you're already golden, but to make things more transparent we'll alter the code a little bit. Let's forget about the loops for now. Here's what the picture tells you to do:

R -> vertical slider, the closer to the bottom the more red you have
G -> horizontal slider, left is less and right is more
B -> vertical slider, the opposite to the red slider

Now, knowing that your values are on a [0-255] scale, dans that your image also is a 256 pixels wide square, you just have to use the index of your loops to get your RGB values:

for (int i = 0; i <255; i++) {
  for (int j = 0; j < 255; j++) {
    int r = j;        // up == more red
    int g = i;        // right == more green
    int b = 255 - j;  // down == less blue
    stroke(color(r, g, b));
    point(i, j);
  }
}

Also, just for kicks, as this is a static image and not an animation, you can put this code in the setup() method and it'll have the same result:

void setup() {
  size(255, 255);

  for (int i = 0; i <255; i++) {
    for (int j = 0; j < 255; j++) {
      int r = j;        // up == more red
      int g = i;        // right == more green
      int b = 255 - j;  // down == less blue
      stroke(color(r, g, b));
      point(i, j);
    }
  }
}

void draw() {}  // you still need this method even if it's empty

Which gives you this result:

Have fun!