For those curious if how it works, Paul Irish did a breakdown of it quite a while ago: https://youtu.be/Z2ZXW2HBLPM
TL:DW - Vornoi Diagrams[1] and manual tagging, no machine learning needed.
For those curious if how it works, Paul Irish did a breakdown of it quite a while ago: https://youtu.be/Z2ZXW2HBLPM
TL:DW - Vornoi Diagrams[1] and manual tagging, no machine learning needed.
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
[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;
};