scrawl-canvas

<!DOCTYPE html> <html> <head> <title>Demo Canvas 012</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <link rel="stylesheet" media="all" href="../docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <ul id="jump_to"> <li> <a class="large" href="javascript:void(0);">Jump To …</a> <a class="small" href="javascript:void(0);">+</a> <div id="jump_wrapper"> <div id="jump_page_wrapper"> <div id="jump_page"> <a class="source" href="canvas-001.html"> ./demo/canvas-001.js </a> <a class="source" href="canvas-002.html"> ./demo/canvas-002.js </a> <a class="source" href="canvas-003.html"> ./demo/canvas-003.js </a> <a class="source" href="canvas-004.html"> ./demo/canvas-004.js </a> <a class="source" href="canvas-005.html"> ./demo/canvas-005.js </a> <a class="source" href="canvas-006.html"> ./demo/canvas-006.js </a> <a class="source" href="canvas-007.html"> ./demo/canvas-007.js </a> <a class="source" href="canvas-008.html"> ./demo/canvas-008.js </a> <a class="source" href="canvas-009.html"> ./demo/canvas-009.js </a> <a class="source" href="canvas-010.html"> ./demo/canvas-010.js </a> <a class="source" href="canvas-011.html"> ./demo/canvas-011.js </a> <a class="source" href="canvas-012.html"> ./demo/canvas-012.js </a> <a class="source" href="canvas-013.html"> ./demo/canvas-013.js </a> <a class="source" href="canvas-014.html"> ./demo/canvas-014.js </a> <a class="source" href="canvas-015.html"> ./demo/canvas-015.js </a> <a class="source" href="canvas-015a.html"> ./demo/canvas-015a.js </a> <a class="source" href="canvas-016.html"> ./demo/canvas-016.js </a> <a class="source" href="canvas-017.html"> ./demo/canvas-017.js </a> <a class="source" href="canvas-018.html"> ./demo/canvas-018.js </a> <a class="source" href="canvas-019.html"> ./demo/canvas-019.js </a> <a class="source" href="canvas-019a.html"> ./demo/canvas-019a.js </a> <a class="source" href="canvas-020.html"> ./demo/canvas-020.js </a> <a class="source" href="canvas-021.html"> ./demo/canvas-021.js </a> <a class="source" href="canvas-022.html"> ./demo/canvas-022.js </a> <a class="source" href="canvas-023.html"> ./demo/canvas-023.js </a> <a class="source" href="canvas-024.html"> ./demo/canvas-024.js </a> <a class="source" href="canvas-025.html"> ./demo/canvas-025.js </a> <a class="source" href="canvas-026.html"> ./demo/canvas-026.js </a> <a class="source" href="canvas-027.html"> ./demo/canvas-027.js </a> <a class="source" href="canvas-028.html"> ./demo/canvas-028.js </a> <a class="source" href="canvas-029.html"> ./demo/canvas-029.js </a> <a class="source" href="canvas-030.html"> ./demo/canvas-030.js </a> <a class="source" href="canvas-031.html"> ./demo/canvas-031.js </a> <a class="source" href="canvas-032.html"> ./demo/canvas-032.js </a> <a class="source" href="canvas-033.html"> ./demo/canvas-033.js </a> <a class="source" href="canvas-034.html"> ./demo/canvas-034.js </a> <a class="source" href="canvas-035.html"> ./demo/canvas-035.js </a> <a class="source" href="canvas-036.html"> ./demo/canvas-036.js </a> <a class="source" href="canvas-037.html"> ./demo/canvas-037.js </a> <a class="source" href="canvas-038.html"> ./demo/canvas-038.js </a> <a class="source" href="canvas-039.html"> ./demo/canvas-039.js </a> <a class="source" href="canvas-040.html"> ./demo/canvas-040.js </a> <a class="source" href="canvas-041.html"> ./demo/canvas-041.js </a> <a class="source" href="canvas-042.html"> ./demo/canvas-042.js </a> <a class="source" href="canvas-043.html"> ./demo/canvas-043.js </a> <a class="source" href="canvas-044.html"> ./demo/canvas-044.js </a> <a class="source" href="canvas-045.html"> ./demo/canvas-045.js </a> <a class="source" href="canvas-046.html"> ./demo/canvas-046.js </a> <a class="source" href="canvas-047.html"> ./demo/canvas-047.js </a> <a class="source" href="canvas-048.html"> ./demo/canvas-048.js </a> <a class="source" href="canvas-049.html"> ./demo/canvas-049.js </a> <a class="source" href="canvas-050.html"> ./demo/canvas-050.js </a> <a class="source" href="canvas-051.html"> ./demo/canvas-051.js </a> <a class="source" href="canvas-052.html"> ./demo/canvas-052.js </a> <a class="source" href="canvas-053.html"> ./demo/canvas-053.js </a> <a class="source" href="canvas-054.html"> ./demo/canvas-054.js </a> <a class="source" href="canvas-055.html"> ./demo/canvas-055.js </a> <a class="source" href="canvas-056.html"> ./demo/canvas-056.js </a> <a class="source" href="canvas-057.html"> ./demo/canvas-057.js </a> <a class="source" href="canvas-058.html"> ./demo/canvas-058.js </a> <a class="source" href="canvas-059.html"> ./demo/canvas-059.js </a> <a class="source" href="canvas-060.html"> ./demo/canvas-060.js </a> <a class="source" href="canvas-061.html"> ./demo/canvas-061.js </a> <a class="source" href="canvas-062.html"> ./demo/canvas-062.js </a> <a class="source" href="canvas-063.html"> ./demo/canvas-063.js </a> <a class="source" href="canvas-064.html"> ./demo/canvas-064.js </a> <a class="source" href="core-001.html"> ./demo/core-001.js </a> <a class="source" href="delaunator-001.html"> ./demo/delaunator-001.js </a> <a class="source" href="delaunator-002.html"> ./demo/delaunator-002.js </a> <a class="source" href="dom-001.html"> ./demo/dom-001.js </a> <a class="source" href="dom-002.html"> ./demo/dom-002.js </a> <a class="source" href="dom-003.html"> ./demo/dom-003.js </a> <a class="source" href="dom-004.html"> ./demo/dom-004.js </a> <a class="source" href="dom-005.html"> ./demo/dom-005.js </a> <a class="source" href="dom-006.html"> ./demo/dom-006.js </a> <a class="source" href="dom-007.html"> ./demo/dom-007.js </a> <a class="source" href="dom-008.html"> ./demo/dom-008.js </a> <a class="source" href="dom-009.html"> ./demo/dom-009.js </a> <a class="source" href="dom-010.html"> ./demo/dom-010.js </a> <a class="source" href="dom-011.html"> ./demo/dom-011.js </a> <a class="source" href="dom-012.html"> ./demo/dom-012.js </a> <a class="source" href="dom-013.html"> ./demo/dom-013.js </a> <a class="source" href="dom-015.html"> ./demo/dom-015.js </a> <a class="source" href="dom-016.html"> ./demo/dom-016.js </a> <a class="source" href="filters-001.html"> ./demo/filters-001.js </a> <a class="source" href="filters-002.html"> ./demo/filters-002.js </a> <a class="source" href="filters-002a.html"> ./demo/filters-002a.js </a> <a class="source" href="filters-003.html"> ./demo/filters-003.js </a> <a class="source" href="filters-004.html"> ./demo/filters-004.js </a> <a class="source" href="filters-005.html"> ./demo/filters-005.js </a> <a class="source" href="filters-006.html"> ./demo/filters-006.js </a> <a class="source" href="filters-007.html"> ./demo/filters-007.js </a> <a class="source" href="filters-008.html"> ./demo/filters-008.js </a> <a class="source" href="filters-009.html"> ./demo/filters-009.js </a> <a class="source" href="filters-010.html"> ./demo/filters-010.js </a> <a class="source" href="filters-011.html"> ./demo/filters-011.js </a> <a class="source" href="filters-012.html"> ./demo/filters-012.js </a> <a class="source" href="filters-013.html"> ./demo/filters-013.js </a> <a class="source" href="filters-014.html"> ./demo/filters-014.js </a> <a class="source" href="filters-015.html"> ./demo/filters-015.js </a> <a class="source" href="filters-016.html"> ./demo/filters-016.js </a> <a class="source" href="filters-017.html"> ./demo/filters-017.js </a> <a class="source" href="filters-018.html"> ./demo/filters-018.js </a> <a class="source" href="filters-019.html"> ./demo/filters-019.js </a> <a class="source" href="filters-020.html"> ./demo/filters-020.js </a> <a class="source" href="filters-021.html"> ./demo/filters-021.js </a> <a class="source" href="filters-022.html"> ./demo/filters-022.js </a> <a class="source" href="filters-023.html"> ./demo/filters-023.js </a> <a class="source" href="filters-024.html"> ./demo/filters-024.js </a> <a class="source" href="filters-025.html"> ./demo/filters-025.js </a> <a class="source" href="filters-026.html"> ./demo/filters-026.js </a> <a class="source" href="filters-027.html"> ./demo/filters-027.js </a> <a class="source" href="filters-101.html"> ./demo/filters-101.js </a> <a class="source" href="filters-102.html"> ./demo/filters-102.js </a> <a class="source" href="filters-103.html"> ./demo/filters-103.js </a> <a class="source" href="filters-104.html"> ./demo/filters-104.js </a> <a class="source" href="filters-105.html"> ./demo/filters-105.js </a> <a class="source" href="filters-501.html"> ./demo/filters-501.js </a> <a class="source" href="filters-502.html"> ./demo/filters-502.js </a> <a class="source" href="filters-503.html"> ./demo/filters-503.js </a> <a class="source" href="filters-504.html"> ./demo/filters-504.js </a> <a class="source" href="filters-505.html"> ./demo/filters-505.js </a> <a class="source" href="mediapipe-001.html"> ./demo/mediapipe-001.js </a> <a class="source" href="mediapipe-002.html"> ./demo/mediapipe-002.js </a> <a class="source" href="mediapipe-003.html"> ./demo/mediapipe-003.js </a> <a class="source" href="modules-001.html"> ./demo/modules-001.js </a> <a class="source" href="modules-002.html"> ./demo/modules-002.js </a> <a class="source" href="modules-003.html"> ./demo/modules-003.js </a> <a class="source" href="modules-004.html"> ./demo/modules-004.js </a> <a class="source" href="modules-005.html"> ./demo/modules-005.js </a> <a class="source" href="packets-001.html"> ./demo/packets-001.js </a> <a class="source" href="packets-002.html"> ./demo/packets-002.js </a> <a class="source" href="particles-001.html"> ./demo/particles-001.js </a> <a class="source" href="particles-002.html"> ./demo/particles-002.js </a> <a class="source" href="particles-003.html"> ./demo/particles-003.js </a> <a class="source" href="particles-004.html"> ./demo/particles-004.js </a> <a class="source" href="particles-005.html"> ./demo/particles-005.js </a> <a class="source" href="particles-006.html"> ./demo/particles-006.js </a> <a class="source" href="particles-007.html"> ./demo/particles-007.js </a> <a class="source" href="particles-008.html"> ./demo/particles-008.js </a> <a class="source" href="particles-009.html"> ./demo/particles-009.js </a> <a class="source" href="particles-010.html"> ./demo/particles-010.js </a> <a class="source" href="particles-011.html"> ./demo/particles-011.js </a> <a class="source" href="particles-012.html"> ./demo/particles-012.js </a> <a class="source" href="particles-013.html"> ./demo/particles-013.js </a> <a class="source" href="particles-014.html"> ./demo/particles-014.js </a> <a class="source" href="particles-015.html"> ./demo/particles-015.js </a> <a class="source" href="particles-016.html"> ./demo/particles-016.js </a> <a class="source" href="rapier-001.html"> ./demo/rapier-001.js </a> <a class="source" href="snippets-001.html"> ./demo/snippets-001.js </a> <a class="source" href="snippets-002.html"> ./demo/snippets-002.js </a> <a class="source" href="snippets-003.html"> ./demo/snippets-003.js </a> <a class="source" href="snippets-004.html"> ./demo/snippets-004.js </a> <a class="source" href="snippets-005.html"> ./demo/snippets-005.js </a> <a class="source" href="snippets-006.html"> ./demo/snippets-006.js </a> <a class="source" href="temp-000.html"> ./demo/temp-000.js </a> <a class="source" href="temp-001.html"> ./demo/temp-001.js </a> <a class="source" href="temp-001a.html"> ./demo/temp-001a.js </a> <a class="source" href="temp-002.html"> ./demo/temp-002.js </a> <a class="source" href="temp-003.html"> ./demo/temp-003.js </a> <a class="source" href="temp-004.html"> ./demo/temp-004.js </a> <a class="source" href="temp-005.html"> ./demo/temp-005.js </a> <a class="source" href="temp-006.html"> ./demo/temp-006.js </a> <a class="source" href="temp-007.html"> ./demo/temp-007.js </a> <a class="source" href="temp-008.html"> ./demo/temp-008.js </a> <a class="source" href="temp-009.html"> ./demo/temp-009.js </a> <a class="source" href="temp-010.html"> ./demo/temp-010.js </a> <a class="source" href="temp-011.html"> ./demo/temp-011.js </a> <a class="source" href="temp-012.html"> ./demo/temp-012.js </a> <a class="source" href="temp-013.html"> ./demo/temp-013.js </a> <a class="source" href="temp-014.html"> ./demo/temp-014.js </a> <a class="source" href="temp-015.html"> ./demo/temp-015.js </a> <a class="source" href="temp-016.html"> ./demo/temp-016.js </a> <a class="source" href="temp-017.html"> ./demo/temp-017.js </a> <a class="source" href="temp-018.html"> ./demo/temp-018.js </a> <a class="source" href="temp-018a.html"> ./demo/temp-018a.js </a> <a class="source" href="temp-019.html"> ./demo/temp-019.js </a> <a class="source" href="temp-020.html"> ./demo/temp-020.js </a> <a class="source" href="temp-021.html"> ./demo/temp-021.js </a> <a class="source" href="temp-022.html"> ./demo/temp-022.js </a> <a class="source" href="temp-023.html"> ./demo/temp-023.js </a> <a class="source" href="temp-024.html"> ./demo/temp-024.js </a> <a class="source" href="temp-025.html"> ./demo/temp-025.js </a> <a class="source" href="temp-026.html"> ./demo/temp-026.js </a> <a class="source" href="temp-027.html"> ./demo/temp-027.js </a> <a class="source" href="temp-028.html"> ./demo/temp-028.js </a> <a class="source" href="temp-029.html"> ./demo/temp-029.js </a> <a class="source" href="temp-030.html"> ./demo/temp-030.js </a> <a class="source" href="temp-031.html"> ./demo/temp-031.js </a> <a class="source" href="temp-032.html"> ./demo/temp-032.js </a> <a class="source" href="temp-033.html"> ./demo/temp-033.js </a> <a class="source" href="temp-034.html"> ./demo/temp-034.js </a> <a class="source" href="temp-035.html"> ./demo/temp-035.js </a> <a class="source" href="temp-036.html"> ./demo/temp-036.js </a> <a class="source" href="temp-037.html"> ./demo/temp-037.js </a> <a class="source" href="temp-100.html"> ./demo/temp-100.js </a> <a class="source" href="temp-101.html"> ./demo/temp-101.js </a> <a class="source" href="temp-102.html"> ./demo/temp-102.js </a> <a class="source" href="temp-103.html"> ./demo/temp-103.js </a> <a class="source" href="temp-104.html"> ./demo/temp-104.js </a> <a class="source" href="temp-200.html"> ./demo/temp-200.js </a> <a class="source" href="temp-201.html"> ./demo/temp-201.js </a> <a class="source" href="temp-301.html"> ./demo/temp-301.js </a> <a class="source" href="temp-inkscapeSvgFilters.html"> ./demo/temp-inkscapeSvgFilters.js </a> <a class="source" href="temp-lottie.html"> ./demo/temp-lottie.js </a> <a class="source" href="tensorflow-001.html"> ./demo/tensorflow-001.js </a> <a class="source" href="tensorflow-002.html"> ./demo/tensorflow-002.js </a> <a class="source" href="utilities.html"> ./demo/utilities.js </a> </div> </div> </li> </ul> <ul class="sections"> <li id="section-1"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-1">§</a> </div> <h1 id="demo-canvas-012">Demo Canvas 012</h1> <p>Shape entity position; shape entity as a path for other artefacts to follow</p> </div> </li> <li id="section-2"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-2">§</a> </div> <p><a href="../../demo/canvas-012.html">Run code</a></p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> { library <span class="hljs-keyword">as</span> L, makeRender, makeShape, makeWheel, observeAndUpdate, } <span class="hljs-keyword">from</span> <span class="hljs-string">'../source/scrawl.js'</span> <span class="hljs-keyword">import</span> { reportSpeed } <span class="hljs-keyword">from</span> <span class="hljs-string">'./utilities.js'</span>;</pre></div></div> </li> <li id="section-3"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-3">§</a> </div> <h4 id="scene-setup">Scene setup</h4> </div> </li> <li id="section-4"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-4">§</a> </div> <p>Create Shape entity</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> arrow = <span class="hljs-title function_">makeShape</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">'myArrow'</span>, <span class="hljs-attr">pathDefinition</span>: <span class="hljs-string">'M266.2,703.1 h-178 L375.1,990 l287-286.9 H481.9 C507.4,365,683.4,91.9,911.8,25.5 877,15.4,840.9,10,803.9,10 525.1,10,295.5,313.4,266.2,703.1 z'</span>, <span class="hljs-comment">/* </span></pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-5">§</a> </div> <p>Alternative path for testing</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">pathDefinition</span>: <span class="hljs-string">'M 1049.6339,1050 C 1049.6339,1050 1030.0866,1022.855 1019.4084,1003.5845 C 991.5593,954.92478 986.46204,868.69686 979.32292,780.61374 C 979.32292,780.61374 1022.3499,838.11219 1052.1807,857.87889 C 1061.3371,863.94619 1085.4929,869.8246 1085.4929,869.8246 L 1138.1801,908.67848 C 1138.1801,908.67848 1229.7506,966.738 1241.4829,953.27545 C 1251.6457,941.61167 1177.0219,890.53297 1150.458,859.57897 C 1123.8942,828.625 1078.1083,775.02293 1085.4929,768.6793 C 1085.4929,768.6793 1120.9803,809.96348 1147.5318,819.95537 C 1153.1541,822.07274 1165.8575,819.22515 1170.5407,822.98904 C 1201.6335,847.96874 1239.8905,866.16504 1276.7703,883.65648 C 1326.4934,907.2406 1432.0937,928.36623 1432.4404,911.839 C 1432.5948,904.4776 1364.7319,871.36397 1299.0621,817.82956 C 1228.6904,760.458 1163.527,674.95463 1152.9663,662.29841 C 1142.675,649.96363 1234.3802,721.91704 1276.7703,717.313 C 1280.7075,716.88726 1280.1051,706.69523 1283.8876,707.86808 C 1314.0423,717.21997 1345.6886,727.02011 1370.4551,732.13167 C 1437.8515,746.0453 1438.1332,733.547 1437.5631,724.27404 C 1437.0206,715.44937 1237.418,666.37808 1105.4596,514.91526 C 1100.3923,509.09889 1156.4895,551.98167 1185.1454,544.04793 C 1189.2891,542.90045 1188.6277,535.21482 1192.8987,535.71104 C 1218.2777,538.65445 1299.3631,566.90467 1298.7537,545.06011 C 1298.4037,532.51386 1230.5378,512.781 1170.7235,471.37556 C 1119.3785,435.83445 1080.4259,400.30745 1058.2683,379.16489 C 1052.6276,373.78271 1096.7566,406.8033 1116.3075,400.52452 C 1119.2343,399.58567 1116.8789,394.74197 1119.9305,395.11415 C 1136.9769,397.18074 1195.0389,429.0623 1200.81,409.55219 C 1202.0804,405.25545 1148.0173,376.24119 1101.588,340.34766 C 1055.1587,304.45412 1015.8333,263.80146 1015.8333,263.80146 C 1028.2571,271.14877 1044.0133,281.27599 1054.2258,279.95934 C 1055.7326,279.10224 1058.8007,278.21978 1057.0348,273.17309 C 1063.5569,274.37696 1103.9124,294.83721 1107.0658,281.63969 C 1108.7025,277.62489 1044.8219,244.56483 1009.291,216.46406 C 971.49092,186.56734 933.15826,149.99997 933.15826,149.99997 C 933.15826,149.99997 894.82544,186.56734 857.02537,216.46406 C 821.49448,244.56483 757.61385,277.62489 759.25055,281.63969 C 762.40389,294.83721 802.75948,274.37696 809.28155,273.17309 C 807.51567,278.21978 810.58381,279.10224 812.09059,279.95934 C 822.30307,281.27599 838.05918,271.14877 850.48307,263.80146 C 850.48307,263.80146 811.15767,304.45412 764.72841,340.34766 C 718.29911,376.24119 664.23589,405.25545 665.50633,409.55219 C 671.27744,429.0623 729.33944,397.18074 746.38589,395.11415 C 749.43744,394.74197 747.08207,399.58567 750.00885,400.52452 C 769.5597,406.8033 813.68878,373.78271 808.04807,379.16489 C 785.89052,400.30745 746.93789,435.83445 695.59281,471.37556 C 635.77859,512.781 567.91263,532.51386 567.56263,545.06011 C 566.95322,566.90467 648.03863,538.65445 673.4177,535.71104 C 677.68863,535.21482 677.02726,542.90045 681.171,544.04793 C 709.82685,551.98167 765.92404,509.09889 760.8567,514.91526 C 628.89841,666.37808 429.2957,715.44937 428.75322,724.27404 C 428.18315,733.547 428.46481,746.0453 495.86126,732.13167 C 520.62778,727.02011 552.27407,717.21997 582.42874,707.86808 C 586.21126,706.69523 585.60889,716.88726 589.54604,717.313 C 631.93615,721.91704 723.64137,649.96363 713.35007,662.29841 C 702.78933,674.95463 637.626,760.458 567.25422,817.82956 C 501.58452,871.36397 433.72152,904.4776 433.87596,911.839 C 434.22263,928.36623 539.82289,907.2406 589.54604,883.65648 C 626.42589,866.16504 664.68285,847.96874 695.77563,822.98904 C 700.45881,819.22515 713.1623,822.07274 718.78455,819.95537 C 745.33607,809.96348 780.82344,768.6793 780.82344,768.6793 C 788.20804,775.02293 742.42218,828.625 715.85833,859.57897 C 689.29448,890.53297 614.67067,941.61167 624.83348,953.27545 C 636.56578,966.738 728.13626,908.67848 728.13626,908.67848 L 780.82344,869.8246 C 780.82344,869.8246 804.97922,863.94619 814.13567,857.87889 C 843.96641,838.11219 886.99344,780.61374 886.99344,780.61374 C 879.85433,868.69686 874.75704,954.92478 846.90796,1003.5845 C 836.22978,1022.855 816.68115,1050 816.68115,1050 C 894.33207,1050 971.983,1050 1049.6339,1050 z'</span>, */ <span class="hljs-attr">startX</span>: <span class="hljs-number">300</span>, <span class="hljs-attr">startY</span>: <span class="hljs-number">200</span>, <span class="hljs-attr">handleX</span>: <span class="hljs-string">'50%'</span>, <span class="hljs-attr">handleY</span>: <span class="hljs-string">'50%'</span>, <span class="hljs-attr">scale</span>: <span class="hljs-number">0.2</span>, <span class="hljs-attr">scaleOutline</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">lineWidth</span>: <span class="hljs-number">10</span>, <span class="hljs-attr">lineJoin</span>: <span class="hljs-string">'round'</span>, <span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'lightgreen'</span>, <span class="hljs-attr">method</span>: <span class="hljs-string">'fill'</span>,</pre></div></div> </li> <li id="section-6"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-6">§</a> </div> <p>Turn the Shape into a <code>path</code> which other artefacts can use to position themselves</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">useAsPath</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">precision</span>: <span class="hljs-number">2</span>,</pre></div></div> </li> <li id="section-7"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-7">§</a> </div> <p>Test to make sure the bounding box correctly calculates itself to fit the Shape as tightly as possible</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">showBoundingBox</span>: <span class="hljs-literal">true</span>, });</pre></div></div> </li> <li id="section-8"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-8">§</a> </div> <p>Create Wheel entity to pivot to the arrow</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-title function_">makeWheel</span>({</pre></div></div> </li> <li id="section-9"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-9">§</a> </div> <p>We don’t need to give artefacts a <code>name</code> attribute - it’s just a lot more convenient if we do.</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'blue'</span>, <span class="hljs-attr">radius</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">handleX</span>: <span class="hljs-string">'center'</span>, <span class="hljs-attr">handleY</span>: <span class="hljs-string">'center'</span>, <span class="hljs-attr">pivot</span>: <span class="hljs-string">'myArrow'</span>, <span class="hljs-attr">lockTo</span>: <span class="hljs-string">'pivot'</span>, });</pre></div></div> </li> <li id="section-10"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-10">§</a> </div> <p>Create the Wheel entitys that will use the arrow as their path</p> <ul> <li>This Wheel is a template from which we clone the other Wheels</li> </ul> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> myWheel = <span class="hljs-title function_">makeWheel</span>({ <span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'red'</span>, <span class="hljs-attr">radius</span>: <span class="hljs-number">3</span>,</pre></div></div> </li> <li id="section-11"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-11">§</a> </div> <p>These are half-circles</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">roll</span>: -<span class="hljs-number">90</span>, <span class="hljs-attr">startAngle</span>: <span class="hljs-number">90</span>, <span class="hljs-attr">endAngle</span>: -<span class="hljs-number">90</span>, <span class="hljs-attr">path</span>: <span class="hljs-string">'myArrow'</span>, <span class="hljs-attr">pathPosition</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">addPathRotation</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">lockTo</span>: <span class="hljs-string">'path'</span>, <span class="hljs-attr">handleX</span>: <span class="hljs-string">'center'</span>, <span class="hljs-attr">handleY</span>: <span class="hljs-string">'center'</span>,</pre></div></div> </li> <li id="section-12"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-12">§</a> </div> <p>Automatically animate the Wheel along the Shape’s path (<em><strong>delta animation</strong></em>)</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">delta</span>: { <span class="hljs-attr">pathPosition</span>: <span class="hljs-number">0.0008</span>, } });</pre></div></div> </li> <li id="section-13"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-13">§</a> </div> <p>Generate the rest of the Wheels</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0.01</span>; i < <span class="hljs-number">1</span>; i += <span class="hljs-number">0.01</span>) { <span class="hljs-keyword">let</span> col; <span class="hljs-keyword">if</span> (i < <span class="hljs-number">0.2</span>) col = <span class="hljs-string">'red'</span>; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (i < <span class="hljs-number">0.4</span>) col = <span class="hljs-string">'orange'</span>; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (i < <span class="hljs-number">0.6</span>) col = <span class="hljs-string">'darkgreen'</span>; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (i < <span class="hljs-number">0.8</span>) col = <span class="hljs-string">'blue'</span>; <span class="hljs-keyword">else</span> col = <span class="hljs-string">'purple'</span>; myWheel.<span class="hljs-title function_">clone</span>({ <span class="hljs-attr">pathPosition</span>: i, <span class="hljs-attr">fillStyle</span>: col, }); }</pre></div></div> </li> <li id="section-14"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-14">§</a> </div> <h4 id="scene-animation">Scene animation</h4> <p>Function to display frames-per-second data, and other information relevant to the demo</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> report = <span class="hljs-title function_">reportSpeed</span>(<span class="hljs-string">'#reportmessage'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">let</span> [startX, startY] = arrow.<span class="hljs-property">start</span>; <span class="hljs-keyword">let</span> [handleX, handleY] = arrow.<span class="hljs-property">handle</span>; <span class="hljs-keyword">let</span> [offsetX, offsetY] = arrow.<span class="hljs-property">offset</span>; <span class="hljs-keyword">let</span> {roll, scale, length} = arrow; <span class="hljs-keyword">return</span> <span class="hljs-string">` Arrow path length: <span class="hljs-subst">${length}</span> Start - x: <span class="hljs-subst">${startX}</span>, y: <span class="hljs-subst">${startY}</span> Handle - x: <span class="hljs-subst">${handleX}</span>, y: <span class="hljs-subst">${handleY}</span> Offset - x: <span class="hljs-subst">${offsetX}</span>, y: <span class="hljs-subst">${offsetY}</span> Roll: <span class="hljs-subst">${roll}</span>; Scale: <span class="hljs-subst">${scale}</span>`</span>; });</pre></div></div> </li> <li id="section-15"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-15">§</a> </div> <p>Create the Display cycle animation</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-title function_">makeRender</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">'demo-animation'</span>, <span class="hljs-attr">target</span>: L.<span class="hljs-property">artefact</span>.<span class="hljs-property">mycanvas</span>, <span class="hljs-attr">afterShow</span>: report, });</pre></div></div> </li> <li id="section-16"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-16">§</a> </div> <h4 id="user-interaction">User interaction</h4> <p>Setup form observer functionality</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-title function_">observeAndUpdate</span>({ <span class="h