# \[WARNING: Flickering images\] saveGif() inserting blank (black) frame when triggering in setup()

**URL:** <https://discourse.processing.org/t/warning-flickering-images-savegif-inserting-blank-black-frame-when-triggering-in-setup/41131>\
**Category:** p5.js\
**Created:** [March 3, 2023, 7:37pm UTC](https://discourse.processing.org/t/warning-flickering-images-savegif-inserting-blank-black-frame-when-triggering-in-setup/41131 "2023-03-03T19:37:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jernwerber](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jernwerber/32/18045_2.png) [@jernwerber](https://discourse.processing.org/u/jernwerber)\
**Post date:** [March 3, 2023, 7:37pm UTC](https://discourse.processing.org/t/warning-flickering-images-savegif-inserting-blank-black-frame-when-triggering-in-setup/41131/1 "2023-03-03T19:37:05Z")

</div>

Hey folks,

The reference documentation says that you can call saveGif() during setup() or in an event function. I’m having an issue with a black frame when calling it during setup() and I’m trying to figure out if this is a me thing or a saveGif() thing. This doesn’t happen when it’s called in an event function (like keyPressed()).

- Interestingly, when saveGif() is in setup(), it seems that the first actual frame it records is frame 2 (according to the frameCount variable, so perhaps it’s only rendering _after_ the first time through draw()?)
- The workaround I’m using is to turn off the loop with a noLoop() call during setup() and then turn the loop back on during the keyPressed() event after saveGif() has been called.

I haven’t dug into the source for the saveGif() function, but I wanted to ask here first in case I’m making a silly mistake somewhere.

**I’ve put a bunch of my testing below. (NOTE: OOPS I can only embed one image)**

- If I trigger saveGif() in my setup(), the resulting gif has a single black frame, which causes an annoying flicker on repeat.  
 ![saved (22)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/f/0fcbacfc9d35ffc27c05a738a34df256b0408f9e.gif)

```auto
function setup() {
  createCanvas(400, 400);
  saveGif('saved', 2);
}

function draw() {
  background(220);
  circle(width/2, height/2, 100);
}

```

- This happens likewise happens even if a delay is set or units are changes to ‘frames’

```auto
function setup() {
  createCanvas(400, 400);
  saveGif('saved', 60, {delay:30, units:'frames'});
}

function draw() {
  background(220);
  circle(width/2, height/2, 100);
}

```

- If saveGif() is set to record a single frame during setup(), it records a black frame:

```auto
function setup() {
  createCanvas(400, 400);
  saveGif('saved', 1, {units:'frames'});
}

function draw() {
  background(220);
  circle(width/2, height/2, 100);
}

```

- If saveGif() is triggered during a keyPressed() event, it functions as intended (though it still doesn’t start at frame 1, according to frameCount):

```auto
function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(220);
  circle(width/2, height/2, 100);
}

function keyPressed() {
  saveGif('saved', 2);
  loop();
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 3, 2023, 9:14pm UTC](https://discourse.processing.org/t/warning-flickering-images-savegif-inserting-blank-black-frame-when-triggering-in-setup/41131/2 "2023-03-03T21:14:49Z")

</div>

> [@jernwerber](#):
>
> ` background(220);`

you could start by repeating this line in setup

```auto
function setup() {
  createCanvas(400, 400);
  background(220);
  saveGif('saved', 2);
}

```

I always do this, because setup() seems to show one frame at its end before draw() starts

**Remark**

I imagine you could also say

```auto
function draw() {
  background(220);
  if(firstTime) {
    saveGif('saved', 2);
    firstTime=false; 
  }
  ......

```

with `boolean firstTime=true;` before `setup()` - not tested

---

<div class="post-metadata">

**Author:** ![jernwerber](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jernwerber/32/18045_2.png) [@jernwerber](https://discourse.processing.org/u/jernwerber)\
**Post date:** [March 4, 2023, 1:03am UTC](https://discourse.processing.org/t/warning-flickering-images-savegif-inserting-blank-black-frame-when-triggering-in-setup/41131/3 "2023-03-04T01:03:55Z")

</div>

I appreciate you taking a look! I gave both those solutions a shot without success.

- Of note, the black frame is completely black. This suggests to me that something is happening to the first frame where it just tosses out the frame data.
- The black frame doesn’t only happen at frameCount === 0 or 1, it’s whatever the first frame is, so long as saveGif() is triggered in one of setup() or draw().

Since it works when triggered in an event function, could it have something to do with the context where it’s called? With saveGif() being an async function, maybe the main loop isn’t playing nicely with saveGif() when saveGif() starts running?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 4, 2023, 2:00am UTC](https://discourse.processing.org/t/warning-flickering-images-savegif-inserting-blank-black-frame-when-triggering-in-setup/41131/4 "2023-03-04T02:00:55Z")

</div>

Hello @jernwerber,

Related discussion:  
[https://www.deconbatch.com/2022/11/savegif.html](https://www.deconbatch.com/2022/11/savegif.html)

The discussion above makes a reference to this:

> It is not recommended to write this function inside setup, since it won’t work properly.

I found the above quote here but not on website:

> <https://github.com/processing/p5.js/blob/ed3add541680edf10783dcce1cf8aa55a21e69eb/src/image/loading_displaying.js#L183>

saveGif() issues on GitHub:  
[https://github.com/processing/p5.js/issues?q=saveGif](https://github.com/processing/p5.js/issues?q=saveGif)

`:)`

---

<div class="post-metadata">

**Author:** ![jernwerber](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jernwerber/32/18045_2.png) [@jernwerber](https://discourse.processing.org/u/jernwerber)\
**Post date:** [March 4, 2023, 3:03am UTC](https://discourse.processing.org/t/warning-flickering-images-savegif-inserting-blank-black-frame-when-triggering-in-setup/41131/5 "2023-03-04T03:03:48Z")

</div>

Thanks for all this, @glv! I was bamboozled by the [p5.js reference page on saveGif()](https://p5js.org/reference/#/p5/saveGif) which doesn’t include the caveat _not_ to use saveGif() in setup:

> This may be called in setup, or, like in the example below, inside an event function, like keyPressed or mousePressed.

Not sure if it’s an intentional difference or an oversight, but I’ll open an issue if I can’t find an indication that the change was made on purpose.