4 ms·

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 absolute

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!

afandian 12y ago
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.
yummybear 12y ago
My guess is someone manually entered all the coordinates and directions, and the algorithm finds the best match of direction and distance.
tylercubell 12y ago
It uses a Voronoi diagram. http://en.wikipedia.org/wiki/Voronoi_diagram http://en.wikipedia.org/wiki/Voronoi_diagram https://github.com/gorhill/Javascript-Voronoi https://github.com/gorhill/Javascript-Voronoi
scrollaway 12y ago
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. Edit: Terminology
IVIVIV 12y ago
Paul Irish explains it here: https://www.youtube.com/watch?v=Z2ZXW2HBLPM https://www.youtube.com/watch?v=Z2ZXW2HBLPM
ajanuary 12y ago
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]. [1] http://www.pointerpointer.com/gridPositions.json http://www.pointerpointer.com/gridPositions.json [2] http://en.wikipedia.org/wiki/Voronoi_diagram http://en.wikipedia.org/wiki/Voronoi_diagram [3] http://www.pointerpointer.com/js/rhill-voronoi-core.js http://www.pointerpointer.com/js/rhill-voronoi-core.js
- jimrhoskins 12y ago
  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.
  - CocaKoala 12y ago
    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.

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!

afandian 12y ago

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.

yummybear 12y ago

My guess is someone manually entered all the coordinates and directions, and the algorithm finds the best match of direction and distance.

tylercubell 12y ago

It uses a Voronoi diagram. http://en.wikipedia.org/wiki/Voronoi_diagram http://en.wikipedia.org/wiki/Voronoi_diagram https://github.com/gorhill/Javascript-Voronoi https://github.com/gorhill/Javascript-Voronoi

scrollaway 12y ago

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. Edit: Terminology

IVIVIV 12y ago

Paul Irish explains it here: https://www.youtube.com/watch?v=Z2ZXW2HBLPM https://www.youtube.com/watch?v=Z2ZXW2HBLPM

ajanuary 12y ago

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]. [1] http://www.pointerpointer.com/gridPositions.json http://www.pointerpointer.com/gridPositions.json [2] http://en.wikipedia.org/wiki/Voronoi_diagram http://en.wikipedia.org/wiki/Voronoi_diagram [3] http://www.pointerpointer.com/js/rhill-voronoi-core.js http://www.pointerpointer.com/js/rhill-voronoi-core.js

jimrhoskins 12y ago
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.
- CocaKoala 12y ago
  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.