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

whistlinpete · July 2, 2020, 9:52pm

Hi, I’m a designer trying to draw every possible combination of a 3x3 circle grid with two colors. Here’s a example:

But this is an even better example of what I’m trying to do.

I know there are 512 different possibilities (2^9), but I don’t know how to make a program that will iterate through each possibility, check it off, and then go on to the next one without missing or duplicating any unique configurations. Ideally I would draw a single large .pdf, and I’ve got my file set up for that. I’ve also got an array for the colors (might be overkill but oh well.)

You can see the (not fancy) way I’ve drawn a single 3x3 circle grid in the code.

import processing.pdf.*;
boolean savePDF = true;

int colorset;
color [] colorsetarray = {#666666, #000000}; 

void setup () {
  size(400, 400);
  noLoop(); //prevents video playback
}

void draw () {
  beginRecord(PDF, "Arabesque"+year()+"-"+"0"+month()+"-"+day()+"_"+hour()+minute()+"0"+second()+".pdf" );
  
 
  fill(colorsetarray[0]);
  noStroke();
  circle(0,0,6);
  circle(9,0,6);
  circle(18,0,6);
  circle(0,9,6);
  circle(9,9,6);
  circle(18,9,6);
  circle(0,18,6);
  circle(9,18,6);
  circle(18,18,6);

  // saves the image when you play the sketch with the date and seconds in the sketch folder
  endRecord();
}

Now I have two questions:

How do I define and iterate through all of the 512 different possible options
How do I print all of the different grids in a single image frame with spacing (I think I use a couple for loops, but I’m not positive)

Thanks in advance for any advice or pointers you can provide.

SomeOne · July 5, 2020, 9:41am

You can think each color in the grid as either value 0 or 1. Then all combinations are the values from 000 000 000 to 111 111 111. So you can create all combination by going through numbers from 0 to 512. You could turn those numbers to bits or do a bit of math instead like this

for(int combination = 0; combination < 512; combination++) {
    int c11 = combination % 2;
    int c12 = combination % 4;
    int c13 = combination % 8;
    .
    .
    .
    int c33 = combination % 256;

c11 could then correspond to colour of top left dot in the grid, c12 top middle in the grid and c33 right bottom of the grid. Actually any consistent ordering will work.

You can create separate drawing areas with createGraphics() function. You’ll need small area to store a single circle grid and an one big to store all the combinations. Let’s say each grid are size of 5050 pixels. So command will create a one
PImage piSmall = createGraphics(50,50, "RGB");
Large one could be 32*16 grids, so it would be created as
PImage piLarge = createGraphics(50*32,50*16, "RGB");
You can copy smaller image to larger one with command
piLarge.copy(piSmall, 0, 0, 50, 50, x32, y*16, 50, 50);
Where x and y are in ranges 0 to 31 and 0 to 16 respectively. You can use two for loops for them.

for(int x = 0 ....) {
    for(int y = 0....) {

glv · July 5, 2020, 12:27pm

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

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

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

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:

References:

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.

:)

Chrisir · July 5, 2020, 2:10pm

Why do you start a new thread with the same question? This is very confusing

whistlinpete · July 5, 2020, 3:34pm

Confusing indeed, and sorry about that, but there’s a logical explanation:

I posted this post first right after signing up and the spam filter flagged it and prevented it from posting. Then I went through the onboarding tutorial thread in my account which eventually told me something like “you can post now.” It had been 20 hours (judging by the timestamps) and no staff member had unblocked my first post (this one), I became unsure that it would be unblocked at all, so I posted the other one which went live immediately.

In hindsight I maybe should have deleted this post after getting responses on the other one, but I didn’t and I think the responses here have given me more to think about. I apologize if you perceive this as an annoyance.

glv · July 6, 2020, 1:25am

This gave me a morning exercise to work my brain.

Sometimes the system fails us… don’t give a second thought.

:)

whistlinpete · July 6, 2020, 3:52am

Thanks @glv. I read up on how to read binary, which was interesting; definitely learned something new! And I’ve read the docs links you sent. I can’t figure out what I’m doing wrong. I don’t think I quite understand how the 0x08 is working. I tried the simple idea of repeating how those numbers change for subsequent circles, and also changed the i<16 part of the for loop, but its spitting out extra bits. I can’t get it to work with more than 4 digits. Here’s what I tried (I’m not a programmer, this probably looks pretty juvenile):



void setup() 
  {
  size(200, 3000);
  colorMode(RGB, 1);
  noStroke();
  
  for(int i=0; i<16; i++)
    {
    println(binary(i));
    }
  
  for(int i=0; i<16; i++)
    {
    int a, b;
    
    a = i & 0x01;
    b = (a > 0) ? 1 : 0;
    print(b);
    fill(b);
    circle(20, i*10+5, 5);
    
    a = i & 0x02;
    b = (a > 0) ? 1 : 0;
    print(b);
    fill(b);
    circle(30, i*10+5, 5);
    
    a = i & 0x04;
    b = (a > 0) ? 1 : 0;
    print(b);
    fill(b);
    circle(40, i*10+5, 5);
    
    a = i & 0x08;
    b = (a > 0) ? 1 : 0;
    println(b);
    fill(b);
    circle(50, i*10+5, 5);
    
    /*a = i & 0x16;
    b = (a > 0) ? 1 : 0;
    println(b);
    fill(b);
    circle(60, i*10+5, 5);
    
    /*a = i & 0x32;
    b = (a > 0) ? 1 : 0;
    println(b);
    fill(b);
    circle(70, i*10+5, 5);
    
    a = i & 0x64;
    b = (a > 0) ? 1 : 0;
    println(b);
    fill(b);
    circle(80, i*10+5, 5);
    
    a = i & 0x128;
    b = (a > 0) ? 1 : 0;
    println(b);
    fill(b);
    circle(90, i*10+5, 5);
    
    a = i & 0x256;
    b = (a > 0) ? 1 : 0;
    println(b);
    fill(b);
    circle(100, i*10+5, 5);*/
    }       
  }

glv · July 6, 2020, 11:55am

I used hexadecimal numbers to mask the bits (with an & operator); these are as easy for me to understand as binary or decimal. You can use decimal if you prefer; they are all the same numbers just represented differently.

void setup() 
  {
  println(binary(0x01)); // This just prints the binary representation
  println(binary(0x02)); 
  println(binary(0x04));
  println(binary(0x08));
  println(binary(0x16)); //Not the next number in sequence using hexadecimal
  }

Try the above with decimal numbers.

If you are taking insight from the code I wrote than work through it and understand what it is doing first and try to write something you understand.

You are now programming and part of that is process is learning the language and tools available to you.

I am always using print() statements to help my understand the code and doing lots of research.

References:

It may take a while if you are new to programming.

Take insight from code and try it on your own; you learn so much more that way.
I only provided an example of how I did it.

:)

whistlinpete · July 6, 2020, 6:20pm

This is fun. I feel like I’m almost there, and I appreciate the advice about using the console to track what is and is not working; that has helped me progress several steps. But now I’m getting a console error that I can’t figure out:

0
0000
java.lang.ArrayIndexOutOfBoundsException: 48
	at sketch_200706h_UsePositionsForColor02.draw(sketch_200706h_UsePositionsForColor02.java:66)
	at processing.core.PApplet.handleDraw(PApplet.java:2482)
	at processing.awt.PSurfaceAWT$12.callDraw(PSurfaceAWT.java:1547)
	at processing.core.PSurfaceNone$AnimationThread.run(PSurfaceNone.java:313)

Here’s my current code:


// make a variable for the x position of the dot grids
int j = 10; 
// make a variable for the y position of the dot grids
int h = 10; 
// make a variable to control how far apart grids are
int spacing = 20;

//make an array for colors
//set the first color to black
//set the second color to white
int[] binarycolors = {0, 255};

void setup() {
  size (500, 500);
  noStroke();
  noLoop();
}

void draw() {
  for (h=0; h<height; h=h+spacing) {
    for (j=0; j<width; j=j+spacing) {

      int i;
      //iterate through as many numbers as there are possible
      // depending on the grid size or test conditions
      // which I can calculate separately
      // ultimatey I'm going to want to set this to i<511 or 512
      for (i=0; i<4; i=i+1) {

        // print what i is so I can see the loop working
        println(i); 
        // print it in binary with 4 digits for the time being
        println(binary(i, 4)); 

        // make the binary number into a string
        // so I can grab each digit and use it for color
        String binaryi =(binary(i, 4));

        // make a variable for the value at each digit position
        // from left to right
        char digit1 = binaryi.charAt(0); 
        char digit2 = binaryi.charAt(1);
        char digit3 = binaryi.charAt(2);
        char digit4 = binaryi.charAt(3);

        // to check to see if the digit thing is working
        // uncomment this and print them all out
        // println(digit1, digit2, digit3, digit4);


        // pick a color position from the colors array
        // based on whether the digit value is zero or one
        int coloring1 = binarycolors[digit1];
        int coloring2 = binarycolors[digit2];
        int coloring3 = binarycolors[digit3];
        int coloring4 = binarycolors[digit4];

        // to check to see if the color thing is working
        // uncomment this and print them all out
        println(coloring1, coloring2, coloring3, coloring4);
        // something's getting borked in here ^^^

        /*
        // set the fill to zero or one based on
        // the digit's value
         
         fill(coloring1);
         circle(j, h, 5);
         fill(coloring2);
         circle(j+10, h, 5);
         fill(coloring3);
         circle(j, h+10, 5);
         fill(coloring4);
         circle(j+10, h+10, 5); */
      }
    }
  }
}

glv · July 6, 2020, 6:27pm

https://processing.org/tutorials/arrays/
https://processing.org/reference/Array.html

int[] binarycolors = {0, 255};

void setup() 
  {
  println(binarycolors.length);
  }

48 > 2 so this will generate an error.

:)

