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
135 lines (104 loc) • 4.15 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: Demostration of various Intersections</h1>
<canvas id="canvas" width="640" height="480" style="border: 1px solid red;"></canvas>
</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");
Draw.invertAxis(canvas, ctx); // y-up
ctx.translate(canvas.width * 0.5, canvas.height * 0.5); // center
ctx.scale(3, 3); // center
Draw.cartesianAxis(ctx, 640, 16); // coordinates
//
// --- CODE ---
//
/*
var Vec2 = require("../index.js").Vec2,
Intersection = require("../index.js").Intersection,
Circle = require("../index.js").Circle,
Polygon = require("../index.js").Polygon,
GJK = require("../index.js").Collision.GJK.getPolygonPolygon,
EPA = require("../index.js").Collision.EPA,
SAT = require("../index.js").Collision.SAT.getPolygonPolygon,
Response = require("../index.js").Collision.Response;
*/
function cPoly(circle, npoints, initial_angle) {
if (circle) {
this.points = Polygon.fromCircle(circle, npoints, initial_angle);
this.calc();
}
}
cPoly.prototype.calc = function () {
this.edges = Polygon.edges([], this.points);
this.normals = Polygon.normals([], this.edges);
}
cPoly.prototype.translate = function (vec2) {
Polygon.translate(this.points, this.points, vec2);
Polygon.translate(this.edges, this.edges, vec2);
}
//setup
var A = new cPoly(Circle.create(0, 0, 25), 8, 0),
B = new cPoly(Circle.create(0, 0, 25), 8, 0),
positions = [
[0, 45],
//[-5, -5],
//[5, -5],
//[5, -5]
];
positions.forEach(function(pos) {
B.translate(pos);
Draw.polygon(ctx, A.points, "blue");
Draw.polygon(ctx, B.points, "green");
/*
var intersection = Intersection.polygon_polygon(A.points, B.points);
intersection.points.forEach(function(p) {
Draw.vec2(ctx, p, "red");
});
*/
var epa_response = Collision.Response.create(),
sat_response = Collision.Response.create();
console.log("");
console.log("");
console.log("");
console.log(pos);
console.log("");
var gjk_result = Collision.GJK.getPolygonPolygon(A.points, B.points);
console.log("GJK", gjk_result);
Draw.polygon(ctx, gjk_result.simplex, "rgba(1, 0, 0, 0.25)", true);
Collision.EPA(epa_response, A.points, B.points, gjk_result.simplex);
console.log("EPA", epa_response);
//Draw.vec2dir(ctx, intersection.points[1], epa_response.mtv, epa_response.depth, "gray");
console.log(Collision.SAT.getPolygonPolygon(sat_response, A.points, A.normals, [0, 0], B.points, B.normals, [0, 0]));
console.log("SAT", sat_response);
//Draw.vec2dir(ctx, intersection.points[0], sat_response.mtv, sat_response.depth, "gray");
//A.translate(Vec2.scale([], sat_response.mtv, -sat_response.depth));
//Draw.polygon(ctx, A.points, "yellow");
console.log(A.points, B.points);
//var edge_clipping = Collision.Manifold.EdgeClipping(A.points, B.points, [0.5, 0.5]);
var edge_clipping = Collision.Manifold.EdgeClipping(A.points, B.points, epa_response.mtv);
console.log("EDGE", edge_clipping);
Draw.polygon(ctx, edge_clipping.incidentEdge, "red");
Draw.polygon(ctx, edge_clipping.referenceEdge, "red");
// draw the mtv offset
A.translate(Vec2.scale(epa_response.mtv, epa_response.mtv, -epa_response.depth));
Draw.polygon(ctx, A.points, "rgba(0, 0, 1, 0.5)");
A.translate(Vec2.negate(epa_response.normal, epa_response.normal));
B.translate(Vec2.negate(pos, pos));
});
</script>