Gradient Loop Help

Processing Coding Questions
1

I am trying to make a background where the screen has rectangles that differ in shades of blue. I have tried putting my colours into an array (ik it not efficient), but i only result to getting 1 shade of blue for all rectangles.

color[] blues = {#00038E,#0205A0,#0206B7,#0408C9,#0207E5,#0005F5,#0068F5,#217EFC,#3B8EFF};

size(500,500);

for(int n=0; n<blues.length; n++){  //supposed to change colours of each rectangle
  for(int i=0; i<480; i+=50){  //creates rectangles 
  fill(blues[n]);
  rect(0,i,width,50);
}
}

ive tried not using an array and instead having it so the ‘b’ value in fill(r,g,b) increases through a loop, but i just end up with same result- only 1 shade of blue

1 Like
2

try like

color[] blues = {#00038E,#0205A0,#0206B7,#0408C9,#0207E5,#0005F5,#0068F5,#217EFC,#3B8EFF};

size(500,500);
for(int n=0; n<blues.length; n++){  //supposed to change colours of each rectangle
  fill(blues[n]);
  rect(0,n*50,width,50);
}

your FOR FOR loop might just show you the last color

1 Like
3

omg i didnt think of n*50.
Dude you’re an actual legend
Thank you for all the help :+1:

4

you can try lerpColor() function

void setup() {
  color blue = color(0,0, 255);
  color white = color(255);

  size(500, 500);
  final int step = 50;
  
  for (int n=0; n<height; n+= step) {  //supposed to change colours of each rectangle
    color c = lerpColor(blue, white, (float)n/height);
    fill(c);
    rect(0, n, width, step);
  }
}
1 Like