CODEWITHSUNDEEP
javaprocessing
Yukinakajo
Yukinakajo

Reputation: 23

How can I create proper gradient using processing

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!

Upvotes: 2

Views: 367

Answers (2)

Mady Daby
Mady Daby

Reputation: 1269

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

Upvotes: 1

Jacob Stuligross
Jacob Stuligross

Reputation: 1479

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.

Upvotes: 2

Related Questions