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(); }
このアイコンだと地味すぎるので、いいかんじにしたい。