Built-in sketch export as video or animated GIF #8515
Description
Increasing access
Making it easy to export a sketch as video or GIF lowers the barrier to sharing and showcasing work. Right now this requires external libraries or manual frame export, which is harder for beginners and educators. A simple, official API would help everyone—including students and people with less technical setup—share their p5.js work on social media, portfolios, and assignments without extra tools or steps
Most appropriate sub-area of p5.js?
- Accessibility
- Color
- Core/Environment/Rendering
- Data
- DOM
- Events
- Image
- IO
- Math
- Typography
- Utilities
- WebGL
- Build process
- Unit testing
- Internationalization
- Friendly errors
- Other (specify if possible)
Feature request details
What: A built-in, official way to record the canvas and export it as video (e.g. WebM) and/or animated GIF, without requiring a separate library (e.g. ccapture.js) or manual saveFrame() + external tools.
Why:
Many users want to share animations on social media, portfolios, or assignments.
Current options are either external libs or manual frame capture + conversion.
A simple API in core would match p5.js’s goal of making creative coding and sharing accessible.
Possible API (for discussion):
Something like recordSketch({ format: 'gif' | 'video', duration: seconds }) and stopRecording() / exportRecording(), or
A Capture helper that wraps the MediaRecorder / canvas capture flow and optionally GIF encoding.
Exact design can be decided with maintainers (e.g. sync vs async, options for resolution, frame rate, quality).
Scope:
Start with one format (e.g. video via MediaRecorder) and add GIF or a second format later if maintainers agree.
Rely on browser APIs (e.g. MediaRecorder, canvas capture) where possible to keep the implementation maintainable.
References:
Common user need in forums and tutorials.
Similar functionality exists in add-ons (e.g. ccapture.js) but not as an official, documented core API.