Processing用、お手軽アニメGIF録画クラス「GifRecorder」の導入方法

2014-11-14

THE GUILDで毎週開催されている、インタラクティブコーディング勉強会。Processingでこさえた成果(=スケッチ)をブログやTwitterなどで気軽に共有できるように、アニメーションGIFで録画するためのクラスを作成・活用しています。

こんな感じに録画できます

コンセプトは「お手軽」

録画クラス「GifRecorder」のコンセプトは「お手軽」。必要最低限の機能を、とにかく手軽に使えるように設計しました。既存のスケッチに3行追加するだけでカンタンに録画できます。

初回のみ下準備が必要です。順に説明していきましょう。

0. 必要なライブラリをインストールする

録画クラス「GifRecorder」を使うためには、「gifAnimation」というライブラリをインストールする必要があります。まだインストールしていない方は、以下のサイトからZIPファイルをダウンロードしてください。

Gif-animation by extrapixel

ZIPファイルを解凍すると、下図のようなフォルダ構成になっているかと思います。

このうち「gifAnimation」フォルダのみ、Processingのライブラリ用フォルダにコピーしてください。Macをお使いなら「(ホーム)/書類/Processing/libraries」です。

これで下準備は完了です。

1. GifRecorderクラスをスケッチに組み込む

GifRecorderの最新のソースを、Gistからダウンロードしてください。

A class that makes it easy to record a sketch in animated GIF · GitHub

ダウンロードした「GifRecorder.pde」を、あなたのスケッチのフォルダに配置してください。

Processingを再起動し、もう一度スケッチを開いてください。「GifRecorder」のタブがあれば成功です。

2. GifRecorderを使う

以上で準備が整ったので、いよいよGifRecorderを使うためのコードを書いていきます。まずはファイルの先頭で、グローバル変数としてレコーダーを宣言・初期化しましょう。

GifRecorder recorder = new GifRecorder(this);

次に、draw関数の最後にフレーム記録用のコードを仕込みます。

void draw() {
  ...

  recorder.onDraw();
}

あとはお好みの方法で録画するだけ。

例えば、マウスクリックで10秒分録画したければ…

void mouseClicked() {
  recorder.recordForSeconds("out.gif", 10);
}

スペースキーを押してから100フレーム分録画したければ…

void keyPressed() {
  if (keyCode == 32) {
    recorder.recordFrames("out.gif", 100); 
  }
}

組み込み方法をまとめると、コード全体はこんな雰囲気です。

GifRecorder recorder = new GifRecorder(this);

void setup() {
  size(400, 300);
}

void draw() {
  background(0);
  fill(255);
  ellipse(width / 2, height / 2, 50, 50);

  recorder.onDraw();
}

void mouseClicked() {
  recorder.recordForSeconds("out.gif", 5); 
}

TIPS: ファイルサイズが大きいときは

そのまま録画すると出力結果のファイルサイズが大きくなってしまい、SNSなどで共有するには重くなってしまうかもしれません。そういうときは…？

A. スケッチのサイズを小さくする

当たり前ではありますが、フレーム画像のサイズが大きいほどファイルサイズは増えてしまいます。size関数に渡す数字を減らして、もう少しスケッチを小さくしてみてはいかがでしょうか。

B. 録画秒数を減らす

これまた当たり前ではありますが、録画時間が長いほどファイルサイズは増えてしまいます。短くしてみることも考えてみましょう。

C. 録画フレーム数を減らす

1秒あたりのフレーム数が多くても、ファイルサイズは増えてしまいます。Processingの初期設定ではフレームレートが60なので、つまりは1秒あたり60枚のフレーム画像が記録されることになります。とても滑らかな映像になりますが、普通はそんなにいらないですよね。

「もっと大ざっぱでいいから軽くしてよ！」という方のために、GifRecorderには数枚おきに録画する機能があります。例えば、3枚おきに録画(= 2枚スキップ)すれば、サイズは3分の1になるわけです。この場合は初期化のコードを…

GifRecorder recorder = new GifRecorder(
  this,
  60,    // Processingのフレームレートの初期値は60
  3);    // 3枚おきに録画 (= 2枚スキップ)

こうすればOKです。

(勉強会のまとめページはこちら)

Share:
Hatena X/Twitter