--- title: CCapture.jsでp5.jsの作品をgifアニメにする方法 tags: JavaScript p5.js author: aa_debdeb slide: false --- p5.jsの[公式リファレンス](https://p5js.org/reference/#/p5/saveFrames)を見ていたら、p5.jsの作品を動画として出力するならばCCapture.jsとかを使えばいいよって書いてありました試してみたところ、ちょっとだけはまったのでまとめておきます。 必要なものは、CCapture.jsとgif.jsです(それとp5.jsも)。 * https://github.com/spite/ccapture.js * https://github.com/jnordberg/gif.js CCpature.jsは`/build/CCapture.all.min.js`が、gif.jsは`/dist/gif.worker.js`が使用するファイルとなります。 このうちの`CCapture.all.min.js`だけをスクリプトタグで読み込んでおきます。 ```html ``` `gif.worker.js`は`CCapture.all.min.js`がスクリプト内で動的に読み込み処理を行うので、スクリプトタグで読み込んでおく必要はありません。 このときに同一オリジンポリシーを回避するために、htmlファイルが置いてある場所で以下のようにローカルサーバーを立ち上げておきます(これ以外方法でローカルサーバーを立ち上げてももちろん大丈夫です)。 ```bash $ python -m SimpleHTTPServer ``` `http://localhost:8000/`にアクセスするとhtmlファイルを開くことができます。 CCapture.jsでは以下のような操作により、gifアニメを作成することができます。 ```js // in initialization phase var capturer = new CCapture({format: 'gif', workersPath: './js/', verbose: true}); capturer.start(); // in rendering loop captuerer.capture(canvas); // to finish recording capturer.stop(); capturer.save(); ``` CCaptuerクラスのコンストラクタに渡すオブジェクトのうち`workersPath`は`gif.worker.js`が置いてあるディレクトリへのパスを指定するものです。 `verbose`オプションは必ずしも必要ではありませんが、あるとコンソールに処理の進捗が出力されるので、進行具合がわかりやすくなります。 `CCapture#capture`メソッドの引数にはcanvas要素を渡します。 `p5.js`の`createCanvas`でcanvasを作成した場合、canvas要素は以下の方法で取得できます。 ```js var p5Canvas = createCanvas(500, 500); var canvas = canvas.canvas; ``` (p5.jsの[公式リファレンス](https://p5js.org/reference/#/p5/createCanvas`)には`createCanvas`の返り値は`HTMLCanvasElement`と書かれていますが、実際には`p5.Renderer2D`クラスのオブジェクトが返り値になっています) 実際にp5.jsでCCapture.jsを使用したソースコードは以下のようになります。 ```html Sample to making anmation gif for p5.js by CCapture.js ``` 作成されるgifアニメはこんな感じです。 ![result.gif](https://qiita-image-store.s3.amazonaws.com/0/61569/845e9d3f-8129-4ed0-c031-2c08697af414.gif)