Exporting canvas as GIF/PNG in p5js

Question

I use Atom Editor. I want to make 20 seconds GIF with my canvas. saveFrames() has a limitation(I guess). It enables to save .png files to short gifs(3-5 seconds), even if I type saveFrames("aa","png",15,22);

I discovered CCapture.js but I could not find any code example to export canvas.

It does not have to be exported as GIF; but I want to at least save .png snaps of my animation in canvas limitlessly. How can I do it?

My animation code in p5.js:

var x = 0;
var speed = 10;
var d1 = 100;
var d2 = 100;

function setup() {
  createCanvas(600, 400);
  background(0);
  //saveFrames("aa","png",15,22);
}

function draw() {
  stroke(random(100, 255), 0, random(100, 190));
  strokeWeight(1.5);
  ellipse(x, 100, d1, d1);
  x = x + speed;
  d1 = d1 - 0.6;
  
  if (x > width || x < 0) {
    speed = speed * -1;
    fill(speed * 51);
  }
  
  ellipse(x, 300, d1, d1);
  ellipse(x, 200, 50, 50);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>

Answer 1

I've been working on a new library which supports GIF exports, p5.createLoop.

This will run the sketch and then render a GIF at the same frame rate.

function setup() {
  createCanvas(600, 400);
  background(0);
  frameRate(22)
  createLoop({duration:15,gif:true})
}

Here's a codePen with the full example. It'll take about two minutes and is over 50MB, totally worth it

Answer 2

After a full day of research, surprizingly, I found a video uploaded youtube 2 weeks ago: CCapture Video

Dont forget that CCapture exports (gif size=canvas sizex2).