p5.js recording with CCapture.js example

A demonstration of how to record a p5.js animation using CCapture.js.

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.

See index.html for the code or view the live demo.

Create video from ffmpeg

• Frame rate: 30 (see fps in 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
	= 3.33

convert -delay 3.33 -loop 0 *.png output.gif