Chrisir · July 6, 2020, 8:04pm

Hello,

I can’t explain it exactly, but your thinking and approach is correct.

Of course 48 exceeds a array of length 2 but the question is, why does the 48 appear in your code at all, and not 0 (or 1 respectively).

The error is that the conversion
of the String and then usage of char doesn’t
work as you expect.

The char “0” has the integer value 48 (its ascii value). (for “1” the ascii is 49).
see https://en.wikipedia.org/wiki/ASCII

Therefore, not 0 but 48 is used as an index for the array - which is too big of course.

To get 0 instead of 48 (and 1 instead of 49 respectively) use int(digit1+"").

So we use:

      int coloring1 = binarycolors[int(digit1+"")];
      int coloring2 = binarycolors[int(digit2+"")];
      int coloring3 = binarycolors[int(digit3+"")];
      int coloring4 = binarycolors[int(digit4+"")];

There are several other flaws, e.g. you always see the same configuration but we come to this later.

Chrisir

Chrisir · July 6, 2020, 8:16pm

another minor flaw:

initially you set both h and j (why not name them x,y?) to 10 but in the for loops you say =0 so the 10 gets overwritten. The first circles are at 0 and this is the screen border. Looks ugly.

Don’t define / declare them before setup() at all. Instead use int as part of the for-loop and say:

  for (int h=10; h<height; h=h+spacing) {
    for (int j=10; j<width; j=j+spacing) {

whistlinpete · July 6, 2020, 8:26pm

Thanks @Chrisir. I had failed to put the int before h=10 in the for loop which was messing me up. I switched out h and j for x and y. I kind of went a different direction with structuring the code; not tidy, but I think I get what’s going on. Except the coloring doesn’t seem to be working and I can’t figure out why.

// make a variable to control how far apart grids are
int spacing = 20;

//make an array for colors
//set the first color to darkColor
//set the second color to lightColor
int lightColor = 255;
int darkColor = 0;

//set the total count of mini-grids you want drawn
int totalCount = 4;

void setup() {
  size (500, 500);
  noStroke();
  noLoop();
}

void draw() {
  for (int y=10; y<height; y=y+spacing) {
    for (int x=10; x<width; x=x+spacing) {

      //iterate through as many numbers as there are possible
      // depending on the grid size or test conditions
      // which I can calculate separately
      // ultimatey I'm going to want to set this to i<511 or 512
      for (int i=0; i<totalCount; i=i+1) {

        // print what i is so I can see the loop working
        println(i); 
        // print it in binary with 4 digits for the time being
        println(binary(i, 4)); 

        // make the binary number into a string
        // so I can grab each digit and use it for color
        String binaryi =(binary(i, 4));
        // make a variable for the value at each digit position
        // from left to right
        char digit1 = binaryi.charAt(0);
        // change that charater into a zero or one integer
        int number1 = int(digit1+"");
        // check if that integer is greater than zero
        // if it is make it light, if not make it dark
        fill((number1 > 0) ? lightColor : darkColor);
        circle(x, y, 5);
        
        char digit2 = binaryi.charAt(1);
        int number2 = int(digit2+"");
        fill((number2 > 0) ? lightColor : darkColor);
        circle(x+10, y, 5);
        
        char digit3 = binaryi.charAt(2);
        int number3 = int(digit3+"");
        fill((number3 > 0) ? lightColor : darkColor);
        circle(x, y+10, 5);
        
        char digit4 = binaryi.charAt(3);
        int number4 = int(digit4+"");
        fill((number4 > 0) ? lightColor : darkColor);
        circle(x+10, y+10, 5); 
        
        println(digit1, digit2, digit3, digit4);
        
      }
    }
  }
}

There’s also the fact that I’m drawing too many grids (I’m filling the space rather than drawing the right number of grids), but I think that’s a smaller problem compared to not drawing the right colors. Probably has to do with how my loops are structured.

glv · July 6, 2020, 8:35pm

Hello,

You need to work on this in small working modules.
Then piece these together…

void setup() 
  {
  size (500, 500);
  noStroke();
  noLoop();
  }

void draw() 
  {
  for (int i=0; i<4; i=i+1) 
    {
    println(i); 
    println(binary(i, 4)); 

    String binaryi = binary(i);
    
    println(binaryi);
    
    //char digit1 = binaryi.charAt(0); 
    //char digit2 = binaryi.charAt(1);
    //char digit3 = binaryi.charAt(2);
    //char digit4 = binaryi.charAt(3);
    
    for (int j=0; j<4; j=j+1)
      {
      char digit1 = binaryi.charAt(31-4+j);
      print(digit1);
      }
    println();
    }
  }

I used a lot of print() and println() statements as required.
I used the references for each step.

You can right click on a keyword and select Find in reference in your code.

:)

Chrisir · July 6, 2020, 8:35pm

Okay…

Remark

once you have this

        int number1 = int(digit1+"");

you don’t need

        fill((number1 > 0) ? lightColor : darkColor);

just say

        fill(binarycolors[int(digit1+"")]);
        ellipse(j, h, 5, 5);

Remark

at the moment, you use a nested for-loop to generate a big grid.

within the big grid you have for (i=0; i<4; i=i+1) {
but the 4 combinations are written in the same spot x,y.
That’s why you see the same combination.
How can you solve this?

Remark

you really should turn to a for loop (or a nested for-loop for the 3x3 grid) for the String binaryi to avoid a long code like this:

 char digit1 = binaryi.charAt(0);
        // change that charater into a zero or one integer
        int number1 = int(digit1+"");
        // check if that integer is greater than zero
        // if it is make it light, if not make it dark
        fill((number1 > 0) ? lightColor : darkColor);
        circle(x, y, 5);
        
        char digit2 = binaryi.charAt(1);
        int number2 = int(digit2+"");
        fill((number2 > 0) ? lightColor : darkColor);
        circle(x+10, y, 5);
        
        char digit3 = binaryi.charAt(2);
        int number3 = int(digit3+"");
        fill((number3 > 0) ? lightColor : darkColor);
        circle(x, y+10, 5);
        
        char digit4 = binaryi.charAt(3);
        int number4 = int(digit4+"");
        fill((number4 > 0) ? lightColor : darkColor);
        circle(x+10, y+10, 5);

Entire Sketch

here is my version of the old Sketch:




// make a variable for the x position of the dot grids
int j = 10; 
// make a variable for the y position of the dot grids
int h = 10; 
// make a variable to control how far apart grids are
int spacing = 30;

//make an array for colors
//set the first color to black
//set the second color to white
int[] binarycolors = {0, 255};

void setup() {
  size (500, 500);
  noStroke();
  noLoop();
}

void draw() {
  for (h=10; h<height; h=h+spacing) {
    for (j=10; j<width; j=j+spacing) {

      int i;
      //iterate through as many numbers as there are possible
      // depending on the grid size or test conditions
      // which I can calculate separately
      // ultimatey I'm going to want to set this to i<511 or 512
      for (i=0; i<4; i=i+1) {

        // print what i is so I can see the loop working
        println(i); 
        // print it in binary with 4 digits for the time being
        println(binary(i, 4)); 

        // make the binary number into a string
        // so I can grab each digit and use it for color
        String binaryi = (binary(i, 4));
        // println ("binaryi "+ binaryi);

        // make a variable for the value at each digit position
        // from left to right
        char digit1 = binaryi.charAt(0); 
        char digit2 = binaryi.charAt(1);
        char digit3 = binaryi.charAt(2);
        char digit4 = binaryi.charAt(3);

        // to check to see if the digit thing is working
        // uncomment this and print them all out
        //println(digit1);
        //println(digit1, digit2, digit3, digit4);

        // pick a color position from the colors array
        // based on whether the digit value is zero or one
        int coloring1 = binarycolors[int(digit1+"")];
        int coloring2 = binarycolors[int(digit2+"")];
        int coloring3 = binarycolors[int(digit3+"")];
        int coloring4 = binarycolors[int(digit4+"")];

        // to check to see if the color thing is working
        // uncomment this and print them all out
        // println(coloring1, coloring2, coloring3, coloring4);
        // something's getting borked in here ^^^


        // set the fill to zero or one based on
        // the digit's value

        fill(coloring1);
        ellipse(j, h, 5, 5);
        fill(coloring2);
        ellipse(j+10, h, 5, 5);
        fill(coloring3);
        ellipse(j, h+10, 5, 5);
        fill(coloring4);
        ellipse(j+10, h+10, 5, 5);
      }
    }
  }
}
//

glv · July 7, 2020, 3:13pm

Hi @whistlinpete

I liked your use of these:

I modified my example above and added your flavor and some embellishments.
I kept the before and added the after to show how code is refined over time and you can accomplish the task in more than one way.

// Row and Grid Counter
// v1.1.0
// GLV 2020-07-07

int i;
boolean toggle = false;

int col [] = {0, 255};

void setup() 
  {
  size(500, 300);    
  background(155, 0, 0);
  }
  
void draw()
  {
  background(155, 0, 0);
  
  //Before:
  //i =  int(random(0, 15)); 
  //int xg = int(random(0, width-10))+5;
  //int yg = int(random(0, height-10))+5; 
  
  //After:
  int xg = 100;
  int yg = 100;
 
  // 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); 
    String binaryi = binary(i, 4);
    a = binaryi.charAt(j)-48;      //See what I did here?
    println(a);

    //This can replace above
    //a = (i & (0x01<<j))>>j;      //My first choice!
    //println(a);
    
    //Before:
    //b = (a > 0) ? 1 : 0;
    //if (b == 1)
    //  fill(0);
    //else
    //  fill(255);
    
    //After:
    fill(col[a]);
    
    // Toggles between row and grid
    if (toggle)
      {
      x = j%2;                 
      if (j > 0 & x == 0) y++;  
      }
    else
      {
      x=j;   
      }
      
    circle(x*100 + xg, y*100 + yg, 100); 
    }
    
//*********************************************************     
  
  
  // This is just a counter; i increments every 30 frames (0.5 sec)  
  if(frameCount%30 == 0) 
    {
    i++;
    if (i>512) i = 0;
    println(i);
    }
  } 
  
// Toggles "toggle" on pressing space bar  
void keyPressed()
  {
  if (key == ' ') toggle = !toggle;
  i = 0;
  }

Some tidbits that I always find useful:

added keyboard control to toggle row\grid; hit space bar to see it in action.
added a simple timed counter.

I come from the embedded world of programming so this is how I did it:

    //This can replace above
    a = (i & (0x01<<j))>>j;      //My first choice
   //a = (i & (0x01<<(3-j)))>>(3-j);   //Or this
    println(a);

Looking forward to seeing your large grid!

:)

