How do I export my P5.js file into a gif or MP4?

Question

I have tried just about everything but for some reason I can't get P5.JS to export my animated image into a gif or MP4 file. Any help with this?

I'm not sure if it's my browser too, because whenever I try and run my animation, the screen is blank.

var Offset = 100;
var minSize = 1;
var maxSize = 60;
var colors = ["#D2B634", "#E43D3B", "#BB0ACF", "#7B2C0C"];
var rectSize = 10;
let angle = 0;

function setup() {
  frameRate(4);
}

function draw() {
  createCanvas(500, 500);
  rectMode(CENTER);
  background("#62AEA7");
  noStroke();

  var circleCountx = (500 - 100) / Spacing;
  var circleCounty = (500 - 100) / Spacing;

  for (let c = 0; c < 10; c++) {
    for (let i = 0; i < circleCountx; i++) {
      for (let j = 0; j < circleCounty; j++) {
        let colorpicker = int(random(colors.length));
        fill(colors[colorpicker]);
        let size = random(minSize, maxSize);

        ellipse(Offset + Spacing * i, Offset + Spacing * j, size, size);

        rect(
          Offset + Spacing * i,
          Offset + Spacing * j,
          size - rectSize,
          size - rectSize
        );
      }
    }
  }
}

Answer 1

Ccapture.js is great for that, here's a video explaining how to use it (not mine). You can later change WebM file types to mp4s and others online. Also as others said, move createCanvas(); into setup(){} and get rid of it in draw(){}.