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
71 lines (54 loc) • 1.67 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: Transitions</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: Transitions</h1>
<canvas id="canvas" width="1000" height="2400" style="border: 1px solid red;"></canvas>
</body>
</html>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "12pt Consolas";
require("js-2dmath").globalize(window);
var t,
c = 0, // do not show linear :)
sx,
sy;
Transitions["cubic"] = Transitions.createCubic(0.25, 0.25, 0.5, 0.5);
Transitions["quadric"] = Transitions.createQuadric(0.25, 0.25, 0.5, 0.5);
for (t in Transitions) {
if (
t === "create" ||
t === "LINK_CHAIN" ||
t === "LINK_STOP" ||
t === "LINK_IGNORE" ||
t === "LINK_CANCEL" ||
t === "animate" ||
t === "createCubic" ||
t === "createQuadric" ||
t === "tween"
) {
continue;
}
ctx.save();
console.log(t);
ctx.beginPath();
sx = (c % 4) * 200;
sy = Math.floor(c / 4) * 200;
ctx.fillText(t, sx + 18, sy + 18);
ctx.moveTo(sx + 25, sy + 25);
for (i = 0; i <= 1.05; i+= 0.05) {
ctx.lineTo((sx + 25) + i * 150, (sy + 25) + Transitions[t](i) * 150);
}
ctx.stroke();
ctx.restore();
++c;
}
</script>