# Slow down an animation

**URL:** <https://discourse.processing.org/t/slow-down-an-animation/10381>\
**Category:** Coding Questions\
**Created:** [April 17, 2019, 8:22am UTC](https://discourse.processing.org/t/slow-down-an-animation/10381 "2019-04-17T08:22:02Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![vincentstrebelle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vincentstrebelle/32/6963_2.png) [@vincentstrebelle](https://discourse.processing.org/u/vincentstrebelle)\
**Post date:** [April 17, 2019, 8:22am UTC](https://discourse.processing.org/t/slow-down-an-animation/10381/1 "2019-04-17T08:22:02Z")

</div>

Hi, i found the sequential example to make an animation and i wonder how can i slow down the animation without change the framerate. Is that possible ?

here is the example: ([https://processing.org/examples/sequential.html](https://processing.org/examples/sequential.html))

```auto
int numFrames = 12; // The number of frames in the animation
int currentFrame = 0;
PImage[] images = new PImage[numFrames];
    
void setup() {
  size(640, 360);
  frameRate(24);
  
  images[0] = loadImage("PT_anim0000.gif");
  images[1] = loadImage("PT_anim0001.gif"); 
  images[2] = loadImage("PT_anim0002.gif");
  images[3] = loadImage("PT_anim0003.gif"); 
  images[4] = loadImage("PT_anim0004.gif");
  images[5] = loadImage("PT_anim0005.gif"); 
  images[6] = loadImage("PT_anim0006.gif");
  images[7] = loadImage("PT_anim0007.gif"); 
  images[8] = loadImage("PT_anim0008.gif");
  images[9] = loadImage("PT_anim0009.gif"); 
  images[10] = loadImage("PT_anim0010.gif");
  images[11] = loadImage("PT_anim0011.gif"); 
  
  // If you don't want to load each image separately
  // and you know how many frames you have, you
  // can create the filenames as the program runs.
  // The nf() command does number formatting, which will
  // ensure that the number is (in this case) 4 digits.
  //for (int i = 0; i < numFrames; i++) {
  // String imageName = "PT_anim" + nf(i, 4) + ".gif";
  // images[i] = loadImage(imageName);
  //}
} 
 
void draw() { 
  background(0);
  currentFrame = (currentFrame+1) % numFrames; // Use % to cycle through frames
  int offset = 0;
  for (int x = -100; x < width; x += images[0].width) { 
    image(images[(currentFrame+offset) % numFrames], x, -20);
    offset+=2;
    image(images[(currentFrame+offset) % numFrames], x, height/2);
    offset+=2;
  }
}

```

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [April 17, 2019, 10:58am UTC](https://discourse.processing.org/t/slow-down-an-animation/10381/3 "2019-04-17T10:58:37Z")

</div>

yes you can.

```auto
delay = 30;
if(frameCount % delay == 0) {
   //nextFrame Codes goes here
}

```

if frameRate is at 60 fps then the speed is 60/30 = 2 fps

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 17, 2019, 11:07am UTC](https://discourse.processing.org/t/slow-down-an-animation/10381/4 "2019-04-17T11:07:00Z")

</div>

Instead of

x += images[0].width) {

In the for loop say x+=2 )

Delay is not recommended

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [April 17, 2019, 11:26am UTC](https://discourse.processing.org/t/slow-down-an-animation/10381/5 "2019-04-17T11:26:07Z")

</div>

You can also use the millis() function to keep track of the elapsed time between each frame to draw.

Something like this:

```auto
int previousDisplayTime; // Keep track of the last time a frame of the animation was displayed
int deltaTime; // The time between each frame

void setup() {
  deltaTime = 2000; // Display every 2 seconds
  previousDisplayTime = 0;
}

void draw() {
  if (millis() > previousDisplayTime + deltaTime) {
    println("Draw you image");
    previousDisplayTime = millis();
  }
}

```

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [April 17, 2019, 11:32am UTC](https://discourse.processing.org/t/slow-down-an-animation/10381/6 "2019-04-17T11:32:18Z")

</div>

did you mean `delay()` function? nope, that just a variable that determines the speed of the frame cycles through

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 17, 2019, 11:33am UTC](https://discourse.processing.org/t/slow-down-an-animation/10381/7 "2019-04-17T11:33:12Z")

</div>

My apologies

My bad…

---

<div class="post-metadata">

**Author:** ![vincentstrebelle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vincentstrebelle/32/6963_2.png) [@vincentstrebelle](https://discourse.processing.org/u/vincentstrebelle)\
**Post date:** [April 17, 2019, 11:37am UTC](https://discourse.processing.org/t/slow-down-an-animation/10381/8 "2019-04-17T11:37:08Z")

</div>

thanks guys, i gonna try and yes i just wanted a way to determines the speed of the frame cycles

Chrisir what do you mean by “(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)” ?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 17, 2019, 11:40am UTC](https://discourse.processing.org/t/slow-down-an-animation/10381/9 "2019-04-17T11:40:56Z")

</div>

I made a bad reply and had to delete it .

This is just the automatically text by the forum

---

<div class="post-metadata">

**Author:** ![humayung](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/humayung/32/6089_2.png) [@humayung](https://discourse.processing.org/u/humayung)\
**Post date:** [April 17, 2019, 11:42am UTC](https://discourse.processing.org/t/slow-down-an-animation/10381/10 "2019-04-17T11:42:59Z")

</div>

i pefer the solution by @jb4x. the speed relatives to the real timing, not the frame rate.

---

<div class="post-metadata">

**Author:** ![vincentstrebelle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vincentstrebelle/32/6963_2.png) [@vincentstrebelle](https://discourse.processing.org/u/vincentstrebelle)\
**Post date:** [April 18, 2019, 9:03am UTC](https://discourse.processing.org/t/slow-down-an-animation/10381/11 "2019-04-18T09:03:14Z")

</div>

Hi, i have tried what you propose, and its work 🙂 .  
But its not what i need (my bad)  
what i looking for is :  
1: a way to slow down the cycle of each picture  
2: keep each picture long enough to see it

the problem is that it goes too fast

i dont know if you know what i mean but here the code:

```auto
int numFrames = 3; // The number of frames in the animation
int currentFrame = 0;
PImage[] images = new PImage[numFrames];

int previousDisplayTime; // Keep track of the last time a frame of the animation was displayed
int deltaTime;   

void setup() {
  size(600, 600);
   
  deltaTime = 2000; // Display every 2 seconds
  previousDisplayTime = 0;
  
  images[0] = loadImage("papillonD0.png");
  images[1] = loadImage("papillonD1.png"); 
  images[2] = loadImage("papillonD2.png");
  
}

void draw() { 
  background(0);
  currentFrame = (currentFrame+1) % numFrames; // Use % to cycle through frames
  int offset = 0;
  ////what you said
  if (millis() > previousDisplayTime + deltaTime) {
    image(images[(currentFrame+offset) % numFrames], width/2, height/2);
    offset+=2;
    println("Draw you image");
    previousDisplayTime = millis();
  } 
  
  /////the base i have
  image(images[(currentFrame+offset) % numFrames], width/2, height/3);
  offset+=2;
  
}

```

i put the three picture so you can see the issue.

![papillonD0](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8f4a596da83fbb53e1cc8361411e4a1ebbcea4d4.png) ![papillonD1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7457a9bb8fd609ff731f65e3938675cd60a7bdc2.png) ![papillonD2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5070743bd3ce08d7b9ed901e6c1e5d5e8def7509.png)

Thanks for yours times.

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [April 18, 2019, 9:36am UTC](https://discourse.processing.org/t/slow-down-an-animation/10381/12 "2019-04-18T09:36:22Z")

</div>

Have a variable called “frameNb” that will keep track of wich frame of the animation you are in.

Then change this value inside the time check condition.

After that you can always display your animation frame outside that check based on the value of that variable.

I’m currently on my phone but I’ll write an example later on if you want.

---

<div class="post-metadata">

**Author:** ![vincentstrebelle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vincentstrebelle/32/6963_2.png) [@vincentstrebelle](https://discourse.processing.org/u/vincentstrebelle)\
**Post date:** [April 18, 2019, 9:44am UTC](https://discourse.processing.org/t/slow-down-an-animation/10381/13 "2019-04-18T09:44:06Z")

</div>

ok i think i understand what you said, i gonna try but an example is always welcome 🙂

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [April 18, 2019, 10:45am UTC](https://discourse.processing.org/t/slow-down-an-animation/10381/14 "2019-04-18T10:45:39Z")

</div>

Here you go =):

```auto
int numFrames = 3; // The number of frames in the animation
int currentFrame = 0;
PImage[] images = new PImage[numFrames];
int posX, posY;

int previousDisplayTime; // Keep track of the last time a frame of the animation was displayed
int deltaTime; // The time between each frame

void setup() {
  size(600, 600);
  background(20);

  deltaTime = 150;
  previousDisplayTime = 0;
  
  posX = 10;
  posY = 10;
  
  images[0] = loadImage("IMG_01.png");
  images[1] = loadImage("IMG_02.png"); 
  images[2] = loadImage("IMG_03.png");
}

void draw() {
  if (millis() > previousDisplayTime + deltaTime) {
    currentFrame++;
    if (currentFrame > 2) { 
      currentFrame = 0;
      posX += 8;
      posY += 5;
    }
    previousDisplayTime = millis();
  }
  
  background(20);
  image(images[currentFrame], posX, posY);
}

```

---

<div class="post-metadata">

**Author:** ![vincentstrebelle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vincentstrebelle/32/6963_2.png) [@vincentstrebelle](https://discourse.processing.org/u/vincentstrebelle)\
**Post date:** [April 18, 2019, 10:54am UTC](https://discourse.processing.org/t/slow-down-an-animation/10381/15 "2019-04-18T10:54:59Z")

</div>

Thanks a lot its work perfectly !!! and i can change the speed !!

---

<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:** [April 20, 2019, 12:41am UTC](https://discourse.processing.org/t/slow-down-an-animation/10381/16 "2019-04-20T00:41:40Z")

</div>

If you want an industrial-strength solution for dealing with many different sprites at different speeds, I suggest the Sprites for Processing (S4P) library.

[http://www.lagers.org.uk/s4p/](http://www.lagers.org.uk/s4p/)

The Sprite class has built-in featuresw like an animation interval.

[http://www.lagers.org.uk/s4p/ref/classsprites\_1\_1\_sprite.html](http://www.lagers.org.uk/s4p/ref/classsprites_1_1_sprite.html)

---

<div class="post-metadata">

**Author:** ![SteveG](https://avatars.discourse-cdn.com/v4/letter/s/ecae2f/32.png) [@SteveG](https://discourse.processing.org/u/SteveG)\
**Post date:** [March 5, 2021, 1:48am UTC](https://discourse.processing.org/t/slow-down-an-animation/10381/17 "2021-03-05T01:48:44Z")

</div>

I have a similar challenge: How to pause between each drawn frame, so that each frame can be viewed. The program is supposed to draw 4 frames and hold the display of each frame for say 0.5 seconds before displaying the next frame. I tried adjusting frameRate() but it doesn’t have an effect.

This is a simple ‘walking man’ animation whereby the stick figure walks ‘on the spot’. Below are the first 2 frames of the animation. How to display and pause, display and pause, then repeat?

```auto
PImage bkg;

void setup() {
  size (800, 600);
  bkg = loadImage("bkg+clouds.jpg");
}

void draw() {
 background (bkg); // first walking position
 fill(255);
 ellipse (250,150, 100,100);
 fill(0);
 ellipse (270,130, 10,10);
 noFill();
 curve(250, 100, 260, 175, 290, 175, 325, 100);
 stroke(0);
 strokeWeight(3);
 line(250, 200, 250, 350); //body
 line(250, 225, 215, 250); //left arm
 line(215, 250, 200, 300);
 line(250, 225, 300, 275); //right arm
 line(300, 275, 325, 225);
 line(250, 350, 225, 415); //left leg
 line(225, 415, 170, 500);
 line(250, 350, 300, 415); //right leg
 line(300, 415, 325, 500);
 
 background (bkg); // second walking position
 fill(255);
 ellipse (250,150, 100,100);
 fill(0);
 ellipse (270,130, 10,10);
 noFill();
 curve(250, 100, 260, 175, 290, 175, 325, 100);
 stroke(0);
 strokeWeight(3);
 line(250, 200, 250, 350); //body
 line(250, 225, 200, 240); //left arm
 line(200, 240, 190, 290);
 line(250, 225, 285, 285); //right arm
 line(285, 285, 325, 250);
 line(250, 350, 240, 415); //left leg
 line(240, 415, 150, 425);
 line(250, 350, 280, 415); //right leg
 line(280, 415, 270, 500);
}

```

---

<div class="post-metadata">

**Author:** ![SteveG](https://avatars.discourse-cdn.com/v4/letter/s/ecae2f/32.png) [@SteveG](https://discourse.processing.org/u/SteveG)\
**Post date:** [March 5, 2021, 12:24pm UTC](https://discourse.processing.org/t/slow-down-an-animation/10381/18 "2021-03-05T12:24:49Z")

</div>

Problem solved! I applied the following delay display code presented by user jb4x above, and it worked successfully. Thanks @jb4x!

```auto
  if (millis() > previousDisplayTime + deltaTime) {
    currentFrame++;
    if (currentFrame > 2) { 
      currentFrame = 0;
      posX += 8;
      posY += 5;
    }
    previousDisplayTime = millis();
  }

```