# How to expand this grid of 9 cropped images so it works for 900?

**URL:** <https://discourse.processing.org/t/how-to-expand-this-grid-of-9-cropped-images-so-it-works-for-900/14622>\
**Category:** Coding Questions\
**Created:** [October 12, 2019, 3:30am UTC](https://discourse.processing.org/t/how-to-expand-this-grid-of-9-cropped-images-so-it-works-for-900/14622 "2019-10-12T03:30:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rebecca](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@rebecca](https://discourse.processing.org/u/rebecca)\
**Post date:** [October 12, 2019, 3:30am UTC](https://discourse.processing.org/t/how-to-expand-this-grid-of-9-cropped-images-so-it-works-for-900/14622/1 "2019-10-12T03:30:34Z")

</div>

Hi, I’m very new to coding/processing and would love help with simplifying my code so that it can be expanded easily. Right now I have a grid of 9 images that are stacked on top of each other and then “cropped” using the get() feature so that only 1/9th of each image is shown. It works how I want it to, but as you can see I did it in a messy way that is not easily scalable.

For example, you can see that I typed out the individual values for x[i] and y[i], and I also had to type out a new iteration of “get()” each time. I know so much of this is unnecessary but I am having trouble finding exactly what I should do.

Eventually I want this code to be a 30 x 30 grid using 900 images. Any help to make that happen would be SO appreciated, thanks in advance. 🙂 and yes this an art project about lesbians lol.

```auto
//MOSAIC TESTING WITH GET, 9 IMAGES, WANT 900 TOTAL.

int n = 9; // n = number of squares the canvas is divided into
int w = 300; // width of grid boxes
int h = 300; // height of grid boxes

int[] x = new int[3];
int[] y = new int[3];

PImage[] lesbian_images = new PImage[9];
PImage[] crop0, crop1, crop2, crop3, crop4, crop5, crop6, crop7, crop8;

void setup() {  
  size(900, 900);
  background(255);
  noStroke();
  
  //load all images into sketch
  for (int i = 0; i < lesbian_images.length; i ++) {
      lesbian_images[i] = loadImage("lesbian ("+i+").jpg");
  }
}

void draw() {
  noLoop();
  // x values
  x[0] = 0;
  x[1] = 300;
  x[2] = 600;
  // y values
  y[0] = 0;
  y[1] = 300;
  y[2] = 600;
  // make x integer
  int x1 = x[0];
  int x2 = x[1];
  int x3 = x[2];
  // make y integer
  int y1 = y[0];
  int y2 = y[1];
  int y3 = y[2];
  
  // now we're talking about all the images
  for (int i = 0; i < lesbian_images.length; i ++) {
  imageMode(CENTER);
  
//cropping and centering for each image! figure out how to condense later

  //image1
  image(lesbian_images[0], width/2, height/2);
  if (lesbian_images[0].width > lesbian_images[i].height) {
    lesbian_images[0].resize(0, height);
  } else {
    lesbian_images[0].resize(width, 0);
  }
  PImage crop0 = get(x[0], y[0], w, h);
  
  //image 2
  image(lesbian_images[1], width/2, height/2);
  if (lesbian_images[1].width > lesbian_images[1].height) {
    lesbian_images[1].resize(0, height);
  } else {
    lesbian_images[1].resize(width, 0);
  }
  PImage crop1 = get(x2, y1, w, h);
  
  //image3
  image(lesbian_images[2], width/2, height/2);
  if (lesbian_images[2].width > lesbian_images[2].height) {
    lesbian_images[2].resize(0, height);
  } else {
    lesbian_images[2].resize(width, 0);
  }
  PImage crop2 = get(x3, y1, w, h);
  
  //image4
  image(lesbian_images[3], width/2, height/2);
  if (lesbian_images[3].width > lesbian_images[3].height) {
    lesbian_images[3].resize(0, height);
  } else {
    lesbian_images[3].resize(width, 0);
  }
  PImage crop3 = get(x1, y2, w, h);
  
  //image5
  image(lesbian_images[4], width/2, height/2);
  if (lesbian_images[4].width > lesbian_images[4].height) {
    lesbian_images[4].resize(0, height);
  } else {
    lesbian_images[4].resize(width, 0);
  }
  PImage crop4 = get(x2, y2, w, h);
  
  //image6
  image(lesbian_images[5], width/2, height/2);
  if (lesbian_images[5].width > lesbian_images[5].height) {
    lesbian_images[5].resize(0, height);
  } else {
    lesbian_images[5].resize(width, 0);
  }
  PImage crop5 = get(x3, y2, w, h);
  
  //image7
  image(lesbian_images[6], width/2, height/2);
  if (lesbian_images[6].width > lesbian_images[6].height) {
    lesbian_images[6].resize(0, height);
  } else {
    lesbian_images[6].resize(width, 0);
  }
  PImage crop6 = get(x1, y3, w, h);
  
  //image8
  image(lesbian_images[7], width/2, height/2);
  if (lesbian_images[7].width > lesbian_images[7].height) {
    lesbian_images[7].resize(0, height);
  } else {
    lesbian_images[7].resize(width, 0);
  }
  PImage crop7 = get(x2, y3, w, h);
  
  //image9 //for last image, add filled rectangle to block out the other images
  image(lesbian_images[8], width/2, height/2);
  if (lesbian_images[8].width > lesbian_images[8].height) {
    lesbian_images[8].resize(0, height);
  } else {
    lesbian_images[8].resize(width, 0);
  }
  PImage crop8 = get(x3, y3, w, h);
  fill(255);
  rect(0, 0, 900, 900);
  image(crop0, x1+150, y1+150, w, h); // must add 150 to counteract the center image mode
  image(crop1, x2+150, y1+150, w, h);
  image(crop2, x3+150, y1+150, w, h);
  image(crop3, x1+150, y2+150, w, h);
  image(crop4, x2+150, y2+150, w, h);
  image(crop5, x3+150, y2+150, w, h);
  image(crop6, x1+150, y3+150, w, h);
  image(crop7, x2+150, y3+150, w, h);
  image(crop8, x3+150, y3+150, w, h);
  }
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 12, 2019, 4:31am UTC](https://discourse.processing.org/t/how-to-expand-this-grid-of-9-cropped-images-so-it-works-for-900/14622/2 "2019-10-12T04:31:59Z")

</div>

-step1-  
some math for a GRID stored to a array of class of rectangles.

( i know that has not anything to do with pictures, just with the place and size they should be shown? )

```auto
int x=10, y=x, w=0, h=w, off=3, grid=30, many=grid*grid;

Rect[] myGrid = new Rect[many];

void set_wh() {
  // use x,y,grid as master and auto adjust rectangles (w,h) to window:
  println(" width= "+width+", height= "+height+", grid= "+grid+", off= "+off);
  w = ( width - 2 * x ) / grid -off;   
  println(" w= "+w+", x= "+x+", ( grid * ( w + off ) + 2 * x )= "+( grid*( w+off ) +2*x));
  h = ( height - 2 * y ) / grid -off;
  println(" h= "+h+", y= "+y+", ( grid * ( h + off ) + 2 * y )= "+( grid*( h+off ) +2*y));
}

void setup() {
  size(800, 800);
  set_wh();
  for ( int i =0; i< myGrid.length; i++ ) myGrid[i] = new Rect( x+(i%grid)*( w+off), y+(floor(i/grid))*(h+off), w, h, color(255, random(255), 0) );
}

void draw() {
  background(0);
  for ( int i =0; i< myGrid.length; i++ ) myGrid[i].display();
}

class Rect {
  color c;
  float xpos, ypos, w, h;

  Rect(float _xpos, float _ypos, float _w, float _h, color _c ) {
    c = _c;
    w=_w;
    h=_h;
    xpos = _xpos;
    ypos = _ypos;

  }

  void display() {
    fill(c);
    rect(xpos, ypos,w,h);
  }
}

```

try please, is that “tiles” way how you want to show the picture parts? that was not clear from your wording for me

-step2-  
transfer your methods into the class

```auto
// _______________________________________ GRID array of class
int x=10, y=x, w=0, h=w, off=3, grid=2, many=grid*grid; // adjust grid ( only if picture files available! )

Rect[] myGrid = new Rect[many]; // grid array

void set_wh() { // use x,y,grid as master and auto adjust rectangles (w,h) to window:
  println(" width= "+width+", height= "+height+", grid= "+grid+", off= "+off);
  w = ( width - 2 * x ) / grid -off;   
  println(" w= "+w+", x= "+x+", ( grid * ( w + off ) + 2 * x )= "+( grid*(w+off)+2*x) );
  h = ( height - 2 * y ) / grid -off;
  println(" h= "+h+", y= "+y+", ( grid * ( h + off ) + 2 * y )= "+( grid*(h+off)+2*y) );
}

void set_grid() {
  set_wh();
  for ( int i =0; i< myGrid.length; i++ ) {  
    myGrid[i] = new Rect( x+(i%grid)*( w+off), y+(floor(i/grid))*(h+off), w, h, color(255, random(255), 0), i );
    myGrid[i].img = loadImage(myGrid[i].file); // load the files from sketchpath or here /data/
    myGrid[i].gsize(); // map picture to canvas
    myGrid[i].gcrop(); // get part of picture
  }
}

void draw_grid() {
  for ( int i =0; i< myGrid.length; i++ ) myGrid[i].display();
}

class Rect {
  color c;
  float xpos, ypos, w, h;
  int id;
  String file;
  PImage img, crop;

  Rect(float _xpos, float _ypos, float _w, float _h, color _c, int _id ) {
    c = _c;
    w=_w;
    h=_h;
    xpos = _xpos;
    ypos = _ypos;
    id = _id;
    file = "picture_"+id+".jpg";
  }

  void display() {
    // fill(c);
    // rect(xpos, ypos, w, h);
    image(crop, xpos, ypos);
  }

  void gsize() {
    if (img.width > img.height) img.resize(0, height);
    else img.resize(width, 0);
  }

  void gcrop() {
    int dx=(int)xpos, dy=(int)ypos, dw=(int)w, dh=(int)h;
    crop = img.get(dx, dy, dw, dh);
  }
} // end class

// _______________________________________ main
void setup() {
  size(800, 800);
  set_grid();
  noLoop();
}

void draw() {
  background(0);
  draw_grid();
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 12, 2019, 2:18pm UTC](https://discourse.processing.org/t/how-to-expand-this-grid-of-9-cropped-images-so-it-works-for-900/14622/3 "2019-10-12T14:18:38Z")

</div>

> [@rebecca](#):
>
> PImage crop0, crop1, crop2, crop3, crop4, crop5, crop6, crop7, crop8;

This is where you went wrong.

crop should be an array like lesbian\_images - instead you tread crop1 etc. like singe images.

That makes your code very long.

Instead use for loops on crop like with lesbian\_images

Once you got this, your code be much shorter and can easily made into 30x30 grid

---

<div class="post-metadata">

**Author:** ![rebecca](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@rebecca](https://discourse.processing.org/u/rebecca)\
**Post date:** [October 12, 2019, 8:48pm UTC](https://discourse.processing.org/t/how-to-expand-this-grid-of-9-cropped-images-so-it-works-for-900/14622/4 "2019-10-12T20:48:26Z")

</div>

Thank you SO MUCH! It works perfectly and is exactly what I was envisioning. And thank you for your notes explaining what was going on along the way, I understand better now!