Processing 3でGIFアニメを作って保存する方法

最近個人的にProcessingにハマってます。面白いですよね、ジェネラティブ・アート。

作ったスケッチはやっぱりGIFアニメで保存して、サイトなどに載せたいですよね。スケッチをGIFアニメにできる「gifAnimation」というライブラリがあります。Processing 2以下までにしか対応してないと思ってたら、サラッとProcessing 3以上対応ver.がありました。

ダウンロードとインストール

extrapixel/gif-animation at 3.0

• 3.0ブランチにて「Download ZIP」からファイル一式をダウンロードします
• Zipを解凍して、gifAnimationフォルダを、~/Documents/Processing/libraries/にコピーします
• 完了

GIFアニメの作成方法

// gifAnimationライブラリを読み込む
import gifAnimation.*;

// GifMakerクラスを呼ぶ
GifMaker gifExport;

void setup(){
  // いつも書いてるもろもろのコード
  frameRate(50); // 50fpsでアニメーションする

  // GIFアニメ出力の設定
  gifExport = new GifMaker(this, "export.gif"); // GifMakerオブジェクトを作る、第2引数にファイル名
  gifExport.setRepeat(0); // エンドレス再生
  gifExport.setQuality(10); // クオリティ(デフォルト10)
  gifExport.setDelay(20); // アニメーションの間隔を20ms(50fps)に
}

void draw(){
  // いつも書いてるもろもろのコード

  // GIFアニメ出力用のコード
  // 50fps * 3、つまり丸3秒録画する
  if(frameCount <= 50*3){
    gifExport.addFrame(); // フレームを追加
  } else {
    gifExport.finish(); // 終了してファイル保存
  }
}

だいたいこんな感じです。こんな感じで録画したのが、一番上に貼っているGIFです。リサイズやファイルサイズ調整はPhotoshopでやってますが。

ちなみに、録画中はアニメーションの再生がめちゃくちゃ遅くなります。保存されるGIFアニメ自体は設定した通りの速度です。

その他のメソッドなどはこちらにあります。

みんなもスケッチをGIFアニメで保存して公開しよう！