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

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. :slight_smile: and yes this an art project about lesbians lol.

//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);
  }
}
1 Like

-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? )

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

//_______________________________________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();
}


3 Likes

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

1 Like

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!

2 Likes