W3C home > Mailing lists > Public > public-fxtf-archive@w3.org > April 2019

Re: [fxtf-drafts] [filter-effects-2] Add a shorthand color-channel adjustment function similar to feComponentTransfer (#256)

From: Kari Pihkala via GitHub <sysbot+gh@w3.org>
Date: Thu, 18 Apr 2019 15:32:37 +0000
To: public-fxtf-archive@w3.org
Message-ID: <issue_comment.created-484563237-1555601556-sysbot+gh@w3.org>
I like the idea of adjusting color channels using shorthand filters. Here's my proposal how the syntax could look like.

I would call the function `levels()` because it is similar to levels adjustments in photo editors (for instance, [Gimp](https://docs.gimp.org/2.10/en/gimp-tool-levels.html), [Photoshop](https://helpx.adobe.com/photoshop/using/levels-adjustment.html), [Apple Motion](https://support.apple.com/kb/PH16346?locale=en_US)). 

In photo editors, levels adjustments have an input range with gamma and an output range. This is similar, but the range wouldn't be restricted to [0, 1] like in photo editors. It has an input range, optional gamma and optional output range:

    levels(<transfer-func>#)

    <transfer-func> = <comp> <in-min> <in-max> <gamma>? <out-min>? <out-max>?

    <comp> = red | blue | green | alpha | rgb

    <in-min> = <number> | <percentage>, default value 0

    <in-max> = <number> | <percentage>, default value 1

    <gamma> = <number>, default value 1 (no effect)

    <out-min> = <number> | <percentage>, default value 0

    <out-max> = <number> | <percentage>, default value 1

The function maps the input range [in-min, in-max] to the given output range [out-min, out-max]. If the same component is given many times, then the last one is used (just like feFuncR/G/B elements under feComponentTransfer).

Here's why I like my proposal :)

 * The levels feature is familiar to designers who have used level adjustments in photo editors.
 * It is easy to convert levels adjustments made in design tools (Photoshop etc.) to CSS.
 * Typical use cases don't require authors to think about math (additions, multiplications).
 * It is possible to define interpolation/animation between two `levels` functions. The functions are interpolatable if their channels match. Their values are then interpolated one by one.
 * Implementation is simple: it is straightforward to parse and map to feComponentTransfer.

Here are the use cases written using `levels()`. They can use numbers or percentages. It is possible to describe the use cases by giving the input and output range, but it is shorter to just give the input range. Both are given as examples.

    /* increase drop-shadow opacity while maintaining spread from the blur
       (assuming original element had strict 0 or 1 opacity) */
    filter: drop-shadow(navy 5px 5px 3px) levels(alpha 0 1 1 0 1.5);
    filter: drop-shadow(navy 5px 5px 3px) levels(alpha 0% 100% 1 0% 150%);
    filter: drop-shadow(navy 5px 5px 3px) levels(alpha 0% 66%); /* input only version */

    /* the gooey effect
       (merges nearby shapes and colors & rounds corners, while recreating sharp edges) */
    filter: blur(10px) levels(alpha 0 1 1 -0.5 2);
    filter: blur(10px) levels(alpha 0% 100% 1 -50% 200%);
    filter: blur(10px) levels(alpha 50% 75%); /* input only version */

    /* asymmetrical contrast adjustment,
       clamping almost-black to black without losing detail in almost-white areas */
    filter: levels(alpha 0 1 1 -0.02 1);
    filter: levels(alpha 0% 100% 1 -2% 100%);
    filter: levels(alpha 2% 100%); /* input only version */

    /* white-balance adjustment, to create warmer hues */
    filter: levels(red 0 1 1 0 1.1, blue 0 1 1 0 0.95);
    filter: levels(red 0% 100% 1 0% 110%, blue 0% 100% 1 0% 95%);
    filter: levels(red 0% 90%, blue 0% 105%); /* input only version */

    /* additional use cases */

    /* make everything brighter */
    filter: levels(rgb 0% 100% 1 25% 100%);
    filter: levels(rgb -25% 100%); /* input only version */

    /* inverted alpha */
    filter: levels(alpha 100% 0%);

    /* make midtones brighter by increasing gamma. */
    filter: levels(rgb 0% 100% 1.5);


-- 
GitHub Notification of comment by karip
Please view or discuss this issue at https://github.com/w3c/fxtf-drafts/issues/256#issuecomment-484563237 using your GitHub account
Received on Thursday, 18 April 2019 15:32:39 UTC

This archive was generated by hypermail 2.3.1 : Thursday, 18 April 2019 15:32:39 UTC