302 lines
8.0 KiB
HTML
302 lines
8.0 KiB
HTML
|
<!-- bezier clip visualizer -->
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<div style="height:0">
|
||
|
|
|
||
|
|
<div id="clip1">
|
||
|
|
(gdb) p smaller
|
||
|
|
$2 = {{
|
||
|
|
x = 0.91292418204644155,
|
||
|
|
y = 0.41931201426549197
|
||
|
|
}, {
|
||
|
|
x = 0.70491388044579517,
|
||
|
|
y = 0.64754305977710236
|
||
|
|
}, {
|
||
|
|
x = 0,
|
||
|
|
y = 1
|
||
|
|
}}
|
||
|
|
(gdb) p larger
|
||
|
|
$3 = {{
|
||
|
|
x = 0.21875,
|
||
|
|
y = 0.765625
|
||
|
|
}, {
|
||
|
|
x = 0.125,
|
||
|
|
y = 0.875
|
||
|
|
}, {
|
||
|
|
x = 0,
|
||
|
|
y = 1
|
||
|
|
}}
|
||
|
|
(gdb) p distance2y
|
||
|
|
$1 = {{
|
||
|
|
x = 0,
|
||
|
|
y = 0.080355482722450078
|
||
|
|
}, {
|
||
|
|
x = 0.5,
|
||
|
|
y = 0.038383741101172597
|
||
|
|
}, {
|
||
|
|
x = 1,
|
||
|
|
y = 0
|
||
|
|
}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
var testDivs = [
|
||
|
|
clip1,
|
||
|
|
];
|
||
|
|
|
||
|
|
var scale, columns, rows, xStart, yStart;
|
||
|
|
|
||
|
|
var ticks = 0.1;
|
||
|
|
var at_x = 13 + 0.5;
|
||
|
|
var at_y = 13 + 0.5;
|
||
|
|
var decimal_places = 0; // make this 3 to show more precision
|
||
|
|
|
||
|
|
var tests = [];
|
||
|
|
var testTitles = [];
|
||
|
|
var testIndex = 0;
|
||
|
|
var ctx;
|
||
|
|
var fat1 = true;
|
||
|
|
var fat2 = false;
|
||
|
|
|
||
|
|
function parse(test, title) {
|
||
|
|
var curveStrs = test.split("{{");
|
||
|
|
var pattern = /\$?-?\d+\.*\d*/g;
|
||
|
|
var curves = [];
|
||
|
|
for (var c in curveStrs) {
|
||
|
|
var curveStr = curveStrs[c];
|
||
|
|
var points = curveStr.match(pattern);
|
||
|
|
var pts = [];
|
||
|
|
for (var wd in points) {
|
||
|
|
var num = parseFloat(points[wd]);
|
||
|
|
if (isNaN(num)) continue;
|
||
|
|
pts.push(num);
|
||
|
|
}
|
||
|
|
if (pts.length > 0)
|
||
|
|
curves.push(pts);
|
||
|
|
}
|
||
|
|
if (curves.length == 2) {
|
||
|
|
tests.push(curves);
|
||
|
|
testTitles.push(title);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function init(test) {
|
||
|
|
var canvas = document.getElementById('canvas');
|
||
|
|
if (!canvas.getContext) return;
|
||
|
|
canvas.width = window.innerWidth - at_x;
|
||
|
|
canvas.height = window.innerHeight - at_y;
|
||
|
|
ctx = canvas.getContext('2d');
|
||
|
|
var xmin = Infinity;
|
||
|
|
var xmax = -Infinity;
|
||
|
|
var ymin = Infinity;
|
||
|
|
var ymax = -Infinity;
|
||
|
|
for (var curves in test) {
|
||
|
|
var curve = test[curves];
|
||
|
|
var last = curve.length;
|
||
|
|
for (var idx = 0; idx < last; idx += 2) {
|
||
|
|
xmin = Math.min(xmin, curve[idx]);
|
||
|
|
xmax = Math.max(xmax, curve[idx]);
|
||
|
|
ymin = Math.min(ymin, curve[idx + 1]);
|
||
|
|
ymax = Math.max(ymax, curve[idx + 1]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var subscale = 1;
|
||
|
|
while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) {
|
||
|
|
subscale *= 10;
|
||
|
|
}
|
||
|
|
columns = Math.ceil(xmax) - Math.floor(xmin) + 1;
|
||
|
|
rows = Math.ceil(ymax) - Math.floor(ymin) + 1;
|
||
|
|
xStart = Math.floor(xmin);
|
||
|
|
yStart = Math.floor(ymin);
|
||
|
|
var hscale = ctx.canvas.width / columns / ticks;
|
||
|
|
var vscale = ctx.canvas.height / rows / ticks;
|
||
|
|
scale = Math.floor(Math.min(hscale, vscale)) * subscale;
|
||
|
|
}
|
||
|
|
|
||
|
|
function drawPoint(px, py, xoffset, yoffset, unit) {
|
||
|
|
var label = px.toFixed(decimal_places) + ", " + py.toFixed(decimal_places);
|
||
|
|
var _px = px * unit + xoffset;
|
||
|
|
var _py = py * unit + yoffset;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(_px, _py, 3, 0, Math.PI*2, true);
|
||
|
|
ctx.closePath();
|
||
|
|
ctx.fill();
|
||
|
|
ctx.fillText(label, _px + 5, _py);
|
||
|
|
}
|
||
|
|
|
||
|
|
function draw(test, title, _at_x, _at_y, scale) {
|
||
|
|
ctx.fillStyle = "rgba(0,0,0, 0.1)";
|
||
|
|
ctx.font = "normal 50px Arial";
|
||
|
|
ctx.fillText(title, 50, 50);
|
||
|
|
ctx.font = "normal 10px Arial";
|
||
|
|
|
||
|
|
var unit = scale * ticks;
|
||
|
|
ctx.lineWidth = 1;
|
||
|
|
var i;
|
||
|
|
for (i = 0; i <= rows * ticks; ++i) {
|
||
|
|
ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(_at_x + 0, _at_y + i * scale);
|
||
|
|
ctx.lineTo(_at_x + unit * columns, _at_y + i * scale);
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
for (i = 0; i <= columns * ticks; ++i) {
|
||
|
|
ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(_at_x + i * scale, _at_y + 0);
|
||
|
|
ctx.lineTo(_at_x + i * scale, _at_y + unit * rows);
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
|
||
|
|
var xoffset = xStart * -unit + _at_x;
|
||
|
|
var yoffset = yStart * -unit + _at_y;
|
||
|
|
|
||
|
|
ctx.fillStyle = "rgb(40,80,60)"
|
||
|
|
for (i = 0; i <= columns; i += (1 / ticks))
|
||
|
|
{
|
||
|
|
num = (xoffset - _at_x) / -unit + i;
|
||
|
|
ctx.fillText(num.toFixed(0), i * unit + _at_y - 5, 10);
|
||
|
|
}
|
||
|
|
for (i = 0; i <= rows; i += (1 / ticks))
|
||
|
|
{
|
||
|
|
num = (yoffset - _at_x) / -unit + i;
|
||
|
|
ctx.fillText(num.toFixed(0), 0, i * unit + _at_y + 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
// draw curve 1 and 2
|
||
|
|
var curves, pts;
|
||
|
|
for (curves in test) {
|
||
|
|
var curve = test[curves];
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
|
||
|
|
switch (curve.length) {
|
||
|
|
case 6:
|
||
|
|
ctx.quadraticCurveTo(
|
||
|
|
xoffset + curve[2] * unit, yoffset + curve[3] * unit,
|
||
|
|
xoffset + curve[4] * unit, yoffset + curve[5] * unit);
|
||
|
|
break;
|
||
|
|
case 8:
|
||
|
|
ctx.bezierCurveTo(
|
||
|
|
xoffset + curve[2] * unit, yoffset + curve[3] * unit,
|
||
|
|
xoffset + curve[4] * unit, yoffset + curve[5] * unit,
|
||
|
|
xoffset + curve[6] * unit, yoffset + curve[7] * unit);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (curves == 2) ctx.strokeStyle = curves ? "red" : "blue";
|
||
|
|
ctx.stroke();
|
||
|
|
ctx.strokeStyle = "rgba(0,0,0, 0.3)";
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
|
||
|
|
ctx.lineTo(xoffset + curve[2] * unit, yoffset + curve[3] * unit);
|
||
|
|
ctx.lineTo(xoffset + curve[4] * unit, yoffset + curve[5] * unit);
|
||
|
|
if (curve.length == 8)
|
||
|
|
ctx.lineTo(xoffset + curve[6] * unit, yoffset + curve[7] * unit);
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
// optionally draw fat lines for cruve
|
||
|
|
if (fat1)
|
||
|
|
drawFat(test[0], xoffset, yoffset, unit);
|
||
|
|
if (fat2)
|
||
|
|
drawFat(test[1], xoffset, yoffset, unit);
|
||
|
|
}
|
||
|
|
|
||
|
|
function drawFat(curve, xoffset, yoffset, unit) {
|
||
|
|
var last = curve.length - 2;
|
||
|
|
ctx.strokeStyle = "rgba(0,0,0, 0.5)";
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
|
||
|
|
ctx.lineTo(xoffset + curve[last] * unit, yoffset + curve[last + 1] * unit);
|
||
|
|
ctx.stroke();
|
||
|
|
// draw line parallel to end points through control points
|
||
|
|
var dx = curve[last] - curve[0];
|
||
|
|
var dy = curve[last + 1] - curve[1];
|
||
|
|
drawParallelLine(curve[2], curve[3], dx, dy, xoffset, yoffset, unit);
|
||
|
|
if (curve.length == 8)
|
||
|
|
drawParallelLine(curve[4], curve[5], dx, dy, xoffset, yoffset, unit);
|
||
|
|
}
|
||
|
|
|
||
|
|
function drawParallelLine(x, y, dx, dy, xoffset, yoffset, unit) {
|
||
|
|
var x1 = x - dx;
|
||
|
|
var y1 = y - dy;
|
||
|
|
var x2 = x + dx;
|
||
|
|
var y2 = y + dy;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(xoffset + x1 * unit, yoffset + y1 * unit);
|
||
|
|
ctx.lineTo(xoffset + x2 * unit, yoffset + y2 * unit);
|
||
|
|
ctx.stroke();
|
||
|
|
}
|
||
|
|
|
||
|
|
function drawTop() {
|
||
|
|
init(tests[testIndex]);
|
||
|
|
redraw();
|
||
|
|
}
|
||
|
|
|
||
|
|
function redraw() {
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||
|
|
ctx.fillStyle="white";
|
||
|
|
ctx.fill();
|
||
|
|
draw(tests[testIndex], testTitles[testIndex], at_x, at_y, scale);
|
||
|
|
}
|
||
|
|
|
||
|
|
function doKeyPress(evt) {
|
||
|
|
var char = String.fromCharCode(evt.charCode);
|
||
|
|
switch (char) {
|
||
|
|
case 'f':
|
||
|
|
fat2 ^= true;
|
||
|
|
if (fat2 == false)
|
||
|
|
fat1 ^= true;
|
||
|
|
drawTop();
|
||
|
|
break;
|
||
|
|
case 'N':
|
||
|
|
testIndex += 9;
|
||
|
|
case 'n':
|
||
|
|
if (++testIndex >= tests.length)
|
||
|
|
testIndex = 0;
|
||
|
|
mouseX = Infinity;
|
||
|
|
drawTop();
|
||
|
|
break;
|
||
|
|
case 'P':
|
||
|
|
testIndex -= 9;
|
||
|
|
case 'p':
|
||
|
|
if (--testIndex < 0)
|
||
|
|
testIndex = tests.length - 1;
|
||
|
|
mouseX = Infinity;
|
||
|
|
drawTop();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleMouseClick() {
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleMouseOver() {
|
||
|
|
}
|
||
|
|
|
||
|
|
function start() {
|
||
|
|
for (i = 0; i < testDivs.length; ++i) {
|
||
|
|
var title = testDivs[i].id.toString();
|
||
|
|
var str = testDivs[i].firstChild.data;
|
||
|
|
parse(str, title);
|
||
|
|
}
|
||
|
|
drawTop();
|
||
|
|
window.addEventListener('keypress', doKeyPress, true);
|
||
|
|
window.onresize = function() {
|
||
|
|
drawTop();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body onLoad="start();">
|
||
|
|
<canvas id="canvas" width="750" height="500"
|
||
|
|
onmousemove="handleMouseOver()"
|
||
|
|
onclick="handleMouseClick()"
|
||
|
|
></canvas >
|
||
|
|
</body>
|
||
|
|
</html>
|