Animated gif loading in version 1.0 of p5.js

p5.js
1

Hey All,

I was poking around in 1.0 of p5.js and saw that gif loading was supposed to be working:

https://medium.com/processing-foundation/p5-js-1-0-is-here-b7267140753a

So I tried looking in the source for how it worked, as I couldn’t find any documentation:

https://github.com/processing/p5.js/blob/3f0b2f0fe575dc81c724474154f5b23a517b7233/test/unit/image/downloading.js

and

https://github.com/processing/p5.js/blob/3f0b2f0fe575dc81c724474154f5b23a517b7233/src/image/p5.Image.js

and

https://github.com/processing/p5.js/commit/3a500615a63a5b18a02de2b4ab94ada0a5fb0e34

I managed to get the following code to work with an animated gif!

in preload(), just load the animated gif as an image as normal:

function preload() {
  gifFile = loadImage("../gifs/perfectBlueRedNoodleLoop.gif");
}

then in draw():

  gifFile.pause();
  for (let i = 0; i < gifFile.numFrames(); i++) {
    gifFile.setFrame(i);
    image(gifFile, i * 30, 0, 100, 100);
  }

Works great! I’ll post an example working in the p5js editor when I’ve made it. Next I’m going to try to slice the frames in interesting ways. It seems there are quite a few undocumented features in 1.0, I’d be happy to help out adding documentation for it.

1 Like
2

Hello @jgl,

Nice work digging in the source code. I think it is already documented though: setFrame().

3

You are completely correct! :bowing_man:t2:‍♂

I didn’t find it because it isn’t listed here:

https://p5js.org/reference/

Rather only here:

https://p5js.org/reference/#/p5.Image

I’ll see if I can find out how to add the reference to the p5.image methods to the main reference index!

Joel