Processingで動くgifアニメのtwitter アイコンを作った。

tumblrをながめてるとgif画像を作りたくなったので、Processingで動くgifのアイコンをつくった。

ググってみるとgif画像をつくるにはgifAnimationという外部ライブラリを使うといいらしい。これのインストールに多少手間取る。[Processing][仕様]外部ライブラリ(*.jar)の設置方法 | うえちょこ＠ぼろぐが役に立った。

そして拾ってきたコードを実行するも、うまく動かない... Processing2.0非対応かーとか思ったけど、JavaScript modeからJava modeにするとあっさり動いた。ライブラリがJava製だったからだった。OpenProcessingがJavaScript modeによる投稿を推奨していたり、ドットインストールでJavaScript modeが使われていたりしたので、JavaScript modeにしていた。

以下のコードによってgif画像を作った。　フォントがギザギザなのをどうにかしたい。

• gif

• コード

import gifAnimation.*;


GifMaker gifExport;

int x = 0;
String s ="tkmru";

void setup(){
  size(128,128); //twitter iconには128*128がいいらしい
  background(0);
  textSize(50);
  textAlign(RIGHT);
  frameRate(50);
  gifExport = new GifMaker(this, "icon.gif");
  gifExport.setQuality(20);
  gifExport.setRepeat(0); //エンドレスリピートする
} 

void draw () {
  background(0);
  float switch_position = 128 + textWidth(s);
  if (x > switch_position){ //textの左端が右端に届いたら
    gifExport.finish();
    exit();  
  }
  x++;
  text(s,x,85);

  gifExport.setDelay(50);
  gifExport.addFrame();
}

このアイコンだと地味すぎるので、いいかんじにしたい。