Grid using ramdomly some designs

Processing Coding Questions
1

Hi there!

I am drawing a grid with 9 different types of design, as you can see in the Code Now, I would like to use them ramdomly, I mean, to fill the squares with them in a random way. How could I start doing that? Thank you!

void setup(){
  size(1000,1000);
  background (255);
  noStroke();
  
  //model 1
  fill(random(256),random(256),random(256));
  rect(0,0,50,100);
  
  //model 2
  fill(random(256),random(256),random(256));
  rect(100,0,100,50);
   
  //model 3 
  fill(random(256),random(256),random(256));
  rect(200,0,50,50);
  fill(random(256),random(256),random(256));
  rect(200,50,50,50);
  
  //kodel 4
  fill(random(256),random(256),random(256));
  rect(350,0,50,50);
  fill(random(256),random(256),random(256));
  rect(350,50,50,50);
  
  //model 5
  fill(random(256),random(256),random(256));
  rect(400,0,50,50);
  fill(random(256),random(256),random(256));
  rect(450,0,50,50);
  
  //model 6
  fill(random(256),random(256),random(256));
  rect(500,50,50,50);
  fill(random(256),random(256),random(256));
  rect(550,50,50,50);
  
  //model 7
  fill(random(256),random(256),random(256));
  rect(600,0,50,50);
  fill(random(256),random(256),random(256));
  rect(600,50,50,50);
  fill(random(256),random(256),random(256));
  rect(650,0,50,50);
  fill(random(256),random(256),random(256));
  rect(650,50,50,50);
  
  //model 8
  fill(random(256),random(256),random(256));
  rect(700,0,25,25);
  fill(random(256),random(256),random(256));
  rect(700,25,25,25);
  fill(random(256),random(256),random(256));
  rect(725,0,25,25);
  fill(random(256),random(256),random(256));
  rect(725,25,25,25);
  fill(random(256),random(256),random(256));
  rect(700,50,25,25);
  fill(random(256),random(256),random(256));
  rect(700,75,25,25);
  fill(random(256),random(256),random(256));
  rect(725,50,25,25);
  fill(random(256),random(256),random(256));
  rect(725,75,25,25);
  
  // model 9
  fill(random(256),random(256),random(256));
  rect(800,0,25,25);
  fill(random(256),random(256),random(256));
  rect(800,25,25,25);
  fill(random(256),random(256),random(256));
  rect(825,0,25,25);
  fill(random(256),random(256),random(256));
  rect(825,25,25,25);
  fill(random(256),random(256),random(256));
  rect(800,50,25,25);
  fill(random(256),random(256),random(256));
  rect(800,75,25,25);
  fill(random(256),random(256),random(256));
  rect(825,50,25,25);
  fill(random(256),random(256),random(256));
  rect(825,75,25,25);
  
  fill(random(256),random(256),random(256));
  rect(850,0,25,25);
  fill(random(256),random(256),random(256));
  rect(850,25,25,25);
  fill(random(256),random(256),random(256));
  rect(875,0,25,25);
  fill(random(256),random(256),random(256));
  rect(875,25,25,25);
  fill(random(256),random(256),random(256));
  rect(850,50,25,25);
  fill(random(256),random(256),random(256));
  rect(850,75,25,25);
  fill(random(256),random(256),random(256));
  rect(875,50,25,25);
  fill(random(256),random(256),random(256));
  rect(875,75,25,25);
  
  
  
  noFill();
  stroke(1);
  for(int x=0; x<1000; x=x+100) {
    for(int y=0; y<1000; y=y+100)
    rect(x,y,100,100);
  }
}
2

Turn each of your "model"s into functions that draw the rectangle between (0,0) and (100,100) and use translate in your loops to draw them in the right spot:

  for(int x=0; x<1000; x=x+100) {
    for(int y=0; y<1000; y=y+100) {
      pushMatrix();
      translate( x, y );
      switch( random( 9 ) ) {
        case 0: model1();  break;
        case 1: model2();  break;
        // and so on
      }
      popMatrix();
    }
  }
3

Thanks! Like that? What It is not right?

