
pointerpointer.com's use of voronoi, canvas, and javascript
About this video
Paul Irish explains how pointerpointer.com works. It uses a hidden canvas of colored Voronoi regions to look up which photo matches the cursor position.
Why it appears in the archive
HN links it as the author's own breakdown of Pointer Pointer's inner workings.
AI-generated summary and labels from the source dataset; verify important details against the video. Source & credits.
From the Hacker News discussion
Here's a picture of all the different regions: [LINK] For those curious if how it works, Paul Irish did a breakdown of it quite a while ago: [VIDEO] TL:DW - Vornoi Diagrams[1] and manual tagging, no machine learning needed. [1] [LINK]
Read original comment ↗I made a quick video explaining how the webapp works: [VIDEO] Essentially, using the gridPositions.json to populate a Voronoi Grid (toggle display of the <canvas> in your browser). Then your cursor position is used against the grid to find which shape encloses it which maps back to the source JPEG which is then displayed.
Read original comment ↗Paul Irish explained the basics of how it works here: [VIDEO] I wonder if you could create something similar nowadays using generative AI but with the finger in a very specific location without pregenerating thousands of images.
Read original comment ↗