saveGif() delay doesn't work

p5.js Coding Questions
1

Hi,

I’m trying to export some gifs with the function saveGif() ( https://p5js.org/reference/p5/saveGif/ ) but it seems taht the delay before recording the images doesn’t work. It records the gif but doesn’t apply any delay before.

I tried this:

function setup() {
  createCanvas(1920, 1080);
  saveGif('my_file', 1, {delay: 5, units: 'seconds'});
}

function draw() {
  
  for (let i = 0;i<10;i++){ 
    stroke(255);
    line(random(width), random(height), random(width), random(height));
  }

}

And this, in the manner of the example written in the reference page and inspired from the youtube example ( https://www.youtube.com/shorts/CEnfKhs6wLg ):

function setup() {
  createCanvas(1920, 1080);
}
// Save a 5-second gif when the user presses the 's' key.
 function keyPressed() {
   if (key === 's') {
     const options = {
       units: "frames",
       delay:300} // 
     }
     saveGif('random_rgb_lines_0', options);
 }

function draw() {
  
  for (let i = 0;i<10;i++){ 
    stroke(255);
    line(random(width), random(height), random(width), random(height));
  }
}

In this last one it reloads the sketche when I press ‘s’ and then it records the gif (with frames or seconds it’s the same).

Any idea ? I didn’t find more precisions on the web.

Thanks

2

The delay currently gets applied by starting frameCount at a higher number than usual instead of starting at 0 and not recording the first few frames, so unfortunately this means sketches like your example that build up content over time end up working the same way as usual. For now your best bet might be to record from the start, and use a third party tool to clip the beginning of the gif off.

3

Thanks @davepagurek, I don’t get exactly what you mean, ok for the third party tool but could you explain what is possible to do with this delay ?

4

The frameCount variable in p5 usually tells you what frame you’re on, and the delay parameter seems to start that value at something like 3*60 if you ask for a 3s delay. If you have a sketch where each frame depends only on that – so, it clears the screen every frame, and positions everything just based on the frame number, such as drawing a circle at an x value of frameCount – then this seeks your sketch forward in time with no issues.

Your sketch, though, depends on the previous frame’s canvas, since it just adds lines incrementally instead of fully redrawing based on the frameCount. So that unfortunately won’t seek ahead when p5 starts frameCount at a higher number.

To turn your sketch into something that depends only on frameCount, you could write it like this:

function draw() {
  randomSeed(0);

  // Every frame, clear the screen, and redraw every line that should be visible
  background(255);
  // Draw more lines the farther into the animation we get
  for (let j = 0; j < frameCount; j++) {
    for (let i = 0;i<10;i++){ 
      stroke(255);
      line(random(width), random(height), random(width), random(height));
    }
  }
}

This will be less efficient if you’re just running your sketch live, since each frame draws successively more and more lines, but it might make gif export work correctly.

5

That’s perfect, thanks the explanation and for the sketch @davepagurek !