Question about state of image effects in p5.js

p5.js
1

Hi,

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.

1. MASKS:
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:

maxresdefault.jpg1280Ă—720 69.4 KB

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?

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

Desired outcome:

But between two images.

Is this possible?

Thank you

Oliver

1 Like
2

Hi,

Some of what you are asking are possible. Just check out the reference: https://p5js.org/reference/#/p5/blend

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

1 Like
3

BlendMode! Great! :slight_smile: thaanx

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

4

Again, just have a look at the reference. There is a function called mask() within the p5 image class: https://p5js.org/reference/#/p5.Image

1 Like
5

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: