clipping masks or masking in p5/processing

Cai

hey guys , i have a doubt. I have attached a a gif . that shows an animation happening over an image(canvas) i made the that image in after effects(adobe) .So I was wondering how it could be done in p5/processing .

So my question is how do I mask out a certain animation/image with a certain shape.

Cai

this is the link to the gif .. incase it does not load . https://1.bp.blogspot.com/-0HHUg2tOMWI/WNd0JHjjVqI/AAAAAAAAFco/7ycxlz8ISnAoMVKndOeghPRKPKushAb2wCK4B/s320/grid.gif

kfrajer

It looks like mask only works with image objects: https://p5js.org/examples/image-alpha-mask.html
https://forum.processing.org/two/discussion/11942/mask-problems-in-p5-js

One option: http://p5js.org/reference/#/p5/blend

Like this:

var pg,pgmask;
var ctr;  //Values from 0 to 200


function setup() {
  createCanvas(780, 440);
  noStroke();
  ctr=0;


  pg = createGraphics(200,200);
  //pg.background(255);
  pg.fill(255,25,25);
  pg.rectMode(CENTER);
  pg.rect(100,100,100,100);

  pgmask = createGraphics(200,200);  
  pgmask.fill(255,25,25);
  pgmask.ellipse(100,100,100,100);

  //noLoop();
}

function draw() {
  background(0);  
  image(pg,0,0);  
  var x =get();

  background(0);
  image(pgmask,0,0);
  image(pgmask,200,200);

  blend(x,0,0,200,200,0,0,200,200,DIFFERENCE);
  blend(x,0,0,200,200,100+ctr,200,200,200,DIFFERENCE);
  ctr++;

  if(ctr==200) ctr=0;
}

Then you need to generate the stripes, a set of rectangles over a rotated sketch and using the the DIFFERENCE blend mode.

Kf