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
109 lines (86 loc) • 3 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: Some Vec2 functions in action</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: Some Vec2 functions in action</h1>
<canvas id="canvas" width="640" height="480" style="border: 1px solid red;"></canvas>
<canvas id="canvas2" 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
Draw.cartesianAxis(ctx, 320, 16); // coordinates
var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas2.getContext("2d");
Draw.invertAxis(canvas2, ctx2); // y-up
ctx2.translate(canvas2.width * 0.5, canvas2.height * 0.5); // center
Draw.cartesianAxis(ctx2, 320, 16); // coordinates
console.log(ctx2);
//
//
//
var v = Vec2.create(50, 50),
a = Vec2.create(100, 75),
b = Vec2.create(100, 0),
aux = [0, 0];
Draw.vec2(ctx, v, "red");
Draw.text(ctx, "vec2", Vec2.add([0, 0], v, [7,7]));
console.log(v);
Vec2.perp(aux, v);
console.log(aux);
Draw.vec2(ctx, aux, "blue");
Draw.text(ctx, "prep", Vec2.add([0, 0], aux, [7,7]));
Vec2.rperp(aux, v);
console.log(aux);
Draw.vec2(ctx, aux, "green");
Draw.text(ctx, "rperp", Vec2.add([0, 0], aux, [7,7]));
Draw.vec2(ctx, a, "red");
Draw.text(ctx, "a", Vec2.add([0, 0], a, [7,7]));
Draw.vec2(ctx, b, "red");
Draw.text(ctx, "b", Vec2.add([0, 0], b, [7,7]));
Vec2.interpolate(aux, a, b, 2)
console.log(aux);
Draw.vec2(ctx, aux, "red");
Draw.text(ctx, "interpolate(a,b,2)", Vec2.add([0, 0], aux, [7,7]))
Vec2.interpolate(aux, a, b, 3)
console.log(aux);
Draw.vec2(ctx, aux, "red");
Draw.text(ctx, "interpolate(a,b,3)", Vec2.add([0, 0], aux, [7,7]))
Vec2.interpolate(aux, b, a, 2)
console.log(aux);
Draw.vec2(ctx, aux, "red");
Draw.text(ctx, "interpolate(b,a,2)", Vec2.add([0, 0], aux, [7,7]))
aux = [50, 50];
Draw.vec2(ctx2, aux, "red");
var angle = Vec2.angleTo([0, 0], aux) * Math.RAD_TO_DEG;
console.log(Math.RAD_TO_DEG);
console.log(Vec2.angleTo([100, 0], aux));
console.log(angle);
Draw.text(ctx2, "angleTo=" + angle.toFixed(2), Vec2.add([0, 0], aux, [7,7]))
var v1 = [25, 25];
var v2 = [0, 1];
var rotv = Vec2.rotateVec([0, 0], v1, v2);
Draw.vec2(ctx2, v1, "blue");
Draw.vec2(ctx2, v2, "blue");
Draw.vec2(ctx2, rotv, "blue");
Draw.text(ctx2, "rotateVec()", rotv)
console.log(rotv);
var refv = Vec2.reflect([0, 0], v1, v2);
Draw.text(ctx2, "reflect()", refv)
console.log(refv);
</script>