An example of using p5.js with CCapture.js for exporting frames
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

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