# 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. 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();

for (int i = 0; i < lesbian_images.length; i ++) {
}
}

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