Subtractive blending?

Programming Questions

jcolosi

in Programming Questions • 1 month ago

I can do additive blending. I'm using:

PGraphics.blendMode(ADD);
PGraphics.fill(0xff, 1);

This will slowly increase the from black to white . The image goes from ( 0,0,0,0xff) to ( 1,1,1,0xff) and eventually to ( 0xff,0xff,0xff,0xff) .

I have not been able to find a suitable way to slowly decrease the color from white to black . The SUBTRACT blend mode does not seem to work the way I'd expect. Any way I do it, it seems to clobber the alpha on the image, or go completely to black all at once. The method I have below is to filter(INVERT) the image, then draw white, then filter(INVERT) again. It works exactly as I'd like, but it's slow because the PGraphics has to be finalized twice.

Below I have a full and complete working example using this double invert method. I'd like to emulate this kind of result, but without all the inversion. I wonder if anyone has found a way to do this using a blendMode. Any help is appreciated.

/**
* Implement Additive and Subtractive blending
* by John Colosi
*
* Unfortunately, subtractive blending is unintuitive.
*/
// Buffers
int screenX = 800;
int screenY = 600;
int imageX = 1600;
int imageY = 1200;
float ratioX = (float) imageX / screenX;
float ratioY = (float) imageY / screenY;
// Variables
private PGraphics image;
int red, green, blue;
boolean isAdditive;
void setup() {
// Init screen buffer
size(screenX, screenY, P2D);
colorMode(RGB, 0xff);
background(0, 0, 0, 0xff);
// Init image buffer
image = createGraphics(imageX, imageY, P2D);
image.colorMode(RGB, 0xff);
image.background(0, 0, 0, 0xff);
// Init variables
red = 0xff;
green = 0xff;
blue = 0xff;
isAdditive = true;
}
void draw() {
if (mousePressed) {
if (isAdditive) drawBufferAdd();
else drawBufferSubtract();
image(image, 0, 0, screenX, screenY);
}
}
void drawBufferAdd() {
int x = (int) (mouseX * ratioX);
int y = (int) (mouseY * ratioY);
image.beginDraw();
image.blendMode(ADD);
image.rectMode(CENTER);
image.noStroke();
image.fill(red, green, blue, 1);
image.rect(x, y, 256, 256);
image.endDraw();
}
void drawBufferSubtract() {
int x = (int) (mouseX * ratioX);
int y = (int) (mouseY * ratioY);
image.beginDraw();
image.blendMode(ADD);
image.filter(INVERT);
image.rectMode(CENTER);
image.noStroke();
image.fill(red, green, blue, 1);
image.rect(x, y, 256, 256);
image.endDraw();
image.beginDraw();
image.filter(INVERT);
image.endDraw();
}
public void keyPressed() {
if (key == 's') image.save("GraphicsTest.png");
if (key == 'r') red = red > 0 ? 0 : 0xff;
if (key == 'g') green = green > 0 ? 0 : 0xff;
if (key == 'b') blue = blue > 0 ? 0 : 0xff;
if (key == 'z') isAdditive = !isAdditive;
}

Replies(5)

jcolosi

Re: Subtractive blending?

1 month ago

Any help with this? Maybe this should be in the Core Library section?

I'm looking for a way to slowly decrease from white to black.

Phospheros

Re: Subtractive blending?

1 month ago

Does it have to be done with a filter?
Can you not just grab each pixel value and decrement by some amount each frame?
I may not be understanding your use case well enough, but a simple fade to black should be easy.

jcolosi

Re: Subtractive blending?

1 month ago

Thanks Phospheros. It doesn't have to be a blendMode() or a filter(), but I want to be able to draw shapes (line, rect, etc...) So ideally the solution would work with stroke() and fill().

I could draw a rectangle by going to each point and grabbing the existing color, then calculating a new color, then drawing it down. But I think this would take too long.

I can go smoothly from black to white with this:

PGraphics.blendMode(ADD);
PGraphics.fill(0xff, 1);

So I'd like to find something similar to go smoothly from white to black.

PhiLho

Re: Subtractive blending?

1 month ago

" I think this would take too long"
Don't suppose. Try and see if it works. Use the pixels[] array, not get() and point()!
Don't forget that there is a strong chance that blend() or fill() do something similar behind the scene, anyway... (unless it is hardware accelerated or in native code, but I doubt it).

jcolosi

Re: Subtractive blending?

1 month ago

Thanks for replying @PhiLho.

I'm considering your proposal. In order to draw an anti-aliased line for instance, I would have to pull the pixels. Calculate the slope, find the points on slope, calculate distance of each pixel from the main line, modify the color value based on the aliasing, put those points into the array, and put to PGraphics.

It's actually not crazy @PhiLho, but it's a lot of work, to basically do a call to line().

All of it could be done, but you're basically re-implementing OpenGL. I was hoping that the solution to this issue would not involve re-implementing line().