NOVICE Help! Randomly generate multi coloured grid of squares

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

}

Tagged:

Answers

  • Answer ✓

    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.

  • Answer ✓

    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.

  • edited October 2016

    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
  • edited October 2016 Answer ✓

    @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.

  • Thanks Guys

Sign In or Register to comment.