scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,047 lines (669 loc) • 80.2 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Particle 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="particle-factory">Particle factory</h1>
<p>The Scrawl-canvas particle physics engine is a simple system designed to allow developers a way to add particle-based effects to their canvas animation scenes. The physics engine is built on top of the following components:</p>
<ul>
<li><a href="./particle.html">Particle objects</a>, which represent a 3-dimensional coordinate - based on a Scrawl-canvas <a href="./vector.html">Vector object</a> - and include a history of recent positions which we can use to determine how to display that particle on screen.</li>
<li><a href="./particleHistory.html">History arrays</a> which can be pooled (reused) to cut down on Array creation and distruction during the animation.</li>
<li><a href="./particleForce.html">Force objects</a> which define the general and occasional forces to be applied to each particle in the system as the animation progresses - a <strong>gravity</strong> force object is pre-defined by Scrawl-canvas.</li>
<li><a href="./particleSpring.html">Spring objects</a> used to define a constraint (connection) between two particles in a system.</li>
<li><a href="./particleWorld.html">World objects</a> where we can store attributes and values used by various objects; these attributes can be set up so that they will be inherited by clones of the World object. We can also influence the speed of the physics animation here.</li>
</ul>
<p>We do not have to handle particle generation and manipulation ourselves. Instead, Scrawl-canvas gives us three dedicated <strong>entitys</strong> which we use to add particle animation effects to the canvas scene. These entitys are:</p>
<ul>
<li><a href="./tracer.html">Tracer</a> - this entity generates a single non-recycled (in other words: long lasting) particle with a history, which we can use to display trace effects in the animation.</li>
<li><a href="./emitter.html">Emitter</a> - an entity which generates a stream of short-lived, recycled particles, each with its own history. Emitters are highly versatile entitys which can generate a wide range of effects.</li>
<li><a href="./net.html">Net</a> - a (generally) larger entity which uses both forces and springs to manage the animation of its non-recycled particles. Note that other artefacts can use Net particles as a reference for their own positioning.</li>
</ul>
<h4 id="particle-physics">Particle physics</h4>
<p>The Scrawl-canvas particle physics engine system is based on a fairly classical understanding of particle <em><strong>kinetics</strong></em> (applying forces and constraints to a small, spherical object in 3D space) and <em><strong>kinematics</strong></em> (the movement of the small object in response to the forces and constraints applied to it).</p>
<p><strong>Particles</strong> are represented in the system by a simple Scrawl-canvas object which wraps a set of Scrawl-canvas Vector objects describing the particle’s position, velocity and load. The object also includes a history array detailing the recent particle’s most recent movements, an array of Force objects, a mass attribute (for gravity calculations), and an engine attribute - particles can use different engines to calculate their movements, depending on the needs of the animation; more precise engines are slower, but more stable.</p>
<ul>
<li>Note that all Particles are positioned using _<strong>absolute</strong> (pixel-based) coordinates; they cannot be positioned relatively (using String% values), or by reference to an artefact or another Particle.</li>
<li>Entitys that use Particles for their display - Emitter, Net, Tracer - can, however, use all the normal entity positioning strategies.</li>
<li>All artefacts (including all entitys) can position themselves by reference to a named (non-recycled) Particle.</li>
</ul>
<h4 id="the-particle-pool">The particle pool</h4>
<p>As part of a particle animation many thousands of Particle objects may need to be generated, used and then discarded. Scrawl-canvas attempts to make this more efficient by pooling particle objects so that they can be reused as the animation progresses. </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/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: basic functionality</li>
<li><a href="../../demo/particles-012.html">particles-012</a> - Use Net entity particles as reference coordinates for other artefacts</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, force, spring, springnames } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/library.js'</span>;
<span class="hljs-keyword">import</span> { mergeOver, pushUnique, λ<span class="hljs-literal">null</span>, Ωempty } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/utilities.js'</span>;
<span class="hljs-keyword">import</span> { requestParticleHistoryObject, releaseParticleHistoryObject } <span class="hljs-keyword">from</span> <span class="hljs-string">'./particleHistory.js'</span>;
<span class="hljs-keyword">import</span> { requestVector, releaseVector, makeVector } <span class="hljs-keyword">from</span> <span class="hljs-string">'./vector.js'</span>;</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<p>The Particle object uses the base mixin, thus it supports all the normal Scrawl-canvas functionality such as <code>get</code>, <code>set</code>, <code>setDelta</code>, <code>clone</code>, <code>kill</code>, etc.</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> baseMix <span class="hljs-keyword">from</span> <span class="hljs-string">'../mixin/base.js'</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="particle-constructor">Particle constructor</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title class_">Particle</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_">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_">initializePositions</span>();
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">set</span>(items);
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</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="particle-prototype">Particle prototype</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> P = <span class="hljs-title class_">Particle</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>);</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p>Particles have their own section in the Scrawl-canvas library. They are not artefacts or assets.</p>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">type</span> = <span class="hljs-string">'Particle'</span>;
P.<span class="hljs-property">lib</span> = <span class="hljs-string">'particle'</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">false</span>;</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<h4 id="mixins">Mixins</h4>
</div>
<div class="content"><div class='highlight'><pre>P = <span class="hljs-title function_">baseMix</span>(P);</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<h4 id="particle-attributes">Particle attributes</h4>
<ul>
<li>Attributes defined in the <a href="../mixin/base.html">base mixin</a>: <strong>name</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-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<p>The <strong>position</strong> attribute represents a particle’s world coordinate, and is held in an <code>{x:value, y:value, z:value}</code> Vector object. The default values are <code>{x:0, y:0, z:0}</code>, placing the artifact at the Cell canvas’s top-left corner. We can set the position using the <strong>positionX</strong>, <strong>positionY</strong> and <strong>positionZ</strong> pseudo-attributes.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">position</span>: <span class="hljs-literal">null</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>velocity</strong> - Vector object, generally used internally as part of the particle physics calculation. We can give a particle an initial velocity using the <strong>velocityX</strong>, <strong>velocityY</strong> and <strong>velocityZ</strong> pseudo-attributes.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">velocity</span>: <span class="hljs-literal">null</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>load</strong> - Vector object used internally as part of the particle physics calculation. Never attempt to amend this attribute as it gets reset to zero at the start of every Display cycle.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">load</span>: <span class="hljs-literal">null</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>history</strong> - Array used to hold ParticleHistory arrays, which in turn include data on the particles position at a given time, and the time remaining for that particle to live. The latest history arrays are added to the start of the array, with the oldest history arrays at the end of the array.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">history</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>historyLength</strong> - Number - we control how many ParticleHistory arrays the Particle will retain.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">historyLength</span>: <span class="hljs-number">1</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>engine</strong> - a String value naming the physics engine to be used to calculate this Particle’s movement in response to all the forces applied to it. Scrawl-canvas comes with three in-built engines:</p>
<ul>
<li><strong>‘euler’</strong> - the simplest, quickest and least stable engine (default)</li>
<li><strong>‘runge-kutta’</strong> - the most complex, slowest and most stable engine</li>
<li><strong>‘improved-euler’</strong> - an engine that sits between the other two engines in terms of complexity, speed and stability.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">engine</span>: <span class="hljs-string">'euler'</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>forces</strong> - an Array to hold Force objects that will be applied to this Particle.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">forces</span>: <span class="hljs-literal">null</span>,</pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</a>
</div>
<p><strong>mass</strong> - a Number value representing the Particle’s mass (in kg) - this value is used in the gravity force calculation.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">mass</span>: <span class="hljs-number">1</span>,</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</a>
</div>
<p><strong>fill</strong> and <strong>stroke</strong> - CSS color values which can be used to display the Particle during the animation.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">fill</span>: <span class="hljs-string">'#000000'</span>,
<span class="hljs-attr">stroke</span>: <span class="hljs-string">'#000000'</span>,
};
P.<span class="hljs-property">defs</span> = <span class="hljs-title function_">mergeOver</span>(P.<span class="hljs-property">defs</span>, defaultAttributes);</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>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">packetExclusions</span> = <span class="hljs-title function_">pushUnique</span>(P.<span class="hljs-property">packetExclusions</span>, []);
P.<span class="hljs-property">packetExclusionsByRegex</span> = <span class="hljs-title function_">pushUnique</span>(P.<span class="hljs-property">packetExclusionsByRegex</span>, [<span class="hljs-string">'^(local|dirty|current)'</span>]);
P.<span class="hljs-property">packetCoordinates</span> = <span class="hljs-title function_">pushUnique</span>(P.<span class="hljs-property">packetCoordinates</span>, []);
P.<span class="hljs-property">packetObjects</span> = <span class="hljs-title function_">pushUnique</span>(P.<span class="hljs-property">packetObjects</span>, [<span class="hljs-string">'position'</span>, <span class="hljs-string">'velocity'</span>, <span class="hljs-string">'acceleration'</span>]);
P.<span class="hljs-property">packetFunctions</span> = <span class="hljs-title function_">pushUnique</span>(P.<span class="hljs-property">packetFunctions</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>
<p>In general we don’t need to create or clone Particles objects ourselves; their generation is managed behind the scenes by the physics-related entitys.</p>
</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>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">factoryKill</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">history</span>.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">h</span> =></span> <span class="hljs-title function_">releaseParticleHistoryObject</span>(h));
<span class="hljs-keyword">let</span> deadSprings = [];
springnames.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">name</span> =></span> {
<span class="hljs-keyword">let</span> s = spring[name];
<span class="hljs-keyword">if</span> (s.<span class="hljs-property">particleFrom</span> && s.<span class="hljs-property">particleFrom</span>.<span class="hljs-property">name</span> === <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>) deadSprings.<span class="hljs-property">push</span>[s];
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (s.<span class="hljs-property">particleTo</span> && s.<span class="hljs-property">particleTo</span>.<span class="hljs-property">name</span> === <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>) deadSprings.<span class="hljs-property">push</span>[s];
});
deadSprings.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">s</span> =></span> s.<span class="hljs-title function_">kill</span>());
};</pre></div></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>positionX</strong>, <strong>positionY</strong>, <strong>positionZ</strong></p>
</div>
<div class="content"><div class='highlight'><pre>G.<span class="hljs-property">positionX</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span>.<span class="hljs-property">x</span>; };
G.<span class="hljs-property">positionY</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span>.<span class="hljs-property">y</span>; };
G.<span class="hljs-property">positionZ</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span>.<span class="hljs-property">z</span>; };</pre></div></div>
</li>
<li id="section-24">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-24">§</a>
</div>
<p>We return the <strong>position</strong> value as an <code>[x, y, z]</code> Array rather than as an object</p>
</div>
<div class="content"><div class='highlight'><pre>G.<span class="hljs-property">position</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">let</span> s = <span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span>;
<span class="hljs-keyword">return</span> [s.<span class="hljs-property">x</span>, s.<span class="hljs-property">y</span>, s.<span class="hljs-property">z</span>];
};
S.<span class="hljs-property">positionX</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">coord</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span>.<span class="hljs-property">x</span> = coord; };
S.<span class="hljs-property">positionY</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">coord</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span>.<span class="hljs-property">y</span> = coord; };
S.<span class="hljs-property">positionZ</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">coord</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span>.<span class="hljs-property">z</span> = coord; };
S.<span class="hljs-property">position</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span>.<span class="hljs-title function_">set</span>(item); };
D.<span class="hljs-property">positionX</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">coord</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span>.<span class="hljs-property">x</span> += coord; };
D.<span class="hljs-property">positionY</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">coord</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span>.<span class="hljs-property">y</span> += coord; };
D.<span class="hljs-property">positionZ</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">coord</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">position</span>.<span class="hljs-property">z</span> += coord; };
D.<span class="hljs-property">position</span> = λ<span class="hljs-literal">null</span>;</pre></div></div>
</li>
<li id="section-25">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-25">§</a>
</div>
<p><strong>velocity</strong>, <strong>velocityX</strong>, <strong>velocityY</strong>, <strong>velocityZ</strong></p>
<ul>
<li>There should be no need to access/amend these values</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre>G.<span class="hljs-property">velocityX</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">velocity</span>.<span class="hljs-property">x</span>; };
G.<span class="hljs-property">velocityY</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">velocity</span>.<span class="hljs-property">y</span>; };
G.<span class="hljs-property">velocityZ</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">velocity</span>.<span class="hljs-property">z</span>; };
G.<span class="hljs-property">velocity</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">let</span> s = <span class="hljs-variable language_">this</span>.<span class="hljs-property">velocity</span>;
<span class="hljs-keyword">return</span> [s.<span class="hljs-property">x</span>, s.<span class="hljs-property">y</span>, s.<span class="hljs-property">z</span>];
};
S.<span class="hljs-property">velocityX</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">coord</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">velocity</span>.<span class="hljs-property">x</span> = coord; };
S.<span class="hljs-property">velocityY</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">coord</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">velocity</span>.<span class="hljs-property">y</span> = coord; };
S.<span class="hljs-property">velocityZ</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">coord</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">velocity</span>.<span class="hljs-property">z</span> = coord; };
S.<span class="hljs-property">velocity</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">x, y, z</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">velocity</span>.<span class="hljs-title function_">set</span>(x, y, z);
};
D.<span class="hljs-property">velocityX</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">coord</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">velocity</span>.<span class="hljs-property">x</span> += coord; };
D.<span class="hljs-property">velocityY</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">coord</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">velocity</span>.<span class="hljs-property">y</span> += coord; };
D.<span class="hljs-property">velocityZ</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">coord</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-property">velocity</span>.<span class="hljs-property">z</span> += coord; };
D.<span class="hljs-property">velocity</span> = λ<span class="hljs-literal">null</span>;</pre></div></div>
</li>
<li id="section-26">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-26">§</a>
</div>
<p><strong>forces</strong> - generally no need to add forces to Particles ourselves as this is handled by the physics-based entitys</p>
</div>
<div class="content"><div class='highlight'><pre>S.<span class="hljs-property">forces</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> (<span class="hljs-title class_">Array</span>.<span class="hljs-title function_">isArray</span>(item)) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">forces</span>.<span class="hljs-property">length</span> = <span class="hljs-number">0</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">forces</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">forces</span>.<span class="hljs-title function_">concat</span>(item);
}
<span class="hljs-keyword">else</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">forces</span>.<span class="hljs-title function_">push</span>(item);
}
};</pre></div></div>
</li>
<li id="section-27">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-27">§</a>
</div>
<p>Remove certain attributes from the set/deltaSet functionality</p>
</div>
<div class="content"><div class='highlight'><pre>S.<span class="hljs-property">load</span> = λ<span class="hljs-literal">null</span>;
S.<span class="hljs-property">history</span> = λ<span class="hljs-literal">null</span>;
D.<span class="hljs-property">load</span> = λ<span class="hljs-literal">null</span>;</pre></div></div>
</li>
<li id="section-28">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-28">§</a>
</div>
<h4 id="prototype-functions">Prototype functions</h4>
<p><code>initializePositions</code> - internal function called by all particle factories </p>
<ul>
<li>Setup initial Arrays and Objects.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre>P.<span class="hljs-property">initializePositions</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<