# Nested Loop 3 Colors, How do I set them their colors in uniform column order?

**URL:** <https://discourse.processing.org/t/nested-loop-3-colors-how-do-i-set-them-their-colors-in-uniform-column-order/37153>\
**Category:** Beginners\
**Created:** [May 28, 2022, 1:33am UTC](https://discourse.processing.org/t/nested-loop-3-colors-how-do-i-set-them-their-colors-in-uniform-column-order/37153 "2022-05-28T01:33:04Z")\
**Posts on this page:** 6\
**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 28, 2022, 1:33am UTC](https://discourse.processing.org/t/nested-loop-3-colors-how-do-i-set-them-their-colors-in-uniform-column-order/37153/1 "2022-05-28T01:33:04Z")

</div>

Hello! I’ve finished the “6.6: Nested Loops - Processing Tutorial” from the Coding Train and I’ve been wondering about how to set the colours uniformly. Currently, I want the colours to be red, then blue, then green in columns but I could only get them to be in one horizontal and vertical pattern… If not the answer, just some pointers would be great!

```auto
size (500, 400);
background(100);

// Loop for Rectangle Generation
for (int y = 0; y < height; y = y + 40) {
for (int x = 0; x < width; x=x + 50) {
  fill(0,0,255);
  rect(x,y,50,40);
  fill(255,0,0);
  rect(x*30,y,50,40);
  fill(0,255,0);
  rect(x,y*30,50,40);
}
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 28, 2022, 3:18am UTC](https://discourse.processing.org/t/nested-loop-3-colors-how-do-i-set-them-their-colors-in-uniform-column-order/37153/3 "2022-05-28T03:18:17Z")

</div>

Hello @Stoya,

Hints:

```auto
size (500, 400);
background(100);

// Loop for Rectangle Generation
size (500, 400);
background(100);

// Loop for Rectangle Generation
for (int y = 0; y < height; y = y + 40) //rows
  {
  for (int x = 0; x < width; x = x + 150) //columns 3*50 = 150 for 3 color columns at a time
    {
    println(x, y);

    fill(0, 255, 0);
    rect(x, y, 50, 40);

    fill(255, 0, 0);
    rect(x+?, y, 50, 40); // What is the ? spacing Add or multiply? How much?
    
    fill(0, 0, 255);
    rect(x*?, y, 50, 40); // What is the ? spacing Add or multiply? How much?
    }
  }

```

_println()_ statements help understand the loop.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/c/3c103c904805dac8f67eae5c468b018f603920b2.png)

`:)`

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 28, 2022, 3:46am UTC](https://discourse.processing.org/t/nested-loop-3-colors-how-do-i-set-them-their-colors-in-uniform-column-order/37153/4 "2022-05-28T03:46:46Z")

</div>

Hi

What if you color all at once???

```auto
size(600, 200);
background(255);
int Size = 50;
int c= 12;
int r = 12;
colorMode(HSB, 10, 100, 100);
for (int x=0; x<c; x++)
  for (int y=0; y<r; y++) {
    fill(x/4, 100, 100);
    rect( x * Size, y * Size, Size, Size);
  }

```

---

<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 28, 2022, 4:06am UTC](https://discourse.processing.org/t/nested-loop-3-colors-how-do-i-set-them-their-colors-in-uniform-column-order/37153/5 "2022-05-28T04:06:20Z")

</div>

Ty! I’ll try them out! That’s exactly what I want to do! I appreciate the comments and the notes really

---

<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 28, 2022, 4:45am UTC](https://discourse.processing.org/t/nested-loop-3-colors-how-do-i-set-them-their-colors-in-uniform-column-order/37153/6 "2022-05-28T04:45:20Z")

</div>

I understand now. Tyvm @glv! I managed to recreate the pattern you’ve screenshotted and my desired pattern!

![Screenshot 2022-05-28 123948](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/5/854e052e5a32cf78ebae18ef59ea4a9986f06a65.png)

```auto
// Loop for Rectangle Generation
size (500, 400);
background(100);

// Loop for Rectangle Generation
for (int y = 0; y < height; y = y + 40) //rows
  {
  for (int x = 0; x < width; x = x + 150) //columns 3*50 = 150 for 3 color columns at a time
    {
    println(x, y);

    fill(0, 255, 0); //Green
    rect(x, y, 50, 40);

    fill(255, 0, 0); //Red
    rect(x+50,y, 50, 40); // What is the ? spacing Add or multiply? How much?
    
    fill(0, 0, 255); // Blue
    rect(x+100, y, 50, 40); // What is the ? spacing Add or multiply? How much?
    }
  }

```

For the Red then Blue then Green pattern:

```auto
// Loop for Rectangle Generation
size (500, 400);
background(100);

// Loop for Rectangle Generation
for (int y = 0; y < height; y = y + 40) //rows
  {
  for (int x = 0; x < width; x = x + 150) //columns 3*50 = 150 for 3 color columns at a time
    {
    println(x, y);

    fill(0, 255, 0); //Green
    rect(x+100, y, 50, 40);

    fill(255, 0, 0); //Red
    rect(x,y, 50, 40); // What is the ? spacing Add or multiply? How much?
    
    fill(0, 0, 255); // Blue
    rect(x+50, y, 50, 40); // What is the ? spacing Add or multiply? How much?
    }
  }

```

```auto

```

I was asking myself, why was it 150 till I saw the note. Is my interpretation right? Since it’s 50 per box, the loop divides the 150 to three. Then assigns a color in 3 boxes and repeats them. Well, I’ll still be experimenting… I’ll try to add variations in the colors now.

Thank you for explaining~

---

<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 28, 2022, 4:49am UTC](https://discourse.processing.org/t/nested-loop-3-colors-how-do-i-set-them-their-colors-in-uniform-column-order/37153/7 "2022-05-28T04:49:23Z")

</div>

> [@jafal](#):
>
> ```auto
> size(600, 200);
> background(255);
> int Size = 50;
> int c= 12;
> int r = 12;
> colorMode(HSB, 10, 100, 100);
> for (int x=0; x<c; x++)
> for (int y=0; y<r; y++) {
> fill(x/4, 100, 100);
> rect( x * Size, y * Size, Size, Size);
> }
> 
> ```

This one is interesting. I’ll try to dissect why it happened. Tyvm~