# Grid collage of random PImage

**URL:** https://discourse.processing.org/t/grid-collage-of-random-pimage/40447
**Category:** Coding Questions
**Created:** [January 4, 2023, 11:22pm UTC](https://discourse.processing.org/t/grid-collage-of-random-pimage/40447 "2023-01-04T23:22:39Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)
#### Post date: [January 4, 2023, 11:22pm UTC](https://discourse.processing.org/t/grid-collage-of-random-pimage/40447/1 "2023-01-04T23:22:39Z")

</div>

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:

 ![Screen Shot 2023-01-04 at 3.20.25 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/b/3b5d584f45a8e8344b3f3fdc64acf12caa73d9b6.jpeg)

Goal:

 ![Screen Shot 2023-01-04 at 3.13.02 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/f/bf51e37d01eb70c5ece354011736c276fe7a00f3.jpeg)

Code

```auto
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();
}

```

---

<div class="post-metadata">

### Author: ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)
#### Post date: [January 7, 2023, 6:52am UTC](https://discourse.processing.org/t/grid-collage-of-random-pimage/40447/2 "2023-01-07T06:52:54Z")

</div>

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)

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

```