Winning in Huedoku Pix Relates the Puzzle to Real Life

In Huedoku Pix, you select a photo, and the four dominant colors from that photo, become corners and create a huedoku puzzle.

Screenshot 2015-12-06 14.34.25

The corners blend to create the rest of the colors that make up the huedoku puzzle. You can change the size of the puzzle as well as the difficulty. And then you share the puzzle with your friend. Screenshot 2015-12-06 14.56.47

Your friend receives the your puzzle through a text or email. She has to solve the huedoku challenge to find the reward.

solving huedoku pix

When she solves the puzzle, the pixels all scatter away to reveal the source photo that you used to create this puzzle.

winning huedoku pix

Screenshot 2015-12-06 15.12.58

Screenshot 2015-12-06 14.39.22

The user wants to see the colors from the puzzle relate to the colors in the photo.

Here’s what we propose:

An animation of 400 pixels where each pixel moves from it’s place in  the huedoku color matrix to it’s new place in a mosaic photo of the source image and then fades to zero opacity to reveal the source photo.

  1. Pix_mona_1024_3copy_4_00030 2.mona animation mosaic 3. Pix_mona_1024_3copy_4_00015 4. Pix_mona_1024_3copy_4_00002 5. Pix_mona_1024_3copy_4_00001 6. mona150faded 7. mona faded

The example above is not a 20×20 matrix/mosaic, which we think will be more effective, instead it is 10×10.

What we think is required:

The colors of each color tile in the huedoku color matrix will not match exactly to each color tile in the mosaic. The four source corner colors will, but the rest will be approximate. The tiles that don’t match will need to change color during the animation: from the color in the matrix to the color in the mosaic.

In other words, we want to find a set of correspondences for each tile to a matching location in the image, and then animate them there. The matches won’t be exact because you might have a lot of colors in the original image but only a small range of colors in your tiles, but we want the “best possible” set of matches.

Thinking about this mathematically, we have two sets of 3d (RGB) points – the square colors and the average colors of image regions. These point sets are the same size. We would like to find a correspondence – a one-to-one mapping – between these two sets, which minimizes the difference between matching colors.
If we assume that the “cost” of a match is simply the sum of the costs (RGB point distances) of all the pairs, then this is known as the “linear assignment problem.”
There are a number of algorithms to solve it, with available code…
https://en.wikipedia.org/wiki/Hungarian_algorithm
  1. Each tile in the matrix, both color and location, will need to be assigned to one tile, color and location, from the mosaic.
  2. Each tile will animate from the location in the matrix to the location in the mosaic. Along the way each tile will change color from the original color in the matrix to the color of the tile in the mosaic.

We are looking for help to generate the code for this animation in objective C.

If you are interested in testing out the beta version of huedoku Pix please sign up here.

Thank you to Dan Goldman, Peter Donavan, Sharon Lin and Aaron Epstein for help thus far.