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

Processing Beginners
1

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

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.

image

:)

1 Like
4

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
5

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

6

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

Screenshot 2022-05-28 123948

// 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
7

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