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.

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.

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.

• Demo on p5.js Web Editor
• Demo on OpenProcessing

In the end

Thank you for reading to the end.
If you are interested, please try it! Pull Requests are also welcome.