scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,031 lines (650 loc) • 40.5 kB
HTML
<html>
<head>
<title>Demo DOM 014 - third scene</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="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-014a.html">
./demo/dom-014a.js
</a>
<a class="source" href="dom-014b.html">
./demo/dom-014b.js
</a>
<a class="source" href="dom-014c.html">
./demo/dom-014c.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-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="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="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="temp-001.html">
./demo/temp-001.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-inkscapeSvgFilters.html">
./demo/temp-inkscapeSvgFilters.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>
</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-dom-014---third-scene">Demo DOM 014 - third scene</h1>
<p>Load and run multiple scripts on same page</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/dom-014.html">Run code</a></p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> scrawl <span class="hljs-keyword">from</span> <span class="hljs-string">'../source/scrawl.js'</span>
<span class="hljs-keyword">let</span> artefact = scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">artefact</span>,
stack = artefact.<span class="hljs-property">mystack</span>,
element = artefact.<span class="hljs-property">myelement</span>,
canvas = artefact.<span class="hljs-property">mycanvas3</span>,
cell = canvas.<span class="hljs-property">base</span>;
canvas.<span class="hljs-title function_">setAsCurrentCanvas</span>();
stack.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">width</span>: <span class="hljs-number">600</span>,
<span class="hljs-attr">height</span>:<span class="hljs-number">400</span>,
<span class="hljs-attr">perspectiveZ</span>: <span class="hljs-number">1200</span>,
});
canvas.<span class="hljs-title function_">set</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">backgroundColor</span>: <span class="hljs-string">'black'</span>,
});
cell.<span class="hljs-title function_">set</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-keyword">let</span> testers = scrawl.<span class="hljs-title function_">makeGroup</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'testers'</span>,
<span class="hljs-attr">host</span>: <span class="hljs-string">'mystack'</span>,
});
element.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">group</span>: <span class="hljs-string">'testers'</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-number">300</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-number">200</span>,
<span class="hljs-attr">handleX</span>: <span class="hljs-number">100</span>,
<span class="hljs-attr">handleY</span>: <span class="hljs-number">100</span>,
<span class="hljs-attr">width</span>: <span class="hljs-number">200</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">200</span>,
<span class="hljs-attr">roll</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">pitch</span>: <span class="hljs-number">20</span>,
<span class="hljs-attr">yaw</span>: <span class="hljs-number">30</span>,
<span class="hljs-attr">css</span>: {
<span class="hljs-attr">borderWidth</span>: <span class="hljs-string">'6px'</span>,
},
<span class="hljs-attr">collides</span>: <span class="hljs-literal">true</span>,
});
<span class="hljs-keyword">let</span> baseColor = <span class="hljs-string">'aliceblue'</span>,
highlightColor = <span class="hljs-string">'red'</span>,
gridSize = <span class="hljs-number">40</span>;
<span class="hljs-keyword">let</span> grid = scrawl.<span class="hljs-title function_">makeGroup</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'grid'</span>,
<span class="hljs-attr">host</span>: cell.<span class="hljs-property">name</span>,
});
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> y = <span class="hljs-number">0</span>; y < <span class="hljs-number">400</span>; y += gridSize) {
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> x = <span class="hljs-number">0</span>; x < <span class="hljs-number">600</span>; x += gridSize) {
scrawl.<span class="hljs-title function_">makeBlock</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`grid-<span class="hljs-subst">${x <span class="hljs-regexp">/ gridSize}-${y /</span> gridSize}</span>`</span>,
<span class="hljs-attr">group</span>: <span class="hljs-string">'grid'</span>,
<span class="hljs-attr">width</span>: gridSize - <span class="hljs-number">0.5</span>,
<span class="hljs-attr">height</span>: gridSize - <span class="hljs-number">0.5</span>,
<span class="hljs-attr">startX</span>: x,
<span class="hljs-attr">startY</span>: y,
<span class="hljs-attr">fillStyle</span>: baseColor,
<span class="hljs-attr">method</span>: <span class="hljs-string">'fill'</span>,
});
}
}
scrawl.<span class="hljs-title function_">makeDragZone</span>({
<span class="hljs-attr">zone</span>: stack,
<span class="hljs-attr">collisionGroup</span>: testers,
<span class="hljs-attr">endOn</span>: [<span class="hljs-string">'up'</span>, <span class="hljs-string">'leave'</span>],
});
<span class="hljs-keyword">let</span> checkHits = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">let</span> hits = [];
<span class="hljs-keyword">return</span> <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
hits.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">hit</span> =></span> hit.<span class="hljs-property">artefact</span>.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">fillStyle</span>: baseColor
}));
hits = grid.<span class="hljs-title function_">getArtefactCollisions</span>(element);
hits.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">hit</span> =></span> hit.<span class="hljs-property">artefact</span>.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">fillStyle</span>: highlightColor
}));
};
}();
<span class="hljs-keyword">let</span> report = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">let</span> testTicker = <span class="hljs-title class_">Date</span>.<span class="hljs-title function_">now</span>(),
testTime, testNow,
testMessage = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#reportmessage3'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
testNow = <span class="hljs-title class_">Date</span>.<span class="hljs-title function_">now</span>();
testTime = testNow - testTicker;
testTicker = testNow;
testMessage.<span class="hljs-property">textContent</span> = <span class="hljs-string">`Animation threshhold set to 0.0
- at least 1px of the stack must be visible for the animation to run
Screen refresh: <span class="hljs-subst">${<span class="hljs-built_in">Math</span>.ceil(testTime)}</span>ms; fps: <span class="hljs-subst">${<span class="hljs-built_in">Math</span>.floor(<span class="hljs-number">1000</span> / testTime)}</span>`</span>;
};
}();
<span class="hljs-keyword">let</span> animations = scrawl.<span class="hljs-title function_">makeRender</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'demo-animation3'</span>,
<span class="hljs-attr">target</span>: [stack, canvas],
<span class="hljs-attr">afterCreated</span>: <span class="hljs-function">() =></span> element.<span class="hljs-title function_">set</span>({ <span class="hljs-attr">roll</span>: <span class="hljs-number">10.001</span> }),
<span class="hljs-attr">commence</span>: checkHits,
<span class="hljs-attr">afterShow</span>: report,
});
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>: element,
<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">handle_xAbsolute</span>: [<span class="hljs-string">'handleX'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">handle_yAbsolute</span>: [<span class="hljs-string">'handleY'</span>, <span class="hljs-string">'round'</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_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">pitch</span>: [<span class="hljs-string">'pitch'</span>, <span class="hljs-string">'float'</span>],
<span class="hljs-attr">yaw</span>: [<span class="hljs-string">'yaw'</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">sensitivity</span>: [<span class="hljs-string">'sensorSpacing'</span>, <span class="hljs-string">'round'</span>],
},
});
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>: stack,
<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">perspective</span>: [<span class="hljs-string">'perspectiveZ'</span>, <span class="hljs-string">'round'</span>],
},
});</pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<p>Setup form</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">'#sensitivity'</span>).<span class="hljs-property">value</span> = <span class="hljs-number">50</span>;
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#handle_xAbsolute'</span>).<span class="hljs-property">value</span> = <span class="hljs-number">100</span>;
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#handle_yAbsolute'</span>).<span class="hljs-property">value</span> = <span class="hljs-number">100</span>;
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#offset_xAbsolute'</span>).<span class="hljs-property">value</span> = <span class="hljs-number">0</span>;
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#offset_yAbsolute'</span>).<span class="hljs-property">value</span> = <span class="hljs-number">0</span>;
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#roll'</span>).<span class="hljs-property">value</span> = <span class="hljs-number">10</span>;
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#pitch'</span>).<span class="hljs-property">value</span> = <span class="hljs-number">20</span>;
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#yaw'</span>).<span class="hljs-property">value</span> = <span class="hljs-number">30</span>;
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#scale'</span>).<span class="hljs-property">value</span> = <span class="hljs-number">1</span>;
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#perspective'</span>).<span class="hljs-property">value</span> = <span class="hljs-number">1200</span>;</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<p>Switch animation on/off when at least 1px of stack is showing - this is standard ES16 Javascript, not part of Scrawl-canvas</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> observer = <span class="hljs-keyword">new</span> <span class="hljs-title class_">IntersectionObserver</span>(<span class="hljs-function">(<span class="hljs-params">entries, observer</span>) =></span> {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'observer C starts'</span>, animations[<span class="hljs-number">0</span>].<span class="hljs-property">name</span>, animations[<span class="hljs-number">0</span>].<span class="hljs-title function_">isRunning</span>());</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<p>We’re only observing the stack’s DOM element here, but we need to switch both the stack and the canvas animation renders on or off</p>
</div>
<div class="content"><div class='highlight'><pre> entries.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">entry</span> =></span> {
<span class="hljs-keyword">if</span> (entry.<span class="hljs-property">isIntersecting</span>) animations.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">anim</span> =></span> !anim.<span class="hljs-title function_">isRunning</span>() && anim.<span class="hljs-title function_">run</span>());
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (!entry.<span class="hljs-property">isIntersecting</span>) animations.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">anim</span> =></span> anim.<span class="hljs-title function_">isRunning</span>() && anim.<span class="hljs-title function_">halt</span>());
});
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'observer C completes'</span>, animations[<span class="hljs-number">0</span>].<span class="hljs-property">name</span>, animations[<span class="hljs-number">0</span>].<span class="hljs-title function_">isRunning</span>());</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<p>The second IntersectionObserver argument is the options object</p>
<ul>
<li>passing an empty object will set the threshold value to 0.0</li>
<li>which means if > 0px of the stack DOM element is visible, the animations will run </li>
</ul>
</div>
<div class="content"><div class='highlight'><pre>}, {});
observer.<span class="hljs-title function_">observe</span>(stack.<span class="hljs-property">domElement</span>);
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'#014c'</span>, scrawl.<span class="hljs-property">library</span>);</pre></div></div>
</li>
</ul>
</div>
</body>
</html>