Masks not working on animated gifs?

p5.js
1

I’m trying to display animated gifs using

planetSurface[0] = loadImage('assets/planets/tp.gif');

This works, but I would like to mask them out (using a simple image with a black circle):

planetSurface[this.i].mask(planetMask);

I don’t get any errors, but the mask is not applied. If I change the GIF to a static image (PNG or JPG), the mask works:

planetSurface[0] = loadImage('assets/planets/tp.png');

Any idea how I can get this to work? Would also not mind switching to video instead of GIFS, but displaying videos doesn’t seem to work at all anymore in my P5.

Other solutions for displaying a gif in a circle are also most welcome!

2

can you provide an example ideally on the web editor so each one of us doesn’t have to set it up individually?

1 Like
3

Yeah sorry, that’s actually a much better idea of course! Maybe hoped someone would’ve bumped into this exact problem before… Here is a simple setup of what I’m trying to achieve:

https://editor.p5js.org/sandersturing/sketches/t0UUL-pRJ

Screenshot 2021-04-12 at 10.19.57
Screenshot 2021-04-12 at 10.19.57800×806 64.7 KB

4

thanks a lot!

I found a weird thing. My guess was I should move the mask function to draw because the animated gif updates in time. On windows, chrome shows no difference while firefox renders flickering image (alternates with and without mask). I couldn’t find a relevant issue on github so it may be helpful to open one.

5

Thanks for checking! I have to say I also tried to apply the mask everytime in draw before actually displaying the image, but same effect.

I can imagine they handle animated gifs differently. In the documentation it for example still says loadImage() will only give you the first frame of a GIF and you have to use createImg() to display the animated GIF. Tried it as well, but you can’t mask if you use createImg.

Good idea of putting it up on Github, will do that!

6

By the way, I can’t reproduce the flickering image with the mask being applied and not applied in turns. Tried Firefox, Safari on Mac and Firefox on Windows. Any way you could screenrec this for me?

Thanks again!

7

here you go (frame is dropping because of obs)