Processingでgifのtwitter icon作った。

tumblrながめてるとgif画像を作りたくなったので、Processingでgif画像つくってみた。

とりあえず、環境作って、ドットインストールとか入門サイトを眺める。void draw()が常にループしているなんて独特。IDEがたまに落ちるのが難点。JavaScript modeをインストールするのに手間取った。Processing2.0 で JavaScriptモード ・ Androidモード をインストールする方法 : だらっと学習帳に救われた。

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

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

以下のコードによってgif画像を作った。字が崩れるのをどうにかしたい。

  • gif

f:id:TAKEmaru:20130612000154g:plain

  • コード
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();
}

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