A quadtree and Delaunay over 200,000 points
The timings appear on the page, not in the Console, because they change with the machine. The pointer uses a reach of 24 for touch and 6 for a mouse.
A canvas draws pixels and keeps no shapes, so it cannot tell you what was clicked. You find the mark under the pointer yourself, with the browser's shape test, a hidden colour canvas, a quadtree or a Delaunay diagram.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write stationAtPoint(stations, x, y, reach) using a quadtree built inside it, returning the station or null.
In the second example, make the hover text say edge when the pixel is partly transparent, nothing when empty, and the name only when alpha is 255.
Explain it without notes
Why can you not add a click handler to one dot on a canvas?
Compare isPointInPath and colour picking: when would you choose each?
Preview
Console
Nothing logged yet.Expected console output
at (100, 100) quadtree within 10 px: point 146783 | brute force: point 146783 | Delaunay nearest: point 146783 | quadtree and brute force agree: true
at (240, 120) quadtree within 10 px: point 94821 | brute force: point 94821 | Delaunay nearest: point 94821 | quadtree and brute force agree: true
at (400, 20) quadtree within 10 px: point 22090 | brute force: point 22090 | Delaunay nearest: point 22090 | quadtree and brute force agree: true
a radius of 0.01 finds: undefined
a radius of Infinity finds the nearest point anywhere: point 88865
an empty tree finds: undefined
a NaN position finds: undefined