Index: experimental/Intersection/hg.htm |
diff --git a/experimental/Intersection/hg.htm b/experimental/Intersection/hg.htm |
deleted file mode 100644 |
index 32f49a74469550f082357b46bc506699fabe2c48..0000000000000000000000000000000000000000 |
--- a/experimental/Intersection/hg.htm |
+++ /dev/null |
@@ -1,649 +0,0 @@ |
-<html> |
-<head> |
-<div style="height:0"> |
- |
-<div id="cubic1"> |
-{{3.13,2.74}, {1.08,4.62}, {3.71,0.94}, {2.01,3.81}} |
-{{6.71,3.14}, {7.99,2.75}, {8.27,1.96}, {6.35,3.57}} |
-{{9.45,10.67}, {10.05,5.78}, {13.95,7.46}, {14.72,5.29}} |
-{{3.34,8.98}, {1.95,10.27}, {3.76,7.65}, {4.96,10.64}} |
-</div> |
- |
-</div> |
- |
-<script type="text/javascript"> |
- |
-var testDivs = [ |
- cubic1, |
-]; |
- |
-var scale, columns, rows, xStart, yStart; |
- |
-var ticks = 10; |
-var at_x = 13 + 0.5; |
-var at_y = 23 + 0.5; |
-var decimal_places = 3; |
-var tests = []; |
-var testTitles = []; |
-var testIndex = 0; |
-var ctx; |
-var minScale = 1; |
-var subscale = 1; |
-var curveT = -1; |
-var xmin, xmax, ymin, ymax; |
- |
-var mouseX, mouseY; |
-var mouseDown = false; |
- |
-var draw_deriviatives = false; |
-var draw_endpoints = true; |
-var draw_hodo = false; |
-var draw_hodo2 = false; |
-var draw_hodo_origin = true; |
-var draw_midpoint = false; |
-var draw_tangents = true; |
-var draw_sequence = true; |
- |
-function parse(test, title) { |
- var curveStrs = test.split("{{"); |
- if (curveStrs.length == 1) |
- curveStrs = test.split("=("); |
- var pattern = /[a-z$=]?-?\d+\.*\d*e?-?\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 > 2) |
- curves.push(pts); |
- } |
- if (curves.length >= 1) { |
- tests.push(curves); |
- testTitles.push(title); |
- } |
-} |
- |
-function init(test) { |
- var canvas = document.getElementById('canvas'); |
- if (!canvas.getContext) return; |
- canvas.width = window.innerWidth - 20; |
- canvas.height = window.innerHeight - 20; |
- ctx = canvas.getContext('2d'); |
- xmin = Infinity; |
- xmax = -Infinity; |
- ymin = Infinity; |
- 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]); |
- } |
- } |
- xmin -= 1; |
- var testW = xmax - xmin; |
- var testH = ymax - ymin; |
- subscale = 1; |
- while (testW * subscale < 0.1 && testH * subscale < 0.1) { |
- subscale *= 10; |
- } |
- while (testW * subscale > 10 && testH * subscale > 10) { |
- subscale /= 10; |
- } |
- calcFromScale(); |
-} |
- |
-function hodograph(cubic) { |
- var hodo = []; |
- hodo[0] = 3 * (cubic[2] - cubic[0]); |
- hodo[1] = 3 * (cubic[3] - cubic[1]); |
- hodo[2] = 3 * (cubic[4] - cubic[2]); |
- hodo[3] = 3 * (cubic[5] - cubic[3]); |
- hodo[4] = 3 * (cubic[6] - cubic[4]); |
- hodo[5] = 3 * (cubic[7] - cubic[5]); |
- return hodo; |
-} |
- |
-function hodograph2(cubic) { |
- var quad = hodograph(cubic); |
- var hodo = []; |
- hodo[0] = 2 * (quad[2] - quad[0]); |
- hodo[1] = 2 * (quad[3] - quad[1]); |
- hodo[2] = 2 * (quad[4] - quad[2]); |
- hodo[3] = 2 * (quad[5] - quad[3]); |
- return hodo; |
-} |
- |
-function quadraticRootsReal(A, B, C, s) { |
- if (A == 0) { |
- if (B == 0) { |
- s[0] = 0; |
- return C == 0; |
- } |
- s[0] = -C / B; |
- return 1; |
- } |
- /* normal form: x^2 + px + q = 0 */ |
- var p = B / (2 * A); |
- var q = C / A; |
- var p2 = p * p; |
- if (p2 < q) { |
- return 0; |
- } |
- var sqrt_D = 0; |
- if (p2 > q) { |
- sqrt_D = sqrt(p2 - q); |
- } |
- s[0] = sqrt_D - p; |
- s[1] = -sqrt_D - p; |
- return 1 + s[0] != s[1]; |
-} |
- |
-function add_valid_ts(s, realRoots, t) { |
- var foundRoots = 0; |
- for (var index = 0; index < realRoots; ++index) { |
- var tValue = s[index]; |
- if (tValue >= 0 && tValue <= 1) { |
- for (var idx2 = 0; idx2 < foundRoots; ++idx2) { |
- if (t[idx2] != tValue) { |
- t[foundRoots++] = tValue; |
- } |
- } |
- } |
- } |
- return foundRoots; |
-} |
- |
-function quadraticRootsValidT(a, b, c, t) { |
- var s = []; |
- var realRoots = quadraticRootsReal(A, B, C, s); |
- var foundRoots = add_valid_ts(s, realRoots, t); |
- return foundRoots != 0; |
-} |
- |
-function find_cubic_inflections(cubic, tValues) |
-{ |
- var Ax = src[2] - src[0]; |
- var Ay = src[3] - src[1]; |
- var Bx = src[4] - 2 * src[2] + src[0]; |
- var By = src[5] - 2 * src[3] + src[1]; |
- var Cx = src[6] + 3 * (src[2] - src[4]) - src[0]; |
- var Cy = src[7] + 3 * (src[3] - src[5]) - src[1]; |
- return quadraticRootsValidT(Bx * Cy - By * Cx, (Ax * Cy - Ay * Cx), |
- Ax * By - Ay * Bx, tValues); |
-} |
- |
-function dx_at_t(cubic, t) { |
- var one_t = 1 - t; |
- var a = cubic[0]; |
- var b = cubic[2]; |
- var c = cubic[4]; |
- var d = cubic[6]; |
- return 3 * ((b - a) * one_t * one_t + 2 * (c - b) * t * one_t + (d - c) * t * t); |
-} |
- |
-function dy_at_t(cubic, t) { |
- var one_t = 1 - t; |
- var a = cubic[1]; |
- var b = cubic[3]; |
- var c = cubic[5]; |
- var d = cubic[7]; |
- return 3 * ((b - a) * one_t * one_t + 2 * (c - b) * t * one_t + (d - c) * t * t); |
-} |
- |
-function x_at_t(cubic, t) { |
- var one_t = 1 - t; |
- var one_t2 = one_t * one_t; |
- var a = one_t2 * one_t; |
- var b = 3 * one_t2 * t; |
- var t2 = t * t; |
- var c = 3 * one_t * t2; |
- var d = t2 * t; |
- return a * cubic[0] + b * cubic[2] + c * cubic[4] + d * cubic[6]; |
-} |
- |
-function y_at_t(cubic, t) { |
- var one_t = 1 - t; |
- var one_t2 = one_t * one_t; |
- var a = one_t2 * one_t; |
- var b = 3 * one_t2 * t; |
- var t2 = t * t; |
- var c = 3 * one_t * t2; |
- var d = t2 * t; |
- return a * cubic[1] + b * cubic[3] + c * cubic[5] + d * cubic[7]; |
-} |
- |
-function calcFromScale() { |
- xStart = Math.floor(xmin * subscale) / subscale; |
- yStart = Math.floor(ymin * subscale) / subscale; |
- var xEnd = Math.ceil(xmin * subscale) / subscale; |
- var yEnd = Math.ceil(ymin * subscale) / subscale; |
- var cCelsW = Math.floor(ctx.canvas.width / 10); |
- var cCelsH = Math.floor(ctx.canvas.height / 10); |
- var testW = xEnd - xStart; |
- var testH = yEnd - yStart; |
- var scaleWH = 1; |
- while (cCelsW > testW * scaleWH * 10 && cCelsH > testH * scaleWH * 10) { |
- scaleWH *= 10; |
- } |
- while (cCelsW * 10 < testW * scaleWH && cCelsH * 10 < testH * scaleWH) { |
- scaleWH /= 10; |
- } |
- |
- columns = Math.ceil(xmax * subscale) - Math.floor(xmin * subscale) + 1; |
- rows = Math.ceil(ymax * subscale) - Math.floor(ymin * subscale) + 1; |
- |
- var hscale = ctx.canvas.width / columns / ticks; |
- var vscale = ctx.canvas.height / rows / ticks; |
- minScale = Math.floor(Math.min(hscale, vscale)); |
- scale = minScale * subscale; |
-} |
- |
-function drawLine(x1, y1, x2, y2) { |
- var unit = scale * ticks; |
- var xoffset = xStart * -unit + at_x; |
- var yoffset = yStart * -unit + at_y; |
- ctx.beginPath(); |
- ctx.moveTo(xoffset + x1 * unit, yoffset + y1 * unit); |
- ctx.lineTo(xoffset + x2 * unit, yoffset + y2 * unit); |
- ctx.stroke(); |
-} |
- |
-function drawPoint(px, py) { |
- var unit = scale * ticks; |
- var xoffset = xStart * -unit + at_x; |
- var yoffset = yStart * -unit + at_y; |
- 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.stroke(); |
-} |
- |
-function drawPointSolid(px, py) { |
- drawPoint(px, py); |
- ctx.fillStyle = "rgba(0,0,0, 0.4)"; |
- ctx.fill(); |
-} |
- |
-function drawLabel(num, px, py) { |
- ctx.beginPath(); |
- ctx.arc(px, py, 8, 0, Math.PI*2, true); |
- ctx.closePath(); |
- ctx.strokeStyle = "rgba(0,0,0, 0.4)"; |
- ctx.lineWidth = num == 0 || num == 3 ? 2 : 1; |
- ctx.stroke(); |
- ctx.fillStyle = "black"; |
- ctx.font = "normal 10px Arial"; |
- // ctx.rotate(0.001); |
- ctx.fillText(num, px - 2, py + 3); |
- // ctx.rotate(-0.001); |
-} |
- |
-function drawLabelX(ymin, num, loc) { |
- var unit = scale * ticks; |
- var xoffset = xStart * -unit + at_x; |
- var yoffset = yStart * -unit + at_y; |
- var px = loc * unit + xoffset; |
- var py = ymin * unit + yoffset - 20; |
- drawLabel(num, px, py); |
-} |
- |
-function drawLabelY(xmin, num, loc) { |
- var unit = scale * ticks; |
- var xoffset = xStart * -unit + at_x; |
- var yoffset = yStart * -unit + at_y; |
- var px = xmin * unit + xoffset - 20; |
- var py = loc * unit + yoffset; |
- drawLabel(num, px, py); |
-} |
- |
-function drawHodoOrigin(hx, hy, hMinX, hMinY, hMaxX, hMaxY) { |
- ctx.beginPath(); |
- ctx.moveTo(hx, hy - 100); |
- ctx.lineTo(hx, hy); |
- ctx.strokeStyle = hMinY < 0 ? "green" : "blue"; |
- ctx.stroke(); |
- ctx.beginPath(); |
- ctx.moveTo(hx, hy); |
- ctx.lineTo(hx, hy + 100); |
- ctx.strokeStyle = hMaxY > 0 ? "green" : "blue"; |
- ctx.stroke(); |
- ctx.beginPath(); |
- ctx.moveTo(hx - 100, hy); |
- ctx.lineTo(hx, hy); |
- ctx.strokeStyle = hMinX < 0 ? "green" : "blue"; |
- ctx.stroke(); |
- ctx.beginPath(); |
- ctx.moveTo(hx, hy); |
- ctx.lineTo(hx + 100, hy); |
- ctx.strokeStyle = hMaxX > 0 ? "green" : "blue"; |
- ctx.stroke(); |
-} |
- |
-function logCurves(test) { |
- for (curves in test) { |
- var curve = test[curves]; |
- if (curve.length != 8) { |
- continue; |
- } |
- var str = "{{"; |
- for (i = 0; i < 8; i += 2) { |
- str += curve[i].toFixed(2) + "," + curve[i + 1].toFixed(2); |
- if (i < 6) { |
- str += "}, {"; |
- } |
- } |
- str += "}}"; |
- console.log(str); |
- } |
-} |
- |
-function scalexy(x, y, mag) { |
- var length = Math.sqrt(x * x + y * y); |
- return mag / length; |
-} |
- |
-function drawArrow(x, y, dx, dy) { |
- var unit = scale * ticks; |
- var xoffset = xStart * -unit + at_x; |
- var yoffset = yStart * -unit + at_y; |
- var dscale = scalexy(dx, dy, 1); |
- dx *= dscale; |
- dy *= dscale; |
- ctx.beginPath(); |
- ctx.moveTo(xoffset + x * unit, yoffset + y * unit); |
- x += dx; |
- y += dy; |
- ctx.lineTo(xoffset + x * unit, yoffset + y * unit); |
- dx /= 10; |
- dy /= 10; |
- ctx.lineTo(xoffset + (x - dy) * unit, yoffset + (y + dx) * unit); |
- ctx.lineTo(xoffset + (x + dx * 2) * unit, yoffset + (y + dy * 2) * unit); |
- ctx.lineTo(xoffset + (x + dy) * unit, yoffset + (y - dx) * unit); |
- ctx.lineTo(xoffset + x * unit, yoffset + y * unit); |
- ctx.strokeStyle = "rgba(0,75,0, 0.4)"; |
- ctx.stroke(); |
-} |
- |
-function draw(test, title) { |
- 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.001"; "0.999"; |
- var xoffset = xStart * -unit + at_x; |
- var yoffset = yStart * -unit + at_y; |
- |
- for (curves in test) { |
- var curve = test[curves]; |
- if (curve.length != 8) { |
- continue; |
- } |
- ctx.lineWidth = 1; |
- if (draw_tangents) { |
- ctx.strokeStyle = "rgba(0,0,255, 0.3)"; |
- drawLine(curve[0], curve[1], curve[2], curve[3]); |
- drawLine(curve[2], curve[3], curve[4], curve[5]); |
- drawLine(curve[4], curve[5], curve[6], curve[7]); |
- } |
- if (draw_deriviatives) { |
- var dx = dx_at_t(curve, 0); |
- var dy = dy_at_t(curve, 0); |
- drawArrow(curve[0], curve[1], dx, dy); |
- dx = dx_at_t(curve, 1); |
- dy = dy_at_t(curve, 1); |
- drawArrow(curve[6], curve[7], dx, dy); |
- if (draw_midpoint) { |
- var midX = x_at_t(curve, 0.5); |
- var midY = y_at_t(curve, 0.5); |
- dx = dx_at_t(curve, 0.5); |
- dy = dy_at_t(curve, 0.5); |
- drawArrow(midX, midY, dx, dy); |
- } |
- } |
- ctx.beginPath(); |
- ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit); |
- 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); |
- ctx.strokeStyle = "black"; |
- ctx.stroke(); |
- if (draw_endpoints) { |
- drawPoint(curve[0], curve[1]); |
- drawPoint(curve[2], curve[3]); |
- drawPoint(curve[4], curve[5]); |
- drawPoint(curve[6], curve[7]); |
- } |
- if (draw_midpoint) { |
- var midX = x_at_t(curve, 0.5); |
- var midY = y_at_t(curve, 0.5); |
- drawPointSolid(midX, midY); |
- } |
- if (draw_hodo) { |
- var hodo = hodograph(curve); |
- var hMinX = Math.min(0, hodo[0], hodo[2], hodo[4]); |
- var hMinY = Math.min(0, hodo[1], hodo[3], hodo[5]); |
- var hMaxX = Math.max(0, hodo[0], hodo[2], hodo[4]); |
- var hMaxY = Math.max(0, hodo[1], hodo[3], hodo[5]); |
- var hScaleX = hMaxX - hMinX > 0 ? ctx.canvas.width / (hMaxX - hMinX) : 1; |
- var hScaleY = hMaxY - hMinY > 0 ? ctx.canvas.height / (hMaxY - hMinY) : 1; |
- var hUnit = Math.min(hScaleX, hScaleY); |
- hUnit /= 2; |
- var hx = xoffset - hMinX * hUnit; |
- var hy = yoffset - hMinY * hUnit; |
- ctx.moveTo(hx + hodo[0] * hUnit, hy + hodo[1] * hUnit); |
- ctx.quadraticCurveTo( |
- hx + hodo[2] * hUnit, hy + hodo[3] * hUnit, |
- hx + hodo[4] * hUnit, hy + hodo[5] * hUnit); |
- ctx.strokeStyle = "red"; |
- ctx.stroke(); |
- if (draw_hodo_origin) { |
- drawHodoOrigin(hx, hy, hMinX, hMinY, hMaxX, hMaxY); |
- } |
- } |
- if (draw_hodo2) { |
- var hodo = hodograph2(curve); |
- var hMinX = Math.min(0, hodo[0], hodo[2]); |
- var hMinY = Math.min(0, hodo[1], hodo[3]); |
- var hMaxX = Math.max(0, hodo[0], hodo[2]); |
- var hMaxY = Math.max(0, hodo[1], hodo[3]); |
- var hScaleX = hMaxX - hMinX > 0 ? ctx.canvas.width / (hMaxX - hMinX) : 1; |
- var hScaleY = hMaxY - hMinY > 0 ? ctx.canvas.height / (hMaxY - hMinY) : 1; |
- var hUnit = Math.min(hScaleX, hScaleY); |
- hUnit /= 2; |
- var hx = xoffset - hMinX * hUnit; |
- var hy = yoffset - hMinY * hUnit; |
- ctx.moveTo(hx + hodo[0] * hUnit, hy + hodo[1] * hUnit); |
- ctx.lineTo(hx + hodo[2] * hUnit, hy + hodo[3] * hUnit); |
- ctx.strokeStyle = "red"; |
- ctx.stroke(); |
- drawHodoOrigin(hx, hy, hMinX, hMinY, hMaxX, hMaxY); |
- } |
- if (draw_sequence) { |
- var ymin = Math.min(curve[1], curve[3], curve[5], curve[7]); |
- for (var i = 0; i < 8; i+= 2) { |
- drawLabelX(ymin, i >> 1, curve[i]); |
- } |
- var xmin = Math.min(curve[0], curve[2], curve[4], curve[6]); |
- for (var i = 1; i < 8; i+= 2) { |
- drawLabelY(xmin, i >> 1, curve[i]); |
- } |
- } |
- } |
-} |
- |
-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]); |
-} |
- |
-function doKeyPress(evt) { |
- var char = String.fromCharCode(evt.charCode); |
- switch (char) { |
- case '2': |
- draw_hodo2 ^= true; |
- redraw(); |
- break; |
- case 'd': |
- draw_deriviatives ^= true; |
- redraw(); |
- break; |
- case 'e': |
- draw_endpoints ^= true; |
- redraw(); |
- break; |
- case 'h': |
- draw_hodo ^= true; |
- redraw(); |
- break; |
- case 'N': |
- testIndex += 9; |
- case 'n': |
- if (++testIndex >= tests.length) |
- testIndex = 0; |
- drawTop(); |
- break; |
- case 'l': |
- logCurves(tests[testIndex]); |
- break; |
- case 'm': |
- draw_midpoint ^= true; |
- redraw(); |
- break; |
- case 'o': |
- draw_hodo_origin ^= true; |
- redraw(); |
- break; |
- case 'P': |
- testIndex -= 9; |
- case 'p': |
- if (--testIndex < 0) |
- testIndex = tests.length - 1; |
- drawTop(); |
- break; |
- case 's': |
- draw_sequence ^= true; |
- redraw(); |
- break; |
- case 't': |
- draw_tangents ^= true; |
- redraw(); |
- break; |
- } |
-} |
- |
-function calcXY() { |
- var e = window.event; |
- var tgt = e.target || e.srcElement; |
- var left = tgt.offsetLeft; |
- var top = tgt.offsetTop; |
- var unit = scale * ticks; |
- mouseX = (e.clientX - left - Math.ceil(at_x) + 1) / unit + xStart; |
- mouseY = (e.clientY - top - Math.ceil(at_y)) / unit + yStart; |
-} |
- |
-var lastX, lastY; |
-var activeCurve = []; |
-var activePt; |
- |
-function handleMouseClick() { |
- calcXY(); |
-} |
- |
-function initDown() { |
- var unit = scale * ticks; |
- var xoffset = xStart * -unit + at_x; |
- var yoffset = yStart * -unit + at_y; |
- var test = tests[testIndex]; |
- var bestDistance = 1000000; |
- activePt = -1; |
- for (curves in test) { |
- var testCurve = test[curves]; |
- if (testCurve.length != 8) { |
- continue; |
- } |
- for (var i = 0; i < 8; i += 2) { |
- var testX = testCurve[i]; |
- var testY = testCurve[i + 1]; |
- var dx = testX - mouseX; |
- var dy = testY - mouseY; |
- var dist = dx * dx + dy * dy; |
- if (dist > bestDistance) { |
- continue; |
- } |
- activeCurve = testCurve; |
- activePt = i; |
- bestDistance = dist; |
- } |
- } |
- if (activePt >= 0) { |
- lastX = mouseX; |
- lastY = mouseY; |
- } |
-} |
- |
-function handleMouseOver() { |
- if (!mouseDown) { |
- activePt = -1; |
- return; |
- } |
- calcXY(); |
- if (activePt < 0) { |
- initDown(); |
- return; |
- } |
- var unit = scale * ticks; |
- var deltaX = (mouseX - lastX) /* / unit */; |
- var deltaY = (mouseY - lastY) /*/ unit */; |
- lastX = mouseX; |
- lastY = mouseY; |
- activeCurve[activePt] += deltaX; |
- activeCurve[activePt + 1] += deltaY; |
- redraw(); |
-} |
- |
-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" |
- onmousedown="mouseDown = true" |
- onmouseup="mouseDown = false" |
- onmousemove="handleMouseOver()" |
- onclick="handleMouseClick()" |
- ></canvas > |
-</body> |
-</html> |