scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,407 lines (874 loc) • 73 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Demo Canvas 010</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-010">Demo Canvas 010</h1>
<p>Use video sources and media streams for Picture 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-010.html">Run code</a></p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> {
addListener,
importDomVideo,
importMediaStream,
library <span class="hljs-keyword">as</span> L,
makePicture,
makeRender,
observeAndUpdate,
} <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 = L.<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>
<h5 id="importing-video-sources">Importing video sources</h5>
</div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<p><strong>Get video stream from DOM <video> element</strong></p>
<ul>
<li>When loading video assets from the DOM, note that Scrawl-canvas has to deal with the <video> element operating under normal DOM rules. This means that (in most modern browsers) the video will not fetch anything beyond its metadata until at least 1px height of the video is displayed in the viewport (videos hidden by any CSS rules will not fetch anything until they are made visible).</li>
<li>The practical implications of this is that any Picture entitys relying on the video as their asset will not display an image until the DOM video element appears in the user’s viewport.</li>
<li>To make sure the Picture entity displays the video’s first frame, we need to explicitly set the DOM element’s preload attribute to <strong>auto</strong></li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-title function_">importDomVideo</span>(<span class="hljs-string">'.myvideo'</span>);</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<p><strong>Create Picture entity</strong> from video entity included in the DOM</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> viddyOne = <span class="hljs-title function_">makePicture</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'first-video'</span>,
<span class="hljs-attr">asset</span>: <span class="hljs-string">'waves'</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">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">copyWidth</span>: <span class="hljs-number">200</span>,
<span class="hljs-attr">copyHeight</span>: <span class="hljs-number">200</span>,
<span class="hljs-attr">copyStartX</span>: <span class="hljs-number">100</span>,
<span class="hljs-attr">copyStartY</span>: <span class="hljs-number">100</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'lightgreen'</span>,
<span class="hljs-attr">order</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'drawThenFill'</span>,
});</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p><strong>Import a video from a remote server</strong></p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> viddyTwo = <span class="hljs-title function_">makePicture</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'second-video'</span>,
<span class="hljs-attr">videoSource</span>: <span class="hljs-string">'img/Motion - 18249.mp4'</span>,
<span class="hljs-attr">width</span>: <span class="hljs-string">'100%'</span>,
<span class="hljs-attr">height</span>: <span class="hljs-string">'100%'</span>,
<span class="hljs-attr">copyWidth</span>: <span class="hljs-string">'100%'</span>,
<span class="hljs-attr">copyHeight</span>: <span class="hljs-string">'100%'</span>,
<span class="hljs-attr">order</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'fill'</span>,
});</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p><strong>Display a device-based media stream</strong> in a Picture entity</p>
<ul>
<li>Note 1: Users will need to explicitly agree to let Scrawl-canvas use the media stream the first time the page loads (the browser should handle this agreement procedure itself)</li>
<li>Note 2: importMediaStream returns a Promise!</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> viddyThree;
<span class="hljs-title function_">importMediaStream</span>({
<span class="hljs-attr">audio</span>: <span class="hljs-literal">false</span>,
})
.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">myface</span> =></span> {
viddyThree = <span class="hljs-title function_">makePicture</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">'mediastream-video'</span>,
<span class="hljs-attr">asset</span>: myface.<span class="hljs-property">name</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-string">'20%'</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-string">'20%'</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-string">'40%'</span>,
<span class="hljs-attr">height</span>: <span class="hljs-string">'40%'</span>,
<span class="hljs-attr">copyWidth</span>: <span class="hljs-string">'100%'</span>,
<span class="hljs-attr">copyHeight</span>: <span class="hljs-string">'100%'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'pink'</span>,
<span class="hljs-attr">order</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'drawThenFill'</span>,
});</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p>Adding some controls to manipulate the media stream’s display</p>
<ul>
<li>For this demo, we’ll use the existing controls setup for manipulating the DOM video</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <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>: viddyThree,
<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">copy_start_xPercent</span>: [<span class="hljs-string">'copyStartX'</span>, <span class="hljs-string">'%'</span>],
<span class="hljs-attr">copy_start_xAbsolute</span>: [<span class="hljs-string">'copyStartX'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">copy_start_yPercent</span>: [<span class="hljs-string">'copyStartY'</span>, <span class="hljs-string">'%'</span>],
<span class="hljs-attr">copy_start_yAbsolute</span>: [<span class="hljs-string">'copyStartY'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">copy_dims_widthPercent</span>: [<span class="hljs-string">'copyWidth'</span>, <span class="hljs-string">'%'</span>],
<span class="hljs-attr">copy_dims_widthAbsolute</span>: [<span class="hljs-string">'copyWidth'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">copy_dims_heightPercent</span>: [<span class="hljs-string">'copyHeight'</span>, <span class="hljs-string">'%'</span>],
<span class="hljs-attr">copy_dims_heightAbsolute</span>: [<span class="hljs-string">'copyHeight'</span>, <span class="hljs-string">'round'</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-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">err</span> =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(err.<span class="hljs-property">message</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">let</span> [copyX, copyY] = viddyOne.<span class="hljs-property">copyStart</span>;
<span class="hljs-keyword">let</span> [copyW, copyH] = viddyOne.<span class="hljs-property">copyDimensions</span>;
<span class="hljs-keyword">let</span> [pasteX, pasteY] = viddyOne.<span class="hljs-property">start</span>;
<span class="hljs-keyword">let</span> [pasteW, pasteH] = viddyOne.<span class="hljs-property">dimensions</span>;
<span class="hljs-keyword">let</span> [handleX, handleY] = viddyOne.<span class="hljs-property">handle</span>;
<span class="hljs-keyword">let</span> {roll, scale} = viddyOne;
<span class="hljs-keyword">return</span> <span class="hljs-string">` Copy - x: <span class="hljs-subst">${copyX}</span>, y: <span class="hljs-subst">${copyY}</span>, w: <span class="hljs-subst">${copyW}</span>, h: <span class="hljs-subst">${copyH}</span>
Paste - x: <span class="hljs-subst">${pasteX}</span>, y: <span class="hljs-subst">${pasteY}</span>, w: <span class="hljs-subst">${pasteW}</span>, h:<span class="hljs-subst">${pasteH}</span>
Handle - x: <span class="hljs-subst">${handleX}</span>, y: <span class="hljs-subst">${handleY}</span>
Roll: <span class="hljs-subst">${roll}</span>; Scale: <span class="hljs-subst">${scale}</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="user-interaction">User interaction</h4>
<p>Setup form observer functionality</p>
</div>
<div class="content"><div class='highlight'><pre><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>: viddyOne,
<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">copy_start_xPercent</span>: [<span class="hljs-string">'copyStartX'</span>, <span class="hljs-string">'%'</span>],
<span class="hljs-attr">copy_start_xAbsolute</span>: [<span class="hljs-string">'copyStartX'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">copy_start_yPercent</span>: [<span class="hljs-string">'copyStartY'</span>, <span class="hljs-string">'%'</span>],
<span class="hljs-attr">copy_start_yAbsolute</span>: [<span class="hljs-string">'copyStartY'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">copy_dims_widthPercent</span>: [<span class="hljs-string">'copyWidth'</span>, <span class="hljs-string">'%'</span>],
<span class="hljs-attr">copy_dims_widthAbsolute</span>: [<span class="hljs-string">'copyWidth'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">copy_dims_heightPercent</span>: [<span class="hljs-string">'copyHeight'</span>, <span class="hljs-string">'%'</span>],
<span class="hljs-attr">copy_dims_heightAbsolute</span>: [<span class="hljs-string">'copyHeight'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">paste_dims_widthPercent</span>: [<span class="hljs-string">'width'</span>, <span class="hljs-string">'%'</span>],
<span class="hljs-attr">paste_dims_widthAbsolute</span>: [<span class="hljs-string">'width'</span>, <span class="hljs-string">'round'</span>],
<span class="hljs-attr">paste_dims_heightPerce