scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,070 lines (697 loc) • 94.7 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>RdAsset 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="rdasset-factory">RdAsset factory</h1>
<p><a href="https://en.wikipedia.org/wiki/Reaction%E2%80%93diffusion_system">Reaction-diffusion systems</a> are mathematical models which can be used to explore various physical phenomena. The Scrawl-canvas version is an interpretation of a <em>two-component activator-inhibitor system</em>.</p>
<p>This factory was inspired by Jason Webb’s <a href="https://jasonwebb.github.io/reaction-diffusion-playground/">Reaction-Diffusion Playground</a></p>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</a>
</div>
<h4 id="demos">Demos:</h4>
<ul>
<li><a href="../../demo/canvas-053.html">Canvas-053</a> - Display output from a Reaction-Diffusion asset</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, entity } <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, Ω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> { requestCell, releaseCell } <span class="hljs-keyword">from</span> <span class="hljs-string">'./cell.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="rdasset-constructor">RdAsset constructor</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title class_">RdAsset</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">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">currentGeneration</span> = <span class="hljs-number">0</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dataArrays</span> = [];
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyScene</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>;
<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="rdasset-prototype">RdAsset prototype</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> P = <span class="hljs-title class_">RdAsset</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">'RdAsset'</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="rdasset-attributes">RdAsset 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 reaction-diffusion scene 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>The reaction-diffusion scene results will differ based on the initial settings for the <strong>feedRate</strong>, <strong>killRate</strong>, <strong>diffusionRateA</strong> and <strong>diffusionRateB</strong> attributes. These attributes are all float numbers in restricted ranges between 0.0 and 1.0</p>
<ul>
<li>In general, the diffusion rate of the A reagent should be roughly double that of the B reagent</li>
<li>Given the above, the relative settings of the feed and kill rates will determine the stability and eventual outcome of the scene. To find more interesting values, check out the online interactive<a href="https://jasonwebb.github.io/reaction-diffusion-playground/app.html">Reaction-Diffusion Playground</a></li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">diffusionRateA</span>: <span class="hljs-number">0.2097</span>,
<span class="hljs-attr">diffusionRateB</span>: <span class="hljs-number">0.105</span>,
<span class="hljs-attr">feedRate</span>: <span class="hljs-number">0.054</span>,
<span class="hljs-attr">killRate</span>: <span class="hljs-number">0.062</span>,</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<p>The Scrawl-canvas implementation allows users to initialize the scene using pseudo-random values scattered across the canvas, or alternatively use a regular Scrawl-canvas entity to supply a more regular initial shape.</p>
<ul>
<li>Demo <a href="../../demo/canvas-053.html">Canvas-053</a> includes Block, Wheel and Spiral entitys which can be used for this purpose</li>
</ul>
<p><strong>initialSettingPreference</strong> - String - either ‘random’ (default) or ‘entity’</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">initialSettingPreference</span>: <span class="hljs-string">'random'</span>,</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<p><strong>randomEngineSeed</strong> - String acting as the random engine’s seed value. different String values will create different scene outputs, all other attributes not changing.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">randomEngineSeed</span>: <span class="hljs-string">'some-random-string-or-other'</span>,</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<p><strong>initialRandomSeedLevel</strong> - Number between 0.0 and 1.0 representing the density of reagent A across the scene’s dimensions</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">initialRandomSeedLevel</span>: <span class="hljs-number">0.0045</span>,</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<p><strong>initialSettingEntity</strong> - String name of the entity to be used for setting up the scene</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">initialSettingEntity</span>: <span class="hljs-literal">null</span>,</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-14">§</a>
</div>
<p><strong>drawEvery</strong> - positive integer Number - the speed of evolution is affected by how often we draw the current state of the scene onto the canvas.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">drawEvery</span>: <span class="hljs-number">10</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>maxGenerations</strong> - positive integer Number - some interesting outputs can be found as a given scene develops over time. We can halt development to allow these outputs to be used by Picture entitys and Pattern styles by setting this attribute to the appropriate value</p>
<ul>
<li>Halting the calculations when the scene reaches a desired output is also more efficient - allowing a scene to develop forever may cause the entire animation to slow down</li>
<li>To allow the scene to develop forever (for instance, to show a more chaotic output) set te value of this attribute to <code>0</code></li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">maxGenerations</span>: <span class="hljs-number">4000</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-16">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-16">§</a>
</div>
<h4 id="packet-management">Packet management</h4>
<p>This functionality is disabled for Cell 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-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</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-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</a>
</div>
<h4 id="kill-management">Kill management</h4>
<p>No additional kill functionality required</p>
</div>
</li>
<li id="section-19">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-19">§</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-20">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-20">§</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>;</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-21">§</a>
</div>
<p>Setting any of the following attributes will cause the scene to re-initialize itself</p>
</div>
<div class="content"><div class='highlight'><pre>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">dirtyScene</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">dirtyScene</span> = <span class="hljs-literal">true</span>;
}
};
S.<span class="hljs-property">initialRandomSeedLevel</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">initialRandomSeedLevel</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyScene</span> = <span class="hljs-literal">true</span>;
}
};
S.<span class="hljs-property">diffusionRateA</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">diffusionRateA</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyScene</span> = <span class="hljs-literal">true</span>;
}
};
S.<span class="hljs-property">diffusionRateB</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">diffusionRateB</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyScene</span> = <span class="hljs-literal">true</span>;
}
};
S.<span class="hljs-property">feedRate</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">feedRate</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyScene</span> = <span class="hljs-literal">true</span>;
}
};
S.<span class="hljs-property">killRate</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">killRate</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyScene</span> = <span class="hljs-literal">true</span>;
}
};
S.<span class="hljs-property">drawEvery</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">drawEvery</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyScene</span> = <span class="hljs-literal">true</span>;
}
};
S.<span class="hljs-property">maxGenerations</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">maxGenerations</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyScene</span> = <span class="hljs-literal">true</span>;
}
};
P.<span class="hljs-property">initialSettingPreferenceValues</span> = [<span class="hljs-string">'random'</span>, <span class="hljs-string">'entity'</span>];
S.<span class="hljs-property">initialSettingPreference</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">initialSettingPreferenceValues</span>.<span class="hljs-title function_">indexOf</span>(item) >= <span class="hljs-number">0</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">initialSettingPreference</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyScene</span> = <span class="hljs-literal">true</span>;
}
};
S.<span class="hljs-property">randomEngineSeed</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">randomEngineSeed</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyScene</span> = <span class="hljs-literal">true</span>;
}
};
S.<span class="hljs-property">initialSettingEntity</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">if</span> (item) {
<span class="hljs-keyword">if</span> (!item.<span class="hljs-property">substring</span>) item = item.<span class="hljs-property">name</span> || <span class="hljs-string">''</span>;
<span class="hljs-keyword">if</span> (item) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">initialSettingEntity</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyScene</span> = <span class="hljs-literal">true</span>;
}
}
};</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-22">§</a>
</div>
<p>This asset comes with a set of predefined effects built in, to make using it easier</p>
<ul>
<li>Reaction-diffusion simulations are very sensitive to their initial conditions and, in most cases, will quickly evolve into all-black or all-white (monochrome) displays</li>
<li>These presets pick out some of the more stable initial conditions</li>
<li><em><strong>WARNING! The chaos-related presets will generate strobe-lighting effects which may trigger epileptic fits in people who are sensitive to such displays</strong></em></li>
</ul>
</div>
<div class="content"><div class='highlight'><pre>S.<span class="hljs-property">preset</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-keyword">switch</span> (item) {
<span class="hljs-keyword">case</span> <span class="hljs-string">'negativeBubbles'</span>:
<span class="hljs-variable language_">this</span>.<span class="hljs-property">diffusionRateA</span> = <span class="hljs-number">0.2097</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">diffusionRateB</span> = <span class="hljs-number">0.105</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">feedRate</span> = <span class="hljs-number">0.098</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">killRate</span> = <span class="hljs-number">0.0555</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">maxGenerations</span> = <span class="hljs-number">4000</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">initialRandomSeedLevel</span> = <span class="hljs-number">0.05</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'positiveBubbles'</span>:
<span class="hljs-variable language_">this</span>.<span class="hljs-property">diffusionRateA</span> = <span class="hljs-number">0.2097</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">diffusionRateB</span> = <span class="hljs-number">0.105</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">feedRate</span> = <span class="hljs-number">0.098</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">killRate</span> = <span class="hljs-number">0.057</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">maxGenerations</span> = <span class="hljs-number">4000</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">initialRandomSeedLevel</span> = <span class="hljs-number">0.1</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'precriticalBubbles'</span>:
<span class="hljs-variable language_">this</span>.<span class="hljs-property">diffusionRateA</span> = <span class="hljs-number">0.2097</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">diffusionRateB</span> = <span class="hljs-number">0.105</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">feedRate</span> = <span class="hljs-number">0.082</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">killRate</span> = <span class="hljs-number">0.059</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">maxGenerations</span> = <span class="hljs-number">4000</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">initialRandomSeedLevel</span> = <span class="hljs-number">0.08</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'wormsAndLoops'</span>:
<span class="hljs-variable language_">this</span>.<span class="hljs-property">diffusionRateA</span> = <span class="hljs-number">0.2097</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">diffusionRateB</span> = <span class="hljs-number">0.105</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">feedRate</span> = <span class="hljs-number">0.082</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">killRate</span> = <span class="hljs-number">0.06</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">maxGenerations</span> = <span class="hljs-number">4000</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">initialRandomSeedLevel</span> = <span class="hljs-number">0.08</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'stableSolitons'</span>:
<span class="hljs-variable language_">this</span>.<span class="hljs-property">diffusionRateA</span> = <span class="hljs-number">0.2097</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">diffusionRateB</span> = <span class="hljs-number">0.105</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">feedRate</span> = <span class="hljs-number">0.074</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">killRate</span> = <span class="hljs-number">0.064</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">maxGenerations</span> = <span class="hljs-number">4000</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">initialRandomSeedLevel</span> = <span class="hljs-number">0.15</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'uSkateWorld'</span>:
<span class="hljs-variable language_">this</span>.<span class="hljs-property">diffusionRateA</span> = <span class="hljs-number">0.2097</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">diffusionRateB</span> = <span class="hljs-number">0.105</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">feedRate</span> = <span class="hljs-number">0.062</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">killRate</span> = <span class="hljs-number">0.0609</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">maxGenerations</span> = <span class="hljs-number">4000</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">initialRandomSeedLevel</span> = <span class="hljs-number">0.0045</span>;
<span class="hljs-keyword">break</span>;
<span class="hljs-