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
79 lines (59 loc) • 2.55 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: Beizer solve</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: isVec2Inside</h1>
<canvas id="canvas" width="640" height="480" style="border: 1px solid red;"></canvas>
<p>Move the mouse inside the polygons, should get green :)</p>
</body>
</html>
<script>
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
mouse = [0, 0];
require("js-2dmath").globalize(window);
function getMousePosition(mouse, e) {
if (e.pageX != undefined && e.pageY != undefined) {
mouse[0] = e.pageX;
mouse[1] = e.pageY;
}
else {
mouse[0] = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
mouse[1] = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
mouse[0] -= canvas.offsetLeft;
mouse[1] -= canvas.offsetTop;
}
canvas.addEventListener("mousemove", function(e) {
getMousePosition(mouse, e);
}, false);
var tri = Triangle.create(50, 0, 50, 50, 25, 50),
rect = Rectangle.create(75, 75, 100, 100),
circle = Circle.create(200, 50, 40),
line = Line2.create(300, 150, -1),
seg2 = Segment2.create(50, 300, 100, 300),
poly = Polygon.create([350, 350], [375, 375], [350, 300]),
poly2 = Polygon.create([250, 250], [250, 275], [275, 250], [275, 225]);
function update() {
ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
window.requestAnimFrame(update);
Draw.vec2(ctx, mouse, "green");
Draw.line2(ctx, line, Line2.isVec2Inside(line, mouse) ? "green" : "red", 150);
Draw.polygon(ctx, tri, Triangle.isVec2Inside(tri, mouse) ? "green" : "red");
Draw.rectangle(ctx, rect, Rectangle.isVec2Inside(rect, mouse) ? "green" : "red");
Draw.circle(ctx, circle, Circle.isVec2Inside(circle, mouse) ? "green" : "red");
Draw.segment2(ctx, seg2, Segment2.isVec2Inside(seg2, mouse) ? "green" : "red");
Draw.polygon(ctx, poly, Polygon.isVec2Inside(poly, mouse) ? "green" : "red");
Draw.polygon(ctx, poly2, Polygon.isVec2Inside(poly2, mouse) ? "green" : "red");
ctx.restore();
}
window.requestAnimFrame(update);
</script>