Masking with an p5.Renderer Object gives an error

mzeinstra

I have a function that grabs an image out of an array an creates a mask for that image (an ellipse on a specific location):

function getMask(image, size, w, h) { var mask = createGraphics(1280, 720); var img = imgList[image]; mask.fill(100); mask.ellipse(w, h, size, size); img.mask(mask); return img; }

Running this gives me a

Uncaught TypeError: Cannot read property 'width' of undefined p5.Renderer2D._copyHelper @ p5.js:14342 p5.copy @ p5.js:20920 p5.Image.copy @ p5.js:20575 p5.Image.mask @ p5.js:20632 getMask @ sketch.js:55 // <---- this line is 'img.mask(mask)' draw @ sketch.js:63 p5.redraw @ p5.js:16075 (anonymous function) @ p5.js:11801 _runIfPreloadsAreDone @ p5.js:11718 _decrementPreload @ p5.js:11725 img.onload @ p5.js:19883

Do I need to convert mask to an PImage? How can I get this to work?

GoToLoop

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

• Generally it's bad programming approach to access a foreign variable inside some utility function.
• That variable imgList was not passed as a parameter like the other 4: image, size, w, h.
• But the most strange is this: var img = imgList[image];
• Is parameter image a number? It should be, b/c arrays are supposed to be accessed by some numerical index value!
• Another possible problem is that createGraphics() returns a p5.Graphics instead of the expected p5.Renderer2D or p5.Renderer3D.
• p5.Graphics is a wrapper class for p5.Renderer object btW. A very gross oversight of p5.js project!
• And there's another possible problem: mask() is a p5.Image method.
• Perhaps it can't deal w/ p5.Graphics and/or p5.Renderer. Gonna investigate it further...

GoToLoop

• After some perusing, I've confirmed the bug is indeed p5.Graphics.
• p5.Image's mask() method cannot directly deal w/ it.
• However exposing its "hidden" _renderer property, which is actually a p5.Renderer, to the mask() method is OK.
• Until the p5.js project come to its senses, these kinda bugs gonna pop-up all the time.
• They should get rid of this useless p5.Graphics wrapper class ASAP! X(
• Here's my adapted code from http://p5js.org/examples/examples/Image_Alpha_Mask.php.
• Just copy & paste it there in order to check that out: :bz

let img, pgMask;

function preload() {
  img = loadImage('assets/moonwalk.jpg');
}

function setup() {
  createCanvas(720, 400);
  imageMode(CENTER);

  pgMask = createGraphics(img.width, img.height);
  pgMask.fill(0200, 0300);
  pgMask.ellipse(img.width>>1, img.height>>1, img.width>>1, img.height>>1);

  //img.mask(pgMask); // fails b/c mask() can't deal w/ p5.Graphics
  img.mask(pgMask._renderer); // works b/c _renderer property is a p5.Renderer
}

function draw() {
  background(0, 100, 150);
  image(img, width>>1, height>>1);
  image(img, mouseX, mouseY);
}

mzeinstra

Thanks! That did the trick, I would have never found out that there is a renderer property inside the Graphics.

Also thanks for the pointers on code formatting and conventions.

GoToLoop

Glad it worked for ya! But just to make sure, gonna try to explain the situation better: :-@

• p5.js class p5.Graphics should never exist at all.
• When we call createGraphics(), it should return to us a pure p5.Renderer object.
• Not some wrapper class w/ the p5.Renderer object assigned to some hidden property inside.
• Something logical like img.mask(pgMask); should simply work.
• It should never demand us to apply some undocumented hack like img.mask(pgMask._renderer); [-(
• Notice that its counterpart cousin createCanvas() returns a pure p5.Renderer object though. :(|)

GoToLoop

I would have never found out that there is a _renderer property inside the p5.Graphics.

Actually I had to search for it about a year ago: :-\"

1. Proof p5.Graphics stores either a p5.Renderer2D or a p5.Renderer3D in its _renderer property:
   https://GitHub.com/processing/p5.js/blob/master/src/core/p5.Graphics.js#L39

2. Proof that createGraphics() instantiates & returns a p5.Graphics wrapper object: :-&
   https://GitHub.com/processing/p5.js/blob/master/src/core/rendering.js#L203
   return new p5.Graphics(w, h, renderer, this);

3. Proof that createCanvas() instantiates 1 of the 2 pure p5.Renderer object types:
   https://GitHub.com/processing/p5.js/blob/master/src/core/rendering.js#L92

4. Then returns it at the end: return this._renderer; :>
   https://GitHub.com/processing/p5.js/blob/master/src/core/rendering.js#L108