P5.js: Use a raster image to Mask a drawn pattern

[should I put this in programming question or questions about code?]

I saw the example here: Alpha Mask, to mask an image with another image of the same size. Now I'm wondering how could I mask a drawn pattern with an image. My web app creates a pattern, or combines more patterns together. But they have to be seen only on some parts of a face (they're tatoos).
So:
step1. I draw patterns on a canvas
step2. I apply a background face image of the same canvas size
step3. Clicking few buttons, I choose which parts of the face are covered by tatoos: I activate different masks

I was thinking about telling the app to save the generated pattern as an image and to put it under the mask, but I'd like I could still alter the tatoo (by moving mouseX,Y) while choosing the mask.

So should be a raster image which masks a vector "live" pattern. Any idea?

Cattura

Comments

  • "[should I put this in programming question or questions about code?]"
    In the P5.js category, since it seems important enough to be put in your subject... I moved the topic. If that's not relevant, it belongs actually to How To, because you don't show code (so not Questions about Code), and that's not a generic programming question.

Sign In or Register to comment.