How about something like this?

Code Example

1. int blockSize = 20;
2. int gridSize = blockSize * 4;
3.  
4. void setup() {
5.   size(550, 550);
6.   frameRate(3);
7. }
8.  
9. void draw() {
10.   background(255);
11.   translate(5, 5);
12.   for (int y=0; y<7; y++) {
13.     for (int x=0; x<7; x++) {
14.       pushMatrix();
15.       translate(x*gridSize, y*gridSize);
16.       squareGrid();
17.       popMatrix();
18.     }
19.   }
20. }
21.  
22. void squareGrid() {
23.   noStroke();
24.   for (int y=0; y<3; y++) {
25.     for (int x=0; x<3; x++) {
26.       float rnd = random(1);
27.       if (rnd > 0.5) { fill(0); } else { fill(0, 0); }
28.       rect(x*blockSize, y*blockSize, blockSize, blockSize);
29.     }
30.   }
31. }

thanks alot! i will try to understand what is going on in your code
fo me it is important that all 49 variations is used

I see I have been beaton to it but even so I offer my solution as well. It makes use of classes and objects after all you did say

i am pretty green with using objects but i guess i will need to use them

Although you can get away without using them having a class to represent a 3x3 pattern is the best way to do this as it will simplify the creation and using of multiple tiles.

If you examine the code you will see a class called Tile which stores the 3x3 pattern, the tile's x/y screen position and the scale to use when displaying the tile. The class also has methods we can use to change the tile's display position setPosition and to change the scale factor setScaleFactor. The class also has a method called drawTile which is responsible for the actual darwing of the tile, notice that the code inside the draw method is very simple because the hard work is done inside the class. The 3x3 pattern is defined in a string of zero and ones, where a 1 is white and 0 is black. The order is left-to-rigth, top-to-bottom.

This sketch will create 2 different tiles and draw them in different parts of the screen with different scales.

1. Tile t0, t1;
2. 
   
3. void setup() {
4.   size(400, 400);
5.   t0 = new Tile("010111010", 200, 10);
6.   t0.setScaleFactor(10);
7.   t1 = new Tile("100110011", 50, 200);
8.   t1.setScaleFactor(20);
9. }
10. 
    
11. void draw() {
12.   background(0, 200, 0);
13.   t0.drawTile();
14.   t1.drawTile();
15. }
16. 
    
17. public class Tile {
18.   int px, py; // Top left corner pixel position
19.   float scaleFactor = 10;
20.   String pattern;
21.   int fcolor, bcolor;
22.   public Tile(String tilePattern, int x, int y) {
23.     pattern = tilePattern;
24.     px = x;
25.     py = y;
26.     fcolor = color(255);
27.     bcolor = color(0);
28.   }
29. 
    
30.   public void setPosition(int x, int y) {
31.     px = x;
32.     py = y;
33.   }
34. 
    
35.   public void setScaleFactor(float sf) {
36.     scaleFactor = sf;
37.   }
38. 
    
39.   public void drawTile() {
40.     pushMatrix();
41.     translate(px, py);
42.     scale(scaleFactor);
43.     noStroke();
44.     for (int i = 0; i < pattern.length(); i++) {
45.       int gx = i % 3;
46.       int gy = i / 3;
47.       if (pattern.charAt(i) == '0')
48.         fill(bcolor);
49.       else
50.         fill(fcolor);
51.       rect(gx, gy, 1, 1);
52.     }
53.     popMatrix();
54.   }
55. }

hey! thank you, this is very helpful,  i will study your aproach

while we there maybe i can also dear to ask
how to set things up
so every square in the grid is random slice from several pictures?

You can use a similar approach except the class would be used to used to hold and display a PImage object.

The PictureTile class below is a modified version of the Tile class earlier.

1. public class PictureTile {
2.   int px, py; // Top left corner pixel position
3.   float scaleFactor = 1;
4.   PImage img;
5. 
   
6.   public PictureTile(PImage tileImage, int x, int y) {
7.     img = tileImage;
8.     px = x;
9.     py = y;
10.   }
11. 
    
12.   public void setPosition(int x, int y) {
13.     px = x;
14.     py = y;
15.   }
16. 
    
17.   public void setScaleFactor(float sf) {
18.     scaleFactor = sf;
19.   }
20. 
    
21.   public void drawTile() {
22.     pushMatrix();
23.     translate(px, py);
24.     scale(scaleFactor);
25.     image(img, 0, 0, img.width, img.height);
26.     popMatrix();
27.   }
28. }

