I have released p5.capture, a library for easy recording of p5.js sketches 🎉
This is intended to solve the p5.js issue of not having an easy way to record sketches and I believe it will be useful for many p5.js users.
I would like to take this opportunity to introduce it to you.
tapioca24
/
p5.capture
🎬 super easy recording for p5.js animations
About • Why p5.capture? • Getting started • API
Options • Browser compatibility • Limitations • Donation
About
Assuming you would like to record p5.js animations super easily, this package is the right choice for you.
👇 Check out the demo:
Why p5.capture?
🎩 Stable recording
Recording p5.js animations with screen recording tools can cause jerky recordings. Complex animations can slow down the framerate and make recording unstable. p5.capture hooks into the p5.js draw function and records the rendered frame, so it works like magic.
✨ Keep your sketch clean
Adding recording functionality to a sketch can be very tedious. p5.capture provides a minimal GUI and is designed to add recording functionality without adding any code to your sketch. Let's focus on your creative coding. Of course, you can also use the API to integrate it into your code.
Motivation
p5.js is a creative coding environment that is easy to use even for programming beginners and can easily create animations.
To share your animations on Twitter or other social media, you need to record your sketches and export them as video files. However, existing libraries have many steps and various restrictions, and there seems to be almost no established standard way to do this. I am sure there are many people who are having trouble with this.
I wrote this library in the hopes of solving these issues and removing barriers to sharing sketches, thereby further invigorating the creative coding community.
Concepts
Easy to use ✨
Above all, it is designed to be easy to use, even for programming beginners.
To use p5.capture, all you need to do is add a single line of code that loads the library.
Once the library is loaded, a GUI for recording is displayed, and a video file is created by clicking a button.
Many existing libraries require you to add your own code for recording, but with p5.capture, the library takes care of those hassles by adding a GUI, allowing you to skip almost all the work.
It's very easy and you don't have to pollute your sketches with non-essential code.
Supports a wide range of export formats 🤹
Existing libraries have few supported video formats.
| Library | webm | gif | mp4 | png | jpg | webp |
|---|---|---|---|---|---|---|
| saveFrames | ✅ | ✅ | ||||
| CCapture.js | ✅ | ✅ | ✅ | ✅ | ||
| p5.rec | ✅ | |||||
| p5.MovRec | ✅ | |||||
| p5.recorder | ✅ | |||||
| p5.capture | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
For beginners, just finding a library can be a challenge, and if you want multiple formats, you may have to use several different libraries. It is a painstaking task.
p5.capture supports commonly used formats such as webm, gif, mp4 as video files and png, jpg, webp as sequential images. It can be used for many purposes.
Stable recording 🎩
Due to the nature of real-time animation generation in p5.js, it is common for the frame rate to drop when using computationally expensive processing. In such cases, recording will usually result in a reduced frame rate.
To avoid this, p5.capture adds frames to the video after the draw function is complete and all rendering is finished. Thus, recorded video files can be played back smoothly even if real-time rendering is choppy.
Usage
Insert a link to the p5.capture after p5.js in your html file:
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
<!-- insert after p5.js -->
<script src="https://cdn.jsdelivr.net/npm/p5.capture@1.1.0/dist/p5.capture.umd.min.js"></script>
You can find all versions in the jsDelivr.
For OpenProcessing, add the URL from the library settings:
Once the library is loaded, a GUI appears, and recording can be started and stopped by clicking buttons. Note that it is recommended that framerate match the frame rate of the animation.
Basically, this is all you need.
Advanced Settings
The P5Capture.setDefaultOptions method can be used to set advanced settings such as image quality and resizing.
For example, to create a gif video with reduced image quality and frame rate and resized width to 320px, add the following code:
P5Capture.setDefaultOptions({
format: "gif",
framerate: 10,
quality: 0.5,
width: 320,
});
function setup() {
// do something...
}
This method must be used before p5.js is initialized. These options affect both GUI and API recording. See the GitHub repository for a list of settings and their range of values.
Programmatic control
You can also control recording programmatically using several methods provided by p5.capture.
The following example records the first 100 frames:
function draw() {
if (frameCount === 1) {
const capture = P5Capture.getInstance();
capture.start({
format: "gif",
duration: 100,
});
}
// do something...
}
Controlling the recording with keystrokes could be accomplished by adding the following code to the sketch:
function keyPressed() {
if (key === "c") {
const capture = P5Capture.getInstance();
if (capture.state === "idle") {
capture.start();
} else {
capture.stop();
}
}
}
See the GitHub repository for all functions and descriptions.
Demo
You can see how it actually works.
In the end
Thank you for reading to the end.
If you are interested, please try it! Pull Requests are also welcome.
Top comments (2)
very useful thanks