从带有 Gif 动画库的处理草图中导出 gif [英] Exporting a gif from a Processing sketch w/ Gif-animation library

问题描述

我想将我的处理草图之一导出为 gif 格式，并且正在使用 extrapixel 的 Gif 动画库( 之类的东西将序列转换为 gif.我可以想到一些优点:

1. 如果您将帧保存在单独的线程中，您的导出会更快/不会像处理的主动画线程那样影响
2. 你的帧会很清晰(假设你没有太多压缩就保存，因为这个 png 效果最好)
3. 根据您的动画内容，您可以优化您的 gif 使其更适合网络/设备加载时.

这是另一个没有故障的 gif:

它一直在使用此代码导出:

浮动角度= 0.1;无效设置(){大小(500, 500);光滑的();noStroke();背景(0)；帧率(12)；}无效画(){浮动大小 = 地图(罪(角度)，-1,1,0，高度)；rectMode(中心)；翻译(宽/2，高/2)；旋转(角度)；noStroke();填充(255,255)；矩形(0,0，大小，大小)；角度 += 0.0523 ;noStroke();填充(0, 15);rect(0, 0, 宽度, 高度);如果(帧计数 <= 120){TImage frame = new TImage(width,height,RGB,sketchPath("frame_"+nf(frameCount,3)+".png"));frame.set(0,0,get());frame.saveThreaded();}}类 TImage 扩展 PImage 实现 Runnable{//单独的线程来保存图像字符串文件名；TImage(int w,int h,int 格式,字符串文件名){this.filename = 文件名；初始化(w，h，格式)；}public void saveThreaded(){新线程(这个).开始()；}公共无效运行(){this.save(文件名);}}

并通过导航到草图文件夹并运行来转换图像序列

convert *.png spin_anim.gif

如果你只是想调整它的大小:

convert spin_anim.gif -resize 100x100 spin_anim_small.gif

HTH

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:

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:

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 动画库的处理草图中导出 gif的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！