# Random object of four in each square of a grid

**URL:** <https://discourse.processing.org/t/random-object-of-four-in-each-square-of-a-grid/41034>\
**Category:** Beginners\
**Created:** [February 23, 2023, 9:58pm UTC](https://discourse.processing.org/t/random-object-of-four-in-each-square-of-a-grid/41034 "2023-02-23T21:58:38Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [February 23, 2023, 9:58pm UTC](https://discourse.processing.org/t/random-object-of-four-in-each-square-of-a-grid/41034/1 "2023-02-23T21:58:38Z")

</div>

I feel like I should know the answer to this or figure it out but I feel stuck.

I am drawing a grid, let’s say 4x4, and I have 4 different shapes or items that I want to draw. Each frame I want each square of my grid to be populated with one of the 4 items at random.

Would I use modulo? If/else? Something different? If someone could point me in right direction that would be super helpful!

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [February 23, 2023, 10:23pm UTC](https://discourse.processing.org/t/random-object-of-four-in-each-square-of-a-grid/41034/2 "2023-02-23T22:23:48Z")

</div>

```auto
// I am drawing a grid.
  // It has four rows.
  for( ??? ; ??? < ??? ; ??? ){
    // Each row has four squares.
    for( ??? ; ??? < ??? ; ??? ){
      // Draw the grid square.
      rect( ???, ???, ???, ???);
      // Each square has a random shape.
      int ??? = random( ??? );
      // If the random shape is a TYPE_1 shape,
      if( ??? == ??? ){
        // Draw TYPE_1 shape.
        ???( ???, ???, ???, ??? );
      }
      // If the random shape is a TYPE_2 shape,
      if( ??? == ??? ){
        // Draw TYPE_2 shape.
        ???( ???, ???, ???, ??? );
      }
      // Etc for TYPE_3 and TYPE_4 shapes.
      // ???????????...
    }
  }

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 23, 2023, 11:58pm UTC](https://discourse.processing.org/t/random-object-of-four-in-each-square-of-a-grid/41034/3 "2023-02-23T23:58:24Z")

</div>

Hello @i-draw-monkeys,

Master the _for() loop_ and then progress to the _nested for() loop_.

Take a look through the resources here:

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

`:)`

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [February 24, 2023, 1:38am UTC](https://discourse.processing.org/t/random-object-of-four-in-each-square-of-a-grid/41034/4 "2023-02-24T01:38:54Z")

</div>

Hello @i-draw-monkeys 🙂

Modulo is good for when you want to create a regular (predictable) pattern.

Since you want a random pattern, I would use a **switch statement**. Assign each shape a number of 0, 1, 2, or 3. And then use the random function to select the shape.

You can read how to use the switch statement here:

> **[switch / Reference](https://processing.org/reference/switch.html)**
>
> Works like an if else structure, but switch is more convenient when you need to select between three or more alternatives. Program controls jumps to the case with the same value as the e…

🤓

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [February 24, 2023, 10:21am UTC](https://discourse.processing.org/t/random-object-of-four-in-each-square-of-a-grid/41034/5 "2023-02-24T10:21:12Z")

</div>

Sorry I should have been more clear, I know how to make the grid. The problem is varying the objects!

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [February 24, 2023, 10:22am UTC](https://discourse.processing.org/t/random-object-of-four-in-each-square-of-a-grid/41034/6 "2023-02-24T10:22:45Z")

</div>

I tried this—the problem is that some squares come up blank. I don’t understand why. I am substituting simple rectangles in my code for the shapes, here is the example:

```auto
int diameter;

void setup() {
  size(960, 1152);
  diameter = 192;
  frameRate(1);
}

void draw () {
  background(255);

  for (int g=0; g < width; g=g+diameter) {
     int num =int(random(4));
    for (int h = 0; h <height; h=h+diameter) {
    
     float gen = random(8); 
   if (gen >= 0 && gen <=2){
        type1(g, h);
   } else if (gen > 2 && gen <= 4){
        type2(g, h);
   }
      else if (gen > 4 && gen <=6){
        type3(h, g);
   } else if (gen > 6 && gen <=8){
        type4(h, g);
   }
    }
  }
}
     
void type1(int a, int b) {
  
  pushMatrix();
  fill(100, 120, 11);
  rect(a+30,b+30, 132,132);
  popMatrix();
}

void type2(int a, int b) {
  
  pushMatrix();
  fill(0, 255, 5);
  rect(a+30,b+30, 132,132);
  popMatrix();
}

void type3(int a, int b) {
  
  pushMatrix();
  fill(255, 0, 120);
  rect(a+30,b+30, 132,132);
  popMatrix();
}

void type4(int a, int b) {
  
  pushMatrix();
  fill(30, 40, 120);
  rect(a+30,b+30, 132,132);
  popMatrix();
}

```

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [February 24, 2023, 10:28am UTC](https://discourse.processing.org/t/random-object-of-four-in-each-square-of-a-grid/41034/7 "2023-02-24T10:28:18Z")

</div>

I tried this last night actually after posting the question. It didn’t fully work and I am not sure why as it seemed like it should be the solution. But now I just retried it and boom! It works ha. Okay, now I will translate it all back to my original code and fingers crossed this still works.

```auto
for (int g=0; g < width; g=g+diameter) {
     int num =int(random(4));
    for (int h = 0; h <height; h=h+diameter) {
    
      int gen = int(random(4));
      switch(gen) {
        case 0:
        type1(g, h);
        break;
        case 1:
        type2(g, h);
         break;
         case 2:
         type3(g, h);
         break;
         case 3:
         type4(g, h);
         break;
      }

```

Okay, I went back to my original code and I had transposed x,y in a couple shapes and it was making it look like it wasn’t working but it was 🙃

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 24, 2023, 10:29am UTC](https://discourse.processing.org/t/random-object-of-four-in-each-square-of-a-grid/41034/8 "2023-02-24T10:29:49Z")

</div>

> [@i-draw-monkeys](#):
>
> `type3(h, g);`

In the old version you had sometimes  
swapped h and g…

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 24, 2023, 10:30am UTC](https://discourse.processing.org/t/random-object-of-four-in-each-square-of-a-grid/41034/9 "2023-02-24T10:30:33Z")

</div>

> [@i-draw-monkeys](#):
>
> `int num =int(random(4));`

This is not in use…?

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [February 24, 2023, 11:40am UTC](https://discourse.processing.org/t/random-object-of-four-in-each-square-of-a-grid/41034/10 "2023-02-24T11:40:45Z")

</div>

oh yeah remnants of old attempts…I should have erased before putting up

---

<div class="post-metadata">

**Author:** ![i-draw-monkeys](https://avatars.discourse-cdn.com/v4/letter/i/c6cbf5/32.png) [@i-draw-monkeys](https://discourse.processing.org/u/i-draw-monkeys)\
**Post date:** [February 24, 2023, 11:42am UTC](https://discourse.processing.org/t/random-object-of-four-in-each-square-of-a-grid/41034/11 "2023-02-24T11:42:25Z")

</div>

yeah this is my messiness, and it was an error I made in the original code…

---

<div class="post-metadata">

**Author:** ![Ignotus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ignotus/32/14922_2.png) [@Ignotus](https://discourse.processing.org/u/Ignotus)\
**Post date:** [February 26, 2023, 2:10am UTC](https://discourse.processing.org/t/random-object-of-four-in-each-square-of-a-grid/41034/12 "2023-02-26T02:10:15Z")

</div>

You’ve made good use of the random() function already. It has the feature that you never know if all 4 of the shapes will turn up, or how many of them will appear in a given run of 16.

One interesting way of controlling the number of shapes is to use an IntList. Initialize it with the numbers you want, then shuffle it (there’s a handy method to do just that). Step through the IntList to take the numbers out in random order. You can even play with probabilities by loading the list with more than 16 numbers, but just taking out the first 16.

I’ve found that shuffling lists can offer a good mix of control and randomness.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 26, 2023, 2:36pm UTC](https://discourse.processing.org/t/random-object-of-four-in-each-square-of-a-grid/41034/13 "2023-02-26T14:36:59Z")

</div>

Good point.

Using random, a number could be missing, shuffle is better.

Also instead of a low frameRate we could also use a timer to change the pattern every 2 seconds or so

---

<div class="post-metadata">

**Author:** ![GSA\_IxD](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gsa_ixd/32/7554_2.png) [@GSA\_IxD](https://discourse.processing.org/u/GSA_IxD)\
**Post date:** [March 2, 2023, 7:03pm UTC](https://discourse.processing.org/t/random-object-of-four-in-each-square-of-a-grid/41034/14 "2023-03-02T19:03:17Z")

</div>

Why not use the [IntList shuffle](https://processing.org/reference/IntList_shuffle_.html) function?