Map random images to elements individually

Processing Coding Questions
1

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
⠀

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++) {
    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();
    }
  }
}
2

What’s your question?

3

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
4

Hello @oli7er ,

Some observations below.

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

image
image496×752 30.7 KB

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
6

Thank you @glv this worked perfectly.

1 Like