Does anyone know how this was implemented? It's a great example of a case where, as a computer programmer, there are still problem domains which I have absolutely no idea how to approach!
It loads a json file [1] that contains the co-ordinates of the tip of each point and the corresponding image. It uses this to create a Voronoi diagram [2] using a "custom Javascript implementation of Steven J. Fortune's algorithm" [3].
Another cool thing is it appears to scale/move the image to match the desired point, at least in some cases.
Try moving your pointer around to different positions very close to the top right corner. This triggers a picture with a wristwatch and water bottle. The pointing is done by the right hand, which if your pointer is too far right is cut out of the frame, but becomes visible as you move towards the left.
I was just about to mention this; the same thing happens in the lower left corner (woman pointing, with two men in the background, one holding a beer can and wearing an 'enjoi' hoodie). The picture gets moved so she's always pointing at the cursor on the y-axis.
30 seconds guess: Author got hold of a large set of photos, analyzed for raised fingers with computer imagery.
Then author probably split the 960x680 px rectangle into a grid of small squares. Located the finger in every photo and assigned each of them to a specific square.
From there on it's a matter of finding the pointer in javascript and a Voronoi search to the matching photo. I'm not seeing an ajax call in the logs so there's probably a bit more magic going on clientside.
I would imagine that there is a catalogue of images, and the location pointed to stored for each image. You could manually tag 100 photographs quite quickly I'd imagine.
For a small number of photos (up to a few thousand), a linear search (i.e. check against each one) would be quick enough. You could compare the distance of the pointed spot to the cursor (using Euclidean distance), pick the best one, maybe add in a random factor.
EDIT: Somehow the author is putting Voronoi diagrams into use. Take a look at the source.
