# How to make per box the lightest to darkest color in a Nested loop?

**URL:** <https://discourse.processing.org/t/how-to-make-per-box-the-lightest-to-darkest-color-in-a-nested-loop/37200>\
**Category:** Beginners\
**Created:** [May 29, 2022, 4:27am UTC](https://discourse.processing.org/t/how-to-make-per-box-the-lightest-to-darkest-color-in-a-nested-loop/37200 "2022-05-29T04:27:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stoya](https://avatars.discourse-cdn.com/v4/letter/s/c89c15/32.png) [@Stoya](https://discourse.processing.org/u/Stoya)\
**Post date:** [May 29, 2022, 4:27am UTC](https://discourse.processing.org/t/how-to-make-per-box-the-lightest-to-darkest-color-in-a-nested-loop/37200/1 "2022-05-29T04:27:14Z")

</div>

Hello! I’m asking for advice. I’m experimenting on how can one make the first box the lightest value then it gradually goes darker per box. So if I input the color blue, it’ll show the lightest blue at the first box of the nested loop then per box it would show a -1 to the value of the lightest box. My initial thought was I should be subtracting - 1 per loop. But I’m not sure how to implement it. How may I approach this without using HSB? Thank you so much!

```auto
int red = 255;
int blue = 255;
int green = 255;

size (492, 500);
background(255);
colorMode(RGB);

// Loop for Rectangle Generation
for (int y = 0; y < height; y = y + 50) {
  for (int x = 0; x < width; x = x + 70) {
    
    // Blue
    fill(red - 1, green - 1 , 255); 
    rect(x, y, 70, 50);
}
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [May 29, 2022, 5:16am UTC](https://discourse.processing.org/t/how-to-make-per-box-the-lightest-to-darkest-color-in-a-nested-loop/37200/2 "2022-05-29T05:16:46Z")

</div>

As you’ve probably noticed, all your boxes are the same color: color(254, 254, 255) - basically white.

The problem is that you are using the values (red-1) and (green-1), but not changing the values stored in those variables.

Consider this code, which does change the stored value:

```auto
int c_red = 255;
int c_blue = 255;
int c_green = 255;

size (492, 500);
background(255);
colorMode(RGB);

// Loop for Rectangle Generation
for (int y = 0; y < height; y = y + 50) {
  for (int x = 0; x < width; x = x + 70) {
    // Make there be less red and green.
    c_red = c_red - 1;
    c_green = c_green - 1
    fill(c_red, c_green, c_blue); 
    rect(x, y, 70, 50);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Stoya](https://avatars.discourse-cdn.com/v4/letter/s/c89c15/32.png) [@Stoya](https://discourse.processing.org/u/Stoya)\
**Post date:** [May 29, 2022, 5:30am UTC](https://discourse.processing.org/t/how-to-make-per-box-the-lightest-to-darkest-color-in-a-nested-loop/37200/3 "2022-05-29T05:30:53Z")

</div>

Ahhh! I understand now. Thank you @TfGuy44 ! So I set the values in Int then it should correspond to an equation in the loop. My friend suggested on looking at increments but I found your approach easier to understand.

_edit_ It really was incrementes!