void setup(){
  size(1000,1000);
  background (255);
  noStroke();
  
 
  float x = 0;
  float y = 0;
  drawModel1(x,y);
  drawModel2(x,y);
  drawModel3(x,y);
  drawModel4(x,y);
  drawModel5(x,y);
  drawModel6(x,y);
  drawModel7(x,y);
  drawModel8(x,y);
  drawModel9(x,y);
  
  

}

void drawModel1(float x, float y){
  
  fill(random(256),random(256),random(256));
  rect(x,y,50,100);
} 
  
void drawModel2(float x, float y){
  fill(random(256),random(256),random(256));
  rect(x,y,100,50);
}
   
void drawModel3(float x, float y){
  fill(random(256),random(256),random(256));
  rect(x,y,50,50);
  fill(random(256),random(256),random(256));
  rect(x,y+50,50,50);
}
  
void drawModel4(float x, float y){
  fill(random(256),random(256),random(256));
  rect(x+50,y,50,50);
  fill(random(256),random(256),random(256));
  rect(x+50,y+50,50,50);
}

void drawModel5(float x, float y){
  fill(random(256),random(256),random(256));
  rect(x,y,50,50);
  fill(random(256),random(256),random(256));
  rect(x+50,y,50,50);
}
  
void drawModel6(float x, float y){
  fill(random(256),random(256), random(256));
  rect(x,y+50,50,50);
  fill(random(256),random(256), random(256));
  rect(x+50,y+50,50,50);
}

void drawModel7(float x, float y){
  fill(random(256),random(256),random(256));
  rect(x,y,50,50);
  fill(random(256),random(256),random(256));
  rect(x,y+50,50,50);
  fill(random(256),random(256),random(256));
  rect(x+50,y,50,50);
  fill(random(256),random(256),random(256));
  rect(x+50,y+50,50,50);
}
  
void drawModel8(float x, float y){
  fill(random(256),random(256),random(256));
  rect(x,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x,y+25,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y+25,25,25);
  fill(random(256),random(256),random(256));
  rect(x,y+50,25,25);
  fill(random(256),random(256),random(256));
  rect(x,y+75,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y+50,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y+75,25,25);
}
  
void drawModel9(float x, float y){
  fill(random(256),random(256),random(256));
  rect(x,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x,y+25,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y+25,25,25);
  fill(random(256),random(256),random(256));
  rect(x,y+50,25,25);
  fill(random(256),random(256),random(256));
  rect(x,y+75,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y+50,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y+75,25,25);
  
  fill(random(256),random(256),random(256));
  rect(x+50,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x+50,y+25,25,25);
  fill(random(256),random(256),random(256));
  rect(x+75,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x+75,y+25,25,25);
  fill(random(256),random(256),random(256));
  rect(x+50,y+50,25,25);
  fill(random(256),random(256),random(256));
  rect(x+50,y+75,25,25);
  fill(random(256),random(256),random(256));
  rect(x+75,50,25,25);
  fill(random(256),random(256),random(256));
  rect(x+75,y+50,25,25); 
} 

void draw() {
for(int x=0; x<1000; x=x+100) {
    for(int y=0; y<1000; y=y+100) {
      pushMatrix();
      translate( x, y );
      switch( random( 9 ) ) {
        case 0: Model1();  break;
        case 1: Model2();  break;
        case 2: Model3();  break;
        case 3: Model4();  break;
        case 4: Model5();  break;
        case 5: Model6();  break;
        case 6: Model7();  break;
        case 7: Model8();  break;
        case 8: Model9();  break;
      }
      popMatrix();
    }
}
 
 }
4

Each drawModel function should draw its rectangle from (0,0) to (100,100). The translate() inside the draw() function will put them in the right place.

Think of each drawModel all by itself as drawing a picture on a separate piece of paper with a coordinate system that goes from (0,0) to (100,100). Draw anything on there that you like. Do not pass in (x,y) to your function. Just draw each rectangle at the origin.

Separately, the draw() function creates a grid of randomly-chosen pieces of paper using translate() to position them.

1 Like
5

