Ask HN: How does this work http://pointerpointer.com - PixelMath
======
samhp
I don't know how the coordinates were defined for the 900 images. They might
have just copy-pasted pixel readings from some image program like ImageJ for
half an hour. At first I thought they used html area tags to define bounding
coordinates for a number of circles or rects around every image coordinate,
but in functions.js there's VoronoiGrid.js. I had never heard of that - it
separates all of the coordinate points so that every image they used gets
displayed (every image gets its own "puzzle piece" of pixels it will be
retrieved for: no two images are in the same bounded area).

~~~
PixelMath
"I don't know how the coordinates were defined for the 900 images" this is
what got me curious is it some manual work or some highly sophisticated image
processing and machine learning setup ? (highly unlikely)

------
codemaniac
Setup:

1\. Define the dimensions for the view port (640 x 480, for example). This
means, there are 640 times 480 (= 307,200) pixel locations in the viewport

2\. Procure 640 times 480 (= 307,200) images of people pointing to each of the
pixel locations

3\. Save each image with the corresponding X,Y pixel location it points to in,
say, a database

Run:

1\. Get the (x,y) location of the mouse pointer on the view port

2\. Query the database with the (x,y) co-ordinates and retrieve the
corresponding image

3\. Display image

