TinyColor
TinyColor copied to clipboard
Can't call spin with hue rotation of less than 0.5
I just ran into an issue when I was trying to spin several colors at different rates (0.8, 0.4, and 0.1). The first one worked, but the other two did not. After much debugging, I found that the incoming hue is being rounded down inside the spin function.
It looks like this was not the case when spin was first implemented in #18. Can someone explain why the rounding is necessary? If it can be removed, I'll happily submit a PR.
FWIW, even after removing the rounding, spin has no effect when the hue rotation is 0.1 or less. I presume that the precision is lost in the rgb->hsl transformation, but I haven't dug into it yet.
Can you please provide the exact case that it's failing on? I tried:
tinycolor("hsl(.1, 50%, 45%)").toHex(); // ac3a39
tinycolor("hsl(.1, 50%, 45%)").spin(100).toHex(); // 60ac39
I think I misstated the problem. When the hue rotation (not the initial hue) is less than 0.5, will be rounded out (due to a call to mathRound). This makes it impossible to continuously spin a hue by less than 0.5.
Example (fiddle):
var color = tinycolor("rgb 255 0 0");
var iterations = 10;
while (iterations--) {
console.log(color.toHex());
color = color.spin(0.4);
}
Result:
ff0000
ff0200
ff0200
ff0200
ff0200
ff0200
ff0200
ff0200
ff0200
ff0200
As you can see, the first spin works, because the hue goes from 0 to 0.4. The next iteration, the hue becomes mathRound(0.4) + 0.4, which is 0.4. That pattern repeats for the rest of the loop.
Here is my fix. I haven't submitted a PR only because I'm not happy with the test for my change, and wanted to get your feedback first. :)