10,000 Shapes, 12 Hit Tests — Implementing a Quadtree
👉 Frontend System Design Essentials — Course: https://icodeit.thinkific.com/courses/frontend-system-design-essentials 👉 Frontend System Design Essentials — Book: https://leanpub.com/frontend-system-design-essentials/ In Part 1, a spatial index made a ten-thousand-shape canvas feel responsive. We used it as a black box: instead of asking every shape whether the pointer hit it, we asked which shapes were close enough to be worth checking. This video opens that box. We implement a Quadtree in TypeScript for the same whiteboard — not a generic textbook tree, but one that answers the two questions the drawing tool actually asks: hit testing when the pointer moves, and viewport culling when we paint a frame. You'll learn: Why scanning 10,000 shapes on every pointermove becomes hundreds of thousands of tests per second How a Quadtree splits space so empty regions stay cheap Why the index only stores bounds — precise hit testing stays outside How insert, split, and straddling shapes actually work Why one tree can serve both picking (one path) and painting (several paths) Final takeaway: A Quadtree does not replace hit testing or rendering. It decides which work can be skipped — and that is why one structure can make both picking and painting fast. 📘 MY BOOKS & COURSES 👉 Frontend System Design Essentials (Course): https://icodeit.thinkific.com/courses/frontend-system-design-essentials 👉 Frontend System Design Essentials (Book): https://leanpub.com/frontend-system-design-essentials/ 👉 React Anti-Patterns (Amazon): https://www.amazon.com/dp/1805123971 👉 More Tutorials on Advanced Patterns: https://icodeit.com.au/tutorials/advanced-network-patterns-react 📩 STAY CONNECTED 🧠 Newsletter (system design & clean code): https://juntao.substack.com 🌐 Website & Blog: https://icodeit.com.au 🐦 Twitter / X: http://twitter.com/JuntaoQiu 📺 YouTube (subscribe): https://www.youtube.com/@icodeit.juntao #frontend #systemdesign #quadtree #canvas #performance #javascript #typescript #webdevelopment