scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
697 lines (658 loc) • 34.3 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scrawl-canvas Documentation</title>
<link rel="stylesheet" media="all" href="docco.css" />
<style>
body {
margin: 1em auto;
width: 90%;
}
h4 {
margin-top: 2em;
}
</style>
</head>
<body>
<h1>Scrawl-canvas documentation (for version 8.9.4)</h1>
<h3>Scrawl-canvas modules</h3>
<h4>Scrawl.js - exports factories and other functions</h4>
<ul>
<li><a href="source/scrawl.html">scrawl.js</a></li>
<li><a href="source/core/init.html">core/init.js</a></li>
<ul>
<li>init</li>
</ul>
<li><a href="source/core/library.html">core/library.js</a></li>
<ul>
<li>library.radian</li>
<li>library.version</li>
</ul>
<ul>
<li>library.sectionClasses</li>
</ul>
<ul>
<li>library.anchor</li>
<li>library.animation</li>
<li>library.animationtickers</li>
<li>library.artefact</li>
<li>library.asset</li>
<li>library.canvas</li>
<li>library.cell</li>
<li>library.element</li>
<li>library.entity</li>
<li>library.filter</li>
<li>library.force</li>
<li>library.group</li>
<li>library.particle</li>
<li>library.spring</li>
<li>library.stack</li>
<li>library.styles</li>
<li>library.tween</li>
<li>library.unstackedelement</li>
<li>library.world</li>
</ul>
</ul>
<h4>Core</h4>
<ul>
<li><a href="source/core/document.html">core/document.js</a></li>
<ul>
<li>addCanvas</li>
<li>addStack</li>
<li>getCanvas</li>
<li>getStack</li>
<li>setCurrentCanvas</li>
</ul>
<ul>
<li>clear</li>
<li>compile</li>
<li>show</li>
<li>render</li>
</ul>
<li><a href="source/core/events.html">core/events.js</a></li>
<ul>
<li>addListener</li>
<li>addNativeListener</li>
<li>makeAnimationObserver</li>
<li>removeListener</li>
<li>removeNativeListener</li>
</ul>
<ul>
<li>getPixelRatio</li>
<li>getIgnorePixelRatio</li>
<li>setIgnorePixelRatio</li>
<li>setPixelRatioChangeAction</li>
</ul>
<li><a href="source/core/userInteraction.html">core/userInteraction.js</a></li>
<ul>
<li>makeDragZone</li>
<li>makeKeyboardZone</li>
<li>observeAndUpdate</li>
</ul>
<ul>
<li>currentCorePosition</li>
<li>forceUpdate</li>
<li>getTouchActionChoke</li>
<li>setTouchActionChoke</li>
<li>startCoreListeners</li>
<li>stopCoreListeners</li>
</ul>
<li><a href="source/mixin/base.html">mixin/base.js</a></li>
<li><a href="source/mixin/delta.html">mixin/delta.js</a></li>
</ul>
<h4>Positioning</h4>
<ul>
<li><a href="source/mixin/mimic.html">mixin/mimic.js</a></li>
<li><a href="source/mixin/path.html">mixin/path.js</a></li>
<li><a href="source/mixin/pivot.html">mixin/pivot.js</a></li>
<li><a href="source/mixin/position.html">mixin/position.js</a></li>
</ul>
<h4>Canvas basic entity artefacts</h4>
<ul>
<li><a href="source/mixin/entity.html">mixin/entity.js</a></li>
<li><a href="source/factory/block.html">factory/block.js</a></li>
<ul>
<li>makeBlock</li>
</ul>
<li><a href="source/factory/crescent.html">factory/crescent.js</a></li>
<ul>
<li>makeCrescent</li>
</ul>
<li><a href="source/factory/phrase.html">factory/phrase.js</a></li>
<ul>
<li>makePhrase</li>
</ul>
<li><a href="source/factory/picture.html">factory/picture.js</a></li>
<ul>
<li>makePicture</li>
</ul>
<li><a href="source/factory/wheel.html">factory/wheel.js</a></li>
<ul>
<li>makeWheel</li>
</ul>
</ul>
<h4>Canvas path-based entity artefacts</h4>
<ul>
<li><a href="source/mixin/shapeBasic.html">mixin/shapeBasic.js</a></li>
<li><a href="source/mixin/shapeCurve.html">mixin/shapeCurve.js</a></li>
<li><a href="source/mixin/shapePathCalculation.html">mixin/shapePathCalculation.js</a></li>
<li><a href="source/factory/bezier.html">factory/bezier.js</a></li>
<ul>
<li>makeBezier</li>
</ul>
<li><a href="source/factory/cog.html">factory/cog.js</a></li>
<ul>
<li>makeCog</li>
</ul>
<li><a href="source/factory/line.html">factory/line.js</a></li>
<ul>
<li>makeLine</li>
</ul>
<li><a href="source/factory/lineSpiral.html">factory/lineSpiral.js</a></li>
<ul>
<li>makeLineSpiral</li>
</ul>
<li><a href="source/factory/oval.html">factory/oval.js</a></li>
<ul>
<li>makeOval</li>
</ul>
<li><a href="source/factory/polygon.html">factory/polygon.js</a></li>
<ul>
<li>makePolygon</li>
</ul>
<li><a href="source/factory/polyline.html">factory/polyline.js</a></li>
<ul>
<li>makePolyline</li>
</ul>
<li><a href="source/factory/quadratic.html">factory/quadratic.js</a></li>
<ul>
<li>makeQuadratic</li>
</ul>
<li><a href="source/factory/rectangle.html">factory/rectangle.js</a></li>
<ul>
<li>makeRectangle</li>
</ul>
<li><a href="source/factory/shape.html">factory/shape.js</a></li>
<ul>
<li>makeShape</li>
</ul>
<li><a href="source/factory/spiral.html">factory/spiral.js</a></li>
<ul>
<li>makeSpiral</li>
</ul>
<li><a href="source/factory/star.html">factory/star.js</a></li>
<ul>
<li>makeStar</li>
</ul>
<li><a href="source/factory/tetragon.html">factory/tetragon.js</a></li>
<ul>
<li>makeTetragon</li>
</ul>
</ul>
<h4>Canvas particle-based entity artefacts</h4>
<ul>
<li><a href="source/factory/emitter.html">factory/emitter.js</a></li>
<ul>
<li>makeEmitter</li>
</ul>
<li><a href="source/factory/net.html">factory/net.js</a></li>
<ul>
<li>makeNet</li>
</ul>
<li><a href="source/factory/tracer.html">factory/tracer.js</a></li>
<ul>
<li>makeTracer</li>
</ul>
</ul>
<h4>Canvas compound entity artefacts</h4>
<ul>
<li><a href="source/factory/grid.html">factory/grid.js</a></li>
<ul>
<li>makeGrid</li>
</ul>
<li><a href="source/factory/loom.html">factory/loom.js</a></li>
<ul>
<li>makeLoom</li>
</ul>
<li><a href="source/factory/mesh.html">factory/mesh.js</a> (particles)</li>
<ul>
<li>makeMesh</li>
</ul>
</ul>
<h4>Non-canvas artefacts</h4>
<ul>
<li><a href="source/mixin/displayShape.html">mixin/displayShape.js</a></li>
<li><a href="source/mixin/dom.html">mixin/dom.js</a></li>
<li><a href="source/factory/canvas.html">factory/canvas.js</a></li>
<li><a href="source/factory/cell.html">factory/cell.js</a></li>
<li><a href="source/factory/element.html">factory/element.js</a></li>
<ul>
<li>makeElement</li>
</ul>
<li><a href="source/factory/stack.html">factory/stack.js</a></li>
</ul>
<h4>Assets</h4>
<ul>
<li><a href="source/mixin/asset.html">mixin/asset.js</a></li>
<li><a href="source/mixin/assetConsumer.html">mixin/assetConsumer.js</a></li>
<li><a href="source/mixin/assetAdvancedFunctionality.html">mixin/assetAdvancedFunctionality.js</a></li>
<li><a href="source/factory/imageAsset.html">factory/imageAsset.js</a></li>
<ul>
<li>importImage</li>
<li>importDomImage</li>
</ul>
<ul>
<li>createImageFromCell</li>
<li>createImageFromEntity</li>
<li>createImageFromGroup</li>
</ul>
<li><a href="source/factory/noiseAsset.html">factory/noiseAsset.js</a> (for Perlin noise, etc)</li>
<ul>
<li>makeNoiseAsset</li>
</ul>
<li><a href="source/factory/rawAsset.html">factory/rawAsset.js</a></li>
<ul>
<li>makeRawAsset</li>
</ul>
<li><a href="source/factory/rdAsset.html">factory/rdAsset.js</a> (for reaction-diffusion noise, etc)</li>
<ul>
<li>makeReactionDiffusionAsset</li>
</ul>
<li><a href="source/factory/spriteAsset.html">factory/spriteAsset.js</a></li>
<ul>
<li>importSprite</li>
</ul>
<li><a href="source/factory/videoAsset.html">factory/videoAsset.js</a></li>
<ul>
<li>importDomVideo</li>
<li>importMediaStream</li>
<li>importVideo</li>
</ul>
<li><em>Note that Cells can also be used as assets</em></li>
</ul>
<h4>Styles</h4>
<ul>
<li><a href="source/mixin/pattern.html">mixin/pattern.js</a></li>
<li><a href="source/mixin/styles.html">mixin/styles.js</a></li>
<li><a href="source/factory/color.html">factory/color.js</a></li>
<ul>
<li>makeColor</li>
</ul>
<li><a href="source/factory/conicGradient.html">factory/conicGradient.js</a></li>
<ul>
<li>makeConicGradient</li>
</ul>
<li><a href="source/factory/gradient.html">factory/gradient.js</a></li>
<ul>
<li>makeGradient</li>
</ul>
<li><a href="source/factory/palette.html">factory/palette.js</a></li>
<li><a href="source/factory/pattern.html">factory/pattern.js</a></li>
<ul>
<li>makePattern</li>
</ul>
<li><a href="source/factory/radialGradient.html">factory/radialGradient.js</a></li>
<ul>
<li>makeRadialGradient</li>
</ul>
</ul>
<h4>Filters</h4>
<ul>
<li><a href="source/mixin/filter.html">mixin/filter.js</a></li>
<li><a href="source/factory/filter.html">factory/filter.js</a></li>
<ul>
<li>makeFilter</li>
</ul>
<li><a href="source/factory/filterEngine.html">factory/filterEngine.js</a></li>
<ul>
<li>setFilterMemoizationChoke</li>
</ul>
</ul>
<h4>Particles and Physics</h4>
<ul>
<li><a href="source/factory/particle.html">factory/particle.js</a></li>
<li><a href="source/factory/particleForce.html">factory/particleForce.js</a></li>
<ul>
<li>makeForce</li>
</ul>
<li><a href="source/factory/particleHistory.html">factory/particleHistory.js</a></li>
<li><a href="source/factory/particleSpring.html">factory/particleSpring.js</a></li>
<ul>
<li>makeSpring</li>
</ul>
<li><a href="source/factory/particleWorld.html">factory/particleWorld.js</a></li>
<ul>
<li>makeWorld</li>
</ul>
</ul>
<h4>Groups</h4>
<ul>
<li><a href="source/mixin/cascade.html">mixin/cascade.js</a></li>
<li><a href="source/factory/group.html">factory/group.js</a></li>
<ul>
<li>makeGroup</li>
</ul>
</ul>
<h4>Animation</h4>
<ul>
<li><a href="source/core/animationloop.html">core/animationloop.js</a></li>
<ul>
<li>startCoreAnimationLoop</li>
<li>stopCoreAnimationLoop</li>
</ul>
<li><a href="source/factory/animation.html">factory/animation.js</a></li>
<ul>
<li>makeAnimation</li>
</ul>
<li><a href="source/factory/renderAnimation.html">factory/renderAnimation.js</a></li>
<ul>
<li>makeRender</li>
</ul>
</ul>
<ul>
<li><a href="source/factory/action.html">factory/action.js</a></li>
<ul>
<li>makeAction</li>
</ul>
<li><a href="source/factory/ticker.html">factory/ticker.js</a></li>
<ul>
<li>makeTicker</li>
</ul>
<li><a href="source/factory/tween.html">factory/tween.js</a></li>
<ul>
<li>makeTween</li>
</ul>
</ul>
<h4>Anchors</h4>
<ul>
<li><a href="source/mixin/anchor.html">mixin/anchor.js</a></li>
<li><a href="source/factory/anchor.html">factory/anchor.js</a></li>
</ul>
<h4>Snippets (experimental)</h4>
<ul>
<li><a href="source/core/snippets.html">core/snippets.js</a></li>
<ul>
<li>makeSnippet</li>
</ul>
<li><a href="source/factory/unstackedElement.html">factory/unstackedElement.js</a></li>
</ul>
<h4>Other modules</h4>
<ul>
<li><a href="source/core/random-seed.html">core/random-seed.js</a></li>
<ul>
<li>seededRandomNumberGenerator</li>
</ul>
<li><a href="source/core/utilities.html">core/utilities.js</a></li>
<li><a href="source/factory/fontAttributes.html">factory/fontAttributes.js</a></li>
<li><a href="source/factory/state.html">factory/state.js</a></li>
</ul>
<ul>
<li><a href="source/factory/coordinate.html">factory/coordinate.js</a></li>
<ul>
<li>requestCoordinate</li>
<li>releaseCoordinate</li>
</ul>
<li><a href="source/factory/quaternion.html">factory/quaternion.js</a></li>
<ul>
<li>requestQuaternion</li>
<li>releaseQuaternion</li>
</ul>
<li><a href="source/factory/vector.html">factory/vector.js</a></li>
<ul>
<li>requestVector</li>
<li>releaseVector</li>
</ul>
</ul>
<h3>Scrawl Demo files</h3>
<p><a href="../demo/">Test Demo Index Page</a></p>
<h4>Canvas demos</h4>
<ul>
<li><a href="demo/canvas-001.html">Canvas-001</a> Block and Wheel entitys (make, clone, method); drag and drop block and wheel entitys</li>
<li><a href="demo/canvas-002.html">Canvas-002</a> Block and wheel entity positioning (start, pivot, mimic, mouse)</li>
<li><a href="demo/canvas-003.html">Canvas-003</a> Linear gradients</li>
<li><a href="demo/canvas-004.html">Canvas-004</a> Radial gradients</li>
<li><a href="demo/canvas-005.html">Canvas-005</a> Cell-locked, and Entity-locked, gradients; animating gradients by delta, and by tween; trigger canvas hover and drag UX</li>
<li><a href="demo/canvas-006.html">Canvas-006</a> Canvas tween stress test</li>
<li><a href="demo/canvas-007.html">Canvas-007</a> Apply filters at the entity, group and cell level</li>
<li><a href="demo/canvas-008.html">Canvas-008</a> Picture entity position; manipulate copy attributes</li>
<li><a href="demo/canvas-009.html">Canvas-009</a> Pattern styles; Entity web link anchors; Dynamic accessibility</li>
<li><a href="demo/canvas-010.html">Canvas-010</a> Use video sources and media streams for Picture entitys</li>
<li><a href="demo/canvas-011.html">Canvas-011</a> Shape entity (make, clone, method); drag and drop shape entitys</li>
<li><a href="demo/canvas-012.html">Canvas-012</a> Shape entity position; shape entity as a path for other artefacts to follow</li>
<li><a href="demo/canvas-013.html">Canvas-013</a> Path-defined entitys: Oval, Rectangle, Line, Quadratic, Bezier, Tetragon, Polygon, Star, Spiral, Cog</li>
<li><a href="demo/canvas-014.html">Canvas-014</a> Line, Quadratic and Bezier entitys - control lock alternatives</li>
<li><a href="demo/canvas-015.html">Canvas-015</a> Phrase entity (make, clone, method, multiline)</li>
<li><a href="demo/canvas-015a.html">Canvas-015a</a> Phrase entity - cache output to improve render speeds</li>
<li><a href="demo/canvas-016.html">Canvas-016</a> Phrase entity position and font attributes; Block mimic functionality</li>
<li><a href="demo/canvas-017.html">Canvas-017</a> Phrase entity - test lineHeight, letterSpacing and justify attributes; Section classes functionality</li>
<li><a href="demo/canvas-018.html">Canvas-018</a> Phrase entity - text along a path</li>
<li><a href="demo/canvas-019.html">Canvas-019</a> Gradient and Color factories - transparency</li>
<li><a href="demo/canvas-019a.html">Canvas-019a</a> Gradient and Color factories - transparency - alternative approach using Cells instead of images</li>
<li><a href="demo/canvas-020.html">Canvas-020</a> Testing createImageFromXXX functionality</li>
<li><a href="demo/canvas-021.html">Canvas-021</a> Import and use spritesheets</li>
<li><a href="demo/canvas-022.html">Canvas-022</a> Grid entity - basic functionality (color, gradients)</li>
<li><a href="demo/canvas-023.html">Canvas-023</a> Grid entity - using picture-based assets (image, video, sprite)</li>
<li><a href="demo/canvas-024.html">Canvas-024</a> Loom entity functionality</li>
<li><a href="demo/canvas-025.html">Canvas-025</a> Various responsive and non-responsive canvases; responsive images</li>
<li><a href="demo/canvas-026.html">Canvas-026</a> Tower of Hanoi</li>
<li><a href="demo/canvas-027.html">Canvas-027</a> Video control and manipulation; chroma-based hit zone</li>
<li><a href="demo/canvas-028.html">Canvas-028</a> Image magnifier; test some composite operations</li>
<li><a href="demo/canvas-029.html">Canvas-029</a> Phrase entitys and gradients</li>
<li><a href="demo/canvas-030.html">Canvas-030</a> Polyline entity functionality</li>
<li><a href="demo/canvas-031.html">Canvas-031</a> Cell generation and processing order - kaliedoscope clock</li>
<li><a href="demo/canvas-032.html">Canvas-032</a> Freehand drawing</li>
<li><a href="demo/canvas-033.html">Canvas-033</a> User preferences: prefers-color-scheme; prefers-reduced-motion; Javascript disabled</li>
<li><a href="demo/canvas-034.html">Canvas-034</a> Determine the displayed shape of the visible canvas; react to changes in the displayed shape</li>
<li><a href="demo/canvas-035.html">Canvas-035</a> Pattern style functionality</li>
<li><a href="demo/canvas-036.html">Canvas-036</a> Cell artefact-like positional functionality</li>
<li><a href="demo/canvas-037.html">Canvas-037</a> Pan and zoom using a Picture entity</li>
<li><a href="demo/canvas-038.html">Canvas-038</a> Responsive Shape-based entitys</li>
<li><a href="demo/canvas-039.html">Canvas-039</a> Detecting mouse/pointer cursor movements across a non-base Cell</li>
<li><a href="demo/canvas-040.html">Canvas-040</a> Trace out a Shape path over time</li>
<li><a href="demo/canvas-041.html">Canvas-041</a> Access and use a canvas context engine using the makeAnimation factory</li>
<li><a href="demo/canvas-042.html">Canvas-042</a> Canvas entity clip regions</li>
<li><a href="demo/canvas-043.html">Canvas-043</a> Test various clipping strategies</li>
<li><a href="demo/canvas-044.html">Canvas-044</a> Building more complex patterns</li>
<li><a href="demo/canvas-045.html">Canvas-045</a> Use clipping entitys as pivots; clipping entitys and cascade events</li>
<li><a href="demo/canvas-046.html">Canvas-046</a> Kill cycles for Cell, Group, Tween/Ticker, Picture and Asset objects, and Picture source elements in the DOM</li>
<li><a href="demo/canvas-047.html">Canvas-047</a> Easing functions for Color and Tween factories</li>
<li><a href="demo/canvas-048.html">Canvas-048</a> Display a filtered media stream</li>
<li><a href="demo/canvas-049.html">Canvas-049</a> Conic gradients</li>
<li><a href="demo/canvas-050.html">Canvas-050</a> Manipulate artefact delta animation values</li>
<li><a href="demo/canvas-051.html">Canvas-051</a> Line Spirals</li>
<li><a href="demo/canvas-052.html">Canvas-052</a> Create and use a RawAsset object to modify an image asset</li>
<li><a href="demo/canvas-053.html">Canvas-053</a> Display output from a Reaction-Diffusion asset</li>
<li><a href="demo/canvas-054.html">Canvas-054</a> Animated contour lines: map a complex gradient to NoiseAsset output</li>
<li><a href="demo/canvas-055.html">Canvas-055</a> Crescent entity functionality</li>
<li><a href="demo/canvas-056.html">Canvas-056</a> Seeded random number generator; point on path</li>
<li><a href="demo/canvas-057.html">Canvas-057</a> Animation observer; animations controlled by scroll position</li>
<li><a href="demo/canvas-058.html">Canvas-058</a> Image smoothing</li>
<li><a href="demo/canvas-059.html">Canvas-059</a> CSS color space strings - rgb-key, rgb-hex, rgb(), rgba(), hsl(), hsla(), hwb(), lch(), lab(), oklab(), oklch()</li>
<li><a href="demo/canvas-060.html">Canvas-060</a> Noise asset functionality</li>
<li><a href="demo/canvas-061.html">Canvas-061</a> Gradients stress test</li>
<li><a href="demo/canvas-062.html">Canvas-062</a> Group and ungroup entitys; create a bespoke drag-drop UX</li>
<li><a href="demo/canvas-063.html">Canvas-063</a> Semi-accessible Minimap; multiple drag zones</li>
<li><a href="demo/canvas-064.html">Canvas-064</a> Animation object: gradient along a line</li>
</ul>
<h4>Filters demos</h4>
<ul>
<li><a href="demo/filters-001.html">Filters-001</a> Parameters for: Blur, Gaussianblur filters; filter memoization</li>
<li><a href="demo/filters-002.html">Filters-002</a> Parameters for: red, green, blue, cyan, magenta, yellow, notred, notgreen, notblue, grayscale, sepia, invert filters</li>
<li><a href="demo/filters-002a.html">Filters-002a</a> Cache output to improve render speeds</li>
<li><a href="demo/filters-003.html">Filters-003</a> Parameters for: brightness, saturation filters</li>
<li><a href="demo/filters-004.html">Filters-004</a> Parameters for: threshold filter</li>
<li><a href="demo/filters-005.html">Filters-005</a> Parameters for: channelstep filter</li>
<li><a href="demo/filters-006.html">Filters-006</a> Parameters for: channelLevels filter</li>
<li><a href="demo/filters-007.html">Filters-007</a> Parameters for: channels filter</li>
<li><a href="demo/filters-008.html">Filters-008</a> Parameters for: tint filter</li>
<li><a href="demo/filters-009.html">Filters-009</a> Parameters for: pixelate filter</li>
<li><a href="demo/filters-010.html">Filters-010</a> Parameters for: chroma filter</li>
<li><a href="demo/filters-011.html">Filters-011</a> Parameters for: chromakey filter</li>
<li><a href="demo/filters-012.html">Filters-012</a> Parameters for: matrix, matrix5 filters</li>
<li><a href="demo/filters-013.html">Filters-013</a> Parameters for: flood filter</li>
<li><a href="demo/filters-014.html">Filters-014</a> Parameters for: areaAlpha filter</li>
<li><a href="demo/filters-015.html">Filters-015</a> Parameters for: tiles filter</li>
<li><a href="demo/filters-016.html">Filters-016</a> Parameters for: newsprint filter</li>
<li><a href="demo/filters-017.html">Filters-017</a> Parameters for: displace filter</li>
<li><a href="demo/filters-018.html">Filters-018</a> Parameters for: emboss filter</li>
<li><a href="demo/filters-019.html">Filters-019</a> Parameters for: edgeDetect, sharpen filters</li>
<li><a href="demo/filters-020.html">Filters-020</a> Parameters for: clampChannels filter</li>
<li><a href="demo/filters-021.html">Filters-021</a> Parameters for: corrode filter</li>
<li><a href="demo/filters-022.html">Filters-022</a> Parameters for: mapToGradient filter</li>
<li><a href="demo/filters-023.html">Filters-023</a> Parameters for: randomNoise filter</li>
<li><a href="demo/filters-024.html">Filters-024</a> Parameters for: curveNoise filter</li>
<li><a href="demo/filters-025.html">Filters-025</a> Parameters for: glitch filter</li>
<li><a href="demo/filters-026.html">Filters-026</a> Parameters for: swirl filter</li>
<li><a href="demo/filters-027.html">Filters-027</a> Parameters for: reducePalette filter</li>
</ul>
<h4>Compound filters demos</h4>
<ul>
<li><a href="demo/filters-101.html">Filters-101</a> Using assets in the filter stream; filter compositing</li>
<li><a href="demo/filters-102.html">Filters-102</a> Filter blend operation</li>
<li><a href="demo/filters-103.html">Filters-103</a> A gallery of compound filter effects</li>
<li><a href="demo/filters-104.html">Filters-104</a> Use a white-transparent gradient as a filter input</li>
<li><a href="demo/filters-105.html">Filters-105</a> Use entitys to generate points for the tiles filter</li>
</ul>
<h4>CSS/SVG filter String demos</h4>
<ul>
<li><a href="demo/filters-501.html">Filters-501</a> Canvas engine filter strings (based on CSS filters)</li>
<li><a href="demo/filters-502.html">Filters-502</a> SVG-based filter example: gaussian blur</li>
<li><a href="demo/filters-503.html">Filters-503</a> SVG-based filter example: posterize</li>
<li><a href="demo/filters-504.html">Filters-504</a> SVG-based filter example: duotone</li>
<li><a href="demo/filters-505.html">Filters-505</a> SVG-based filter example: noise</li>
</ul>
<h4>Particles and physics demos</h4>
<ul>
<li><a href="demo/particles-001.html">Particles-001</a> Emitter entity, and Particle World, basic functionality</li>
<li><a href="demo/particles-002.html">Particles-002</a> Emitter using artefacts</li>
<li><a href="demo/particles-003.html">Particles-003</a> Position Emitter entity: start; pivot; mimic; path; mouse; drag-and-drop</li>
<li><a href="demo/particles-004.html">Particles-004</a> Emit particles along the length of a path</li>
<li><a href="demo/particles-005.html">Particles-005</a> Emit particles from inside an artefact's area</li>
<li><a href="demo/particles-006.html">Particles-006</a> Fixed number of particles in a field; preAction and postAction functionality</li>
<li><a href="demo/particles-007.html">Particles-007</a> Particle Force objects: generation and functionality</li>
<li><a href="demo/particles-008.html">Particles-008</a> Net entity: generation and basic functionality, including Spring objects</li>
<li><a href="demo/particles-009.html">Particles-009</a> Net particles: drag-and-drop functionality</li>
<li><a href="demo/particles-010.html">Particles-010</a> Net entity: using a shape path as a net template</li>
<li><a href="demo/particles-011.html">Particles-011</a> Tracer entity: generation and functionality</li>
<li><a href="demo/particles-012.html">Particles-012</a> Use Net entity particles as reference coordinates for other artefacts</li>
<li><a href="demo/particles-013.html">Particles-013</a> Seasons greetings</li>
<li><a href="demo/particles-014.html">Particles-014</a> Emitter functionality: generate from existing particles</li>
<li><a href="demo/particles-015.html">Particles-015</a> Emitter functionality: generate from existing particle histories</li>
<li><a href="demo/particles-016.html">Particles-016</a> Mesh entitys</li>
</ul>
<h4>Module demos</h4>
<ul>
<li><a href="demo/modules-001.html">Modules-001</a> Scrawl-canvas modularized code - London crime charts (with accessible data)</li>
<ul>
<li><a href="demo/modules/london-crime-lines.html">Module code</a> london-crime-lines.js</li>
<li><a href="demo/modules/london-crime-stacked-bars.html">Module code</a> london-crime-stacked-bars.js</li>
<li><a href="demo/modules/simple-chart-frame.html">Module code</a> simple-chart-frame.js</li>
<li><a href="demo/modules/simple-chart-frame-tests.html">Module code</a> simple-chart-frame-tests.js</li>
<li><a href="demo/modules/simple-graph-lines.html">Module code</a> simple-graph-lines.js</li>
<li><a href="demo/modules/simple-graph-stacked-bars.html">Module code</a> simple-graph-stacked-bars.js</li>
</ul>
</ul>
<ul>
<li><a href="demo/modules-002.html">Modules-002</a> Spiral charts</li>
<ul>
<li><a href="demo/modules/wikipedia-views-spiral-chart.html">Module code</a> wikipedia-views-spiral-chart.js</li>
</ul>
</ul>
<ul>
<li><a href="demo/modules-003.html">Modules-003</a> Factory functions to create more complex, compound entitys</li>
<ul>
<li><a href="demo/modules/entity-ring-builder.html">Module code</a> entity-ring-builder.js</li>
</ul>
</ul>
<ul>
<li><a href="demo/modules-004.html">Modules-004</a> Import and use Lottie animations</li>
<ul>
<li><a href="demo/modules/lottie-loader.html">Module code</a> lottie-loader.js</li>
</ul>
</ul>
<ul>
<li><a href="demo/modules-005.html">Modules-005</a> Accessible GUI-based simple canvas editor</li>
<ul>
<li><a href="demo/modules/canvas-scene-editor.html">Module code</a> canvas-scene-editor.js</li>
<li><a href="demo/modules/canvas-minimap.html">Module code</a> canvas-minimap.js</li>
<li><a href="demo/modules/dom-entity-editor.html">Module code</a> dom-entity-editor.js</li>
<li><a href="demo/modules/entity-copy-paste.html">Module code</a> entity-copy-paste.js</li>
<li><a href="demo/modules/entity-manipulation-gui.html">Module code</a> entity-manipulation-gui.js</li>
<li><a href="demo/modules/entity-navigation.html">Module code</a> entity-navigation.js</li>
</ul>
</ul>
<h4>Packet demos</h4>
<ul>
<li><a href="demo/packets-001.html">Packets-001</a> Save and load Scrawl-canvas entity using text packets</li>
<li><a href="demo/packets-002.html">Packets-002</a> Scrawl-canvas packets - save and load a range of different entitys</li>
</ul>
<h4>Snippet demos</h4>
<ul>
<li><a href="demo/snippets-001.html">Snippets-001</a> Scrawl-canvas DOM element snippets</li>
<li><a href="demo/snippets-002.html">Snippets-002</a> Scrawl-canvas stack element snippets</li>
<li><a href="demo/snippets-003.html">Snippets-003</a> DOM element snippet - test canvas adaption to local element variations</li>
<li><a href="demo/snippets-004.html">Snippets-004</a> Snippets included in the Scrawl-canvas demo/snippets folder</li>
<ul>
<li><a href="demo/snippets/animated-hover-gradient-snippet.html">Animated hover gradient snippet</a></li>
<li><a href="demo/snippets/animated-word-gradient-snippet.html">Animated word gradient snippet</a></li>
<li><a href="demo/snippets/green-box-snippet.html">Green box snippet</a></li>
<li><a href="demo/snippets/jazzy-button-snippet.html">Jazzy button snippet</a></li>
<li><a href="demo/snippets/page-performance-snippet.html">Page performance snippet</a></li>
<li><a href="demo/snippets/page-performance-snippet-test.html">Page performance snippet (test)</a></li>
<li><a href="demo/snippets/pan-image-snippet.html">Pan image snippet</a></li>
<li><a href="demo/snippets/placeholder-effect-snippet.html">Placeholder effect snippet</a></li>
<li><a href="demo/snippets/ripple-effect-snippet.html">Ripple effect snippet</a></li>
<li><a href="demo/snippets/spotlight-text-snippet.html">Spotlight text snippet</a></li>
<li><a href="demo/snippets/spotlight-text-snippet-test.html">Spotlight text snippet (test)</a></li>
<li><a href="demo/snippets/word-highlighter-snippet.html">Word highlighter snippet</a></li>
</ul>
<li><a href="demo/snippets-005.html">Snippets-005</a> Create a responsive, interactive and accessible before/after slider infographic</li>
<ul>
<li><a href="demo/snippets/before-after-slider-infographic.html">Before/after slider infographic snippet</a></li>
</ul>
<li><a href="demo/snippets-006.html">Snippets-006</a> Editable header text colorizer and animation effect snippets</li>
<ul>
<li><a href="demo/snippets/text-snippet-helper.html">Text snippet helper</a></li>
<li><a href="demo/snippets/animated-highlight-gradient-text-snippet.html">Animated highlight gradient text snippet</a></li>
<li><a href="demo/snippets/bubbles-text-snippet.html">Bubbles text snippet</a></li>
<li><a href="demo/snippets/risograph-text-gradient-snippet.html">Risograph text gradient snippet</a></li>
<li><a href="demo/snippets/swirling-stripes-text-snippet.html">Swirling stripes text snippet</a></li>
<li><a href="demo/snippets/worley-text-gradient-snippet.html">Worley text gradient snippet</a></li>
</ul>
</ul>
<h4>DOM Stack demos</h4>
<ul>
<li><a href="demo/dom-001.html">DOM-001</a> Loading the scrawl-canvas library using a script tag in the HTML code</li>
<li><a href="demo/dom-002.html">DOM-002</a> Element mouse, pivot and mimic functionality</li>
<li><a href="demo/dom-003.html">DOM-003</a> Dynamically create and clone Element artefacts; drag and drop elements (including SVG elements) around a Stack</li>
<li><a href="demo/dom-004.html">DOM-004</a> Limitless rockets (clone and destroy elements, tweens, tickers)</li>
<li><a href="demo/dom-005.html">DOM-005</a> DOM tween stress test</li>
<li><a href="demo/dom-006.html">DOM-006</a> Tween actions on a DOM element; tracking tween and ticker activity (analytics)</li>
<li><a href="demo/dom-007.html">DOM-007</a> Animate a DOM element using the delta attribute object; dynamically change classes on a DOM element</li>
<li><a href="demo/dom-008.html">DOM-008</a> 3d animated cube</li>
<li><a href="demo/dom-009.html">DOM-009</a> Stop and restart the main animation loop; add and remove event listener; retrieve all artefacts at a given coordinate</li>
<li><a href="demo/dom-010.html">DOM-010</a> Add and remove (kill) Scrawl-canvas stack elements programmatically</li>
<li><a href="demo/dom-011.html">DOM-011</a> Canvas controller 'fit' attribute; Cell positioning (mouse)</li>
<li><a href="demo/dom-012.html">DOM-012</a> Add and remove (kill) Scrawl-canvas canvas elements programmatically</li>
<li><a href="demo/dom-013.html">DOM-013</a> Track mouse movements over a 3d rotated and scaled canvas element</li>
<li><a href="demo/dom-014.html">DOM-014</a> Scrawl-canvas initialization: canvas interference check</li>
<li><a href="demo/dom-015.html">DOM-015</a> Use stacked DOM artefact corners as pivot points</li>
<li><a href="demo/dom-016.html">DOM-016</a> Determine the displayed shape of the visible stack; react to changes in the displayed shape</li>
</ul>
<h4>Experiments with third party libraries</h4>
<ul>
<li><a href="demo/delaunator-001.html">Delaunator-001</a> Delauney triangulation and Voronoi cell visualisation</li>
<li><a href="demo/delaunator-002.html">Delaunator-002</a> Responsive Voronoi cells in a RawAsset wrapper</li>
<li><a href="demo/mediapipe-001.html">MediaPipe-001</a> MediaPipe Selfie Segmentation - model image output</li>
<li><a href="demo/mediapipe-002.html">MediaPipe-002</a> MediaPipe Face Mesh - model image output</li>
<li><a href="demo/mediapipe-003.html">MediaPipe-003</a> MediaPipe Face Mesh - working with the mesh coordinates</li>
<li><a href="demo/rapier-001.html">Rapier-001</a> Rapier physics engine - stacking boxes</li>
<li><a href="demo/tensorflow-001.html">TensorFlow-001</a> Tensorflow tfjs-models / body-pix experiment - follow my eyes</li>
<li><a href="demo/tensorflow-002.html">TensorFlow-002</a> Tensorflow tfjs-models / body-pix experiment - model image output</li>
</ul>
<p> </p>
</body>
</html>