Grid collage of random PImage

[asymmetric]

Hi Processing community!

I just created the following slit collage which randomly places areas of the image on the x axis. How do I make my image into a grid of random areas of the image by adding the y axis?

Now:

Goal:

Code

PImage img;

void setup(){
  size(1800,800);
  img = loadImage("3d.png");
  img.resize(1800,800);
}

void draw(){
  background(0);
  int w = 10;
  for(int x = 0; x < width; x += w){
    int r = int(random(0,width-w));
    copy(img, r, 0, w, height, x, 0, w, height);
    noFill();
    stroke(0);
    rect(x, 0, w, height);
  }
  noLoop();
}

[SomeOne]

You have now one loop to go through you image horizontally. So to do something similar in 2d you need two loops, one for x axis and one for y axis to split the image in suitably sizes pieces. Something like this: (it’s untested code written live for the response)

int gridsize = 20
for (int x = 0; x < width; x += gridsize){
    for (int y = 0; y < height; y += gridsize){
        int r1 = int(random(0,width/gridsize));
        int r2 = int(random(0,height/gridsize));
        copy(img, r1, r2, gridsize, gridsize, x*gridsize, y*gridsize, gridsize, gridsize);
    }
}