caryclark@google.com | c83c70e | 2013-02-22 21:50:07 +0000 | [diff] [blame^] | 1 | <html> |
| 2 | <head> |
| 3 | <div style="height:0"> |
| 4 | |
| 5 | <div id="test1"> |
| 6 | computeDelta c1=(0,1 1,6 1,0 2,0) t1=0.0166500365 scale1=1 c2=(0,1 0,2 1,0 6,1) t2=0.126935168 scale2=1 |
| 7 | cubicTangent t=0.0166500365 tangent=(-2.85263545,-12.6745554 2.95089079,15.1559166) pt=(0.0491276698 1.24068063) dxy=(2.90176312 13.915236) |
| 8 | cubicTangent t=0.126935168 tangent=(-0.852150487,0.242871519 0.961097194,2.2532568) pt=(0.0544733534 1.24806416) dxy=(0.90662384 1.00519264) |
| 9 | cubicDelta tangent=(-0.00039510851,-0.00189471984 0.0495227783,1.24257535) intersectLen=0.00193547772 tangentLen=14.2145708 scale=0.00390625 result=0.00404241153 |
| 10 | cubicDelta tangent=(0.00495057512,0.00548880522 0.0495227783,1.24257535) intersectLen=0.00739156118 tangentLen=1.35365395 scale=0.00390625 result=0.00936670107 |
| 11 | </div> |
| 12 | |
| 13 | <div id="test2"> |
| 14 | computeDelta c1=(0,1 0,2 1,0 6,1) t1=0.121215914 scale1=0.0187334021 c2=(0,1 1,6 1,0 2,0) t2=0.0167515231 scale2=0.00808482306 |
| 15 | cubicTangent t=0.121215914 tangent=(-0.810112087,0.159501524 0.908958243,2.32468734) pt=(0.0494230781 1.24209443) dxy=(0.859535165 1.08259291) |
| 16 | cubicTangent t=0.0167515231 tangent=(-2.85175241,-12.6666182 2.95059667,15.1508033) pt=(0.0494221303 1.24209251) dxy=(2.90117454 13.9087108) |
| 17 | cubicDelta tangent=(7.4284882e-07,9.35625319e-07 0.0494223352,1.2420935) intersectLen=1.19466276e-06 tangentLen=1.38231983 scale=7.31773521e-05 result=7.40415969e-05 |
| 18 | cubicDelta tangent=(-2.04951629e-07,-9.82572016e-07 0.0494223352,1.2420935) intersectLen=1.00371955e-06 tangentLen=14.2080628 scale=3.15813401e-05 result=3.16519844e-05 |
| 19 | </div> |
| 20 | |
| 21 | <div id="test3"> |
| 22 | computeDelta c1=(0,1 1,6 1,0 2,0) t1=0.0167458976 scale1=6.33039689e-05 c2=(0,1 0,2 1,0 6,1) t2=0.121141872 scale2=0.000148083194 |
| 23 | cubicTangent t=0.0167458976 tangent=(-2.85180136,-12.6670582 2.95061297,15.1510867) pt=(0.0494058095 1.24201427) dxy=(2.90120716 13.9090724) |
| 24 | cubicTangent t=0.121141872 tangent=(-0.809569955,0.158411583 0.908288874,2.32561689) pt=(0.0493594591 1.24201424) dxy=(0.858929414 1.08360265) |
| 25 | cubicDelta tangent=(-1.65436799e-05,-7.93143093e-05 0.0494223532,1.24209358) intersectLen=8.1021312e-05 tangentLen=14.2084235 scale=2.47281129e-07 result=5.94962466e-06 |
| 26 | cubicDelta tangent=(-6.28940702e-05,-7.93454971e-05 0.0494223532,1.24209358) intersectLen=0.000101249059 tangentLen=1.38273441 scale=5.78449976e-07 result=7.38022436e-05 |
| 27 | </div> |
| 28 | |
| 29 | </div> |
| 30 | |
| 31 | <script type="text/javascript"> |
| 32 | |
| 33 | var testDivs = [ |
| 34 | test3, |
| 35 | test2, |
| 36 | test1, |
| 37 | ]; |
| 38 | |
| 39 | var scale, columns, rows, xStart, yStart; |
| 40 | |
| 41 | var ticks = 10; |
| 42 | var at_x = 13 + 0.5; |
| 43 | var at_y = 23 + 0.5; |
| 44 | var decimal_places = 3; |
| 45 | var tests = []; |
| 46 | var testTitles = []; |
| 47 | var testIndex = 0; |
| 48 | var ctx; |
| 49 | var minScale = 1; |
| 50 | var subscale = 1; |
| 51 | var curveT = -1; |
| 52 | var drawCubics = true; |
| 53 | var drawQuads = true; |
| 54 | var drawControlLines = true; |
| 55 | var drawT = true; |
| 56 | |
| 57 | var xmin, xmax, ymin, ymax; |
| 58 | |
| 59 | function strs_to_nums(strs) { |
| 60 | var result = []; |
| 61 | for (var idx in strs) { |
| 62 | var str = strs[idx]; |
| 63 | var num = parseFloat(str); |
| 64 | if (isNaN(num)) { |
| 65 | result.push(str); |
| 66 | } else { |
| 67 | result.push(num); |
| 68 | } |
| 69 | } |
| 70 | return result; |
| 71 | } |
| 72 | |
| 73 | function construct_regexp(pattern) { |
| 74 | var escape = pattern.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'); |
| 75 | escape = escape.replace(/PT_VAL/g, "(-?\\d+\\.?\\d*e?-?\\d*),(-?\\d+\\.?\\d*e?-?\\d*)"); |
| 76 | escape = escape.replace(/T_VAL/g, "(-?\\d+\\.?\\d*e?-?\\d*)"); |
| 77 | escape = escape.replace(/IDX/g, "(\\d+)"); |
| 78 | escape = escape.replace(/OPT/g, "(\\?|-?\\d+)"); |
| 79 | return new RegExp(escape, 'i'); |
| 80 | } |
| 81 | |
| 82 | var COMPUTE_DELTA = 1; |
| 83 | var CUBIC_TANGENT = 2; |
| 84 | var CUBIC_DATA = 3; |
| 85 | |
| 86 | var DELTA_C1_X1 = 1; |
| 87 | var DELTA_C1_Y1 = 2; |
| 88 | var DELTA_C1_X2 = 3; |
| 89 | var DELTA_C1_Y2 = 4; |
| 90 | var DELTA_C1_X3 = 5; |
| 91 | var DELTA_C1_Y3 = 6; |
| 92 | var DELTA_C1_X4 = 7; |
| 93 | var DELTA_C1_Y4 = 8; |
| 94 | var DELTA_T1 = 9; |
| 95 | var DELTA_SCALE1 = 10; |
| 96 | var DELTA_C2_X1 = 11; |
| 97 | var DELTA_C2_Y1 = 12; |
| 98 | var DELTA_C2_X2 = 13; |
| 99 | var DELTA_C2_Y2 = 14; |
| 100 | var DELTA_C2_X3 = 15; |
| 101 | var DELTA_C2_Y3 = 16; |
| 102 | var DELTA_C2_X4 = 17; |
| 103 | var DELTA_C2_Y4 = 18; |
| 104 | var DELTA_T2 = 19; |
| 105 | var DELTA_SCALE2 = 20; |
| 106 | |
| 107 | var TANGENT_T = 1; |
| 108 | var TANGENT_TANGENT_X1 = 2; |
| 109 | var TANGENT_TANGENT_Y1 = 3; |
| 110 | var TANGENT_TANGENT_X2 = 4; |
| 111 | var TANGENT_TANGENT_Y2 = 5; |
| 112 | var TANGENT_PT_X = 6; |
| 113 | var TANGENT_PT_Y = 7; |
| 114 | var TANGENT_DXY_X = 8; |
| 115 | var TANGENT_DXY_Y = 9; |
| 116 | |
| 117 | var CUBIC_TANGENT_X1 = 1; |
| 118 | var CUBIC_TANGENT_Y1 = 2; |
| 119 | var CUBIC_TANGENT_X2 = 3; |
| 120 | var CUBIC_TANGENT_Y2 = 4; |
| 121 | var CUBIC_INTERSECTION_LEN = 5; |
| 122 | var CUBIC_TANGENT_LEN = 6; |
| 123 | var CUBIC_SCALE = 7; |
| 124 | var CUBIC_RESULT = 8; |
| 125 | |
| 126 | function parse(test, title) { |
| 127 | var compute_delta = construct_regexp(" c1=(PT_VAL PT_VAL PT_VAL PT_VAL)" |
| 128 | + " t1=T_VAL scale1=T_VAL c2=(PT_VAL PT_VAL PT_VAL PT_VAL) t2=T_VAL scale2=T_VAL"); |
| 129 | var cubic_tangent = construct_regexp(" t=T_VAL tangent=(PT_VAL PT_VAL)" |
| 130 | + " pt=(T_VAL T_VAL) dxy=(T_VAL T_VAL)"); |
| 131 | var cubic_data = construct_regexp(" tangent=(PT_VAL PT_VAL)" |
| 132 | + " intersectLen=T_VAL tangentLen=T_VAL scale=T_VAL result=T_VAL"); |
| 133 | |
| 134 | var cStrs = test.split("computeDelta"); |
| 135 | var data = []; |
| 136 | for (var cs in cStrs) { |
| 137 | var str = cStrs[cs]; |
| 138 | if (str == "\n") { |
| 139 | continue; |
| 140 | } |
| 141 | var tStrs = str.split("cubicTangent"); |
| 142 | for (var ts in tStrs) { |
| 143 | str = tStrs[ts]; |
| 144 | if (str == "\n") { |
| 145 | continue; |
| 146 | } |
| 147 | var dStrs = str.split("cubicDelta"); |
| 148 | var dataStrs; |
| 149 | for (var ds in dStrs) { |
| 150 | str = dStrs[ds]; |
| 151 | if (str == "\n") { |
| 152 | continue; |
| 153 | } |
| 154 | var lineMatch, lineStrs; |
| 155 | if (compute_delta.test(str)) { |
| 156 | lineMatch = COMPUTE_DELTA; |
| 157 | lineStrs = compute_delta.exec(str); |
| 158 | } else if (cubic_tangent.test(str)) { |
| 159 | lineMatch = CUBIC_TANGENT; |
| 160 | lineStrs = cubic_tangent.exec(str); |
| 161 | } else if (cubic_data.test(str)) { |
| 162 | lineMatch = CUBIC_DATA; |
| 163 | lineStrs = cubic_data.exec(str); |
| 164 | } else { |
| 165 | continue; |
| 166 | } |
| 167 | var line = strs_to_nums(lineStrs); |
| 168 | data.push(lineMatch); |
| 169 | data.push(line); |
| 170 | } |
| 171 | } |
| 172 | } |
| 173 | if (data.length >= 1) { |
| 174 | tests.push(data); |
| 175 | testTitles.push(title); |
| 176 | } |
| 177 | } |
| 178 | |
| 179 | function init(test) { |
| 180 | var canvas = document.getElementById('canvas'); |
| 181 | if (!canvas.getContext) return; |
| 182 | canvas.width = window.innerWidth - at_x; |
| 183 | canvas.height = window.innerHeight - at_y; |
| 184 | ctx = canvas.getContext('2d'); |
| 185 | xmin = Infinity; |
| 186 | xmax = -Infinity; |
| 187 | ymin = Infinity; |
| 188 | ymax = -Infinity; |
| 189 | var scanType = -1; |
| 190 | for (var scansStr in test) { |
| 191 | var scans = parseInt(scansStr); |
| 192 | var scan = test[scans]; |
| 193 | if (scanType == -1) { |
| 194 | scanType = scan; |
| 195 | continue; |
| 196 | } |
| 197 | if (scanType == CUBIC_TANGENT) { |
| 198 | for (var idx = TANGENT_TANGENT_X1; idx < TANGENT_PT_X; idx += 2) { |
| 199 | xmin = Math.min(xmin, scan[idx]); |
| 200 | xmax = Math.max(xmax, scan[idx]); |
| 201 | ymin = Math.min(ymin, scan[idx + 1]); |
| 202 | ymax = Math.max(ymax, scan[idx + 1]); |
| 203 | } |
| 204 | } |
| 205 | scanType = -1; |
| 206 | } |
| 207 | var testW = xmax - xmin; |
| 208 | var testH = ymax - ymin; |
| 209 | subscale = 1; |
| 210 | if (testW > 1e10 || testH > 1e10) { |
| 211 | return; |
| 212 | } |
| 213 | while (testW * subscale < 0.1 && testH * subscale < 0.1) { |
| 214 | subscale *= 10; |
| 215 | } |
| 216 | while (testW * subscale > 10 && testH * subscale > 10) { |
| 217 | subscale /= 10; |
| 218 | } |
| 219 | calcFromScale(); |
| 220 | } |
| 221 | |
| 222 | function calcFromScale() { |
| 223 | xStart = Math.floor(xmin * subscale) / subscale; |
| 224 | yStart = Math.floor(ymin * subscale) / subscale; |
| 225 | var xEnd = Math.ceil(xmin * subscale) / subscale; |
| 226 | var yEnd = Math.ceil(ymin * subscale) / subscale; |
| 227 | var cCelsW = Math.floor(ctx.canvas.width / 10); |
| 228 | var cCelsH = Math.floor(ctx.canvas.height / 10); |
| 229 | var testW = xEnd - xStart; |
| 230 | var testH = yEnd - yStart; |
| 231 | var scaleWH = 1; |
| 232 | while (cCelsW > testW * scaleWH * 10 && cCelsH > testH * scaleWH * 10) { |
| 233 | scaleWH *= 10; |
| 234 | } |
| 235 | while (cCelsW * 10 < testW * scaleWH && cCelsH * 10 < testH * scaleWH) { |
| 236 | scaleWH /= 10; |
| 237 | } |
| 238 | |
| 239 | columns = Math.ceil(xmax * subscale) - Math.floor(xmin * subscale) + 1; |
| 240 | rows = Math.ceil(ymax * subscale) - Math.floor(ymin * subscale) + 1; |
| 241 | |
| 242 | var hscale = ctx.canvas.width / columns / ticks; |
| 243 | var vscale = ctx.canvas.height / rows / ticks; |
| 244 | minScale = Math.floor(Math.min(hscale, vscale)); |
| 245 | scale = minScale * subscale; |
| 246 | } |
| 247 | |
| 248 | function drawPoint(px, py, xoffset, yoffset, unit) { |
| 249 | var label = px.toFixed(decimal_places) + ", " + py.toFixed(decimal_places); |
| 250 | var _px = px * unit + xoffset; |
| 251 | var _py = py * unit + yoffset; |
| 252 | ctx.beginPath(); |
| 253 | ctx.arc(_px, _py, 3, 0, Math.PI*2, true); |
| 254 | ctx.closePath(); |
| 255 | ctx.fill(); |
| 256 | ctx.fillText(label, _px + 5, _py); |
| 257 | } |
| 258 | |
| 259 | function drawTPt(scan, cIdx, tIdx, xoffset, yoffset, unit) { |
| 260 | var t = scan[tIdx]; |
| 261 | var one_t = 1 - t; |
| 262 | var one_t2 = one_t * one_t; |
| 263 | var a = one_t2 * one_t; |
| 264 | var b = 3 * one_t2 * t; |
| 265 | var t2 = t * t; |
| 266 | var c = 3 * one_t * t2; |
| 267 | var d = t2 * t; |
| 268 | var x = a * scan[cIdx + 0] + b * scan[cIdx + 2] + c * scan[cIdx + 4] + d * scan[cIdx + 6]; |
| 269 | var y = a * scan[cIdx + 1] + b * scan[cIdx + 3] + c * scan[cIdx + 5] + d * scan[cIdx + 7]; |
| 270 | drawPoint(x, y, xoffset, yoffset, unit); |
| 271 | } |
| 272 | |
| 273 | function draw(test, title, scale) { |
| 274 | ctx.fillStyle = "rgba(0,0,0, 0.1)"; |
| 275 | ctx.font = "normal 50px Arial"; |
| 276 | ctx.fillText(title, 50, 50); |
| 277 | ctx.font = "normal 10px Arial"; |
| 278 | |
| 279 | var unit = scale * ticks; |
| 280 | ctx.lineWidth = 1; |
| 281 | var i; |
| 282 | for (i = 0; i <= rows * ticks; ++i) { |
| 283 | ctx.strokeStyle = (i % ticks) != 0 ? "rgb(200,200,200)" : "black"; |
| 284 | ctx.beginPath(); |
| 285 | ctx.moveTo(at_x + 0, at_y + i * minScale); |
| 286 | ctx.lineTo(at_x + ticks * columns * minScale, at_y + i * minScale); |
| 287 | ctx.stroke(); |
| 288 | } |
| 289 | for (i = 0; i <= columns * ticks; ++i) { |
| 290 | ctx.strokeStyle = (i % ticks) != 0 ? "rgb(200,200,200)" : "black"; |
| 291 | ctx.beginPath(); |
| 292 | ctx.moveTo(at_x + i * minScale, at_y + 0); |
| 293 | ctx.lineTo(at_x + i * minScale, at_y + ticks * rows * minScale); |
| 294 | ctx.stroke(); |
| 295 | } |
| 296 | |
| 297 | var xoffset = xStart * -unit + at_x; |
| 298 | var yoffset = yStart * -unit + at_y; |
| 299 | |
| 300 | ctx.fillStyle = "rgb(40,80,60)" |
| 301 | for (i = 0; i <= columns; i += 1) |
| 302 | { |
| 303 | num = xStart + i / subscale; |
| 304 | ctx.fillText(num.toFixed(decimal_places), xoffset + num * unit - 5, 10); |
| 305 | } |
| 306 | for (i = 0; i <= rows; i += 1) |
| 307 | { |
| 308 | num = yStart + i / subscale; |
| 309 | ctx.fillText(num.toFixed(decimal_places), 0, yoffset + num * unit + 0); |
| 310 | } |
| 311 | var scanType = -1; |
| 312 | var partIndex = 0; |
| 313 | for (var scans in test) { |
| 314 | var scan = test[scans]; |
| 315 | if (scanType == -1) { |
| 316 | scanType = scan; |
| 317 | continue; |
| 318 | } |
| 319 | partIndex++; |
| 320 | if (scanType == COMPUTE_DELTA) { |
| 321 | ctx.beginPath(); |
| 322 | ctx.moveTo(xoffset + scan[DELTA_C1_X1] * unit, yoffset + scan[DELTA_C1_Y1] * unit); |
| 323 | ctx.bezierCurveTo( |
| 324 | xoffset + scan[DELTA_C1_X2] * unit, yoffset + scan[DELTA_C1_Y2] * unit, |
| 325 | xoffset + scan[DELTA_C1_X3] * unit, yoffset + scan[DELTA_C1_Y3] * unit, |
| 326 | xoffset + scan[DELTA_C1_X4] * unit, yoffset + scan[DELTA_C1_Y4] * unit); |
| 327 | ctx.strokeStyle = "red"; // "rgba(0,0,0, 1.0)"; |
| 328 | ctx.stroke(); |
| 329 | ctx.beginPath(); |
| 330 | ctx.moveTo(xoffset + scan[DELTA_C2_X1] * unit, yoffset + scan[DELTA_C2_Y1] * unit); |
| 331 | ctx.bezierCurveTo( |
| 332 | xoffset + scan[DELTA_C2_X2] * unit, yoffset + scan[DELTA_C2_Y2] * unit, |
| 333 | xoffset + scan[DELTA_C2_X3] * unit, yoffset + scan[DELTA_C2_Y3] * unit, |
| 334 | xoffset + scan[DELTA_C2_X4] * unit, yoffset + scan[DELTA_C2_Y4] * unit); |
| 335 | ctx.strokeStyle = "blue"; // "rgba(0,0,0, 1.0)"; |
| 336 | ctx.stroke(); |
| 337 | } |
| 338 | if (scanType == COMPUTE_DELTA && drawControlLines) { |
| 339 | ctx.beginPath(); |
| 340 | ctx.moveTo(xoffset + scan[DELTA_C1_X1] * unit, yoffset + scan[DELTA_C1_Y1] * unit); |
| 341 | ctx.lineTo(xoffset + scan[DELTA_C1_X2] * unit, yoffset + scan[DELTA_C1_Y2] * unit); |
| 342 | ctx.lineTo(xoffset + scan[DELTA_C1_X3] * unit, yoffset + scan[DELTA_C1_Y3] * unit); |
| 343 | ctx.lineTo(xoffset + scan[DELTA_C1_X4] * unit, yoffset + scan[DELTA_C1_Y4] * unit); |
| 344 | ctx.strokeStyle = "rgba(0,0,0, 0.3)"; |
| 345 | ctx.stroke(); |
| 346 | ctx.beginPath(); |
| 347 | ctx.moveTo(xoffset + scan[DELTA_C2_X1] * unit, yoffset + scan[DELTA_C2_Y1] * unit); |
| 348 | ctx.lineTo(xoffset + scan[DELTA_C2_X2] * unit, yoffset + scan[DELTA_C2_Y2] * unit); |
| 349 | ctx.lineTo(xoffset + scan[DELTA_C2_X3] * unit, yoffset + scan[DELTA_C2_Y3] * unit); |
| 350 | ctx.lineTo(xoffset + scan[DELTA_C2_X4] * unit, yoffset + scan[DELTA_C2_Y4] * unit); |
| 351 | ctx.strokeStyle = "rgba(0,0,0, 0.3)"; |
| 352 | ctx.stroke(); |
| 353 | } |
| 354 | if (scanType == COMPUTE_DELTA && drawT) { |
| 355 | drawTPt(scan, DELTA_C1_X1, DELTA_T1, xoffset, yoffset, unit); |
| 356 | drawTPt(scan, DELTA_C2_X1, DELTA_T2, xoffset, yoffset, unit); |
| 357 | var num = "c1=" + scan[DELTA_T1].toFixed(decimal_places) |
| 358 | + " c2=" + scan[DELTA_T2].toFixed(decimal_places); |
| 359 | ctx.beginPath(); |
| 360 | ctx.rect(200,10,200,10); |
| 361 | ctx.fillStyle="white"; |
| 362 | ctx.fill(); |
| 363 | ctx.fillStyle="black"; |
| 364 | ctx.fillText(num, 230, 18); |
| 365 | } |
| 366 | if (scanType == CUBIC_TANGENT) { |
| 367 | ctx.beginPath(); |
| 368 | ctx.moveTo(xoffset + scan[TANGENT_TANGENT_X1] * unit, yoffset + scan[TANGENT_TANGENT_Y1] * unit); |
| 369 | ctx.lineTo(xoffset + scan[TANGENT_TANGENT_X2] * unit, yoffset + scan[TANGENT_TANGENT_Y2] * unit); |
| 370 | ctx.strokeStyle = partIndex > 2 ? "rgba(0,0,255, 0.7)" : "rgba(255,0,0, 0.7)"; |
| 371 | ctx.stroke(); |
| 372 | } |
| 373 | scanType = -1; |
| 374 | } |
| 375 | } |
| 376 | |
| 377 | function drawTop() { |
| 378 | init(tests[testIndex]); |
| 379 | redraw(); |
| 380 | } |
| 381 | |
| 382 | function redraw() { |
| 383 | ctx.beginPath(); |
| 384 | ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height); |
| 385 | ctx.fillStyle="white"; |
| 386 | ctx.fill(); |
| 387 | draw(tests[testIndex], testTitles[testIndex], scale); |
| 388 | } |
| 389 | |
| 390 | function doKeyPress(evt) { |
| 391 | var char = String.fromCharCode(evt.charCode); |
| 392 | switch (char) { |
| 393 | case 'c': |
| 394 | drawCubics ^= true; |
| 395 | redraw(); |
| 396 | break; |
| 397 | case 'd': |
| 398 | decimal_places++; |
| 399 | redraw(); |
| 400 | break; |
| 401 | case 'D': |
| 402 | decimal_places--; |
| 403 | if (decimal_places < 1) { |
| 404 | decimal_places = 1; |
| 405 | } |
| 406 | redraw(); |
| 407 | break; |
| 408 | case 'l': |
| 409 | drawControlLines ^= true; |
| 410 | redraw(); |
| 411 | break; |
| 412 | case 'N': |
| 413 | testIndex += 9; |
| 414 | case 'n': |
| 415 | if (++testIndex >= tests.length) |
| 416 | testIndex = 0; |
| 417 | mouseX = Infinity; |
| 418 | drawTop(); |
| 419 | break; |
| 420 | case 'P': |
| 421 | testIndex -= 9; |
| 422 | case 'p': |
| 423 | if (--testIndex < 0) |
| 424 | testIndex = tests.length - 1; |
| 425 | mouseX = Infinity; |
| 426 | drawTop(); |
| 427 | break; |
| 428 | case 'q': |
| 429 | drawQuads ^= true; |
| 430 | redraw(); |
| 431 | break; |
| 432 | case 't': |
| 433 | drawT ^= true; |
| 434 | redraw(); |
| 435 | break; |
| 436 | case 'x': |
| 437 | drawCubics ^= true; |
| 438 | drawQuads ^= true; |
| 439 | redraw(); |
| 440 | break; |
| 441 | case '-': |
| 442 | case '_': |
| 443 | subscale /= 2; |
| 444 | calcFromScale(); |
| 445 | redraw(); |
| 446 | break; |
| 447 | case '+': |
| 448 | case '=': |
| 449 | subscale *= 2; |
| 450 | calcFromScale(); |
| 451 | redraw(); |
| 452 | break; |
| 453 | } |
| 454 | } |
| 455 | |
| 456 | /* |
| 457 | var e = window.event; |
| 458 | var tgt = e.target || e.srcElement; |
| 459 | var min = tgt.offsetTop + Math.ceil(at_y); |
| 460 | var max = min + ticks * rows * minScale; |
| 461 | curveT = (e.clientY - min) / (max - min); |
| 462 | redraw(); |
| 463 | } |
| 464 | */ |
| 465 | |
| 466 | function calcXY() { |
| 467 | var e = window.event; |
| 468 | var tgt = e.target || e.srcElement; |
| 469 | var left = tgt.offsetLeft; |
| 470 | var top = tgt.offsetTop; |
| 471 | var unit = scale * ticks; |
| 472 | mouseX = (e.clientX - left - Math.ceil(at_x) + 1) / unit + xStart; |
| 473 | mouseY = (e.clientY - top - Math.ceil(at_y)) / unit + yStart; |
| 474 | } |
| 475 | |
| 476 | function handleMouseOver() { |
| 477 | /* calcXY(); |
| 478 | var num = mouseX.toFixed(decimal_places) + ", " + mouseY.toFixed(decimal_places); |
| 479 | ctx.beginPath(); |
| 480 | ctx.rect(30,10,200,10); |
| 481 | ctx.fillStyle="white"; |
| 482 | ctx.fill(); |
| 483 | ctx.fillStyle="black"; |
| 484 | ctx.fillText(num, 30, 18); |
| 485 | */ |
| 486 | } |
| 487 | |
| 488 | function start() { |
| 489 | for (i = 0; i < testDivs.length; ++i) { |
| 490 | var title = testDivs[i].id.toString(); |
| 491 | var str = testDivs[i].firstChild.data; |
| 492 | parse(str, title); |
| 493 | } |
| 494 | drawTop(); |
| 495 | window.addEventListener('keypress', doKeyPress, true); |
| 496 | window.onresize = function() { |
| 497 | drawTop(); |
| 498 | } |
| 499 | } |
| 500 | |
| 501 | function handleMouseClick() { |
| 502 | start(); |
| 503 | } |
| 504 | |
| 505 | function startx() { |
| 506 | } |
| 507 | |
| 508 | </script> |
| 509 | </head> |
| 510 | |
| 511 | <body onLoad="startx();"> |
| 512 | <canvas id="canvas" width="750" height="500" |
| 513 | onmousemove="handleMouseOver()" |
| 514 | onclick="handleMouseClick()" |
| 515 | ></canvas > |
| 516 | </body> |
| 517 | </html> |