Not sure how to code this Random/shuffling image effect

Processing Coding Questions
1

45zr4gsks7v11

I want to code a random shuffling array of images, where each square pulls from a separate folder of images and every time it refreshes its another random array of images.

I’m not sure how difficult this is

any help on the general steps i should take to achieve this would be amazing

2

all i have so far is this random image displayer, not sure how to go from here to make an organised randomised array that pulls from a seperate folder for each image in the grid



PImage img;
PImage imgMask;
int grid_divider=16;
float r = 0;
int image_incr_w=0;
int image_incr_h=0;

void setup() {
  background(255, 255, 255);
  size(1160, 830);
  //size(1143, 809);
  img = loadImage("1 .png");
  imgMask = loadImage("2 .png");
  img.mask(imgMask);
  imageMode(CORNER);
  
}



void draw() {
  
  PImage[] images = new PImage[10];
  
  for(int image_incr_w=0;image_incr_w<width;image_incr_w+=img.width/grid_divider) {
    for (int image_incr_h=0;image_incr_h<height;image_incr_h+=img.height/grid_divider) {
      image(img, image_incr_w, image_incr_h,img.width/grid_divider, img.height/grid_divider);
      r = random(0,30);
 
      int rx = round(r);
      img = loadImage(rx +" .png");
      
     
     
    }
  }
}

void keyPressed() {
if (key == 's') {
save(frameCount + ".png"); }
}
1 Like
3

Close enough. This is how I would do it:

// This code assumes you have 16 folders in the data folder, numbered 0 to 15.
// Inside each folder there are 30 images, numbered 0 to 29.
// That means there are 480 images total!
PImage[] images = new PImage[16];

void setup(){
  size(800,800);
  // Load random images.
  // For each image,
  for( int which = 0; which < images.length; which++){
    // Pick a random image from one of the the numbered folders.
    images[which] = loadImage( "" + which + "/" + int(random(0,30)) + ".png" );
  }
}

void draw(){
  background(0);
  int t = 0;
  // Draw all the images that were loaded.
  for( int y = 0; y < 4; y++){
    for( int x = 0; x < 4; x++){
      image(images[t++], 200*x, 200*y, 200, 200);
    }
  }
}
2 Likes
4

You can also make this approach dynamic with directory listings – listPaths(), listFileNames() – discover the number of folders, or discover the number of files in each folder – and filter those by “png”.

This approach is more involved, but it allows you to add images to the sketch by adding files, or remove images without breaking the sketch. Here is so

https://processing.org/examples/directorylist.html

In the past two years directory listing in Processing 3 has become much more powerful, so a lot of the old advice on using it is out of date.

Unfortunately there is not a reference page yet for listPaths(), but you can look at the code and how it was designed here:

2 Likes
5
2 Likes