'saveGif()' the p5.js animation GIF generater.

The 'saveGif()' is the function that generates an animated GIF of your p5.js sketch.

I feel 'Processing' is much easier making a movie. So I used to avoid making an animated sketch with 'p5.js'.

Now I will try to see the usability of the 'saveGif()' function introduced by p5.js ver 1.5.0.

👉 この記事は日本語でも読めます。

The Basic

At first, I wrote a code following the p5.js reference page.

saveGif() | reference | p5.js

This code sets the frame rate to 30fps. And when the 's' key is いpushed, it records the animation one second long and tries to save the animated GIF in the '01.gif' file.

/**
 * saveGif() test.
 * ref. https://p5js.org/reference/#/p5/saveGif
 * 
 * @author @deconbatch
 * @version 0.1
 * @license CC0
 * p5.js 1.5.0
 * created 2022.11.05
 */

const frmRate = 30;

function setup() {
  createCanvas(480, 480);
  smooth();
  frameRate(frmRate);
  fill(96);
  noStroke();
}

function draw() {
  const t = map(frameCount % frmRate, 0, frmRate, 0.0, 1.0);
  const x = width * 0.4 * cos(TWO_PI * t);
  const y = height * 0.4 * sin(TWO_PI * t);

  background(240);
  translate(width * 0.5, height * 0.5);
  circle(x, y, 50);
}

function keyPressed() {
  if (key === 's') {
    saveGif('01.gif', 1); // 1 sec
  }
}

Please use p5.js ver over 1.5.0. If you are using 'OpenProcessing', you can see the p5.js version near 'mode'. And you can choose the versions by clicking it.

When I pressed the 's' key, this code generated an animated GIF like this.

It's so handy!

And you can set the frame during number to record (not seconds) like this.

saveGif('01.gif', 30, {delay: 0, units : 'frames'});

Follow my interest.

Now I'll try some ideas.

Can I put it in setup()?

Can 'saveGif()' in 'setup()' generate a movie that starts very first frame? No. It generated a just black GIF.

The reference of p5.js said "it won't work properly" also.

How about background() but clear()?

It generates a black background GIF when I used 'clear()' not 'background()'.

Can I use decimal point in seconds?

Yes you can.

saveGif('01.gif', 0.5); // 0.5 sec

Multiple 'saveGif()'?

The code below shows two save dialogs. But the saved movie may be broken.

saveGif('01.gif', 0.5);
saveGif('02.gif', 1.0);

How about the sketch that will take a lot of time to draw?

I tried the sketch that draws a Turing pattern. It'll draw one frame in about one second.

It works! The movie of 60 frames, frameRate(30) and two seconds.

It took over three minutes to generate an animated GIF. But the generated GIF shows smooth moving two seconds animation. The screen capture tool can't do this.

Can I start the recording from the very first frame?

Negative.

The way putting the 'saveGif()' in the 'setup()' when I tried before, generated a black GIF

It gave me the same result putting the 'saveGif()' in the 'draw()' like this.

  if (frameCount === 1) {
    saveGif('01.gif', 1.0);
  }

I just had a poor idea 'If key pressed and it was the very first frame then start recording'.

const frmRate = 1;
const gifLen = frmRate * 8;

function keyPressed() {
  if (
      key === 's' &&
      frameCount % gifLen == 1
     ) {
    saveGif('08.gif', gifLen, {delay: 0, units : 'frames'}); // no delay, gifLen frames
  }
}

But it didn't work properly. It didn't start from the first frame or skipped the frame etc.But it did no work properly.

Summary

These are the points to use the 'saveGif()'.

1. Use the p5.js ver 1.5.0 over.
2. How to code?
   

   With seconds unit

   saveGif('file name', seconds number)

   With frames unit

   saveGif('file name', frames number, {delay: 0, units : 'frames'})

   Add delay

   Please see the reference

3. Put in the 'keyPressed()' etc. Do not put in the 'setup()' nor the 'draw()'.
4. Use the 'background()'. Do not use 'clear()'.

The 'saveGif()' is handy, and you can use it easily.

It is hard to start recording from the very first frame of the animation. And it has no adaptability of the Processing and the shell-script combination. But it has charming convenience.

And you can generate an animated GIF with the heavy sketch with ease. That's important to me.

For reference : Recording with the OpenProcessing only

Just click and save! How to record your 'p5.js' animation in mp4.