js-2dmath
Version:
Fast 2d geometry math: Vector2, Rectangle, Circle, Matrix2x3 (2D transformation), Circle, BoundingBox, Line2, Segment2, Intersections, Distances, Transitions (animation/tween), Random numbers, Noise
132 lines (101 loc) • 3.39 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" ></script>
<title>js-2dmath: Demostration of various Intersections</title>
<script src="../dist/js-2dmath-browser.min.js" type="text/javascript" ></script>
<!--
<script src="../debug/js-2dmath-browser-debug.js" type="text/javascript" ></script>
-->
</head>
<body>
<h1>js-2dmath: NMTree (QuadTree)</h1>
<canvas id="canvas" width="680" height="680" style="border: 1px solid red;"></canvas>
<p>config: NMTree([-250, -250, 250, 250], 3, 2)<br />
Insert 250 boxes, and retrieve possible collision with the 25th (green boxes at the end)</p>
</body>
</html>
<script>
//
// --- INIT ---
//
//expose js-2dmath globally, I'm lazy!
require("js-2dmath").globalize(window);
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//
// code
//
function randomAABB2() {
//0.1 because must be inside, no colliding
var x = Math.randRange(bounds[0] + 0.1, bounds[2] - 25.1),
y = Math.randRange(bounds[1] + 0.1, bounds[3] - 25.1),
w = Math.randRange(25, 5),
h = Math.randRange(25, 5);
return [x, y, x + w, y + h];
}
var bounds = AABB2.create(-250, -250, 250, 250),
mqt = new NMtree(bounds, 10, 3, [3, 2]),
MODE = "creation",
retrieved_boxid = 25,
retrieved_box;
console.log(AABB2.fromAABB2Division(bounds, 3, 2));
// random creation
var boxid = 0,
create_box_int = setInterval(function() {
var test = randomAABB2();
mqt.insert(test, ++boxid);
if (boxid === retrieved_boxid) {
retrieved_box = test;
}
if (boxid > 250) {
MODE = "selection";
clearInterval(create_box_int);
}
}, 50);
Draw.Quadtree = function(ctx, qt, bcolor, ocolor) {
Draw.aabb2(ctx, qt.bounds, bcolor);
if (qt.objects) {
qt.objects.forEach(function(obj) {
Draw.aabb2(ctx, obj.bounds, ocolor);
});
}
};
var colors = {
creation: [
["red", "purple"],
["rgb(255, 0, 0)", "rgb(200, 0, 0)"],
["rgb(0, 255, 0)", "rgb(0, 200, 0)"],
["rgb(0, 0, 255)", "rgb(0, 0, 200)"],
["rgb(255, 255, 0)", "rgb(200, 200, 0)"],
["rgb(0, 255, 255)", "rgb(0, 200, 200)"],
["rgb(255, 0, 255)", "rgb(200, 0, 200)"],
],
selection: [["grey", "grey"]]
} ;
function update() {
ctx.save();
canvas.width = canvas.width;
Draw.invertAxis(canvas, ctx); // y-up
ctx.translate(canvas.width * 0.5, canvas.height * 0.5); // center
Draw.cartesianAxis(ctx, 320, 16); // coordinates
window.requestAnimFrame(update);
var icolor = 0;
mqt.iterate(function(qtree) {
var bcolor = colors[MODE][icolor] ? colors[MODE][icolor][0] : "rgba(125, 125, 125, 0.5)";
var ocolor = colors[MODE][icolor] ? colors[MODE][icolor][1] : "rgba(125, 125, 125, 0.5)";
Draw.Quadtree(ctx, qtree, bcolor, ocolor);
++icolor;
});
if (MODE === "selection") {
var oboxes = mqt.retrieve(retrieved_boxid);
oboxes && oboxes.length && oboxes.forEach(function (obj) {
Draw.aabb2(ctx, obj.bounds, "green");
});
Draw.aabb2(ctx, retrieved_box, "red");
}
//Draw.aabb2(ctx, test, "rgba(0, 255, 0, 1)");
ctx.restore();
}
update();
</script>