how to create a dynamic mask image?

dnassler

I want to create a mask that I've drawn curves into using a P5.Graphics from a createGraphics call. I want to use the mask to mask an image that will be drawn into the main canvas. I'm doing this as follows...

function drawCutout( img, i ) {

  pg.clear();
  pg.fill(0,0,255,255);
  pg.noStroke();

  pg.beginShape();
  var xoff = 0;

  for (var x = 0; x <= width+100; x += 100) {

    //var y = map(noise(xoff, yoff-0.5*i), 0, 1, height/10*(i+1), height - height/10 + height/10*i);
    var y = 300;

    pg.vertex(x, y);

    xoff += 0.05;
  }

  pg.vertex(width, height);
  pg.vertex(0, height);
  pg.endShape(CLOSE);

  yoff += 0.01;

  //image(pg,0,0);

  imgMasked.set(0,0,img);
  imgMasked.mask(pg); // issue here on the iPad and iMacBook
  image(imgMasked,0,0);
}

Notice above that the mask I'm creating with vertex calls is a straight line (this is to simplify the problem). Basically everything works on a desktop browser but on an iPad or my iMacBookPro (both retina displays) the mask is positioned at what appears to be double the value that it should. The problem seems to be only with the mask. Note that I'm trying to use a mask that is from the graphics buffer. Maybe I shouldn't be using the "mask()" call with a p5.Graphics object as input (which contains the mask)? But if that is wrong to use then how would I create a mask dynamically for an image?

Ale_

Hi. It might be a problem with the retina display and the way it handles image resolution. Have you tried to create the mask manually, setting the pixels directly? Something like this (being the mask a white backgrounded image with mask shapes filled in black):

for(int i = 0; i < pixels.length; i++) pixels[i] = mask.pixels[i] | img.pixels[i];

Good luck! ; )

lmccart

I think this just got fixed in the newest version: https://github.com/lmccart/p5.js/blob/master/lib/p5.js