On: Pointer Pointer (2012)

[squeaky-clean]

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

[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;
    };