How can I create proper gradient using processing

user_16121506 0
Viewed 77

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

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.
Diagram from my code

How can I fix the problem?

Thanks!

processing java
2 Answers

Your current code is drawing a bunch of white rectangles with varying outline colors. The top left corner of your diagram is what you're looking for. If you want it to fill up the whole screen, here is what I would do:

for (int x = 0; x < 100; x++) {
  for (int y = 0; y < 100; y++) {
    fill(0, x, y);
    rect(map(x, 0, 100, 0, width), map(y, 0, 100, 0, height), width/100, height/100);
  }
}

using the map() command.

user_157450920

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);
    }
  }
}
user_155521520
Related