Hey there,
I’m a bit new to creative coding and even more using p5js. I’m currently working on a sketch in which I need to mask a letter several times (several rows and a cut letter inside) in the canvas.
I was approaching this sketch but all of a sudden I saw there’s no way to mask polygons, only images. I’ve tried to mask an image with the letter with createGraphics() but apparently I can only have one of these un a sketch and I couldn’t make it work.
How can we mask several polygons (many rows)?
Thanks!
You can use erase() and noErase() with arbitrary shape drawing functions in order to remove shapes from a p5.Graphics buffer (however if you prefer to specify what shapes to keep rather that which to remove then this is less helpful). Additionally you can use drawingContext.globalCompositeOperation = 'destination-in'; to perform the equivalent of mask() on either a p5.Graphics buffer or on the main canvas (in this mode the subsequent drawing instructions will effectively just replace the alpha channel of what is already there). Lastly you can get an image representation of a p5.Graphics buffer using the get() function, at which point you can use the built in mask() function.
2 Likes
Cool! Thank you so much for this detailed answer, Paul. I’ll definitely go for the second option since it sounds more like what I need.
Thank you so much!