thank you so much for your answer, I was trying with no success because that approach is more than I can do. So I changed the strategy to something easier, using if and else if. But there is something that I think that I don’t understand very good, the probability of every designs to appear. I try to give last designs more probability to appear, but it happens the opposite thing. Could you please help me?


  size(1000,1000);
  background (255);
  noStroke();
     
    for(int x=0; x<1000; x=x+100) {
    for(int y=0; y<1000; y=y+100)
    rect(x,y,100,100);
    fill(random(256),random(256),random(256)); 

  }
  
  
    for(int x=0; x<1000; x=x+100) {
    for(int y=0; y<1000; y=y+100)
    
    if(random(1)>0.9) {
    fill(random(256),random(256),random(256));  
    rect(x,y,50,100);
  }
    else if(random(1)>0.5) {
    fill(random(256),random(256),random(256));  
    rect(x,y,100,50);
  }
  
    else if(random(1)>0.5) {
   fill(random(256),random(256),random(256));
   rect(x,y,50,50);
   fill(random(256),random(256),random(256));
   rect(x,y+50,50,50);
  }
  
   else if(random(1)>0.5) {
  fill(random(256),random(256),random(256));
  rect(x+50,y,50,50);
  fill(random(256),random(256),random(256));
  rect(x+50,y+50,50,50);
   }
   
  else if(random(1)>0.5) {
  fill(random(256),random(256),random(256));
  rect(x,y,50,50);
  fill(random(256),random(256),random(256));
  rect(x+50,y,50,50);
  
  } 
  
  else if(random(1)>0.5) {
  fill(random(256),random(256),random(256));
  rect(x,y+50,50,50);
  fill(random(256),random(256),random(256));
  rect(x+50,y+50,50,50);
  
  } 

  
  //model 7
  else if(random(1)>0.5) {
  fill(random(256),random(256),random(256));
  rect(x,y,50,50);
  fill(random(256),random(256),random(256));
  rect(x,y+50,50,50);
  fill(random(256),random(256),random(256));
  rect(x+50,y,50,50);
  fill(random(256),random(256),random(256));
  rect(x+50,y+50,50,50);
  
  } 
  
  else if(random(1)>0.1) {
  fill(random(256),random(256),random(256));
  rect(x,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x,y+25,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y+25,25,25);
  fill(random(256),random(256),random(256));
  rect(x,y+50,25,25);
  fill(random(256),random(256),random(256));
  rect(x,y+75,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y+50,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y+75,25,25);
  
   } 
  
  else if(random(1)>0.1) {
  fill(random(256),random(256),random(256));
  rect(x+50,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x+50,y+25,25,25);
  fill(random(256),random(256),random(256));
  rect(x+75,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x+75,y+25,25,25);
  fill(random(256),random(256),random(256));
  rect(x+50,y+50,25,25);
  fill(random(256),random(256),random(256));
  rect(x+50,y+75,25,25);
  fill(random(256),random(256),random(256));
  rect(x+75,y+50,25,25);
  fill(random(256),random(256),random(256));
  rect(x+75,y+75,25,25);
 
   } 
  
   else if(random(1)>0.1) {
  fill(random(256),random(256),random(256));
  rect(x,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x,y+25,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y+25,25,25);
  fill(random(256),random(256),random(256));
  rect(x+50,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x+50,y+25,25,25);
  fill(random(256),random(256),random(256));
  rect(x+75,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x+75,y+25,25,25);
  
   } 
 
  
  else if(random(1)>0.1) {
  fill(random(256),random(256),random(256));
  rect(x,y+50,25,25);
  fill(random(256),random(256),random(256));
  rect(x,y+75,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y+50,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y+75,25,25);
  fill(random(256),random(256),random(256));
  rect(x+50,y+50,25,25);
  fill(random(256),random(256),random(256));
  rect(x+50,y+75,25,25);
  fill(random(256),random(256),random(256));
  rect(x+75,y+50,25,25);
  fill(random(256),random(256),random(256));
  rect(x+75,y+75,25,25);
 
  }  
  
  
  else if(random(1)>0.1) {
  fill(random(256),random(256),random(256));
  rect(x,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x,y+25,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y+25,25,25);
  fill(random(256),random(256),random(256));
  rect(x,y+50,25,25);
  fill(random(256),random(256),random(256));
  rect(x,y+75,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y+50,25,25);
  fill(random(256),random(256),random(256));
  rect(x+25,y+75,25,25);
  
  fill(random(256),random(256),random(256));
  rect(x+50,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x+50,y+25,25,25);
  fill(random(256),random(256),random(256));
  rect(x+75,y,25,25);
  fill(random(256),random(256),random(256));
  rect(x+75,y+25,25,25);
  fill(random(256),random(256),random(256));
  rect(x+50,y+50,25,25);
  fill(random(256),random(256),random(256));
  rect(x+50,y+75,25,25);
  fill(random(256),random(256),random(256));
  rect(x+75,y+50,25,25);
  fill(random(256),random(256),random(256));
  rect(x+75,y+75,25,25);
  
  
  }  
  }
