How to load images using an arrayList?

[B_s]

Hello,

Complete newbie to processing so any help is appreciated and apologies for my lack of language knowledge.

I am trying to make a grid of 9 images that, when keyPressed, randomises the order of the images. I have used an image array to load the images and have the images appearing where I want them to. However, I am getting duplicates when they randomise. I only understand how I could use an arrayList to solve this with a list of numbers. No idea how to do it for images and how to load images into an arrayList?

Here is the code I have:

PImage [] img = new PImage[9];

void setup()
{
  //fullScreen();
  size(2500, 2500);
  for (int i=0; i<img.length; i++) {
    img[i] = loadImage("img"+i+".jpg");
  }
  noLoop();
  background (0);
}
 
void draw()

{
  image(img[(int)random(img.length)], 0, 0);
  image(img[(int)random(img.length)], 750, 0);
  image(img[(int)random(img.length)], 1500, 0);
  image(img[(int)random(img.length)], 0, 750);
  image(img[(int)random(img.length)], 750, 750);
  image(img[(int)random(img.length)], 1500, 750);
  image(img[(int)random(img.length)], 0, 1500);
  image(img[(int)random(img.length)], 750, 1500);
  image(img[(int)random(img.length)], 1500, 1500);
}

void keyPressed() {
 if (key == ' '){
redraw();
}
}

[Chrisir]

Here is a way with ArrayList and then shuffling the thing - see function shuffle().

I also use a nested for loop that calculates the positions of the images in the grid - see function draw_grid(). That is more flexible than what you had in draw().

(code snippets from the forum)

Welcome to the forum, it’s a great community!

Chrisir

// https://discourse.processing.org/t/how-to-load-images-using-an-arraylist/15263

ArrayList<PImage> img = new ArrayList();

void setup() {
  //fullScreen();
  size(1200, 900);
  // load all 
  for (int i=0; i<9; i++) {
    img.add ( loadImage("img"+i+".jpg") );
  }
  // shuffle 
  // img=shuffle( img );
   
  background (0);
}

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

  fill(255);
  text("Hit Space Bar to shuffle", 
    13, height-20);
}

void draw_grid() {
  int x0 = 50, y0 = x0, // dist from border 
    w = 310, h = w,      // width and height of a cell / image 
    off = 0;                   // offset between images 
  
  int k=0; 
  // nested for loop makes for columns and rows 
  for (int i = 0; i < 3; i++)
    for (int j = 0; j < 3; j++) {
      // we calculate the position on the fly 
      image(img.get(k), 
        x0+i*(w+off), y0+j*(h+off));
      k++;
    }
}

// shuffle in-place
ArrayList<PImage> shuffle (ArrayList<PImage> arrL1) {
  for (int i=0; i<arrL1.size(); i++) {
    int randomPosition = int(random(arrL1.size()));
    // swap image at position i with image at position randomPosition
    PImage temp = arrL1.get(i);
    arrL1.set(i, arrL1.get(randomPosition));
    arrL1.set(randomPosition, temp);
  }
  return arrL1;
}

void keyPressed() {
  if (key == ' ') {
    // shuffle 
    img=shuffle( img );
  }
}
//

[GoToLoop]

@B_s

I only understand how I could use an ArrayList to solve this with a list of numbers.

Use the 2nd shuffle() version from the link below:

Repeating and randomizing string arrays

