Loading images in a grid view

Programming Questions

pritima

Loading images in a grid view

in Programming Questions • 1 year ago

Hi,

I would like some tips on how to view images in a grid format in Processing? Would I use an ArrayList and store all the images in there or would I just use a for Loop. Please can someone advise me on the best way to approach this solution,

Thank you.

Replies(5)

Kobby

Re: Loading images in a grid view

1 year ago

Have you tried anything yet? there are a variety of ways of handling this. You just really need a kind of collection (array, arraylist, etc) and a smartly written for loop or nested for loop that keeps track of the dimensions of the images.

pritima

Re: Loading images in a grid view

1 year ago

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

images[i] = loadImage(""+(i+1)+".jpg");

tiles[i] = new Tile(x, y, gridSpacing, images[i], i);

x += gridSpacing;

tiles[i+images.length] = new Tile(x, y, gridSpacing, images[i], i);

x += gridSpacing;

if (x > gridWidth){

y = y + gridSpacing;

x = 0;

}

This is a for loop but do you think there is a way where you can create a class grid...where you call the grid cell and input an image.

Kobby

Re: Loading images in a grid view

1 year ago

I have included a project i made a while ago that creates a grid of images from a video feed. Theres a class called positions thats just and x and a y and it gets populated from a for loop that calculates the points in the grid then the images are placed based on an array of positions.

sorry for not parsing and pulling what you need out of it i'm in a bit of a hurry right now haha but i hope this helps

Copy code

import processing.video.*;
positions[] pos = new positions[100];
int randomInd;
int imgSpotX;
int imgSpotY;
Capture cam;
int posCount = 0;
void setup() {
size(screen.width, screen.height);
frameRate(25);
cam = new Capture(this, screen.width/10, screen.height/10, 30);
//////for loop to populate the the position classes
for (int i = 0; i<width; i+=(width/10)) {
for (int j = 0; j < height; j+=(height/10)) {
pos[posCount] = new positions(i, j);
posCount++;
}
}
}
///////////////////
void draw() {
randomInd = floor(random(pos.length));
imgSpotX = pos[randomInd].x;// place image according to positions array
imgSpotY = pos[randomInd].y;//place image according to positions array
image(cam, imgSpotX, imgSpotY);
}
void captureEvent(Capture myCap) {
myCap.read();
}
void keyPressed() {
saveFrame("shot-####");
}
class positions{
public int x;
public int y;
public positions(int inX, int inY){
x = inX;
y = inY;
}
}//end of class

PhiLho

Re: Loading images in a grid view

1 year ago

" Would I use an ArrayList and store all the images in there or would I just use a for Loop."
If you use an ArrayList, you still need a for loop to display the images!
An array list isn't necessary if you know in advance the number of images and don't plan to change it.

" create a class grid...where you call the grid cell and input an image."
Why not, it can make the code tidier. But the loop you shown will still be in the grid class. Perhaps it can delegate the loading to the grid cell class, either way is fine.

About your code: why do you create two Tile objects per image?

pritima

Re: Loading images in a grid view

1 year ago

@PhiLho The reason it creates two tile objects is because I am trying to create a matching cards game, so basically it will display two random pairs and the player has to guess where the matching pairs are.

@Kobby Thank you so much for sharing that I shall have a look at it and see what I can do.

I think I'd prefer creating a class grid

Top Reply