whistlinpete · July 7, 2020, 4:30pm

The coloring is working. I really appreciate the time @Chrisir and @glv have spent helping me with this. Aside from how non-DRY my code is now, it’s working and I understand it. But I can’t figure out how to make the dot grids align in a big grid.

Here’s without for loops (because those were screwing me up), but x is just incrementing upwards without wrapping to the next line:


//sizes
int a = 20;
int b = 6;
int c = 3;
int d = b+c;
int e = b*3+c*2;
int f = a+e;

//counts
int g = int(pow(2, 9));

//colors
int [] colors = {0, 255};

// grid will be 32 grids wide by 16 tall
// so width=32*e+33*a; or (32*24)+(33*20)
// and height=16*e+17*a;
void setup () {
  size(1424, 1064);
  noLoop();
  noStroke();
}

void draw () {
  int x = a;
  int y = a;
  for (int k=0; k<g; k=k+1) {
    println (binary(k, 9));
    String binaryk = (binary(k, 9));
    char d1 = binaryk.charAt(0); 
    char d2 = binaryk.charAt(1);
    char d3 = binaryk.charAt(2);
    char d4 = binaryk.charAt(3);
    char d5 = binaryk.charAt(4);
    char d6 = binaryk.charAt(5);
    char d7 = binaryk.charAt(6);
    char d8 = binaryk.charAt(7);
    char d9 = binaryk.charAt(8);

    int c1 = colors[int(d1+"")];
    int c2 = colors[int(d2+"")];
    int c3 = colors[int(d3+"")];
    int c4 = colors[int(d4+"")];
    int c5 = colors[int(d5+"")];
    int c6 = colors[int(d6+"")];
    int c7 = colors[int(d7+"")];
    int c8 = colors[int(d8+"")];
    int c9 = colors[int(d9+"")];

    println(d1, d2, d3, d4, d5, d6, d7, d8, d9);
    println(c1, c2, c3, c4, c5, c6, c7, c8, c9);

    fill(c1);
    ellipse(x, y, c, c);
    fill(c2);
    ellipse(x+d, y, c, c);
    fill(c3);
    ellipse(x+d*2, y, c, c);
    fill(c4);
    ellipse(x, y+d, c, c);
    fill(c5);
    ellipse(x+d, y+d, c, c);
    fill(c6);
    ellipse(x+d*2, y+d, c, c);
    fill(c7);
    ellipse(x, y+d*2, c, c);
    fill(c8);
    ellipse(x+d, y+d*2, c, c);
    fill(c9);
    ellipse(x+d*2, y+d*2, c, c);

    x=x+f;
    if (x<width) {
      y=a;
    } else if (x>width && x<(width*2)) {
      x=x+f;
      y=y+f;
    }
  }
}

