# Random Images loop

**URL:** <https://discourse.processing.org/t/random-images-loop/11159>\
**Category:** Beginners\
**Created:** [May 12, 2019, 9:20am UTC](https://discourse.processing.org/t/random-images-loop/11159 "2019-05-12T09:20:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![bkielak](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bkielak/32/5145_2.png) [@bkielak](https://discourse.processing.org/u/bkielak)\
**Post date:** [May 12, 2019, 9:20am UTC](https://discourse.processing.org/t/random-images-loop/11159/1 "2019-05-12T09:20:01Z")

</div>

Hi guys,

I’m a graphic designer and I’m currently working on the project in regards to the computation so I wanted to create randomized images overlap in processing. So far I made a basic code but it doesn’t really work as I hoped.

I can’t really figure out how to make the images display randomly and also how to make a delay that will be for an individual set of images cycle.

Does anybody has an idea now I can impove my code?

```auto
int maxImages = 30; 

PImage img; 
int num = 1; 

void setup() { 
  size(600,600); 
} 

void draw() { 
  
  img = loadImage("image"+num+".jpg");
  image(img, 00, 0);
  
  
  img = loadImage("data"+num+".png");
  image(img, 110, 0);
  
  num++;  
  if (num > maxImages) {
    num = 1;
  } 

  
  delay(10 * 1 *5); 
 
}

```

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [May 12, 2019, 9:58am UTC](https://discourse.processing.org/t/random-images-loop/11159/2 "2019-05-12T09:58:59Z")

</div>

Hi,

First you should format your code using the `</>` icon on the editing window.  
You can edit your post with the little pen icon in order to correct the formating.

For your questions I don’t really have time to go into details so I’ll just give you leads:  
1- For the randomness (is that a word ?) you want to use an array of images.

```auto
PImage myArrayOfImage[] = new PImage[5];

```

Then you can use the random function to get a random image.

```auto
myArrayOfImage[(int)random(0, 5)];

```

2- You don’t want to load your image in draw. It’s a real performance issue. What you want to do is to load them in setup and then use them in draw. No need to fetch them 60 times a second.

3- For the delay, there are plenty of discussion on the forum. The basic idea is to use the millis() function: [https://processing.org/reference/millis\_.html](https://processing.org/reference/millis_.html)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 12, 2019, 10:04am UTC](https://discourse.processing.org/t/random-images-loop/11159/3 "2019-05-12T10:04:51Z")

</div>

The instagram page doesn’t make sense for me

You can add 3 images at random positions

Then you wait 30 seconds and then you delete and display 3 other random images

Something like that

before setup int timer;

In setup timer=millis();

in draw

if(millis () - timer \> 3000) {

showImages();  
timer=…;

}