Question about state of image effects in p5.js


I have two questions regarding two effects and their possible use in P5.js - if its possible or if there are any workarounds if not directly.

I would love to use MASKS (areas where images/geometries) are either visible or not.

Possibly modify these mask areas on the fly.

Is this even possible?

Desired outcome:

As I see it:

  • there is some background
  • than there is an yellow plane overlay
  • then there is a mask applied on this yellow plane in shape of a font

Voila: you see _“through”_

Can this be somehow achieved in/with P5.js

Even with primitives it would be great (masks in form of rectangles would be sufficient), or font. ? Possibly move the mask, scale it? Rotate it?

I would love to use blending modes between two images using P5.js

Desired outcome:

But between two images.

Is this possible?

Thank you


1 Like


Some of what you are asking are possible. Just check out the reference:

I’m not sure all the blend mode you want are available but there is a lot already.

1 Like

BlendMode! Great! :slight_smile: thaanx

And how about masks? Movable and editable masks? :slight_smile:

Again, just have a look at the reference. There is a function called mask() within the p5 image class:

1 Like

Yes I saw that, but that uses “static alpha” - from an image my idea was to construct a mask and change the dimensions scale etc … with image it could be trickier but Ill have a look into it thank you :slight_smile: