submodule/skia/tools/pathops_sorter.htm

   1 <!DOCTYPE html>
   2
   3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   4 <head>
   5     <meta charset="utf-8" />
   6     <title></title>
   7 <div style="height:0">
   8
   9     <div id="cubics">\r
  10 {{{fX=124.70011901855469 fY=9.3718261718750000 } {fX=124.66775026544929 fY=9.3744316215161234 } {fX=124.63530969619751 fY=9.3770743012428284 }{fX=124.60282897949219 fY=9.3797206878662109 } id=10      \r
  11 {{{fX=124.70011901855469 fY=9.3718004226684570 } {fX=124.66775026544929 fY=9.3744058723095804 } {fX=124.63530969619751 fY=9.3770485520362854 } {fX=124.60282897949219 fY=9.3796949386596680 } id=1\r
  12 {{{fX=124.70011901855469 fY=9.3718004226684570 } {fX=124.66786243087600 fY=9.3743968522034287 } {fX=124.63553249625420 fY=9.3770303056986286 } {fX=124.60316467285156 fY=9.3796672821044922 } id=2\r
  13     </div>
  14
  15     </div>
  16
  17 <script type="text/javascript">
  18
  19     var testDivs = [
  20     cubics,
  21     ];
  22
  23     var decimal_places = 3;
  24
  25     var tests = [];
  26     var testTitles = [];
  27     var testIndex = 0;
  28     var ctx;
  29
  30     var subscale = 1;
  31     var xmin, xmax, ymin, ymax;
  32     var hscale, vscale;
  33     var hinitScale, vinitScale;
  34     var uniformScale = true;
  35     var mouseX, mouseY;
  36     var mouseDown = false;
  37     var srcLeft, srcTop;
  38     var screenWidth, screenHeight;
  39     var drawnPts;
  40     var curveT = 0;
  41     var curveW = -1;
  42
  43     var lastX, lastY;
  44     var activeCurve = [];
  45     var activePt;
  46     var ids = [];
  47
  48     var focus_on_selection = 0;
  49     var draw_t = false;
  50     var draw_w = false;
  51     var draw_closest_t = false;
  52     var draw_cubic_red = false;
  53     var draw_derivative = false;
  54     var draw_endpoints = 2;
  55     var draw_id = 0;
  56     var draw_midpoint = 0;
  57     var draw_mouse_xy = false;
  58     var draw_order = false;
  59     var draw_point_xy = false;
  60     var draw_ray_intersect = false;
  61     var draw_quarterpoint = 0;
  62     var draw_tangents = 1;
  63     var draw_sortpoint = 0;
  64     var retina_scale = !!window.devicePixelRatio;
  65
  66     function parse(test, title) {
  67         var curveStrs = test.split("{{");
  68         var pattern = /-?\d+\.*\d*e?-?\d*/g;
  69         var curves = [];
  70         for (var c in curveStrs) {
  71             var curveStr = curveStrs[c];
  72             var idPart = curveStr.split("id=");
  73             var id = -1;
  74             if (idPart.length == 2) {
  75                 id = parseInt(idPart[1]);
  76                 curveStr = idPart[0];
  77             }
  78             var points = curveStr.match(pattern);
  79             var pts = [];
  80             for (var wd in points) {
  81                 var num = parseFloat(points[wd]);
  82                 if (isNaN(num)) continue;
  83                 pts.push(num);
  84             }
  85             if (pts.length > 2) {
  86                 curves.push(pts);
  87             }
  88             if (id >= 0) {
  89                 ids.push(id);
  90                 ids.push(pts);
  91             }
  92         }
  93         if (curves.length >= 1) {
  94             tests.push(curves);
  95             testTitles.push(title);
  96         }
  97     }
  98
  99     function init(test) {
 100         var canvas = document.getElementById('canvas');
 101         if (!canvas.getContext) return;
 102         ctx = canvas.getContext('2d');
 103         var resScale = retina_scale && window.devicePixelRatio ? window.devicePixelRatio : 1;
 104         var unscaledWidth = window.innerWidth - 20;
 105         var unscaledHeight = window.innerHeight - 20;
 106         screenWidth = unscaledWidth;
 107         screenHeight = unscaledHeight;
 108         canvas.width = unscaledWidth * resScale;
 109         canvas.height = unscaledHeight * resScale;
 110         canvas.style.width = unscaledWidth + 'px';
 111         canvas.style.height = unscaledHeight + 'px';
 112         if (resScale != 1) {
 113             ctx.scale(resScale, resScale);
 114         }
 115         xmin = Infinity;
 116         xmax = -Infinity;
 117         ymin = Infinity;
 118         ymax = -Infinity;
 119         for (var curves in test) {
 120             var curve = test[curves];
 121             var last = curve.length - (curve.length % 2 == 1 ? 1 : 0);
 122             for (var idx = 0; idx < last; idx += 2) {
 123                 xmin = Math.min(xmin, curve[idx]);
 124                 xmax = Math.max(xmax, curve[idx]);
 125                 ymin = Math.min(ymin, curve[idx + 1]);
 126                 ymax = Math.max(ymax, curve[idx + 1]);
 127             }
 128         }
 129         xmin -= Math.min(1, Math.max(xmax - xmin, ymax - ymin));
 130         var testW = xmax - xmin;
 131         var testH = ymax - ymin;
 132         subscale = 1;
 133         while (testW * subscale < 0.1 && testH * subscale < 0.1) {
 134             subscale *= 10;
 135         }
 136         while (testW * subscale > 10 && testH * subscale > 10) {
 137             subscale /= 10;
 138         }
 139         setScale(xmin, xmax, ymin, ymax);
 140         mouseX = (screenWidth / 2) / hscale + srcLeft;
 141         mouseY = (screenHeight / 2) / vscale + srcTop;
 142         hinitScale = hscale;
 143         vinitScale = vscale;
 144     }
 145
 146     function setScale(x0, x1, y0, y1) {
 147         var srcWidth = x1 - x0;
 148         var srcHeight = y1 - y0;
 149         var usableWidth = screenWidth;
 150         var xDigits = Math.ceil(Math.log(Math.abs(xmax)) / Math.log(10));
 151         var yDigits = Math.ceil(Math.log(Math.abs(ymax)) / Math.log(10));
 152         usableWidth -= (xDigits + yDigits) * 10;
 153         usableWidth -= decimal_places * 10;
 154         hscale = usableWidth / srcWidth;
 155         vscale = screenHeight / srcHeight;
 156         if (uniformScale) {
 157             hscale = Math.min(hscale, vscale);
 158             vscale = hscale;
 159         }
 160         var hinvScale = 1 / hscale;
 161         var vinvScale = 1 / vscale;
 162         var sxmin = x0 - hinvScale * 5;
 163         var symin = y0 - vinvScale * 10;
 164         var sxmax = x1 + hinvScale * (6 * decimal_places + 10);
 165         var symax = y1 + vinvScale * 10;
 166         srcWidth = sxmax - sxmin;
 167         srcHeight = symax - symin;
 168         hscale = usableWidth / srcWidth;
 169         vscale = screenHeight / srcHeight;
 170         if (uniformScale) {
 171             hscale = Math.min(hscale, vscale);
 172             vscale = hscale;
 173         }
 174         srcLeft = sxmin;
 175         srcTop = symin;
 176     }
 177
 178 function dxy_at_t(curve, t) {
 179     var dxy = {};
 180     if (curve.length == 6) {
 181         var a = t - 1;
 182         var b = 1 - 2 * t;
 183         var c = t;
 184         dxy.x = a * curve[0] + b * curve[2] + c * curve[4];
 185         dxy.y = a * curve[1] + b * curve[3] + c * curve[5];
 186     } else if (curve.length == 7) {
 187         var p20x = curve[4] - curve[0];
 188         var p20y = curve[5] - curve[1];
 189         var p10xw = (curve[2] - curve[0]) * curve[6];
 190         var p10yw = (curve[3] - curve[1]) * curve[6];
 191         var coeff0x = curve[6] * p20x - p20x;
 192         var coeff0y = curve[6] * p20y - p20y;
 193         var coeff1x = p20x - 2 * p10xw;
 194         var coeff1y = p20y - 2 * p10yw;
 195         dxy.x = t * (t * coeff0x + coeff1x) + p10xw;
 196         dxy.y = t * (t * coeff0y + coeff1y) + p10yw;
 197     } else if (curve.length == 8) {
 198         var one_t = 1 - t;
 199         var a = curve[0];
 200         var b = curve[2];
 201         var c = curve[4];
 202         var d = curve[6];
 203         dxy.x = 3 * ((b - a) * one_t * one_t + 2 * (c - b) * t * one_t + (d - c) * t * t);
 204         a = curve[1];
 205         b = curve[3];
 206         c = curve[5];
 207         d = curve[7];
 208         dxy.y = 3 * ((b - a) * one_t * one_t + 2 * (c - b) * t * one_t + (d - c) * t * t);
 209     }
 210     return dxy;
 211 }
 212
 213     var flt_epsilon = 1.19209290E-07;
 214
 215     function approximately_zero(A) {
 216         return Math.abs(A) < flt_epsilon;
 217     }
 218
 219     function approximately_zero_inverse(A) {
 220         return Math.abs(A) > (1 / flt_epsilon);
 221     }
 222
 223     function quad_real_roots(A, B, C) {
 224         var s = [];
 225         var p = B / (2 * A);
 226         var q = C / A;
 227         if (approximately_zero(A) && (approximately_zero_inverse(p)
 228                 || approximately_zero_inverse(q))) {
 229             if (approximately_zero(B)) {
 230                 if (C == 0) {
 231                     s[0] = 0;
 232                 }
 233                 return s;
 234             }
 235             s[0] = -C / B;
 236             return s;
 237         }
 238         /* normal form: x^2 + px + q = 0 */
 239         var p2 = p * p;
 240         if (!approximately_zero(p2 - q) && p2 < q) {
 241             return s;
 242         }
 243         var sqrt_D = 0;
 244         if (p2 > q) {
 245             sqrt_D = Math.sqrt(p2 - q);
 246         }
 247         s[0] = sqrt_D - p;
 248         var flip = -sqrt_D - p;
 249         if (!approximately_zero(s[0] - flip)) {
 250             s[1] = flip;
 251         }
 252         return s;
 253     }
 254
 255     function cubic_real_roots(A, B, C, D) {
 256         if (approximately_zero(A)) {  // we're just a quadratic
 257             return quad_real_roots(B, C, D);
 258         }
 259         if (approximately_zero(D)) {  // 0 is one root
 260             var s = quad_real_roots(A, B, C);
 261             for (var i = 0; i < s.length; ++i) {
 262                 if (approximately_zero(s[i])) {
 263                     return s;
 264                 }
 265             }
 266             s.push(0);
 267             return s;
 268         }
 269         if (approximately_zero(A + B + C + D)) {  // 1 is one root
 270             var s = quad_real_roots(A, A + B, -D);
 271             for (var i = 0; i < s.length; ++i) {
 272                 if (approximately_zero(s[i] - 1)) {
 273                     return s;
 274                 }
 275             }
 276             s.push(1);
 277             return s;
 278         }
 279         var a, b, c;
 280         var invA = 1 / A;
 281         a = B * invA;
 282         b = C * invA;
 283         c = D * invA;
 284         var a2 = a * a;
 285         var Q = (a2 - b * 3) / 9;
 286         var R = (2 * a2 * a - 9 * a * b + 27 * c) / 54;
 287         var R2 = R * R;
 288         var Q3 = Q * Q * Q;
 289         var R2MinusQ3 = R2 - Q3;
 290         var adiv3 = a / 3;
 291         var r;
 292         var roots = [];
 293         if (R2MinusQ3 < 0) {   // we have 3 real roots
 294             var theta = Math.acos(R / Math.sqrt(Q3));
 295             var neg2RootQ = -2 * Math.sqrt(Q);
 296             r = neg2RootQ * Math.cos(theta / 3) - adiv3;
 297             roots.push(r);
 298             r = neg2RootQ * Math.cos((theta + 2 * Math.PI) / 3) - adiv3;
 299             if (!approximately_zero(roots[0] - r)) {
 300                 roots.push(r);
 301             }
 302             r = neg2RootQ * Math.cos((theta - 2 * Math.PI) / 3) - adiv3;
 303             if (!approximately_zero(roots[0] - r) && (roots.length == 1
 304                         || !approximately_zero(roots[1] - r))) {
 305                 roots.push(r);
 306             }
 307         } else {  // we have 1 real root
 308             var sqrtR2MinusQ3 = Math.sqrt(R2MinusQ3);
 309             var A = Math.abs(R) + sqrtR2MinusQ3;
 310             A = Math.pow(A, 1/3);
 311             if (R > 0) {
 312                 A = -A;
 313             }
 314             if (A != 0) {
 315                 A += Q / A;
 316             }
 317             r = A - adiv3;
 318             roots.push(r);
 319             if (approximately_zero(R2 - Q3)) {
 320                 r = -A / 2 - adiv3;
 321                 if (!approximately_zero(roots[0] - r)) {
 322                     roots.push(r);
 323                 }
 324             }
 325         }
 326         return roots;
 327     }
 328
 329     function approximately_zero_or_more(tValue) {
 330         return tValue >= -flt_epsilon;
 331     }
 332
 333     function approximately_one_or_less(tValue) {
 334         return tValue <= 1 + flt_epsilon;
 335     }
 336
 337     function approximately_less_than_zero(tValue) {
 338         return tValue < flt_epsilon;
 339     }
 340
 341     function approximately_greater_than_one(tValue) {
 342         return tValue > 1 - flt_epsilon;
 343     }
 344
 345     function add_valid_ts(s) {
 346         var t = [];
 347     nextRoot:
 348         for (var index = 0; index < s.length; ++index) {
 349             var tValue = s[index];
 350             if (approximately_zero_or_more(tValue) && approximately_one_or_less(tValue)) {
 351                 if (approximately_less_than_zero(tValue)) {
 352                     tValue = 0;
 353                 } else if (approximately_greater_than_one(tValue)) {
 354                     tValue = 1;
 355                 }
 356                 for (var idx2 = 0; idx2 < t.length; ++idx2) {
 357                     if (approximately_zero(t[idx2] - tValue)) {
 358                         continue nextRoot;
 359                     }
 360                 }
 361                 t.push(tValue);
 362             }
 363         }
 364         return t;
 365     }
 366
 367     function quad_roots(A, B, C) {
 368         var s = quad_real_roots(A, B, C);
 369         var foundRoots = add_valid_ts(s);
 370         return foundRoots;
 371     }
 372
 373     function cubic_roots(A, B, C, D) {
 374         var s = cubic_real_roots(A, B, C, D);
 375         var foundRoots = add_valid_ts(s);
 376         return foundRoots;
 377     }
 378
 379     function ray_curve_intersect(startPt, endPt, curve) {
 380         var adj = endPt[0] - startPt[0];
 381         var opp = endPt[1] - startPt[1];
 382         var r = [];
 383         var len = (curve.length == 7 ? 6 : curve.length) / 2;
 384         for (var n = 0; n < len; ++n) {
 385             r[n] = (curve[n * 2 + 1] - startPt[1]) * adj - (curve[n * 2] - startPt[0]) * opp;
 386         }
 387         if (curve.length == 6) {
 388             var A = r[2];
 389             var B = r[1];
 390             var C = r[0];
 391             A += C - 2 * B;  // A = a - 2*b + c
 392             B -= C;  // B = -(b - c)
 393             return quad_roots(A, 2 * B, C);
 394         }
 395         if (curve.length == 7) {
 396             var A = r[2];
 397             var B = r[1] * curve[6];
 398             var C = r[0];
 399             A += C - 2 * B;  // A = a - 2*b + c
 400             B -= C;  // B = -(b - c)
 401             return quad_roots(A, 2 * B, C);
 402         }
 403         var A = r[3];       // d
 404         var B = r[2] * 3;   // 3*c
 405         var C = r[1] * 3;   // 3*b
 406         var D = r[0];       // a
 407         A -= D - C + B;     // A =   -a + 3*b - 3*c + d
 408         B += 3 * D - 2 * C; // B =  3*a - 6*b + 3*c
 409         C -= 3 * D;         // C = -3*a + 3*b
 410         return cubic_roots(A, B, C, D);
 411     }
 412
 413     function x_at_t(curve, t) {
 414         var one_t = 1 - t;
 415         if (curve.length == 4) {
 416             return one_t * curve[0] + t * curve[2];
 417         }
 418         var one_t2 = one_t * one_t;
 419         var t2 = t * t;
 420         if (curve.length == 6) {
 421             return one_t2 * curve[0] + 2 * one_t * t * curve[2] + t2 * curve[4];
 422         }
 423         if (curve.length == 7) {
 424             var numer = one_t2 * curve[0] + 2 * one_t * t * curve[2] * curve[6]
 425                     + t2 * curve[4];
 426             var denom = one_t2            + 2 * one_t * t            * curve[6]
 427                     + t2;
 428             return numer / denom;
 429         }
 430         var a = one_t2 * one_t;
 431         var b = 3 * one_t2 * t;
 432         var c = 3 * one_t * t2;
 433         var d = t2 * t;
 434         return a * curve[0] + b * curve[2] + c * curve[4] + d * curve[6];
 435     }
 436
 437     function y_at_t(curve, t) {
 438         var one_t = 1 - t;
 439         if (curve.length == 4) {
 440             return one_t * curve[1] + t * curve[3];
 441         }
 442         var one_t2 = one_t * one_t;
 443         var t2 = t * t;
 444         if (curve.length == 6) {
 445             return one_t2 * curve[1] + 2 * one_t * t * curve[3] + t2 * curve[5];
 446         }
 447         if (curve.length == 7) {
 448             var numer = one_t2 * curve[1] + 2 * one_t * t * curve[3] * curve[6]
 449                     + t2 * curve[5];
 450             var denom = one_t2            + 2 * one_t * t            * curve[6]
 451                     + t2;
 452             return numer / denom;
 453         }
 454         var a = one_t2 * one_t;
 455         var b = 3 * one_t2 * t;
 456         var c = 3 * one_t * t2;
 457         var d = t2 * t;
 458         return a * curve[1] + b * curve[3] + c * curve[5] + d * curve[7];
 459     }
 460
 461     function drawPointAtT(curve) {
 462         var x = x_at_t(curve, curveT);
 463         var y = y_at_t(curve, curveT);
 464         drawPoint(x, y, false);
 465     }
 466
 467     function drawLine(x1, y1, x2, y2) {
 468         ctx.beginPath();
 469         ctx.moveTo((x1 - srcLeft) * hscale,
 470                 (y1 - srcTop) * vscale);
 471         ctx.lineTo((x2 - srcLeft) * hscale,
 472                 (y2 - srcTop) * vscale);
 473         ctx.stroke();
 474     }
 475
 476     function drawPoint(px, py, xend) {
 477         for (var pts = 0; pts < drawnPts.length; pts += 2) {
 478             var x = drawnPts[pts];
 479             var y = drawnPts[pts + 1];
 480             if (px == x && py == y) {
 481                 return;
 482             }
 483         }
 484         drawnPts.push(px);
 485         drawnPts.push(py);
 486         var _px = (px - srcLeft) * hscale;
 487         var _py = (py - srcTop) * vscale;
 488         ctx.beginPath();
 489         if (xend) {
 490             ctx.moveTo(_px - 3, _py - 3);
 491             ctx.lineTo(_px + 3, _py + 3);
 492             ctx.moveTo(_px - 3, _py + 3);
 493             ctx.lineTo(_px + 3, _py - 3);
 494         } else {
 495             ctx.arc(_px, _py, 3, 0, Math.PI * 2, true);
 496             ctx.closePath();
 497         }
 498         ctx.stroke();
 499         if (draw_point_xy) {
 500             var label = px.toFixed(decimal_places) + ", " + py.toFixed(decimal_places);
 501             ctx.font = "normal 10px Arial";
 502             ctx.textAlign = "left";
 503             ctx.fillStyle = "black";
 504             ctx.fillText(label, _px + 5, _py);
 505         }
 506     }
 507
 508     function drawPointSolid(px, py) {
 509         drawPoint(px, py, false);
 510         ctx.fillStyle = "rgba(0,0,0, 0.4)";
 511         ctx.fill();
 512     }
 513
 514     function crossPt(origin, pt1, pt2) {
 515         return ((pt1[0] - origin[0]) * (pt2[1] - origin[1])
 516               - (pt1[1] - origin[1]) * (pt2[0] - origin[0])) > 0 ? 0 : 1;
 517     }
 518
 519     // may not work well for cubics
 520     function curveClosestT(curve, x, y) {
 521         var closest = -1;
 522         var closestDist = Infinity;
 523         var l = Infinity, t = Infinity, r = -Infinity, b = -Infinity;
 524         for (var i = 0; i < 16; ++i) {
 525             var testX = x_at_t(curve, i / 16);
 526             l = Math.min(testX, l);
 527             r = Math.max(testX, r);
 528             var testY = y_at_t(curve, i / 16);
 529             t = Math.min(testY, t);
 530             b = Math.max(testY, b);
 531             var dx = testX - x;
 532             var dy = testY - y;
 533             var dist = dx * dx + dy * dy;
 534             if (closestDist > dist) {
 535                 closestDist = dist;
 536                 closest = i;
 537             }
 538         }
 539         var boundsX = r - l;
 540         var boundsY = b - t;
 541         var boundsDist = boundsX * boundsX + boundsY * boundsY;
 542         if (closestDist > boundsDist) {
 543             return -1;
 544         }
 545         console.log("closestDist = " + closestDist + " boundsDist = " + boundsDist
 546                 + " t = " + closest / 16);
 547         return closest / 16;
 548     }
 549
 550     var kMaxConicToQuadPOW2 = 5;
 551
 552     function computeQuadPOW2(curve, tol) {
 553         var a = curve[6] - 1;
 554         var k = a / (4 * (2 + a));
 555         var x = k * (curve[0] - 2 * curve[2] + curve[4]);
 556         var y = k * (curve[1] - 2 * curve[3] + curve[5]);
 557
 558         var error = Math.sqrt(x * x + y * y);
 559         var pow2;
 560         for (pow2 = 0; pow2 < kMaxConicToQuadPOW2; ++pow2) {
 561             if (error <= tol) {
 562                 break;
 563             }
 564             error *= 0.25;
 565         }
 566         return pow2;
 567     }
 568
 569     function subdivide_w_value(w) {
 570         return Math.sqrt(0.5 + w * 0.5);
 571     }
 572
 573     function chop(curve, part1, part2) {
 574         var w = curve[6];
 575         var scale = 1 / (1 + w);
 576         part1[0] = curve[0];
 577         part1[1] = curve[1];
 578         part1[2] = (curve[0] + curve[2] * w) * scale;
 579         part1[3] = (curve[1] + curve[3] * w) * scale;
 580         part1[4] = part2[0] = (curve[0] + (curve[2] * w) * 2 + curve[4]) * scale * 0.5;
 581         part1[5] = part2[1] = (curve[1] + (curve[3] * w) * 2 + curve[5]) * scale * 0.5;
 582         part2[2] = (curve[2] * w + curve[4]) * scale;
 583         part2[3] = (curve[3] * w + curve[5]) * scale;
 584         part2[4] = curve[4];
 585         part2[5] = curve[5];
 586         part1[6] = part2[6] = subdivide_w_value(w);
 587     }
 588
 589     function subdivide(curve, level, pts) {
 590         if (0 == level) {
 591             pts.push(curve[2]);
 592             pts.push(curve[3]);
 593             pts.push(curve[4]);
 594             pts.push(curve[5]);
 595         } else {
 596             var part1 = [], part2 = [];
 597             chop(curve, part1, part2);
 598             --level;
 599             subdivide(part1, level, pts);
 600             subdivide(part2, level, pts);
 601         }
 602     }
 603
 604     function chopIntoQuadsPOW2(curve, pow2, pts) {
 605         subdivide(curve, pow2, pts);
 606         return 1 << pow2;
 607     }
 608
 609     function drawConic(curve, srcLeft, srcTop, hscale, vscale) {
 610         var tol = 1 / Math.min(hscale, vscale);
 611         var pow2 = computeQuadPOW2(curve, tol);
 612         var pts = [];
 613         chopIntoQuadsPOW2(curve, pow2, pts);
 614         for (var i = 0; i < pts.length; i += 4) {
 615             ctx.quadraticCurveTo(
 616                 (pts[i + 0] - srcLeft) * hscale, (pts[i + 1] - srcTop) * vscale,
 617                 (pts[i + 2] - srcLeft) * hscale, (pts[i + 3] - srcTop) * vscale);
 618         }
 619     }
 620
 621     function draw(test, title) {
 622         ctx.font = "normal 50px Arial";
 623         ctx.textAlign = "left";
 624         ctx.fillStyle = "rgba(0,0,0, 0.1)";
 625         ctx.fillText(title, 50, 50);
 626         ctx.font = "normal 10px Arial";
 627         //  ctx.lineWidth = "1.001"; "0.999";
 628         var hullStarts = [];
 629         var hullEnds = [];
 630         var midSpokes = [];
 631         var midDist = [];
 632         var origin = [];
 633         var shortSpokes = [];
 634         var shortDist = [];
 635         var sweeps = [];
 636         drawnPts = [];
 637         for (var curves in test) {
 638             var curve = test[curves];
 639             origin.push(curve[0]);
 640             origin.push(curve[1]);
 641             var startPt = [];
 642             startPt.push(curve[2]);
 643             startPt.push(curve[3]);
 644             hullStarts.push(startPt);
 645             var endPt = [];
 646             if (curve.length == 4) {
 647                 endPt.push(curve[2]);
 648                 endPt.push(curve[3]);
 649             } else if (curve.length == 6 || curve.length == 7) {
 650                 endPt.push(curve[4]);
 651                 endPt.push(curve[5]);
 652             } else if (curve.length == 8) {
 653                 endPt.push(curve[6]);
 654                 endPt.push(curve[7]);
 655             }
 656             hullEnds.push(endPt);
 657             var sweep = crossPt(origin, startPt, endPt);
 658             sweeps.push(sweep);
 659             var midPt = [];
 660             midPt.push(x_at_t(curve, 0.5));
 661             midPt.push(y_at_t(curve, 0.5));
 662             midSpokes.push(midPt);
 663             var shortPt = [];
 664             shortPt.push(x_at_t(curve, 0.25));
 665             shortPt.push(y_at_t(curve, 0.25));
 666             shortSpokes.push(shortPt);
 667             var dx = midPt[0] - origin[0];
 668             var dy = midPt[1] - origin[1];
 669             var dist = Math.sqrt(dx * dx + dy * dy);
 670             midDist.push(dist);
 671             dx = shortPt[0] - origin[0];
 672             dy = shortPt[1] - origin[1];
 673             dist = Math.sqrt(dx * dx + dy * dy);
 674             shortDist.push(dist);
 675         }
 676         var intersect = [];
 677         var useIntersect = false;
 678         var maxWidth = Math.max(xmax - xmin, ymax - ymin);
 679         for (var curves in test) {
 680             var curve = test[curves];
 681             if (curve.length >= 6 && curve.length <= 8) {
 682                 var opp = curves == 0 || curves == 1 ? 0 : 1;
 683                 var sects = ray_curve_intersect(origin, hullEnds[opp], curve);
 684                 intersect.push(sects);
 685                 if (sects.length > 1) {
 686                     var intersection = sects[0];
 687                     if (intersection == 0) {
 688                         intersection = sects[1];
 689                     }
 690                     var ix = x_at_t(curve, intersection) - origin[0];
 691                     var iy = y_at_t(curve, intersection) - origin[1];
 692                     var ex = hullEnds[opp][0] - origin[0];
 693                     var ey = hullEnds[opp][1] - origin[1];
 694                     if (ix * ex >= 0 && iy * ey >= 0) {
 695                         var iDist = Math.sqrt(ix * ix + iy * iy);
 696                         var eDist = Math.sqrt(ex * ex + ey * ey);
 697                         var delta = Math.abs(iDist - eDist) / maxWidth;
 698                         if (delta > (curve.length != 8 ? 1e-5 : 1e-4)) {
 699                             useIntersect ^= true;
 700                         }
 701                     }
 702                 }
 703             }
 704         }
 705         var midLeft = curves != 0 ? crossPt(origin, midSpokes[0], midSpokes[1]) : 0;
 706         var firstInside;
 707         if (useIntersect) {
 708             var sect1 = intersect[0].length > 1;
 709             var sIndex = sect1 ? 0 : 1;
 710             var sects = intersect[sIndex];
 711             var intersection = sects[0];
 712             if (intersection == 0) {
 713                 intersection = sects[1];
 714             }
 715             var curve = test[sIndex];
 716             var ix = x_at_t(curve, intersection) - origin[0];
 717             var iy = y_at_t(curve, intersection) - origin[1];
 718             var opp = sect1 ? 1 : 0;
 719             var ex = hullEnds[opp][0] - origin[0];
 720             var ey = hullEnds[opp][1] - origin[1];
 721             var iDist = ix * ix + iy * iy;
 722             var eDist = ex * ex + ey * ey;
 723             firstInside = (iDist > eDist) ^ (sIndex == 0) ^ sweeps[0];
 724 //            console.log("iDist=" + iDist + " eDist=" + eDist + " sIndex=" + sIndex
 725  //                   + " sweeps[0]=" + sweeps[0]);
 726         } else {
 727  //           console.log("midLeft=" + midLeft);
 728             firstInside = midLeft != 0;
 729         }
 730         var shorter = midDist[1] < midDist[0];
 731         var shortLeft = shorter ? crossPt(origin, shortSpokes[0], midSpokes[1])
 732                 : crossPt(origin, midSpokes[0], shortSpokes[1]);
 733         var startCross = crossPt(origin, hullStarts[0], hullStarts[1]);
 734         var disallowShort = midLeft == startCross && midLeft == sweeps[0]
 735                     && midLeft == sweeps[1];
 736
 737   //      console.log("midLeft=" + midLeft + " startCross=" + startCross);
 738         var intersectIndex = 0;
 739         for (var curves in test) {
 740             var curve = test[draw_id != 2 ? curves : test.length - curves - 1];
 741             if (curve.length != 4 && curve.length != 6 && curve.length != 7 && curve.length != 8) {
 742                 continue;
 743             }
 744             ctx.lineWidth = 1;
 745             if (draw_tangents != 0) {
 746                 if (draw_cubic_red ? curve.length == 8 : firstInside == curves) {
 747                     ctx.strokeStyle = "rgba(255,0,0, 0.3)";
 748                 } else {
 749                     ctx.strokeStyle = "rgba(0,0,255, 0.3)";
 750                 }
 751                 drawLine(curve[0], curve[1], curve[2], curve[3]);
 752                 if (draw_tangents != 2) {
 753                     if (curve.length > 4) drawLine(curve[2], curve[3], curve[4], curve[5]);
 754                     if (curve.length == 8) drawLine(curve[4], curve[5], curve[6], curve[7]);
 755                 }
 756                 if (draw_tangents != 1) {
 757                     if (curve.length == 6 || curve.length == 7) {
 758                         drawLine(curve[0], curve[1], curve[4], curve[5]);
 759                     }
 760                     if (curve.length == 8) drawLine(curve[0], curve[1], curve[6], curve[7]);
 761                 }
 762             }
 763             ctx.beginPath();
 764             ctx.moveTo((curve[0] - srcLeft) * hscale, (curve[1] - srcTop) * vscale);
 765             if (curve.length == 4) {
 766                 ctx.lineTo((curve[2] - srcLeft) * hscale, (curve[3] - srcTop) * vscale);
 767             } else if (curve.length == 6) {
 768                 ctx.quadraticCurveTo(
 769                     (curve[2] - srcLeft) * hscale, (curve[3] - srcTop) * vscale,
 770                     (curve[4] - srcLeft) * hscale, (curve[5] - srcTop) * vscale);
 771             } else if (curve.length == 7) {
 772                 drawConic(curve, srcLeft, srcTop, hscale, vscale);
 773             } else {
 774                 ctx.bezierCurveTo(
 775                     (curve[2] - srcLeft) * hscale, (curve[3] - srcTop) * vscale,
 776                     (curve[4] - srcLeft) * hscale, (curve[5] - srcTop) * vscale,
 777                     (curve[6] - srcLeft) * hscale, (curve[7] - srcTop) * vscale);
 778             }
 779             if (draw_cubic_red ? curve.length == 8 : firstInside == curves) {
 780                 ctx.strokeStyle = "rgba(255,0,0, 1)";
 781             } else {
 782                 ctx.strokeStyle = "rgba(0,0,255, 1)";
 783             }
 784             ctx.stroke();
 785             if (draw_endpoints > 0) {
 786                 drawPoint(curve[0], curve[1], false);
 787                 if (draw_endpoints > 1 || curve.length == 4) {
 788                     drawPoint(curve[2], curve[3], curve.length == 4 && draw_endpoints == 3);
 789                 }
 790                 if (curve.length == 6 || curve.length == 7 ||
 791                         (draw_endpoints > 1 && curve.length == 8)) {
 792                     drawPoint(curve[4], curve[5], (curve.length == 6 || curve.length == 7) && draw_endpoints == 3);
 793                 }
 794                 if (curve.length == 8) {
 795                     drawPoint(curve[6], curve[7], curve.length == 8 && draw_endpoints == 3);
 796                 }
 797             }
 798             if (draw_midpoint != 0) {
 799                 if ((curves == 0) == (midLeft == 0)) {
 800                     ctx.strokeStyle = "rgba(0,180,127, 0.6)";
 801                 } else {
 802                     ctx.strokeStyle = "rgba(127,0,127, 0.6)";
 803                 }
 804                 var midX = x_at_t(curve, 0.5);
 805                 var midY = y_at_t(curve, 0.5);
 806                 drawPointSolid(midX, midY);
 807                 if (draw_midpoint > 1) {
 808                     drawLine(curve[0], curve[1], midX, midY);
 809                 }
 810             }
 811             if (draw_quarterpoint != 0) {
 812                 if ((curves == 0) == (shortLeft == 0)) {
 813                     ctx.strokeStyle = "rgba(0,191,63, 0.6)";
 814                 } else {
 815                     ctx.strokeStyle = "rgba(63,0,191, 0.6)";
 816                 }
 817                 var midT = (curves == 0) == shorter ? 0.25 : 0.5;
 818                 var midX = x_at_t(curve, midT);
 819                 var midY = y_at_t(curve, midT);
 820                 drawPointSolid(midX, midY);
 821                 if (draw_quarterpoint > 1) {
 822                     drawLine(curve[0], curve[1], midX, midY);
 823                 }
 824             }
 825             if (draw_sortpoint != 0) {
 826                 if ((curves == 0) == ((disallowShort == -1 ? midLeft : shortLeft) == 0)) {
 827                     ctx.strokeStyle = "rgba(0,155,37, 0.6)";
 828                 } else {
 829                     ctx.strokeStyle = "rgba(37,0,155, 0.6)";
 830                 }
 831                 var midT = (curves == 0) == shorter && disallowShort != curves ? 0.25 : 0.5;
 832                 console.log("curves=" + curves + " disallowShort=" + disallowShort
 833                         + " midLeft=" + midLeft + " shortLeft=" + shortLeft
 834                         + " shorter=" + shorter + " midT=" + midT);
 835                 var midX = x_at_t(curve, midT);
 836                 var midY = y_at_t(curve, midT);
 837                 drawPointSolid(midX, midY);
 838                 if (draw_sortpoint > 1) {
 839                     drawLine(curve[0], curve[1], midX, midY);
 840                 }
 841             }
 842             if (draw_ray_intersect != 0) {
 843                 ctx.strokeStyle = "rgba(75,45,199, 0.6)";
 844                 if (curve.length >= 6 && curve.length <= 8) {
 845                     var intersections = intersect[intersectIndex];
 846                     for (var i in intersections) {
 847                         var intersection = intersections[i];
 848                         var x = x_at_t(curve, intersection);
 849                         var y = y_at_t(curve, intersection);
 850                         drawPointSolid(x, y);
 851                         if (draw_ray_intersect > 1) {
 852                             drawLine(curve[0], curve[1], x, y);
 853                         }
 854                     }
 855                 }
 856                 ++intersectIndex;
 857             }
 858             if (draw_order) {
 859                 var px = x_at_t(curve, 0.75);
 860                 var py = y_at_t(curve, 0.75);
 861                 var _px = (px - srcLeft) * hscale;
 862                 var _py = (py - srcTop) * vscale;
 863                 ctx.beginPath();
 864                 ctx.arc(_px, _py, 15, 0, Math.PI * 2, true);
 865                 ctx.closePath();
 866                 ctx.fillStyle = "white";
 867                 ctx.fill();
 868                 if (draw_cubic_red ? curve.length == 8 : firstInside == curves) {
 869                     ctx.strokeStyle = "rgba(255,0,0, 1)";
 870                     ctx.fillStyle = "rgba(255,0,0, 1)";
 871                 } else {
 872                     ctx.strokeStyle = "rgba(0,0,255, 1)";
 873                     ctx.fillStyle = "rgba(0,0,255, 1)";
 874                 }
 875                 ctx.stroke();
 876                 ctx.font = "normal 16px Arial";
 877                 ctx.textAlign = "center";
 878                 ctx.fillText(parseInt(curves) + 1, _px, _py + 5);
 879             }
 880             if (draw_closest_t) {
 881                 var t = curveClosestT(curve, mouseX, mouseY);
 882                 if (t >= 0) {
 883                     var x = x_at_t(curve, t);
 884                     var y = y_at_t(curve, t);
 885                     drawPointSolid(x, y);
 886                 }
 887             }
 888             if (!approximately_zero(hscale - hinitScale)) {
 889                 ctx.font = "normal 20px Arial";
 890                 ctx.fillStyle = "rgba(0,0,0, 0.3)";
 891                 ctx.textAlign = "right";
 892                 var scaleTextOffset = hscale != vscale ? -25 : -5;
 893                 ctx.fillText(hscale.toFixed(decimal_places) + 'x',
 894                         screenWidth - 10, screenHeight - scaleTextOffset);
 895                 if (hscale != vscale) {
 896                     ctx.fillText(vscale.toFixed(decimal_places) + 'y',
 897                             screenWidth - 10, screenHeight - 5);
 898                 }
 899             }
 900             if (draw_t) {
 901                 drawPointAtT(curve);
 902             }
 903             if (draw_id != 0) {
 904                 var id = -1;
 905                 for (var i = 0; i < ids.length; i += 2) {
 906                     if (ids[i + 1] == curve) {
 907                         id = ids[i];
 908                         break;
 909                     }
 910                 }
 911                 if (id >= 0) {
 912                     var px = x_at_t(curve, 0.5);
 913                     var py = y_at_t(curve, 0.5);
 914                     var _px = (px - srcLeft) * hscale;
 915                     var _py = (py - srcTop) * vscale;
 916                     ctx.beginPath();
 917                     ctx.arc(_px, _py, 15, 0, Math.PI * 2, true);
 918                     ctx.closePath();
 919                     ctx.fillStyle = "white";
 920                     ctx.fill();
 921                     ctx.strokeStyle = "rgba(255,0,0, 1)";
 922                     ctx.fillStyle = "rgba(255,0,0, 1)";
 923                     ctx.stroke();
 924                     ctx.font = "normal 16px Arial";
 925                     ctx.textAlign = "center";
 926                     ctx.fillText(id, _px, _py + 5);
 927                 }
 928             }
 929         }
 930         if (draw_t) {
 931             drawCurveTControl();
 932         }
 933         if (draw_w) {
 934             drawCurveWControl();
 935         }
 936     }
 937
 938     function drawCurveTControl() {
 939         ctx.lineWidth = 2;
 940         ctx.strokeStyle = "rgba(0,0,0, 0.3)";
 941         ctx.beginPath();
 942         ctx.rect(screenWidth - 80, 40, 28, screenHeight - 80);
 943         ctx.stroke();
 944         var ty = 40 + curveT * (screenHeight - 80);
 945         ctx.beginPath();
 946         ctx.moveTo(screenWidth - 80, ty);
 947         ctx.lineTo(screenWidth - 85, ty - 5);
 948         ctx.lineTo(screenWidth - 85, ty + 5);
 949         ctx.lineTo(screenWidth - 80, ty);
 950         ctx.fillStyle = "rgba(0,0,0, 0.6)";
 951         ctx.fill();
 952         var num = curveT.toFixed(decimal_places);
 953         ctx.font = "normal 10px Arial";
 954         ctx.textAlign = "left";
 955         ctx.fillText(num, screenWidth - 78, ty);
 956     }
 957
 958     function drawCurveWControl() {
 959         var w = -1;
 960         var choice = 0;
 961         for (var curves in tests[testIndex]) {
 962             var curve = tests[testIndex][curves];
 963             if (curve.length != 7) {
 964                 continue;
 965             }
 966             if (choice == curveW) {
 967                 w = curve[6];
 968                 break;
 969             }
 970             ++choice;
 971         }
 972         if (w < 0) {
 973             return;
 974         }
 975         ctx.lineWidth = 2;
 976         ctx.strokeStyle = "rgba(0,0,0, 0.3)";
 977         ctx.beginPath();
 978         ctx.rect(screenWidth - 40, 40, 28, screenHeight - 80);
 979         ctx.stroke();
 980         var ty = 40 + w * (screenHeight - 80);
 981         ctx.beginPath();
 982         ctx.moveTo(screenWidth - 40, ty);
 983         ctx.lineTo(screenWidth - 45, ty - 5);
 984         ctx.lineTo(screenWidth - 45, ty + 5);
 985         ctx.lineTo(screenWidth - 40, ty);
 986         ctx.fillStyle = "rgba(0,0,0, 0.6)";
 987         ctx.fill();
 988         var num = w.toFixed(decimal_places);
 989         ctx.font = "normal 10px Arial";
 990         ctx.textAlign = "left";
 991         ctx.fillText(num, screenWidth - 38, ty);
 992     }
 993
 994     function ptInTControl() {
 995         var e = window.event;
 996         var tgt = e.target || e.srcElement;
 997         var left = tgt.offsetLeft;
 998         var top = tgt.offsetTop;
 999         var x = (e.clientX - left);
1000         var y = (e.clientY - top);
1001         if (x < screenWidth - 80 || x > screenWidth - 50) {
1002             return false;
1003         }
1004         if (y < 40 || y > screenHeight - 80) {
1005             return false;
1006         }
1007         curveT = (y - 40) / (screenHeight - 120);
1008         if (curveT < 0 || curveT > 1) {
1009             throw "stop execution";
1010         }
1011         return true;
1012     }
1013
1014     function ptInWControl() {
1015         var e = window.event;
1016         var tgt = e.target || e.srcElement;
1017         var left = tgt.offsetLeft;
1018         var top = tgt.offsetTop;
1019         var x = (e.clientX - left);
1020         var y = (e.clientY - top);
1021         if (x < screenWidth - 40 || x > screenWidth - 10) {
1022             return false;
1023         }
1024         if (y < 40 || y > screenHeight - 80) {
1025             return false;
1026         }
1027         var w = (y - 40) / (screenHeight - 120);
1028         if (w < 0 || w > 1) {
1029             throw "stop execution";
1030         }
1031         var choice = 0;
1032         for (var curves in tests[testIndex]) {
1033             var curve = tests[testIndex][curves];
1034             if (curve.length != 7) {
1035                 continue;
1036             }
1037             if (choice == curveW) {
1038                 curve[6] = w;
1039                 break;
1040             }
1041             ++choice;
1042         }
1043         return true;
1044     }
1045
1046     function drawTop() {
1047         init(tests[testIndex]);
1048         redraw();
1049     }
1050
1051     function redraw() {
1052         if (focus_on_selection > 0) {
1053             var focusXmin = focusYmin = Infinity;
1054             var focusXmax = focusYmax = -Infinity;
1055             var choice = 0;
1056             for (var curves in tests[testIndex]) {
1057                 if (++choice != focus_on_selection) {
1058                     continue;
1059                 }
1060                 var curve = tests[testIndex][curves];
1061                 var last = curve.length - (curve.length % 2 == 1 ? 1 : 0);
1062                 for (var idx = 0; idx < last; idx += 2) {
1063                     focusXmin = Math.min(focusXmin, curve[idx]);
1064                     focusXmax = Math.max(focusXmax, curve[idx]);
1065                     focusYmin = Math.min(focusYmin, curve[idx + 1]);
1066                     focusYmax = Math.max(focusYmax, curve[idx + 1]);
1067                 }
1068             }
1069             focusXmin -= Math.min(1, Math.max(focusXmax - focusXmin, focusYmax - focusYmin));
1070             if (focusXmin < focusXmax && focusYmin < focusYmax) {
1071                 setScale(focusXmin, focusXmax, focusYmin, focusYmax);
1072             }
1073         }
1074         ctx.beginPath();
1075         ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
1076         ctx.fillStyle = "white";
1077         ctx.fill();
1078         draw(tests[testIndex], testTitles[testIndex]);
1079     }
1080
1081     function doKeyPress(evt) {
1082         var char = String.fromCharCode(evt.charCode);
1083         var focusWasOn = false;
1084         switch (char) {
1085             case '0':
1086             case '1':
1087             case '2':
1088             case '3':
1089             case '4':
1090             case '5':
1091             case '6':
1092             case '7':
1093             case '8':
1094             case '9':
1095                 decimal_places = char - '0';
1096                 redraw();
1097                 break;
1098             case '-':
1099                 focusWasOn = focus_on_selection;
1100                 if (focusWasOn) {
1101                     focus_on_selection = false;
1102                     hscale /= 1.2;
1103                     vscale /= 1.2;
1104                 } else {
1105                     hscale /= 2;
1106                     vscale /= 2;
1107                 }
1108                 calcLeftTop();
1109                 redraw();
1110                 focus_on_selection = focusWasOn;
1111                 break;
1112             case '=':
1113             case '+':
1114                 focusWasOn = focus_on_selection;
1115                 if (focusWasOn) {
1116                     focus_on_selection = false;
1117                     hscale *= 1.2;
1118                     vscale *= 1.2;
1119                 } else {
1120                     hscale *= 2;
1121                     vscale *= 2;
1122                 }
1123                 calcLeftTop();
1124                 redraw();
1125                 focus_on_selection = focusWasOn;
1126                 break;
1127             case 'b':
1128                 draw_cubic_red ^= true;
1129                 redraw();
1130                 break;
1131             case 'c':
1132                 drawTop();
1133                 break;
1134             case 'd':
1135                 var test = tests[testIndex];
1136                 var testClone = [];
1137                 for (var curves in test) {
1138                     var c = test[curves];
1139                     var cClone = [];
1140                     for (var index = 0; index < c.length; ++index) {
1141                         cClone.push(c[index]);
1142                     }
1143                     testClone.push(cClone);
1144                 }
1145                 tests.push(testClone);
1146                 testTitles.push(testTitles[testIndex] + " copy");
1147                 testIndex = tests.length - 1;
1148                 redraw();
1149                 break;
1150             case 'e':
1151                 draw_endpoints = (draw_endpoints + 1) % 4;
1152                 redraw();
1153                 break;
1154             case 'f':
1155                 draw_derivative ^= true;
1156                 redraw();
1157                 break;
1158             case 'g':
1159                 hscale *= 1.2;
1160                 calcLeftTop();
1161                 redraw();
1162                 break;
1163             case 'G':
1164                 hscale /= 1.2;
1165                 calcLeftTop();
1166                 redraw();
1167                 break;
1168             case 'h':
1169                 vscale *= 1.2;
1170                 calcLeftTop();
1171                 redraw();
1172                 break;
1173             case 'H':
1174                 vscale /= 1.2;
1175                 calcLeftTop();
1176                 redraw();
1177                 break;
1178             case 'i':
1179                 draw_ray_intersect = (draw_ray_intersect + 1) % 3;
1180                 redraw();
1181                 break;
1182             case 'l':
1183                 var test = tests[testIndex];
1184                 console.log("<div id=\"" + testTitles[testIndex] + "\" >");
1185                 for (var curves in test) {
1186                     var c = test[curves];
1187                     var s = "{{";
1188                     for (var i = 0; i < c.length; i += 2) {
1189                         s += "{";
1190                         s += c[i] + "," + c[i + 1];
1191                         s += "}";
1192                         if (i + 2 < c.length) {
1193                             s += ", ";
1194                         }
1195                     }
1196                     console.log(s + "}},");
1197                 }
1198                 console.log("</div>");
1199                 break;
1200             case 'm':
1201                 draw_midpoint = (draw_midpoint + 1) % 3;
1202                 redraw();
1203                 break;
1204             case 'N':
1205                 testIndex += 9;
1206             case 'n':
1207                 testIndex = (testIndex + 1) % tests.length;
1208                 drawTop();
1209                 break;
1210             case 'o':
1211                 draw_order ^= true;
1212                 redraw();
1213                 break;
1214             case 'P':
1215                 testIndex -= 9;
1216             case 'p':
1217                 if (--testIndex < 0)
1218                     testIndex = tests.length - 1;
1219                 drawTop();
1220                 break;
1221             case 'q':
1222                 draw_quarterpoint = (draw_quarterpoint + 1) % 3;
1223                 redraw();
1224                 break;
1225             case 'r':
1226                 for (var i = 0; i < testDivs.length; ++i) {
1227                     var title = testDivs[i].id.toString();
1228                     if (title == testTitles[testIndex]) {
1229                         var str = testDivs[i].firstChild.data;
1230                         parse(str, title);
1231                         var original = tests.pop();
1232                         testTitles.pop();
1233                         tests[testIndex] = original;
1234                         break;
1235                     }
1236                 }
1237                 redraw();
1238                 break;
1239             case 's':
1240                 draw_sortpoint = (draw_sortpoint + 1) % 3;
1241                 redraw();
1242                 break;
1243             case 't':
1244                 draw_t ^= true;
1245                 redraw();
1246                 break;
1247             case 'u':
1248                 draw_closest_t ^= true;
1249                 redraw();
1250                 break;
1251             case 'v':
1252                 draw_tangents = (draw_tangents + 1) % 4;
1253                 redraw();
1254                 break;
1255             case 'w':
1256                 ++curveW;
1257                 var choice = 0;
1258                 draw_w = false;
1259                 for (var curves in tests[testIndex]) {
1260                     var curve = tests[testIndex][curves];
1261                     if (curve.length != 7) {
1262                         continue;
1263                     }
1264                     if (choice == curveW) {
1265                         draw_w = true;
1266                         break;
1267                     }
1268                     ++choice;
1269                 }
1270                 if (!draw_w) {
1271                     curveW = -1;
1272                 }
1273                 redraw();
1274                 break;
1275             case 'x':
1276                 draw_point_xy ^= true;
1277                 redraw();
1278                 break;
1279             case 'y':
1280                 draw_mouse_xy ^= true;
1281                 redraw();
1282                 break;
1283             case '\\':
1284                 retina_scale ^= true;
1285                 drawTop();
1286                 break;
1287             case '`':
1288                 ++focus_on_selection;
1289                 if (focus_on_selection >= tests[testIndex].length) {
1290                     focus_on_selection = 0;
1291                 }
1292                 setScale(xmin, xmax, ymin, ymax);
1293                 redraw();
1294                 break;
1295             case '.':
1296                 draw_id = (draw_id + 1) % 3;
1297                 redraw();
1298                 break;
1299         }
1300     }
1301
1302     function doKeyDown(evt) {
1303         var char = evt.keyCode;
1304         var preventDefault = false;
1305         switch (char) {
1306             case 37: // left arrow
1307                 if (evt.shiftKey) {
1308                     testIndex -= 9;
1309                 }
1310                 if (--testIndex < 0)
1311                     testIndex = tests.length - 1;
1312                 if (evt.ctrlKey) {
1313                     redraw();
1314                 } else {
1315                     drawTop();
1316                 }
1317                 preventDefault = true;
1318                 break;
1319             case 39: // right arrow
1320                 if (evt.shiftKey) {
1321                     testIndex += 9;
1322                 }
1323                 if (++testIndex >= tests.length)
1324                     testIndex = 0;
1325                 if (evt.ctrlKey) {
1326                     redraw();
1327                 } else {
1328                     drawTop();
1329                 }
1330                 preventDefault = true;
1331                 break;
1332         }
1333         if (preventDefault) {
1334             evt.preventDefault();
1335             return false;
1336         }
1337         return true;
1338     }
1339
1340     function calcXY() {
1341         var e = window.event;
1342         var tgt = e.target || e.srcElement;
1343         var left = tgt.offsetLeft;
1344         var top = tgt.offsetTop;
1345         mouseX = (e.clientX - left) / hscale + srcLeft;
1346         mouseY = (e.clientY - top) / vscale + srcTop;
1347     }
1348
1349     function calcLeftTop() {
1350         srcLeft = mouseX - screenWidth / 2 / hscale;
1351         srcTop = mouseY - screenHeight / 2 / vscale;
1352     }
1353
1354     function handleMouseClick() {
1355         if ((!draw_t || !ptInTControl()) && (!draw_w || !ptInWControl())) {
1356             calcXY();
1357         } else {
1358             redraw();
1359         }
1360     }
1361
1362     function initDown() {
1363         var test = tests[testIndex];
1364         var bestDistance = 1000000;
1365         activePt = -1;
1366         for (var curves in test) {
1367             var testCurve = test[curves];
1368             if (testCurve.length != 4 && (testCurve.length < 6 || testCurve.length > 8)) {
1369                 continue;
1370             }
1371             var testMax = testCurve.length == 7 ? 6 : testCurve.length;
1372             for (var i = 0; i < testMax; i += 2) {
1373                 var testX = testCurve[i];
1374                 var testY = testCurve[i + 1];
1375                 var dx = testX - mouseX;
1376                 var dy = testY - mouseY;
1377                 var dist = dx * dx + dy * dy;
1378                 if (dist > bestDistance) {
1379                     continue;
1380                 }
1381                 activeCurve = testCurve;
1382                 activePt = i;
1383                 bestDistance = dist;
1384             }
1385         }
1386         if (activePt >= 0) {
1387             lastX = mouseX;
1388             lastY = mouseY;
1389         }
1390     }
1391
1392     function handleMouseOver() {
1393         calcXY();
1394         if (draw_mouse_xy) {
1395             var num = mouseX.toFixed(decimal_places) + ", " + mouseY.toFixed(decimal_places);
1396             ctx.beginPath();
1397             ctx.rect(300, 100, num.length * 6, 10);
1398             ctx.fillStyle = "white";
1399             ctx.fill();
1400             ctx.font = "normal 10px Arial";
1401             ctx.fillStyle = "black";
1402             ctx.textAlign = "left";
1403             ctx.fillText(num, 300, 108);
1404         }
1405         if (!mouseDown) {
1406             activePt = -1;
1407             return;
1408         }
1409         if (activePt < 0) {
1410             initDown();
1411             return;
1412         }
1413         var deltaX = mouseX - lastX;
1414         var deltaY = mouseY - lastY;
1415         lastX = mouseX;
1416         lastY = mouseY;
1417         if (activePt == 0) {
1418             var test = tests[testIndex];
1419             for (var curves in test) {
1420                 var testCurve = test[curves];
1421                 testCurve[0] += deltaX;
1422                 testCurve[1] += deltaY;
1423             }
1424         } else {
1425             activeCurve[activePt] += deltaX;
1426             activeCurve[activePt + 1] += deltaY;
1427         }
1428         redraw();
1429     }
1430
1431     function start() {
1432         for (var i = 0; i < testDivs.length; ++i) {
1433             var title = testDivs[i].id.toString();
1434             var str = testDivs[i].firstChild.data;
1435             parse(str, title);
1436         }
1437         drawTop();
1438         window.addEventListener('keypress', doKeyPress, true);
1439         window.addEventListener('keydown', doKeyDown, true);
1440         window.onresize = function () {
1441             drawTop();
1442         }
1443     }
1444
1445 </script>
1446 </head>
1447
1448 <body onLoad="start();">
1449
1450 <canvas id="canvas" width="750" height="500"
1451     onmousedown="mouseDown = true"
1452     onmouseup="mouseDown = false"
1453     onmousemove="handleMouseOver()"
1454     onclick="handleMouseClick()"
1455     ></canvas >
1456 </body>
1457 </html>