scrawl-canvas

<!DOCTYPE html> <html> <head> <title>NoiseAsset factory</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="../core/animationloop.html"> ./source/core/animationloop.js </a> <a class="source" href="../core/document.html"> ./source/core/document.js </a> <a class="source" href="../core/events.html"> ./source/core/events.js </a> <a class="source" href="../core/init.html"> ./source/core/init.js </a> <a class="source" href="../core/library.html"> ./source/core/library.js </a> <a class="source" href="../core/random-seed.html"> ./source/core/random-seed.js </a> <a class="source" href="../core/snippets.html"> ./source/core/snippets.js </a> <a class="source" href="../core/userInteraction.html"> ./source/core/userInteraction.js </a> <a class="source" href="../core/utilities.html"> ./source/core/utilities.js </a> <a class="source" href="action.html"> ./source/factory/action.js </a> <a class="source" href="anchor.html"> ./source/factory/anchor.js </a> <a class="source" href="animation.html"> ./source/factory/animation.js </a> <a class="source" href="bezier.html"> ./source/factory/bezier.js </a> <a class="source" href="block.html"> ./source/factory/block.js </a> <a class="source" href="canvas.html"> ./source/factory/canvas.js </a> <a class="source" href="cell.html"> ./source/factory/cell.js </a> <a class="source" href="cog.html"> ./source/factory/cog.js </a> <a class="source" href="color.html"> ./source/factory/color.js </a> <a class="source" href="conicGradient.html"> ./source/factory/conicGradient.js </a> <a class="source" href="coordinate.html"> ./source/factory/coordinate.js </a> <a class="source" href="crescent.html"> ./source/factory/crescent.js </a> <a class="source" href="element.html"> ./source/factory/element.js </a> <a class="source" href="emitter.html"> ./source/factory/emitter.js </a> <a class="source" href="filter.html"> ./source/factory/filter.js </a> <a class="source" href="filterEngine-bluenoiseData.html"> ./source/factory/filterEngine-bluenoiseData.js </a> <a class="source" href="filterEngine.html"> ./source/factory/filterEngine.js </a> <a class="source" href="fontAttributes.html"> ./source/factory/fontAttributes.js </a> <a class="source" href="gradient.html"> ./source/factory/gradient.js </a> <a class="source" href="grid.html"> ./source/factory/grid.js </a> <a class="source" href="group.html"> ./source/factory/group.js </a> <a class="source" href="imageAsset.html"> ./source/factory/imageAsset.js </a> <a class="source" href="line.html"> ./source/factory/line.js </a> <a class="source" href="lineSpiral.html"> ./source/factory/lineSpiral.js </a> <a class="source" href="loom.html"> ./source/factory/loom.js </a> <a class="source" href="mesh.html"> ./source/factory/mesh.js </a> <a class="source" href="net.html"> ./source/factory/net.js </a> <a class="source" href="noiseAsset.html"> ./source/factory/noiseAsset.js </a> <a class="source" href="oval.html"> ./source/factory/oval.js </a> <a class="source" href="palette.html"> ./source/factory/palette.js </a> <a class="source" href="particle.html"> ./source/factory/particle.js </a> <a class="source" href="particleForce.html"> ./source/factory/particleForce.js </a> <a class="source" href="particleHistory.html"> ./source/factory/particleHistory.js </a> <a class="source" href="particleSpring.html"> ./source/factory/particleSpring.js </a> <a class="source" href="particleWorld.html"> ./source/factory/particleWorld.js </a> <a class="source" href="pattern.html"> ./source/factory/pattern.js </a> <a class="source" href="phrase.html"> ./source/factory/phrase.js </a> <a class="source" href="picture.html"> ./source/factory/picture.js </a> <a class="source" href="polygon.html"> ./source/factory/polygon.js </a> <a class="source" href="polyline.html"> ./source/factory/polyline.js </a> <a class="source" href="quadratic.html"> ./source/factory/quadratic.js </a> <a class="source" href="quaternion.html"> ./source/factory/quaternion.js </a> <a class="source" href="radialGradient.html"> ./source/factory/radialGradient.js </a> <a class="source" href="rawAsset.html"> ./source/factory/rawAsset.js </a> <a class="source" href="rdAsset.html"> ./source/factory/rdAsset.js </a> <a class="source" href="rectangle.html"> ./source/factory/rectangle.js </a> <a class="source" href="renderAnimation.html"> ./source/factory/renderAnimation.js </a> <a class="source" href="shape.html"> ./source/factory/shape.js </a> <a class="source" href="spiral.html"> ./source/factory/spiral.js </a> <a class="source" href="spriteAsset.html"> ./source/factory/spriteAsset.js </a> <a class="source" href="stack.html"> ./source/factory/stack.js </a> <a class="source" href="star.html"> ./source/factory/star.js </a> <a class="source" href="state.html"> ./source/factory/state.js </a> <a class="source" href="tetragon.html"> ./source/factory/tetragon.js </a> <a class="source" href="ticker.html"> ./source/factory/ticker.js </a> <a class="source" href="tracer.html"> ./source/factory/tracer.js </a> <a class="source" href="tween.html"> ./source/factory/tween.js </a> <a class="source" href="unstackedElement.html"> ./source/factory/unstackedElement.js </a> <a class="source" href="vector.html"> ./source/factory/vector.js </a> <a class="source" href="videoAsset.html"> ./source/factory/videoAsset.js </a> <a class="source" href="wheel.html"> ./source/factory/wheel.js </a> <a class="source" href="../mixin/anchor.html"> ./source/mixin/anchor.js </a> <a class="source" href="../mixin/asset.html"> ./source/mixin/asset.js </a> <a class="source" href="../mixin/assetAdvancedFunctionality.html"> ./source/mixin/assetAdvancedFunctionality.js </a> <a class="source" href="../mixin/assetConsumer.html"> ./source/mixin/assetConsumer.js </a> <a class="source" href="../mixin/base.html"> ./source/mixin/base.js </a> <a class="source" href="../mixin/cascade.html"> ./source/mixin/cascade.js </a> <a class="source" href="../mixin/delta.html"> ./source/mixin/delta.js </a> <a class="source" href="../mixin/displayShape.html"> ./source/mixin/displayShape.js </a> <a class="source" href="../mixin/dom.html"> ./source/mixin/dom.js </a> <a class="source" href="../mixin/entity.html"> ./source/mixin/entity.js </a> <a class="source" href="../mixin/filter.html"> ./source/mixin/filter.js </a> <a class="source" href="../mixin/mimic.html"> ./source/mixin/mimic.js </a> <a class="source" href="../mixin/path.html"> ./source/mixin/path.js </a> <a class="source" href="../mixin/pattern.html"> ./source/mixin/pattern.js </a> <a class="source" href="../mixin/pivot.html"> ./source/mixin/pivot.js </a> <a class="source" href="../mixin/position.html"> ./source/mixin/position.js </a> <a class="source" href="../mixin/shapeBasic.html"> ./source/mixin/shapeBasic.js </a> <a class="source" href="../mixin/shapeCurve.html"> ./source/mixin/shapeCurve.js </a> <a class="source" href="../mixin/shapePathCalculation.html"> ./source/mixin/shapePathCalculation.js </a> <a class="source" href="../mixin/styles.html"> ./source/mixin/styles.js </a> <a class="source" href="../mixin/tween.html"> ./source/mixin/tween.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="noiseasset-factory">NoiseAsset factory</h1> <p>The purpose of the NoiseAsset asset is to give us a resource for generating noisy (semi-regular) maps. These can then be used directly as Picture or Pattern images, or uploaded to the filter engine as part of a filter that uses displacement map functionality.</p> </div> </li> <li id="section-2"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-2">§</a> </div> <h4 id="current-functionality">Current functionality</h4> <p>At the moment the NoiseAsset asset can generate Perlin-type noise, with engines supplied for:</p> <ul> <li>Perlin (classic)</li> <li>Perlin (improved)</li> <li>Simplex - the default engine</li> <li>Value</li> </ul> <p>Additional engines include:</p> <ul> <li>Stripes</li> <li>Smoothed stripes</li> <li>Worley - both euclidean and manhattan versions</li> </ul> <p>These engines are supported by a number of settable (and thus animatable) attributes, including special functions for smoothing the engine output. Demo <a href="../../demo/canvas-060.html">Canvas-060</a> has been set up to allow for experimenting with these attributes</p> <h4 id="demos">Demos:</h4> <ul> <li><a href="../../demo/canvas-044.html">Canvas-044</a> - Building more complex patterns</li> <li><a href="../../demo/canvas-060.html">Canvas-060</a> - Noise asset functionality</li> </ul> </div> </li> <li id="section-3"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-3">§</a> </div> <h4 id="imports">Imports</h4> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> { constructors } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/library.js'</span>; <span class="hljs-keyword">import</span> { seededRandomNumberGenerator } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/random-seed.js'</span>; <span class="hljs-keyword">import</span> { mergeOver, λ<span class="hljs-literal">null</span>, λ<span class="hljs-variable language_">this</span>, λfirstArg, removeItem, interpolate, easeEngines, Ωempty } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/utilities.js'</span>; <span class="hljs-keyword">import</span> { makeColor } <span class="hljs-keyword">from</span> <span class="hljs-string">'./color.js'</span>; <span class="hljs-keyword">import</span> baseMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/base.js'</span>; <span class="hljs-keyword">import</span> assetMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/asset.js'</span>; <span class="hljs-keyword">import</span> assetAdvancedMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/assetAdvancedFunctionality.js'</span>; <span class="hljs-keyword">import</span> patternMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/pattern.js'</span>;</pre></div></div> </li> <li id="section-4"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-4">§</a> </div> <h4 id="noiseasset-constructor">NoiseAsset constructor</h4> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title class_">NoiseAsset</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items = Ωempty</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">makeName</span>(items.<span class="hljs-property">name</span>); <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">register</span>(); <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">installElement</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>); <span class="hljs-variable language_">this</span>.<span class="hljs-property">perm</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">permMod8</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">values</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">grad</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">subscribers</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">set</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">defs</span>); <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">set</span>(items); <span class="hljs-keyword">if</span> (items.<span class="hljs-property">subscribe</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">subscribers</span>.<span class="hljs-title function_">push</span>(items.<span class="hljs-property">subscribe</span>); <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOutput</span> = <span class="hljs-literal">true</span>; <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>; };</pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-5">§</a> </div> <h4 id="noiseasset-prototype">NoiseAsset prototype</h4> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> P = <span class="hljs-title class_">NoiseAsset</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span> = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">create</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-property"><span class="hljs-keyword">prototype</span></span>); P.<span class="hljs-property">type</span> = <span class="hljs-string">'NoiseAsset'</span>; P.<span class="hljs-property">lib</span> = <span class="hljs-string">'asset'</span>; P.<span class="hljs-property">isArtefact</span> = <span class="hljs-literal">false</span>; P.<span class="hljs-property">isAsset</span> = <span class="hljs-literal">true</span>;</pre></div></div> </li> <li id="section-6"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-6">§</a> </div> <h4 id="mixins">Mixins</h4> <ul> <li><a href="../mixin/base.html">base</a></li> <li><a href="../mixin/asset.html">asset</a></li> <li><a href="../mixin/assetAdvancedFunctionality.html">assetAdvancedFunctionality</a></li> <li><a href="../mixin/pattern.html">pattern</a></li> </ul> </div> <div class="content"><div class='highlight'><pre>P = <span class="hljs-title function_">baseMix</span>(P); P = <span class="hljs-title function_">assetMix</span>(P); P = <span class="hljs-title function_">assetAdvancedMix</span>(P); P = <span class="hljs-title function_">patternMix</span>(P);</pre></div></div> </li> <li id="section-7"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-7">§</a> </div> <h4 id="noiseasset-attributes">NoiseAsset attributes</h4> <ul> <li>Attributes defined in the <a href="../mixin/base.html">base mixin</a>: <strong>name</strong>.</li> <li>Attributes defined in the <a href="../mixin/asset.html">asset mixin</a>: <strong>source, subscribers</strong>.</li> <li>Attributes defined in the <a href="../mixin/assetAdvancedFunctionality.html">assetAdvancedFunctionality mixin</a>: <strong>color, monochromeStart, monochromeRange, gradientStart, gradientEnd, hueStart, hueRange, saturation, luminosity</strong>.</li> <li>Attributes defined in the <a href="../mixin/pattern.html">pattern mixin</a>: <strong>repeat, patternMatrix, matrixA, matrixB, matrixC, matrixD, matrixE, matrixF</strong>.</li> </ul> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> defaultAttributes = {</pre></div></div> </li> <li id="section-8"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-8">§</a> </div> <p>The offscreen canvas dimensions, within which the noise will be generated, is set using the <strong>width</strong> and <strong>height</strong> attributes. These take Number values.</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">width</span>: <span class="hljs-number">300</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">150</span>,</pre></div></div> </li> <li id="section-9"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-9">§</a> </div> <p><strong>noiseEngine</strong> - String - the currently supported noise engines String values are: <code>perlin</code>, <code>improved-perlin</code>, <code>simplex</code>, <code>value</code>, <code>stripes</code>, <code>smoothed-stripes</code>, <code>worley-euclidean</code>, <code>worley-manhattan</code></p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">noiseEngine</span>: <span class="hljs-string">'simplex'</span>,</pre></div></div> </li> <li id="section-10"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-10">§</a> </div> <p>When a noise engine initializes it will create several Arrays of pseudo-random values. The <strong>seed</strong> attribute is a String used to initialize the pseudo-random number generator, while the <strong>size</strong> attribute is a Number (often a power of 2 value) which determines the lengths of the Arrays</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">seed</span>: <span class="hljs-string">'any_random_string_will_do'</span>, <span class="hljs-attr">size</span>: <span class="hljs-number">256</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 <strong>scale</strong> attribute determines the relative scale of the noise calculation, which affects the noise output. Think of it as a rather idiosyncratic zoom factor </p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">scale</span>: <span class="hljs-number">50</span>,</pre></div></div> </li> <li id="section-12"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-12">§</a> </div> <p>Attributes used when calculating the noise map include:</p> <ul> <li><strong>octaves</strong> - a positive integer Number - the more octives, the more naturalistic the output - values over 6 are rarely productive</li> <li>__octaveFunction - a String identifying the function to be run at the end of each octave loop. Currently only <code>none</code> and <code>absolute</code> functions are supported</li> <li><strong>persistance</strong> and <strong>lacunarity</strong> values change at the conclusion of each octave loop; these attributes set their initial values</li> </ul> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">octaves</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">octaveFunction</span>: <span class="hljs-string">'none'</span>, <span class="hljs-attr">persistence</span>: <span class="hljs-number">0.5</span>, <span class="hljs-attr">lacunarity</span>: <span class="hljs-number">2</span>,</pre></div></div> </li> <li id="section-13"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-13">§</a> </div> <p>The <strong>smoothing</strong> attribute - a String value - identifies the smoothing function that will be applied pixel noise values as they are calculated. There are a wide number of functions available; default: <code>quintic</code></p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">smoothing</span>: <span class="hljs-string">'quintic'</span>,</pre></div></div> </li> <li id="section-14"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-14">§</a> </div> <p>Post-processing the noise map: The <strong>sumFunction</strong> attribute - a String value - identifies the smoothing function that will be applied to the noise map once the noise calculations complete. </p> <ul> <li>Permitted values include: <code>none</code>, <code>sine-x</code>, <code>sine-y</code>, <code>sine</code>, <code>modular</code>, <code>random</code></li> </ul> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">sumFunction</span>: <span class="hljs-string">'none'</span>,</pre></div></div> </li> <li id="section-15"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-15">§</a> </div> <p><strong>sineFrequencyCoeff</strong> - a Number - is used by sine-based sum functions</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">sineFrequencyCoeff</span>: <span class="hljs-number">1</span>,</pre></div></div> </li> <li id="section-16"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-16">§</a> </div> <p><strong>sumAmplitude</strong> - a Number - is used by the modular sum function</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">sumAmplitude</span>: <span class="hljs-number">5</span>,</pre></div></div> </li> <li id="section-17"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-17">§</a> </div> <p>Worley functionality found in the <a href="https://github.com/jackunion/tooloud/blob/master/src/Worley.js">jackunion/tooloud GitHub repository</a>. </p> <ul> <li>The noise generated can be one of <strong>worley-euclidean</strong> or <strong>worley-manhattan</strong></li> <li>we can amend the noise via the <code>worleyOutput</code> and <code>worleyDepth</code> attributes</li> </ul> <p><strong>worleyOutput</strong> - String value, one from: ‘X’, ‘Y’, ‘Z’, ‘XminusY’, ‘XminusZ’, ‘YminusX’, ‘YminusZ’, ‘ZminusX’, ‘ZminusY’, ‘XaddY’, ‘XaddZ’, ‘YaddZ’, ‘XaddYminusZ’, ‘XaddZminusY’, ‘YaddZminusX’, ‘XmultiplyY’, ‘XmultiplyZ’, ‘YmultiplyZ’, ‘XmultiplyYaddZ’, ‘XmultiplyZaddY’, ‘YmultiplyZaddX’, ‘XmultiplyYminusZ’, ‘XmultiplyZminusY’, ‘YmultiplyZminusX’, ‘sum’, ‘average’</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">worleyOutput</span>: <span class="hljs-string">'X'</span>,</pre></div></div> </li> <li id="section-18"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-18">§</a> </div> <p>worleyDepth - positive integer Number - Scrawl-canvas only uses the x and y dimensions to calculate noise; worley noise also comes with a z dimension which we can amend via this attribute</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">worleyDepth</span>: <span class="hljs-number">0</span>, }; P.<span class="hljs-property">defs</span> = <span class="hljs-title function_">mergeOver</span>(P.<span class="hljs-property">defs</span>, defaultAttributes); <span class="hljs-keyword">delete</span> P.<span class="hljs-property">defs</span>.<span class="hljs-property">source</span>; <span class="hljs-keyword">delete</span> P.<span class="hljs-property">defs</span>.<span class="hljs-property">sourceLoaded</span>;</pre></div></div> </li> <li id="section-19"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-19">§</a> </div> <h4 id="packet-management">Packet management</h4> <p>This functionality is disabled for noiseAsset objects</p> </div> <div class="content"><div class='highlight'><pre>P.<span class="hljs-property">stringifyFunction</span> = λ<span class="hljs-literal">null</span>; P.<span class="hljs-property">processPacketOut</span> = λ<span class="hljs-literal">null</span>; P.<span class="hljs-property">finalizePacketOut</span> = λ<span class="hljs-literal">null</span>; P.<span class="hljs-property">saveAsPacket</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">return</span> <span class="hljs-string">`[<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.name}</span>, <span class="hljs-subst">${<span class="hljs-variable language_">this</span>.type}</span>, <span class="hljs-subst">${<span class="hljs-variable language_">this</span>.lib}</span>, {}]`</span> };</pre></div></div> </li> <li id="section-20"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-20">§</a> </div> <h4 id="clone-management">Clone management</h4> </div> <div class="content"><div class='highlight'><pre>P.<span class="hljs-property">clone</span> = λ<span class="hljs-variable language_">this</span>;</pre></div></div> </li> <li id="section-21"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-21">§</a> </div> <h4 id="kill-management">Kill management</h4> <p>No additional kill functionality required</p> </div> </li> <li id="section-22"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-22">§</a> </div> <h4 id="get-set-deltaset">Get, Set, deltaSet</h4> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> G = P.<span class="hljs-property">getters</span>, S = P.<span class="hljs-property">setters</span>, D = P.<span class="hljs-property">deltaSetters</span>;</pre></div></div> </li> <li id="section-23"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-23">§</a> </div> <p><strong>source</strong></p> </div> <div class="content"><div class='highlight'><pre>S.<span class="hljs-property">source</span> = λ<span class="hljs-literal">null</span>;</pre></div></div> </li> <li id="section-24"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-24">§</a> </div> <p><strong>subscribers</strong> - we disable the ability to set the subscribers Array directly. Picture entitys and Pattern styles will manage their subscription to the asset using their subscribe() and unsubscribe() functions. Filters will check for updates every time they run</p> </div> <div class="content"><div class='highlight'><pre>S.<span class="hljs-property">subscribers</span> = λ<span class="hljs-literal">null</span>; S.<span class="hljs-property">octaveFunction</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">octaveFunction</span> = (<span class="hljs-literal">null</span> != <span class="hljs-variable language_">this</span>.<span class="hljs-property">octaveFunctions</span>[item]) ? <span class="hljs-variable language_">this</span>.<span class="hljs-property">octaveFunctions</span>[item] : λfirstArg; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyNoise</span> = <span class="hljs-literal">true</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOutput</span> = <span class="hljs-literal">true</span>; }; S.<span class="hljs-property">sumFunction</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">sumFunction</span> = (<span class="hljs-literal">null</span> != <span class="hljs-variable language_">this</span>.<span class="hljs-property">sumFunctions</span>[item]) ? <span class="hljs-variable language_">this</span>.<span class="hljs-property">sumFunctions</span>[item] : λfirstArg; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyNoise</span> = <span class="hljs-literal">true</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOutput</span> = <span class="hljs-literal">true</span>; }; S.<span class="hljs-property">smoothing</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">smoothing</span> = (<span class="hljs-literal">null</span> != easeEngines[item]) ? easeEngines[item] : λfirstArg; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyNoise</span> = <span class="hljs-literal">true</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOutput</span> = <span class="hljs-literal">true</span>; }; S.<span class="hljs-property">noiseEngine</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">noiseEngine</span> = (<span class="hljs-literal">null</span> != <span class="hljs-variable language_">this</span>.<span class="hljs-property">noiseEngines</span>[item]) ? <span class="hljs-variable language_">this</span>.<span class="hljs-property">noiseEngines</span>[item] : <span class="hljs-variable language_">this</span>.<span class="hljs-property">noiseEngines</span>[<span class="hljs-string">'simplex'</span>]; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyNoise</span> = <span class="hljs-literal">true</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOutput</span> = <span class="hljs-literal">true</span>; }; S.<span class="hljs-property">octaves</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">if</span> (item.<span class="hljs-property">toFixed</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">octaves</span> = item; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyNoise</span> = <span class="hljs-literal">true</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOutput</span> = <span class="hljs-literal">true</span>; } }; S.<span class="hljs-property">seed</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">if</span> (item.<span class="hljs-property">substring</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">seed</span> = item; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyNoise</span> = <span class="hljs-literal">true</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOutput</span> = <span class="hljs-literal">true</span>; } }; S.<span class="hljs-property">scale</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">if</span> (item.<span class="hljs-property">toFixed</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">scale</span> = item; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyNoise</span> = <span class="hljs-literal">true</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOutput</span> = <span class="hljs-literal">true</span>; } }; S.<span class="hljs-property">size</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">if</span> (item.<span class="hljs-property">toFixed</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">size</span> = item; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyNoise</span> = <span class="hljs-literal">true</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOutput</span> = <span class="hljs-literal">true</span>; } }; S.<span class="hljs-property">persistence</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">if</span> (item.<span class="hljs-property">toFixed</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">persistence</span> = item; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyNoise</span> = <span class="hljs-literal">true</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOutput</span> = <span class="hljs-literal">true</span>; } }; S.<span class="hljs-property">lacunarity</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">if</span> (item.<span class="hljs-property">toFixed</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">lacunarity</span> = item; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyNoise</span> = <span class="hljs-literal">true</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOutput</span> = <span class="hljs-literal">true</span>; } }; S.<span class="hljs-property">sineFrequencyCoeff</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">if</span> (item.<span class="hljs-property">toFixed</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">sineFrequencyCoeff</span> = item; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyNoise</span> = <span class="hljs-literal">true</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOutput</span> = <span class="hljs-literal">true</span>; } };</pre></div></div> </li> <li id="section-25"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-25">§</a> </div> <p><code>modularAmplitude</code> - name changed to <code>sumAmplitude</code></p> </div> <div class="content"><div class='highlight'><pre>S.<span class="hljs-property">modularAmplitude</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">if</span> (item.<span class="hljs-property">toFixed</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">sumAmplitude</span> = item; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyNoise</span> = <span class="hljs-literal">true</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOutput</span> = <span class="hljs-literal">true</span>; } }; S.<span class="hljs-property">sumAmplitude</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">if</span> (item.<span class="hljs-property">toFixed</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">sumAmplitude</span> = item; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyNoise</span> = <span class="hljs-literal">true</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOutput</span> = <span class="hljs-literal">true</span>; } }; S.<span class="hljs-property">width</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">if</span> (item.<span class="hljs-property">toFixed</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">width</span> = item; <span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalWidth</span> = item; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyNoise</span> = <span class="hljs-literal">true</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOutput</span> = <span class="hljs-literal">true</span>; } }; S.<span class="hljs-property">height</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">if</span> (item.<span class="hljs-property">toFixed</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">height</span> = item; <span class="hljs-variable language_">this</span>.<span class="hljs-property">sourceNaturalHeight</span> = item; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyNoise</span> = <span class="hljs-literal">true</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOutput</span> = <span class="hljs-literal">true</span>; } }; S.<span class="hljs-property">worleyDepth</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">if</span> (item.<span class="hljs-property">toFixed</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">worleyDepth</span> = item; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyNoise</span> = <span class="hljs-literal">true</span>; <span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyOutput</span> = <span class="hljs-literal">true</span>; } }; P.<span class="hljs-property">worleyOutputStrings</span> = [<span class="hljs-string">'X'</span>, <span class="hljs-string">'Y'</span>, <span class="hljs-string">'Z'</span>, <span class="hljs-string">'XminusY'</span>, <span class="hljs-string">'XminusZ'</span>, <span class="hljs-string">'YminusX'</span>, <span class="hljs-string">'YminusZ'</span>, <span class="hljs-string">'ZminusX'</span>, <span class="hljs-string">'ZminusY'</span>, <span class="hljs-string">'XaddY'</span>, <span class="hljs-string">'Xadd