Skip to content

pbeshai/p5js-ccapture

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published