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
103 lines (68 loc) • 4.09 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="../dist/js-2dmath-browser.min.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(25, 25); // center
Draw.cartesianAxis(ctx, 640, 16); // coordinates
//
// --- CODE ---
//
function draw_test(draw1, val1, draw2, val2, int_fn) {
var r = int_fn(val1, val2, true, true),
i;
console.log("result", r);
draw1(ctx, val1, "blue");
if (r.points && r.points.length) {
draw2(ctx, val2, "green");
for(i = 0; i < r.points.length; ++i) {
Draw.vec2(ctx, r.points[i], "red", 4);
}
} else if (r.segments && r.segments.length) {
draw2(ctx, val2, "green");
for(i = 0; i < r.segments.length; ++i) {
Draw.segment2(ctx, r.segments[i], "red");
}
} else {
draw2(ctx, val2, "cyan");
}
}
draw_test(Draw.circle, Circle.create(200, 200, 20), Draw.aabb2, AABB2.create(180, 180, 220, 220), Intersection.circle_bb2);
draw_test(Draw.circle, Circle.create(300, 200, 20), Draw.aabb2, AABB2.create(280, 190, 320, 210), Intersection.circle_bb2);
draw_test(Draw.circle, Circle.create(400, 200, 20), Draw.aabb2, AABB2.create(375, 160, 415, 220), Intersection.circle_bb2);
draw_test(Draw.circle, Circle.create(50, 200, 20), Draw.segment2, Segment2.create(10, 200, 80, 200), Intersection.circle_segment2);
draw_test(Draw.circle, Circle.create(110, 200, 20), Draw.segment2, Segment2.create(110, 200, 140, 200), Intersection.circle_segment2);
// test case
// draw_test(Draw.circle, Circle.create(110, 200, 20), Draw.segment2, Segment2.create(110, 220, 140, 200), Intersection.circle_segment2);
draw_test(Draw.circle, Circle.create(35, 100, 20), Draw.circle, Circle.create(35, 100, 30), Intersection.circle_circle);
draw_test(Draw.circle, Circle.create(110, 100, 40), Draw.circle, Circle.create(110, 100, 20), Intersection.circle_circle);
draw_test(Draw.circle, Circle.create(190, 100, 20), Draw.circle, Circle.create(200, 100, 20), Intersection.circle_circle);
draw_test(Draw.circle, Circle.create(250, 100, 20), Draw.circle, Circle.create(250, 90, 20), Intersection.circle_circle);
draw_test(Draw.circle, Circle.create(300, 80, 20), Draw.circle, Circle.create(300, 120, 20), Intersection.circle_circle);
draw_test(Draw.rectangle, Rectangle.create(50, 300, 80, 330), Draw.rectangle, Rectangle.create(55, 305, 90, 340), Intersection.rectangle_rectangle);
draw_test(Draw.rectangle, Rectangle.create(150, 300, 140, 320), Draw.rectangle, Rectangle.create(145, 295, 130, 310), Intersection.rectangle_rectangle);
draw_test(Draw.rectangle, Rectangle.create(200, 300, 230, 330), Draw.rectangle, Rectangle.create(190, 310, 240, 320), Intersection.rectangle_rectangle);
draw_test(Draw.rectangle, Rectangle.create(250, 300, 280, 330), Draw.rectangle, Rectangle.create(260, 290, 270, 340), Intersection.rectangle_rectangle);
draw_test(Draw.segment2, Segment2.create(50, 425, 100, 425), Draw.segment2, Segment2.create(75, 400, 75, 450), Intersection.segment2_segment2);
draw_test(Draw.segment2, Segment2.create(125, 425, 150, 425), Draw.segment2, Segment2.create(125, 400, 150, 450), Intersection.segment2_segment2);
draw_test(Draw.segment2, Segment2.create(300, 425, 350, 425), Draw.segment2, Segment2.create(325, 425, 400, 425), Intersection.segment2_segment2);
</script>