noLoop() not honored by saveGif()

[gohai]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

1.11.0

Web browser and version

130.0.6723.92

Operating system

macOS

Steps to reproduce this

Steps:

1. Run the snippet below

Snippet:

function setup() {
  createCanvas(400, 400);
  saveGif('mySketch', 5, { units: "frames" });
  noLoop();
}

function draw() {
  background(220);
  console.log("draw");
}

It'd be great to have the ability to create animated Gifs from graphics that aren't possible to create real-time (e.g. because each frame requires a web API call, which takes multiple seconds to complete). p5's redraw() function would be great for this to use (i.e. this invokes draw whenever a frame is ready to be added to the animation). Unfortunately, the current implementation of saveGif() does not seem to honor noLoop() - as the draw function is called periodically regardless.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[bloomingbridges]

Looking at how saveGif() is implemented it seems to be doing exactly that:

• Call noLoop() to stop rendering
• Calculate the delay between frames (based on current frame rate)
• Call redraw() periodically, adding frames to an array until a given duration has been reached
• Call loop() to continue rendering as before
• Encode the frames array as an animated GIF and prompt download action

While I definitely think there are times where you'd want to manually grab frames and export the lot as a GIF, I would be hesitant to call the current behavior a bug.

After all, if I save the individual frames using saveFrame() whenever they're ready, I can use other software to assemble the GIF with complete control (over which frames make it into the animation, frame delays, colour palette etc).

Though I'm sure you've already come to the same conclusion by now.
Happy new year 2025!

[MartinParrish]

Hi @gohai,

Not sure if you're seeing the same issue I had, saveGif calling loop() on a paused sketch. If so, my PR (#7334) might fix it.

[gohai]

@MartinParrish Interesting. With your change, I there is still an unconditional this.redraw() in the while loop that generates all the frames... so I'd think this will still continue to call the draw function?

Could you try to see if the following sketch will call draw:

function setup() {
  createCanvas(400, 400);
  noLoop();
  saveGif('mySketch', 5, { units: "frames" });
}

function draw() {
  background(220);
  console.log("draw");
}

function mousePressed() {
  // desired: draw is only called when the mouse button is pressed
  redraw();
}