What does the blend modes refer to?

Processing Coding Questions
1

When using image.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.

1 Like
2

This here is probably the best resource for this:

https://processing.org/reference/blendMode_.html

3

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

4

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

Specifically, lines 254 to 271:

  // 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.

2 Likes
5

Processing.GitHub.io/processing-javadocs/everything/processing/core/PConstants.html

1 Like
6

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().

…and in particular, read the class BlendingContext.

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/

1 Like
8

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?

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);

}
9

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.

Searching the source:

10

Ooops! Thanks much.