# Sequential Loop with Images

**URL:** <https://discourse.processing.org/t/sequential-loop-with-images/6160>\
**Category:** Coding Questions\
**Created:** [December 2, 2018, 2:42am UTC](https://discourse.processing.org/t/sequential-loop-with-images/6160 "2018-12-02T02:42:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![RienziDeal](https://avatars.discourse-cdn.com/v4/letter/r/df788c/32.png) [@RienziDeal](https://discourse.processing.org/u/RienziDeal)\
**Post date:** [December 2, 2018, 2:42am UTC](https://discourse.processing.org/t/sequential-loop-with-images/6160/1 "2018-12-02T02:42:11Z")

</div>

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! 🙂

[![]( " - YouTube") ](https://www.youtube.com/watch?v=oPE3aP1y03s)

 ![Orb01](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a8b126196150ff4581014bae43d0c4d8e385c6da.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:** [December 2, 2018, 3:01am UTC](https://discourse.processing.org/t/sequential-loop-with-images/6160/2 "2018-12-02T03:01:14Z")

</div>

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:

```auto
PImage imgs = new PImage[36];

```

We will load them in `setup()`:

```auto
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:

```auto
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:

```auto
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

---

<div class="post-metadata">

**Author:** ![RienziDeal](https://avatars.discourse-cdn.com/v4/letter/r/df788c/32.png) [@RienziDeal](https://discourse.processing.org/u/RienziDeal)\
**Post date:** [December 2, 2018, 3:17am UTC](https://discourse.processing.org/t/sequential-loop-with-images/6160/3 "2018-12-02T03:17:29Z")

</div>

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

---

<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:** [December 2, 2018, 4:02am UTC](https://discourse.processing.org/t/sequential-loop-with-images/6160/4 "2018-12-02T04:02:32Z")

</div>

Whoops!

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

```

Should be

```auto
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…

---

<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:** [December 3, 2018, 8:41pm UTC](https://discourse.processing.org/t/sequential-loop-with-images/6160/5 "2018-12-03T20:41:11Z")

</div>

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/](https://processing.org/reference/)
3. you can copy the image, then shift pixels using a colormap.