How can I create proper gradient using processing

Question

I am new to programming and I want to create diagram as the picture shown.

size(300,300);
colorMode(HSB,360,100,100);
background(#FFFFFF);


int x,y;
for (x = 0; x <100 ; x++ )
{
  for(y = 0 ; y <100 ; y++)
  {
    stroke (0, x, y );
    rect(y,x,y*3,x*3);

  }
}

When I run the program, I get the diagram like this where bottom right of the diagram is missing.

How can I fix the problem?

Thanks!

Answer 1

This will produce the output that you are looking for. You might want to take a look at lerpColor().

void setup(){
  size(300,300);
}

void draw(){
  colorMode(HSB,360,100,100);
  background(#FFFFFF);
  
  for (int x = 0; x < width; x++ ){
    for(int y = 0; y < height; y++){
      stroke(0, x, y);
      point(y, x);
    }
  }
}