How to shuffle the order of PImage-Objects inside an array

injuvik

Hi coders!

i want to shuffle the order of PImage-objects in an array. Here's the code:

PImage[] theImages = new PImage[7];

void setup() {
  for (int i = 0; i < theImages.length; i++) {
    theImages[i] = loadImage(i+".gif");
  }
}

void draw() {
  // Display The Images
  for (int i = 0; i < theImages.length; i++) {
    pushMatrix();
    translate(width/2, height/2);
    scale(random(0.5, 1));
    image(theImages[i], 0, 0); 
    popMatrix();
  }

// Shuffle the order of the images
  shuffle();

}

I found this in the forum: https://forum.processing.org/two/discussion/3546/how-to-randomize-order-of-array but i did not get it to work.

Would you help me? Thanks alot!

koogs

I don't get the code formatted correctly anyway

edit post. remove all the `s, highlight code, press ctrl-o

jeremydouglass

1. Make an ArrayList instead of PImage[], and then use Java Collections.shuffle

2. or Collections.shuffle(Arrays.asList(array)) with PImage[] (haven't tested this)

   http://stackoverflow.com/questions/1519736/random-shuffling-of-an-array

   https://forum.processing.org/two/discussion/3546/how-to-randomize-order-of-array

3. or create a simple IntList as an index (if your PImage list is fixed in size) and then shuffle that with the Processing built-in IntList shuffle.

   https://processing.org/reference/IntList_shuffle_.html

jeremydouglass

Question -- are your images transparent or offset? If so, it might make sense to draw all seven of them at once in a (shuffled) stack, every single time draw is called the way that you are doing.

EDIT: removed import java.util.Collections.* -- not necessary if using Processing's built-in IntList.shuffle

PImage[] theImages = new PImage[7];
IntList imageIndex = new IntList(); //// create an index

void setup() {
  for (int i = 0; i < theImages.length; i++) {
    theImages[i] = loadImage(i+".gif");
    imageIndex.append(i); //// create a simple list of index numbers 0 1 2 3 ....
  }
  frameRate(3);
}

void draw() {
  // Display The Images
  for (int i = 0; i < theImages.length; i++) {
    pushMatrix();
    translate(width/2, height/2);
    scale(random(0.5, 1));
    image(theImages[imageIndex.get(i)], 0, 0); 
    popMatrix();
  }

imageIndex.shuffle(); //// shuffle your index 2 0 3 1 ....
}

Otherwise it doesn't make sense -- what you want is to draw one new random image (0-6) each time draw is called -- like dealing cards from a deck -- and then after seven images you want to reshuffle and start again.

If that is the case, and you want to go through the 'deck' of seven each time, you still might need fancy shuffling. Here draw only runs shuffle every seventh frame (frameCount%7==0) -- so you shuffle, draw seven times, then shuffle again....

PImage[] theImages = new PImage[7];
IntList imageIndex = new IntList(); //// create an index

void setup() {
  for (int i = 0; i < theImages.length; i++) {
    theImages[i] = loadImage(i+".gif");
    imageIndex.append(i); //// create a simple list of index numbers 0 1 2 3 ....
  }
  imageIndex.shuffle(); //// pre-shuffle
  frameRate(1);
}

void draw() {
  // Every 7 frames, reshuffle the index
  if(frameCount % 7 == 0){
    imageIndex.shuffle(); //// shuffle your index 2 0 3 1 ....
  }

  // Display The Images
  pushMatrix();
    translate(width/2, height/2);
    scale(random(0.5, 1));
    image(theImages[imageIndex.get(frameCount % 7)], 0, 0); //// look up images through index based on the frame number 
  popMatrix();

}

But if you don't care about getting two in a row that are the same, you could just call random() -- no shuffling required:

PImage[] theImages = new PImage[7];

void setup() {
  for (int i = 0; i < theImages.length; i++) {
    theImages[i] = loadImage(i+".gif");
  }
  frameRate(3);
}

void draw() {
  // Display The Images
  pushMatrix();
    translate(width/2, height/2);
    scale(random(0.5, 1));
    image(theImages[int(random(7))], 0, 0); //// draw a random image 0-6
  popMatrix();
}

injuvik

Hi koogs, hi jeremy, thanks for your feedback!

@Jeremy: Yes, the images are transparent and shall appear as a stack. That's why your I fixed the problem with your first solution:

import java.util.Collections.*;

PImage[] theImages = new PImage[7];
IntList imageIndex = new IntList(); //// create an index

void setup() {
  for (int i = 0; i < theImages.length; i++) {
    theImages[i] = loadImage(i+".gif");
    imageIndex.append(i); //// create a simple list of index numbers 0 1 2 3 ....
  }
  frameRate(3);
}

void draw() {
  // Display The Images
  for (int i = 0; i < theImages.length; i++) {
    pushMatrix();
    translate(width/2, height/2);
    scale(random(0.5, 1));
    image(theImages[imageIndex.get(i)], 0, 0); 
    popMatrix();
  }

// Shuffle the order of the images
  if(frameCount % 7 == 0){
    imageIndex.shuffle(); //// shuffle your index 2 0 3 1 ....
  };
}

It works fine. Thank you guys!

jeremydouglass

Two small self-corrections -- for your purposes you don't need import java.util.Collections.* and you don't need the if(frameCount % 7 == 0) wrapped around imageIndex.shuffle(). I've updated my first solution.