JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/mikechambers/ExamplesByMesh/master/JavaScript/QuadTree/src/QuadTree.js"></script>
<div>
<label>should show just cUL</label><div id="test1"></div>
<label>should show cUR & cUR2:</label><div id="test2"></div>
</div>
JavaScript
$(function() {
var worldBounds = {
x: 0,
y: 0,
width: 100,
height: 100
};
var quadTree = new QuadTree(worldBounds, true, 4, 2);
var cUL = {
x: 10,
y: 10,
name: "cUL"
};
quadTree.insert(cUL);
var cUR = {
x: 90,
y: 10,
name: "cUR"
};
var cUR2 = {
x: 93,
y: 13,
name: "cUR2"
};
quadTree.insert(cUR);
quadTree.insert(cUR2);
var t1Rect = {
x: 40,
y: 40,
};
$.each(quadTree.retrieve(t1Rect), function(i, v) {
$('#test1').append(v.name+" ");
});
var t2Rect = {
x: 70,
y: 20,
};
$.each(quadTree.retrieve(t2Rect), function(i, v) {
$('#test2').append(v.name+" ");
});
});