| <!-- 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> |
