Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to mix two ARGB pixels?

How can I mix two ARGB pixels ?

Example

Source: en.wikipedia.org/wiki/Alpha_compositing#mediaviewer/File:Alpha_compositing.svg

Here A is (Red with Alpha) and B is ( Blue with Alpha ).

like image 713
SunnyShah Avatar asked Dec 22 '09 04:12

SunnyShah


People also ask

How do you blend two pixels?

The RGB values of the pixels to be blended are added together using a percentage of the color of each pixel. If even blending is desired then 50% of each RGB value of the source pixels is added to 50% of each RGB value of the target pixels to make the color of the blended pixel.

How do you blend RGB?

To start mixing in RGB, think of each channel as a bucket of red, green, or blue paint. With 8 bits per channel, you have 256 levels of granularity for how much of that color you want to mix in; 255 is the whole bucket, 192 = three quarters, 128 = half bucket, 64 = quarter bucket, and so on.

What is alpha blending in computer graphics?

In computer graphics, alpha compositing or alpha blending is the process of combining one image with a background to create the appearance of partial or full transparency.


2 Answers

Taken from the same Wikipedia article where you got the image:

C_o = C_a \alpha_a + C_b \alpha_b \left(1 - \alpha_a\right)

Translating to values which range from 0 to 255:

rOut = (rA * aA / 255) + (rB * aB * (255 - aA) / (255*255))
gOut = (gA * aA / 255) + (gB * aB * (255 - aA) / (255*255))
bOut = (bA * aA / 255) + (bB * aB * (255 - aA) / (255*255))
aOut = aA + (aB * (255 - aA) / 255)
like image 156
Mark Ransom Avatar answered Sep 16 '22 16:09

Mark Ransom


The above is the wrong algorithm. This can be verified by substituting aA = 0. Then it turns out that if you are trying to blend color B with completely transparent color A, i.e. invisible, then logically the color B remains unchanged, but according to this formula it will be changed. The result of incorrect blending with gradient transparency. Therefore, the correct solution would be like this:

aOut = aA + (aB * (255 - aA) / 255)
rOut = (rA * aA + rB * aB * (255 - aA) / 255)/aOut 
gOut = (gA * aA + gB * aB * (255 - aA) / 255)/aOut 
bOut = (bA * aA + bB * aB * (255 - aA) / 255)/aOut 

The result of correct blending with gradient transparency.

like image 32
Nikolai Semko Avatar answered Sep 20 '22 16:09

Nikolai Semko