Sequential Loop with Images

Processing Coding Questions
2

First, you are going to want to load all 36 of your images into an array. So first we need an array of images that is 36 big:

PImage imgs = new PImage[36];

We will load them in setup():

void setup(){
  size(400,400);
  for( int i = 1; i <= 36; i++){
    String tens = "";
    if( i < 10 ) tens = "0";
    imgs[i-1] = loadImage( "Orb" + tens + i + ".png" );
  }
}

Now you need to draw one of these images in draw(). Which one? Well, you could just draw a new one every frame:

void draw(){
  background(0);
  imageMode(CENTER);
  image( imgs[frameCount], width/2, height/2);
}

And if you run that, it will work - for 36 frames. Then it crashes horribly because there is no 37th image, so we have a problem when we try to use imgs[36].

Instead, we could start over with #0 once we get to #36. This is easily done with a modulo operation, so let’s put it all together and add that:

PImage imgs = new PImage[36];

void setup(){
  size(400,400);
  for( int i = 1; i <= 36; i++){
    String tens = "";
    if( i < 10 ) tens = "0";
    imgs[i-1] = loadImage( "Orb" + tens + i + ".png" );
  }
}

void draw(){
  background(0);
  imageMode(CENTER);
  image( imgs[frameCount]%36, width/2, height/2);
}

There are other ways that you could map the framecount to an index in the array! Maybe you could try using map() and int()! See if it works for you.

UNTESTED CODE - YMMV

2 Likes