The shuffle() function from the 1st link I’ve posted is for arrays of datatype int only: @SafeVarargs final int[] shuffle(final int... arr) { if (arr == null) return null; int idx = arr.length; while (idx > 1) { final int rnd = (int) random(idx--), tmp = arr[idx]; arr[idx] = arr[rnd]; arr[rnd] = tmp; } return arr; } For object-typed arrays, we need to convert it, like this: @SafeVarargs final <T> T[] shuffle(final T... arr) { if (arr == null) return null; …

It can shuffle any non-primitive array.

[B_s]

Thank you for this! Works perfectly!

I am now trying to enlarge an image when hovered over.

I have added the following to the beginning of the code:

int FULL_SIZE = 1200;

Originally I had this to get a specific image to enlarge:

  if ((mouseX > 0 && mouseX < 600)&&(mouseY>0 && mouseY<600)) {
    image(img[1], 500, 500, FULL_SIZE, FULL_SIZE);
  }

Is the following then the right way to get the random image placed there and enlarge it? I’m just struggling to find exactly where to put it.

 if ((mouseX > 0 && mouseX < 600)&&(mouseY>0 && mouseY<600)) {
    image(img.get(), 500, 500, FULL_SIZE, FULL_SIZE);
  }

[Chrisir]

here is the way of doing it… not so nice…

Can you improve it?

Can you see how this works?

// https://discourse.processing.org/t/how-to-load-images-using-an-arraylist/15263

ArrayList<PImage> img = new ArrayList();

// -------------------------------------------------------------------
// processing core functions 

void setup() {
  //fullScreen();
  size(1500, 900);

  // load all 
  for (int i=0; i<9; i++) {
    PImage temp = loadImage("img"+i+".jpg"); // load 
    temp.resize(290, 0);   // resize ("290" = image width, "0" means keep ratio) 
    img.add ( temp );  // add
  }

  // shuffle (optional) 
  img=shuffle( img );

  background (0);
}

void draw() {
  background (0);
  draw_grid(img);
  statusBar("Hit Space Bar to shuffle");
}

// -------------------------------------------------------------------
// Inputs 

void keyPressed() {
  if (key == ' ') {
    // shuffle 
    img=shuffle( img );
  }
}

// -------------------------------------------------------------------
// Tools

void statusBar(String text1) {
  // status Bar
  fill(98);  // gray 
  rect(0, height-23, 
    width, 24);

  fill(255); // white
  text(text1, 
    13, height-6);
}

void draw_grid(ArrayList<PImage> arrL1) {

  int x0 = 50, y0 = x0, // distance from border 
    w = 310, h = w, // width and height of a cell / image 
    off = 0;            // offset between images 

  int k=0;  // counter k as index 
  // nested for loop makes for columns and rows
  for (int i = 0; i < 3; i++) {
    for (int j = 0; j < 3; j++) {

      if (k>=arrL1.size())
        return; // leave here

      // we calculate the position on the fly
      // we check if mouse is inside the small image 
      if (mouseX >  x0+i*(w+off)  && 
        mouseX <  x0+i*(w+off) + arrL1.get(k).width &&
        mouseY> y0+j*(h+off) &&
        mouseY< y0+j*(h+off) + arrL1.get(k).height ) {
        // BIG image 
        image(arrL1.get(k), 
          x0+i*(w+off), 
          y0+j*(h+off), 
          400, 400 );
      } else {
        // normal image     
        image(arrL1.get(k), 
          x0+i*(w+off), 
          y0+j*(h+off));
      }
      k++;
    }//for
  }//for
}

ArrayList<PImage> shuffle (ArrayList<PImage> arrL1) {
  // shuffle 
  for (int i=0; i<arrL1.size(); i++) {
    int randomPosition = int(random(arrL1.size()));
    // swap image at position i with image at position randomPosition
    PImage temp = arrL1.get(i);
    arrL1.set(i, arrL1.get(randomPosition));
    arrL1.set(randomPosition, temp);
  }
  return arrL1;
}
//

[B_s]

Hi, I can definitely see how it works! I’m new to coding so it might take a while to neaten it up haha. There isn’t anyway to bring the enlarged image to the foreground is there?

[Chrisir]

@B_s

There isn’t anyway to bring the enlarged image to the foreground is there?

Yes. you could store which image has to be enlarged and draw that after the for loop.

Can you show your attempt?

another problem

I see another problem: The scaling doesn’t preserve the aspect ration of the image!

(resize all images in setup into a second array and use this after the for loop)

Chrisir