4 ms·

Here's a picture of all the different regions:https://imgur.com/a/oYDA5Ja https://imgur.com/a/oYDA5Ja For those curious if how it works, Paul Irish did a break

Here's a picture of all the different regions:https://imgur.com/a/oYDA5Ja https://imgur.com/a/oYDA5Ja For those curious if how it works, Paul Irish did a breakdown of it quite a while ago: https://youtu.be/Z2ZXW2HBLPM https://youtu.be/Z2ZXW2HBLPM TL:DW - Vornoi Diagrams[1] and manual tagging, no machine learning needed. [1] https://en.m.wikipedia.org/wiki/Voronoi_diagram https://en.m.wikipedia.org/wiki/Voronoi_diagram

yarinr 6y ago
Thanks for sharing! Never heard about Vornoi Diagrams before..
Philip-J-Fry 6y ago
I just looked at the latest code and it doesn't seem like that's the case any more. It's just a simple grid and instead images are picked and scaled to point more accurately from what I can tell. Also it's React now...
- squeaky-clean 6y ago
  If I'm reading it correctly, it loads up an array of points [0], and after you move your cursor it loops through all points and finds the one with the nearest distance [1]. It seems like every image has the URL structure /images/[index of point].jpg. The interesting bit is it keeps a list of the 4 point/images you've most recently seen, and will ignore those when searching for the new nearest point/image. Then scales that image to point at your cursor more accurately. This is why it feels pixel-perfect or so, because you won't get a repeat image until you refresh, or try the same location 5 times. To test that out, ctrl+tab away and back to the tab without moving your cursor. You'll always get a different image. Then refresh the page, and ctrl+tab away and back again without moving your cursor. You'll see the same images in order. Also neat that what was once a jQuery app now uses React and Typescript. [0] https://pointerpointer.com/new-positions.json https://pointerpointer.com/new-positions.json [1] From /static/js/Point.ts const bruteClosest = (position: Point, positions: Point[]) => { let index = undefined; let closest = Number.MAX_VALUE; for (let i = 0; i < positions.length; i++) { const pos = positions[i]; const distance = distancePoints(pos, position); if (distance < closest && !lastPicked.includes(i)) { closest = distance; index = i; }; } lastPicked.unshift(index!); lastPicked.length = Math.min(lastPicked.length, 4); return index; };

yarinr 6y ago

Thanks for sharing! Never heard about Vornoi Diagrams before..

Philip-J-Fry 6y ago

I just looked at the latest code and it doesn't seem like that's the case any more. It's just a simple grid and instead images are picked and scaled to point more accurately from what I can tell. Also it's React now...

squeaky-clean 6y ago
If I'm reading it correctly, it loads up an array of points [0], and after you move your cursor it loops through all points and finds the one with the nearest distance [1]. It seems like every image has the URL structure /images/[index of point].jpg. The interesting bit is it keeps a list of the 4 point/images you've most recently seen, and will ignore those when searching for the new nearest point/image. Then scales that image to point at your cursor more accurately. This is why it feels pixel-perfect or so, because you won't get a repeat image until you refresh, or try the same location 5 times. To test that out, ctrl+tab away and back to the tab without moving your cursor. You'll always get a different image. Then refresh the page, and ctrl+tab away and back again without moving your cursor. You'll see the same images in order. Also neat that what was once a jQuery app now uses React and Typescript. [0] https://pointerpointer.com/new-positions.json https://pointerpointer.com/new-positions.json [1] From /static/js/Point.ts const bruteClosest = (position: Point, positions: Point[]) => { let index = undefined; let closest = Number.MAX_VALUE; for (let i = 0; i < positions.length; i++) { const pos = positions[i]; const distance = distancePoints(pos, position); if (distance < closest && !lastPicked.includes(i)) { closest = distance; index = i; }; } lastPicked.unshift(index!); lastPicked.length = Math.min(lastPicked.length, 4); return index; };