scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,456 lines (912 loc) • 52.1 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Demo Canvas 019</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-019">Demo Canvas 019</h1>
<p>Gradient and Color factories - transparency</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-019.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,
importDomImage,
makeFilter,
makePicture,
createImageFromEntity,
makeRadialGradient,
makeBlock,
makeRender,
addNativeListener,
} <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">const</span> canvases = L.<span class="hljs-property">canvas</span>,
entitys = L.<span class="hljs-property">entity</span>,
c1 = canvases[<span class="hljs-string">'hackney'</span>],
c2 = canvases[<span class="hljs-string">'heathrow'</span>],
c3 = canvases[<span class="hljs-string">'kingston'</span>],
c4 = canvases[<span class="hljs-string">'burglary'</span>];</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<p>Import the images we defined in the DOM (in <img> elements)</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-title function_">importDomImage</span>(<span class="hljs-string">'.places'</span>);</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<p>For this scene, we’ll build a data structure which we can iterate over, to build the entitys, assets and gradients required by the scene</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> data = [
{
<span class="hljs-attr">canvas</span>: c1,
<span class="hljs-attr">image</span>: <span class="hljs-string">'hackney-bg'</span>,
<span class="hljs-attr">transparency</span>: <span class="hljs-string">'transparent'</span>,
},
{
<span class="hljs-attr">canvas</span>: c2,
<span class="hljs-attr">image</span>: <span class="hljs-string">'heathrow-bg'</span>,
<span class="hljs-attr">transparency</span>: <span class="hljs-string">'rgba(0,0,0,0)'</span>,
},
{
<span class="hljs-attr">canvas</span>: c3,
<span class="hljs-attr">image</span>: <span class="hljs-string">'kingston-bg'</span>,
<span class="hljs-attr">transparency</span>: <span class="hljs-string">'#00000000'</span>,
},
{
<span class="hljs-attr">canvas</span>: c4,
<span class="hljs-attr">image</span>: <span class="hljs-string">'burglary-bg'</span>,
<span class="hljs-attr">transparency</span>: <span class="hljs-string">'#0000'</span>,
},
];</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<p>This array will hold a set of functions which we will invoke in turn at the start of each Display cycle</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> checkFunctions = [];</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p>The blur filter is temporary - we use it once on each image to generate a blurred version of that image</p>
<ul>
<li>We do it this way because the blur filter is computationally very expensive - capturing a blurred version of the image is a lot better for end user power consumption</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-title function_">makeFilter</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'blur'</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'gaussianBlur'</span>,
<span class="hljs-attr">radius</span>: <span class="hljs-number">20</span>,
});</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p>Iterate through our data array to create Scrawl-canvas objects</p>
</div>
<div class="content"><div class='highlight'><pre>data.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">scene</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>The original picture, with the blur filter applied to it</p>
<ul>
<li>We will remove the filter in a later step</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> entity = <span class="hljs-title function_">makePicture</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${scene.image}</span>-original`</span>,
<span class="hljs-attr">group</span>: scene.<span class="hljs-property">canvas</span>.<span class="hljs-property">base</span>.<span class="hljs-property">name</span>,
<span class="hljs-attr">asset</span>: scene.<span class="hljs-property">image</span>,
<span class="hljs-attr">dimensions</span>: [<span class="hljs-string">'100%'</span>, <span class="hljs-string">'100%'</span>],
<span class="hljs-attr">copyDimensions</span>: [<span class="hljs-string">'100%'</span>, <span class="hljs-string">'100%'</span>],
<span class="hljs-attr">filters</span>: [<span class="hljs-string">'blur'</span>],
<span class="hljs-attr">method</span>: <span class="hljs-string">'fill'</span>,
});</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<p>A one-off instruction to tell Scrawl-canvas to create an image asset from our Picture entity the next time it performs a Display cycle</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-title function_">createImageFromEntity</span>(entity, <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>The purpose of this demo is to test the various ways we can define ‘transparency’ in Scrawl-canvas Color objects and Gradients - tests a set of Color factory bugs uncovered and fixed in v8.3.2</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-title function_">makeRadialGradient</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${scene.image}</span>-gradient`</span>,
<span class="hljs-attr">start</span>: [<span class="hljs-string">'50%'</span>, <span class="hljs-string">'50%'</span>],
<span class="hljs-attr">end</span>: [<span class="hljs-string">'50%'</span>, <span class="hljs-string">'50%'</span>],
<span class="hljs-attr">startRadius</span>: <span class="hljs-string">'5%'</span>,
<span class="hljs-attr">endRadius</span>: <span class="hljs-string">'20%'</span>,
<span class="hljs-attr">colors</span>: [
[<span class="hljs-number">0</span>, scene.<span class="hljs-property">transparency</span>],
[<span class="hljs-number">999</span>, <span class="hljs-string">'black'</span>]
],
});</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<p>Apply the gradient to the scene via a Block entity</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> filterBlock = <span class="hljs-title function_">makeBlock</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${scene.image}</span>-block`</span>,
<span class="hljs-attr">group</span>: scene.<span class="hljs-property">canvas</span>.<span class="hljs-property">base</span>.<span class="hljs-property">name</span>,
<span class="hljs-attr">start</span>: [<span class="hljs-string">'center'</span>, <span class="hljs-string">'center'</span>],
<span class="hljs-attr">handle</span>: [<span class="hljs-string">'center'</span>, <span class="hljs-string">'center'</span>],
<span class="hljs-attr">dimensions</span>: [<span class="hljs-string">'200%'</span>, <span class="hljs-string">'200%'</span>],
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">`<span class="hljs-subst">${scene.image}</span>-gradient`</span>,
<span class="hljs-attr">lockFillStyleToEntity</span>: <span class="hljs-literal">true</span>,
});</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<p>Check whether the mouse cursor is hovering over this canvas, and update the filter Block entity’s positioning accordingly</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> <span class="hljs-title function_">f</span> = (<span class="hljs-params"></span>) => {
<span class="hljs-keyword">const</span> here = scene.<span class="hljs-property">canvas</span>.<span class="hljs-property">here</span>,
block = filterBlock;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
block.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">lockTo</span>: (here.<span class="hljs-property">active</span>) ? <span class="hljs-string">'mouse'</span> : <span class="hljs-string">'start'</span>,
});
}
};
checkFunctions.<span class="hljs-title function_">push</span>(<span class="hljs-title function_">f</span>());
});</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-14">§</a>
</div>
<p>This function will run once, at the end of the first Display cycle</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">postInitialization</span> = (<span class="hljs-params">anim</span>) => {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(anim.<span class="hljs-property">target</span>.<span class="hljs-property">name</span>, <span class="hljs-string">'postInitialization'</span>)
<span class="hljs-keyword">let</span> original = entitys[<span class="hljs-string">`<span class="hljs-subst">${anim.target.name}</span>-bg-original`</span>];</pre></div></div>
</li>
<li id="section-15">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-15">§</a>
</div>
<p>Update our original Picture entity, in particular to remove the blur filter and set up its composition in the scene</p>
</div>
<div class="content"><div class='highlight'><pre> original.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">filters</span>: [],
<span class="hljs-attr">order</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">globalCompositeOperation</span>: <span class="hljs-string">'destination-over'</span>,
});</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-16">§</a>
</div>
<p>Create a second Picture entity using the blurred image asset Scrawl-canvas created for us during the first iteration of the Display cycle.</p>
<ul>
<li>Note that we’ve asked Scrawl-canvas to create an <img> element (outside of the DOM) from our original Picture’s blurred output. Element creation takes time (it’s an asynchronous action), which means that our new Picture entity won’t show up for up to a second after the demo starts running.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> original.<span class="hljs-title function_">clone</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${anim.target.name}</span>-bg-blurred`</span>,
<span class="hljs-attr">asset</span>: <span class="hljs-string">`<span class="hljs-subst">${anim.target.name}</span>-bg-original-image`</span>,
<span class="hljs-attr">order</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">globalCompositeOperation</span>: <span class="hljs-string">'source-atop'</span>,
});
};</pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</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>);</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</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>: [c1, c2, c3, c4],
<span class="hljs-attr">observer</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">afterCreated</span>: postInitialization,
<span class="hljs-attr">commence</span>: <span class="hljs-function">() =></span> checkFunctions.<span class="hljs-title function_">forEach</spa