pointerpointer.com's use of voronoi, canvas, and javascript

I explain a little bit behind how pointerpointer.com was built.
Thx to @markwithasee to showing the site to me

Just to be clear about the canvas. it's offset in the page because its used as a buffer canvas, mouse positions within the picture frame are sent over to it, and the offsets are determined relative to the canvas. So when I turn on the canvas, it looks like its in the wrong place but technically it doesn't need to be.

Lastly, the colors used in the canvas are there because in order to find which shape encloses your pointer, we can just just look up the pixel data and see what color is under the cursor, and thus the connection from color to shape to image. (thx rhys!)

• Category

  Science & Technology

[Brendan Hemens]

Great breakdown. I think the "ahead-of-time" stuff is a big part of what makes pointerpointer amazing...there seem to be a lot of photos involved - I wondered if they used some kind of machine learning algorithm to figure out where the fingers in the photos are pointing.

[dag101101]

Voronoi is an incredibly simple concept. Out of a field of points, at any given coordinate, find whatever point is closest to you, and you're part of that point's region. So if you have a field of colored points, and then iterated over each pixel in the screen and made that pixel's color the color of its closest point, then you'd see a voronoi diagram!

[Alex Zagorodniuk]

im quite curious what are the chrome extension PI uses. who can tell by icons?

[Sarah Cartwright]

Fuck, I'd use a standard grid, and just select with a small equation....

boxNumberCursorIsIn=int(x/10)+­int(y/10*10);

Alternatively, find the centre of the boxes, and then find the closest point to the mouse.

Using what they have, seems a bit overkill!

[Jérôme Cukier]

They might have, but i think it's faster to do manually. Search flickr for photos tagged with finger pointing. Once you have 400 or so, for each determine one or several points where the finger is pointing to (like make a slide show and record clicks). Once you know what point refers to what image, voronoify! It's a great idea

[Matthew Harris]

I checked out the voronoi diagram behind the scenes and then tried to trick it by moving my pointer around some of the big "cells" in the diagram where the author(s) hadn't found many pictures.

The script surprised me by still being super accurate! I guess it also recenters the image on the point in that cell as well. Nice extra touch.

[Matthew Harris]

Read the first comment, it explains why you would use a voronoi grid to get better accuracy

[mehulkar]

I don't understand why the Voronoi grid is necessary if all the source images have already been mapped to a grid point?

[Vinay Menon]

Nice. I guess you can do this with just css using '~' selector.

[Zemnmez]

Well, the diagram ensures that the whole space is covered by at least one image, that perhaps would be more difficult to accomplish using just collision testing and a set of xy coords.

[marcbaiges]

more than than doing mouse x,y collision testing against a rectangular cell? Can't imagine how... but sure I'm missing something, thanks! :)