Overview

This is a p5.js sketch to demonstrate an implementation of a Quadtree data structure, focusing on adding Line Segments to the quad tree.

Here LineSeg class is able to act like a ‘rect’ with .x, .y, .width, and .height properties that define its bounding box. Read more about ‘Duck Typing’ on Wikipedia.

Note: When adding line segments, it doesn’t guanteee that the returned line segments are in the query rectangle, just that they may be (because their bounding boxes overlap)

Controls

Mouse

• Move - Highlights the rectangles centered around the mouse.

Touch

• Touch and Drag - Highlights the rectangles centered around the main touch point.

References:

• Wikipedia - Duck Typing article on what ‘Duck Typing’ is.
• Wikipedia - Quadtree - Polygonal Map (PM)
• Coding Train Episode 98.1 98.2

Links:

• Live View
• Source on Github

Screenshot: