#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

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

edited October 2017

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

Tagged:

• 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

• edited October 2017
• 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....

• @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();
}
}
``````
• =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.