Random Images loop

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?

int maxImages = 30; 

PImage img; 
int num = 1; 

void setup() { 

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

  delay(10 * 1 *5); 
1 Like


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.

PImage myArrayOfImage[] = new PImage[5];

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

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

1 Like

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) {