hue: "longer" interpolates in reverse order when colors have hues that differ by multiples of 360

[LeaVerou]

Testcase:

let color1 = new Color("lch", [50, 50, 0]);
let color2 = new Color("lch", [50, 50, 360]);
let steps = Color.steps(color1, color2, {space: "lch", steps: 10, hue: "longer"});
console.log(steps.map(c => c.coords[2]));

Outputs:

[360, 320, 280, 240, 200, 160, 120, 80.00000000000006, 40, 0]

It should instead output:

[0, 40, 80.00000000000006, 120, 160, 200, 240, 280, 320, 360]

[LeaVerou]

I made a page with tests so we can iterate on the algorithm, then hopefully backport it to Color 4: https://colorjs.io/tests/angles.html

[svgeesus]

Nice tests.

I think it helps, for this -20 380 case, to consider the least surprise if we are actually animating from, say, -18 to -22. We want a consistent interpolation direction, not a discontinuity or reversal as we pass through "angular difference mod 360 is zero".

I also think (by analogy with the "zero length vector has no direction" problem in geometry) that the algorithm should extract a direction before all the angle fix-up happens