| <!DOCTYPE html> |
| |
| <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <meta charset="utf-8" /> |
| <title></title> |
| <div style="height:0"> |
| <div id="sect1"> |
| {{{1.80943513, 3.0778243500000002}, {1.66686702, 2.1680693600000001}, {1.68301272, 0}, {3, 0}}} id=1 |
| {{{0, 1}, {0, 2}, {0.75, 2.25}, {1.75, 2.25}}} id=2 |
| {{{1.75, 2.25}, {2.75, 2.25}, {4, 2}, {5, 2}}} id=4 |
| </div> |
| |
| <div id="sect2"> |
| {{{1.80943513, 3.0778243500000002}, {1.66686702, 2.1680693600000001}, {1.68301272, 0}, {3, 0}}} id=1 |
| {{{0, 1}, {0, 2}, {0.75, 2.25}, {1.75, 2.25}}} id=2 |
| {{{1.75, 2.25}, {2.2500000000000018, 2.25}, {2.8124999999999991, 2.1875}, {3.375, 2.125}}} id=4 |
| </div> |
| |
| <div id="sect3"> |
| {{{1.80943513, 3.0778243500000002}, {1.738151075, 2.6229468550000004}, {1.7065454725, 1.8534907675000001}, {1.85738429375, 1.19775405375}}} id=1 |
| {{{0, 1}, {0, 2}, {0.75, 2.25}, {1.75, 2.25}}} id=2 |
| {{{1.75, 2.25}, {2.2500000000000018, 2.25}, {2.8124999999999991, 2.1875}, {3.375, 2.125}}} id=4 |
| </div> |
| |
| <div id="sect4"> |
| {{{1.80943513, 3.0778243500000002}, {1.7737931025, 2.8503856025000003}, {1.7480706881249999, 2.5443022068750003}, {1.7501136332812499, 2.2131114089062502}}} id=1 |
| {{{0, 1}, {0, 2}, {0.75, 2.25}, {1.75, 2.25}}} id=2 |
| {{{1.75, 2.25}, {2.2500000000000018, 2.25}, {2.8124999999999991, 2.1875}, {3.375, 2.125}}} id=4 |
| </div> |
| |
| <div id="sect5"> |
| {{{1.80943513, 3.0778243500000002}, {1.7737931025, 2.8503856025000003}, {1.7480706881249999, 2.5443022068750003}, {1.7501136332812499, 2.2131114089062502}}} id=1 |
| {{{0.5, 2}, {0.81249999999999956, 2.1874999999999987}, {1.2500000000000009, 2.2500000000000013}, {1.75, 2.25}}} id=8 |
| {{{1.75, 2.25}, {2.2500000000000018, 2.25}, {2.8124999999999991, 2.1875}, {3.375, 2.125}}} id=4 |
| </div> |
| |
| <div id="sect6"> |
| {{{1.80943513, 3.0778243500000002}, {1.7737931025, 2.8503856025000003}, {1.7480706881249999, 2.5443022068750003}, {1.7501136332812499, 2.2131114089062502}}} id=1 |
| {{{0.5, 2}, {0.81249999999999956, 2.1874999999999987}, {1.2500000000000009, 2.2500000000000013}, {1.75, 2.25}}} id=8 |
| {{{1.75, 2.25}, {1.9999999999999976, 2.25}, {2.2656250000000022, 2.234375}, {2.5390625, 2.2109375}}} id=4 |
| </div> |
| |
| <div id="sect7"> |
| {{{1.80943513, 3.0778243500000002}, {1.7737931025, 2.8503856025000003}, {1.7480706881249999, 2.5443022068750003}, {1.7501136332812499, 2.2131114089062502}}} id=1 |
| {{{1.0546875, 2.1953125}, {1.2656250000000009, 2.2343750000000009}, {1.4999999999999996, 2.2499999999999996}, {1.75, 2.25}}} id=12 |
| {{{1.75, 2.25}, {1.9999999999999976, 2.25}, {2.2656250000000022, 2.234375}, {2.5390625, 2.2109375}}} id=4 |
| </div> |
| |
| <div id="sect8"> |
| {{{1.7656425168945311, 2.6843748983789064}, {1.7550120280078125, 2.5380253562890633}, {1.7490921607031253, 2.3787068078906248}, {1.7501136332812499, 2.2131114089062502}}} id=7 |
| {{{1.0546875, 2.1953125}, {1.2656250000000009, 2.2343750000000009}, {1.4999999999999996, 2.2499999999999996}, {1.75, 2.25}}} id=12 |
| {{{1.75, 2.25}, {1.9999999999999976, 2.25}, {2.2656250000000022, 2.234375}, {2.5390625, 2.2109375}}} id=4 |
| </div> |
| |
| <div id="sect9"> |
| {{{1.7656425168945311, 2.6843748983789064}, {1.7550120280078125, 2.5380253562890633}, {1.7490921607031253, 2.3787068078906248}, {1.7501136332812499, 2.2131114089062502}}} id=7 |
| {{{1.0546875, 2.1953125}, {1.2656250000000009, 2.2343750000000009}, {1.4999999999999996, 2.2499999999999996}, {1.75, 2.25}}} id=12 |
| {{{1.75, 2.25}, {1.8750000000000016, 2.2499999999999991}, {2.0039062499999982, 2.2460937500000004}, {2.1357421875, 2.2392578125}}} id=4 |
| </div> |
| |
| <div id="sect10"> |
| {{{1.7656425168945311, 2.6843748983789064}, {1.7550120280078125, 2.5380253562890633}, {1.7490921607031253, 2.3787068078906248}, {1.7501136332812499, 2.2131114089062502}}} id=7 |
| {{{1.3876953125, 2.2373046875}, {1.50390625, 2.24609375}, {1.625, 2.25}, {1.75, 2.25}}} id=16 |
| {{{1.75, 2.25}, {1.8750000000000016, 2.2499999999999991}, {2.0039062499999982, 2.2460937500000004}, {2.1357421875, 2.2392578125}}} id=4 |
| </div> |
| |
| <div id="sect11"> |
| {{{1.7535085895385742, 2.4559603499780276}, {1.7508274956738286, 2.3771375952441409}, {1.7496028969921869, 2.2959091083984369}, {1.7501136332812499, 2.2131114089062502}}} id=9 |
| {{{1.3876953125, 2.2373046875}, {1.50390625, 2.24609375}, {1.625, 2.25}, {1.75, 2.25}}} id=16 |
| {{{1.75, 2.25}, {1.8750000000000016, 2.2499999999999991}, {2.0039062499999982, 2.2460937500000004}, {2.1357421875, 2.2392578125}}} id=4 |
| </div> |
| |
| <div id="sect12"> |
| {{{1.7535085895385742, 2.4559603499780276}, {1.7508274956738286, 2.3771375952441409}, {1.7496028969921869, 2.2959091083984369}, {1.7501136332812499, 2.2131114089062502}}} id=9 |
| {{{1.3876953125, 2.2373046875}, {1.50390625, 2.24609375}, {1.625, 2.25}, {1.75, 2.25}}} id=16 |
| {{{1.75, 2.25}, {1.8124999999999989, 2.2499999999999996}, {1.8759765625000011, 2.2490234374999996}, {1.9403076171875, 2.2471923828125}}} id=4 |
| </div> |
| |
| <div id="sect13"> |
| {{{1.7535085895385742, 2.4559603499780276}, {1.7508274956738286, 2.3771375952441409}, {1.7496028969921869, 2.2959091083984369}, {1.7501136332812499, 2.2131114089062502}}} id=9 |
| {{{1.5655517578125, 2.2469482421875}, {1.6259765625, 2.2490234375}, {1.6875, 2.25}, {1.75, 2.25}}} id=20 |
| {{{1.75, 2.25}, {1.8124999999999989, 2.2499999999999996}, {1.8759765625000011, 2.2490234374999996}, {1.9403076171875, 2.2471923828125}}} id=4 |
| </div> |
| |
| <div id="sect14"> |
| {{{1.7506141751022339, 2.3360264837265015}, {1.7500367307348632, 2.2955168052368169}, {1.7498582651367187, 2.2545102586523438}, {1.7501136332812499, 2.2131114089062502}}} id=11 |
| {{{1.5655517578125, 2.2469482421875}, {1.6259765625, 2.2490234375}, {1.6875, 2.25}, {1.75, 2.25}}} id=20 |
| {{{1.75, 2.25}, {1.8124999999999989, 2.2499999999999996}, {1.8759765625000011, 2.2490234374999996}, {1.9403076171875, 2.2471923828125}}} id=4 |
| </div> |
| |
| <div id="sect15"> |
| {{{1.7506141751022339, 2.3360264837265015}, {1.7500367307348632, 2.2955168052368169}, {1.7498582651367187, 2.2545102586523438}, {1.7501136332812499, 2.2131114089062502}}} id=11 |
| {{{1.5655517578125, 2.2469482421875}, {1.6259765625, 2.2490234375}, {1.6875, 2.25}, {1.75, 2.25}}} id=20 |
| {{{1.75, 2.25}, {1.7812500000000011, 2.2500000000000004}, {1.8127441406249989, 2.2497558593749991}, {1.8444671630859375, 2.2492828369140625}}} id=4 |
| </div> |
| |
| <div id="sect16"> |
| {{{1.7506141751022339, 2.3360264837265015}, {1.7500367307348632, 2.2955168052368169}, {1.7498582651367187, 2.2545102586523438}, {1.7501136332812499, 2.2131114089062502}}} id=11 |
| {{{1.6569976806640625, 2.2492523193359375}, {1.687744140625, 2.249755859375}, {1.71875, 2.25}, {1.75, 2.25}}} id=24 |
| {{{1.75, 2.25}, {1.7812500000000011, 2.2500000000000004}, {1.8127441406249989, 2.2497558593749991}, {1.8444671630859375, 2.2492828369140625}}} id=4 |
| </div> |
| |
| <div id="sect17"> |
| {{{1.7500515994997787, 2.274902385537529}, {1.7499667235723877, 2.2544121828619379}, {1.7499859492089846, 2.2338108337792986}, {1.7501136332812499, 2.2131114089062502}}} id=13 |
| {{{1.6569976806640625, 2.2492523193359375}, {1.687744140625, 2.249755859375}, {1.71875, 2.25}, {1.75, 2.25}}} id=24 |
| {{{1.75, 2.25}, {1.7812500000000011, 2.2500000000000004}, {1.8127441406249989, 2.2497558593749991}, {1.8444671630859375, 2.2492828369140625}}} id=4 |
| </div> |
| |
| <div id="sect18"> |
| {{{1.7500515994997787, 2.274902385537529}, {1.7499667235723877, 2.2544121828619379}, {1.7499859492089846, 2.2338108337792986}, {1.7501136332812499, 2.2131114089062502}}} id=13 |
| {{{1.6569976806640625, 2.2492523193359375}, {1.687744140625, 2.249755859375}, {1.71875, 2.25}, {1.75, 2.25}}} id=24 |
| {{{1.75, 2.25}, {1.7656249999999989, 2.25}, {1.7813110351562511, 2.24993896484375}, {1.7970561981201172, 2.2498188018798828}}} id=4 |
| </div> |
| |
| <div id="sect19"> |
| {{{1.7500515994997787, 2.274902385537529}, {1.7499667235723877, 2.2544121828619379}, {1.7499859492089846, 2.2338108337792986}, {1.7501136332812499, 2.2131114089062502}}} id=13 |
| {{{1.7033100128173828, 2.2498149871826172}, {1.7188110351562504, 2.2499389648437504}, {1.7343749999999991, 2.2499999999999991}, {1.75, 2.25}}} id=28 |
| {{{1.75, 2.25}, {1.7656249999999989, 2.25}, {1.7813110351562511, 2.24993896484375}, {1.7970561981201172, 2.2498188018798828}}} id=4 |
| </div> |
| |
| <div id="sect20"> |
| {{{1.7500515994997787, 2.274902385537529}, {1.7500091615360831, 2.2646572841997337}, {1.7499927489633849, 2.2543843962601757}, {1.7500029063906433, 2.2440853555459359}}} id=13 |
| {{{1.7033100128173828, 2.2498149871826172}, {1.7188110351562504, 2.2499389648437504}, {1.7343749999999991, 2.2499999999999991}, {1.75, 2.25}}} id=28 |
| {{{1.75, 2.25}, {1.7656249999999989, 2.25}, {1.7813110351562511, 2.24993896484375}, {1.7970561981201172, 2.2498188018798828}}} id=4 |
| </div> |
| |
| <div id="sect21"> |
| {{{1.7500515994997787, 2.274902385537529}, {1.7500091615360831, 2.2646572841997337}, {1.7499927489633849, 2.2543843962601757}, {1.7500029063906433, 2.2440853555459359}}} id=13 |
| {{{1.7033100128173828, 2.2498149871826172}, {1.7188110351562504, 2.2499389648437504}, {1.7343749999999991, 2.2499999999999991}, {1.75, 2.25}}} id=28 |
| {{{1.75, 2.25}, {1.7578125000000004, 2.25}, {1.7656402587890616, 2.2499847412109375}, {1.7734830379486084, 2.2499544620513916}}} id=4 |
| </div> |
| |
| <div id="sect22"> |
| {{{1.7500515994997787, 2.274902385537529}, {1.7500091615360831, 2.2646572841997337}, {1.7499927489633849, 2.2543843962601757}, {1.7500029063906433, 2.2440853555459359}}} id=13 |
| {{{1.7266085147857666, 2.2499539852142334}, {1.7343902587890614, 2.2499847412109362}, {1.7421875000000011, 2.2500000000000013}, {1.75, 2.25}}} id=32 |
| {{{1.75, 2.25}, {1.7578125000000004, 2.25}, {1.7656402587890616, 2.2499847412109375}, {1.7734830379486084, 2.2499544620513916}}} id=4 |
| </div> |
| |
| <div id="sect23"> |
| {{{1.7500075296736033, 2.2595140978078994}, {1.749999391463374, 2.2543778580665053}, {1.7499978276770138, 2.2492348759030554}, {1.7500029063906433, 2.2440853555459359}}} id=17 |
| {{{1.7266085147857666, 2.2499539852142334}, {1.7343902587890614, 2.2499847412109362}, {1.7421875000000011, 2.2500000000000013}, {1.75, 2.25}}} id=32 |
| {{{1.75, 2.25}, {1.7578125000000004, 2.25}, {1.7656402587890616, 2.2499847412109375}, {1.7734830379486084, 2.2499544620513916}}} id=4 |
| </div> |
| |
| <div id="sect24"> |
| {{{1.7500075296736033, 2.2595140978078994}, {1.749999391463374, 2.2543778580665053}, {1.7499978276770138, 2.2492348759030554}, {1.7500029063906433, 2.2440853555459359}}} id=17 |
| {{{1.7266085147857666, 2.2499539852142334}, {1.7343902587890614, 2.2499847412109362}, {1.7421875000000011, 2.2500000000000013}, {1.75, 2.25}}} id=32 |
| {{{1.75, 2.25}, {1.7539062499999991, 2.25}, {1.7578163146972661, 2.2499961853027344}, {1.7617301642894745, 2.2499885857105255}}} id=4 |
| </div> |
| |
| <div id="sect25"> |
| {{{1.7500075296736033, 2.2595140978078994}, {1.749999391463374, 2.2543778580665053}, {1.7499978276770138, 2.2492348759030554}, {1.7500029063906433, 2.2440853555459359}}} id=17 |
| {{{1.7382927238941193, 2.2499885261058807}, {1.7421913146972665, 2.2499961853027353}, {1.7460937499999996, 2.2499999999999996}, {1.75, 2.25}}} id=36 |
| {{{1.75, 2.25}, {1.7539062499999991, 2.25}, {1.7578163146972661, 2.2499961853027344}, {1.7617301642894745, 2.2499885857105255}}} id=4 |
| </div> |
| |
| <div id="sect26"> |
| {{{1.7500002616856762, 2.2518047069078144}, {1.7499994883020116, 2.2492332413546396}, {1.7500003670338282, 2.2466601157244943}, {1.7500029063906433, 2.2440853555459359}}} id=19 |
| {{{1.75, 2.25}, {1.7539062499999991, 2.25}, {1.7578163146972661, 2.2499961853027344}, {1.7617301642894745, 2.2499885857105255}}} id=4 |
| </div> |
| |
| <div id="sect27"> |
| {{{1.7500002616856762, 2.2518047069078144}, {1.7499994883020116, 2.2492332413546396}, {1.7500003670338282, 2.2466601157244943}, {1.7500029063906433, 2.2440853555459359}}} id=19 |
| {{{1.75, 2.25}, {1.7519531250000011, 2.2499999999999991}, {1.7539072036743153, 2.249999046325684}, {1.7558622322976589, 2.2499971427023411}}} id=4 |
| </div> |
| |
| <div id="sect28"> |
| {{{1.7500002616856762, 2.2518047069078144}, {1.749999874993843, 2.2505189741312273}, {1.7499999013308822, 2.2492328263353962}, {1.7500003417604797, 2.2479462667113941}}} id=19 |
| {{{1.75, 2.25}, {1.7519531250000011, 2.2499999999999991}, {1.7539072036743153, 2.249999046325684}, {1.7558622322976589, 2.2499971427023411}}} id=4 |
| </div> |
| |
| <div id="sect29"> |
| {{{1.7500002616856762, 2.2518047069078144}, {1.749999874993843, 2.2505189741312273}, {1.7499999013308822, 2.2492328263353962}, {1.7500003417604797, 2.2479462667113941}}} id=19 |
| {{{1.75, 2.25}, {1.7509765624999989, 2.2499999999999996}, {1.7519533634185802, 2.2499997615814205}, {1.752930402290076, 2.249999285209924}}} id=4 |
| </div> |
| |
| <div id="sect30"> |
| {{{1.7500002616856762, 2.2518047069078144}, {1.7500000683397601, 2.2511618405195208}, {1.7499999782510609, 2.2505188703764163}, {1.7499999915525417, 2.2498757968773848}}} id=19 |
| {{{1.75, 2.25}, {1.7509765624999989, 2.2499999999999996}, {1.7519533634185802, 2.2499997615814205}, {1.752930402290076, 2.249999285209924}}} id=4 |
| </div> |
| |
| <div id="sect31"> |
| {{{1.7500002616856762, 2.2518047069078144}, {1.7500000683397601, 2.2511618405195208}, {1.7499999782510609, 2.2505188703764163}, {1.7499999915525417, 2.2498757968773848}}} id=19 |
| {{{1.75, 2.25}, {1.7504882812500011, 2.2500000000000004}, {1.7509766221046437, 2.2499999403953543}, {1.7514650225057267, 2.2499998212442733}}} id=4 |
| </div> |
| |
| <div id="sect32"> |
| {{{1.7500000491263352, 2.2508403295591259}, {1.7500000040986061, 2.2505188445374351}, {1.7499999849018013, 2.2501973336269003}, {1.7499999915525417, 2.2498757968773848}}} id=25 |
| {{{1.75, 2.25}, {1.7504882812500011, 2.2500000000000004}, {1.7509766221046437, 2.2499999403953543}, {1.7514650225057267, 2.2499998212442733}}} id=4 |
| </div> |
| |
| <div id="sect33"> |
| {{{1.7500000491263352, 2.2508403295591259}, {1.7500000040986061, 2.2505188445374351}, {1.7499999849018013, 2.2501973336269003}, {1.7499999915525417, 2.2498757968773848}}} id=25 |
| {{{1.75, 2.25}, {1.7502441406249989, 2.25}, {1.7504882961511623, 2.2499999850988388}, {1.7507324665712076, 2.2499999553037924}}} id=4 |
| </div> |
| |
| <div id="sect34"> |
| {{{1.7500000009600125, 2.2503580826161893}, {1.7499999913636877, 2.2501973271671556}, {1.7499999882271713, 2.2500365652521426}, {1.7499999915525417, 2.2498757968773848}}} id=27 |
| {{{1.75, 2.25}, {1.7502441406249989, 2.25}, {1.7504882961511623, 2.2499999850988388}, {1.7507324665712076, 2.2499999553037924}}} id=4 |
| </div> |
| |
| <div id="sect35"> |
| {{{1.7500000009600125, 2.2503580826161893}, {1.7499999913636877, 2.2501973271671556}, {1.7499999882271713, 2.2500365652521426}, {1.7499999915525417, 2.2498757968773848}}} id=27 |
| {{{1.75, 2.25}, {1.7501220703125004, 2.25}, {1.7502441443502894, 2.2499999962747097}, {1.7503662221124614, 2.2499999888250386}}} id=4 |
| </div> |
| |
| <div id="sect36"> |
| </div> |
| |
| </div> |
| |
| <script type="text/javascript"> |
| |
| var testDivs = [ |
| sect1, |
| sect2, |
| sect3, |
| sect4, |
| sect5, |
| sect6, |
| sect7, |
| sect8, |
| sect9, |
| sect10, |
| sect11, |
| sect12, |
| sect13, |
| sect14, |
| sect15, |
| sect16, |
| sect17, |
| sect18, |
| sect19, |
| sect20, |
| sect21, |
| sect22, |
| sect23, |
| sect24, |
| sect25, |
| sect26, |
| sect27, |
| sect28, |
| sect29, |
| sect30, |
| sect31, |
| sect32, |
| sect33, |
| sect34, |
| sect35, |
| sect36, |
| |
| |
| ]; |
| |
| var decimal_places = 3; |
| |
| var tests = []; |
| var testTitles = []; |
| var testIndex = 0; |
| var ctx; |
| |
| var subscale = 1; |
| var xmin, xmax, ymin, ymax; |
| var scale; |
| var initScale; |
| var mouseX, mouseY; |
| var mouseDown = false; |
| var srcLeft, srcTop; |
| var screenWidth, screenHeight; |
| var drawnPts; |
| var curveT = 0; |
| |
| var lastX, lastY; |
| var activeCurve = []; |
| var activePt; |
| var ids = []; |
| |
| var focus_on_selection = 0; |
| var draw_t = false; |
| var draw_closest_t = false; |
| var draw_cubic_red = false; |
| var draw_derivative = false; |
| var draw_endpoints = 2; |
| var draw_id = false; |
| var draw_midpoint = 0; |
| var draw_mouse_xy = false; |
| var draw_order = false; |
| var draw_point_xy = false; |
| var draw_ray_intersect = false; |
| var draw_quarterpoint = 0; |
| var draw_tangents = 1; |
| var draw_sortpoint = 0; |
| var retina_scale = !!window.devicePixelRatio; |
| |
| function parse(test, title) { |
| var curveStrs = test.split("{{"); |
| var pattern = /-?\d+\.*\d*e?-?\d*/g; |
| var curves = []; |
| for (var c in curveStrs) { |
| var curveStr = curveStrs[c]; |
| var idPart = curveStr.split("id="); |
| var id = -1; |
| if (idPart.length == 2) { |
| id = parseInt(idPart[1]); |
| curveStr = idPart[0]; |
| } |
| 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 (id >= 0) { |
| ids.push(id); |
| ids.push(pts); |
| } |
| } |
| if (curves.length >= 1) { |
| tests.push(curves); |
| testTitles.push(title); |
| } |
| } |
| |
| function init(test) { |
| var canvas = document.getElementById('canvas'); |
| if (!canvas.getContext) return; |
| ctx = canvas.getContext('2d'); |
| var resScale = retina_scale && window.devicePixelRatio ? window.devicePixelRatio : 1; |
| var unscaledWidth = window.innerWidth - 20; |
| var unscaledHeight = window.innerHeight - 20; |
| screenWidth = unscaledWidth; |
| screenHeight = unscaledHeight; |
| canvas.width = unscaledWidth * resScale; |
| canvas.height = unscaledHeight * resScale; |
| canvas.style.width = unscaledWidth + 'px'; |
| canvas.style.height = unscaledHeight + 'px'; |
| if (resScale != 1) { |
| ctx.scale(resScale, resScale); |
| } |
| 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 -= Math.min(1, Math.max(xmax - xmin, ymax - ymin)); |
| 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; |
| } |
| setScale(xmin, xmax, ymin, ymax); |
| mouseX = (screenWidth / 2) / scale + srcLeft; |
| mouseY = (screenHeight / 2) / scale + srcTop; |
| initScale = scale; |
| } |
| |
| function setScale(x0, x1, y0, y1) { |
| var srcWidth = x1 - x0; |
| var srcHeight = y1 - y0; |
| var usableWidth = screenWidth; |
| var xDigits = Math.ceil(Math.log(Math.abs(xmax)) / Math.log(10)); |
| var yDigits = Math.ceil(Math.log(Math.abs(ymax)) / Math.log(10)); |
| usableWidth -= (xDigits + yDigits) * 10; |
| usableWidth -= decimal_places * 10; |
| var hscale = usableWidth / srcWidth; |
| var vscale = screenHeight / srcHeight; |
| scale = Math.min(hscale, vscale); |
| var invScale = 1 / scale; |
| var sxmin = x0 - invScale * 5; |
| var symin = y0 - invScale * 10; |
| var sxmax = x1 + invScale * (6 * decimal_places + 10); |
| var symax = y1 + invScale * 10; |
| srcWidth = sxmax - sxmin; |
| srcHeight = symax - symin; |
| hscale = usableWidth / srcWidth; |
| vscale = screenHeight / srcHeight; |
| scale = Math.min(hscale, vscale); |
| srcLeft = sxmin; |
| srcTop = symin; |
| } |
| |
| function dxy_at_t(curve, t) { |
| var dxy = {}; |
| if (curve.length == 6) { |
| var a = t - 1; |
| var b = 1 - 2 * t; |
| var c = t; |
| dxy.x = a * curve[0] + b * curve[2] + c * curve[4]; |
| dxy.y = a * curve[1] + b * curve[3] + c * curve[5]; |
| } else if (curve.length == 8) { |
| var one_t = 1 - t; |
| var a = curve[0]; |
| var b = curve[2]; |
| var c = curve[4]; |
| var d = curve[6]; |
| dxy.x = 3 * ((b - a) * one_t * one_t + 2 * (c - b) * t * one_t + (d - c) * t * t); |
| a = curve[1]; |
| b = curve[3]; |
| c = curve[5]; |
| d = curve[7]; |
| dxy.y = 3 * ((b - a) * one_t * one_t + 2 * (c - b) * t * one_t + (d - c) * t * t); |
| } |
| return dxy; |
| } |
| |
| var flt_epsilon = 1.19209290E-07; |
| |
| function approximately_zero(A) { |
| return Math.abs(A) < flt_epsilon; |
| } |
| |
| function approximately_zero_inverse(A) { |
| return Math.abs(A) > (1 / flt_epsilon); |
| } |
| |
| function quad_real_roots(A, B, C) { |
| var s = []; |
| var p = B / (2 * A); |
| var q = C / A; |
| if (approximately_zero(A) && (approximately_zero_inverse(p) |
| || approximately_zero_inverse(q))) { |
| if (approximately_zero(B)) { |
| if (C == 0) { |
| s[0] = 0; |
| } |
| return s; |
| } |
| s[0] = -C / B; |
| return s; |
| } |
| /* normal form: x^2 + px + q = 0 */ |
| var p2 = p * p; |
| if (!approximately_zero(p2 - q) && p2 < q) { |
| return s; |
| } |
| var sqrt_D = 0; |
| if (p2 > q) { |
| sqrt_D = Math.sqrt(p2 - q); |
| } |
| s[0] = sqrt_D - p; |
| var flip = -sqrt_D - p; |
| if (!approximately_zero(s[0] - flip)) { |
| s[1] = flip; |
| } |
| return s; |
| } |
| |
| function cubic_real_roots(A, B, C, D) { |
| if (approximately_zero(A)) { // we're just a quadratic |
| return quad_real_roots(B, C, D); |
| } |
| if (approximately_zero(D)) { // 0 is one root |
| var s = quad_real_roots(A, B, C); |
| for (var i = 0; i < s.length; ++i) { |
| if (approximately_zero(s[i])) { |
| return s; |
| } |
| } |
| s.push(0); |
| return s; |
| } |
| if (approximately_zero(A + B + C + D)) { // 1 is one root |
| var s = quad_real_roots(A, A + B, -D); |
| for (var i = 0; i < s.length; ++i) { |
| if (approximately_zero(s[i] - 1)) { |
| return s; |
| } |
| } |
| s.push(1); |
| return s; |
| } |
| var a, b, c; |
| var invA = 1 / A; |
| a = B * invA; |
| b = C * invA; |
| c = D * invA; |
| var a2 = a * a; |
| var Q = (a2 - b * 3) / 9; |
| var R = (2 * a2 * a - 9 * a * b + 27 * c) / 54; |
| var R2 = R * R; |
| var Q3 = Q * Q * Q; |
| var R2MinusQ3 = R2 - Q3; |
| var adiv3 = a / 3; |
| var r; |
| var roots = []; |
| if (R2MinusQ3 < 0) { // we have 3 real roots |
| var theta = Math.acos(R / Math.sqrt(Q3)); |
| var neg2RootQ = -2 * Math.sqrt(Q); |
| r = neg2RootQ * Math.cos(theta / 3) - adiv3; |
| roots.push(r); |
| r = neg2RootQ * Math.cos((theta + 2 * Math.PI) / 3) - adiv3; |
| if (!approximately_zero(roots[0] - r)) { |
| roots.push(r); |
| } |
| r = neg2RootQ * Math.cos((theta - 2 * Math.PI) / 3) - adiv3; |
| if (!approximately_zero(roots[0] - r) && (roots.length == 1 |
| || !approximately_zero(roots[1] - r))) { |
| roots.push(r); |
| } |
| } else { // we have 1 real root |
| var sqrtR2MinusQ3 = Math.sqrt(R2MinusQ3); |
| var A = Math.abs(R) + sqrtR2MinusQ3; |
| A = Math.pow(A, 1/3); |
| if (R > 0) { |
| A = -A; |
| } |
| if (A != 0) { |
| A += Q / A; |
| } |
| r = A - adiv3; |
| roots.push(r); |
| if (approximately_zero(R2 - Q3)) { |
| r = -A / 2 - adiv3; |
| if (!approximately_zero(s[0] - r)) { |
| roots.push(r); |
| } |
| } |
| } |
| return roots; |
| } |
| |
| function approximately_zero_or_more(tValue) { |
| return tValue >= -flt_epsilon; |
| } |
| |
| function approximately_one_or_less(tValue) { |
| return tValue <= 1 + flt_epsilon; |
| } |
| |
| function approximately_less_than_zero(tValue) { |
| return tValue < flt_epsilon; |
| } |
| |
| function approximately_greater_than_one(tValue) { |
| return tValue > 1 - flt_epsilon; |
| } |
| |
| function add_valid_ts(s) { |
| var t = []; |
| nextRoot: |
| for (var index = 0; index < s.length; ++index) { |
| var tValue = s[index]; |
| if (approximately_zero_or_more(tValue) && approximately_one_or_less(tValue)) { |
| if (approximately_less_than_zero(tValue)) { |
| tValue = 0; |
| } else if (approximately_greater_than_one(tValue)) { |
| tValue = 1; |
| } |
| for (var idx2 = 0; idx2 < t.length; ++idx2) { |
| if (approximately_zero(t[idx2] - tValue)) { |
| continue nextRoot; |
| } |
| } |
| t.push(tValue); |
| } |
| } |
| return t; |
| } |
| |
| function quad_roots(A, B, C) { |
| var s = quad_real_roots(A, B, C); |
| var foundRoots = add_valid_ts(s); |
| return foundRoots; |
| } |
| |
| function cubic_roots(A, B, C, D) { |
| var s = cubic_real_roots(A, B, C, D); |
| var foundRoots = add_valid_ts(s); |
| return foundRoots; |
| } |
| |
| function ray_curve_intersect(startPt, endPt, curve) { |
| var adj = endPt[0] - startPt[0]; |
| var opp = endPt[1] - startPt[1]; |
| var r = []; |
| for (var n = 0; n < curve.length / 2; ++n) { |
| r[n] = (curve[n * 2 + 1] - startPt[1]) * adj - (curve[n * 2] - startPt[0]) * opp; |
| } |
| if (curve.length == 6) { |
| var A = r[2]; |
| var B = r[1]; |
| var C = r[0]; |
| A += C - 2 * B; // A = a - 2*b + c |
| B -= C; // B = -(b - c) |
| return quad_roots(A, 2 * B, C); |
| } |
| var A = r[3]; // d |
| var B = r[2] * 3; // 3*c |
| var C = r[1] * 3; // 3*b |
| var D = r[0]; // a |
| A -= D - C + B; // A = -a + 3*b - 3*c + d |
| B += 3 * D - 2 * C; // B = 3*a - 6*b + 3*c |
| C -= 3 * D; // C = -3*a + 3*b |
| return cubic_roots(A, B, C, D); |
| } |
| |
| function x_at_t(curve, t) { |
| var one_t = 1 - t; |
| if (curve.length == 4) { |
| return one_t * curve[0] + t * curve[2]; |
| } |
| var one_t2 = one_t * one_t; |
| var t2 = t * t; |
| if (curve.length == 6) { |
| return one_t2 * curve[0] + 2 * one_t * t * curve[2] + t2 * curve[4]; |
| } |
| var a = one_t2 * one_t; |
| var b = 3 * one_t2 * t; |
| var c = 3 * one_t * t2; |
| var d = t2 * t; |
| return a * curve[0] + b * curve[2] + c * curve[4] + d * curve[6]; |
| } |
| |
| function y_at_t(curve, t) { |
| var one_t = 1 - t; |
| if (curve.length == 4) { |
| return one_t * curve[1] + t * curve[3]; |
| } |
| var one_t2 = one_t * one_t; |
| var t2 = t * t; |
| if (curve.length == 6) { |
| return one_t2 * curve[1] + 2 * one_t * t * curve[3] + t2 * curve[5]; |
| } |
| var a = one_t2 * one_t; |
| var b = 3 * one_t2 * t; |
| var c = 3 * one_t * t2; |
| var d = t2 * t; |
| return a * curve[1] + b * curve[3] + c * curve[5] + d * curve[7]; |
| } |
| |
| function drawPointAtT(curve) { |
| var x = x_at_t(curve, curveT); |
| var y = y_at_t(curve, curveT); |
| drawPoint(x, y); |
| } |
| |
| function drawLine(x1, y1, x2, y2) { |
| ctx.beginPath(); |
| ctx.moveTo((x1 - srcLeft) * scale, |
| (y1 - srcTop) * scale); |
| ctx.lineTo((x2 - srcLeft) * scale, |
| (y2 - srcTop) * scale); |
| ctx.stroke(); |
| } |
| |
| function drawPoint(px, py) { |
| for (var pts = 0; pts < drawnPts.length; pts += 2) { |
| var x = drawnPts[pts]; |
| var y = drawnPts[pts + 1]; |
| if (px == x && py == y) { |
| return; |
| } |
| } |
| drawnPts.push(px); |
| drawnPts.push(py); |
| var _px = (px - srcLeft) * scale; |
| var _py = (py - srcTop) * scale; |
| ctx.beginPath(); |
| ctx.arc(_px, _py, 3, 0, Math.PI * 2, true); |
| ctx.closePath(); |
| ctx.stroke(); |
| if (draw_point_xy) { |
| var label = px.toFixed(decimal_places) + ", " + py.toFixed(decimal_places); |
| ctx.font = "normal 10px Arial"; |
| ctx.textAlign = "left"; |
| ctx.fillStyle = "black"; |
| ctx.fillText(label, _px + 5, _py); |
| } |
| } |
| |
| function drawPointSolid(px, py) { |
| drawPoint(px, py); |
| ctx.fillStyle = "rgba(0,0,0, 0.4)"; |
| ctx.fill(); |
| } |
| |
| function crossPt(origin, pt1, pt2) { |
| return ((pt1[0] - origin[0]) * (pt2[1] - origin[1]) |
| - (pt1[1] - origin[1]) * (pt2[0] - origin[0])) > 0 ? 0 : 1; |
| } |
| |
| // may not work well for cubics |
| function curveClosestT(curve, x, y) { |
| var closest = -1; |
| var closestDist = Infinity; |
| var l = Infinity, t = Infinity, r = -Infinity, b = -Infinity; |
| for (var i = 0; i < 16; ++i) { |
| var testX = x_at_t(curve, i / 16); |
| l = Math.min(testX, l); |
| r = Math.max(testX, r); |
| var testY = y_at_t(curve, i / 16); |
| t = Math.min(testY, t); |
| b = Math.max(testY, b); |
| var dx = testX - x; |
| var dy = testY - y; |
| var dist = dx * dx + dy * dy; |
| if (closestDist > dist) { |
| closestDist = dist; |
| closest = i; |
| } |
| } |
| var boundsX = r - l; |
| var boundsY = b - t; |
| var boundsDist = boundsX * boundsX + boundsY * boundsY; |
| if (closestDist > boundsDist) { |
| return -1; |
| } |
| console.log("closestDist = " + closestDist + " boundsDist = " + boundsDist |
| + " t = " + closest / 16); |
| return closest / 16; |
| } |
| |
| function draw(test, title) { |
| ctx.font = "normal 50px Arial"; |
| ctx.textAlign = "left"; |
| ctx.fillStyle = "rgba(0,0,0, 0.1)"; |
| ctx.fillText(title, 50, 50); |
| ctx.font = "normal 10px Arial"; |
| // ctx.lineWidth = "1.001"; "0.999"; |
| var hullStarts = []; |
| var hullEnds = []; |
| var midSpokes = []; |
| var midDist = []; |
| var origin = []; |
| var shortSpokes = []; |
| var shortDist = []; |
| var sweeps = []; |
| drawnPts = []; |
| for (var curves in test) { |
| var curve = test[curves]; |
| origin.push(curve[0]); |
| origin.push(curve[1]); |
| var startPt = []; |
| startPt.push(curve[2]); |
| startPt.push(curve[3]); |
| hullStarts.push(startPt); |
| var endPt = []; |
| if (curve.length == 4) { |
| endPt.push(curve[2]); |
| endPt.push(curve[3]); |
| } else if (curve.length == 6) { |
| endPt.push(curve[4]); |
| endPt.push(curve[5]); |
| } else if (curve.length == 8) { |
| endPt.push(curve[6]); |
| endPt.push(curve[7]); |
| } |
| hullEnds.push(endPt); |
| var sweep = crossPt(origin, startPt, endPt); |
| sweeps.push(sweep); |
| var midPt = []; |
| midPt.push(x_at_t(curve, 0.5)); |
| midPt.push(y_at_t(curve, 0.5)); |
| midSpokes.push(midPt); |
| var shortPt = []; |
| shortPt.push(x_at_t(curve, 0.25)); |
| shortPt.push(y_at_t(curve, 0.25)); |
| shortSpokes.push(shortPt); |
| var dx = midPt[0] - origin[0]; |
| var dy = midPt[1] - origin[1]; |
| var dist = Math.sqrt(dx * dx + dy * dy); |
| midDist.push(dist); |
| dx = shortPt[0] - origin[0]; |
| dy = shortPt[1] - origin[1]; |
| dist = Math.sqrt(dx * dx + dy * dy); |
| shortDist.push(dist); |
| } |
| var intersect = []; |
| var useIntersect = false; |
| var maxWidth = Math.max(xmax - xmin, ymax - ymin); |
| for (var curves in test) { |
| var curve = test[curves]; |
| if (curve.length == 6 || curve.length == 8) { |
| var opp = curves == 0 || curves == 1 ? 0 : 1; |
| var sects = ray_curve_intersect(origin, hullEnds[opp], curve); |
| intersect.push(sects); |
| if (sects.length > 1) { |
| var intersection = sects[0]; |
| if (intersection == 0) { |
| intersection = sects[1]; |
| } |
| var ix = x_at_t(curve, intersection) - origin[0]; |
| var iy = y_at_t(curve, intersection) - origin[1]; |
| var ex = hullEnds[opp][0] - origin[0]; |
| var ey = hullEnds[opp][1] - origin[1]; |
| if (ix * ex >= 0 && iy * ey >= 0) { |
| var iDist = Math.sqrt(ix * ix + iy * iy); |
| var eDist = Math.sqrt(ex * ex + ey * ey); |
| var delta = Math.abs(iDist - eDist) / maxWidth; |
| if (delta > (curve.length == 6 ? 1e-5 : 1e-4)) { |
| useIntersect ^= true; |
| } |
| } |
| } |
| } |
| } |
| var midLeft = curves != 0 ? crossPt(origin, midSpokes[0], midSpokes[1]) : 0; |
| var firstInside; |
| if (useIntersect) { |
| var sect1 = intersect[0].length > 1; |
| var sIndex = sect1 ? 0 : 1; |
| var sects = intersect[sIndex]; |
| var intersection = sects[0]; |
| if (intersection == 0) { |
| intersection = sects[1]; |
| } |
| var curve = test[sIndex]; |
| var ix = x_at_t(curve, intersection) - origin[0]; |
| var iy = y_at_t(curve, intersection) - origin[1]; |
| var opp = sect1 ? 1 : 0; |
| var ex = hullEnds[opp][0] - origin[0]; |
| var ey = hullEnds[opp][1] - origin[1]; |
| var iDist = ix * ix + iy * iy; |
| var eDist = ex * ex + ey * ey; |
| firstInside = (iDist > eDist) ^ (sIndex == 0) ^ sweeps[0]; |
| // console.log("iDist=" + iDist + " eDist=" + eDist + " sIndex=" + sIndex |
| // + " sweeps[0]=" + sweeps[0]); |
| } else { |
| // console.log("midLeft=" + midLeft); |
| firstInside = midLeft != 0; |
| } |
| var shorter = midDist[1] < midDist[0]; |
| var shortLeft = shorter ? crossPt(origin, shortSpokes[0], midSpokes[1]) |
| : crossPt(origin, midSpokes[0], shortSpokes[1]); |
| var startCross = crossPt(origin, hullStarts[0], hullStarts[1]); |
| var disallowShort = midLeft == startCross && midLeft == sweeps[0] |
| && midLeft == sweeps[1]; |
| |
| // console.log("midLeft=" + midLeft + " startCross=" + startCross); |
| var intersectIndex = 0; |
| for (var curves in test) { |
| var curve = test[curves]; |
| if (curve.length != 4 && curve.length != 6 && curve.length != 8) { |
| continue; |
| } |
| ctx.lineWidth = 1; |
| if (draw_tangents != 0) { |
| if (draw_cubic_red ? curve.length == 8 : firstInside == curves) { |
| ctx.strokeStyle = "rgba(255,0,0, 0.3)"; |
| } else { |
| ctx.strokeStyle = "rgba(0,0,255, 0.3)"; |
| } |
| drawLine(curve[0], curve[1], curve[2], curve[3]); |
| if (draw_tangents != 2) { |
| if (curve.length > 4) drawLine(curve[2], curve[3], curve[4], curve[5]); |
| if (curve.length > 6) drawLine(curve[4], curve[5], curve[6], curve[7]); |
| } |
| if (draw_tangents != 1) { |
| if (curve.length == 6) drawLine(curve[0], curve[1], curve[4], curve[5]); |
| if (curve.length == 8) drawLine(curve[0], curve[1], curve[6], curve[7]); |
| } |
| } |
| ctx.beginPath(); |
| ctx.moveTo((curve[0] - srcLeft) * scale, (curve[1] - srcTop) * scale); |
| if (curve.length == 4) { |
| ctx.lineTo((curve[2] - srcLeft) * scale, (curve[3] - srcTop) * scale); |
| } else if (curve.length == 6) { |
| ctx.quadraticCurveTo( |
| (curve[2] - srcLeft) * scale, (curve[3] - srcTop) * scale, |
| (curve[4] - srcLeft) * scale, (curve[5] - srcTop) * scale); |
| } else { |
| ctx.bezierCurveTo( |
| (curve[2] - srcLeft) * scale, (curve[3] - srcTop) * scale, |
| (curve[4] - srcLeft) * scale, (curve[5] - srcTop) * scale, |
| (curve[6] - srcLeft) * scale, (curve[7] - srcTop) * scale); |
| } |
| if (draw_cubic_red ? curve.length == 8 : firstInside == curves) { |
| ctx.strokeStyle = "rgba(255,0,0, 1)"; |
| } else { |
| ctx.strokeStyle = "rgba(0,0,255, 1)"; |
| } |
| ctx.stroke(); |
| if (draw_endpoints > 0) { |
| drawPoint(curve[0], curve[1]); |
| if (draw_endpoints > 1 || curve.length == 4) { |
| drawPoint(curve[2], curve[3]); |
| } |
| if (curve.length == 6 || (draw_endpoints > 1 && curve.length == 8)) { |
| drawPoint(curve[4], curve[5]); |
| } |
| if (curve.length == 8) drawPoint(curve[6], curve[7]); |
| } |
| if (draw_midpoint != 0) { |
| if ((curves == 0) == (midLeft == 0)) { |
| ctx.strokeStyle = "rgba(0,180,127, 0.6)"; |
| } else { |
| ctx.strokeStyle = "rgba(127,0,127, 0.6)"; |
| } |
| var midX = x_at_t(curve, 0.5); |
| var midY = y_at_t(curve, 0.5); |
| drawPointSolid(midX, midY); |
| if (draw_midpoint > 1) { |
| drawLine(curve[0], curve[1], midX, midY); |
| } |
| } |
| if (draw_quarterpoint != 0) { |
| if ((curves == 0) == (shortLeft == 0)) { |
| ctx.strokeStyle = "rgba(0,191,63, 0.6)"; |
| } else { |
| ctx.strokeStyle = "rgba(63,0,191, 0.6)"; |
| } |
| var midT = (curves == 0) == shorter ? 0.25 : 0.5; |
| var midX = x_at_t(curve, midT); |
| var midY = y_at_t(curve, midT); |
| drawPointSolid(midX, midY); |
| if (draw_quarterpoint > 1) { |
| drawLine(curve[0], curve[1], midX, midY); |
| } |
| } |
| if (draw_sortpoint != 0) { |
| if ((curves == 0) == ((disallowShort == -1 ? midLeft : shortLeft) == 0)) { |
| ctx.strokeStyle = "rgba(0,155,37, 0.6)"; |
| } else { |
| ctx.strokeStyle = "rgba(37,0,155, 0.6)"; |
| } |
| var midT = (curves == 0) == shorter && disallowShort != curves ? 0.25 : 0.5; |
| console.log("curves=" + curves + " disallowShort=" + disallowShort |
| + " midLeft=" + midLeft + " shortLeft=" + shortLeft |
| + " shorter=" + shorter + " midT=" + midT); |
| var midX = x_at_t(curve, midT); |
| var midY = y_at_t(curve, midT); |
| drawPointSolid(midX, midY); |
| if (draw_sortpoint > 1) { |
| drawLine(curve[0], curve[1], midX, midY); |
| } |
| } |
| if (draw_ray_intersect != 0) { |
| ctx.strokeStyle = "rgba(75,45,199, 0.6)"; |
| if (curve.length == 6 || curve.length == 8) { |
| var intersections = intersect[intersectIndex]; |
| for (var i in intersections) { |
| var intersection = intersections[i]; |
| var x = x_at_t(curve, intersection); |
| var y = y_at_t(curve, intersection); |
| drawPointSolid(x, y); |
| if (draw_ray_intersect > 1) { |
| drawLine(curve[0], curve[1], x, y); |
| } |
| } |
| } |
| ++intersectIndex; |
| } |
| if (draw_order) { |
| var px = x_at_t(curve, 0.75); |
| var py = y_at_t(curve, 0.75); |
| var _px = (px - srcLeft) * scale; |
| var _py = (py - srcTop) * scale; |
| ctx.beginPath(); |
| ctx.arc(_px, _py, 15, 0, Math.PI * 2, true); |
| ctx.closePath(); |
| ctx.fillStyle = "white"; |
| ctx.fill(); |
| if (draw_cubic_red ? curve.length == 8 : firstInside == curves) { |
| ctx.strokeStyle = "rgba(255,0,0, 1)"; |
| ctx.fillStyle = "rgba(255,0,0, 1)"; |
| } else { |
| ctx.strokeStyle = "rgba(0,0,255, 1)"; |
| ctx.fillStyle = "rgba(0,0,255, 1)"; |
| } |
| ctx.stroke(); |
| ctx.font = "normal 16px Arial"; |
| ctx.textAlign = "center"; |
| ctx.fillText(parseInt(curves) + 1, _px, _py + 5); |
| } |
| if (draw_closest_t) { |
| var t = curveClosestT(curve, mouseX, mouseY); |
| if (t >= 0) { |
| var x = x_at_t(curve, t); |
| var y = y_at_t(curve, t); |
| drawPointSolid(x, y); |
| } |
| } |
| if (!approximately_zero(scale - initScale)) { |
| ctx.font = "normal 20px Arial"; |
| ctx.fillStyle = "rgba(0,0,0, 0.3)"; |
| ctx.textAlign = "right"; |
| ctx.fillText(scale.toFixed(decimal_places) + 'x', |
| screenWidth - 10, screenHeight - 5); |
| } |
| if (draw_t) { |
| drawPointAtT(curve); |
| } |
| if (draw_id) { |
| var id = -1; |
| for (var i = 0; i < ids.length; i += 2) { |
| if (ids[i + 1] == curve) { |
| id = ids[i]; |
| break; |
| } |
| } |
| if (id >= 0) { |
| var px = x_at_t(curve, 0.5); |
| var py = y_at_t(curve, 0.5); |
| var _px = (px - srcLeft) * scale; |
| var _py = (py - srcTop) * scale; |
| ctx.beginPath(); |
| ctx.arc(_px, _py, 15, 0, Math.PI * 2, true); |
| ctx.closePath(); |
| ctx.fillStyle = "white"; |
| ctx.fill(); |
| ctx.strokeStyle = "rgba(255,0,0, 1)"; |
| ctx.fillStyle = "rgba(255,0,0, 1)"; |
| ctx.stroke(); |
| ctx.font = "normal 16px Arial"; |
| ctx.textAlign = "center"; |
| ctx.fillText(id, _px, _py + 5); |
| } |
| } |
| } |
| if (draw_t) { |
| drawCurveTControl(); |
| } |
| } |
| |
| function drawCurveTControl() { |
| ctx.lineWidth = 2; |
| ctx.strokeStyle = "rgba(0,0,0, 0.3)"; |
| ctx.beginPath(); |
| ctx.rect(screenWidth - 80, 40, 28, screenHeight - 80); |
| ctx.stroke(); |
| var ty = 40 + curveT * (screenHeight - 80); |
| ctx.beginPath(); |
| ctx.moveTo(screenWidth - 80, ty); |
| ctx.lineTo(screenWidth - 85, ty - 5); |
| ctx.lineTo(screenWidth - 85, ty + 5); |
| ctx.lineTo(screenWidth - 80, ty); |
| ctx.fillStyle = "rgba(0,0,0, 0.6)"; |
| ctx.fill(); |
| var num = curveT.toFixed(decimal_places); |
| ctx.font = "normal 10px Arial"; |
| ctx.textAlign = "left"; |
| ctx.fillText(num, screenWidth - 78, ty); |
| } |
| |
| function ptInTControl() { |
| var e = window.event; |
| var tgt = e.target || e.srcElement; |
| var left = tgt.offsetLeft; |
| var top = tgt.offsetTop; |
| var x = (e.clientX - left); |
| var y = (e.clientY - top); |
| if (x < screenWidth - 80 || x > screenWidth - 50) { |
| return false; |
| } |
| if (y < 40 || y > screenHeight - 80) { |
| return false; |
| } |
| curveT = (y - 40) / (screenHeight - 120); |
| if (curveT < 0 || curveT > 1) { |
| throw "stop execution"; |
| } |
| return true; |
| } |
| |
| function drawTop() { |
| init(tests[testIndex]); |
| redraw(); |
| } |
| |
| function redraw() { |
| if (focus_on_selection > 0) { |
| var focusXmin = focusYmin = Infinity; |
| var focusXmax = focusYmax = -Infinity; |
| var choice = 0; |
| for (var curves in tests[testIndex]) { |
| if (++choice != focus_on_selection) { |
| continue; |
| } |
| var curve = tests[testIndex][curves]; |
| var last = curve.length; |
| for (var idx = 0; idx < last; idx += 2) { |
| focusXmin = Math.min(focusXmin, curve[idx]); |
| focusXmax = Math.max(focusXmax, curve[idx]); |
| focusYmin = Math.min(focusYmin, curve[idx + 1]); |
| focusYmax = Math.max(focusYmax, curve[idx + 1]); |
| } |
| } |
| focusXmin -= Math.min(1, Math.max(focusXmax - focusXmin, focusYmax - focusYmin)); |
| if (focusXmin < focusXmax && focusYmin < focusYmax) { |
| setScale(focusXmin, focusXmax, focusYmin, focusYmax); |
| } |
| } |
| 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); |
| var focusWasOn = false; |
| switch (char) { |
| case '0': |
| case '1': |
| case '2': |
| case '3': |
| case '4': |
| case '5': |
| case '6': |
| case '7': |
| case '8': |
| case '9': |
| decimal_places = char - '0'; |
| redraw(); |
| break; |
| case '-': |
| focusWasOn = focus_on_selection; |
| if (focusWasOn) { |
| focus_on_selection = false; |
| scale /= 1.2; |
| } else { |
| scale /= 2; |
| } |
| calcLeftTop(); |
| redraw(); |
| focus_on_selection = focusWasOn; |
| break; |
| case '=': |
| case '+': |
| focusWasOn = focus_on_selection; |
| if (focusWasOn) { |
| focus_on_selection = false; |
| scale *= 1.2; |
| } else { |
| scale *= 2; |
| } |
| calcLeftTop(); |
| redraw(); |
| focus_on_selection = focusWasOn; |
| break; |
| case 'b': |
| draw_cubic_red ^= true; |
| redraw(); |
| break; |
| case 'c': |
| drawTop(); |
| break; |
| case 'd': |
| var test = tests[testIndex]; |
| var testClone = []; |
| for (var curves in test) { |
| var c = test[curves]; |
| var cClone = []; |
| for (var index = 0; index < c.length; ++index) { |
| cClone.push(c[index]); |
| } |
| testClone.push(cClone); |
| } |
| tests.push(testClone); |
| testTitles.push(testTitles[testIndex] + " copy"); |
| testIndex = tests.length - 1; |
| redraw(); |
| break; |
| case 'e': |
| draw_endpoints = (draw_endpoints + 1) % 3; |
| redraw(); |
| break; |
| case 'f': |
| draw_derivative ^= true; |
| redraw(); |
| break; |
| case 'i': |
| draw_ray_intersect = (draw_ray_intersect + 1) % 3; |
| redraw(); |
| break; |
| case 'l': |
| var test = tests[testIndex]; |
| console.log("<div id=\"" + testTitles[testIndex] + "\" >"); |
| for (var curves in test) { |
| var c = test[curves]; |
| var s = "{{"; |
| for (var i = 0; i < c.length; i += 2) { |
| s += "{"; |
| s += c[i] + "," + c[i + 1]; |
| s += "}"; |
| if (i + 2 < c.length) { |
| s += ", "; |
| } |
| } |
| console.log(s + "}},"); |
| } |
| console.log("</div>"); |
| break; |
| case 'm': |
| draw_midpoint = (draw_midpoint + 1) % 3; |
| redraw(); |
| break; |
| case 'N': |
| testIndex += 9; |
| case 'n': |
| testIndex = (testIndex + 1) % tests.length; |
| drawTop(); |
| break; |
| case 'o': |
| draw_order ^= true; |
| redraw(); |
| break; |
| case 'P': |
| testIndex -= 9; |
| case 'p': |
| if (--testIndex < 0) |
| testIndex = tests.length - 1; |
| drawTop(); |
| break; |
| case 'q': |
| draw_quarterpoint = (draw_quarterpoint + 1) % 3; |
| redraw(); |
| break; |
| case 'r': |
| for (var i = 0; i < testDivs.length; ++i) { |
| var title = testDivs[i].id.toString(); |
| if (title == testTitles[testIndex]) { |
| var str = testDivs[i].firstChild.data; |
| parse(str, title); |
| var original = tests.pop(); |
| testTitles.pop(); |
| tests[testIndex] = original; |
| break; |
| } |
| } |
| redraw(); |
| break; |
| case 's': |
| draw_sortpoint = (draw_sortpoint + 1) % 3; |
| redraw(); |
| break; |
| case 't': |
| draw_t ^= true; |
| redraw(); |
| break; |
| case 'u': |
| draw_closest_t ^= true; |
| redraw(); |
| break; |
| case 'v': |
| draw_tangents = (draw_tangents + 1) % 4; |
| redraw(); |
| break; |
| case 'x': |
| draw_point_xy ^= true; |
| redraw(); |
| break; |
| case 'y': |
| draw_mouse_xy ^= true; |
| redraw(); |
| break; |
| case '\\': |
| retina_scale ^= true; |
| drawTop(); |
| break; |
| case '`': |
| ++focus_on_selection; |
| if (focus_on_selection >= tests[testIndex].length) { |
| focus_on_selection = 0; |
| } |
| setScale(xmin, xmax, ymin, ymax); |
| redraw(); |
| break; |
| case '.': |
| draw_id ^= true; |
| redraw(); |
| break; |
| } |
| } |
| |
| function doKeyDown(evt) { |
| var char = evt.keyCode; |
| var preventDefault = false; |
| switch (char) { |
| case 37: // left arrow |
| if (evt.shiftKey) { |
| testIndex -= 9; |
| } |
| if (--testIndex < 0) |
| testIndex = tests.length - 1; |
| if (evt.ctrlKey) { |
| redraw(); |
| } else { |
| drawTop(); |
| } |
| preventDefault = true; |
| break; |
| case 39: // right arrow |
| if (evt.shiftKey) { |
| testIndex += 9; |
| } |
| if (++testIndex >= tests.length) |
| testIndex = 0; |
| if (evt.ctrlKey) { |
| redraw(); |
| } else { |
| drawTop(); |
| } |
| preventDefault = true; |
| break; |
| } |
| if (preventDefault) { |
| evt.preventDefault(); |
| return false; |
| } |
| return true; |
| } |
| |
| function calcXY() { |
| var e = window.event; |
| var tgt = e.target || e.srcElement; |
| var left = tgt.offsetLeft; |
| var top = tgt.offsetTop; |
| mouseX = (e.clientX - left) / scale + srcLeft; |
| mouseY = (e.clientY - top) / scale + srcTop; |
| } |
| |
| function calcLeftTop() { |
| srcLeft = mouseX - screenWidth / 2 / scale; |
| srcTop = mouseY - screenHeight / 2 / scale; |
| } |
| |
| function handleMouseClick() { |
| if (!draw_t || !ptInTControl()) { |
| calcXY(); |
| } else { |
| redraw(); |
| } |
| } |
| |
| function initDown() { |
| var test = tests[testIndex]; |
| var bestDistance = 1000000; |
| activePt = -1; |
| for (var curves in test) { |
| var testCurve = test[curves]; |
| if (testCurve.length != 4 && testCurve.length != 6 && testCurve.length != 8) { |
| continue; |
| } |
| for (var i = 0; i < testCurve.length; 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() { |
| calcXY(); |
| if (draw_mouse_xy) { |
| var num = mouseX.toFixed(decimal_places) + ", " + mouseY.toFixed(decimal_places); |
| ctx.beginPath(); |
| ctx.rect(300, 100, num.length * 6, 10); |
| ctx.fillStyle = "white"; |
| ctx.fill(); |
| ctx.font = "normal 10px Arial"; |
| ctx.fillStyle = "black"; |
| ctx.textAlign = "left"; |
| ctx.fillText(num, 300, 108); |
| } |
| if (!mouseDown) { |
| activePt = -1; |
| return; |
| } |
| if (activePt < 0) { |
| initDown(); |
| return; |
| } |
| var deltaX = mouseX - lastX; |
| var deltaY = mouseY - lastY; |
| lastX = mouseX; |
| lastY = mouseY; |
| if (activePt == 0) { |
| var test = tests[testIndex]; |
| for (var curves in test) { |
| var testCurve = test[curves]; |
| testCurve[0] += deltaX; |
| testCurve[1] += deltaY; |
| } |
| } else { |
| activeCurve[activePt] += deltaX; |
| activeCurve[activePt + 1] += deltaY; |
| } |
| redraw(); |
| } |
| |
| function start() { |
| for (var 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.addEventListener('keydown', doKeyDown, 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> |
