Экспорт изображения из эскиза Обработка с библиотекой Gif-анимации

Question

Я хотел бы экспортировать один из моих эскизов Обработки в форму gif, и для этого я использую библиотеку Gif-анимации extrapixel ( http://extrapixel.github.io/gif-animation/).

Я могу экспортировать правильное количество кадров, но все они кажутся пустыми.
Есть идеи, почему это происходит?

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

Предложение Кевина хорошо. Если вы устанавливаете частоту кадров 12, возможно, вам следует также установить задержку 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();  
}

Я проверил, и, кажется, работает нормально:

В некотором смысле, библиотека gifAnimation удобна, потому что она имеет дело с кадрами кодирования для вас, но обратите внимание, что здесь есть кое-какие хитрые кадры.

Если вам нужен полный контроль над вашими кадрами, вы можете экспортировать последовательность изображений и использовать что-то вроде Image Magick для преобразования последовательности в gif. Есть несколько преимуществ, которые я могу придумать:

1. Если вы сохраняете кадры в отдельных потоках, ваш экспорт будет быстрее / не будет сильно влиять на основной поток анимации обработки
2. Ваши кадры будут четкими (учитывая, что вы сохраняете без особого сжатия, этот png работает лучше всего)
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);
  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);
  }

}

И последовательность изображений была преобразована путем перехода к папке эскиза и запуска

convert *.png spin_anim.gif

Если вы просто хотите изменить его размер:

convert spin_anim.gif -resize 100x100 spin_anim_small.gif

НТН