how can I draw 100x100 pixel rectangles whose saturation and brightness changes like this?

SemiStuart

Hi I'm recently learning processing and this is my question

I want to make this code

like this

the code for first rectangles is here

size(1000, 1000);
colorMode(HSB, 100);
for (int y = 0; y < 1000; y+= 100) {
  for (int x = 0; x < 1000; x+= 100) {
    fill(((x/10)+(y/100)), 255, 255);
    rect(x, y, 100, 100);
  }
}

I think I should insert more loops into the innermost loop of the program for the first one but I stuck. if you have some free time to think about my question and help me, it would be grateful

have a nice day

Chrisir

you could make a function rectWithColorGradient

and call it in line 5

as a parameter pass the max color to the function rectWithColorGradient

in the function have a for loop to make the gradient from white (left side of the rect) to the max color (right side)

use lerpColor - see reference

chrisir

prince_polka

http://thebookofshaders.com/edit.php?log=171003012302

jeremydouglass

Cool shader, @prince_polka -- although if the OP is new to learning Processing and working with loops then a shader-based solution might be a bit advanced....

prince_polka

@jeremydouglass ok here is without shader

void setup() {
  size(1000, 1000, P2D);
  colorMode(HSB, 100);
  for (int y = 0; y < 1000; y+= 100) {
    for (int x = 0; x < 1000; x+= 100) {
      fill(((x/10)+(y/100)), 255, 255);
      rect(x, y, 100, 100);
    }
  }
  for (int x = 0; x<1000; x+=100) {
    beginShape();
    fill(#ffffff);
    vertex(x, 1000);
    vertex(x, 0);
    fill(color(0, 1, 1, 1));
    vertex(x+100, 0);
    vertex(x+100, 1000);
    endShape();
  }
  for (int y = 0; y<1000; y+=100) {
    beginShape();
    fill(0);
    vertex(0, y);
    vertex(1000, y);
    fill(color(0, 1, 1, 1));
    vertex(1000, 100+y);
    vertex(0, 100+y);
    endShape();
  }
}

jeremydouglass

=D>

@SemiStuart -- prince_polka's solution has to do with how fill works inside shapes. Assigning different fill colors while drawing the four corners of a square, color is interpolated between the defined point colors to form a gradient.

Another way to solve this problem is to look through the pixels of each square and assign each one a value directly.