Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

Geek Culture / alpha blending equation?

Author
Message
Phaelax
DBPro Master
22
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 23rd Sep 2013 06:34
If I have a solid base color and I draw on top of it with another color with 50% opacity, then the resulting color is a simple matter of using linear interpolation between the base and layered colors using the opacity value (0.5).

new = base + (layer-base)*0.5


But what if the base layer isn't solid? Say its blue with only 30% opacity and the top layer is red with 70%. I'm not sure how to properly blend the two together with preserving the background properly.


Normally, I'd do a bunch of google searching before asking here, but for the moment my phone is my only source of internet and the ATT tower in the area hasn't been that stable.

Inflictive
15
Years of Service
User Offline
Joined: 16th Jun 2009
Location: Altis
Posted: 23rd Sep 2013 06:47 Edited at: 24th Sep 2013 02:28
The first equation should be:

new = (base * (1 - 0.5) ) + (layer-base * 0.5)

And for what you're asking I think it would be like:

new_alpha = (0.3*0.7) + 0.7


Also, get used to using ratios instead of percents (0.5 not 50%). Percentages are an irritating, arbitrary relic of the past (cue discussion)

bitJericho
22
Years of Service
User Offline
Joined: 9th Oct 2002
Location: United States
Posted: 23rd Sep 2013 06:53
0.5 (or any decimal number) is hardly useful in understanding if it's a ratio.

You could use 2:1 ratios, but that's not very simple to throw in an equation.

As for your calculation, I would consider if perhaps there's a recursive formula you could use.

Phaelax
DBPro Master
22
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 23rd Sep 2013 07:05 Edited at: 23rd Sep 2013 07:12
I used percents merely for the example.

You sure about the alpha value? Assuming both layers were 0.7 instead, the result would be over 1. And I wouldn't want to cap it to 1 if it goes above because it shouldn't go above it to begin with. There would still be some transparency.


Ok, here's some quick background. I'm working with DB memblocks, so the transparency would be 0-255, or 127 in the case of 0.5

Phaelax
DBPro Master
22
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 23rd Sep 2013 07:17 Edited at: 23rd Sep 2013 08:22
I made an example image in photoshop. One layer is blue with 70% opacity. Above that, is a red layer also with 70% opacity. I loaded the image into DB and extracted the alpha value for the pixel, which was 232 or 0.9

Following Inflictive's equation, the result would've been 1.19 instead of 0.9

layer1 = ARGB(179,0,0,255)
layer2 = ARGB(179,255,0,0)
result = ARGB(232,197,0,58)

Maybe alpha blending wasn't the right thing I wanted, but alpha compositing. Following those equations, I got the following results (where layer 2 is above layer 1):
ARGB(232.05, 178.5, 0, 53.5)

It's close, but not sure why the numbers are slightly off on the color channels. Either I'm missing a step or Photoshop does something slightly different (which is entirely possible).

Where 0.7 = 179/255
red = 255*0.7 + 0*0.7*(1-0.7) = 178.5
blue = 0*0.7 + 255*0.7(1-0.7) = 53.55
alpha = 0.7 + 0.7*(1-0.7) = 0.91 (or 255*0.91 = 232)


Well I've got the code implemented into my program and as far as I can tell, it's blending the two transparency layers properly. So I guess problem solved, but thanks for trying to help out.

Inflictive
15
Years of Service
User Offline
Joined: 16th Jun 2009
Location: Altis
Posted: 24th Sep 2013 02:25 Edited at: 24th Sep 2013 02:28
Shoot, my bad. It should have been,

resultalpha = bottomalpha + ( topalpha * ( 1.0 - bottomalpha ) )

Login to post a reply

Server time is: 2025-05-13 01:02:25
Your offset time is: 2025-05-13 01:02:25