This repository hosts a JavaScript class to record a video from a p5.js sketch / canvas using WEBGL.
Note: The canvas must be created with the WEBGL parameter as in the Getting Started section below: createCanvas(400, 400, WEBGL);
See the live demo page to test it.
Click the button to start, then stop recording and view or download the recorded video.
The script will produce a WebM video file (*.webm).
It can be converted to the more popular MP4 file format with some video tools or online services such as https://cloudconvert.com/webm-to-mp4
-
Add the library in the
<head>section of index.html<script src="https://prossel.github.io/WebGL-VideoRecorder/js/VideoRecorder.js"></script>
-
Add a call to
VideoRecorder.addButton();in yoursetup()function.
See Getting started section below for more details.
-
Create a new sketch on https://editor.p5js.org/
-
Replace the content of sketch.js with this code
function setup() { createCanvas(400, 400, WEBGL); } function draw() { background(220); rotate(-frameCount * 0.01, createVector(1, 1, 0)); box(200); }
-
Note that the createCanvas function is using the WEBGL parameter.
-
Click the play button to see the cube rotate
-
Now we will add the video record feature
-
Click the > arrow to see all files of the sketch
-
Select index.html and add
VideoRecorderline in the<head>section, after the p5.js scripts.<head> <script src="... /p5.js/ ... "></script> <script src="... /p5.js/ ... "></script> <script src="https://prossel.github.io/WebGL-VideoRecorder/js/VideoRecorder.js"></script> </head>
-
Select sketch.js and add
VideoRecorder.addButton();in setup:function setup() { createCanvas(400, 400, WEBGL); VideoRecorder.addButton(); }
-
Click the play button. See the
Record videobutton ? -
Click it, wait a few seconds and click again to stop.
-
The recorded video is added at the bottom of the page with a download link.
-
If the video does not have the same size as the canvas, see Double size video below
Final result: https://editor.p5js.org/prossel/sketches/HjKjai1gG
You can also start / stop the recording from the code. You only need to call VideoRecorder.record(); and VideoRecorder.stop(); when appropriate.
Live demo: https://editor.p5js.org/prossel/full/imTyCpxQT
For example to record the first 60 frames of an animation:
function setup() {
// ...
VideoRecorder.addButton();
}
function draw() {
// ...
// Start recording at frame 1
if (frameCount == 1) {
VideoRecorder.record();
}
// Stop video recording automatically after 60 frames
if (frameCount == 60) {
VideoRecorder.stop();
}
}When using a high resolution display, such as Retina, the video may have more pixels than the canvas size.
When you want the video to have exactly the same size as the canvas, whatever the display resolution, the pixel density may be forced on the canvas using pixelDensity(1). The video will have the same size.
function setup() {
createCanvas(1920, 1080, WEBGL);
pixelDensity(1);
}The video has the size of the canvas or the double if using a high resolution screen, such as Retina display.
If you want a specific size, use is to create the canvas. If the canvas is then too big to fit in the window, you may want to scale it with this code with CSS.
To avoid a different size with high resolution display, use pixelDensity(1) to force video and canvas to have the same size.
Live demo: https://editor.p5js.org/prossel/full/ps04GUidy
function setup() {
createCanvas(1920, 1080, WEBGL);
pixelDensity(1);
// Reduce size of preview
let scalePreview = 0.25;
let cnv = document.getElementById('defaultCanvas0');
cnv.style.width = round(width * scalePreview) + "px";
cnv.style.height = round(height * scalePreview) + "px";
VideoRecorder.addButton();
}