EPSON - The Color Matching Game
We were approached at Monologue by One Whole Managing Reputation to realise a color matching game for EPSON. The goal of the game was to showcase how accurate their new projectors are displaying colors and during the event the visitors were able to play and try to achieve the best score.
The concept was inspired by http://color.method.ac and the design and game rules were provided by Maria Athanasiou. The goal of the game was to match colors and try reaching the highest score possible. Each level has a specific difficulty and a description for the primary, complementary and analogous colors respectively. If the user color match percentage was below 90% he would get a score penalty and have to retry the same level. The time was running as well and the player had up to ten seconds to match colors. If the time was out or the color matching percentage was below 90% three times, the player would get a 0% score for the specific level and go to the next one. Depending on how fast the user answered we would add a time penalty to reward fast and accurate players.
The game was made in HTML5 without the need of any third party library, during the development I encountered an interesting fact I was not aware of:"matching colors is not as simple as I thought". There is a big difference between color spaces and perceived colors cannot be matched properly using RGB values. Liza Shulyayeva article about color matching over html5hub.com (link here) was amazingly helpful to understand what I was doing wrong. The rest of the script was pretty straight-forward.
Getting the opposite color on the color wheel was just a matter of finding the antipodal point, which is a fancy word to say substracting the current X and Y with the color wheel width and height respectively.
Level 3 was about calculating the angle of the current point from the center of the color wheel and shifting the two other color pickers by 28 degres each.
Here is a small video (H.264 format) showing the gameplay:
And a couple screenshots:
