Add bezier demo
This commit is contained in:
parent
f5a53bdcc1
commit
bab3208e61
197
cg/bezier/bezier.js
Normal file
197
cg/bezier/bezier.js
Normal file
@ -0,0 +1,197 @@
|
||||
(function () {
|
||||
function fillCanvas (element, draw) {
|
||||
var canvas = document.createElement("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
|
||||
var windowToCanvas;
|
||||
function resize () {
|
||||
var vw = element.clientWidth;
|
||||
var vh = element.clientHeight;
|
||||
canvas.width = vw;
|
||||
canvas.height = vh;
|
||||
|
||||
var vpMin = Math.min(vw, vh);
|
||||
|
||||
// cartesion coordinates [0, 100] on both x and y axes
|
||||
ctx.setTransform(
|
||||
vpMin / 100, 0,
|
||||
0, -vpMin / 100,
|
||||
(vw - vpMin) / 2, (vh - vpMin) / 2 + vh
|
||||
);
|
||||
windowToCanvas = ctx.getTransform().inverse();
|
||||
}
|
||||
new ResizeObserver(resize).observe(element);
|
||||
resize();
|
||||
|
||||
function render () {
|
||||
draw(ctx, canvas.width, canvas.height, windowToCanvas);
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
render();
|
||||
|
||||
element.appendChild(canvas);
|
||||
}
|
||||
|
||||
const Vec2 = {
|
||||
add: (v1, v2) => [v1[0] + v2[0], v1[1] + v2[1]],
|
||||
sub: (v1, v2) => [v1[0] - v2[0], v1[1] - v2[1]],
|
||||
scale: (s, v) => [s * v[0], s * v[1]],
|
||||
magnitude: (v) => Math.sqrt(v[0] * v[0] + v[1] * v[1]),
|
||||
distance: (v1, v2) => Vec2.magnitude(Vec2.sub(v1, v2)),
|
||||
normalize: (v) => Vec2.scale(1 / Vec2.magnitude(v), v),
|
||||
transform: (m, v) => {
|
||||
return [
|
||||
m.a * v[0] + m.c * v[1] + m.e,
|
||||
m.b * v[1] + m.d * v[1] + m.f
|
||||
];
|
||||
},
|
||||
dot: (v1, v2) => [v1[0] * v2[0] + v1[1] * v2[1]],
|
||||
triangleArea: (p1, p2, p3) => {
|
||||
// Cramers rule for signed area (necessary to get negative lambdas)
|
||||
var [x1, y1] = p1;
|
||||
var [x2, y2] = p2;
|
||||
var [x3, y3] = p3;
|
||||
|
||||
return (x1 * y2 - x1 * y3 - x2 * y1 + x3 * y1 + x2 * y3 - x3 * y2) / 2;
|
||||
}
|
||||
};
|
||||
|
||||
var ptr = null;
|
||||
window.addEventListener("mousemove", function (e) {
|
||||
ptr = [e.clientX, e.clientY];
|
||||
});
|
||||
|
||||
function drawPath (ctx, path) {
|
||||
for (var i = 1; i < path.length; i++) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(path[i - 1][0], path[i - 1][1]);
|
||||
ctx.lineTo(path[i][0], path[i][1]);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
for (var i = 0; i < path.length; i++) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(path[i][0], path[i][1], 1, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function drawCurve (ctx, curve, u, depth) {
|
||||
var pointsOnCurve = drawPolygons(curve, u, depth);
|
||||
pointsOnCurve.splice(0, 0, curve[0]);
|
||||
pointsOnCurve.push(curve[curve.length - 1]);
|
||||
|
||||
ctx.fillStyle = "blue";
|
||||
ctx.strokeStyle = "blue";
|
||||
ctx.lineWidth = 0.5;
|
||||
drawPath(ctx, pointsOnCurve, true);
|
||||
|
||||
function drawPolygons (curve, u, depth) {
|
||||
if (depth <= 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
ctx.fillStyle = "#555";
|
||||
ctx.strokeStyle = "#555";
|
||||
ctx.lineWidth = 0.25;
|
||||
drawPath(ctx, curve, true);
|
||||
|
||||
var b = [curve];
|
||||
for (var i = 1; i < curve.length; i++) {
|
||||
var midpoints = [];
|
||||
for (var k = 0; k < curve.length - i; k++) {
|
||||
midpoints.push(Vec2.add(
|
||||
Vec2.scale(u, b[i - 1][k]),
|
||||
Vec2.scale(1 - u, b[i - 1][k + 1])
|
||||
));
|
||||
}
|
||||
drawPath(ctx, midpoints);
|
||||
b.push(midpoints);
|
||||
}
|
||||
|
||||
var pointsOnCurve = [];
|
||||
var c0 = b.map(function (bi) {
|
||||
return bi[0];
|
||||
});
|
||||
pointsOnCurve = pointsOnCurve.concat(drawPolygons(c0, u, depth - 1));
|
||||
|
||||
pointsOnCurve.push(b[b.length - 1][0]);
|
||||
|
||||
var c1 = b.map(function (bi) {
|
||||
return bi[bi.length - 1];
|
||||
});
|
||||
pointsOnCurve = pointsOnCurve.concat(drawPolygons(c1, 1 - u, depth - 1).toReversed());
|
||||
|
||||
return pointsOnCurve;
|
||||
}
|
||||
}
|
||||
|
||||
var selected = 0;
|
||||
var curve = [
|
||||
[10, 10],
|
||||
[10, 90],
|
||||
[90, 10],
|
||||
[90, 90]
|
||||
];
|
||||
var depth = 5;
|
||||
|
||||
window.addEventListener("keydown", function (e) {
|
||||
switch (e.key) {
|
||||
case "j":
|
||||
selected = (selected + 1) % curve.length;
|
||||
break;
|
||||
case "k":
|
||||
selected = (curve.length + selected - 1) % curve.length;
|
||||
break;
|
||||
case "ArrowLeft":
|
||||
curve[selected][0]--;
|
||||
break;
|
||||
case "ArrowRight":
|
||||
curve[selected][0]++;
|
||||
break;
|
||||
case "ArrowUp":
|
||||
curve[selected][1]++;
|
||||
break;
|
||||
case "ArrowDown":
|
||||
curve[selected][1]--;
|
||||
break;
|
||||
case "h":
|
||||
depth = Math.max(0, depth - 1);
|
||||
break;
|
||||
case "l":
|
||||
depth++;
|
||||
break;
|
||||
case "?":
|
||||
document.querySelector(".legend").classList.toggle("--hidden");
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
fillCanvas(document.querySelector(".canvas"), function (ctx, vw, vh, w2c) {
|
||||
var origin = Vec2.transform(w2c, [0, 0]);
|
||||
var omega = Vec2.transform(w2c, [vw, vh]);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(origin[0], origin[1], omega[0] - origin[0], omega[1] - origin[1])
|
||||
|
||||
drawCurve(ctx, curve, 0.5 + 0.45 * Math.cos(Math.PI * 2 * performance.now() / 5000), depth);
|
||||
|
||||
/*
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(curve[0][0], curve[0][1]);
|
||||
ctx.bezierCurveTo(
|
||||
curve[1][0], curve[1][1],
|
||||
curve[2][0], curve[2][1],
|
||||
curve[3][0], curve[3][1]
|
||||
);
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.lineWidth = 0.25;
|
||||
ctx.stroke();
|
||||
*/
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(curve[selected][0], curve[selected][1], 2, 0, Math.PI * 2);
|
||||
ctx.strokeStyle = "green";
|
||||
ctx.lineWidth = 0.5;
|
||||
ctx.stroke();
|
||||
});
|
||||
})();
|
||||
44
cg/bezier/index.html
Normal file
44
cg/bezier/index.html
Normal file
@ -0,0 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>bezier</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
.canvas {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.legend {
|
||||
position: absolute;
|
||||
left: 2em;
|
||||
top: 2em;
|
||||
color: white;
|
||||
border: 1px dashed;
|
||||
padding: 1em;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.legend.--hidden {
|
||||
display: none;
|
||||
}
|
||||
.smol {
|
||||
font-size: .7em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="canvas"></div>
|
||||
<div class="legend">j, k: Select vertex
|
||||
h, l: Select recursion depth
|
||||
<span class="smol">⬅⬆⬇➡</span>: Move selected vertex
|
||||
?: hide/unhide this tooltip</div>
|
||||
<script src="./bezier.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user