Re: [csswg-drafts] [css-color-5] When mixing hue, there are two ways round the hue range (#4735)

From: Lea Verou via GitHub <sysbot+gh@w3.org>
Date: Fri, 29 May 2020 03:49:42 +0000

Message-ID: <issue_comment.created-635741840-1590724181-sysbot+gh@w3.org>
```> I realized that those are stupid names that people will get mixed up so I went with increasing and decreasing instead.

Indeed!

> The hue adjuster takes optional keywords, because there are two ways around the hue circle. If no keyword is specified, it is as if ''shorter'' were specified. ''increasing'' is the direction of increasing hue angle; ''decreasing'' is the direction of decreasing hue angle. If the hue difference is exactly 180 degrees,
it is as if ''decreasing'' were specified.

The recent edits are a good start, but there are still a bunch of things we need to define in regards to *how* these algorithms work.

If interpolating between e.g. -360 and 720, which of those keywords give us 3 rainbows? It's obvious that `shorter` doesn't, but what about all the others? Does `longer` give you one or three rainbows? Does `longer` just mean "the long arc around the hue wheel` or "unclipped angles as specified"`". And if the former (which seems more reasonable), do we need another keyword that just does dumb numerical interpolation between the coordinates as specified? I can't really think of use cases, but that doesn't mean there aren't any.

I wonder if these are correct (and optimal) for the pre-interpolation fixup. If so, I can put them in the spec.

```js
// angle1, angle2 are hue angles in degrees
angle1 = ((angle1 % 360) + 360) % 360; // constrain to [0, 360)
angle2 = ((angle1 % 360) + 360) % 360; // constrain to [0, 360)

// Increasing:
if (angle2 < angle1) {
angle2 += 360;
}

// Decreasing:
if (angle1 < angle2) {
angle1 += 360;
}

// Longer:
if (angle2 - angle1 < 180) {
angle2 += 360;
}
else if (angle2 - angle1 > -180) {
angle1 += 360;
}

// Shorter:
if (angle2 - angle1 > 180) {
angle1 += 360;
}
else if (angle2 - angle1 < -180) {
angle2 += 360;
}
```

--
GitHub Notification of comment by LeaVerou
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4735#issuecomment-635741840 using your GitHub account
```
Received on Friday, 29 May 2020 03:49:45 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:07 UTC