元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 menu

【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行追記する。

参考サイト