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にするとあっさり動いた。
OpenProcessingがjavascript modeによる投稿を推奨していたり、ドットインストールでjavascript modeが使われていたりしたので、javascript modeにしていた。


そしてコード書いて、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();
}


ここまで4時間位。まあまあ良い感じ。
このアイコンだと地味すぎるので、そのうちどうにかする。