scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,411 lines (891 loc) • 49.9 kB
HTML
<html>
<head>
<title>Demo Canvas 001</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-001">Demo Canvas 001</h1>
<p>Block and Wheel entitys (make, clone, method); drag and drop block and wheel entitys</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-001.html">Run code</a></p>
</div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<p>Various ways to import the SAcrawl-canvas library, depending on project requirements</p>
<pre><code><span class="hljs-comment">// If library has been added to a project build using npm/yarn/etc and is being bundled:</span>
<span class="hljs-keyword">import</span> scrawl <span class="hljs-keyword">from</span> <span class="hljs-string">'scrawl'</span>;
<span class="hljs-comment">// If library has been added to a public/dist folder in the code base:</span>
<span class="hljs-keyword">import</span> scrawl <span class="hljs-keyword">from</span> <span class="hljs-string">'./path/to/min/scrawl.js'</span>;
<span class="hljs-comment">// If library is imported from a Content Distribution Network endpoint:</span>
<span class="hljs-keyword">import</span> scrawl <span class="hljs-keyword">from</span> <span class="hljs-string">'https://path/to/cdn/endpoint/scrawl-canvas'</span>;
<span class="hljs-comment">// If the library is to be used in a TypeScript project, or for tree-shaking[1], then functions need to be imported individually:</span>
<span class="hljs-keyword">import</span> {
makeBlock,
makeWheel,
} <span class="hljs-keyword">from</span> <span class="hljs-string">'relevant-library-path-source'</span>;
<span class="hljs-comment">// ...Or, alternatively, using the * notation:</span>
<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> scrawl <span class="hljs-keyword">from</span> <span class="hljs-string">'relevant-library-path-source'</span>;
<span class="hljs-comment">// [1] - Tree-shaking functionality to help package managers reduce the size of the shipped library code is on the road map for delivery as part of SC version 9.0.0</span>
</code></pre>
<ul>
<li>All testing Demos use the TS version for loading the library, so we can test the library’s .d.ts TypeScript definitions file against them (SC doesn’t use TS internally). Other approaches tend to generate a TypeScript error claiming (wrongly) that the library doesn’t have a default export.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> {
library <span class="hljs-keyword">as</span> L,
makeBlock,
makeDragZone,
makeRender,
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-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</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">artefact</span>.<span class="hljs-property">mycanvas</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 and clone block entitys</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-title function_">makeBlock</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'myblock-fill'</span>,
<span class="hljs-attr">width</span>: <span class="hljs-number">100</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">100</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">25</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-number">25</span>,
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'green'</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'gold'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">lineJoin</span>: <span class="hljs-string">'round'</span>,
<span class="hljs-attr">shadowOffsetX</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">shadowOffsetY</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">shadowBlur</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">shadowColor</span>: <span class="hljs-string">'black'</span>,
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'myblock-draw'</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">175</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'draw'</span>,
<span class="hljs-attr">sharedState</span>: <span class="hljs-literal">true</span>
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'myblock-drawAndFill'</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">325</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'drawAndFill'</span>,
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'myblock-fillAndDraw'</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">475</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'fillAndDraw'</span>,
<span class="hljs-attr">sharedState</span>: <span class="hljs-literal">true</span>
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'myblock-drawThenFill'</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-number">175</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'drawThenFill'</span>
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'myblock-fillThenDraw'</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">325</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'fillThenDraw'</span>,
<span class="hljs-attr">sharedState</span>: <span class="hljs-literal">true</span>
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'myblock-clear'</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">175</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'clear'</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 and clone Wheel entitys</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">'mywheel-fill'</span>,
<span class="hljs-attr">radius</span>: <span class="hljs-number">50</span>,
<span class="hljs-attr">startAngle</span>: <span class="hljs-number">15</span>,
<span class="hljs-attr">endAngle</span>: -<span class="hljs-number">15</span>,
<span class="hljs-attr">includeCenter</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">475</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-number">475</span>,
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'purple'</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'gold'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">lineJoin</span>: <span class="hljs-string">'round'</span>,
<span class="hljs-attr">shadowOffsetX</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">shadowOffsetY</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">shadowBlur</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">shadowColor</span>: <span class="hljs-string">'black'</span>,
<span class="hljs-attr">purge</span>: <span class="hljs-string">'all'</span>,
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'mywheel-draw'</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">325</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'draw'</span>,
<span class="hljs-attr">sharedState</span>: <span class="hljs-literal">true</span>
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'mywheel-drawAndFill'</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">175</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'drawAndFill'</span>,
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'mywheel-fillAndDraw'</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">25</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'fillAndDraw'</span>,
<span class="hljs-attr">sharedState</span>: <span class="hljs-literal">true</span>
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'mywheel-drawThenFill'</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-number">325</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'drawThenFill'</span>
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'mywheel-fillThenDraw'</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">175</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'fillThenDraw'</span>,
<span class="hljs-attr">sharedState</span>: <span class="hljs-literal">true</span>
}).<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'mywheel-clear'</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">325</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'clear'</span>
});</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p>Change the fill and stroke styles on one of the blocks, and one of the wheels, and any entitys sharing their respective states</p>
</div>
<div class="content"><div class='highlight'><pre>L.<span class="hljs-property">artefact</span>[<span class="hljs-string">'myblock-fillAndDraw'</span>].<span class="hljs-title function_">set</span>({
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'blue'</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'coral'</span>
});</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p>Entitys can be found in both the ‘artefact’ and ‘entity’ sections of the library</p>
</div>
<div class="content"><div class='highlight'><pre>L.<span class="hljs-property">entity</span>[<span class="hljs-string">'mywheel-fillAndDraw'</span>].<span class="hljs-title function_">set</span>({
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'blue'</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'coral'</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="user-interaction">User interaction</h4>
<p>Create the drag-and-drop zone</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> current = <span class="hljs-title function_">makeDragZone</span>({
<span class="hljs-attr">zone</span>: canvas,
<span class="hljs-attr">endOn</span>: [<span class="hljs-string">'up'</span>, <span class="hljs-string">'leave'</span>],
<span class="hljs-attr">exposeCurrentArtefact</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">preventTouchDefaultWhenDragging</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>
<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">const</span> dragging = <span class="hljs-title function_">current</span>();
<span class="hljs-keyword">return</span> <span class="hljs-string">`Currently dragging: <span class="hljs-subst">${(<span class="hljs-keyword">typeof</span> dragging !== <span class="hljs-string">'boolean'</span> && dragging) ? dragging.artefact.name : <span class="hljs-string">'nothing'</span>}</span>`</span>;
});</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</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>: canvas,
<span class="hljs-attr">afterShow</span>: report,
});</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<h4 id="development-and-testing">Development and testing</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(L);
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Performing tests ...'</span>);
<span class="hljs-title function_">killArtefact</span>(canvas, <span class="hljs-string">'myblock-fill'</span>, <span class="hljs-number">4000</span>);
<span class="hljs-title function_">killArtefact</span>(canvas, <span class="hljs-string">'mywheel-fillAndDraw'</span>, <span class="hljs-number">6000</span>);</pre></div></div>
</li>
</ul>
</div>
</body>
</html>