# Masks not working on animated gifs?

**URL:** <https://discourse.processing.org/t/masks-not-working-on-animated-gifs/29243>\
**Category:** p5.js\
**Created:** [April 9, 2021, 11:51am UTC](https://discourse.processing.org/t/masks-not-working-on-animated-gifs/29243 "2021-04-09T11:51:11Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sandersturing](https://avatars.discourse-cdn.com/v4/letter/s/8edcca/32.png) [@sandersturing](https://discourse.processing.org/u/sandersturing)\
**Post date:** [April 9, 2021, 11:51am UTC](https://discourse.processing.org/t/masks-not-working-on-animated-gifs/29243/1 "2021-04-09T11:51:11Z")

</div>

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):

```auto
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!

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 9, 2021, 12:11pm UTC](https://discourse.processing.org/t/masks-not-working-on-animated-gifs/29243/2 "2021-04-09T12:11:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sandersturing](https://avatars.discourse-cdn.com/v4/letter/s/8edcca/32.png) [@sandersturing](https://discourse.processing.org/u/sandersturing)\
**Post date:** [April 12, 2021, 8:20am UTC](https://discourse.processing.org/t/masks-not-working-on-animated-gifs/29243/3 "2021-04-12T08:20:23Z")

</div>

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](https://editor.p5js.org/sandersturing/sketches/t0UUL-pRJ)

 ![Screenshot 2021-04-12 at 10.19.57](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3259427443507ab2725b29a52da295fbc20e2c2e.jpeg)

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 12, 2021, 9:45am UTC](https://discourse.processing.org/t/masks-not-working-on-animated-gifs/29243/4 "2021-04-12T09:45:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sandersturing](https://avatars.discourse-cdn.com/v4/letter/s/8edcca/32.png) [@sandersturing](https://discourse.processing.org/u/sandersturing)\
**Post date:** [April 12, 2021, 9:49am UTC](https://discourse.processing.org/t/masks-not-working-on-animated-gifs/29243/5 "2021-04-12T09:49:55Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![sandersturing](https://avatars.discourse-cdn.com/v4/letter/s/8edcca/32.png) [@sandersturing](https://discourse.processing.org/u/sandersturing)\
**Post date:** [April 12, 2021, 10:06am UTC](https://discourse.processing.org/t/masks-not-working-on-animated-gifs/29243/6 "2021-04-12T10:06:06Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 12, 2021, 10:37am UTC](https://discourse.processing.org/t/masks-not-working-on-animated-gifs/29243/7 "2021-04-12T10:37:09Z")

</div>

here you go (frame is dropping because of obs)

[https://www.khm.de/~n.hieda/discourse29243.mp4](https://www.khm.de/~n.hieda/discourse29243.mp4)