HackerTube

pointerpointer.com's use of voronoi, canvas, and javascript

Paul Irish1 HN recommenders · 2012–2025
40K views · explainer · evergreen · Uploaded 2012-06-11

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.

HN links it as the author's own breakdown of Pointer Pointer's inner workings.

Web developmentCreative coding & generative artComputer graphics & rendering

Watch on YouTube

3 comments from Hacker News

@paulirish2012 · in “PointerPointer: points to your cursor”

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.

CitesView on HN
@Conlectus2020 · in “Pointer Pointer (2012)”

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]

RecommendsView on HN
@petercooper2025 · in “Pointer Pointer (2012)”

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.

CitesView on HN