# blendMode to reduce opacity?

**URL:** <https://discourse.processing.org/t/blendmode-to-reduce-opacity/6705>\
**Category:** Processing\
**Created:** [December 17, 2018, 2:32pm UTC](https://discourse.processing.org/t/blendmode-to-reduce-opacity/6705 "2018-12-17T14:32:21Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 17, 2018, 2:32pm UTC](https://discourse.processing.org/t/blendmode-to-reduce-opacity/6705/1 "2018-12-17T14:32:21Z")

</div>

Hi! I have a circle on a PGraphics. I want reduce the opacity of parts of it. Imagine painting with your mouse on the PGraphics and instead of adding paint, it becomes more transparent under the mouse.

By using `blendMode(REPLACE);` I can make it fully transparent, but is it possible to apply say 50% transparency?

```auto
PGraphics pg;

void setup() {
  size(300, 300, P2D);
  pg = createGraphics(width, height, P2D);
  pg.beginDraw();
  pg.background(255, 0);
  
  // draw white circle
  pg.noStroke(); 
  pg.ellipse(width/2, height/2, 200, 200);
  
  // bite the circle, reduce opacity
  pg.blendMode(REPLACE);
  pg.fill(255, 0);
  pg.ellipse(width/3, height/3, 200, 200);
  
  pg.endDraw();  
}

void draw() {
  background(#DDDDDD);
  line(0, 0, width, height);
  image(pg, 0, 0);
}

```

produces

![2018-12-17-152638_300x300_scrot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2b28e5e11d7bcbc8dacad66eaf734eeadb5fab2a.png)

I try reducing opacity like this

```auto
  // bite the circle, reduce opacity
  pg.blendMode(SUBTRACT);
  pg.fill(0, 100);
  pg.ellipse(width/3, height/3, 200, 200);

```

but this is what I get:  
 ![2018-12-17-152858_300x300_scrot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/38f60efc749c1c1448cca8933199c67c754b0aab.png)  
The opacity of the white circle is not reduced, and for some reason the transparent area becomes partially opaque.

MULTIPLY gives me a similar result, so it seems like the alpha is not multiplied.

I know how to do it with a shader, but I was wondering if it’s possible to achieve with `blendMode`? Is this related to those pre-multiplied alpha issues?

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [December 17, 2018, 3:10pm UTC](https://discourse.processing.org/t/blendmode-to-reduce-opacity/6705/2 "2018-12-17T15:10:47Z")

</div>

> [@hamoid](#):
>
> MULTIPLY gives me a similar result, so it seems like the alpha is not multiplied.

See my message in the thread at [Low framerate when my line is fading away? - #11 by neilcsmith](https://discourse.processing.org/t/low-framerate-when-my-line-is-fading-away/6582/11) (which you were also involved in! 😉 ) It’s doable but you need to access PGL and set the blend functions back to the old implementation of MULTIPLY. eg.

```auto
p.blendMode(MULTIPLY); // just make sure Processing does all the other blendMode related things
((PGraphicsOpenGL)p).pgl.blendFunc(PGL.ZERO, PGL.SRC_COLOR);

```

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 17, 2018, 3:16pm UTC](https://discourse.processing.org/t/blendmode-to-reduce-opacity/6705/3 "2018-12-17T15:16:43Z")

</div>

Nice! Thank you 🙂 You’r the blend master 😛

```auto
  // bite the circle, reduce opacity
  pg.blendMode(MULTIPLY); // just make sure Processing does all the other blendMode related things
  ((PGraphicsOpenGL)pg).pgl.blendFunc(PGL.ZERO, PGL.SRC_COLOR);
  pg.fill(255, 150);
  pg.ellipse(width/3, height/3, 200, 200);

```

![2018-12-17-161523_300x300_scrot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/73f02cd89a116112d1cb4ae491d31889b3bfa7fa.png)

Beautiful 🙂

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [December 17, 2018, 3:27pm UTC](https://discourse.processing.org/t/blendmode-to-reduce-opacity/6705/4 "2018-12-17T15:27:51Z")

</div>

> [@hamoid](#):
>
> Nice! Thank you 🙂 You’r the blend master 😛

Haha, thanks! 😊 Been doing this blend stuff for a long time, including hacking around Processing’s shortcomings in this area. In fact, one key difference in PraxisLIVE is correctly functioning blend modes and pre-multiplied alpha (former requires latter). _Tried_ to get it fixed upstream (see eg. [Add support for pre-multiplied alpha · Issue #3391 · processing/processing · GitHub](https://github.com/processing/processing/issues/3391) ) Current MULTIPLY is neither a correctly functioning (ie. Photoshop-like) multiply, nor the also useful masking multiply that you needed.

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 17, 2018, 3:45pm UTC](https://discourse.processing.org/t/blendmode-to-reduce-opacity/6705/5 "2018-12-17T15:45:36Z")

</div>

What are the default args for `blendMode(MULTIPLY)` ?

GitHub search gives me only [two mentions of `blendFunc`](https://github.com/processing/processing/search?q=blendFunc&unscoped_q=blendFunc).

Update: must be a GitHub search bug, a local search gives me the answer

```auto
$ ag blendFunc -C 5

opengl/PGraphicsOpenGL.java
...
6290- } else if (blendMode == MULTIPLY) {
6291- if (blendEqSupported) {
6292- pgl.blendEquationSeparate(PGL.FUNC_ADD,
6293- PGL.FUNC_ADD);
6294- }
6295: pgl.blendFuncSeparate(PGL.ZERO, PGL.SRC_COLOR,
6296- PGL.ONE, PGL.ONE);
6297-
6298- } else if (blendMode == SCREEN) {

```

Update 2: In GitHub

> Only files smaller than 384 KB are searchable.

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [December 17, 2018, 4:17pm UTC](https://discourse.processing.org/t/blendmode-to-reduce-opacity/6705/6 "2018-12-17T16:17:46Z")

</div>

![1545063221869t](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a93efffed5e474818093dedfdbdb671bfd10896e.jpeg)

This is where I need to spray some transparency, to avoid it becoming too messy 🙂 There are still some glitches, but it’s better than before.

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [December 17, 2018, 4:32pm UTC](https://discourse.processing.org/t/blendmode-to-reduce-opacity/6705/7 "2018-12-17T16:32:43Z")

</div>

> [@hamoid](#):
>
> What are the default args for `blendMode(MULTIPLY)` ?

Well, you found it eventually. For a proper Photoshop-style multiply it should be (if Processing also supported pre-multiplied alpha) -

```java
pgl.blendFunc(PGL.DST_COLOR, PGL.ONE_MINUS_SRC_ALPHA);

```

This correctly accounts for alpha in the source - ie. transparent areas should cause no effect. Of course, not what you need for this! Code from [here](https://github.com/praxis-live/praxis/blob/master/praxis.video.pgl/src/org/praxislive/video/pgl/PGLGraphics.java#L138)

Incidentally, on blend modes, the slides I linked to in the issue above are worth a read through - [Blend Modes for OpenGL | PPT](https://www.slideshare.net/Mark_Kilgard/blend-modes-for-opengl)

(somehow never come across `ag` before - thanks! Definitely my search tool of choice now! 😄 )

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [January 14, 2019, 9:28am UTC](https://discourse.processing.org/t/blendmode-to-reduce-opacity/6705/8 "2019-01-14T09:28:20Z")

</div>

If anyone needs to use `blendFunc()` I found this great page where you can experiment with the values until you get the effect you want:

[https://andersriggelsen.dk/glblendfunc.php](https://andersriggelsen.dk/glblendfunc.php)

Also half way down this page [https://learnopengl.com/Advanced-OpenGL/Blending](https://learnopengl.com/Advanced-OpenGL/Blending) the math is explained.