Slow down an animation

#1

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)

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;
  }
}
0 Likes

#3

yes you can.

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

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

0 Likes

#4

Instead of

x += images[0].width) {

In the for loop say x+=2 )

Delay is not recommended

0 Likes

#5

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

Something like this:

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();
  }
}
2 Likes

#6

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

1 Like

#7

My apologies

My bad…

1 Like

#8

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)” ?

0 Likes

#9

I made a bad reply and had to delete it .

This is just the automatically text by the forum

0 Likes

#10

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

2 Likes

#11

Hi, i have tried what you propose, and its work :slight_smile: .
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:

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 papillonD1 papillonD2

Thanks for yours times.

0 Likes

#12

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.

0 Likes

#13

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

0 Likes

#14

Here you go =):

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

#15

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

1 Like

#16

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/

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

http://www.lagers.org.uk/s4p/ref/classsprites_1_1_sprite.html

2 Likes