Here’s with for loops, but the mini grids are writing over themselves:

//note: this sketch takes several seconds to render

//sizes and spacings
int a = 20;
int b = 6;
int c = 3;
int d = b+c;
int e = b*3+c*2;
int f = a+e;

//counts
int g = int(pow(2, 9));

//colors
int [] colors = {102, 255};

// grid will be 32 grids wide by 16 tall
// so width=32*e+33*a; or (32*24)+(33*20)
// and height=16*e+17*a;
void setup () {
  size(1424, 1064);
  noLoop();
  noStroke();
}

void draw () {

  for (int x=a; x<width; x=x+f) {
    for (int y=a; y<height; y=y+f) {
      for (int k=0; k<g; k=k+1) {
        
        println (binary(k, 9));
        String binaryk = (binary(k, 9));
        char d1 = binaryk.charAt(0); 
        char d2 = binaryk.charAt(1);
        char d3 = binaryk.charAt(2);
        char d4 = binaryk.charAt(3);
        char d5 = binaryk.charAt(4);
        char d6 = binaryk.charAt(5);
        char d7 = binaryk.charAt(6);
        char d8 = binaryk.charAt(7);
        char d9 = binaryk.charAt(8);

        int c1 = colors[int(d1+"")];
        int c2 = colors[int(d2+"")];
        int c3 = colors[int(d3+"")];
        int c4 = colors[int(d4+"")];
        int c5 = colors[int(d5+"")];
        int c6 = colors[int(d6+"")];
        int c7 = colors[int(d7+"")];
        int c8 = colors[int(d8+"")];
        int c9 = colors[int(d9+"")];

        println(d1, d2, d3, d4, d5, d6, d7, d8, d9);
        println(c1, c2, c3, c4, c5, c6, c7, c8, c9);

        fill(c1);
        ellipse(x, y, c, c);
        fill(c2);
        ellipse(x+d, y, c, c);
        fill(c3);
        ellipse(x+d*2, y, c, c);
        fill(c4);
        ellipse(x, y+d, c, c);
        fill(c5);
        ellipse(x+d, y+d, c, c);
        fill(c6);
        ellipse(x+d*2, y+d, c, c);
        fill(c7);
        ellipse(x, y+d*2, c, c);
        fill(c8);
        ellipse(x+d, y+d*2, c, c);
        fill(c9);
        ellipse(x+d*2, y+d*2, c, c);

        //y=y+f;
      }
    }
  }
}

