Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

README.md

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

About

An example of using p5.js with CCapture.js for exporting frames

Resources

Releases

No releases published

Packages

No packages published