`saveGif()` (specifically: `_generateGlobalPalette()`) fails for large amount of frames

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

/*! p5.js v1.9.4 May 21, 2024 */

Web browser and version

Firefox 128.0.2 (64 bits) / 126.0.6478.183 (Official Build) (arm64)

Operating system

MacOS Sonoma 14.4

Steps to reproduce this

Hello lovely p5.js people!

I think I came across a little bug when trying to create a (big) gif.

Steps:

1. Run the following sketch
2. Check error in the console after all the frames have been recording

Snippet:

function setup() {
  createCanvas(800,800);
  background(127);
}

function draw() {
  fill(random(255), random(255), random(255));
  circle(random(width), random(height), random(10));
}

function keyPressed() {
  if (key === 'g') {
    console.log('saving gif');
    const frames = 5000;
    saveGif(
      `humongous.gif`,
        frames, {
          units: "frames",
          delay: 0,
      }
    );
  }
}

In Firefox, the frames get collected, but it is the creation of the color palette that fails (when creating the Uint8Array here).

I'm thinking a potential solution would be to merge the pixels in chunks, instead of all at once?

It's a bit outrageous to want this feature, but it would be super lovely to make it robust even to mammoth gifs 🩶🦣. I created a fairly long animation, and was hoping to export it as a gif, but that would mean 12k frames 🙈...

Is it something you would be interested in looking into? I'm not quite set up to make a PR, but I could try looking into this.

Thanks in advance, any idea or thought would be welcome!

Note: In Chrome, I get RangeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': Out of memory at ImageData creation even before all the frames are done being collected. I haven't investigated this.

Start with saveGif() and _generateGlobalPalette() in src/image/loading_displaying.js, especially the Uint8Array creation around line 597. Reproduce the issue using the provided 800×800 sketch with 5,000 frames in Firefox and Chrome, then inspect how frame pixels are collected and merged. Done means large GIF generation no longer fails during palette creation or frame collection because of the reported memory errors.