scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,427 lines (888 loc) • 59.4 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Demo Canvas 014</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-014">Demo Canvas 014</h1>
<p>Line, Quadratic and Bezier entitys - control lock alternatives</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-014.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,
makeBezier,
makeDragZone,
makeGroup,
makeLine,
makePicture,
makeQuadratic,
makeRender,
makeTetragon,
makeWheel,
} <span class="hljs-keyword">from</span> <span class="hljs-string">'../source/scrawl.js'</span>
<span class="hljs-keyword">import</span> { reportSpeed, killArtefact } <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>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> canvas = L.<span class="hljs-property">canvas</span>.<span class="hljs-property">mycanvas</span>;</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<p>Define the entitys that will be used as pivots and paths before the entitys that use them as such</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-title function_">makeWheel</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'pin-1'</span>,
<span class="hljs-attr">order</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">100</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-number">100</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">radius</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'blue'</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'darkgray'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'fillAndDraw'</span>,
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'pin-2'</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-number">300</span>,
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'pin-3'</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-number">500</span>,
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'pin-4'</span>,
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'green'</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">500</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-number">100</span>,
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'pin-5'</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-number">230</span>,
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'pin-6'</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-number">370</span>,
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'pin-7'</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-number">500</span>,
});</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<p>Create a group to hold the draggable artefacts, for easier user action collision detection</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> pins = <span class="hljs-title function_">makeGroup</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'my-pins'</span>,
<span class="hljs-attr">host</span>: canvas.<span class="hljs-property">base</span>.<span class="hljs-property">name</span>,
}).<span class="hljs-title function_">addArtefacts</span>(<span class="hljs-string">'pin-1'</span>, <span class="hljs-string">'pin-2'</span>, <span class="hljs-string">'pin-3'</span>, <span class="hljs-string">'pin-4'</span>, <span class="hljs-string">'pin-5'</span>, <span class="hljs-string">'pin-6'</span>, <span class="hljs-string">'pin-7'</span>);</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<p>Now start defining the Shape lines. Bezier, Quadratic and Line Shapes can <code>pivot</code> and <code>path</code> their control coordinates to other artefacts, similar to how start coordinates operate.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-title function_">makeQuadratic</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'my-quad'</span>,
<span class="hljs-attr">pivot</span>: <span class="hljs-string">'pin-1'</span>,
<span class="hljs-attr">lockTo</span>: <span class="hljs-string">'pivot'</span>,</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p>The normal action when the Start coordinates for Bezier, Quadratic and Line Shapes change is that the entire shape moves to the new coordinates. In this demo, we don’t want that; when a user drags the wheel on which the shape’s start coordinates pivots, we want the shape to ‘change shape’. We can make sure this happens by setting its <code>useStartAsControlPoint</code> attribute to true.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">useStartAsControlPoint</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">controlPivot</span>: <span class="hljs-string">'pin-2'</span>,
<span class="hljs-attr">controlLockTo</span>: <span class="hljs-string">'pivot'</span>,
<span class="hljs-attr">endPivot</span>: <span class="hljs-string">'pin-3'</span>,
<span class="hljs-attr">endLockTo</span>: <span class="hljs-string">'pivot'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">5</span>,
<span class="hljs-attr">lineCap</span>: <span class="hljs-string">'round'</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'darkblue'</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'draw'</span>,
<span class="hljs-attr">useAsPath</span>: <span class="hljs-literal">true</span>,
});
<span class="hljs-title function_">makeBezier</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'my-bezier'</span>,
<span class="hljs-attr">pivot</span>: <span class="hljs-string">'pin-4'</span>,
<span class="hljs-attr">lockTo</span>: <span class="hljs-string">'pivot'</span>,
<span class="hljs-attr">useStartAsControlPoint</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">startControlPivot</span>: <span class="hljs-string">'pin-5'</span>,
<span class="hljs-attr">startControlLockTo</span>: <span class="hljs-string">'pivot'</span>,
<span class="hljs-attr">endControlPivot</span>: <span class="hljs-string">'pin-6'</span>,
<span class="hljs-attr">endControlLockTo</span>: <span class="hljs-string">'pivot'</span>,
<span class="hljs-attr">endPivot</span>: <span class="hljs-string">'pin-7'</span>,
<span class="hljs-attr">endLockTo</span>: <span class="hljs-string">'pivot'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">5</span>,
<span class="hljs-attr">lineCap</span>: <span class="hljs-string">'round'</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'darkgreen'</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'draw'</span>,
<span class="hljs-attr">useAsPath</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>The ‘path-line’ shape uses the quadratic and bezier curves as paths for its start and end coordinates</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-title function_">makeLine</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'path-line'</span>,
<span class="hljs-attr">path</span>: <span class="hljs-string">'my-quad'</span>,
<span class="hljs-attr">pathPosition</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">lockTo</span>: <span class="hljs-string">'path'</span>,
<span class="hljs-attr">useStartAsControlPoint</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">endPath</span>: <span class="hljs-string">'my-bezier'</span>,
<span class="hljs-attr">endPathPosition</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">endLockTo</span>: <span class="hljs-string">'path'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">5</span>,
<span class="hljs-attr">lineCap</span>: <span class="hljs-string">'round'</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'black'</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'draw'</span>,</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p>Delta animate the path-line entity along the lengths of the bezier and quadratic Shape entitys</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.0015</span>,
<span class="hljs-attr">endPathPosition</span>: <span class="hljs-number">0.0015</span>,
},
<span class="hljs-attr">useAsPath</span>: <span class="hljs-literal">true</span>,
});</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<p>the ‘mouse-line’ shape has its start coordinates permanently fixed to the center of the screen, while its end coordinates alternate between tracking a point along the ‘path-line’ shape, and the mouse cursor when it is moving over the canvas</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-title function_">makeLine</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'mouse-line'</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">useStartAsControlPoint</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">endPath</span>: <span class="hljs-string">'path-line'</span>,
<span class="hljs-attr">endPathPosition</span>: <span class="hljs-number">0.5</span>,
<span class="hljs-attr">endLockTo</span>: <span class="hljs-string">'path'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">5</span>,
<span class="hljs-attr">lineCap</span>: <span class="hljs-string">'round'</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'darkred'</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'draw'</span>,
<span class="hljs-attr">useAsPath</span>: <span class="hljs-literal">true</span>,
});</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<p>Decorate the ‘mouse-line’ shape with other artefacts to turn it into an arrow</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-title function_">makeTetragon</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'arrowhead'</span>,
<span class="hljs-attr">order</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'darkred'</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'fill'</span>,
<span class="hljs-attr">radius</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">intersectY</span>: <span class="hljs-number">1.2</span>,
<span class="hljs-attr">handleX</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">handleY</span>: <span class="hljs-string">'20%'</span>,
<span class="hljs-attr">roll</span>: <span class="hljs-number">90</span>,
<span class="hljs-attr">path</span>: <span class="hljs-string">'mouse-line'</span>,
<span class="hljs-attr">pathPosition</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">lockTo</span>: <span class="hljs-string">'path'</span>,
<span class="hljs-attr">addPathRotation</span>: <span class="hljs-literal">true</span>,
});
<span class="hljs-title function_">makeWheel</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'arrowbase'</span>,
<span class="hljs-attr">order</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'darkred'</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'fill'</span>,
<span class="hljs-attr">radius</span>: <span class="hljs-number">20</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">handleX</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">handleY</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">path</span>: <span class="hljs-string">'mouse-line'</span>,
<span class="hljs-attr">pathPosition</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">lockTo</span>: <span class="hljs-string">'path'</span>,
<span class="hljs-attr">addPathRotation</span>: <span class="hljs-literal">true</span>,
});</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<p>We can always grab a handle to any canvas entity by reference to its entry in the Scrawl-canvas library. Entitys are stored in both the <code>artefact</code> and the <code>ent