mask() problems in p5.js

ds45

I am trying to get the image to mask different parts of the image; however, the mask function only happens once. It does continue to draw the rectangle.

It can be seen in action at: http://jdsperry.people.ysu.edu/MASK/

Plus it only sort-of works in Chrome. It is all white in Firefox and no maks at all in Safari. THANKS for any help!

THE CODE:

var img;

function preload() { img = loadImage("test_low.jpg"); }

function setup() { createCanvas(780, 440); noStroke(); }

function draw() {

var x = random(width/2); var y = random(height/2); var a = random(width/2); var b = random(height/2);

var pg = createGraphics(width,height); pg.clear(); pg.rect(x,y,a,b); img.mask(pg); image(img,0,0);

fill(255,255,255,15); rect(0,0,width,height);

}

GoToLoop

http://forum.Processing.org/two/discussion/8045/how-to-format-code-and-text

Resources should rather be acquired within preload() or setup()! [-(

ds45

I wanted the mask to change and reveal a different part of the image each draw cycle. I updated the code, not sure it is any better.

var img, x,y,a,b,pg;

function preload() {
  img = loadImage("test_low.jpg");
}

function setup() {
  createCanvas(780, 440);
  noStroke();

  x = random(width/2);
  y = random(height/2);
  a = random(width/2);
  b = random(height/2);

  pg = createGraphics(width,height);
}

function draw() {
  pg.rect(x,y,a,b);
  img.mask(pg)
  image(img,0,0);

  x = random(width/2);
  y = random(height/2);
  a = random(width/2);
  b = random(height/2);

  fill(255,255,255,55); 
  rect(0,0,width,height);
}

joySeeing

Does this above even work? I'm trying to figure this out also. I get errors when I run the above code with some random image. When I replace pg with an image and not a graphic (more specifically, a Renderer Object as opposed to an Image object), it doesn't throw errors. The documentation on all of this is sparse. I hope someone will know how to use mask correctly with P5js!

GoToLoop

I get errors when I run the above code with some random image.

It's related to CORS: https://en.Wikipedia.org/wiki/Cross-origin_resource_sharing
Some forum posts too: http://forum.Processing.org/two/discussions/tagged/cors
Either use a local image or get it from a CORS enabled site! >-)

When I replace pg with an image... it doesn't throw errors.

Class p5.Image got method mask() and some other exclusive 1s. :-B
Problem is a p5.Renderer doesn't b/c it doesn't inherit from p5.Image as it should! ~X(