CCapture.js でp5js作品をgifやwebmファイル形式で保存する方法（Mac）

順序に沿って動画をフォローしていただくと、出力できます。

先ずはVisual Studio Codeを ダウンロードする。

Visual Studio Code - Code Editing. Redefined

Tim Rodenbroker氏の動画に沿ってセットアップする。

拡張機能も追加しておくとその後の操作がしやすくなります。

次にp5.jsやopenProcessingのサイトに既に作ってある、自分のscript.jsのファイルの内容をVS Codeへコピーペーストします。

Colorful Coding の動画に沿ってセットアップ

動画と違うところはは、CCpature.jsなどのファイルはsrcファイルの中に入れ、パスの指定方法を相対パスで"src/CCapture.js"と記述したところです。

セットアップして、出力してみた経験からすると、短いアニメーションに関しては、GIFを推奨しますが、長いアニメーションはwebm形式の方が、書き出しは遅いですが、きちんと書き出してくれます。（GIFの場合は２、３秒時間が長くなるだけで、ファイルサイズが何倍にもなります。）

Draw()関数に入れるコード：

  // CCapture
 //start of the draw()
 //draw()関数の最初に入れる
 if(frameCount == 1){
   capturer.start();
 }

 // end of the draw 
 //draw()関数の最後に入れる
 if (frameCount < 60*4){　//4秒後Captureを停止する
   capturer.capture(canvas);

 }else if(frameCount == 60*4){

   capturer.save();
   capturer.stop();
 }

簡単な説明ではありましたが、この順序で動画をフォローしながら行っていただくと、出力できます。不明な点や間違っている点がありましたら教えていただけますと幸いです。