从处理草图导出为GIF瓦特/的Gif动画库 [英] Exporting a gif from a Processing sketch w/ Gif-animation library
问题描述
想我导出我的处理草图变成GIF格式之一，现在用extrapixel的的Gif动画库（的 http://extrapixel.github.io/gif-animation/ ）这样做。
我能够输出帧的正确数目，但它们都显示为空。结果
任何想法，为什么发生这种情况？
进口gifAnimation *。GifMaker gifExport;飘角= 0.1;无效设置（）{
尺寸（500，500）;
光滑（）;
noStroke（）;
背景（0）; 帧率（12）;
gifExport =新GifMaker（这一点，旋转矩形正弦growth.gif）;
gifExport.setRepeat（0）; //使其成为没完没了动画
gifExport.setTransparent（255）; //使白色透明色 - 匹配的浏览器背景颜色
}无效的draw（）{ 浮动大小=地图（罪（角）， - 1,1,0，高度）;
rectMode（中心）;
翻译（宽度/ 2，高度/ 2）;
旋转（角度）;
noStroke（）;
填写（255,255）;
矩形（0,0，尺寸，大小）;
角+ = 0.0523; noStroke（）;
填写（0，15）;
矩形（0，0，宽度，高度）; gifExport.setDelay（0）; //也许没有延迟？
gifExport.addFrame（）; 如果（frameCount == 120）gifExport.finish（）;
}
凯文的建议是很好的。如果您在帧频设定为12也许你还应该设置延迟到1000年至1012年。
进口gifAnimation *。GifMaker gifExport;飘角= 0.1;无效设置（）{
尺寸（500，500）;
光滑（）;
noStroke（）;
背景（0）; 帧率（12）;
gifExport =新GifMaker（这一点，旋转矩形正弦growth.gif）;
gifExport.setRepeat（0）; //使其成为没完没了动画
gifExport.setTransparent（255）; //使白色透明色 - 匹配的浏览器背景颜色
gifExport.setDelay（1000至1012年）; //以毫秒为12fps的}无效的draw（）{ 浮动大小=地图（罪（角）， - 1,1,0，高度）;
rectMode（中心）;
翻译（宽度/ 2，高度/ 2）;
旋转（角度）;
noStroke（）;
填写（255,255）;
矩形（0,0，尺寸，大小）;
角+ = 0.0523; noStroke（）;
填写（0，15）;
矩形（0，0，宽度，高度）; gifExport.addFrame（）; 如果（frameCount == 120）gifExport.finish（）;
}
我测试过，它似乎只是罚款工作：
在某种程度上，gifAnimation库是方便，因为它与编码帧涉及你，但看到有几个出问题的帧在这里和那里。
如果你希望你的帧的完全控制，你可以导出图像序列，并使用类似难懂以序列转换为GIF。有一些优势，我能想到了：
- 如果您保存在单独的线程框架，你的出口将更快/不会影响加工的主要动画线程之多
- 您的帧会脆（给你节省没有太多的COM pression，这PNG效果最好）
- 根据您的动画内容，您可以优化GIF 所以当装载更多的网络/设备友好。
下面是与无毛刺另一GIF：
它使用这种code在出口：
浮动角= 0.1;无效设置（）{
尺寸（500，500）;
光滑（）;
noStroke（）;
背景（0）; 帧率（12）;
}无效的draw（）{ 浮动大小=地图（罪（角）， - 1,1,0，高度）;
rectMode（中心）;
翻译（宽度/ 2，高度/ 2）;
旋转（角度）;
noStroke（）;
填写（255,255）;
矩形（0,0，尺寸，大小）;
角+ = 0.0523; noStroke（）;
填写（0，15）;
矩形（0，0，宽度，高度）; 如果（frameCount＆LT; = 120）{
的TImage帧=新的TImage（宽度，高度，RGB，sketchPath（框架_+ NF（frameCount，3）+）PNG）;
frame.set（0,0，获得（））;
frame.saveThreaded（）;
}
}
一流的TImage扩展PImage实现Runnable {//单独的线程来保存图像
字符串的文件名; 的TImage（INT W，INT小时，INT格式字符串文件名）{
this.filename =文件名;
的init（W，H，格式）;
} 公共无效saveThreaded（）{
新的Thread（本）。开始（）;
} 公共无效的run（）{
this.save（文件名）;
}}
和图像序列被导航到草图文件夹，运行转换
转换*。PNG spin_anim.gif
如果您只是想调整它的大小：
转换spin_anim.gif调整大小100×100 spin_anim_small.gif
心连心
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瓦特/的Gif动画库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
