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

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

I want to make this code

그림1

like this

그림2

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

Answers

  • 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

  • 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.

Sign In or Register to comment.