You would have to create the actual images to use but it is basically the same approach.

sorry, i am confused how to load images in this code, can you please post the whole thing?
i thought i should load image after
PImage img;
img = loadImage("something.jpg");// like this

I know it's a different code, but it does pretty much the same thing and shows how you could load you images.

1. int rows = 7;
   int cols = 7;
   int gridSize;
   int variation = 0;
   PImage[] images;
   PImage tile;
   int x, y, w, h, imageIndex;
   
   void setup() {
     size(540, 540);
     gridSize = width/(3*cols+cols-1);
     fill(0);
     noLoop();
   
     // load and resize images
     images = new PImage[2];
     images[0] = loadImage("img1.jpg");
     images[1] = loadImage("img2.jpg");
     images[0].resize(width, height);
     images[1].resize(width, height);
   }
   
   void draw() {
     background(255);
    
     //loop through rows
     for (int i =0; i<rows; i++) {
      
       //loop through columns
       for (int j = 0; j<cols; j++) {
        
         // loop through the 9 squares
         for (int k =0; k<9; k++) {
          
           // get one of the last 9 bits of "variation"
           int value = (variation >> k) & 1  ;
   
           if (value > 0 ) {
             // calculate position
             x = j*gridSize*4 + (k%3)*gridSize;
             y = i*gridSize*4 + (k/3)*gridSize;
            
             // one image from the images-array
             imageIndex = (int)random(images.length);
            
             // grap a small section from the image
             tile = images[imageIndex].get(x, y, gridSize, gridSize);
            
             // draw it
             image(tile, x, y, gridSize, gridSize);
           }
         }
        
         // get next variation
         variation++;
       }
     }
   }
   
   void mousePressed() {
     redraw();
   }
   

thanks everybody again for helping! a lot to learn here
i have blurry idea that every square in the grid will triger tiny sound samples via OSC in external sound software

so keeping that in mind, structure sugested by quarks seems very nice
where every grid combination is represented by string
i could write something like
if (000100000) {send OSC}
if (100100000) {send OSC}
etc.

I had a different approach. When I saw that the pieces of each tile could be either black or white, I thought "binary".

fo me it is important that all 49 variations is used

For a 3x3 grid there are actually 512 different patterns. The sketch below creates an array of 512 tiles each with a different pattern and will display each one in turn. The frame rate is set to 3 so it will take approximately 3.5 minutes to show them all.

i have blurry idea that every square in the grid will triger tiny sound samples via OSC in external sound software

The advantage of using a class to represent a tile is that the class can be extended to add things such as sound, color control etc. whithout crashing existing code that uses the class. For instance adding sound should not affect any code that draws the tile.

1. Tile[] tile = new Tile[512];
2. int tn = 0;
3. 
   
4. void setup() {
5.   size(300, 320);
6.   for (int i = 0; i < 512; i++) {
7.     String pattern = toPattern(i);
8.     tile[i] = new Tile(pattern, 0, 20);
9.     tile[i].setScaleFactor(100);
10.   }
11.   frameRate(3);
12. }
13. 
    
14. void draw() {
15.   background(160, 200, 200);
16.   fill(0);
17.   text("Tile no: " + tn, 10, 16);
18.   text("Pattern: " + tile[tn].getPattern(), 100, 16);
19.   tile[tn].drawTile();
20.   tn = (tn + 1) % 512;
21. }
22. 
    
23. String toPattern(int n) {
24.   int v = 256;
25.   String p = "";
26.   while (v > 0) {
27.     p += ((n & v) == 0)?"0" : "1";
28.     v /= 2;
29.   }
30.   return p;
31. }
32. 
    
