p5.js - using mask() on createGraphics() object

cdaein

I noticed that mask() does not work on an object created from createGraphics().

The code below does not work:

var img;
var mk;

function setup() {
    createCanvas(400, 400);

    img = createGraphics(200, 200);
    img.ellipse(100, 100, 100, 100);

    mk = createGraphics(200, 200);
    mk.rect(0, 0, 100, 100);

    img.mask(mk);
}

function draw() {
    background(200);
    image(img, 0, 0);
}

Then, is there a way to convert p5.Graphics to p5.Image object so that mask() method can be used?

Or, I wonder if there's other ways to apply the mask.

GoToLoop

1. https://ThimbleProjects.org/gotoloop/97931/
2. https://ThimbleProjects.org/gotoloop/97931/sketch.js
3. https://forum.Processing.org/two/discussion/18109/how-can-i-clone-an-image-object#Item_3

cdaein

Thanks for the comment, but what I'm wondering is not how to use image file mask, but to use createGraphics() to generate the mask within p5.js. Something similar to PGraphics in Processing.

GoToLoop

Use get() in order to get a clone of it as a p5.Image:
https://p5js.org/reference/#/p5.Image/get

( masked = original.get() ).mask(masker);

cdaein

Thank you! now I understand. Here is an updated code:

var img;
var imgClone;

var mk;

function setup() {
    createCanvas(400, 400);

    img = createGraphics(200, 200);
    img.ellipse(100, 100, 100, 100);

    mk = createGraphics(200, 200);
    mk.rect(0, 0, 100, 100);

    ( imgClone = img.get() ).mask( mk.get() );
}

function draw() {
    background(200);
    image(imgClone, 0, 0);
}

bmoren

//posted in wrong thread