scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,386 lines (862 loc) • 78.1 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Demo Canvas 022</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-022">Demo Canvas 022</h1>
<p>Grid entity - basic functionality (color, gradients)</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-022.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 } <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 = scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">artefact</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>Create gradients</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> cellGradient = scrawl.<span class="hljs-title function_">makeGradient</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'blue-green'</span>,
<span class="hljs-attr">endX</span>: <span class="hljs-string">'100%'</span>,
<span class="hljs-attr">colors</span>: [
[<span class="hljs-number">0</span>, <span class="hljs-string">'blue'</span>],
[<span class="hljs-number">500</span>, <span class="hljs-string">'gold'</span>],
[<span class="hljs-number">999</span>, <span class="hljs-string">'green'</span>]
],
});
<span class="hljs-keyword">let</span> gridGradient = scrawl.<span class="hljs-title function_">makeGradient</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'red-blue'</span>,
<span class="hljs-attr">endX</span>: <span class="hljs-string">'100%'</span>,
<span class="hljs-attr">endY</span>: <span class="hljs-string">'100%'</span>,
<span class="hljs-attr">colors</span>: [
[<span class="hljs-number">0</span>, <span class="hljs-string">'red'</span>],
[<span class="hljs-number">500</span>, <span class="hljs-string">'gold'</span>],
[<span class="hljs-number">999</span>, <span class="hljs-string">'lightblue'</span>]
],
});</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<p>Define Grid <code>tileSource</code> Array objects</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> blueSource = {
<span class="hljs-attr">type</span>: <span class="hljs-string">'color'</span>,
<span class="hljs-attr">source</span>: <span class="hljs-string">'aliceblue'</span>,
};
<span class="hljs-keyword">let</span> redSource = {
<span class="hljs-attr">type</span>: <span class="hljs-string">'color'</span>,
<span class="hljs-attr">source</span>: <span class="hljs-string">'red'</span>,
};
<span class="hljs-keyword">let</span> cellGradientSource = {
<span class="hljs-attr">type</span>: <span class="hljs-string">'cellGradient'</span>,
<span class="hljs-attr">source</span>: cellGradient,
};
<span class="hljs-keyword">let</span> gridGradientSource = {
<span class="hljs-attr">type</span>: <span class="hljs-string">'gridGradient'</span>,
<span class="hljs-attr">source</span>: gridGradient,
};</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 Grid entity</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> myGrid = scrawl.<span class="hljs-title function_">makeGrid</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'test-grid'</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">handleX</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">handleY</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">width</span>: <span class="hljs-number">300</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">200</span>,
<span class="hljs-attr">columns</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">rows</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">tileSources</span>: [blueSource, redSource]
});</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<h4 id="user-interaction">User interaction</h4>
<p>Function to check for mouse position hits over the Grid entity, and adapt it accordingly</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> hitReport = <span class="hljs-string">''</span>;
<span class="hljs-keyword">let</span> <span class="hljs-title function_">checkHitTiles</span> = (<span class="hljs-params"></span>) => {
<span class="hljs-keyword">let</span> hits = myGrid.<span class="hljs-title function_">checkHit</span>(canvas.<span class="hljs-property">here</span>);
myGrid.<span class="hljs-title function_">setAllTilesTo</span>(<span class="hljs-number">0</span>);
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> hits !== <span class="hljs-string">'boolean'</span> && hits) {
myGrid.<span class="hljs-title function_">setTilesTo</span>(hits.<span class="hljs-property">tiles</span>, <span class="hljs-number">1</span>);
hitReport = <span class="hljs-string">`Hits - x: <span class="hljs-subst">${hits.x}</span>, y: <span class="hljs-subst">${hits.y}</span>, tiles: <span class="hljs-subst">${hits.tiles.join(<span class="hljs-string">', '</span>)}</span>`</span>;
}
<span class="hljs-keyword">else</span> hitReport = <span class="hljs-string">'Hits - none reported'</span>;
};</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p>For this demo we will suppress touchmove functionality over the canvas</p>
</div>
<div class="content"><div class='highlight'><pre>scrawl.<span class="hljs-title function_">addNativeListener</span>(<span class="hljs-string">'touchmove'</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>;
}, canvas.<span class="hljs-property">domElement</span>);</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</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] = myGrid.<span class="hljs-property">start</span>;
<span class="hljs-keyword">let</span> [handleX, handleY] = myGrid.<span class="hljs-property">handle</span>;
<span class="hljs-keyword">let</span> [offsetX, offsetY] = myGrid.<span class="hljs-property">offset</span>;
<span class="hljs-keyword">let</span> [width, height] = myGrid.<span class="hljs-property">dimensions</span>;
<span class="hljs-keyword">let</span> here = canvas.<span class="hljs-property">here</span>;
<span class="hljs-keyword">let</span> {roll, scale, columns, rows, columnGutterWidth, rowGutterWidth} = myGrid;
<span class="hljs-keyword">return</span> <span class="hljs-string">` Grid - columns: <span class="hljs-subst">${columns.toFixed(<span class="hljs-number">0</span>)}</span>; rows: <span class="hljs-subst">${rows.toFixed(<span class="hljs-number">0</span>)}</span>
Grid dimensions - width: <span class="hljs-subst">${width}</span>; height: <span class="hljs-subst">${height}</span>
Grid gutter widths - column: <span class="hljs-subst">${columnGutterWidth.toFixed(<span class="hljs-number">0</span>)}</span>; row: <span class="hljs-subst">${rowGutterWidth.toFixed(<span class="hljs-number">0</span>)}</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>
canvas.here - x: <span class="hljs-subst">${here.x.toFixed(<span class="hljs-number">0</span>)}</span>, y: <span class="hljs-subst">${here.y.toFixed(<span class="hljs-number">0</span>)}</span>; <span class="hljs-subst">${hitReport}</span>`</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 Display cycle animation</p>
</div>
<div class="content"><div class='highlight'><pre>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">commence</span>: checkHitTiles,
<span class="hljs-attr">afterShow</span>: report,
});</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<h4 id="more-user-interaction">More 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>: myGrid,
<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">columns</span>: [<span class="hljs-string">'columns'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">rows</span>: [<span class="hljs-string">'rows'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">relativeWidth</span>: [<span class="hljs-string">'width'</span>, <span class="hljs-string">'%'</span>],
<span class="hljs-attr">absoluteWidth</span>: [<span class="hljs-string">'width'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">relativeHeight</span>: [<span class="hljs-string">'height'</span>, <span class="hljs-string">'%'</span>],
<span class="hljs-attr">absoluteHeight</span>: [<span class="hljs-string">'height'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">columnGutter</span>: [<span class="hljs-string">'columnGutterWidth'</span>, <span class="hljs-string">'float'</span>],
<span class="hljs-attr">rowGutter</span>: [<span class="hljs-string">'rowGutterWidth'</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_xAbsolute</span>: [<span class="hljs-string">'startX'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">start_xString</span>: [<span class="hljs-string">'startX'</span>, <span class="hljs-string">'raw'</span>],
<span class="hljs-attr">start_yPercent</span>: [<span class="hljs-string">'startY'</span>, <span class="hljs-string">'%'</span>],
<span class="hljs-attr">start_yAbsolute</span>: [<span class="hljs-string">'startY'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">start_yString</span>: [<span class="hljs-string">'startY'</span>, <span class="hljs-string">'raw'</span>],
<span class="hljs-attr">handle_xPercent</span>: [<span class="hljs-string">'handleX'</span>, <span class="hljs-string">'%'</span>],
<span class="hljs-attr">handle_xAbsolute</span>: [<span class="hljs-string">'handleX'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">handle_xString</span>: [<span class="hljs-string">'handleX'</span>, <span class="hljs-string">'raw'</span>],
<span class="hljs-attr">handle_yPercent</span>: [<span class="hljs-string">'handleY'</span>, <span class="hljs-string">'%'</span>],
<span class="hljs-attr">handle_yAbsolute</span>: [<span class="hljs-string">'handleY'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">handle_yString</span>: [<span class="hljs-string">'handleY'</span>, <span class="hljs-string">'raw'</span>],
<span class="hljs-attr">offset_xPercent</span>: [<span class="hljs-string">'offsetX'</span>, <span class="hljs-string">'%'</span>],
<span class="hljs-attr">offset_xAbsolute</span>: [<span class="hljs-string">'offsetX'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">offset_yPercent</span>: [<span class="hljs-string">'offsetY'</span>, <span class="hljs-string">'%'</span>],
<span class="hljs-attr">offset_yAbsolute</span>: [<span class="hljs-string">'offsetY'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">roll</span>: [<span class="hljs-string">'roll'</span>, <span class="hljs-string">'float'</span>],
<span class="hljs-attr">scale</span>: [<span class="hljs-string">'scale'</span>, <span class="hljs-string">'float'</span>],
<span class="hljs-attr">upend</span>: [<span class="hljs-string">'flipUpend'</span>, <span class="hljs-string">'boolean'</span>],
<span class="hljs-attr">reverse</span>: [<span class="hljs-string">'flipReverse'</span>, <span class="hljs-string">'boolean'</span>],
},
});
<span class="hljs-keyword">let</span> <span class="hljs-title function_">updateBaseFill</span> =