p5.jsで作成したスケッチを動画として保存したくなりました。p5.createLoopというライブラリを使用するとGIFファイルとして保存できるようなのでその備忘録。
基本的には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に投稿できませんでした……
//#つぶやきProcessing
— __hahTD (@eatora22) 2022年2月14日
f=0
w=500
draw=_=>{f++||createCanvas(w,w)
c=circle
n=noise
background(0)
fill("#55acee")
c(w/2,w/2,w)
noFill()
s=0.0001
for(i=0;i<50;i++)v=3*s*i*f*n(s*i*f),x=w*n(1-v),y=w*n(v),r=i*n(v),c(x,y,r),i>48?(rect(x-r,y-r,r*2),fill(0),text("missing",x+r+2,y-r)):0} pic.twitter.com/oDCnuzb62V
参考記事。
その他の記事。
