P5.js 日本語リファレンス(saveFrames)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の saveFrames関数を説明します。

saveFrames()

説明文

ムービーの作成に使用できる一連のフレームをキャプチャします。コールバックを受け入れます。たとえば、フレームをサーバーに送信してサーバーに保存したり、ムービーに変換したりできます。コールバックが提供されない場合、ブラウザは作成されたばかりのすべての画像をダウンロードしようとして保存ダイアログをポップアップします。提供されるコールバックでは、画像データはデフォルトでは保存されませんが, 代わりにオブジェクトの配列として引数としてコールバック関数に渡されます。配列のサイズはフレームの総数と同じです。

saveFrames() はアニメーションの最初の15フレームのみを保存することに注意してください。より長いアニメーションをエクスポートするには ccapture.js などのライブラリを調べます。

構文

saveFrames(filename, extension, duration, framerate, [callback])

パラメタ

• filename
  String：ファイル名

• extension
  String："jpg" または "png"

• duration
  Number：フレームを保存する秒単位の期間

• framerate
  Number：フレームを保存するフレームレート(単位時間あたりのフレーム数)

• callback
  Function(Array)：画像データを処理するために実行されるコールバック関数。この関数は, 配列を引数として受け入れます。配列には、指定された数のオブジェクトのフレームが含まれます。各オブジェクトには3つのプロパティがあります：
  imageData-画像/オクテットストリーム、ファイル名、拡張子(オプション)

例1

let num;
function setup(){
  num = 0;
}

function draw() {
  createCanvas(100, 100);
  background(255);
  stroke(0);
  textSize(24);
  text(num, 20, 40);

}

// マウスをクリックするたびにフレームを保存する
function mousePressed() {  
  saveFrames(String(num), 'png', 1, 1);
  num ++;
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。