33. public class Tile {
34.   int px, py; // Top left corner pixel position
35.   float scaleFactor = 10;
36.   String pattern;
37.   int fcolor, bcolor;
38. 
    
39.   public Tile(String tilePattern, int x, int y) {
40.     pattern = tilePattern;
41.     px = x;
42.     py = y;
43.     fcolor = color(255);
44.     bcolor = color(0);
45.   }
46. 
    
47.   public String getPattern() {
48.     return pattern;
49.   }
50. 
    
51.   public void setPosition(int x, int y) {
52.     px = x;
53.     py = y;
54.   }
55. 
    
56.   public void setScaleFactor(float sf) {
57.     scaleFactor = sf;
58.   }
59. 
    
60.   public void drawTile() {
61.     pushMatrix();
62.     translate(px, py);
63.     scale(scaleFactor);
64.     noStroke();
65.     for (int i = 0; i < pattern.length(); i++) {
66.       int gx = i % 3;
67.       int gy = i / 3;
68.       if (pattern.charAt(i) == '0')
69.         fill(bcolor);
70.       else
71.         fill(fcolor);
72.       rect(gx, gy, 1, 1);
73.     }
74.     popMatrix();
75.   }
76. }

@allonestring
thank you, in my "vision" every 3x3 grid has also independent change speed not changing alltogether in sync
i wonder how to implement that

@quarks
awesome! i will try to incorprate your version with pic slices into this
btw how to calculate how many variations will be in the grid, is there a formula?
also i notice you use public before class and functons, never saw that before

all the best, k

so i tried to modify last code by quarks a bit
i would like to make 7x7 tiles with seperate random factor for each

i made 3 here but in the stupid way
it is probably doable easy with for loops and arrays, i just dont see how yet...

for example how do one make array from something like this?
int r=int(random(tile.length));

and then use something like
tile[r[0]].drawTile();
tile[r[1]].drawTile();

and probably i dont need to make new array for each tile, do i?

1. Tile[] tile = new Tile[512],tile2 = new Tile[512],
   tile3 = new Tile[512];
   
   int tn = 0;
   
   void setup() {
     size(300, 320);
     for (int i = 0; i < 512; i++) {
       String pattern = toPattern(i);
       tile[i] = new Tile(pattern, 0, 20);
       tile[i].setScaleFactor(20);
       tile2[i] = new Tile(pattern,80, 20);
       tile2[i].setScaleFactor(20);
       tile3[i] = new Tile(pattern,160, 20);
       tile3[i].setScaleFactor(20);
     }
     frameRate(2);
   }
   
   void draw() {
     background(160, 200, 200);
     fill(0);
    
     int r=int(random(tile.length));
     int r2=int(random(tile.length));
     int r3=int(random(tile.length));
    
    
    
     tile[r].drawTile();
     tile2[r2].drawTile();
     tile3[r3].drawTile();
    
   }
   
   String toPattern(int n) {
     int v = 256;
     String p = "";
     while (v > 0) {
       p += ((n & v) == 0)?"0" : "1";
       v /= 2;
     }
     return p;
   }
   
   public class Tile {
     int px, py; // Top left corner pixel position
     float scaleFactor = 10;
     String pattern;
     int fcolor, bcolor;
   
     public Tile(String tilePattern, int x, int y) {
       pattern = tilePattern;
       px = x;
       py = y;
       fcolor = color(255);
       bcolor = color(0);
     }
   
     public String getPattern() {
       return pattern;
     }
   
     public void setPosition(int x, int y) {
       px = x;
       py = y;
     }
   
     public void setScaleFactor(float sf) {
       scaleFactor = sf;
     }
   
     public void drawTile() {
       translate(px, py);
       scale(scaleFactor);
       noStroke();
       for (int i = 0; i < pattern.length(); i++) {
         int gx = i % 3;
         int gy = i / 3;
         if (pattern.charAt(i) == '0')
           fill(bcolor);
         else
           fill(fcolor);
         rect(gx, gy, 1, 1);
       }
       resetMatrix();
     }
   }
   
   

Hi,

the number of combinations can be calculates easily: each "tile" has 9 squares and each square can have two states(black or white), so the number of combinations is 2^9 = 512

Using arrays for the multiple tiles is a good idea, but might be enough to create only 49 tiles and change their patterns on every frame.
And i changed some parts because i think there is no need to create strings.
0 is equal to binary 000000000
and 511 is equal to binary 111111111

