[css-borders-4] Interpolation of corner-shape superellipsis

[noamr]

Follow up on #10993

We are defining corner-shape as different variations on superellipse(exponent), which allows us to animate the exponent.
However, animating the exponent linearly would result in varying velocity - high velocity when concave, and low velocity when convex.
The visual result would be, for example, that a linear animation between notch and straight would start very fast and would seem like it's slowing down towards straight.

Proposing to use the following formula (also used in the draft) to balance this: intersect the superellipse with the given k, with a diagonal straight line that slices the corner. This would make it so that a "linear" animation would be linear from the point of view of the center of the curve.

The formula looks like this (k is the exponent):

// superellipse formula
y=(1 - x^k))^(1 / k)

// straight diagonal line formula
y=x

// combining them together
x=(1 - x^k))^(1 / k)

// solving for k
1 / (2^(1 / k))

This formula conveniently maps a k between 0 and infinity to a number between 0 and 1, and we can decide that 0 always maps for 0 and infinity also maps to 1.

[smfr]

Visualization using the above (with some tweaks):
https://noamr.github.io/squircle-testbed/corner-visualizer/corner-animation.html

[css-meeting-bot]

The CSS Working Group just discussed [css-borders-4] Interpolation of `corner-shape` superellipsis, and agreed to the following:

• RESOLVED: interpolate linearly across the corner diagonal and compute the parameter backwards from that

The full IRC log of that discussion

<TabAtkins> noamr: this shoudln't be contentious
<TabAtkins> noamr: let me show how it interpolates
<TabAtkins> noamr: the interpolation takes the "half corner", th emiddle point, put it on the diagonal line and interpolate *that*. work backwards to get the superellipse parameter
<TabAtkins> noamr: otherwise any interpolation in the paramter space itself would spend too much time in the extreme values
<fantasai> TabAtkins: This does sound like the most reasonable interpolation method
<TabAtkins> astearns: any indication from Simon?
<TabAtkins> noamr: he did this visualization.
<TabAtkins> noamr: everything i'm presenting here I worked together with Simon
<TabAtkins> ack
<astearns> ack TabAtkins
<TabAtkins> fantasai: TAb, you mentioned the "effectively square" is 10 or so on both sides
<TabAtkins> fantasai: above 10
<TabAtkins> fantasai: it basically doesn't do much?
<TabAtkins> noamr: it's basically equivlanent unless your screen is enormous
<TabAtkins> fantasai: should we declare that 10 gets rounded to a sharp corner?
<TabAtkins> fantasai: so the CSS range is effectively -10 to 10?
<TabAtkins> astearns: if your shape is very large you might get a jump
<TabAtkins> noamr: shouldn't have it as part of interpolation
<TabAtkins> noamr: the animation would appear to be faster in the middle if we did that
<TabAtkins> noamr: in the current chrome prototype we *do* clamp to 10/-10, it makes the math easier
<TabAtkins> noamr: but not sure it's useful in the specs
<TabAtkins> fantasai: the reason it might be useful is, it's harder for the authro to know that to get an actually sharp corner they need to use a much bigger value
<fantasai> TabAtkins: The interpolation behavior defined here is that we don't interpolate the parameter, we interpolate the diagonal line.
<fantasai> TabAtkins: so you get a linear interpolation through the diagonal space
<fantasai> TabAtkins: so you get a visually smooth value instead of changing speed
<fantasai> fantasai: Would it make sense to make that the parameter?
<fantasai> TabAtkins: No, because then squircles and other common values would be weird numbers.
<TabAtkins> noamr: yeah, round is sqrt(2)/2
<TabAtkins> astearns: any other comments/question?
<TabAtkins> astearns: so proposed is we interpolate linearly across the corner diagonal and compute the parameter backwards from that
<TabAtkins> astearns: objection?
<TabAtkins> RESOLVED: interpolate linearly across the corner diagonal and compute the parameter backwards from that