# Overlay blendMode in Processing

**URL:** <https://discourse.processing.org/t/overlay-blendmode-in-processing/42467>\
**Category:** Beginners\
**Created:** [July 21, 2023, 1:35pm UTC](https://discourse.processing.org/t/overlay-blendmode-in-processing/42467 "2023-07-21T13:35:58Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![stixan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stixan/32/21628_2.png) [@stixan](https://discourse.processing.org/u/stixan)\
**Post date:** [July 21, 2023, 1:35pm UTC](https://discourse.processing.org/t/overlay-blendmode-in-processing/42467/1 "2023-07-21T13:35:58Z")

</div>

I need to use OVERLAY in `blendMode()` for a project I’m working on.

From reading the [documentation](https://processing.org/reference/blendMode_.html) I know that OVERLAY (as well as a number of other blend modes) is no longer supported. Yet, overlay is _the_ blend mode I need.

What are my options? Can I make my own custom blend mode to use when drawing shapes? Or do I need to manually pixel-per-pixel apply an image to themain canvas using an overlay blend formula?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 21, 2023, 3:23pm UTC](https://discourse.processing.org/t/overlay-blendmode-in-processing/42467/2 "2023-07-21T15:23:12Z")

</div>

Did you try **blend()** with OVERLAY

---

<div class="post-metadata">

**Author:** ![stixan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stixan/32/21628_2.png) [@stixan](https://discourse.processing.org/u/stixan)\
**Post date:** [July 21, 2023, 4:36pm UTC](https://discourse.processing.org/t/overlay-blendmode-in-processing/42467/3 "2023-07-21T16:36:53Z")

</div>

Yes. I tried `blend()` and got somewhat close to the results I’m loooking for. However, `blend()` requires a `PImage` as source, and I would like to skip this. Ideally, I want to be able to draw shapes like `circle()`, `square()`, `triangle()` directly on to the main canvas using a function that emulates the look of `blendMode(OVERLAY)`.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 21, 2023, 5:05pm UTC](https://discourse.processing.org/t/overlay-blendmode-in-processing/42467/4 "2023-07-21T17:05:44Z")

</div>

> [@stixan](#):
>
> However, **blend()** requires a PImage as source,

[PImage](http://processing.github.io/processing-javadocs/core/processing/core/PImage.html) is the parent class for subclass [PGraphics](http://processing.github.io/processing-javadocs/core/processing/core/PGraphics.html).

And also for other subclasses from some addon libraries, like [Movie](https://processing.org/reference/libraries/video/Movie.html), [Capture](https://processing.org/reference/libraries/video/Capture.html), etc.

That’s why we can pass variables of those subclasses’ datatype as an argument for functions like [**image()**](https://processing.org/reference/image_.html), [**set()**](https://processing.org/reference/set_.html), [**background()**](https://processing.org/reference/background_.html), etc.

---

<div class="post-metadata">

**Author:** ![stixan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stixan/32/21628_2.png) [@stixan](https://discourse.processing.org/u/stixan)\
**Post date:** [July 21, 2023, 5:09pm UTC](https://discourse.processing.org/t/overlay-blendmode-in-processing/42467/5 "2023-07-21T17:09:43Z")

</div>

Appreciate your input @GoToLoop. Please help me understand it in relation to my initial question. Is it the fact that `PImage` is a parent class that is somehow preventing the use of `OVERLAY` in `blendMode()`?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 21, 2023, 5:22pm UTC](https://discourse.processing.org/t/overlay-blendmode-in-processing/42467/6 "2023-07-21T17:22:37Z")

</div>

Not much experience w/ Processing blending, sorry.

But as far as I can understand from the reference docs, [**blend()**](https://processing.org/reference/blend_.html) is a filter copy operation which applies to all pixels from some selected area; while [**blendMode()**](https://processing.org/reference/blendMode_.html) modifies how new pixels are blended in existing pixels for future drawings/copies.

---

<div class="post-metadata">

**Author:** ![stixan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stixan/32/21628_2.png) [@stixan](https://discourse.processing.org/u/stixan)\
**Post date:** [July 21, 2023, 5:26pm UTC](https://discourse.processing.org/t/overlay-blendmode-in-processing/42467/7 "2023-07-21T17:26:53Z")

</div>

Thanks for clarifying. I get the same understanding from reading the reference as you do @GoToLoop.

It puzzles me how certain blend modes are supported while others - seemingly very related - blend modes somehow doesn’t work anymore (I can see in my earlier sketches that `OVERLAY` was indeed supported).

Bet it traces down to the way Processing’s different renderers work. Can somebody with more in-depth knowlegde shed some light on this?

---

<div class="post-metadata">

**Author:** ![stixan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stixan/32/21628_2.png) [@stixan](https://discourse.processing.org/u/stixan)\
**Post date:** [August 1, 2023, 2:35pm UTC](https://discourse.processing.org/t/overlay-blendmode-in-processing/42467/8 "2023-08-01T14:35:02Z")

</div>

Here’s a code snippet to help troubleshoot:

```auto
PGraphics brush;

void setup() {
  size(800, 800);
  brush = createGraphics(400, 400);
  brush.beginDraw();
  brush.background(255, 255, 0);
  brush.endDraw();
}

void draw() {
  background(255);
  fill(255, 0, 0);
  noStroke();
  rect(0, 0, 400, 400);
  //blend(brush, 0, 0, brush.width, brush.height, mouseX, mouseY, brush.width, brush.height, BLEND);
  blend(brush, 0, 0, brush.width, brush.height, mouseX, mouseY, brush.width, brush.height, OVERLAY);
}

```

In `setup()` I’m filling a `PGraphics` with a yellow background. In `draw()` I’m drawing a red square and using `blend()` to add that yellow image using `OVERLAY` as blend mode but nothing happens? The yellow image isn’t even showing?

To test if `blend()` is indeed working, I tried to use `BLEND` as the blend mode (see the commented line) and the yellow image appears as expected.

OVERLAY is such an important blend mode for anyone who want to simulate the behaviour of pigment based ink on paper. I’m really hoping someone can help me shed some light on this.

(I’m on a Mac 12.6.7 using Processing 4.2)