PGraphics.Blend problem with image slowly getting darker

Programming Questions

XYZZY

PGraphics.Blend problem with image slowly getting darker

in Programming Questions • 1 month ago

I've been playing around with creating a drawing/painting program. So far I've received a lot of good help and have had some luck. I've run into one problem that has me stumped. It might be a limitation of PGraphics or Blend, a bug, or I'm just doing it wrong.

Basically, I am drawing onto a PGraphics (tempCanvas), and based on the value of a boolean (the "B" key) the tempCanvas will copy itself in front of the main PGraphics (canvas) or behind it. This is done when the mouse key is released. This, in effect, allows you to paint on top of the canvas or from behind. All of this works as intended, except when painting "behind", each time the mouse is released all of the color values in the PGraphics get one increment darker. If you click 20 or 30 times you can really start to see the effect on white.

The right mouse button paints black (almost black) and the left mouse button paints white. "B" or "b" toggles the paintBehind boolean. I am seeing the problem in line 87 below. This code is part of a larger program I've been working on and I threw this together to illustrate it. I saw in the refernce material that maybe blendMode() is preferable to blend, but I'm unsure if that is the case here. I'm also wondering if P2D would be better, but I am unhappy with the appearance of that renderer for what I'm doing.

Here is my code:

boolean paintBehind = false;
PGraphics tempCanvas, canvas, backgroundGrid;
int cellWidth, cellHeight, xOffset, yOffset;
color penColor;
void setup() {
size(700, 500);
cellWidth = 600;
cellHeight = 400;
xOffset = 50;
yOffset = 50;
tempCanvas = createGraphics(cellWidth, cellHeight);
tempCanvas.beginDraw();
tempCanvas.smooth();
tempCanvas.endDraw();
canvas = createGraphics(cellWidth, cellHeight);
canvas.beginDraw();
canvas.smooth();
canvas.endDraw();
generateBackgroundGrid();
}
void draw() {
background(#72D68F);
image(backgroundGrid, xOffset, yOffset);
noFill();
stroke(0);
strokeWeight(1);
rect(xOffset, yOffset, cellWidth, cellHeight);
if (paintBehind) {
image(tempCanvas, xOffset, yOffset);
}
image(canvas, xOffset, yOffset);
if (!paintBehind) {
image(tempCanvas, xOffset, yOffset);
}
noStroke();
}
void generateBackgroundGrid() {
backgroundGrid = createGraphics(cellWidth, cellHeight);
backgroundGrid.beginDraw();
backgroundGrid.background(128);
backgroundGrid.noStroke();
backgroundGrid.fill(64);
for (int i = 0; i < cellWidth/20; i++) {
for (int j = 0; j < cellHeight/20; j++) {
if ((i+j)%2==0) {
backgroundGrid.rect(20*i, 20*j, 20, 20);
}
}
}
backgroundGrid.get();
backgroundGrid.endDraw();
}
void mouseDragged() {
if (mouseButton==LEFT) {
penColor = 255;
drawFunction();
}
if (mouseButton==RIGHT) {
penColor = 10;
drawFunction();
}
}
void mousePressed() {
if (mouseButton==LEFT) {
penColor = 255;
drawFunction();
}
if (mouseButton==RIGHT) {
penColor = 10;
drawFunction();
}
}
void mouseReleased() {
paintBehindFunction();
}
void drawFunction() {
tempCanvas.beginDraw();
tempCanvas.smooth();
tempCanvas.stroke(penColor);
tempCanvas.strokeWeight(30);
tempCanvas.line((pmouseX-xOffset), (pmouseY-yOffset), (mouseX-xOffset), (mouseY-yOffset));
tempCanvas.endDraw();
}
void paintBehindFunction() {
if (paintBehind) {
tempCanvas.beginDraw();
tempCanvas.blend(canvas, 0, 0, cellWidth, cellHeight, 0, 0, cellWidth, cellHeight, BLEND);
tempCanvas.endDraw();
canvas.beginDraw();
canvas.copy(tempCanvas, 0, 0, cellWidth, cellHeight, 0, 0, cellWidth, cellHeight);
canvas.endDraw();
}
if (!paintBehind) {
canvas.beginDraw();
canvas.image(tempCanvas, 0, 0);
canvas.endDraw();
}
tempCanvas = createGraphics(cellWidth, cellHeight);
tempCanvas.beginDraw();
tempCanvas.endDraw();
}
void keyPressed() {
switch (key) {
case ('b'):
case ('B'):
if (paintBehind) {
paintBehind = false;
println("###### Paint to front ######");
}
else {
if (!paintBehind) {
paintBehind = true;
println("###### Paint from behind ######");
}
}
break;
default:
}
}

Replies(5)

PhiLho

Re: PGraphics.Blend problem with image slowly getting darker

1 month ago

Well, why do you use blend() if it doesn't give the right result? Isn't painting with a transparent background enough?
(Sorry as I have no time to analyze right now your long code.)

XYZZY

Re: PGraphics.Blend problem with image slowly getting darker

1 month ago

I use blend to achieve the effect of painting from behind on a transparent canvas. Areas already painted remain, but areas transparent will recieve the stroke. I am not looking for anyone to analyze my long code. I am mainly interested in the blend function on line 87, as I stated in my post. It does do what I want, excepting that the colors go darker with each release of the mouse, having a cumulative effect which is entirely unexpected. It is like an effect with the tint function. The code needs to be ran in order to see what I am trying to explain.

PhiLho

Re: PGraphics.Blend problem with image slowly getting darker

1 month ago

You can achieve the same effect by painting the stroke on a transparent PGraphics, then the already painted canvas, no? PGraphics are great because you can do all kinds of layers with them.

I can be wrong, but blend() is basically a mathematical operation merging colors from two sources, so I am not too surprised to see alteration of these colors.

XYZZY

Re: PGraphics.Blend problem with image slowly getting darker

1 month ago

So maybe draw on the tempCanvas, apply the existing canvas image on top of the tempCanvas, then replace the canvas image with the contents of the tempCanvas? I will try replacing the:

tempCanvas.blend(canvas, 0, 0, cellWidth, cellHeight, 0, 0, cellWidth, cellHeight, BLEND);

with this:

tempCanvas.copy(canvas, 0, 0, cellWidth, cellHeight, 0, 0, cellWidth, cellHeight);

or this:

tempCanvas.image(canvas, 0, 0);

I will try that. I believe I did try that and it didn't work the way I wanted, but that was with my full code and had other issues screwing with it.

XYZZY

Re: PGraphics.Blend problem with image slowly getting darker

1 month ago

Okay, duh. I replaced the tempCanvas.blend... with tempCanvas.image(canvas,0,0); and it works just fine. Now I need to go back to my original code and figure out why that particular solution does not work. Thank you.

Top Reply