experimental/Intersection/bc.htm

<!-- 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 id="quad21a">
bezier_clip q1=(0,0 1,0 0,2) q2=(0.5,0.25 0.5,0.5 0,1) minT=0 maxT=1
</div>
<div id="quad21b">
bezier_clip q1=(0.5,0.25 0.5,0.375 0.375,0.5625) q2=(0,0 1,0 0,2) minT=0.3 maxT=0.78125
</div>
<div id="quad21c">
bezier_clip q1=(0.42,0.18 0.6125,0.46875 0.341796875,1.22070312) q2=(0.5,0.25 0.5,0.375 0.375,0.5625) minT=0 maxT=0.926710098
</div>
<div id="quad21d">
bezier_clip q1=(0.5,0.25 0.5,0.307919381 0.473162762,0.379257381) q2=(0.42,0.18 0.6125,0.46875 0.341796875,1.22070312) minT=0.187231244 maxT=0.729263299
</div>
<div id="quad21e">
bezier_clip q1=(0.475846194,0.304363878 0.53317904,0.507883959 0.454423387,0.847492538) q2=(0.5,0.25 0.5,0.307919381 0.473162762,0.379257381) minT=0 maxT=1
</div>
<div id="quad21f">
bezier_clip q1=(0.493290691,0.311274036 0.486581381,0.343588381 0.473162762,0.379257381) q2=(0.475846194,0.304363878 0.53317904,0.507883959 0.454423387,0.847492538) minT=0.0828748517 maxT=0.150086861
</div>

<div id="quad21g"> 
(gdb) p smaller
$1 = {{
    x = 0.48441440743366754, 
    y = 0.33903196011243797
  }, {
    x = 0.48750982503868118, 
    y = 0.35346899178071778
  }, {
    x = 0.48999046908865357, 
    y = 0.368520797004039
  }}
(gdb) p larger
$2 = {{
    x = 0.49329069058425024, 
    y = 0.31127403581536672
  }, {
    x = 0.48658138116850047, 
    y = 0.34358838107698753
  }, {
    x = 0.47316276233700094, 
    y = 0.37925738104648321
  }}
</div>

<div id="quad36">
(gdb) p fQ
$2 = {{
    x = 1.8883839294261275, 
    y = 2.1108590606904345
  }, {
    x = 1.888463903363252, 
    y = 2.1111576060205435
  }, {
    x = 1.8885438199983176, 
    y = 2.1114561800016824
  }}
(gdb) p rh.fQ
$3 = {{
    x = 1.8883839294260976, 
    y = 2.1108590606903377
  }, {
    x = 1.8886366953645748, 
    y = 2.1109850143489544
  }, {
    x = 1.8888888888888888, 
    y = 2.1111111111111112
  }}
(gdb) 
</div>

<div id="quad37">
 {{x = 360.048828125, y = 229.2578125}, {x = 360.048828125, y = 224.4140625}, {x = 362.607421875, y = 221.3671875}}
 {{x = 362.607421875, y = 221.3671875}, {x = 365.166015625, y = 218.3203125}, {x = 369.228515625, y = 218.3203125}}
</div>

<div id="quad38">
$2 = {{fX = 369.969421, fY = 137.94809}, {fX = 383.982849, fY = 121.260353}, {fX = 406.233154, fY = 121.260353}}
$4 = {{fX = 406.232788, fY = 121.260353}, {fX = 409.441956, fY = 121.260353}, {fX = 412.972046, fY = 121.795212}}
</div>

<div id="quad39">
{{x = 406.233154296875, y = 121.26035308837891}, {x = 406.23153587045397, y = 121.26035308837891}, {x = 406.22991748761177, y = 121.26035317666889}}, 
{{x = 406.23295158013377, y = 121.26035308872596}, {x = 406.2328698329315, y = 121.26035308837889}, {x = 406.2327880859375, y = 121.26035308837891}},
</div>

</div>

<script type="text/javascript">

var testDivs = [
    quad56,
    quad39,
    quad38,
    quad37,
    quad36,
    quad21g,
    quad21a,          
    quad21b,
    quad21c,
    quad21d,
    quad21e,
    quad21f,
    clip1,
];

var scale, columns, rows, xStart, yStart;

var ticks = 10;
var at_x = 13 + 0.5;
var at_y = 13 + 0.5;
var init_decimal_places = 1; // make this 3 to show more precision
var decimal_places;
var tests = [];
var testTitles = [];
var testIndex = 0;
var ctx;
var fat1 = true;
var fat2 = false;
var ctl1 = true;
var ctl2 = false;
var ctlPts1 = true;
var ctlPts2 = false;
var minScale = 1;
var subscale = 1;

function parse(test, title) {
    var curveStrs = test.split("{{");
    if (curveStrs.length == 1)
        curveStrs = test.split("=(");
    var pattern = /[a-z$=]?-?\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]);
        }
    }
    subscale = 1;
    decimal_places = init_decimal_places;
    if (xmax != xmin && ymax != ymin) {
        while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) {
            subscale *= 10;
            decimal_places += 1;
     //       if (subscale > 100000) {
     //           break;
     //       }
        }
    }
    columns = Math.ceil(xmax * subscale) - Math.floor(xmin * subscale) + 1;
    rows = Math.ceil(ymax * subscale) - Math.floor(ymin * subscale) + 1;
    
    xStart = Math.floor(xmin * subscale) / subscale;
    yStart = Math.floor(ymin * subscale) / subscale;
    var hscale = ctx.canvas.width / columns / ticks;
    var vscale = ctx.canvas.height / rows / ticks;
    minScale = Math.floor(Math.min(hscale, vscale));
    scale = minScale * subscale;
 //   while (columns < 1000 && rows < 1000) {
  //      columns *= 2;
 //       rows *= 2;
 //   }
}

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 * minScale);
        ctx.lineTo(_at_x + unit * columns, _at_y + i * minScale);
        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 * minScale, _at_y + 0);
        ctx.lineTo(_at_x + i * minScale, _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 = xStart + i / subscale; 
        ctx.fillText(num.toFixed(decimal_places), xoffset + num * unit - 5, 10);
    }
    for (i = 0; i <= rows; i += (1 / ticks))
    {
        num = yStart + i / subscale; 
        ctx.fillText(num.toFixed(decimal_places), 0, yoffset + num * unit + 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 curve 
    if (fat1)
        drawFat(test[0], xoffset, yoffset, unit);
    if (fat2)
        drawFat(test[1], xoffset, yoffset, unit);
    if (ctl1)
        drawCtl(test[0], xoffset, yoffset, unit);
    if (ctl2)
        drawCtl(test[1], xoffset, yoffset, unit);
    if (ctlPts1)
        drawCtlPts(test[0], xoffset, yoffset, unit);
    if (ctlPts2)
        drawCtlPts(test[1], xoffset, yoffset, unit);
}

function drawCtl(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[2] * unit, yoffset + curve[3] * unit);
    ctx.lineTo(xoffset + curve[4] * unit, yoffset + curve[5] * unit);
    ctx.stroke();
}

function drawCtlPts(curve, xoffset, yoffset, unit) {
    drawPoint(curve[0], curve[1], xoffset, yoffset, unit);
    drawPoint(curve[2], curve[3], xoffset, yoffset, unit);
    drawPoint(curve[4], curve[5], 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 'c':
        ctl2 ^= true;
        if (ctl2 == false)
            ctl1 ^= true;
        drawTop();
        break;
    case 'd':
        ctlPts2 ^= true;
        if (ctlPts2 == false)
            ctlPts1 ^= true;
        drawTop();
        break;
    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>