1. int rows = 7;
   int cols = 7;
   Tile[] tile = new Tile[rows*cols];
   
   void setup() {
     size(350, 350);
     for (int j =0 ; j< rows*cols; j++) {
       tile[j] = new Tile((int)random(512), j%cols*50, j/rows*50);
     }
     frameRate(2);
   }
   
   void draw() {
     background(160, 200, 200);
     fill(0);
   
     for (int j =0 ; j< rows*cols; j++) {
         tile[j].pattern = int(random(512));
         tile[j].drawTile();
     }
   }
   
   
   public class Tile {
     int px, py; // Top left corner pixel position
     float scaleFactor = 10;
     int pattern;
     int fcolor, bcolor;
   
     public Tile(int tilePattern, int x, int y) {
       pattern = tilePattern;
       px = x;
       py = y;
       fcolor = color(255);
       bcolor = color(0);
     }
   
     public int getPattern() {
       return pattern;
     }
   
     public void setPosition(int x, int y) {
       px = x;
       py = y;
     }
   
     public void setScaleFactor(float sf) {
       scaleFactor = sf;
     }
   
     public void drawTile() {
       translate(px, py);
       scale(scaleFactor);
       noStroke();
       for (int i = 0; i < 9; i++) {
         int gx = i % 3;
         int gy = i / 3;
         // extract the i-th bit from the right and see if it is 0
         if (((pattern >> i ) & 1) == 0)
           fill(bcolor);
         else
           fill(fcolor);
         rect(gx, gy, 1, 1);
       }
       resetMatrix();
     }
   }
   

I updated my code (= fiddled with it) quite a lot after first posting.

> the number of combinations can be calculates easily: each "tile" has 9 squares and each square
> can have two states(black or white), so the number of combinations is 2^9 = 512

those 49 in that picture are all distinct - no two are the same INCLUDING rotated versions. it's not just a case of all possible combinations.

wow! alot to study here, i really apreciate it
@allonestring
thank you very much, this is very close to what i had in mind
next step would be using random slices from pictures instead of colors
i need to study your code more to understand what does what
best, k

You're welcome - it was fun!

What kooogy said is right. If you consider rotated versions of a pattern to be equal, then this is more complex.
I found 140 version, that are different even when you rotate them.
Here is the code i used, (go through all possible patterns, rotate them and check if there are duplicates.)
But it is not very elegant, so if someone has a better solution to find these "unique" patterns, i would love to know.

1. int rows = 10;
   int cols = 14;
   float gridSize = 10;
   
   int[] allPatterns = new int[512];
   int[] uniquePatterns = new int[0];
   
   void setup() {
     size(700, 500);
   
     // loop over all variations
     for (int i = 0; i<allPatterns.length; i++) {
       // if pattern has not been marked as duplicate...
       if (allPatterns[i]>-1) {
         // mark rotated versions as duplicate
         for (int j = 1; j<= 3; j++) {
           int val = rotatePattern90(i, j);
           if (val > i) {
             allPatterns[val] = -1;
           }
         }
       }
     }
     // collect unique patterns
     for (int k =0; k<allPatterns.length; k++) {
       if (allPatterns[k]>-1) {
         uniquePatterns = append(uniquePatterns, k);
       }
     }
     println("Number of unique patterns: "+uniquePatterns.length);
     noLoop();
   }
   
   void draw() {
     background(50);
     for (int i = 0; i< uniquePatterns.length; i++) {
       drawPattern(uniquePatterns[i], (i%cols)*gridSize*5, (i/cols)*gridSize*5);
     }
   }
   
   // draws a pattern
   void drawPattern(int pattern, float x, float y) {
     for (int k =0; k<9; k++) {
       int value = (pattern >> k) & 1  ;
       if (value > 0 ) {
         fill(0);
       }
       else {
         fill(255);
       }
       rect(x+(k%3)*gridSize, y+ (k/3)*gridSize, gridSize, gridSize);
     }
   }
   
   // rotates the pattern n-times by 90 degree
   int rotatePattern90(int pattern, int num) {
     int value = pattern;
     int[] bits = new int[9];
     for (int i = 0 ; i< num; i++) {
       bits[0] = (value >> 2) & 1;
       bits[1] = (value >> 5) & 1;
       bits[2] = (value >> 8) & 1;
       bits[3] = (value >> 1) & 1;
       bits[4] = (value >> 4) & 1;
       bits[5] = (value >> 7) & 1;
       bits[6] = (value >> 0) & 1;
       bits[7] = (value >> 3) & 1;
       bits[8] = (value >> 6) & 1;
       value = 0;
       for (int j = 0; j < bits.length; j++) {
         value += bits[j] << (8-j);
       }
     }
     return value;
   }