pointerpointer.com's use of voronoi, canvas, and javascript
Paul Irish1 HN recommender · recommended in 1 month, 2012–2025
explainer · intermediate · evergreen · 2012–2025 on HN
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.
Up next
14 mo on HNWhat the heck is the event loop anyway? | Philip Roberts | JSConf EU
JSConf
16 HN recommender · 2015–2025
13 mo on HNRich Harris - Rethinking reactivity
You Gotta Love Frontend
15 HN recommender · 2019–2026
10 mo on HNCrockford on JavaScript - Volume 1: The Early Years
YUI Library
10 HN recommender · 2013–2022
10 mo on HNRailsConf 2016 - Turbolinks 5: I Can’t Believe It’s Not Native! by Sam Stephenson
Confreaks
6 HN recommender · 2017–2020
10 mo on HNJavaScript: The Good Parts
Google TechTalks
11 HN recommender · 2009–2020
9 mo on HNPete Hunt: React: Rethinking best practices -- JSConf EU
JSConf
9 HN recommender · 2014–2025
8 mo on HNDan Abramov - Live React: Hot Reloading with Time Travel at react-europe 2015
ReactEurope
12 HN recommender · 2015–2022
7 mo on HNHey Underscore, You're Doing It Wrong!
InfoQ
9 HN recommender · 2014–2022
6 mo on HNChris McCord - Keynote: Phoenix LiveView - Interactive Apps without Javascript - ElixirConf EU 2019
Code Sync
4 HN recommender · 2019–2024
6 mo on HNOAuth 2.0 and OpenID Connect (in plain English)
OktaDev
7 HN recommender · 2019–2026
6 mo on HNJake Archibald on the web browser event loop, setTimeout, micro tasks, requestAnimationFrame, ...
JSConf
7 HN recommender · 2018–2023
6 mo on HNRiftSketch: Live coding in VR with the Oculus Rift, Firefox WebVR, JavaScript and Three.js
Brian Peiris
5 HN recommender · 2014–2020
3 comments from Hacker News
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: ▶ this video TL:DW - Vornoi Diagrams[1] and manual tagging, no machine learning needed. [1] link
Paul Irish explained the basics of how it works here: ▶ 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.
I made a quick video explaining how the webapp works: ▶ 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.