DEV Community

Cover image for I wrote a new library for recording p5.js sketches

Posted on

I wrote a new library for recording p5.js sketches

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.

GitHub logo tapioca24 / p5.capture

🎬 super easy recording for p5.js animations


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.

Any format β€’ One API 🀹

Tired of having to use different libraries for different formats p5.capture supports…


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.


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.


Insert a link to the p5.capture after p5.js in your html file:

<script src=""></script>
<!-- insert after p5.js -->
<script src=""></script>
Enter fullscreen mode Exit fullscreen mode

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:

  format: "gif",
  framerate: 10,
  quality: 0.5,
  width: 320,

function setup() {
  // do something...
Enter fullscreen mode Exit fullscreen mode

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();
      format: "gif",
      duration: 100,

  // do something...
Enter fullscreen mode Exit fullscreen mode

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") {
    } else {
Enter fullscreen mode Exit fullscreen mode

See the GitHub repository for all functions and descriptions.


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.

Latest comments (1)

adaly56 profile image
andrea daly

very useful thanks