Primitives Example

The main goal for quadtree-ts v2 was to support multiple primitive shapes.

Right now there is built-in support for Rectangles, Circles and Lines.

All primitives can 1) be inserted into the tree and 2) be used to retrieve objects from the tree.

Rectangle is probably the fastest implementation (performance example will follow some day).

The following code is reduced to the most important parts. View the full script.js of this example on GitHub.

HTML

<canvas id="canvas" width="640" height="480"></canvas>
<button id="addRectangle">add Rectangle</button>
<button id="addCircle">add Circle</button>
<button id="addLine">add Line</button>

JS

// Create a new Quadtree
const tree = new Quadtree({
	width: 640,
	height: 480,
});

// Add Rectangles
document.querySelector('#addRectangle').addEventListener('click', () => {

    // Each primitive requires geometry properties –
    // For Rectangle: x, y, width and height are required.
    const rect = new Quadtree.Rectangle({
        x: Math.random() * 640,
        y: Math.random() * 480,
        width: 4 + Math.random() * 28,
        height: 4 + Math.random() * 28,
    });

    // Insert the Rectangle in the Quadtree
    tree.insert(rect);
});

// Add Circle
document.querySelector('#addCircle').addEventListener('click', () => {

    // For Circle: x, y and r are required.
    const circle = new Quadtree.Circle({
        x: Math.random() * 640,
        y: Math.random() * 480,
        r: 4 + Math.random() * 16,
    });

    // Insert the Circle in the Quadtree
    tree.insert(circle);
});

// Add Line
document.querySelector('#addLine').addEventListener('click', () => {

    // For Line: x1, y1, x2 and y2 are required.
    const x1 = Math.random() * (640 - 128);
    const y1 =  Math.random() * (480 - 128);
    const line = new Quadtree.Line({
        x1: x1,
        y1: y1,
        x2: x1 + Math.random() * 128,
        y2: y1 + Math.random() * 128,
    });

    // Insert the Line in the Quadtree
    tree.insert(line);
});

All primitives can be used to retrieve objects from the Quadtree, too.

JS

// Create some primitives we can use as cursors
const cursorRectangle = new Quadtree.Rectangle({
    x: 0,
    y: 0,
    width: 128,
    height: 128,
});
const cursorCircle = new Quadtree.Circle({
    x: 0, 
    y: 0, 
    r: 64,
}),
const cursorLine = new Quadtree.Line({
    x1: 50, 
    y1: 50, 
    x2: 150,
    y2: 150,
});

let myCursor = cursorRectangle;

// Update cursor position
canvas.addEventListener('mousemove', function(e) {
    if(myCursor === cursorLine) {
        myCursor.x1 = e.offsetX;
        myCursor.y1 = e.offsetY;
        myCursor.x2 = e.offsetX + 100;
        myCursor.y2 = e.offsetY + 75;
    } else {			
        myCursor.x = e.offsetX;
        myCursor.y = e.offsetY;	
    }

    // Retrieve objects
    const candidates = tree.retrieve(myCursor);
    console.log(candidates);
});

// Change the cursor
document.querySelector('#cursorRectangle').addEventListener('click', () => {
    myCursor = cursorRectangle;
});
document.querySelector('#cursorCircle').addEventListener('click', () => {
    myCursor = cursorCircle;
});
document.querySelector('#cursorLine').addEventListener('click', () => {
    myCursor = cursorLine;
});

To see the full example code please check the page source or visit this page on github.