【p5.js Web Editor】アニメーションをgif形式で保存したい。

p5.js Web Editorを使って図を作成し、gif形式で保存しようと思ったら、意外とどうすればいいのか分からなかったのでここにメモしておく。

editor.p5js.org

saveGifという関数が用意されており、これをkeyPressedやmousePressedに入れた状態でPreviewを実行し、キーボード操作やマウス操作をすると自動で保存される。

saveGif(ファイル名, 長さ)

以下のコードだと、Previewで「s」を押すと画像が保存される。

function setup() {
  createCanvas(100, 100);
}

function draw() {
// 円を書くアニメーション。  
  circle(
    30 * sin(frameCount / 30) + width / 2,
    30 * cos(frameCount / 30) + height / 2,
    10
  );
}

// 「s」を押すとgif形式で保存される。
function keyPressed() {
  if (key === 's') {
    saveGif('mySketch', 5);
  }
}こ

これで保存された画像がこちら。

無事gif形式で保存できた。

参考サイト

reference | p5.js