# 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;
int[] y = new int;

PImage[] lesbian_images = new PImage;
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;
x = 300;
x = 600;
// y values
y = 0;
y = 300;
y = 600;
// make x integer
int x1 = x;
int x2 = x;
int x3 = x;
// make y integer
int y1 = y;
int y2 = y;
int y3 = y;

// 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, width/2, height/2);
if (lesbian_images.width > lesbian_images[i].height) {
lesbian_images.resize(0, height);
} else {
lesbian_images.resize(width, 0);
}
PImage crop0 = get(x, y, w, h);

//image 2
image(lesbian_images, width/2, height/2);
if (lesbian_images.width > lesbian_images.height) {
lesbian_images.resize(0, height);
} else {
lesbian_images.resize(width, 0);
}
PImage crop1 = get(x2, y1, w, h);

//image3
image(lesbian_images, width/2, height/2);
if (lesbian_images.width > lesbian_images.height) {
lesbian_images.resize(0, height);
} else {
lesbian_images.resize(width, 0);
}
PImage crop2 = get(x3, y1, w, h);

//image4
image(lesbian_images, width/2, height/2);
if (lesbian_images.width > lesbian_images.height) {
lesbian_images.resize(0, height);
} else {
lesbian_images.resize(width, 0);
}
PImage crop3 = get(x1, y2, w, h);

//image5
image(lesbian_images, width/2, height/2);
if (lesbian_images.width > lesbian_images.height) {
lesbian_images.resize(0, height);
} else {
lesbian_images.resize(width, 0);
}
PImage crop4 = get(x2, y2, w, h);

//image6
image(lesbian_images, width/2, height/2);
if (lesbian_images.width > lesbian_images.height) {
lesbian_images.resize(0, height);
} else {
lesbian_images.resize(width, 0);
}
PImage crop5 = get(x3, y2, w, h);

//image7
image(lesbian_images, width/2, height/2);
if (lesbian_images.width > lesbian_images.height) {
lesbian_images.resize(0, height);
} else {
lesbian_images.resize(width, 0);
}
PImage crop6 = get(x1, y3, w, h);

//image8
image(lesbian_images, width/2, height/2);
if (lesbian_images.width > lesbian_images.height) {
lesbian_images.resize(0, height);
} else {
lesbian_images.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, width/2, height/2);
if (lesbian_images.width > lesbian_images.height) {
lesbian_images.resize(0, height);
} else {
lesbian_images.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