从Gif动画库的Processing sketch导出gif [英] Exporting a gif from a Processing sketch w/ Gif-animation library

问题描述

我想将我的一个Processing草图导出为gif格式，并且正在使用超像素的Gif动画库（的功能将序列转换为GIF。有几个优点我可以想到：

1. 如果将框架保存在单独的线程中，您的导出将更快/不会影响处理的主要动画线程尽可能多的


2. 您的框架将变得更加清晰（由于您无需压缩，因此此功能最佳）


3. 根据您的动画内容，您可以优化您的gif ，以便在加载时更加方便网络/设备。

这是另一个没有毛刺的gif：

它一直使用以下代码导出：

  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）; 
旋转（角）; 
 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扩展PImage实现Runnable {//单独的线程保存图像
 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）; 
} 
 
} 
  

图像序列由导航到草图文件夹并运行

  convert * .png spin_anim.gif 
  / pre> 
 
 
如果您只想调整大小：
  convert旋转__ @
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();  
}

解决方案
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:



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:

If you save the frames in separate threads, your export will be faster/won't affect the Processing's main animation thread as much
Your frames will be crisp (given you're saving without much compression, for this png works best)
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:



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

                        
这篇关于从Gif动画库的Processing sketch导出gif的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！