Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
86 lines (71 sloc) 3.24 KB

Use Processing to make an animated GIF

Step 1: Download and install the gifAnimation processing library

Go to https://github.com/01010101/GifAnimation and download GifAnimation.zip. You should now have a folder called GifAnimation-master.zip in your downloads folder. It should look similar to this:


Extract the folder, rename it as GifAnimation and copy it to your Processing library folder. On my Windows PC, the path to my libraries folder is C:\Users\Art\Documents\Processing\libraries. Here's a screenshot of the my GifAnimation folder in my Processing libraries folder:

Step 2: Write a Processing program

Here's the Processing program I'm going to convert to an animated gif. It's an animation of a series of circles:

  int diameter = 10;
  public void setup()
  {
    size(200,200);
    smooth();
    frameRate(2); //screen is drawn 2 times a second, does not effect speed of gif animation
  }
  public void draw()
  {
    ellipse(100,100,diameter,diameter);
    diameter = diameter + 10;
    println(frameCount);
  }

If you run the program, you'll notice that after frameCount reaches 29 or so, the circle is so big that it fills the screen. After that there is no noticeable change in the appearance of the animation.

Step 3: Modify the program to use the gifAnimation processing library

Now we are going to add the code that allows us to export the animation as a gif file. The new program is:

import gifAnimation.*;
GifMaker gifExport;

int diameter = 10;
public void setup()
{
  size(200,200);
  gifExport = new GifMaker(this, "test.gif");
  gifExport.setRepeat(0); // make it an "endless" animation
  gifExport.setQuality(255);  // quality range 0 - 255
  smooth();
  frameRate(2); //screen is drawn 2 times a second, does not effect speed of gif animation
}
public void draw()
{
  ellipse(100,100,diameter,diameter);
  diameter = diameter + 10;
  println(frameCount);
  export();
}
void export() 
{
  if(frameCount < 29) 
  {
    gifExport.setDelay(500); //half second delay, this is where the gif animation speed is set
    gifExport.addFrame();
  } 
  else 
  {
    gifExport.finish();
    println("gif saved");
    exit();
  }
}

Note that the code in export() checks to see if frameCount has reached 29. If it has, the gif is finished and exit() is called to quit the program.

Step 4: Find the animated gif in the sketch folder

After you run the modified program, there will now be an animated gif in the sketch folder. Here's what mine looked like:

Double click on test.gif and you should see your animation:

You can find out more details on the gifAnimation library at the sites that I used to create this page:

Thanks to Jordan Orelli for creating the gifAnimation library and 01010101 for porting it to Processing 3.X.