TinyColor icon indicating copy to clipboard operation
TinyColor copied to clipboard

Can't call spin with hue rotation of less than 0.5

Open mwcz opened this issue 10 years ago • 3 comments

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.

mwcz avatar Aug 07 '15 17:08 mwcz

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.

mwcz avatar Aug 07 '15 18:08 mwcz

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

bgrins avatar Aug 12 '15 03:08 bgrins

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. :)

mwcz avatar Aug 12 '15 14:08 mwcz