# Animating masks P5.js

**URL:** https://discourse.processing.org/t/animating-masks-p5-js/11271
**Category:** Coding Questions
**Created:** [May 15, 2019, 1:29pm UTC](https://discourse.processing.org/t/animating-masks-p5-js/11271 "2019-05-15T13:29:59Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Hobie](https://avatars.discourse-cdn.com/v4/letter/h/779978/32.png) [@Hobie](https://discourse.processing.org/u/Hobie)
#### Post date: [May 15, 2019, 1:29pm UTC](https://discourse.processing.org/t/animating-masks-p5-js/11271/1 "2019-05-15T13:29:59Z")

</div>

Hello,

For my thesis i’m researching generative design for online advertisements. I have been working with P5 to generate background visuals for SEAT. (this is a fictional case).

I want to animate masks to display certain car models.

Example: [https://hobiewetzels.nl/afstuderen/prototype/SEAT/masks/v1/](https://hobiewetzels.nl/afstuderen/prototype/SEAT/masks/v1/)

JavaScript code:

```auto
var img;
var imgClone;

var mousexpos = 0;
var mouseypos = 0;
 
var mk;
var i = 0;
var x = 0;
var a = 0;

var angle = 0;

var offset = 0;

var speed = 20;

var colorsArona = ["#00afac" , "#ee7d05", '#fcc446'] 

function preload() {
  
  img = loadImage('_assets/car_models/arona2.png');

  img2 = loadImage('_assets/car_models/arona.png');

  img3 = loadImage('_assets/car_models/arona3.png');

}
 
function setup() {
    let myCanvas = createCanvas(970, 250);
    myCanvas.parent('myContainer');
    background(colorsArona[2]);
    mk = createGraphics(970, 250);

    mk2 = createGraphics(970, 250);

}
 
function draw() {

  background(colorsArona[2]);

  image(img3, -1 * offset, 0);

    //first model
    mk.rect(970, 0, i + offset, 125);
    fill(colorsArona[0]);
    noStroke();
    rect(970, 0, i, 125);
    ( imgClone = img.get() ).mask( mk.get() );
    image(imgClone, -1 * offset, 0);

    //second mdoel
    mk2.rect(0, 125, a + offset, 125);
    fill(colorsArona[1]);
    noStroke();
    rect(0, 125, a, 250);
    ( imgClone2 = img2.get() ).mask( mk2.get() );
    image(imgClone2, -1 * offset, 0);

    a = sin(angle) * 500;
    i -= 1 * speed;

    angle += 0.01;

}

$(document).ready(function () {
  $("#art").mousemove(function (event) {
    mousexpos = event.pageX - 652;
    mouseypos = event.pageY - 135;
    console.log(mousexpos);

  });

});

```

As you can see the masking worksfine, but only in one direction. Once the mk2.rect (the mask on the bottom image) pulls back it does not update the image. The colored rectangles are seperate rectangles that are just animated to match the masks.

Any help would be greatly appreciated as I have no idea why it doesn’t update the image, once it the mask goes in the other direction.

Maybe there are better ways to create an animating shape and transform it to an image so it can be used as a mask?

Thank you in advance!!

Greetings,

Hobie

---

<div class="post-metadata">

### Author: ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)
#### Post date: [May 15, 2019, 3:03pm UTC](https://discourse.processing.org/t/animating-masks-p5-js/11271/2 "2019-05-15T15:03:25Z")

</div>

like [this](https://editor.p5js.org/hotfooted/sketches/9csJKKAnX)? if so the masks just needed clearing.

---

<div class="post-metadata">

### Author: ![Hobie](https://avatars.discourse-cdn.com/v4/letter/h/779978/32.png) [@Hobie](https://discourse.processing.org/u/Hobie)
#### Post date: [May 15, 2019, 3:39pm UTC](https://discourse.processing.org/t/animating-masks-p5-js/11271/3 "2019-05-15T15:39:40Z")

</div>

Yes thank you so much for your time :)!