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
        );
      }
    }
  }
}

You're going to want to move the call to `createCanvas` into `setup()` instead of `draw()`, and before the call to `frameRate()` although I'm not sure that is strictly necessary. — Paul Wheeler, Sep 01 '21 at 06:43
Additionally you need to explain the steps you're taking that you expect to allow you to "export [your] animated image into a gif or MP4 file." There's no reference to `saveFrames` in your sketch (which can only save 15 frames max), and there's no reference to an external library that is capable of recording canvas frames as a movie (see https://github.com/spite/ccapture.js/). The alternatives are basically to use screen capture software, or a website that has recording capabilities (https://openprocessing.org/ can record a sketch as a video, click the share button, then select record). — Paul Wheeler, Sep 01 '21 at 06:48
So when you say you have "tried just about everything." What exactly do you mean? — Paul Wheeler, Sep 01 '21 at 06:48
Does this answer your question? [Exporting canvas as GIF/PNG in p5js](https://stackoverflow.com/questions/51232063/exporting-canvas-as-gif-png-in-p5js) — ggorlen, Sep 01 '22 at 19:58

score 1 · Answer 1 · edited Sep 08 '21 at 00:43

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(){}.

edited Sep 08 '21 at 00:43

bad_coder

11,289
20
44
72

answered Sep 07 '21 at 21:19

olaf

342
2
10

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

1 Answers1