# Not sure how to code this Random/shuffling image effect

**URL:** <https://discourse.processing.org/t/not-sure-how-to-code-this-random-shuffling-image-effect/5073>\
**Category:** Coding Questions\
**Created:** [October 31, 2018, 10:26pm UTC](https://discourse.processing.org/t/not-sure-how-to-code-this-random-shuffling-image-effect/5073 "2018-10-31T22:26:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Damo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/damo/32/2155_2.png) [@Damo](https://discourse.processing.org/u/Damo)\
**Post date:** [October 31, 2018, 10:26pm UTC](https://discourse.processing.org/t/not-sure-how-to-code-this-random-shuffling-image-effect/5073/1 "2018-10-31T22:26:11Z")

</div>

![45zr4gsks7v11](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7ed99fe5d2097a635e0ff752d5382e9385fa59d7.jpeg)

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

---

<div class="post-metadata">

**Author:** ![Damo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/damo/32/2155_2.png) [@Damo](https://discourse.processing.org/u/Damo)\
**Post date:** [October 31, 2018, 11:22pm UTC](https://discourse.processing.org/t/not-sure-how-to-code-this-random-shuffling-image-effect/5073/2 "2018-10-31T23:22:07Z")

</div>

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

```auto

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"); }
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [November 1, 2018, 12:03am UTC](https://discourse.processing.org/t/not-sure-how-to-code-this-random-shuffling-image-effect/5073/3 "2018-11-01T00:03:18Z")

</div>

Close enough. This is how I would do it:

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

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 1, 2018, 7:22pm UTC](https://discourse.processing.org/t/not-sure-how-to-code-this-random-shuffling-image-effect/5073/4 "2018-11-01T19:22:06Z")

</div>

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](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:

- [https://github.com/processing/processing/commit/dc36abb52767c7e6f300cf2670b3cb711a0f1d79](https://github.com/processing/processing/commit/dc36abb52767c7e6f300cf2670b3cb711a0f1d79)
- [https://github.com/processing/processing/issues/4622](https://github.com/processing/processing/issues/4622)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 1, 2018, 7:39pm UTC](https://discourse.processing.org/t/not-sure-how-to-code-this-random-shuffling-image-effect/5073/5 "2018-11-01T19:39:21Z")

</div>

> [@How to check if a file is exist in data folder by code?](https://discourse.processing.org/t/how-to-check-if-a-file-is-exist-in-data-folder-by-code/589/7):
>
> Yes! Just pass an empty string "" to dataPath(): dataFolderPath = this.dataPath('') + '/' print dataFolderPath … or to dataFile(): dir = this.dataFile('') dataFolderPath = dir.path + '/' print dataFolderPath However, if you need all files within the sketch’s “data/” folder, like all images for example, you can use listPaths(), passing the “data/” folder path + a string w/ all desired “extensions=,”: sunglasses PICS\_EXTS = 'extensions=,png,jpg,jpeg,gif,tif,tiff,tga,bmp,wbmp' dir = this.…