2014-06-17 12:15:38 +00:00
|
|
|
|
<!DOCTYPE html>
|
2014-04-14 17:08:59 +00:00
|
|
|
|
|
|
|
|
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title></title>
|
|
|
|
|
<div style="height:0">
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<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
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<div id="sect36">
|
2014-04-14 17:08:59 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
<script type="text/javascript">
|
2014-11-13 14:58:52 +00:00
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
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,
|
2014-04-14 17:08:59 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
];
|
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
var decimal_places = 3;
|
|
|
|
|
|
2014-04-14 17:08:59 +00:00
|
|
|
|
var tests = [];
|
|
|
|
|
var testTitles = [];
|
|
|
|
|
var testIndex = 0;
|
|
|
|
|
var ctx;
|
2015-03-24 14:28:17 +00:00
|
|
|
|
|
2014-04-14 17:08:59 +00:00
|
|
|
|
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;
|
2015-03-24 14:28:17 +00:00
|
|
|
|
var ids = [];
|
2014-04-14 17:08:59 +00:00
|
|
|
|
|
2015-03-24 14:28:17 +00:00
|
|
|
|
var focus_on_selection = 0;
|
2014-04-14 17:08:59 +00:00
|
|
|
|
var draw_t = false;
|
|
|
|
|
var draw_closest_t = false;
|
2014-07-29 19:13:28 +00:00
|
|
|
|
var draw_cubic_red = false;
|
2014-04-14 17:08:59 +00:00
|
|
|
|
var draw_derivative = false;
|
2015-03-24 14:28:17 +00:00
|
|
|
|
var draw_endpoints = 2;
|
|
|
|
|
var draw_id = false;
|
2014-04-14 17:08:59 +00:00
|
|
|
|
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];
|
2015-03-24 14:28:17 +00:00
|
|
|
|
var idPart = curveStr.split("id=");
|
|
|
|
|
var id = -1;
|
|
|
|
|
if (idPart.length == 2) {
|
|
|
|
|
id = parseInt(idPart[1]);
|
|
|
|
|
curveStr = idPart[0];
|
|
|
|
|
}
|
2014-04-14 17:08:59 +00:00
|
|
|
|
var points = curveStr.match(pattern);
|
|
|
|
|
var pts = [];
|
|
|
|
|
for (var wd in points) {
|
|
|
|
|
var num = parseFloat(points[wd]);
|
|
|
|
|
if (isNaN(num)) continue;
|
|
|
|
|
pts.push(num);
|
|
|
|
|
}
|
2015-03-24 14:28:17 +00:00
|
|
|
|
if (pts.length > 2) {
|
2014-04-14 17:08:59 +00:00
|
|
|
|
curves.push(pts);
|
2015-03-24 14:28:17 +00:00
|
|
|
|
}
|
|
|
|
|
if (id >= 0) {
|
|
|
|
|
ids.push(id);
|
|
|
|
|
ids.push(pts);
|
|
|
|
|
}
|
2014-04-14 17:08:59 +00:00
|
|
|
|
}
|
|
|
|
|
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]);
|
|
|
|
|
}
|
|
|
|
|
}
|
2015-03-24 14:28:17 +00:00
|
|
|
|
xmin -= Math.min(1, Math.max(xmax - xmin, ymax - ymin));
|
2014-04-14 17:08:59 +00:00
|
|
|
|
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) {
|
2014-04-25 12:59:11 +00:00
|
|
|
|
var opp = curves == 0 || curves == 1 ? 0 : 1;
|
2014-04-14 17:08:59 +00:00
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2014-04-25 12:59:11 +00:00
|
|
|
|
var midLeft = curves != 0 ? crossPt(origin, midSpokes[0], midSpokes[1]) : 0;
|
2014-04-14 17:08:59 +00:00
|
|
|
|
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) {
|
2014-07-29 19:13:28 +00:00
|
|
|
|
if (draw_cubic_red ? curve.length == 8 : firstInside == curves) {
|
2014-04-14 17:08:59 +00:00
|
|
|
|
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);
|
|
|
|
|
}
|
2014-07-29 19:13:28 +00:00
|
|
|
|
if (draw_cubic_red ? curve.length == 8 : firstInside == curves) {
|
2014-04-14 17:08:59 +00:00
|
|
|
|
ctx.strokeStyle = "rgba(255,0,0, 1)";
|
|
|
|
|
} else {
|
|
|
|
|
ctx.strokeStyle = "rgba(0,0,255, 1)";
|
|
|
|
|
}
|
|
|
|
|
ctx.stroke();
|
2015-03-24 14:28:17 +00:00
|
|
|
|
if (draw_endpoints > 0) {
|
2014-04-14 17:08:59 +00:00
|
|
|
|
drawPoint(curve[0], curve[1]);
|
2015-03-24 14:28:17 +00:00
|
|
|
|
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]);
|
2014-04-14 17:08:59 +00:00
|
|
|
|
}
|
|
|
|
|
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();
|
2014-07-29 19:13:28 +00:00
|
|
|
|
if (draw_cubic_red ? curve.length == 8 : firstInside == curves) {
|
2014-04-14 17:08:59 +00:00
|
|
|
|
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);
|
|
|
|
|
}
|
2015-03-24 14:28:17 +00:00
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
}
|
2014-04-14 17:08:59 +00:00
|
|
|
|
}
|
|
|
|
|
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() {
|
2015-03-24 14:28:17 +00:00
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
}
|
2014-04-14 17:08:59 +00:00
|
|
|
|
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);
|
2015-03-24 14:28:17 +00:00
|
|
|
|
var focusWasOn = false;
|
2014-04-14 17:08:59 +00:00
|
|
|
|
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 '-':
|
2015-03-24 14:28:17 +00:00
|
|
|
|
focusWasOn = focus_on_selection;
|
|
|
|
|
if (focusWasOn) {
|
|
|
|
|
focus_on_selection = false;
|
|
|
|
|
scale /= 1.2;
|
|
|
|
|
} else {
|
|
|
|
|
scale /= 2;
|
|
|
|
|
}
|
2014-04-14 17:08:59 +00:00
|
|
|
|
calcLeftTop();
|
|
|
|
|
redraw();
|
2015-03-24 14:28:17 +00:00
|
|
|
|
focus_on_selection = focusWasOn;
|
2014-04-14 17:08:59 +00:00
|
|
|
|
break;
|
|
|
|
|
case '=':
|
|
|
|
|
case '+':
|
2015-03-24 14:28:17 +00:00
|
|
|
|
focusWasOn = focus_on_selection;
|
|
|
|
|
if (focusWasOn) {
|
|
|
|
|
focus_on_selection = false;
|
|
|
|
|
scale *= 1.2;
|
|
|
|
|
} else {
|
|
|
|
|
scale *= 2;
|
|
|
|
|
}
|
2014-04-14 17:08:59 +00:00
|
|
|
|
calcLeftTop();
|
|
|
|
|
redraw();
|
2015-03-24 14:28:17 +00:00
|
|
|
|
focus_on_selection = focusWasOn;
|
2014-07-29 19:13:28 +00:00
|
|
|
|
break;
|
|
|
|
|
case 'b':
|
|
|
|
|
draw_cubic_red ^= true;
|
|
|
|
|
redraw();
|
2014-04-14 17:08:59 +00:00
|
|
|
|
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':
|
2015-03-24 14:28:17 +00:00
|
|
|
|
draw_endpoints = (draw_endpoints + 1) % 3;
|
2014-04-14 17:08:59 +00:00
|
|
|
|
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;
|
2015-03-24 14:28:17 +00:00
|
|
|
|
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;
|
2014-04-14 17:08:59 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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;
|
2015-03-24 14:28:17 +00:00
|
|
|
|
if (evt.ctrlKey) {
|
|
|
|
|
redraw();
|
|
|
|
|
} else {
|
|
|
|
|
drawTop();
|
|
|
|
|
}
|
2014-04-14 17:08:59 +00:00
|
|
|
|
preventDefault = true;
|
|
|
|
|
break;
|
|
|
|
|
case 39: // right arrow
|
|
|
|
|
if (evt.shiftKey) {
|
|
|
|
|
testIndex += 9;
|
|
|
|
|
}
|
|
|
|
|
if (++testIndex >= tests.length)
|
|
|
|
|
testIndex = 0;
|
2015-03-24 14:28:17 +00:00
|
|
|
|
if (evt.ctrlKey) {
|
|
|
|
|
redraw();
|
|
|
|
|
} else {
|
|
|
|
|
drawTop();
|
|
|
|
|
}
|
2014-04-14 17:08:59 +00:00
|
|
|
|
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>
|