Re: [css3-background] box-shadow spread rounding (was: [css3] box-shadow specification bug)

On Fri, Nov 15, 2013 at 10:18 AM, Lea Verou <lea@verou.me> wrote:
> Sooo, after some discussion at TPAC after the recent F2F, some of us
> (fantasai, dbaron, plinss, me) decided that even though the edge cases about
> precision aren't that big of a problem, the currently defined behaviour
> results in abruptness when border-radius interpolates from 0 to any positive
> value. Therefore, we think the spread rounding should be changed to be
> defined as:
>
> spread rounding = border-radius + spread * ratio(x)
>
> where x = border-radius / spread and ratio() is a continuous strictly
> increasing function that is 0 when border-radius is 0 and becomes 1 after a
> certain point. Therefore, it would still be 0 at 0 and mostly the same for
> small differences between the border-radius and the spread size, but would
> progressively increase when the border-radius is considerably smaller than
> the spread size.
>
> We tried many functions for what ratio() could be [1], and I made a demo of
> the three best ones that you can find here [2]. We think Cubic works best,
> which is 1 + (x-1)^3 in [0,1] and 1 when x > 1. Not only this makes
> interpolation smoother, but it also is more aesthetically pleasing, which
> reduces the need for manual ”filleting” (as demonstrated in [3]).
>
> We’d appreciate some feedback about the ratio() function. Perhaps someone
> can think of a better one? My demo supports entering a custom one (in JS
> syntax) so you can experiment there.
> The requirements are:
> - It needs to go through (0,0) and (1,1)
> - Its derivative at (1,1) should be 0
> - It needs to be fast to compute and easy for humans to understand
>
> [1]:
> http://fooplot.com/#W3sidHlwZSI6MCwiZXEiOiIyKmF0YW4oeCkvcGkiLCJjb2xvciI6IiMwMDk5RkYifSx7InR5cGUiOjAsImVxIjoiMS0xLyg4eCsxKSIsImNvbG9yIjoiI0ZGMDA2RiJ9LHsidHlwZSI6MCwiZXEiOiJzcXJ0KDEtKHgtMSleMikiLCJjb2xvciI6IiMyNkQ0NEYifSx7InR5cGUiOjAsImVxIjoiMSsoeC0xKV4zIiwiY29sb3IiOiIjOUU5OTBDIn0seyJ0eXBlIjowLCJlcSI6Iih4PDEpKngrKHg.PTEpKjEiLCJjb2xvciI6IiMwMDAwMDAifSx7InR5cGUiOjAsImVxIjoiKHg8MSkqKDEtKHgtMSleMikrKHg.PTEpKjEiLCJjb2xvciI6IiNGMjhBOEEifSx7InR5cGUiOjEwMDAsIndpbmRvdyI6WyIwIiwiMS41IiwiMCIsIjEuNSJdfV0-
> [2]: http://dev.w3.org/csswg/css-backgrounds/spread-radius
> [3]: http://radesign.in/in-search-of-the-perfect-radius/

Cool!  I was thinking of coding up this same thing, so I'm glad you did it!

Hyperbolic seems to violate the requirements - it only approaches
(1,1) asymptotically.  (And for the Box.constant value you're using on
the page, it doesn't even really get close - it ends at (1, .8).
Using a constant of 4 seems to do better - it at least hits .91.)

Of the presented choices, I like both Arc and Cubic equally.  I'll
defer to your judgement and agree with Cubic, then.

~TJ