6

You only want one random() call for choosing which image to put in each square. If you keep nesting them, then the later choices have less and less likelihood of being chosen. Try the code below.

The 8 in int choice = (int)random( 8 ); should be the count of the total number of choices you have for rectangles including any duplicates. In my case, a dot() will happen 3 times as likely as a vertrect() and a midsquare() will happen twice as likely. The stripe pairs share a slot, so one or the other of them will happen as likely as a vertrect().

void midsquare( int x, int y ) {
  fill( random(255), random(255), random(255) );
  rect( x+25, y+25, 50, 50 );
}

void dot( int x, int y ) {
  fill( random(255), random(255), random(255) );
  circle( x+50, y+50, 50 );
}

void vertrect( int x, int y ) {
  fill( random(255), random(255), random(255) );
  rect( x+25, y, 50, 100 );
}

void horizrect( int x, int y ) {
  fill( random(255), random(255), random(255) );
  rect( x, y+25, 100, 50 );
}

void horizpair( int x, int y ) {
  fill( random(255), random(255), random(255) );
  rect( x, y+20, 100, 20 );
  rect( x, y+60, 100, 20 );
}

void vertpair( int x, int y ) {
  fill( random(255), random(255), random(255) );
  rect( x+20, y, 20, 100 );
  rect( x+60, y, 20, 100 );
}

void generate() {
 background( 255 );
  noStroke();
  
  for( int x=0; x<1000; x+=100 ) {
    for( int y=0; y<1000; y+=100 ) {
      fill( 240 );
      rect( x+1, y+1, 98, 98 );
      int choice = (int)random( 8 );
      switch( choice ) {
        case 0:
        case 1:
          midsquare( x, y );  break;
        case 2:
        case 3:
        case 4:
          dot( x, y );  break;
        case 5:
          vertrect( x, y );  break;
        case 6:
          horizrect( x, y );  break;
        case 7:
          if( random(1) < 0.5 ) horizpair( x, y );
          else vertpair( x, y );
          break;
      }
    }
  }
}

void setup() {
  size( 1000, 1000 );
  noLoop();
}

void draw() {
  generate();
}

void keyPressed() {
  redraw();
}
1 Like
7

Thanks for your fast answer! I can’t see anything when I paste the Code on my APDE, but without understand It completely I see that you hace used else if too. But the final sketch has 12 options, a los more than 3, so I have still the same problem. Do you know how could I use else and else if with 12 designs to give them more probabilities to appear?

8

Make sure you selected all the way to the bottom when pasting my code into your Processing IDE.

My switch statement is equivalent to saying:

if( choice==0 || choice==1 )  midsquare( x, y );
else if( choice==2 || choice==3 || choice==4 ) dot( x, y );
else if( choice==5 ) vertrect( x, y );
else  // and so on

You can add as many choices as you want for each function increasing its chance of being selected. Similarly, you can add choices for more functions. 12 is not very big. Just add the case: lines for whatever and however many choices you want.

Maybe the right way to do this is to make an array of objects that have a numerical weight and an action function. Sort them by descending weight. Then a function would run through your array and sum up the weights. choice would choose randomly from 0 to the total sum and you would then run down the array summing up the weights until you find the object just under that choice number. I don’t have the time right now to code this up.

9

