

Color: a color matching game done in d3.js and Raphael - cshenoy
http://color.method.ac/

======
duopixel
I'm the author and I submitted it last night, not sure how it went through the
repost filter. <http://news.ycombinator.com/item?id=3503758> but glad to see
it again.

In addition to d3.js and Raphael, it uses an implementation of L _a_ b for D3
by Jeffrey Heer <https://github.com/mbostock/d3/pull/183>, and the colorblind
implementation uses superformulas for D3 by Christophe Viau
<http://bl.ocks.org/1020902>

~~~
danso
This would make for a hugely successful phone app. Well, if you added some
kind of animal theme to it too. Bears...trying to find their bear cubs.
(sorry, afternoon slump)

------
bretthopper
This is really impressive and well made. Love the design and UI in addition to
the game just being fun. You can see how much thought went into it when you
see how the scores are presented after you completed the game.

~~~
rachelbythebay
I found the UI difficult and frustrating. Even after I gave it a second try,
once it got to "complimentary", it went back to being frustrating and
annoying. I left it after that point.

------
jasonkolb
At first glance my reaction was "Wow, what a pivot! I wonder if their VC's are
pissed yet and want their 40 million back yet?" :)

But anyway, very cool. I'm loving watching all the interesting projects using
d3 lately.

------
netnichols
Very nice!

The only complaint I have is that I kept on associating the position of my
mouse with a particular circle or segment. Then sometimes nothing would behave
like I expected, and I would then spend a significant amount of time trying to
figure out which circle to associate with which segment. It didn't seem to me
that this is really part of the 'gameplay', it felt more like trying to figure
out which keys to use for a new game... but then for every level.

It's hard to say without actually trying it, but I _think_ having the internal
segments 'follow' their respective circles would have been much more intuitive
for me.

------
simonbrown
Clicking on the outer ring before starting the game still registers and gives
you a score.

------
WesleyJohnson
Ended up with 1 "Poor", several "Perfects" and mostly "Very Good" and an 8.7
overall score. Very addictive game and well put together. I may have
overlooked, but is the source available? I probably should of just checked
"View Source".

~~~
Nic0
> Very addictive game

It's funny, I was thinking to myself, who could possibly play this game twice.
I might misjudge as I'm not a big player myself, but I really through the
interest of this was more techniques used (e.g. raphael.js) than the game
itself. But I agree, nice UI, nice design and good idea.

------
el_devo
As a person with red-green color deficiency, I got a 3.1. I'm proud of that!

~~~
nickbarnwell
Be sure to try the colour blindness assist. It's one or the most innovative
ways of approaching it I've seen, and worth it for even the non-impaired to
try.

~~~
VBprogrammer
Interestingly, as someone else afflicted with red-green colourblindness I
didn't really struggle that much with the colourblind assist off.

I think it is because when the colours are displayed exactly side by side it
isn't nearly as difficult to match them up than it would be for you to ask me
to pick out that same colour from a pallet of similar colours.

------
danso
Great work. I've already been more fulfilled with this than I have with the
multimillion dollar Color startup...

It'd be cool to see the actual deviation in numbers...I feel that some of my
"perfect" matches were just shots in the dark.

~~~
duopixel
The formula for finding the difference in color is CIEDE2000,
<http://en.wikipedia.org/wiki/Color_difference#CIEDE2000>, the actual number
is quite meaningless, but in case you're interested:

    
    
      score = "perfect" if distance <= 2
      score = "very good" if distance > 2 and distance <= 6
      score = "good" if distance > 6 and distance <= 12 
      score = "average" if distance > 12 and distance <= 18
      score = "poor" if distance > 18
    

The score is more strict on the first exercise (Hue only)

~~~
cr4zy
Thanks for linking that. I recently contrived my own computer vision color
difference formula by using distance within an HSL bicone
(<http://dl.dropbox.com/u/9632169/HTM/Hcl-hcv_models.svg>). This is much
better in that it takes into account differences in human sensitivity to
certain colors.

~~~
duopixel
Check out this fork of D3 that features L _a_ b conversion and different
distance formulas <https://github.com/jheer/d3/blob/master/d3.color.js>

------
mutagen
That was fun. One thing I'd suggest is previewing the new widget during the
countdown to a new test, the two dimensional transition to saturation threw me
off a bit as my brain came to grips with the new representation.

------
Groxx
Very neat, though I've noticed that I can get 'perfect's while I can still see
the difference... intentional?

Anyway, creepily addicting once you start :D Great job in every way.

------
websymphony
Good job. It is kind of addicting. I think a point system that depends upon
the degree of color match along with time taken, will make it even more
interesting.

~~~
Brashman
Yes, rewarding faster matches would be good.

------
rjurney
Very cool. Challenging.

------
idan
Beautiful.

------
kylebrown
I know this isn't your product, but its not _that_ hard to support touch these
days.

~~~
duopixel
It's coming up, it's just that it was really had to get out of the door so I
left it for later.

Our other games are touch enabled: <http://type.method.ac>
<http://shape.method.ac>

------
aviv
I love it. Great job.

------
ullrich
great work! great fun!

