# Map random images to elements individually

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. The original code is here:

``````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++) {
indices.append(i);
img[i].resize(150, 200);
}
}

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

//wave pattern
translate(width/2, height/2);

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

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?

1 Like

Hello @oli7er ,

Some observations below.

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

Try using the inner loop only with this:

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

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

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

`:)`

1 Like

Thank you @glv this worked perfectly.

1 Like