aboutsummaryrefslogtreecommitdiffhomepage
path: root/experimental/Intersection/bc.htm
diff options
context:
space:
mode:
authorGravatar caryclark@google.com <caryclark@google.com@2bbb7eff-a529-9590-31e7-b0007b416f81>2012-08-28 20:44:43 +0000
committerGravatar caryclark@google.com <caryclark@google.com@2bbb7eff-a529-9590-31e7-b0007b416f81>2012-08-28 20:44:43 +0000
commita7e483d130a65833e4c0d4abb4c2f13a9ce7703b (patch)
tree3bb56d6e49536d454f5247ea96d1d0b153680272 /experimental/Intersection/bc.htm
parent8b6d6286b6caf3b72ad639d9c721f3afdb3cc936 (diff)
shape ops work in progress
working on quad/quad intersection git-svn-id: http://skia.googlecode.com/svn/trunk@5326 2bbb7eff-a529-9590-31e7-b0007b416f81
Diffstat (limited to 'experimental/Intersection/bc.htm')
-rw-r--r--experimental/Intersection/bc.htm301
1 files changed, 301 insertions, 0 deletions
diff --git a/experimental/Intersection/bc.htm b/experimental/Intersection/bc.htm
new file mode 100644
index 0000000000..684f1c0796
--- /dev/null
+++ b/experimental/Intersection/bc.htm
@@ -0,0 +1,301 @@
+<!-- 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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-20 01:55:15 +0000