We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Page Index Toggle Pages: 1
BLEND mode (Read 1205 times)
BLEND mode
Dec 13th, 2006, 4:56pm
 
Sorry if my question overlaps with BUG 132 (Finish Blending modes)-it wasn't clear to me.

BLEND mode seems to work differently than the other blending modes (ADD, SUBTRACT, DARKEST and LIGHTEST). This issue seems to be consistent across blend(), PImage.blend() and blendColor()].

Based on my very unscientific testing, I needed (at least) to have the alpha value of the 2nd (color/image)arg below 255 to see any changes using BLEND mode. The other modes work fine when the alpha for both colors/images is kept at 255. Here are 2 examples illustrating this.

alpha at 255
Code:

size(300, 500);
noStroke();
int [] modes = {
BLEND, ADD, SUBTRACT, DARKEST, LIGHTEST};
color c1 = color(200, 200, 0);
color c2 = color(200, 0, 200);
for (int i=0; i<5; i++){
for (int j=0; j<3; j++){
switch(j){
case 0:
fill(c1);
break;
case 1:
fill(blendColor(c1, c2, modes[i]));
break;
case 2:
fill(c2);
}
rect(100*j, 100*i, 100, 100);
}
}


Same code with alpha of 2nd arg set below 255
Code:

size(300, 500);
noStroke();
int [] modes = {
BLEND, ADD, SUBTRACT, DARKEST, LIGHTEST};
color c1 = color(200, 200, 0);
color c2 = color(200, 0, 200, 150);
for (int i=0; i<5; i++){
for (int j=0; j<3; j++){
switch(j){
case 0:
fill(c1);
break;
case 1:
fill(blendColor(c1, c2, modes[i]));
break;
case 2:
fill(c2);
}
rect(100*j, 100*i, 100, 100);
}
}

Re: BLEND mode
Reply #1 - Dec 13th, 2006, 5:23pm
 
Yep.  The alpha from the second color is the "control" for all of the blend operations.  (though perhaps the effect is less obvious for operations other than BLEND)

Your first example is working correctly.  You're asking it to blend "from" yellow "to" magenta at an alpha of 255.  That means 100% of the difference (c2-c1) will be added to c1.  So the math becomes:  c1+(c2-c1) = c2, so you're left with magenta.

If you were wanting a 50% blend then set c2's alpha to 128.  You could also investigate lerpColor().
Re: BLEND mode
Reply #2 - Dec 13th, 2006, 11:17pm
 
I guess what I'm not getting is why isn't BLEND mode just a simple averaging of color components (including alpha)–something like this:

Code:

size(300, 100);
noStroke();
color c1 = color(200, 200, 0);
color c2 = color(200, 0, 200);

// average components w ugly bitwise ops
int a = ((c1 >> 24 & 0xFF) + (c2 >> 24 & 0xFF)) >> 1;
int r = ((c1 >> 16 & 0xFF) + (c2 >> 16 & 0xFF)) >> 1;
int g = ((c1 >> 8 & 0xFF) + (c2 >> 8 & 0xFF)) >> 1;
int b = ((c1 & 0xFF) + (c2 & 0xFF)) >> 1;
color cBlend = (a << 24) | (r << 16) | (g << 8) | b;

fill(c1);
rect(0, 0, 100, 100);
fill(cBlend);
rect(100, 0, 100, 100);
fill(c2);
rect(200, 0, 100, 100);



I suspect many people (especially beginners) would initially think of blending as averaging.
Re: BLEND mode
Reply #3 - Dec 14th, 2006, 1:08am
 
I understand the confusion, and should probably let Fry answer "why" questions, but here's my unofficial $.02:

Internally, that same blend function is called per pixel when you blend an entire image over another entire image.  In that usage, using the alpha channel of the second image (the "overlaying" image) makes complete sense, right?  (allows you to blend with partial and varying transparency based on the alphas in the overlay image)

It's only when you think about it as a "color function", instead of an "image function" that the parameters (might) seem odd.

That's why I suggested lerpColor(), as it's clearly a color function and the parameters might make more sense when you're thinking in terms of color functions.

(PS, I'll leave it as a teaser exercise, but there are much simpler bit ops for doing a 50% mix of argb, if you choose to go that way.  Wink )
Re: BLEND mode
Reply #4 - Dec 14th, 2006, 3:16pm
 
for the exact specifics, hopefully toxi will chime in, who wrote those blending modes. my understanding was that this is the "standard" math as per the porter-duff rules. but yes, the alpha of the second image is the control, which as davbol points out, makes sense for images, not so much for individual pixels.

lerpColor() is what you'd want to just mix colors.

i think one confusion might be that BLEND is actually MULTIPLY, and should maybe be named that instead. that part is perhaps more along the lines of bug #132, in which i'd prefer the naming to be consistent with what illustrator, photoshop, and flash use since those are what people will be familiar with.

the general thing of bug #132 is just straightening all these things out.. i haven't had a chance to look into how these map to more standard software, and/or other blending modes that we're missing. **if anyone wants to pitch in on this, it would be most appreciated**

this has been really helpful to have you working on your book, ira (i assume you're still doing so) so that we can get these inconsistencies ironed out. keep posting!
Re: BLEND mode
Reply #5 - Dec 14th, 2006, 6:21pm
 
BLEND (the constant) is currently equivalent to the porter-duff "src over dst" operation, but not currently equivalent to the photoshop multiply (which is a per-channel multiply, not the p-d alpha multiply).

Would it help to round up the modes and codes used by GIMP, where sample implementation is available?  Is GIMP "authoritative" enough?  I don't use GIMP, but could check out their source and compile a list of formulae - anyone who uses GIMP know how well their blend modes match PS functionally?
Re: BLEND mode
Reply #6 - Dec 15th, 2006, 4:57pm
 
edit - yes, starting with the gimp code might be useful for things that aren't covered.

here's the bug report/feature request:
http://dev.processing.org/bugs/show_bug.cgi?id=132
i've added more information there, let's follow up from that, so it can be tracked properly.
Re: BLEND mode
Reply #7 - Dec 16th, 2006, 5:26am
 
I scanned through their source, and didn't find much beyond the obvious stuff.  As far as I can tell, Gimp doesn't have the "hard" ones either.  So, cross your fingers here goes, you're welcome to try to borrow from mine:

http://www.davebollinger.com/works/compositor/

I make no claim that it's complete or the formulas are "correct" according to Adobe, and it *IS* a work in progress, but it does do some things that p5 doesn't currently do, and I'll try to keep it updated as I work on it and fix the other things.
Page Index Toggle Pages: 1