p5.captureを使ってp5.jsのコンテンツの動画を撮影する
p5.captureを使ってp5.jsのコンテンツの動画を撮影する
https://gyazo.com/4f8ab1345cfe04e31e39e258d10ad613
https://github.com/tapioca24/p5.capture
p5.jsのコンテンツをキャプチャしようとするとGyazoを使ったりMac標準のスクリーンショットの機能を使ったりすることで実現できるけど，ぴったりサイズじゃなかったり，Gyazoの無料枠だと時間に制限があったりと厳密に綺麗な動画でキャプチャするのが難しい．
そこでp5.captureというライブラリを使って，Canvasの内容を動画として書き出すことで綺麗に動画を撮影することができる．
手順は超簡単．
1. editor.p5js.orgでindex.htmlをみる
https://gyazo.com/6f32ba8cb6e4ac2321d920f5dc5f8054
2. <script>タグを1つ追記する
index.htmlでp5.jsが読み込まれているより後の行で
code:js
<script src="https://cdn.jsdelivr.net/npm/p5.capture@1.4.1/dist/p5.capture.umd.min.js"></script>
を入れる．
https://gyazo.com/a0867f6dc6143330086b6c374f3031d1
3. レコーディングする
https://gyazo.com/d96a4c8dc934da90240815bae0f9b25c
好きなフォーマットでレコーディングできる