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
256 lines (182 loc) • 6.01 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: Polygon</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: Polygon</h1>
<canvas id="canvas" width="680" height="680" style="border: 1px solid red;"></canvas>
<p>Press keys (1-7) to run tests</p>
<ul>
<li>1 - boxes collide</li>
<li>2 - boxes collide</li>
<li>3 - circles-polygon collide</li>
<li>4 - boxes no collide</li>
<li>5 - boxes no collide</li>
<li>6 - circles-polygon no collide</li>
<li>7 - triangles collide</li>
</ul>
</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
//
var poly1 = Polygon.create([0, 0], [50, 0], [50, 50], [0, 50]),
poly2 = Polygon.create([5, 5], [50, 0], [50, 50], [0, 50]);
poly3 = [];
function gjk(poly1, poly2) {
Draw.polygon(ctx, poly1, "red");
Draw.polygon(ctx, poly2, "blue");
var result,
history = [];
result = Collision.GJK.getPolygonPolygon(poly1, poly2, history);
console.log("GJK", JSON.stringify(result));
Draw.text(ctx, result.overlap ? "collide" : "no collision", [-320, 200])
Draw.polygon(ctx, result.simplex, "rgba(0,255,0, 0.25)", true);
Draw.polygon(ctx, result.simplex, "rgba(0,255,0, 0.5)");
Draw.polygon(ctx,
Polygon.MinkowskiDifference(poly1, poly2),
"rgba(0,0,255, 0.10)", true);
// EPA!
if (result.overlap) {
var epa = Collision.Response.create();
Collision.EPA(epa, poly1, poly2, result.simplex);
console.log("EPA", JSON.stringify(epa));
var ec = Collision.Manifold.EdgeClipping(poly1, poly2, epa.mtv);
console.log("EC", JSON.stringify(ec));
if (ec) {
ec.cp && ec.cp.forEach(function(cp) {
Draw.vec2(ctx, cp.p, "green", 5);
});
Draw.polygon(ctx, [ec.incidentEdge.v1, ec.incidentEdge.v2], "yellow");
Draw.polygon(ctx, [ec.referenceEdge.v1, ec.referenceEdge.v2], "yellow");
}
}
}
function example1 () {
var poly1 = Polygon.create([0, 0], [50, 0], [50, 50], [0, 50]),
poly2 = [];
Polygon.translate(poly2, poly1, [15, 15]);
gjk(poly1, poly2);
}
function example2 () {
var poly1 = Polygon.create([0, 0], [50, 0], [50, 50], [0, 50]),
poly2 = [];
var mat23 = Matrix23.create();
Matrix23.translate(mat23, mat23, [25, 15]);
Matrix23.rotate(mat23, mat23, Math.HALF_PI * 0.5);
Polygon.transform(poly2, poly1, mat23);
console.log(poly2);
gjk(poly1, poly2);
}
function example3 () {
var poly1 = Polygon.fromCircle(Circle.create(0, 0, 50), 10, 0),
poly2 = [];
console.log(poly1);
Draw.polygon(ctx, poly1, "red");
var mat23 = Matrix23.create();
Matrix23.translate(mat23, mat23, [25, 25]);
Polygon.transform(poly2, poly1, mat23);
console.log(poly2);
gjk(poly1, poly2);
}
function example4 () {
var poly1 = Polygon.create([0, 0], [50, 0], [50, 50], [0, 50]),
poly2 = [];
Polygon.translate(poly2, poly1, [75, 75]);
gjk(poly1, poly2);
}
function example5 () {
var poly1 = Polygon.create([0, 0], [50, 0], [50, 50], [0, 50]),
poly2 = [];
var mat23 = Matrix23.create();
Matrix23.translate(mat23, mat23, [75, 75]);
Matrix23.rotate(mat23, mat23, Math.HALF_PI * 0.5);
Polygon.transform(poly2, poly1, mat23);
console.log(poly2);
gjk(poly1, poly2);
}
function example6 () {
var poly1 = Polygon.fromCircle(Circle.create(0, 0, 50), 10, 0),
poly2 = [];
console.log(poly1);
Draw.polygon(ctx, poly1, "red");
var mat23 = Matrix23.create();
Matrix23.translate(mat23, mat23, [75, 75]);
Polygon.transform(poly2, poly1, mat23);
console.log(poly2);
gjk(poly1, poly2);
}
function example7 () {
var poly1 = Polygon.create([100, 0], [0, 100], [0, -100]),
poly2 = Polygon.create([0, 0], [100, 100], [100, -100]);
gjk(poly1, poly2);
}
/*
function example2() {
var poly1 = Polygon.create([0, 0], [50, 0], [50, 50], [0, 50]),
poly2 = Polygon.create();
Polygon.translate(poly2, poly1, [75, 100]);
gjk(poly1, poly2);
}
function example3() {
var poly1 = Polygon.create([0, 0], [50, 0], [50, 50], [0, 50]),
poly2 = Polygon.create([25, 25], [60, 25], [50, 50], [25, 50]);
gjk(poly1, poly2);
}
function example4() {
var poly1 = Polygon.create([50, -40], [0, -80], [-50, -40]),
poly2 = Polygon.create([50, -40], [0, -80], [-50, -40]);
Polygon.translate(poly2, poly1, [10, 10]);
Polygon.rotate(poly2, poly2, Math.DEG_TO_RAD * 15);
gjk(poly1, poly2);
}
*/
var current_test = example4;
function onKeyDown(ev) {
if (!ev) {
ev = event;
}
switch (ev.keyCode) {
case 49: // '1'
case 50: // '2'
case 51: // '3'
case 52: // '4'
case 53: // '5'
case 54: // '6'
case 55: // '7'
//case 56: // '8'
//case 57: // '9'
current_test = window["example" + (ev.keyCode - 48)]
if (!current_test) {
current_test = example1;
}
window.requestAnimFrame(update);
break;
}
}
document.addEventListener("keydown", onKeyDown, false);
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // center
ctx.save();
Draw.invertAxis(canvas, ctx); // y-up
ctx.translate(canvas.width * 0.5, canvas.height * 0.5); // center
Draw.cartesianAxis(ctx, 320, 16); // coordinates
current_test();
ctx.restore();
}
update();
</script>