Sequential Loop with Images

Processing Coding Questions
1

Hi everyone, I created 36 different png’s of this orb that I designed in photoshop and I need to make processing run through all 36 of the images and then just do that forever so it looks like the orb is changing color. (I slightly adjusted the hue of the image by about 10 units each png)

I also linked a YouTube video of what it looks like at 60fps with the images playing sequentially.

The orb file names are Orb01 - Orb 36, please, someone help a brother out! :slight_smile:

Orb01
Orb01450×600 209 KB

1 Like
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
3

Thank you very much for the quick reply!

I received the following error; "The operator % is undefined for the argument type(s) PImage, int"

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

1 Like
4

Whoops!

image( imgs[frameCount]%36, width/2, height/2);

Should be

image( imgs[frameCount%36], width/2, height/2);

If you search for what the modulo (%) operator does, you will see why it goes on the index into the array and not on the image…

1 Like
5

Additional ideas: there are also that there are other ways of making your orb change color. A few examples, roughly from easiest to hardest:

  1. you can load a single image and then shift its color with tint() before drawing it.
  2. you can load an image onto a sphere as a texture and then use 3D colored lighting on – see the “lights” section of the reference page: https://processing.org/reference/
  3. you can copy the image, then shift pixels using a colormap.
1 Like