Yes, you are right, I have done it again and it works! Thanks!

It is exactly what I want. But I also would like to draw some designs on top of other designs. Some of them have empty space and would like to see other designs under them. For example, It would be great if some cells would have 4 or 5 designs, others would have 2, and others just one or none. How coud I do that?

void zero( int x, int y ) {
  fill( random(255), random(255), random(255) );
  rect(x,y,50,100);
}

void one( int x, int y ) {
  fill( random(255), random(255), random(255) );
  rect(x,y,100,50);
}

void two( int x, int y ) {
  fill( random(255), random(255), random(255) );
  rect(x,y,50,50);
  fill(random(256),random(256),random(256));
  rect(x,y+50,50,50);
}

void three( int x, int y ) {
  fill( random(255), random(255), random(255) );
  rect(x+50,y,50,50);
  fill(random(256),random(256),random(256));
  rect(x+50,y+50,50,50);
}

void four( int x, int y ) {
  fill( random(255), random(255), random(255) );
  rect(x,y,50,50);
  fill(random(256),random(256),random(256));
  rect(x+50,y,50,50);
}

void five( int x, int y ) {
  fill( random(255), random(255), random(255) );
  rect(x,y+50,50,50);
  fill(random(256),random(256),random(256));
  rect(x+50,y+50,50,50);
}

void six( int x, int y  ) { 
  fill(random(256),random(256),random(256));
  rect(x,y,50,50);
  fill(random(256),random(256),random(256));
  rect(x,y+50,50,50);
  fill(random(256),random(256),random(256));
  rect(x+50,y,50,50);
  fill(random(256),random(256),random(256));
  rect(x+50,y+50,50,50);
  
  } 
void seven( int x, int y )  {
  fill(random(256),random(256),random(256));
  rect(x,y,25,100);
  rect(x+50,y,25,100);
  }
  
void eight( int x, int y )  {
  fill(random(256),random(256),random(256));
  rect(x,y,100,25);
  rect(x,y+50,100,25);
  }
  
  

void generate() {
 background( 255 );
  noStroke();
    for( int x=0; x<1000; x+=100 ) {
    for( int y=0; y<1000; y+=100 ) {
      fill(random(256),random(256),random(256));
      rect( x, y, 100, 100 );
      int choice = (int)random(12 );
      switch( choice ) {
        case 0: 
          zero(x,y); break;
        case 1:
          one(x,y); break;
        case 2:
          two(x,y); break;
        case 3:
          three(x,y); break;
        case 4:
          four(x,y); break; 
        case 5:
          five(x,y); break;
        case 6:
          six(x,y); break;
        case 7:
          seven(x,y); break; 
        case 8:
          eight(x,y); break; 
                  
      }
    }
  }
}

void setup() {
  size( 1000, 1000 );
  noLoop();
}

void draw() {
  generate();
}

void keyPressed() {
  redraw();
}
10

Throw another for loop around the choice and switch statement. Untested, but something like

rect( x, x, 100, 100 );
int numLayers = (int)random( 5 );
for( int iLayer=0; iLayer<numLayers; iLayer++ ) {
  int choice = (int)random( 12 );
  switch( choice ) {
     case 0:
    // and so on
  }
}

in the middle of the generate function.

Read about how switch works. For instance, if you have

case 3:  doSomething();
case 4: doAnother();  break;

without a break; after case 3:, if your choice is 3, it will do both actions for 3 and for 4. In other words, the code will keep doing things until it hits a break; statement. So in my previous example, if you have

case 0:
case 1:
case 2: doSomething();  break;
case 3: doAnother();  break;

then any choice of 0, 1, or 2 will doSomething(), but only a choice of 3 will doAnother(). That’s how I was increasing the chances of certain patterns over others. In general, you want to have a case: available for any of the switch inputs values, so only use choice = random(12) when you have the full set of case 0: to case 11: included. You can also add a label of default: to catch all of the missing cases.

11

Thank you so much, my friend, it has worked. I have to do more tests because I am not sure if I understand how “break” works, I think that avoid repetition of cases but I would say that cases are repeated (as I want), so I would do another designs to see this clearer.