[fxtf-drafts] [filter-effects] A proposal of the definition of the distance between two filter function lists

BorisChiou has just created a new issue for 
https://github.com/w3c/fxtf-drafts:

== [filter-effects] A proposal of the definition of the distance 
between two filter function lists ==
https://w3c.github.io/web-animations/#paced-keyframe-spacing-mode

https://drafts.fxtf.org/filters/#interpolation-of-filters

In web-animations (@birtles), we need to calculate the distance 
between two filter function lists for paced spacing. Unfortunately, we
 don't have a definition of the distance between two filter function 
lists in [filter-effects], so I propose a way to calculate (which is 
very similar to the interpolation):

### Compute Distance of \<filter-function-list\>s
1. If both filters have a \<filter-function-list\> of same length 
without \<url\> and for each \<filter-function\> for which there is a 
corresponding item in each list,
   - Compute the square distance of each \<filter-function\> pair 
following the rules in section **Square Distance of 
\<filter-function\>s**, and get the square root of the summation.
2. If both filters have a \<filter-function-list\> of different length
 without \<url\> and for each \<filter-function\> for which there is a
 corresponding item in each list,
   - Append the missing equivalent \<filter-function\>s from the 
longer list to the end of the shorter list.
    The new added \<filter-function\>s must be initialized to their 
default values.
   - Compute the square distance of each \<filter-function\> pair 
following the rules in section **Square Distance of 
\<filter-function\>s**, and get the square root of the summation.
3. If one filter is none and the other is a \<filter-function-list\> 
without \<url\>
   - Replace none with the corresponding <filter-function-list> of the
 other filter.
    The new \<filter-function\>s must be initialized to their default 
values.
   - Compute the square distance of each \<filter-function\> pair 
following the rules in section **Square Distance of 
\<filter-function\>s**, and get the square root of their summation. 
4. Otherwise
   - Cannot compute the distance, so return 0.0.

### Square Distance of \<filter-function\>s
- \<blur()\>
  - Get the absolute difference and then square it.
- \<brightness()\>
- \<contrast()\>
- \<grayscale()\>
- \<invert()\>
- \<opacity()\>
- \<saturate()\>
- \<sepia()\>
  - Convert percentage values to numbers with 0% being relative to 0 
and 100% relative to 1. Get the absolute difference and then square it
- \<hue-rotate()\>
  - Get the absolute difference (unit: Radian), and the square it.
- \<drop-shadow()\>
  - Compute the distance as \<shadow list\>s. (Note: we only support 
one shadow item).
    - Compute the square distances of \<x-offset\>, \<y-offset\>, and 
\<blur radius\>.
    - Compute the square distance of \<color\>
    - Sum the above square distances.

### Example
`from { filter: 'grayscale(50%) opacity(100%) blur(5px) 
drop-shadow(10px 10px 1px blue)' }`
`to     { filter: 'grayscale(75%) opacity(50%)' }`
- The square distance of grayscale: `(0.75 - 0.5)^2`
- The square distance of opacity: `(1 - 0.5)^2`
- The square distance of blur: `(5 - 0)^2`
- The square distance of drop-shadow: `10^2 + 10^2 + 1^2 + (1^2 + 
1^2)`
_Note: blue is (0, 0, 100%, 100%), transparent is (0%, 0%, 0%, 0%)_
- The distance is `sqrt(the summation of the above square distances)`

Please view or discuss this issue at 
https://github.com/w3c/fxtf-drafts/issues/91 using your GitHub account

Received on Thursday, 17 November 2016 06:57:19 UTC