【p5.js】p5.jsで作成したものを画像として保存する

p5.jsで描画したものを画像ファイルにしたかったので、その方法を調べました。静止画とgifアニメーションにできることが分かりました。ただ、gifアニは元のアニメーションと全く同じ速さで動いているわけではなさそうなので、そこだけ注意です。

saveCanvas():静止画として保存

p5.jsのsaveCanvas()を使うとjpgかpngで書き出しできる。

• saveCanvas(selectedCanvas, [filename], [extension])
  • selectedCanvas:createCanvas()で生成したもの
  • filename:ファイル名
  • extension:jpgかpngを指定する

//サンプルコード
function setup() {
  let c = createCanvas(100, 100);
  background(255, 0, 0);

  //jpgファイルとして保存する
  saveCanvas(c, 'myCanvas', 'jpg');
}

gifアニメーションとして保存

p5.jsのライブラリページで紹介している「p5.createloop」というライブラリを使う。

使い方

1. HTMLにp5.jsとp5.createloopを読み込む。
2. setup()に、createLoop({duration:3, gif:true});を追記する。

詳細は割愛しますが、これでgifアニとして書き出される。パラメータについては、p5.createloopのReadmeを確認する。

//サンプルコード
function setup() {
  createCanvas(400, 400);
  fill(0);
  frameRate(30);
  //gifアニとして書き出す
  createLoop({duration:3, gif:true});
}

プログラムの実行後、少し待つとブラウザにgifアニが表示される。その画像をクリックするとダウンロードできる。

まとめ

• jpgかpngに書き出す場合は、saveCanvas()を使う。
• gifアニに書き出す場合は、p5.createloopというライブラリを使いコードを1行追記する。

参考サイト

• https://www.npmjs.com/package/p5.createloop