# Map random images to elements individually

**URL:** <https://discourse.processing.org/t/map-random-images-to-elements-individually/36022>\
**Category:** Coding Questions\
**Created:** [March 30, 2022, 11:23am UTC](https://discourse.processing.org/t/map-random-images-to-elements-individually/36022 "2022-03-30T11:23:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![oli7er](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/oli7er/32/16085_2.png) [@oli7er](https://discourse.processing.org/u/oli7er)\
**Post date:** [March 30, 2022, 11:23am UTC](https://discourse.processing.org/t/map-random-images-to-elements-individually/36022/1 "2022-03-30T11:23:37Z")

</div>

Hi everyone,

I am trying to map randomly selected images to a trail of waving rectangles. Originally I had the pictures loaded through a for loop, which scrolled through the file names, but this looked too organised. So, I ended up with this, which no longer has each of the rectangles displaying a different image but instead all of them flickering simultaneously.  
⠀

![randomWaveIMGs](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/0/d062bac791026366645ffddba423377d073c0a31.jpeg)  
⠀

The original code is here:

> **[int numImg = 107; ArrayList vecs; PImage\[\] img = new PIma - Pastebin.com](https://pastebin.com/b636U1Nw)**
>
> Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

⠀

```auto
int numImg = 107;
ArrayList<PVector> vecs;
PImage[] img = new PImage[numImg];
float x, y;
float size = 180;

IntList indices = new IntList();

void setup() {
  size(1000, 1000, P3D);
  vecs = new ArrayList<PVector>();

  //randomise img / load image
  for (int i = 0; i < numImg; i++) {
    img[i] = loadImage("defaultFriend"+i+".jpg");
    indices.append(i);
    img[i].resize(150, 200);
  }
}

void draw() {
  background(255);
  noStroke();

  //wave pattern
  translate(width/2, height/2);
  rotateY(radians(frameCount*0.85));

  float mag = 600;

  float waveX = map(sin(radians(frameCount * 9)) + cos(radians(frameCount * 7)), -1, 1, -mag/2, mag/2);
  float waveY = map(sin(radians(frameCount * 7)) + cos(radians(frameCount * 9)), -1, 1, -mag/2, mag/2);
  float waveZ = map(sin(radians(frameCount * 6)) + cos(radians(frameCount * 7)), -1, 1, -mag/2, mag/2);

  vecs.add(new PVector(waveX, waveY, waveZ));

  if (vecs.size() > 300) {
    vecs.remove(0);
  }

  // shuffle list
  indices.shuffle();
  // reset y
  y = 0;

  for (int a = 0; a < numImg; a++) {

    int rand = indices.get(a);

    for (int i = 0; i < vecs.size(); i++) {
      PVector v = vecs.get(i);
      push();
      translate(v.x, v.y, v.z);
      image(img[rand], 0, 0);
      noFill();
      rect(0, 0, 150, 200);
      pop();
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![rapatski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapatski/32/5164_2.png) [@rapatski](https://discourse.processing.org/u/rapatski)\
**Post date:** [April 1, 2022, 9:07am UTC](https://discourse.processing.org/t/map-random-images-to-elements-individually/36022/2 "2022-04-01T09:07:25Z")

</div>

What’s your question?

---

<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:** [April 1, 2022, 10:07am UTC](https://discourse.processing.org/t/map-random-images-to-elements-individually/36022/3 "2022-04-01T10:07:12Z")

</div>

> [@oli7er](#):
>
> them flickering simultaneously.

That’s not nice and not what you want.

You mentioned your first way of doing it.  
Maybe you can stick with this approach and shuffle the elements prior or after loading?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 2, 2022, 9:06pm UTC](https://discourse.processing.org/t/map-random-images-to-elements-individually/36022/4 "2022-04-02T21:06:21Z")

</div>

Hello @oli7er ,

Some observations below.

You have a loop in a loop (107\*107 = 11449):

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/8/c8a833d55dcc278a2e76e999aa9ad1a1e8cd81c1.png)

Try using the inner loop only with this:

```auto
int rand = indices.get(i);
image(img[rand], 0, 0);

```

You are calling the _rect()_ function but you will not see the rectangle:

```auto
noStroke(); // At start of draw()
noFill();
rect(0, 0, 150, 200);

```

`:)`

---

<div class="post-metadata">

**Author:** ![oli7er](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/oli7er/32/16085_2.png) [@oli7er](https://discourse.processing.org/u/oli7er)\
**Post date:** [April 22, 2022, 10:44am UTC](https://discourse.processing.org/t/map-random-images-to-elements-individually/36022/6 "2022-04-22T10:44:56Z")

</div>

Thank you @glv this worked perfectly.