3 ms·

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 mo

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