Learning Processing: Chapter 6: Loops: Exercise 6-8: Nested for loop

Create a grid of squares (each colored randomly) using a for loop. (Hint: You will need two for loops!) Recode the same pattern using a “while” loop instead of “for.”

Example

exercise_6_8

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Exercise 6-8: Create a grid of squares (each colored randomly) using a for loop. 
// (Hint: You will need two for loops!) Recode the same pattern using a "while" loop instead of "for."

size(200,200);

// With a for loops
for (int x = 0; x < width; x+=10) {
  for (int y = 0; y < height; y+=10) {
    noStroke();
    fill(random(255));
    rect(x,y,10,10);
  }
} 

// With a while loop
/*int x = 0;
while (x < width) {
  int y = 0;
  while (y < height) {
    noStroke();
    fill(random(255));
    rect(x,y,10,10);
    y += 10;
  }
  x += 10;
}*/

Comments (9)

http://www.ccttours.com/blog ww

What should I do if i want to use random r,g,b to color them? I was told fill(random(r,g,b)); is not applicable..
admin
You just need to use 3 arguments to fill(), i.e.
```
fill(random(255),random(255),random(255));
```
ps

I was able to complete first half of ex. 6-8. I cannot figure out how to re-create the same pattern using a “while” loop. This is one of the many attempts I’ve made:

size(200,200);
background(255);

int r = 0;
int g = 0;
int b = 0;

int x = 0;
int y = 0;

while (x<width) {
while(y<height) {
rect(x,y,10,10);
x+=10;
y+=10;
}
println("x = "+x);
println("y = "+y);
}

// r = int(random(255));
// g = int(random(255));
// b = int(random(255));
// fill(r,g,b);

Thanks!

http://www.learningprocessing.com Daniel Shiffman

Here’s how it looks with a while loop. Note the difference regarding where you increment x and y.

int x = 0;
while (x < width) {
  int y = 0;
  while (y < height) {
    noStroke();
    fill(random(255));
    rect(x,y,10,10);
    y += 10;
  }
  x += 10;
}

ps

Thank you!
http://nqatsi.wordpress.com NQATSi

Awesome!

If you put this inside draw(), you get a noise effect!
And I made a color gradient with nested loops:

size(200,200);
noStroke();
background(0);
colorMode(RGB,200,200,200);

for (int i=0;i<width;i+=25) {
_for (int j=0;j<height;j+=25) {
__fill(i,j,0);
__rect(i,j,25,25);
_}
}

very cool!! : )
http://twitter.com/davidbgonzalez David Gonzalez

I figured this out by trial and error, and came here thinking there was a more sensical way, turns out what I thought was nonsense is logical. I don’t understand why these create a grid. If x and y are incrementing by 10 it seems like this code should result in a line of 10×10 rects going diagonally from upper right to lower left.

Would someone be willing to correct my thinking?
Anonymous

You are right if you did this:

int x = 0;
int y = 0;
for (int i = 0; i < 10; i++) {
rect(x,y,10,10);
x += 10;
y += 10;
}

But because the loops are nested, i.e.

for (int x = 0; x < width; x+=10) {
for (int y = 0; y < height; y+=10) {

You are saying “For every column x, draw a rectangle at every row y.”
maria

This is what I came up with:
float x=0;
float y=0;

void setup(){
size(200,200);
background(255);
smooth();
noStroke();
//put this whole chunk under here into the void draw
//section for continuous random strobe!
for(x = 0; x < width; x+=10){
for (y = 0; y < height; y+=10){
float r= random(255);
float b= random(255);
float g= random(255);
fill(r,g,b);
rect(x,y,20,20);
}
}
}
If I put it in the void draw() section the colors change continuously. I think @NQATSi came up with a cool solution for that. Thanks for the "fill(random(255),random(255),random(255));" I don't know why that slipped my mind and I did it the long way…