RobS
July 17, 2018, 6:00am
1
Blending colors with a PGraphcs object gives odd, undesirable colors:
In this example I’m blending the same shades of red of and blue, and getting two completely different results… Here’s my code:
PGraphics merged;
void setup() {
size(400, 200);
merged = createGraphics(200, 200);
merged.beginDraw();
merged.fill(0, 0, 255, 100);
merged.rect(0, 0, 200, 200);
merged.fill(255, 0, 0, 100);
merged.rect(0, 0, 200, 200);
merged.endDraw();
}
void draw() {
background(100);
// Merged on the canvas
fill(0, 0, 255, 100);
rect(0, 0, 200, 200);
fill(255, 0, 0, 100);
rect(0, 0, 200, 200);
// Merged in a PGraphics object
image(merged, 200, 0);
fill(255);
text("Blending on canvas", 20, 20);
text("Blending in PGraphics object", 220, 20);
}
Shouldn’t these two colors be the same? How can I get the PGraphics object to blend colors properly? Thanks.
merged.background(100); // ?
RobS
July 17, 2018, 6:31am
3
Thanks for your reply, that would fix this simple example, but for what I want to do I can’t just throw out the alpha channel of my PGraphics object. Here’s a better example:
Consider this drawing program, where I use a preview PGraphics object to draw to, and then bake it into another one once the mouse is released. The same issue will be present, and I can’t think of how to fix it in this circumstance.
PGraphics image, preview;
void setup() {
size(400, 400);
image = createGraphics(400, 400);
preview = createGraphics(400, 400);
}
void draw() {
background(0);
// Draw the PGraphics
image(image, 0, 0);
image(preview, 0, 0);
if(mousePressed) {
preview.beginDraw();
preview.strokeWeight(20);
preview.stroke(255, 0, 0, 128);
preview.blendMode(REPLACE);
preview.line(pmouseX, pmouseY, mouseX, mouseY);
preview.endDraw();
preview.blendMode(BLEND);
}
}
void mouseReleased() {
// Bake the preview & reset
image.beginDraw();
image.image(preview, 0, 0);
image.endDraw();
preview = createGraphics(400, 400);
}
I want to retain the alpha in both the preview and image object, while still displaying them properly.