Gifs exported from `saveGif` in setup start with a black frame

[davepagurek]

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
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.6.0

Web browser and version

Firefox 108.0

Operating System

MacOS 12.5.1

Steps to reproduce this

(Brought over from the p5 website repo here https://github.com/processing/p5.js-website/issues/1335)

Steps:

• Go to https://p5js.org/reference/#/p5/saveGif
• Move the saveGif('mySketch', 5); line to setup and run

The outputted gif will start with a black frame, seen more easily from the screenshot in my downloads folder:

Full gif:

Snippet:

function setup() {
  createCanvas(100, 100);
  saveGif('mySketch', 5);
}

function draw() {
  colorMode(RGB);
  background(30);

  // create a bunch of circles that move in... circles!
  for (let i = 0; i < 10; i++) {
    let opacity = map(i, 0, 10, 0, 255);
    noStroke();
    fill(230, 250, 90, opacity);
    circle(
      30 * sin(frameCount / (30 - i)) + width / 2,
      30 * cos(frameCount / (30 - i)) + height / 2,
      10
    );
  }
}