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

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!

``````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);
}
}
``````

Hello @Stoya,

Hints:

``````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. `:)`

1 Like

Hi

What if you color all at once???

``````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);
}

``````
1 Like

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

I understand now. Tyvm @glv! I managed to recreate the pattern you’ve screenshotted and my desired pattern! ``````// 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:

``````// 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?
}
}
``````

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~

1 Like

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