# Draw every possible unique combination of a 3x3 circle grid with two colors

**URL:** <https://discourse.processing.org/t/draw-every-possible-unique-combination-of-a-3x3-circle-grid-with-two-colors/22338>\
**Category:** Coding Questions\
**Created:** [July 2, 2020, 9:52pm UTC](https://discourse.processing.org/t/draw-every-possible-unique-combination-of-a-3x3-circle-grid-with-two-colors/22338 "2020-07-02T21:52:51Z")\
**Posts on this page:** 1\
**Showing post:** 3

<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:** [July 5, 2020, 12:27pm UTC](https://discourse.processing.org/t/draw-every-possible-unique-combination-of-a-3x3-circle-grid-with-two-colors/22338/3 "2020-07-05T12:27:26Z")

</div>

> [@whistlinpete](#):
>
> How do I define and iterate through all of the 512 different possible options

Example here to get you started:  
[https://discourse.processing.org/t/iterate-once-and-only-once-through-all-the-possible-configurations-of-an-array/22366/13](https://discourse.processing.org/t/iterate-once-and-only-once-through-all-the-possible-configurations-of-an-array/22366/13)

I took my example and modified it to make a 2x2 grid and put it in a loop:

```auto
void setup() 
  {
  size(500, 500);    
  background(155, 0, 0);
  }
  
void draw()
  {
  int i = int(random(0, 15)); 
  int xg = int(random(0, width-10))+5;
  int yg = int(random(0, height-10))+5; 
  
  // This can be a function:
  int a, b;
  int x = 0; 
  int y = 0;
  
  for(int j = 0; j<4; j++)
    {   
    a = i & (0x01<<j);
    b = (a > 0) ? 1 : 0;
    if (b == 1)
      fill(0);
    else
      fill(255);
    
    x = j%2;
    if (j > 0 & x == 0) y++;
    
    circle(x*10 + xg, y*10 + yg, 10); 
    }
  } 

```

> **[% (modulo) / Reference](https://processing.org/reference/modulo.html)**
>
> Calculates the remainder when one number is divided by another. For example, when 52.1 is divided by 10, the divisor (10) goes into the dividend (52.1) five times (5 \* 10 == 50), and there is a remain…

I used the `%` operator for making the 2x2 grid.  
The `%` operator can also be used to plot all the combinations of the 2x2 grid on a larger grid.

Understanding this example will require some work on your part.

I used the same example and suggestions (scaled up for a 3x3 grid) to create this:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b5bdafa2b14fa6205db127bfdaaa6f7c96d47de5.png)

References:

> **[\<\< (left shift) / Reference](https://processing.org/reference/leftshift.html)**
>
> Shifts bits to the left. The number to the left of the operator is shifted the number of places specified by the number to the right. Each shift to the left doubles the number, therefore each left shi…

> **[% (modulo) / Reference](https://processing.org/reference/modulo.html)**
>
> Calculates the remainder when one number is divided by another. For example, when 52.1 is divided by 10, the divisor (10) goes into the dividend (52.1) five times (5 \* 10 == 50), and there is a remain…

> **[?: (conditional) / Reference](https://processing.org/reference/conditional.html)**
>
> A shortcut for writing an if and else structure. The conditional operator, ?: is sometimes called the ternary operator, an operator that takes three arguments. If the test …

I am comfortable with the math and operators I used.

There are many ways to tackle this; I have worked through many of these and this is what I churned out quickly.  
Choose the path that helps you easily understand this and go from there.

`:)`

---

_[View the full topic](https://discourse.processing.org/t/draw-every-possible-unique-combination-of-a-3x3-circle-grid-with-two-colors/22338)._