Animating masks P5.js

p5.js Coding Questions
1

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/

JavaScript code:

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

1 Like
2

like this? if so the masks just needed clearing.

2 Likes
3

Yes thank you so much for your time :)!