a port of the Processing Visualization Language

AnimatedSprite

by James Patterson. Press the mouse button to change animations. Demonstrates loading, displaying, and animating GIF images. It would be easy to write a program to display animated GIFs, but would not allow as much control over the display sequence and rate of display.

Original Processing.org Example: AnimatedSprite

// All Examples Written by Casey Reas and Ben Fry

// unless otherwise stated.

/* @pjs preload="data/PT_Shifty_0000.gif, data/PT_Shifty_0001.gif, data/PT_Shifty_0002.gif, 

data/PT_Shifty_0003.gif, data/PT_Shifty_0004.gif, data/PT_Shifty_0005.gif, 

data/PT_Shifty_0006.gif, data/PT_Shifty_0007.gif, data/PT_Shifty_0008.gif, 

data/PT_Shifty_0009.gif, data/PT_Shifty_0010.gif, data/PT_Shifty_0011.gif, 

data/PT_Shifty_0012.gif, data/PT_Shifty_0013.gif, data/PT_Shifty_0014.gif, 

data/PT_Shifty_0015.gif, data/PT_Shifty_0016.gif, data/PT_Shifty_0017.gif, 

data/PT_Shifty_0018.gif, data/PT_Shifty_0019.gif, data/PT_Shifty_0020.gif, 

data/PT_Shifty_0021.gif, data/PT_Shifty_0022.gif, data/PT_Shifty_0023.gif, 

data/PT_Shifty_0024.gif, data/PT_Shifty_0025.gif, data/PT_Shifty_0026.gif, 

data/PT_Shifty_0027.gif, data/PT_Shifty_0028.gif, data/PT_Shifty_0029.gif, 

data/PT_Shifty_0030.gif, data/PT_Shifty_0031.gif, data/PT_Shifty_0032.gif, 

data/PT_Shifty_0033.gif, data/PT_Shifty_0034.gif, data/PT_Shifty_0035.gif, 

data/PT_Shifty_0036.gif, data/PT_Shifty_0037.gif, data/PT_Teddy_0000.gif, 

data/PT_Teddy_0001.gif, data/PT_Teddy_0002.gif, data/PT_Teddy_0003.gif, 

data/PT_Teddy_0004.gif, data/PT_Teddy_0005.gif, data/PT_Teddy_0006.gif, 

data/PT_Teddy_0007.gif, data/PT_Teddy_0008.gif, data/PT_Teddy_0009.gif, 

data/PT_Teddy_0010.gif, data/PT_Teddy_0011.gif, data/PT_Teddy_0012.gif, 

data/PT_Teddy_0013.gif, data/PT_Teddy_0014.gif, data/PT_Teddy_0015.gif, 

data/PT_Teddy_0016.gif, data/PT_Teddy_0017.gif, data/PT_Teddy_0018.gif, 

data/PT_Teddy_0019.gif, data/PT_Teddy_0020.gif, data/PT_Teddy_0021.gif, 

data/PT_Teddy_0022.gif, data/PT_Teddy_0023.gif, data/PT_Teddy_0024.gif, 

data/PT_Teddy_0025.gif, data/PT_Teddy_0026.gif, data/PT_Teddy_0027.gif, 

data/PT_Teddy_0028.gif, data/PT_Teddy_0029.gif, data/PT_Teddy_0030.gif, 

data/PT_Teddy_0031.gif, data/PT_Teddy_0032.gif, data/PT_Teddy_0033.gif, 

data/PT_Teddy_0034.gif, data/PT_Teddy_0035.gif, data/PT_Teddy_0036.gif, 

data/PT_Teddy_0037.gif, data/PT_Teddy_0038.gif, data/PT_Teddy_0039.gif, 

data/PT_Teddy_0040.gif, data/PT_Teddy_0041.gif, data/PT_Teddy_0042.gif, 

data/PT_Teddy_0043.gif, data/PT_Teddy_0044.gif, data/PT_Teddy_0045.gif, 

data/PT_Teddy_0046.gif, data/PT_Teddy_0047.gif, data/PT_Teddy_0048.gif, 

data/PT_Teddy_0049.gif, data/PT_Teddy_0050.gif, data/PT_Teddy_0051.gif, 

data/PT_Teddy_0052.gif, data/PT_Teddy_0053.gif, data/PT_Teddy_0054.gif, 

data/PT_Teddy_0055.gif, data/PT_Teddy_0056.gif, data/PT_Teddy_0057.gif, 

data/PT_Teddy_0058.gif, data/PT_Teddy_0059.gif"; */



Animation animation1, animation2;

float xpos, ypos;

float drag = 30.0;



void setup() {

  size(200, 200);

  background(255, 204, 0);

  frameRate(24);

  animation1 = new Animation("PT_Shifty_", 38);

  animation2 = new Animation("PT_Teddy_", 60);

}



void draw() { 

  float difx = mouseX - xpos;

  if (abs(difx) > 1.0) {

    xpos = xpos + difx/drag;

    xpos = constrain(xpos, 0, width);

  }



  // Display the sprite at the position xpos, ypos

  if (mousePressed) {

    background(153, 153, 0);

    animation1.display(xpos-animation1.getWidth()/2, ypos);

  } else {

    background(255, 204, 0);

    animation2.display(xpos-animation1.getWidth()/2, ypos);

  }

}







// Class for animating a sequence of GIFs



class Animation {

  PImage[] images;

  int imageCount;

  int frame;

  

  Animation(String imagePrefix, int count) {

    imageCount = count;

    images = new PImage[imageCount];



    for (int i = 0; i < imageCount; i++) {

      // Use nf() to number format 'i' into four digits

      String filename = "data/" + imagePrefix + nf(i, 4) + ".gif";

      images[i] = loadImage(filename);

    }

  }



  void display(float xpos, float ypos) {

    frame = (frame+1) % imageCount;

    image(images[frame], xpos, ypos);

  }

  

  int getWidth() {

    return images[0].width;

  }

}
Fork me on GitHub