Re: [css3-images] July F2F minutes comment regarding SVG and non-opaque colors

On 20/08/2011 12:06 PM, Brian Manthos wrote:
> I have no idea what post-multiplied means in the context of colors.  :(


It is really multiplied space of additive color. Color itself is best 
appreciated or understood (along with color space mathematics, not the 
maths that Boris knows) when represented in 3D. The reason that this 
understanding has been missed for so long is that 3D representation of 
color is something that has only been able to be seen in recent times 
(colors being properly aligned showing *equal* temperaments of change). 
It requires the ability to show rgb on an X, Y and Z matrix. CSS3 3D 
transforms has allowed this to be done very easy.

A (post-)multiplied gradient will transverse sRGB color space from one 
color to another color (color points) in a direct path. The pre/post 
aspect of color space is only seen when interpolation also involves a 
change in alpha transparency and there is a contrasting background-color.

A gradient interpolated in multiplied space will change in color as well 
as change in opacity.

A gradient interpolated in pre-multiplied space will change only in 
opacity. The color never changes since there no traversal of sRGB color 
space.

To understand what is multiplying, contemplate the below example.

2‑tuple (pair) expansion:

0:0  1:0  2:0

0:1  1:1  2:1

0:2  1:2  2:2


The square formed by 0:0 to 1:1 has 4 points. The square formed by 0:0 
to 2:2 has 9 points. Now if this was done on a X, Y, Z matrix, a cubed 
formed by 0:0:0 to 1:1:1 has 8 points and cube formed by 0:0:0 to 2:2:2 
has 27 points. Tab has mentioned these color tuples which is a 
three-fold expansion of sRGB color space.


If we step through each tuple by equal steps of roughly 64, we have this 
expansion of color.

0:0:0 to 63:63:63 = 262,144 color points (64 cubed)
0:0:0 to 127:127:127 = 2,097,152 color points (127 cubed)
0:0:0 to 191:191:191 = 7,077,888 color points (192 cubed)
0:0:0 to 255:255:255 = 16,777,216 color points (256 cubed)


So each half step back from white (to smaller cubes) is divided by eight 
with each step.

0:0:0 to 255:255:255 = 16,777,216 color points (256 cubed)
0:0:0 to 127:127:127 = 2,097,152 color points (127 cubed)
0:0:0 to 63:63:63 = 262,144 color points (64 cubed)
0:0:0 to 31:31:31 = 32,768 color points (32 cubed)
0:0:0 to 15:15:15 = 4,096 color points (16 cubed)
0:0:0 to 7:7:7 = 512 color points (8 cubed)
0:0:0 to 3:3:3 = 64 color points (4 cubed)
0:0:0 to 1:1:1 = 8 color points (2 cubed)


Take this gradient and background color.

<!doctype html>

<style type="text/css">

body {
   background: black -webkit-linear-gradient(left, white, rgba(0,0,0,0));
   background: black -moz-linear-gradient(left, white, rgba(0,0,0,0));
   background: black -ms-linear-gradient(left, white, rgba(0,0,0,0));
   background: black -o-linear-gradient(left, white, rgba(0,0,0,0));
}

</style>


This is what is rendered as a final composite color.


          non-premultiplied           composite on black

100%     rgba(255,255,255,1.0)    =  rgb(255,255,255)
50%      rgba(127,127,127,0.5)    =  rgb(64,64,64)
75%      rgba(64,64,64,0.25)      =  rgb(16,16,16)
87.5%    rgba(32,32,32,0.125)     =  rgb(4,4,4)
93.75%   rgba(16,16,16,0.0625)    =  rgb(1,1,1)


To the eye, the final composite color will look like an even curve.

        +       +
   +                 +
+                     +


This is because we are perceiving even temperaments of change (like in 
music ~ 12th of the root). Below are the values produced when gradients 
are premultiplied,


          premultiplied               composite on black

100%     rgba(255,255,255,1.0)    =  rgb(255,255,255)
50%      rgba(255,255,255,0.5)    =  rgb(127,127,127)
75%      rgba(255,255,255,0.25)   =  rgb(64,64,64)
87.5%    rgba(255,255,255,0.125)  =  rgb(32,32,32)
93.75%   rgba(255,255,255,0.0625) =  rgb(16,16,16)


which produces equal temperaments of change and to the eye, the final 
composite color will look like an uneven curve.

               +
+                   +
                      +


This is seen in the below gradient composite on a black background which 
appears identical to a solid gradient from white to black.


<!doctype html>

<style type="text/css">

body {
   background: black -webkit-linear-gradient(left, white, 
rgba(255,255,255,0));
   background: black -moz-linear-gradient(left, white, rgba(255,255,255,0));
   background: black -ms-linear-gradient(left, white, rgba(255,255,255,0));
   background: black -o-linear-gradient(left, white, rgba(255,255,255,0));
}

</style>



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Monday, 22 August 2011 16:15:21 UTC