Processing Tutorial -- Showing Animated Gifs, Part 2

--D. Thiebaut (talk) 10:32, 12 October 2017 (EDT)

---

This is Part 2 of the Processing tutorial on creating an aquarium with animated fish swimming in it.

Object-Oriented Solution

For this solution, we create a class for the fish, and store it in a separate pde file called Fish. This file is saved in the original folder of our aquarium sketch.

Fish Class

// Fish.pde
// D. Thiebaut
// A class definition for an animated fish with several frames.
//

class Fish {
   // global members
   PImage[] frames = new PImage[8];
   int noFrames = 0;
   float x =random( -200, 1200 );
   float y = random( 100, 300 );
   
   // constructor
   Fish(  ) {
     noFrames = 0;
   }
   
   // add a new frame to the fish.  The max number is 8.
   void addFrame( PImage frame ) {
     frames[ noFrames ] = frame;
     noFrames++;
   }
   
   // move the fish to the right, and if off the tank image, 
   // bring it back to the left.
   void move() {
     x = x + 5;
     if ( x > width+100)  {
        x = -250;
        y = random( 0, 400 );
     }
     y = y + random( -2, 2 );
   }
   
   // draw a new frame of the fish.
   void draw() {
     image( frames[frameCount%noFrames], x, y );
   }

}

Aquarium.pde

This is the main program containing the setup() and draw() functions.

// aquarium.pde
// D. Thiebaut
// 
// This sketch displays moving fish on a background
// image of an aquarium.
// The fish are generated from 8 images taken from an
// animated gif taken from 
// http://bestanimations.com/Animals/Fish/animated-fish-gif-3.gif
// The background image of the tank is taken from
// http://naturalaquariums.com/tankpic.jpg
// See
// http://www.science.smith.edu/dftwiki/index.php/Processing_Tutorial_--_Showing_Animated_Gifs
// for explanations about the process of putting this code together.
//

Fish[] schoolOfFish; // the array containing all the fish
int maxNoFish = 10;  // the total number of fish displayed
PImage tank;

void setup() {
  // window geometry 
  size( 1000, 600 );
  smooth();
  
  // get the background image of the aquarium tank. 
  // This will be displayed every time draw() is called.
  tank = loadImage( "aquarium.jpg" );
  
  // create the collection of images making up the animation
  // for a given fish.
  PImage[] images = new PImage[8];
  images[0] = loadImage( "fish0.gif" );
  images[1] = loadImage( "fish1.gif" );
  images[2] = loadImage( "fish2.gif" );
  images[3] = loadImage( "fish3.gif" );
  images[4] = loadImage( "fish4.gif" );
  images[5] = loadImage( "fish5.gif" );
  images[6] = loadImage( "fish6.gif" );
  images[7] = loadImage( "fish7.gif" );

  // create the school of fish
  schoolOfFish = new Fish[maxNoFish];
  for ( int fishNo = 0; fishNo < maxNoFish; fishNo++ ) {
    // new fish
    schoolOfFish[ fishNo ] = new Fish( );

    // add 8 frames for each fish.  Do not 
    // start with frame 0 for all fish, so that
    // they will not be synchronized.
    for ( int i=0; i<8; i++ ) { 
     schoolOfFish[ fishNo ].addFrame( 
           images[ (i + fishNo*2 ) % 8 ] );
    }
  }
  
  // set the frame rate to 10, so that fish are not
  // swimming too fast.
  frameRate( 10 );
}


void draw() {
  //--- Animation loop ---
  
  // display the background image.  This erases the previous
  // images of the fish, so that we can draw newer frames,
  // offset by some tiny amount.
  image( tank, 0, 0, width, height );
  
  // display new frame for each fish, then move the fish
  // forward.
  for ( int fishNo = 0; fishNo < maxNoFish; fishNo++ ) { 
    schoolOfFish[ fishNo ].draw();
    schoolOfFish[ fishNo ].move();
  }  
}

Files

See Part 1 of the tutorial for a list of image files, and references to where they were captured from.