# How to load images using an arrayList?

**URL:** <https://discourse.processing.org/t/how-to-load-images-using-an-arraylist/15263>\
**Category:** Beginners\
**Created:** [November 5, 2019, 7:34pm UTC](https://discourse.processing.org/t/how-to-load-images-using-an-arraylist/15263 "2019-11-05T19:34:30Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![B\_s](https://avatars.discourse-cdn.com/v4/letter/b/85f322/32.png) [@B\_s](https://discourse.processing.org/u/B_s)\
**Post date:** [November 5, 2019, 7:34pm UTC](https://discourse.processing.org/t/how-to-load-images-using-an-arraylist/15263/1 "2019-11-05T19:34:31Z")

</div>

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:

```auto
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();
}
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 5, 2019, 8:08pm UTC](https://discourse.processing.org/t/how-to-load-images-using-an-arraylist/15263/2 "2019-11-05T20:08:49Z")

</div>

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

```auto

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

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 5, 2019, 9:04pm UTC](https://discourse.processing.org/t/how-to-load-images-using-an-arraylist/15263/3 "2019-11-05T21:04:42Z")

</div>

> [@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](https://discourse.processing.org/t/repeating-and-randomizing-string-arrays/10811/6):
>
> 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. 😉

---

<div class="post-metadata">

**Author:** ![B\_s](https://avatars.discourse-cdn.com/v4/letter/b/85f322/32.png) [@B\_s](https://discourse.processing.org/u/B_s)\
**Post date:** [November 8, 2019, 5:13pm UTC](https://discourse.processing.org/t/how-to-load-images-using-an-arraylist/15263/6 "2019-11-08T17:13:41Z")

</div>

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:

```auto
  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.

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

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 8, 2019, 5:40pm UTC](https://discourse.processing.org/t/how-to-load-images-using-an-arraylist/15263/7 "2019-11-08T17:40:14Z")

</div>

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

Can you improve it?

Can you see how this works?

```auto

// 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;
}
//

```

---

<div class="post-metadata">

**Author:** ![B\_s](https://avatars.discourse-cdn.com/v4/letter/b/85f322/32.png) [@B\_s](https://discourse.processing.org/u/B_s)\
**Post date:** [November 8, 2019, 6:32pm UTC](https://discourse.processing.org/t/how-to-load-images-using-an-arraylist/15263/8 "2019-11-08T18:32:50Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 8, 2019, 10:41pm UTC](https://discourse.processing.org/t/how-to-load-images-using-an-arraylist/15263/9 "2019-11-08T22:41:32Z")

</div>

> [@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