NOVICE Help! Randomly generate multi coloured grid of squares

natcarr89

Help!!!!

Doing a project for uni, want to have 5x5 squares which have a random colour assigned - squares need to be in a grid formation with no gaps and no overlaps!!

I can manually do it but need a faster way to repeat the shape.

void setup(){ size(400, 200, P2D); background(255);

frameRate(10); noLoop(); }

void draw(){

noStroke();
fill(random(255), random(255), random(255));
rect(0, 0, 5, 5);

    noStroke();
fill(random(255), random(255), random(255));
rect(5, 0, 5, 5);

    noStroke();
fill(random(255), random(255), random(255));
rect(10, 0, 5, 5);

}

TfGuy44

You need to use... A LOOP. And then you need... ANOTHER LOOP. Don't freak out. Let's start with something simple. Something you already have working. One square.

void setup(){
  size(250,250);
}

void draw(){
  background(0);
  fill(255,0,0);
  rect(0,0,50,50);
}

As you can see, this draws one red square. Where is there square? It is there, at (0,0), because that's where we drew it.

What if I want to draw it somewhere else?

void setup(){
  size(250,250);
}

void draw(){
  background(0);
  fill(255,0,0);
  rect(50,100,50,50);
}

Now it is somewhere else. What if I want to draw it at a position determined by some variables?

void setup(){
  size(250,250);
}

void draw(){
  background(0);
  fill(255,0,0);
  float x = 150;
  float y = 50;
  rect(x,y,50,50);
}

Notice that the square is now drawn at a position determined by the values of x and y. If we were to use a loop, and each time that loop executes, we draw the square at a different place, then we will draw several squares.

Here is a loop:

for(int i=0; i<5; i++){ println(i); }

As you can see, it prints out the numbers 0 to 4. Why? Well a for loop consists of three parts. First is the initialization. This instruction happens once when the loop starts. For this loop, this sets the variable i up with the value 0. Next is the condition. If this condition is true, the body of the loop runs. The condition here is i < 5. Since 0 is less than 5, the loop runs, and the value of i (which is 0) is printed. After the loop's body has run, the third part, the step, happens. In this loop, the step is i++, which adds increments i, turning it from 0 to 1.

Then the condition is checked again. Since 1 is less than 5, the loop body runs and prints 1. And so on.

Once i gets up to a value of 5, the condition is false, and the loop ends.

TfGuy44

How does this help us with our squares? Well using a loop allows use to change the X variable. For example:

void setup(){
  size(250,250);
}

void draw(){
  background(0);
  fill(255,0,0);
  float y = 50;
  for(float x = 0; x < width; x+=50 ){
    rect(x,y,50,50);
  }
}

Now all you need to do is add a loop that changes the value of the Y variable too! Try doing this yourself first, and post your attempt at it for more help.

natcarr89

Amazing!

This has all squares as same colour, is it possible to have each individual square as a different colour (can be any random colour)?

void setup(){
  size(250,250);
  noLoop();
}
 
void draw(){
  background(0);
  //noStroke();
  fill(random(255),random(255), random(255));
  for (float y = 0; y < height; y+=5)
  for(float x = 0; x < width; x+=5 ){
    rect(x,y,5,5);
  } 
   
  
  for(int i=0; i

jeremydouglass

@natcarr89 -- that is because you are picking a random fill color once per draw.

If you want to pick a random color once per row in the outer loop, move your fill line into the first for loop.

If you want to pick a random color once per rect in the inner loop, move your fill line into the second for loop, just above rect.

natcarr89

Thanks Guys