Masking an Image

p5.js Coding Questions
1

I’m just trying to create a simple graphic and then mask off part of it. This works if I replace the createdGraphic with just an image, but for some reason, when using createGraphic and then saving off an image, it will not mask at all. what am I doing wrong?

var img;
var imgClone;
var mk;

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

    img_mask = loadImage('assets/mask.png');

    img = createGraphics(400, 400);
    img.fill(255,204,0);
    img.ellipse(200, 200, 300, 300);
    imgClone = img.get();
    imgClone.mask(img_mask);

}

function draw() {
    background(100);
    imgClone.mask(img_mask);
    image(imgClone,0,0);
}
1 Like
2
3

Like GoToLoop pointed out you need to use the preload to read in your image mask files.

Adding this should fix it

function preload(){
	img_mask = loadImage('assets/mask.png')
}

https://editor.p5js.org/hellonearthisman/sketches/uCqNorIbT

/verbose

2 Likes
4

That fixed it. Thanks guys.