p5.js recording with CCapture.js example
If you only need the first 15 frames, you can use p5.js' saveFrames() function, but for more than that they recommend using a different library such as CCapture.js.
Read the blog post for more details.
Create video from ffmpeg
- Frame rate: 30 (see
fpsin the code)
- Dimensions: 540x540 (should match
createCanvas()in the code)
- Frame filenames:
"%07d.png"(incrementing numbers, 7 numbers long)
- Quality (CRF): 17 (see ffmpeg docs, but 17–28 is reasonable, 0 is lossless)
ffmpeg -r 30 -f image2 -s 540x540 -i "%07d.png" -vcodec libx264 -crf 17 -pix_fmt yuv420p output.mp4
Create a GIF from ImageMagick's convert
|frame delay||= 100 × 1 / frame rate|
|= 100 / 30|
convert -delay 3.33 -loop 0 *.png output.gif