Skip to content
0:00 / 0:00

#voronoidiagram#html5canvas#pointerpointer

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

Paul Irish

11K subscribers • 5 videos on Hallway

YouTube
  • Recommended by 1 person: 1 on Hacker News.
  • Presented by Paul Irish
  • May be out of date. Uploaded 14 years ago, in an area where tools change fast.

Intermediate. Assumes working knowledge.

40K views14 years ago1 recommendation

Web developmentGraphics and audioJavaScriptHTTP, REST and GraphQLRendering

Paul Irish explains how pointerpointer.com uses a hidden canvas with Voronoi regions to map cursor coordinates to specific images.

I explain a little bit behind how pointerpointer.com was built. Thx to @markwithasee to showing the site to me Just to be clear about the canvas. it's offset in the page because its used as a buffer canvas, mouse positions within the picture frame are sent over to it, and the offsets are determined relative to the canvas. So when I turn on the canvas, it looks like its in the wrong place but technically it doesn't need to be. Lastly, the colors used in the canvas are there because in order to find which shape encloses your pointer, we can just just look up the pixel data and see what color is under the cursor, and thus the connection from color to shape to image. (thx rhys!)

Why it's here

1 person recommends this

What people say. Recommended as a neat breakdown of how a popular interactive website works under the hood using simple geometry.

Conlectuson Hacker News • Recommends

On “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: link to this video TL:DW - Vornoi Diagrams1 and manual tagging, no machine learning needed. 1 link

paulirishon Hacker News • Mentions

On “PointerPointer: points to your cursor”

I made a quick video explaining how the webapp works: link to this 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.

petercooperon Hacker News • Mentions

On “Pointer Pointer (2012)”

Paul Irish explained the basics of how it works here: link to this 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.