Export gif from sketch of processing with Gif animation library

Question

I would like to export one of my processing thumbnails to a gif form and use the extrapixel GIF animation library ( http://extrapixel.imtqy.com/gif-animation/ ) for this.

I can export the correct number of frames, but they all seem empty.
Any idea 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(); } 

Answer 1

Kevin’s offer is good. If you set the frame rate to 12, maybe you should also set 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 tested and everything seems to be fine:

In some ways, the gifAnimation library is convenient because it deals with coding frames for you, but note that there are a few wrinkled frames here.

If you want complete control over your frames, you can export the sequence of images and use something like Image Magick to convert the sequence to gif. There are several advantages that I can come up with:

• If you save frames in separate threads, your export will be faster / will not affect the flow of the main animation of the process as much as possible
• Your frames will be crisp (given that you save without much compression, as this png works best)
• Depending on your animation content, you can optimize your gif so that it loads more on the Internet / device when loading.

Here is another gif without glitches:

It exports 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 sequence of images was converted by going to the sketch folder and executing

 convert *.png spin_anim.gif 

If you just want to resize it:

 convert spin_anim.gif -resize 100x100 spin_anim_small.gif 

NTN