# Animation problem: delay

**URL:** <https://discourse.processing.org/t/animation-problem-delay/20973>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [May 17, 2020, 3:17pm UTC](https://discourse.processing.org/t/animation-problem-delay/20973 "2020-05-17T15:17:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kukukoks](https://avatars.discourse-cdn.com/v4/letter/k/9fc29f/32.png) [@kukukoks](https://discourse.processing.org/u/kukukoks)\
**Post date:** [May 17, 2020, 3:17pm UTC](https://discourse.processing.org/t/animation-problem-delay/20973/1 "2020-05-17T15:17:55Z")

</div>

Hi i have a problem with my code, i have 6 png and need to load this png from 0 to 5, but when i start program i have instantly 5

```auto
 PImage zero, jeden, dwa, trzy, cztery, piec;
void setup()
{
  size(200, 200);
  zero=loadImage("zero.jpeg");
  jeden=loadImage("jeden.jpeg");
  dwa=loadImage("dwa.jpeg");
  trzy=loadImage("trzy.jpeg");
  cztery=loadImage("cztery.jpeg");
  piec=loadImage("piec.jpeg");
  frameRate(30);
}

void draw()
{
  PImage[] tablica=new PImage[6];
  tablica[0]=zero;
  tablica[1]=jeden;
  tablica[2]=dwa;
  tablica[3]=trzy;
  tablica[4]=cztery;
  tablica[5]=piec;

  for (int i=0; i<tablica.length; i++)
  {

    PImage liczby=tablica[i];
    background(liczby);
  }
} 

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 17, 2020, 3:31pm UTC](https://discourse.processing.org/t/animation-problem-delay/20973/2 "2020-05-17T15:31:19Z")

</div>

Hi,

Welcome to the forum! 🙂  
First of all, you should format your code by pressing `Ctrl+T` in the Processing IDE then using the `</>` button when editing your message on the forum.

For the code, I suggest you do the following :

- Don’t declare variables inside the `draw()` function if they are going to be global to the program because every frame, you are going to recreate your array and put images inside.

- For this example, try to use [ArrayList](https://processing.org/reference/ArrayList.html) because they are much more adapted to hold instances of objects (here PImage) and they are easy to use.

- Instead of naming your images “one.jpeg”, “two.jpeg”, “three.jpeg”… it’s better to name them “image1.jpeg”, “image2.jpeg”, “image3.jpeg”… so you can dynamically load them in your code :

```auto
// Declare an ArrayList of PImages
ArrayList<PImage> images = new ArrayList<PImage>();

// Number of images to load
int nb_images = 5;

void setup(){
  // Loop to load the images
  for(int i=0; i<nb_images; i++){
    // Load dynamically the image
    images.add(loadImage("image" + i + ".jpeg"));
  }
}

```

---

<div class="post-metadata">

**Author:** ![kukukoks](https://avatars.discourse-cdn.com/v4/letter/k/9fc29f/32.png) [@kukukoks](https://discourse.processing.org/u/kukukoks)\
**Post date:** [May 17, 2020, 4:04pm UTC](https://discourse.processing.org/t/animation-problem-delay/20973/3 "2020-05-17T16:04:09Z")

</div>

This is a whole code or a bit of code? When i implements to processing i have grey screen nothing is displayed

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 17, 2020, 4:17pm UTC](https://discourse.processing.org/t/animation-problem-delay/20973/4 "2020-05-17T16:17:21Z")

</div>

No it’s just the beginning of the code with this structure :

1. Declare global variables
2. `setup()` function where you load your images
3. `draw()` function where you display your images

I am not going to give you the whole solution, it’s an exercise 🙂

But if I understand well, you want your images to display one after another. Remember that the `draw()` function is being executed roughly 60 times per second (in order for your eye to see an animation like in movies).

So in order to display your images at a regular interval (1 second for example), you need to be able to measure time.

Check some useful functions :

- [millis()](https://processing.org/reference/millis_.html)
- [frameCount](https://processing.org/reference/frameCount.html)