# What does the blend modes refer to?

**URL:** <https://discourse.processing.org/t/what-does-the-blend-modes-refer-to/7211>\
**Category:** Coding Questions\
**Created:** [January 5, 2019, 8:52am UTC](https://discourse.processing.org/t/what-does-the-blend-modes-refer-to/7211 "2019-01-05T08:52:11Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidjj](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@davidjj](https://discourse.processing.org/u/davidjj)\
**Post date:** [January 5, 2019, 8:52am UTC](https://discourse.processing.org/t/what-does-the-blend-modes-refer-to/7211/1 "2019-01-05T08:52:11Z")

</div>

When using [image.blend()](https://p5js.org/reference/#/p5/blend) there is a list of Blend modes: `BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.`

And these all constants defined somewhere.

What do these refer to? They don’t appear to match the [canvas compositing blend modes.](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing)

---

<div class="post-metadata">

**Author:** ![davidjj](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@davidjj](https://discourse.processing.org/u/davidjj)\
**Post date:** [January 5, 2019, 8:57am UTC](https://discourse.processing.org/t/what-does-the-blend-modes-refer-to/7211/2 "2019-01-05T08:57:08Z")

</div>

This here is probably the best resource for this:

[https://processing.org/reference/blendMode\_.html](https://processing.org/reference/blendMode_.html)

---

<div class="post-metadata">

**Author:** ![Architector\_4](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/architector_4/32/813_2.png) [@Architector\_4](https://discourse.processing.org/u/Architector_4)\
**Post date:** [January 5, 2019, 9:06am UTC](https://discourse.processing.org/t/what-does-the-blend-modes-refer-to/7211/3 "2019-01-05T09:06:33Z")

</div>

As far as I know, they refer to specific numbers, which are also defined inside of source code of `blend()` and `blendMode()` to interpret them.  
For the simple answer, do `println(BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD, NORMAL);` and read the output. :v

---

<div class="post-metadata">

**Author:** ![Architector\_4](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/architector_4/32/813_2.png) [@Architector\_4](https://discourse.processing.org/u/Architector_4)\
**Post date:** [January 5, 2019, 9:13am UTC](https://discourse.processing.org/t/what-does-the-blend-modes-refer-to/7211/4 "2019-01-05T09:13:19Z")

</div>

Or, you can read Processing source code, specifically PConstants.java:

> <https://github.com/processing/processing/blob/master/core/src/processing/core/PConstants.java>

Specifically, lines 254 to 271:

```auto
  // blend mode keyword definitions
  // @see processing.core.PImage#blendColor(int,int,int)

  public final static int REPLACE = 0;
  public final static int BLEND = 1 << 0;
  public final static int ADD = 1 << 1;
  public final static int SUBTRACT = 1 << 2;
  public final static int LIGHTEST = 1 << 3;
  public final static int DARKEST = 1 << 4;
  public final static int DIFFERENCE = 1 << 5;
  public final static int EXCLUSION = 1 << 6;
  public final static int MULTIPLY = 1 << 7;
  public final static int SCREEN = 1 << 8;
  public final static int OVERLAY = 1 << 9;
  public final static int HARD_LIGHT = 1 << 10;
  public final static int SOFT_LIGHT = 1 << 11;
  public final static int DODGE = 1 << 12;
  public final static int BURN = 1 << 13;

```

The `<<` is bit shift operation, so it pretty much sets the corresponding bit on. So, `1 << 0` is binary `0000 0001`, `1 << 1` is binary `0000 0010`, `1 << 2` is binary `0000 0100`, and so on.

---

<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:** [January 5, 2019, 12:37pm UTC](https://discourse.processing.org/t/what-does-the-blend-modes-refer-to/7211/5 "2019-01-05T12:37:14Z")

</div>

[Processing.GitHub.io/processing-javadocs/everything/processing/core/PConstants.html](http://Processing.GitHub.io/processing-javadocs/everything/processing/core/PConstants.html)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [January 25, 2019, 12:40am UTC](https://discourse.processing.org/t/what-does-the-blend-modes-refer-to/7211/6 "2019-01-25T00:40:58Z")

</div>

For the actual `blendMode` code, I believe that the stubs are in PGraphics.java and the implementation is different for different render modes.

In the default Java2D mode, check out `blendModeImpl()`.

> <https://github.com/processing/processing/blob/master/core/src/processing/awt/PGraphicsJava2D.java#L1006>

…and _in particular_, read the class `BlendingContext`.

> <https://github.com/processing/processing/blob/master/core/src/processing/awt/PGraphicsJava2D.java#L1024-L1032>

It has a nice note to explain where the code came from, linking to an old article on blending in Java.

[http://www.curious-creature.org/2006/09/20/new-blendings-modes-for-java2d/](http://www.curious-creature.org/2006/09/20/new-blendings-modes-for-java2d/)

---

<div class="post-metadata">

**Author:** ![gregorfa](https://avatars.discourse-cdn.com/v4/letter/g/5f9b8f/32.png) [@gregorfa](https://discourse.processing.org/u/gregorfa)\
**Post date:** [March 7, 2019, 8:14pm UTC](https://discourse.processing.org/t/what-does-the-blend-modes-refer-to/7211/8 "2019-03-07T20:14:22Z")

</div>

Maybe that is why the blendMode(NORMAL) doesn’t seem to work here. If you use another mode (DARKEST for example) it will change, but revert to normal does not seem to work. What am I missing?

```auto
function setup() {
createCanvas(400, 400);
}

function draw() {
background(220);

blendMode(LIGHTEST);
strokeWeight(30);
stroke(80, 150, 255);
line(25, 25, 75, 75);
//this does not seem to have any effect
blendMode(NORMAL);

stroke(255, 50, 50);
line(75, 25, 25, 75);
noLoop(0);

}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 7, 2019, 8:27pm UTC](https://discourse.processing.org/t/what-does-the-blend-modes-refer-to/7211/9 "2019-03-07T20:27:02Z")

</div>

EDIT: Well, your problem might be that you (new poster @gregorfa) are writing p5.js, but this thread is in the Processing(Java) forum and linked to the Processing(Java) reference and source code.

p5.js is JavaScript, so it has a different reference, and different source code.

- [https://p5js.org/reference/](https://p5js.org/reference/)
- [https://github.com/processing/p5.js](https://github.com/processing/p5.js)

Searching the source:

- [https://github.com/processing/p5.js/search?q=blendmode](https://github.com/processing/p5.js/search?q=blendmode)

---

<div class="post-metadata">

**Author:** ![gregorfa](https://avatars.discourse-cdn.com/v4/letter/g/5f9b8f/32.png) [@gregorfa](https://discourse.processing.org/u/gregorfa)\
**Post date:** [March 7, 2019, 9:28pm UTC](https://discourse.processing.org/t/what-does-the-blend-modes-refer-to/7211/10 "2019-03-07T21:28:26Z")

</div>

Ooops! Thanks much.