Canvas video recording added to q5.js

q5-record is 5-10x faster than the p5.capture library

Check out q5-record, which is now included in q5.js v2.18! 🎉

https://q5js.org/learn/#recordSection

Huge thanks to Tezumie for his work on this. 🙌

function draw() {
  square(mouseX, randomY(), 10);
}

function mousePressed() {
  if (!recording) record();
  else saveRecording('squares');
}

Note the use of the new `randomY` function here.

https://q5js.org/learn/#randomY

p5.capture got the job done back in the day when there was no alternative, but it's slow and 1.1MB minified due to its dependency on gif.js and h264-mp4-encoder (which has a base64 encoded wasm file inside it).

q5-record is a mere 7kb and it’s 5-10x faster than p5.capture. It’s meant to provide a quick and easy way for users to capture their q5.js sketches. The API is very simple compared to p5.capture and CCapture.js.

Audio recording was added in v2.22.4.

https://q5js.org/learn/#recordSection