Is there a simple change I could make to have the small grids appear within the large grid? If it involves for loops I can’t figure out how to keep them from overwriting each other in the same place.

glv · July 7, 2020, 4:58pm

I simplified your code and just focused on large grid.

//sizes
int a = 20;
int b = 6;
int c = 3;
int d = b+c;

//counts
int g = int(pow(2, 9));

void setup () 
  {
  size(1424, 1064);
  noLoop();
  noStroke();
  }

void draw () 
  {
  background(0);
    
  int x = 0;
  int y = 0;
  
  for (int k=0; k<g; k=k+1) 
    {
    fill(255, 255, 0);
    ellipse(x+d*2, y+d*2, 20, 20);

    x = x+20;
    if (x>width-25) 
      {
      y+=a;
      x = 0;
      } 
    }
  }

:)

whistlinpete · July 7, 2020, 5:11pm

Got it:


//sizes
int a = 20;
int b = 6;
int c = 3;
int d = b+c;
int e = b*3+c*2;
int f = a+e;

//counts
int g = int(pow(2, 9));

//colors
int [] colors = {0, 255};

// grid will be 32 mini grids wide by 16 tall
void setup () {
  size(1424, 724);
  noLoop();
  noStroke();
}

void draw () {
  int x = a;
  int y = a;
  for (int k=0; k<g; k=k+1) {
    println (binary(k, 9));
    String binaryk = (binary(k, 9));
    char d1 = binaryk.charAt(0); 
    char d2 = binaryk.charAt(1);
    char d3 = binaryk.charAt(2);
    char d4 = binaryk.charAt(3);
    char d5 = binaryk.charAt(4);
    char d6 = binaryk.charAt(5);
    char d7 = binaryk.charAt(6);
    char d8 = binaryk.charAt(7);
    char d9 = binaryk.charAt(8);

    int c1 = colors[int(d1+"")];
    int c2 = colors[int(d2+"")];
    int c3 = colors[int(d3+"")];
    int c4 = colors[int(d4+"")];
    int c5 = colors[int(d5+"")];
    int c6 = colors[int(d6+"")];
    int c7 = colors[int(d7+"")];
    int c8 = colors[int(d8+"")];
    int c9 = colors[int(d9+"")];

    println(d1, d2, d3, d4, d5, d6, d7, d8, d9);
    println(c1, c2, c3, c4, c5, c6, c7, c8, c9);

    fill(c1);
    ellipse(x, y, c, c);
    fill(c2);
    ellipse(x+d, y, c, c);
    fill(c3);
    ellipse(x+d*2, y, c, c);
    fill(c4);
    ellipse(x, y+d, c, c);
    fill(c5);
    ellipse(x+d, y+d, c, c);
    fill(c6);
    ellipse(x+d*2, y+d, c, c);
    fill(c7);
    ellipse(x, y+d*2, c, c);
    fill(c8);
    ellipse(x+d, y+d*2, c, c);
    fill(c9);
    ellipse(x+d*2, y+d*2, c, c);

    x=x+f;
    if (x>width-a) {
      x=a;
      y=y+f;
    }
  }
  int canvasheight = 16*e+17*a;
  int canvaswidth = 32*e+33*a; 
  println (canvasheight, canvaswidth);
}

Thanks so much for the help!!!

Chrisir · July 7, 2020, 5:31pm

without reading your code:

x=x+f;
if (x > width-45) {
  // line break
  x = a;  //  !!!!!!!!!!!!!!!!!!!!!!!!
  y += f;  //  !!!!!!!!!!!!!!!!!!!!!
}

OR

here

better

      x=a;
      y=y+f;

Chrisir

Topic		Replies	Views
Iterate once and only once through all the possible configurations of an array Coding Questions	18	1409	July 6, 2020
Processing Array Circle Art Coding Questions homework	15	2055	October 26, 2018
Can someone create two loops out of this code? Coding Questions	1	209	January 4, 2021
Drawing Sheet on Processing Coding Questions	6	659	November 4, 2019
Making a Palette using for loops and arrays [COMPLICATED] Coding Questions homework	15	1295	November 15, 2019

Related topics