Thursday, August 5, 2021

p5 drawing clipping masks

I have an idea for an art project, roughly speaking using photos as wedges in a pie chart.

I knew you could make "masks" in p5 but wasn't sure if they had to be images... nope, stackoverflow says they can also be offscreen graphics. You make an offscreen image, draw the shape of the photo you want to see in black, and then apply it to your image object.

A slight gotcha - besides the slight oddness that the mask is applied to the image itself - is that the mask stretches to cover the whole image.

So this code:

let circleMask;
let myImage;

function setup() {
  createCanvas(526  ,688);
  circleMask = createGraphics(1000, 1000);
  myImage = loadImage('flamingo.jpg');
}

function draw() {
  background(100,0,0);
  circleMask.fill('rgba(0, 0, 0, 1)');
  circleMask.circle(500, 500, 500);
  myImage.mask(circleMask);
  image(myImage,0,0);
}

leads to 

i.e. even though the mask was made as a circle, when I applied it to the tall image, it got stretched into an oval.


No comments:

Post a Comment