Are you taking the Gif?!

I did have a brief look at including Animated Gifs into my project. My simple idea was to animate the trainer onto the screen. In other words make it look like it is sliding across the bottom of the screen. If I was feeling very adventurous I was going to create a series of animations and play them in a loop.

 This idea looked silly!


I looked on Processing.org, which takes you to this link for the Animated Gif library:



http://www.extrapixel.ch/processing/gifAnimation/

You download this and it includes examples, including this following code:

/*
* Demonstrates the use of the GifAnimation library.
* the left animation is looping, the one in the middle
* plays once on mouse click and the one in the right
* is a PImage array.
* the first two pause if you hit the spacebar.
*/

import gifAnimation.*;

PImage[] animation;
Gif loopingGif;
Gif nonLoopingGif;
boolean pause = false;

public void setup() {
  size(400, 200);
  frameRate(100);
 
  println("gifAnimation " + Gif.version());
  // create the GifAnimation object for playback
  loopingGif = new Gif(this, "lavalamp.gif");
  loopingGif.loop();
  nonLoopingGif = new Gif(this, "lavalamp.gif");
  nonLoopingGif.play();
  nonLoopingGif.ignoreRepeat();
  // create the PImage array for the interactive display
  animation = Gif.getPImages(this, "lavalamp.gif");
}

void draw() {
  background(255 / (float)height * mouseY);
  image(loopingGif, 10, height / 2 - loopingGif.height / 2);
  image(nonLoopingGif, width/2 - nonLoopingGif.width/2, height / 2 - nonLoopingGif.height / 2);
  image(animation[(int) (animation.length / (float) (width) * mouseX)], width - 10 - animation[0].width, height / 2 - animation[0].height / 2);
}

void mousePressed() {
  nonLoopingGif.play();
}

void keyPressed() {
  if (key == ' ') {
    if (pause) {
      nonLoopingGif.play();
      loopingGif.play();
      pause = false;
    }
    else {
      nonLoopingGif.pause();
      loopingGif.pause();
      pause = true;
    }
  }
}


I tried to alter the code to suit my needs. I firstly tried to create a simple ifG animation in Photoshop of the trainer moving along the bottom left hand corner of the sketch. I did two versions: On of just the trainer moving with a transparent background and one with the sky background added.

When it came to adding it my processing sketch, I hit a few problems. Firstly, I found it quite difficult to arrange the layers (particles, background, Gif animation e.t.c) so they all worked perfectly. I did managed to get the gift working but it was just flickering and not working properly and even managed to get a capture of y webcam playing, but flickering. Not really the result I was after.
The other problem that I had with the Gif animation was that it tended to take the attention of the rest of the installation. With its constant movement, you tended to watch the animation rather than play with the stars and this is not what I wanted the public to do with my animation.
For all of this reasons, I have decided to scrap the animated Gif idea. Instead I am going to focus entirely on the layout of the still features of my background to add impact but not to take attention from my pretty twinkling stars!


GifAnimation is a Processing library to play and export GIF
animations. It is under a GPL license. The GIFEncoder & GIFDecoder
classes were written by Kevin Weiner. Please see the separate copyright notice in
the headers of the GifDecoder & GifEncoder classes.