ダークサイドにようこそ!

旅行 / 散歩 / プログラミング / 映像制作 / ブレイクダンス

【p5.js】p5.createLoopを使用しスケッチをGIFファイルとして出力する

f:id:hahaeatora:20220214035021g:plain

p5.jsで作成したスケッチを動画として保存したくなりました。p5.createLoopというライブラリを使用するとGIFファイルとして保存できるようなのでその備忘録。

github.com

 

基本的にはREADMEを参照すればokです。まずはp5.jsとは別にHTML内にて下記スクリプトを読み込みます。

<script src="https://unpkg.com/p5.createloop@0.2.8/dist/p5.createloop.js"></script>

 

p5.jsのsetup()関数内で以下の処理を追加します。ちなみにsetup以外だとダメっぽいです。durationは記録したい秒数に合わせて変更してください。

createLoop({duration:3, gif:true})

 

上記の処理を加えた上でスケッチを実行すると自動的にアニメーションの記録が始まります(コンソールに詳細が出力されます)。GIFファイルの作成が完了するとコンソールに「finished rendering GIF...」と出力されブラウザ上にGIFが表示されます(秒数によっては意外と時間かかるかも)(出ない場合も適当にマウス動かしていれば多分出てきます)。それをクリックするとローカルへ保存されます。

ちなみに「#つぶやきProcessing」用としてGIF出力したのですが、長さ15秒にしたら15MB超えてTwitterに投稿できませんでした……

 

参考記事。

shiroyuki2020.hatenablog.com

 

その他の記事。

hahaeatora.hateblo.jp

hahaeatora.hateblo.jp

hahaeatora.hateblo.jp