ProcessingでGIFアニメを作成する

Processing

GIFアニメ、流行っているみたいですね。（改めて書くと今さら感がありますが…）

Processingクックブックサイトを目指すつもりはないのですが、他に手頃なネタが思いつかなかったので、今日はProcessingを使ったGIFアニメの作成方法を解説してみたいと思います。

ProcessingによるGIFアニメの作成

Wikipediaの説明にあるとおり、GIFアニメはGIF形式の画像を使ったアニメーションです。色数が256色しか使えないなどの制限はありますが、ちょっとした動画を手軽に共有したい時などに重宝します。

Processingを使ったGIFアニメの作成は以下の手順で行います。

  1. GifAnimation（拡張ライブラリ）のインストール
  2. スケッチへのGifAnimationの追加
  3. GifMakerクラスによるアニメーションの出力

各手順を説明します。

GifAnimationのインストール

Processingでは、GifAnimationという拡張ライブラリを利用することで、GIFアニメを出力することができます。

GifAnimationのインストールは、SketchメニューのImport Library...→Add Library...を選択すると出てくるLibrary ManagerでGifAnimationを選択することで行います。

f:id:tkitao:20140707204703p:plain

スケッチへのGifAnimationの追加

GifAnimationのインストール完了後、スケッチ作成時にSketchメニューのImport Library...から、新たに追加されたGifAnimationを選択することで、ライブラリが利用可能になります。

ライブラリの追加は作成するスケッチごとに毎回行う必要があります。

GifMakerクラスによるアニメーションの出力

GIFアニメの作成はGifAnimationライブラリのGifMakerクラスで行います。

以下コード例です。

import gifAnimation.*;

GifMaker gifMaker;

void setup() {
  size(300, 300, OPENGL);
  frameRate(50);

  gifMaker = new GifMaker(this, "box.gif"); // 'box.gif'という名前でGIFアニメを作成
  gifMaker.setRepeat(0); // エンドレス再生する
  gifMaker.setDelay(20); // アニメーションの間隔を20ms(=50fps)に設定
}

void draw() {
  background(64);
  fill(128, 255, 192);

  lights();
  translate(150, 150);
  rotateX(TWO_PI / 100 * frameCount);
  rotateY(TWO_PI / 200 * frameCount);
  box(120);

  gifMaker.addFrame(); // 現在の画面をアニメーションのコマとして追加

  if (frameCount >= 100) { // 100コマアニメーションした時
    gifMaker.finish(); // GIFアニメの作成を終了
    exit();
  }
}

APIの説明は公式ページに一通り記載されていますが、setDelayメソッドは使用に若干注意が必要ですので補足しておきます。

setDelayメソッドの使用上の注意点

GifMakerクラスのsetDelayメソッドは、その後のaddFrameメソッドで追加されたコマの再生時間を設定するメソッドで、引数の単位はmsecになります。例えば毎秒20コマでアニメーションを再生したい場合は、1000/20=50msecなので、引数に50を指定することで実現できます。再生時間はコマごとに変更することも可能です。

各ブラウザで再生できるGIFアニメーションの速度は毎秒50コマが限度と言われているので、setDelayの引数は最速（最小）で20を限度にしておく必要があります。

出力結果

実際の出力結果がこちらです。

f:id:tkitao:20140707201400g:plain

画像一枚でアニメーションを再現できるのは魅力的ですね。