# Question about state of image effects in p5.js

**URL:** <https://discourse.processing.org/t/question-about-state-of-image-effects-in-p5-js/6045>\
**Category:** p5.js\
**Created:** [November 28, 2018, 8:56pm UTC](https://discourse.processing.org/t/question-about-state-of-image-effects-in-p5-js/6045 "2018-11-28T20:56:37Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ogoossens](https://avatars.discourse-cdn.com/v4/letter/o/8e7dd6/32.png) [@ogoossens](https://discourse.processing.org/u/ogoossens)\
**Post date:** [November 28, 2018, 8:56pm UTC](https://discourse.processing.org/t/question-about-state-of-image-effects-in-p5-js/6045/1 "2018-11-28T20:56:37Z")

</div>

**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:**

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7fe995397728b4522bc9f08f53209a8724bba091.jpeg)

**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:  
 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b099a9523fa2239ad77687f83c12e39a637ae461.jpeg)

**But between two images.**

**Is this possible?**

**Thank you**

**Oliver**

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [November 28, 2018, 9:21pm UTC](https://discourse.processing.org/t/question-about-state-of-image-effects-in-p5-js/6045/2 "2018-11-28T21:21:02Z")

</div>

Hi,

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

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

---

<div class="post-metadata">

**Author:** ![ogoossens](https://avatars.discourse-cdn.com/v4/letter/o/8e7dd6/32.png) [@ogoossens](https://discourse.processing.org/u/ogoossens)\
**Post date:** [November 28, 2018, 9:23pm UTC](https://discourse.processing.org/t/question-about-state-of-image-effects-in-p5-js/6045/3 "2018-11-28T21:23:09Z")

</div>

BlendMode! Great! 🙂 thaanx

And how about masks? Movable and editable masks? 🙂

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [November 28, 2018, 9:29pm UTC](https://discourse.processing.org/t/question-about-state-of-image-effects-in-p5-js/6045/4 "2018-11-28T21:29:40Z")

</div>

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](https://p5js.org/reference/#/p5.Image)

---

<div class="post-metadata">

**Author:** ![ogoossens](https://avatars.discourse-cdn.com/v4/letter/o/8e7dd6/32.png) [@ogoossens](https://discourse.processing.org/u/ogoossens)\
**Post date:** [November 28, 2018, 9:56pm UTC](https://discourse.processing.org/t/question-about-state-of-image-effects-in-p5-js/6045/5 "2018-11-28T21:56:24Z")

</div>

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 🙂