Animated gif don't work with createImage () P5.Image?

p5.js
1

I’m trying to create an animated gif to display within an image created with createImage () but it apparently doesn’t work with the great new gif update made for p5.js? Is this possible? Or am I forgetting something?

let img, gif;

function preload() {
  gif = loadImage('assets/test.gif');
}

function setup() {
  createCanvas(960, 540);
  img = createImage(320, 180);
}

function draw() {
  img.image(gif,0,0);
}
1 Like
2

I have even been able to verify that you cannot mask an animated gif with the mask () function either;
https://p5js.org/reference/#/p5.Image/mask

1 Like
3

Perhaps look at:

Also, you could try rendering your current gif state on a Graphics each frame and then masking that (untested)
https://p5js.org/reference/#/p5.Graphics

4

Hi! Animated gif has his own P5.js implementation already. But there are many details to polish…

5

If you want to dig into what it currently can / cannot do:

Looks like it draws the gif frame to the drawing context…?

So if you want to mask, draw frame to Graphics and then mask it should work (untested).