bgrins / TinyColor

Fast, small color manipulation and conversion for JavaScript
https://bgrins.github.io/TinyColor/
MIT License
5.05k stars 437 forks source link

added handling of numbers for Pixi.js hex format with tests #98

Open weepy opened 9 years ago

weepy commented 9 years ago

This adds support for raw hex format like in Pixi.js, for example '0xaabbccis the same color as#aabbcc`

bgrins commented 9 years ago

Interesting, I haven't seen that format before

bgrins commented 9 years ago

Does this pixi.js project have some test cases for their hex conversion? Like, how does it handle numbers with > 6 digits?

bgrins commented 9 years ago

There should also be a variation in .toString() for the "number" case that calls .toNumber()

weepy commented 9 years ago

Pixi uses the numbers internally for the GPU. There's a one-to-one mapping to string hex. e.g 0x0 === "#000000", so I don't think there's really any need for tests. I didn't add a "number" format, I just converted it to an rgb object, since that was the fastest conversion, so I guess there's no need for a "number" case in .toString() ?

bgrins commented 9 years ago

I didn't add a "number" format, I just converted it to an rgb object, since that was the fastest conversion, so I guess there's no need for a "number" case in .toString() ?

It looks like there was a toNumber function added to the prototype. Usually I have added a matching toString() definition for each of the to* functions added to the prototype but I guess it isn't really necessary for this

bgrins commented 9 years ago

Pixi uses the numbers internally for the GPU. There's a one-to-one mapping to string hex. e.g 0x0 === "#000000", so I don't think there's really any need for tests.

So 0xffffffffffff000000 just ends up becoming #000000? What about -0x00ff00? Does it depend on the GPU?

weepy commented 9 years ago

Not sure about the big one. 0x00ff00 just becomes 0xff00 which is interpreted as green. Doesn't depend on gpu as it's using webgl which is standard across architectures.

On Tue, 11 Aug 2015 18:00 Brian Grinstead notifications@github.com wrote:

Pixi uses the numbers internally for the GPU. There's a one-to-one mapping to string hex. e.g 0x0 === "#000000", so I don't think there's really any need for tests.

So 0xffffffffffff000000 just ends up becoming #000000? What about -0x00ff00? Does it depend on the GPU?

— Reply to this email directly or view it on GitHub https://github.com/bgrins/TinyColor/pull/98#issuecomment-129968596.

bgrins commented 9 years ago

0x00ff00 just becomes 0xff00 which is interpreted as green

I had a negative in front of it :). So, -0x00ff00.

weepy commented 9 years ago

I'm not really sure. Maybe ultraviolet?! ;-) It probably just comes out as black which is what happens if it's NaN

On Tue, 11 Aug 2015 22:21 Brian Grinstead notifications@github.com wrote:

0x00ff00 just becomes 0xff00 which is interpreted as green

I had a negative in front of it :). So, -0x00ff00.

— Reply to this email directly or view it on GitHub https://github.com/bgrins/TinyColor/pull/98#issuecomment-130081540.

weepy commented 8 years ago

did u decide on this PR ?

On Wed, Aug 12, 2015 at 7:38 AM Jonah Fox jonahfox@gmail.com wrote:

I'm not really sure. Maybe ultraviolet?! ;-) It probably just comes out as black which is what happens if it's NaN

On Tue, 11 Aug 2015 22:21 Brian Grinstead notifications@github.com wrote:

0x00ff00 just becomes 0xff00 which is interpreted as green

I had a negative in front of it :). So, -0x00ff00.

— Reply to this email directly or view it on GitHub https://github.com/bgrins/TinyColor/pull/98#issuecomment-130081540.

alesdotio commented 8 years ago

I would love to see this merged in. It's very useful when using libraries like pixi.js

bgrins commented 8 years ago

Sorry, for the slow response. This pixi.js library is the only place I've seen this format used so far, so I'm hesitant to add support for it into the main library.

Maybe what we need is some kind of extension API where someone could register id, shouldHandleInput(input) -> bool, toRgb(input) -> {r,g,b,a} and toString({r,g,b,a}) -> string then the lib could loop through extensions and send tinycolor(0xaabbcc) into the toRgb method if shouldHandleInput is true. Then when tinycolor(0xaabbcc).toString("number") is called it would defer to the extension's method.

danwad commented 8 years ago

I would find this useful, either built in or as an extension.

For now, I have been passing colours through pixi's utility functions for converting between hex and rgb/string.

https://github.com/pixijs/pixi.js/blob/master/src/core/utils/index.js#L24-L65