CP2: Exporting Frames for Video (and FFMPEG) – Simulation in p5.js
Channel: Jeff Thompson
Date: 2021-03-30

Want to create a video of a sketch but it runs too slowly? Have thousands of objects you're simulating and your computer bogs down? Want to render 8k video? Trying to optimize sketches to run in real-time can be incredibly challenging, but exporting frames and turning them into a video can be a great solution.

If we added the save() command to the end of our draw loop, we'd be prompted every time to download the resulting image: not a good solution. Instead, we can use the CCapture library which saves all the images in a compressed form, then lets us download them all when we're done!

👩‍💻 https://editor.p5js.org/jeffThompson/sketches/oBc4TV3Td
⚠️ See the code for more info on installing and using FFMPEG!

ALL THE VIDEOS IN THIS UNIT
🎥 https://youtube.com/playlist?list=PLsGCUnpinsDkhWlWYUdMC1R2yOLO2Xmqd

REQUIRES
💡 CCapture lib: https://github.com/spite/ccapture.js

CHALLENGES
❓ Can you convert an old sketch of yours to render frames at a higher resolution?
❓ Can you add feedback while the rendering is happening, using console.log()?