Color: a color matching game done in d3.js and Raphael | Hacker News Reader

Color: a color matching game done in d3.js and Raphael

color.method.ac

216 pointscshenoy30 comments

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 Lab 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

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)

More fun than I was expecting. Going in I thought it would be more of a test, but the game aspect made me want to keep playing. I ended up with a 9.3!

Superformulas is very cool, but I dont understand whats wrong with their triangles demo (the last one).

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.

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.

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.

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.

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

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".

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

You mean to view? Yes, it's all there though it is js generated from coffeescript. As for using it for personal projects go ahead, though I'd say the code is obfuscated by incompetence :)

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

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.

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.

I went back and used the assist, and this time ended up with a 7.8. It was a much better experience!

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.

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)

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.

Check out this fork of D3 that features Lab conversion and different distance formulas https://github.com/jheer/d3/blob/master/d3.color.js

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.

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.

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.

Yes, rewarding faster matches would be good.

Very cool. Challenging.

Beautiful.

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

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

I love it. Great job.

great work! great fun!

Reply on news.ycombinator.com