Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Exporting a gif from a Processing sketch w/ Gif-animation library

I'd like to export one of my Processing sketches into gif form, and am using extrapixel's Gif-animation library (http://extrapixel.github.io/gif-animation/) to do so.

I am able to export the correct number of frames, but they all appear to be empty.
Any ideas why this is happening?

import gifAnimation.*;

GifMaker gifExport;

float angle = 0.1;

void setup() {
  size(500, 500);
  smooth();
  noStroke();
  background(0);

  frameRate(12);
  gifExport = new GifMaker(this, "spin rect sine growth.gif");
  gifExport.setRepeat(0); // make it an "endless" animation
  gifExport.setTransparent(255); // make white the transparent color -- match browser bg color
}

void draw() {

  float size = map(sin(angle),-1,1,0,height);
  rectMode(CENTER);
  translate(width/2, height/2);
  rotate(angle);
  noStroke();
  fill(255,255);
  rect(0,0, size, size);
  angle += 0.0523 ;

  noStroke();
  fill( 0, 15);
  rect(0, 0, width, height);

  gifExport.setDelay(0);  //maybe no delay?
  gifExport.addFrame();

  if (frameCount == 120) gifExport.finish();  
}
like image 968
Matt Voda Avatar asked Mar 02 '14 04:03

Matt Voda


People also ask

How do I export animated gifs?

Choose File > Export > Export image or File > Export > Export Animated GIF.

Can I export Figma animation as GIF?

You can record your screen and then export as GIF or video.


1 Answers

Kevin's suggestion is good. If you are setting the frame rate to 12 perhaps you should also set the the delay to 1000/12.

import gifAnimation.*;

GifMaker gifExport;

float angle = 0.1;

void setup() {
  size(500, 500);
  smooth();
  noStroke();
  background(0);

  frameRate(12);
  gifExport = new GifMaker(this, "spin rect sine growth.gif");
  gifExport.setRepeat(0); // make it an "endless" animation
  gifExport.setTransparent(255); // make white the transparent color -- match browser bg color
  gifExport.setDelay(1000/12);  //12fps in ms

}

void draw() {

  float size = map(sin(angle),-1,1,0,height);
  rectMode(CENTER);
  translate(width/2, height/2);
  rotate(angle);
  noStroke();
  fill(255,255);
  rect(0,0, size, size);
  angle += 0.0523 ;

  noStroke();
  fill( 0, 15);
  rect(0, 0, width, height);

  gifExport.addFrame();

  if (frameCount == 120) gifExport.finish();  
}

I've tested and it seems to work just fine:

gif small preview

In a way the gifAnimation library is handy because it deals with encoding frames for you but notice there are a few glitchy frames here and there.

If you want total control of your frames you can export an image sequence and use something like Image Magick to convert the sequence to a gif. There a few advantages I can think off:

  1. If you save the frames in separate threads, your export will be faster/won't affect the Processing's main animation thread as much
  2. Your frames will be crisp (given you're saving without much compression, for this png works best)
  3. Depending on your animation content you can optimize your gif so it's more web/device friendly when loading.

Here's another gif with no glitches:

small gif no glitches

It has been exporting using this code:

float angle = 0.1;

void setup() {
  size(500, 500);
  smooth();
  noStroke();
  background(0);

  frameRate(12);
}

void draw() {

  float size = map(sin(angle),-1,1,0,height);
  rectMode(CENTER);
  translate(width/2, height/2);
  rotate(angle);
  noStroke();
  fill(255,255);
  rect(0,0, size, size);
  angle += 0.0523 ;

  noStroke();
  fill( 0, 15);
  rect(0, 0, width, height);

  if(frameCount <= 120){
    TImage frame = new TImage(width,height,RGB,sketchPath("frame_"+nf(frameCount,3)+".png"));
    frame.set(0,0,get());
    frame.saveThreaded();
  }
}
class TImage extends PImage implements Runnable{//separate thread for saving images
  String filename;

  TImage(int w,int h,int format,String filename){
    this.filename = filename;
    init(w,h,format);
  }

  public void saveThreaded(){
    new Thread(this).start();
  }

  public void run(){
    this.save(filename);
  }

}

And the image sequence was converted by navigating to the sketch folder and running

convert *.png spin_anim.gif

If you simply want to resize it:

convert spin_anim.gif -resize 100x100 spin_anim_small.gif

HTH

like image 159
George Profenza Avatar answered Oct 21 '22 15:10

George Profenza