scrawl-canvas

<!DOCTYPE html> <html> <head> <title>Demo Filters 026</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-filters-026">Demo Filters 026</h1> <p>Filter parameters: Swirl filter</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/filters-026.html">Run code</a></p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> scrawl <span class="hljs-keyword">from</span> <span class="hljs-string">'../source/scrawl.js'</span>; <span class="hljs-keyword">import</span> { reportSpeed, addImageDragAndDrop } <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">const</span> canvas = scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">canvas</span>.<span class="hljs-property">mycanvas</span>; scrawl.<span class="hljs-title function_">importDomImage</span>(<span class="hljs-string">'.flowers'</span>);</pre></div></div> </li> <li id="section-4"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-4">§</a> </div> <ul> <li>TODO: concurrency - want to be able to process more than one swirl in the same filter. When concurrency flag is true, then each pixels value, when the pixel is affected by more than one swirl, needs to pro-rata the effects of those swirls; when concurrency is false, need to process the entire image for each swirl in turn.</li> <li>TODO: this filter is too slow - we need to cache the calculations as a lookup table to speed things up.</li> </ul> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> swirl = scrawl.<span class="hljs-title function_">makeFilter</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">'swirl'</span>, <span class="hljs-attr">method</span>: <span class="hljs-string">'swirl'</span>, <span class="hljs-attr">startX</span>: <span class="hljs-string">'50%'</span>, <span class="hljs-attr">startY</span>: <span class="hljs-number">200</span>, <span class="hljs-attr">innerRadius</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">outerRadius</span>: <span class="hljs-string">'30%'</span>, <span class="hljs-attr">angle</span>: <span class="hljs-number">90</span>, <span class="hljs-attr">staticSwirls</span>: [ [<span class="hljs-string">'20%'</span>, <span class="hljs-string">'20%'</span>, <span class="hljs-number">0</span>, <span class="hljs-string">'10%'</span>, <span class="hljs-number">270</span>, <span class="hljs-string">'easeOutInSine'</span>], [<span class="hljs-string">'20%'</span>, <span class="hljs-string">'80%'</span>, <span class="hljs-number">0</span>, <span class="hljs-string">'10%'</span>, -<span class="hljs-number">270</span>, <span class="hljs-string">'easeOutInSine'</span>], [<span class="hljs-string">'80%'</span>, <span class="hljs-string">'80%'</span>, <span class="hljs-number">0</span>, <span class="hljs-string">'10%'</span>, -<span class="hljs-number">270</span>, <span class="hljs-string">'easeOutInSine'</span>], [<span class="hljs-string">'80%'</span>, <span class="hljs-string">'20%'</span>, <span class="hljs-number">0</span>, <span class="hljs-string">'10%'</span>, <span class="hljs-number">270</span>, <span class="hljs-string">'easeOutInSine'</span>] ] });</pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-5">§</a> </div> <p>Test the ability to load a user-created easing algorithm into the gradient</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> bespokeEasings = { <span class="hljs-string">'user-steps'</span>: <span class="hljs-function">(<span class="hljs-params">val</span>) =></span> { <span class="hljs-keyword">if</span> (val < <span class="hljs-number">0.2</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">0.1</span>; <span class="hljs-keyword">if</span> (val < <span class="hljs-number">0.4</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">0.3</span>; <span class="hljs-keyword">if</span> (val < <span class="hljs-number">0.6</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">0.7</span>; <span class="hljs-keyword">if</span> (val < <span class="hljs-number">0.8</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">0.5</span>; <span class="hljs-keyword">return</span> <span class="hljs-number">0.9</span>; }, <span class="hljs-string">'user-zigzag'</span>: <span class="hljs-function">(<span class="hljs-params">val</span>) =></span> { <span class="hljs-keyword">if</span> (val < <span class="hljs-number">0.3</span>) <span class="hljs-keyword">return</span> val * <span class="hljs-number">3</span>; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (val < <span class="hljs-number">0.7</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">0.9</span> - ((val - <span class="hljs-number">0.3</span>) * <span class="hljs-number">2</span>); <span class="hljs-keyword">else</span> <span class="hljs-keyword">return</span> <span class="hljs-number">0.1</span> + ((val - <span class="hljs-number">0.7</span>) * <span class="hljs-number">3</span>); }, };</pre></div></div> </li> <li id="section-6"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-6">§</a> </div> <p>Create the target entity</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> piccy = scrawl.<span class="hljs-title function_">makePicture</span>({ <span class="hljs-attr">asset</span>: <span class="hljs-string">'iris'</span>, <span class="hljs-attr">width</span>: <span class="hljs-string">'100%'</span>, <span class="hljs-attr">height</span>: <span class="hljs-string">'100%'</span>, <span class="hljs-attr">copyWidth</span>: <span class="hljs-string">'100%'</span>, <span class="hljs-attr">copyHeight</span>: <span class="hljs-string">'100%'</span>, <span class="hljs-attr">method</span>: <span class="hljs-string">'fill'</span>, <span class="hljs-attr">filters</span>: [<span class="hljs-string">'swirl'</span>], });</pre></div></div> </li> <li id="section-7"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-7">§</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>) {</pre></div></div> </li> <li id="section-8"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-8">§</a> </div> <p>@ts-expect-error</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> <span class="hljs-string">` Start - x: <span class="hljs-subst">${swirl.startX}</span>; y: <span class="hljs-subst">${swirl.startY}</span>\n Radius - outer: <span class="hljs-subst">${swirl.outerRadius}</span>; inner: <span class="hljs-subst">${swirl.innerRadius}</span>\n Angle: <span class="hljs-subst">${angle.value}</span>\n Opacity: <span class="hljs-subst">${opacity.value}</span>`</span>; });</pre></div></div> </li> <li id="section-9"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-9">§</a> </div> <p>Create the Display cycle animation</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> demoAnimation = scrawl.<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>: canvas, <span class="hljs-attr">afterShow</span>: report, });</pre></div></div> </li> <li id="section-10"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-10">§</a> </div> <h4 id="user-interaction">User interaction</h4> <p>Setup form observer functionality</p> </div> <div class="content"><div class='highlight'><pre>scrawl.<span class="hljs-title function_">observeAndUpdate</span>({ <span class="hljs-attr">event</span>: [<span class="hljs-string">'input'</span>, <span class="hljs-string">'change'</span>], <span class="hljs-attr">origin</span>: <span class="hljs-string">'.controlItem'</span>, <span class="hljs-attr">target</span>: swirl, <span class="hljs-attr">useNativeListener</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">preventDefault</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">updates</span>: { <span class="hljs-attr">opacity</span>: [<span class="hljs-string">'opacity'</span>, <span class="hljs-string">'float'</span>], <span class="hljs-attr">start_xPercent</span>: [<span class="hljs-string">'startX'</span>, <span class="hljs-string">'%'</span>], <span class="hljs-attr">start_yPercent</span>: [<span class="hljs-string">'startY'</span>, <span class="hljs-string">'%'</span>], <span class="hljs-attr">start_xAbsolute</span>: [<span class="hljs-string">'startX'</span>, <span class="hljs-string">'round'</span>], <span class="hljs-attr">start_yAbsolute</span>: [<span class="hljs-string">'startY'</span>, <span class="hljs-string">'round'</span>], <span class="hljs-attr">innerRadius_percent</span>: [<span class="hljs-string">'innerRadius'</span>, <span class="hljs-string">'%'</span>], <span class="hljs-attr">innerRadius_absolute</span>: [<span class="hljs-string">'innerRadius'</span>, <span class="hljs-string">'round'</span>], <span class="hljs-attr">outerRadius_percent</span>: [<span class="hljs-string">'outerRadius'</span>, <span class="hljs-string">'%'</span>], <span class="hljs-attr">outerRadius_absolute</span>: [<span class="hljs-string">'outerRadius'</span>, <span class="hljs-string">'round'</span>], <span class="hljs-attr">angle</span>: [<span class="hljs-string">'angle'</span>, <span class="hljs-string">'round'</span>], <span class="hljs-attr">transparentEdges</span>: [<span class="hljs-string">'transparentEdges'</span>, <span class="hljs-string">'boolean'</span>], }, }); scrawl.<span class="hljs-title function_">addNativeListener</span>([<span class="hljs-string">'input'</span>, <span class="hljs-string">'change'</span>], <span class="hljs-function">(<span class="hljs-params">e</span>) =></span> { e.<span class="hljs-title function_">preventDefault</span>(); e.<span class="hljs-property">returnValue</span> = <span class="hljs-literal">false</span>; <span class="hljs-keyword">let</span> val = e.<span class="hljs-property">target</span>.<span class="hljs-property">value</span>; <span class="hljs-keyword">if</span> ([<span class="hljs-string">'user-steps'</span>, <span class="hljs-string">'user-zigzag'</span>].<span class="hljs-title function_">includes</span>(val)) { swirl.<span class="hljs-title function_">set</span>({ <span class="hljs-attr">easing</span>: bespokeEasings[val], }); } <span class="hljs-keyword">else</span> { swirl.<span class="hljs-title function_">set</span>({ <span class="hljs-attr">easing</span>: val, }); } }, <span class="hljs-string">'#easing'</span>);</pre></div></div> </li> <li id="section-11"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-11">§</a> </div> <p>Setup form</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> opacity = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#opacity'</span>); <span class="hljs-keyword">const</span> angle = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#angle'</span>);</pre></div></div> </li> <li id="section-12"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-12">§</a> </div> <p>@ts-expect-error</p> </div> <div class="content"><div class='highlight'><pre>opacity.<span class="hljs-property">value</span> = <span class="hljs-number">1</span>;</pre></div></div> </li> <li id="section-13"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-13">§</a> </div> <p>@ts-expect-error</p> </div> <div class="content"><div class='highlight'><pre>angle.<span class="hljs-property">value</span> = <span class="hljs-number">90</span>;</pre></div></div> </li> <li id="section-14"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-14">§</a> </div> <p>@ts-expect-error</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#start_xPercent'</span>).<span class="hljs-property">value</span> = <span class="hljs-number">50</span>;</pre></div></div> </li> <li id="section-15"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-15">§</a> </div> <p>@ts-expect-error</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#start_yPercent'</span>).<span class="hljs-property">value</span> = <span class="hljs-number">50</span>;</pre></div></div> </li> <li id="section-16"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-16">§</a> </div> <p>@ts-expect-error</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-variable language