scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
1,035 lines (656 loc) • 52.9 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Filter mixin</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="../factory/action.html">
./source/factory/action.js
</a>
<a class="source" href="../factory/anchor.html">
./source/factory/anchor.js
</a>
<a class="source" href="../factory/animation.html">
./source/factory/animation.js
</a>
<a class="source" href="../factory/bezier.html">
./source/factory/bezier.js
</a>
<a class="source" href="../factory/block.html">
./source/factory/block.js
</a>
<a class="source" href="../factory/canvas.html">
./source/factory/canvas.js
</a>
<a class="source" href="../factory/cell.html">
./source/factory/cell.js
</a>
<a class="source" href="../factory/cog.html">
./source/factory/cog.js
</a>
<a class="source" href="../factory/color.html">
./source/factory/color.js
</a>
<a class="source" href="../factory/conicGradient.html">
./source/factory/conicGradient.js
</a>
<a class="source" href="../factory/coordinate.html">
./source/factory/coordinate.js
</a>
<a class="source" href="../factory/crescent.html">
./source/factory/crescent.js
</a>
<a class="source" href="../factory/element.html">
./source/factory/element.js
</a>
<a class="source" href="../factory/emitter.html">
./source/factory/emitter.js
</a>
<a class="source" href="../factory/filter.html">
./source/factory/filter.js
</a>
<a class="source" href="../factory/filterEngine-bluenoiseData.html">
./source/factory/filterEngine-bluenoiseData.js
</a>
<a class="source" href="../factory/filterEngine.html">
./source/factory/filterEngine.js
</a>
<a class="source" href="../factory/fontAttributes.html">
./source/factory/fontAttributes.js
</a>
<a class="source" href="../factory/gradient.html">
./source/factory/gradient.js
</a>
<a class="source" href="../factory/grid.html">
./source/factory/grid.js
</a>
<a class="source" href="../factory/group.html">
./source/factory/group.js
</a>
<a class="source" href="../factory/imageAsset.html">
./source/factory/imageAsset.js
</a>
<a class="source" href="../factory/line.html">
./source/factory/line.js
</a>
<a class="source" href="../factory/lineSpiral.html">
./source/factory/lineSpiral.js
</a>
<a class="source" href="../factory/loom.html">
./source/factory/loom.js
</a>
<a class="source" href="../factory/mesh.html">
./source/factory/mesh.js
</a>
<a class="source" href="../factory/net.html">
./source/factory/net.js
</a>
<a class="source" href="../factory/noiseAsset.html">
./source/factory/noiseAsset.js
</a>
<a class="source" href="../factory/oval.html">
./source/factory/oval.js
</a>
<a class="source" href="../factory/palette.html">
./source/factory/palette.js
</a>
<a class="source" href="../factory/particle.html">
./source/factory/particle.js
</a>
<a class="source" href="../factory/particleForce.html">
./source/factory/particleForce.js
</a>
<a class="source" href="../factory/particleHistory.html">
./source/factory/particleHistory.js
</a>
<a class="source" href="../factory/particleSpring.html">
./source/factory/particleSpring.js
</a>
<a class="source" href="../factory/particleWorld.html">
./source/factory/particleWorld.js
</a>
<a class="source" href="../factory/pattern.html">
./source/factory/pattern.js
</a>
<a class="source" href="../factory/phrase.html">
./source/factory/phrase.js
</a>
<a class="source" href="../factory/picture.html">
./source/factory/picture.js
</a>
<a class="source" href="../factory/polygon.html">
./source/factory/polygon.js
</a>
<a class="source" href="../factory/polyline.html">
./source/factory/polyline.js
</a>
<a class="source" href="../factory/quadratic.html">
./source/factory/quadratic.js
</a>
<a class="source" href="../factory/quaternion.html">
./source/factory/quaternion.js
</a>
<a class="source" href="../factory/radialGradient.html">
./source/factory/radialGradient.js
</a>
<a class="source" href="../factory/rawAsset.html">
./source/factory/rawAsset.js
</a>
<a class="source" href="../factory/rdAsset.html">
./source/factory/rdAsset.js
</a>
<a class="source" href="../factory/rectangle.html">
./source/factory/rectangle.js
</a>
<a class="source" href="../factory/renderAnimation.html">
./source/factory/renderAnimation.js
</a>
<a class="source" href="../factory/shape.html">
./source/factory/shape.js
</a>
<a class="source" href="../factory/spiral.html">
./source/factory/spiral.js
</a>
<a class="source" href="../factory/spriteAsset.html">
./source/factory/spriteAsset.js
</a>
<a class="source" href="../factory/stack.html">
./source/factory/stack.js
</a>
<a class="source" href="../factory/star.html">
./source/factory/star.js
</a>
<a class="source" href="../factory/state.html">
./source/factory/state.js
</a>
<a class="source" href="../factory/tetragon.html">
./source/factory/tetragon.js
</a>
<a class="source" href="../factory/ticker.html">
./source/factory/ticker.js
</a>
<a class="source" href="../factory/tracer.html">
./source/factory/tracer.js
</a>
<a class="source" href="../factory/tween.html">
./source/factory/tween.js
</a>
<a class="source" href="../factory/unstackedElement.html">
./source/factory/unstackedElement.js
</a>
<a class="source" href="../factory/vector.html">
./source/factory/vector.js
</a>
<a class="source" href="../factory/videoAsset.html">
./source/factory/videoAsset.js
</a>
<a class="source" href="../factory/wheel.html">
./source/factory/wheel.js
</a>
<a class="source" href="anchor.html">
./source/mixin/anchor.js
</a>
<a class="source" href="asset.html">
./source/mixin/asset.js
</a>
<a class="source" href="assetAdvancedFunctionality.html">
./source/mixin/assetAdvancedFunctionality.js
</a>
<a class="source" href="assetConsumer.html">
./source/mixin/assetConsumer.js
</a>
<a class="source" href="base.html">
./source/mixin/base.js
</a>
<a class="source" href="cascade.html">
./source/mixin/cascade.js
</a>
<a class="source" href="delta.html">
./source/mixin/delta.js
</a>
<a class="source" href="displayShape.html">
./source/mixin/displayShape.js
</a>
<a class="source" href="dom.html">
./source/mixin/dom.js
</a>
<a class="source" href="entity.html">
./source/mixin/entity.js
</a>
<a class="source" href="filter.html">
./source/mixin/filter.js
</a>
<a class="source" href="mimic.html">
./source/mixin/mimic.js
</a>
<a class="source" href="path.html">
./source/mixin/path.js
</a>
<a class="source" href="pattern.html">
./source/mixin/pattern.js
</a>
<a class="source" href="pivot.html">
./source/mixin/pivot.js
</a>
<a class="source" href="position.html">
./source/mixin/position.js
</a>
<a class="source" href="shapeBasic.html">
./source/mixin/shapeBasic.js
</a>
<a class="source" href="shapeCurve.html">
./source/mixin/shapeCurve.js
</a>
<a class="source" href="shapePathCalculation.html">
./source/mixin/shapePathCalculation.js
</a>
<a class="source" href="styles.html">
./source/mixin/styles.js
</a>
<a class="source" href="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="filter-mixin">Filter mixin</h1>
<p>The filter mixin adds functionality to Cell, Group and all entity factories which allows those objects to use Scrawl-canvas <a href="../factory/filter.html">Filter objects</a> in their output.</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-007.html">Canvas-007</a> - Apply filters at the entity, group and cell level</li>
<li><a href="../../demo/packets-002.html">Packets-002</a> - Scrawl-canvas packets; save and load a range of different entitys</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> { filter, asset, styles } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/library.js'</span>;
<span class="hljs-keyword">import</span> { mergeOver, pushUnique, removeItem, Ωempty, generateUuid } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/utilities.js'</span>;
<span class="hljs-keyword">import</span> { requestCell, releaseCell } <span class="hljs-keyword">from</span> <span class="hljs-string">'../factory/cell.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="export-function">Export function</h4>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> (<span class="hljs-params">P = Ωempty</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="filter-related-attributes">Filter-related attributes</h4>
<p>All factories using the filter mixin will add these attributes to their objects</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> defaultAttributes = {</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<p><strong>filters</strong> - An array of filter object String names. If only one filter is to be applied, then it is enough to use the String name of that filter object - Scrawl-canvas will make sure it gets added to the Array.</p>
<ul>
<li>To add/remove new filters to the filters array, use the <code>addFilters</code> and <code>removeFilters</code> functions. Note that the <code>set</code> function will replace all the existing filters in the array with the new filters. To remove all existing filters from the array, use the <code>clearFilters</code> function</li>
<li>Multiple filters will be batch-applied to an entity, group of entitys, or an entire cell in one operation. Filters are applied in the order that they appear in in the filters array.</li>
<li><em><strong>Be aware that the “filters” (plural) attribute is different to the CSS/SVG “filter” (singular) attribute</strong></em> - details about how Scrawl-canvas uses CSS/SVG filter Strings to produce filtering effects (at the entity and Cell levels only) are investigated in the Filter Demos 501 to 505. CSS/SVG filter Strings can be applied in addition to Scrawl-canvas filters Array objects, and will be applied after them.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">filters</span>: <span class="hljs-literal">null</span>,</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p><strong>isStencil</strong> - Use the entity as a stencil. When this flag is set filter effects will be applied to the background imagery covered by the entity (or Group of entitys, or Cell), the results of which will replace the entity/Group/Cell in the final display.</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">isStencil</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>
<p><strong>memoizeFilterOutput</strong> - SC uses memoization as a means to enhance the speed of filter application. When an entity has filters sety on it, and the <code>memoizeFilterOutput</code> flag is set to <code>true</code>, the filter engine will cache the generated output after its first run and, for subsequent Display cycles, serve up the cached result rather than perform the filter calculations again. Things to note:</p>
<ul>
<li>Entitys will automatically request their filters to recalculate and re-memoize after any start, handle, offset, scale, rotation or flip change. They also request re-memoization when other attributes change, for instance: dimensions, fill or stroke styles, line parameters, font or text updates (Phrase), etc.</li>
<li>Re-memoization is also triggered by any changes to the entity’s <code>filters</code> array, or when the attributes of a filter in the array update.</li>
<li>Memoization is limited to entitys (not Groups or Cells). If the <code>isStencil</code> flag is set to <code>true</code> the <code>memoizeFilterOutput</code> flag is ignored.</li>
<li>Memoization is also ignored for Picture entitys using a spritesheet or video asset for their source.</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-attr">memoizeFilterOutput</span>: <span class="hljs-literal">false</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-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</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> S = P.<span class="hljs-property">setters</span>;</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<p><code>filters</code> - _<strong>Dangerous action!</strong> - replaces the existing filters Array with a new filters Array. If a string name is supplied, will add that name to the existing filters array</p>
</div>
<div class="content"><div class='highlight'><pre> S.<span class="hljs-property">filters</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-keyword">if</span> (!<span class="hljs-title class_">Array</span>.<span class="hljs-title function_">isArray</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">filters</span>)) <span class="hljs-variable language_">this</span>.<span class="hljs-property">filters</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">filters</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilters</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyImageSubscribers</span> = <span class="hljs-literal">true</span>;
}
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (item.<span class="hljs-property">substring</span>) {
<span class="hljs-title function_">pushUnique</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">filters</span>, item);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilters</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyImageSubscribers</span> = <span class="hljs-literal">true</span>;
}
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilterIdentifier</span> = <span class="hljs-literal">true</span>;
}
};</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<p><code>memoizeFilterOutput</code></p>
</div>
<div class="content"><div class='highlight'><pre> S.<span class="hljs-property">memoizeFilterOutput</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">memoizeFilterOutput</span> = item;
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">updateFilterIdentifier</span>(!!item);
};</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<p><code>updateFilterIdentifier</code> - manually trigger re-memoization. The function’s (optional) argument is a boolean. </p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">updateFilterIdentifier</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilterIdentifier</span> = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">state</span>.<span class="hljs-property">dirtyFilterIdentifier</span> = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">memoizeFilterOutput</span> && item) <span class="hljs-variable language_">this</span>.<span class="hljs-property">filterIdentifier</span> = <span class="hljs-title function_">generateUuid</span>();
<span class="hljs-keyword">else</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">filterIdentifier</span> = <span class="hljs-string">''</span>;
};</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<h4 id="packet-management">Packet management</h4>
<p>No additional packet functionality defined here</p>
</div>
</li>
<li id="section-14">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-14">§</a>
</div>
<h4 id="clone-management">Clone management</h4>
<p>No additional clone functionality defined here</p>
</div>
</li>
<li id="section-15">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-15">§</a>
</div>
<h4 id="kill-management">Kill management</h4>
<p>No additional kill functionality defined here</p>
</div>
</li>
<li id="section-16">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-16">§</a>
</div>
<h4 id="get-set-deltaset">Get, Set, deltaSet</h4>
<p>No additional functionality defined here</p>
</div>
</li>
<li id="section-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</a>
</div>
<h4 id="prototype-functions">Prototype functions</h4>
<p><code>cleanFilters</code> - Internal housekeeping</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">cleanFilters</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilters</span> = <span class="hljs-literal">false</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFiltersCache</span> = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">filters</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-property">filters</span> = [];
<span class="hljs-keyword">let</span> myfilters = <span class="hljs-variable language_">this</span>.<span class="hljs-property">filters</span>,
floor = <span class="hljs-title class_">Math</span>.<span class="hljs-property">floor</span>,
buckets = [],
myobj, order;
myfilters.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">name</span> =></span> {
myobj = filter[name];
<span class="hljs-keyword">if</span> (myobj) {
order = <span class="hljs-title function_">floor</span>(myobj.<span class="hljs-property">order</span>) || <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (!buckets[order]) buckets[order] = [];
buckets[order].<span class="hljs-title function_">push</span>(myobj);
}
});
<span class="hljs-variable language_">this</span>.<span class="hljs-property">currentFilters</span> = buckets.<span class="hljs-title function_">reduce</span>(<span class="hljs-function">(<span class="hljs-params">a, v</span>) =></span> a.<span class="hljs-title function_">concat</span>(v), []);
};</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</a>
</div>
<p><code>addFilters</code>, <code>removeFilters</code> - Add or remove one or more filter name strings to/from the filters array. Filter name strings, or the filter objects themselves, can be supplied as comma-separated arguments to the function.</p>
<ul>
<li>Filters are added to the end of the <code>filters</code> array. If the filters need to be reordered, use the <code>set</code> functionality instead to replace the array with an array containing the desired filter order</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">addFilters</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">...args</span>) {
<span class="hljs-keyword">if</span> (!<span class="hljs-title class_">Array</span>.<span class="hljs-title function_">isArray</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">filters</span>)) <span class="hljs-variable language_">this</span>.<span class="hljs-property">filters</span> = [];
args.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> {
<span class="hljs-keyword">if</span> (item && item.<span class="hljs-property">type</span> === <span class="hljs-string">'Filter'</span>) item = item.<span class="hljs-property">name</span>;
<span class="hljs-title function_">pushUnique</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">filters</span>, item);
}, <span class="hljs-variable language_">this</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilters</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyImageSubscribers</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilterIdentifier</span> = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>;
};
P.<span class="hljs-property">removeFilters</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">...args</span>) {
<span class="hljs-keyword">if</span> (!<span class="hljs-title class_">Array</span>.<span class="hljs-title function_">isArray</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">filters</span>)) <span class="hljs-variable language_">this</span>.<span class="hljs-property">filters</span> = [];
args.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> {
<span class="hljs-keyword">if</span> (item && item.<span class="hljs-property">type</span> === <span class="hljs-string">'Filter'</span>) item = item.<span class="hljs-property">name</span>;
<span class="hljs-title function_">removeItem</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">filters</span>, item);
}, <span class="hljs-variable language_">this</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilters</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyImageSubscribers</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilterIdentifier</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-19">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-19">§</a>
</div>
<p><code>clearFilters</code> - Clears the filters array</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">clearFilters</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-keyword">if</span> (!<span class="hljs-title class_">Array</span>.<span class="hljs-title function_">isArray</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">filters</span>)) <span class="hljs-variable language_">this</span>.<span class="hljs-property">filters</span> = [];
<span class="hljs-variable language_">this</span>.<span class="hljs-property">filters</span>.<span class="hljs-property">length</span> = <span class="hljs-number">0</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilters</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyImageSubscribers</span> = <span class="hljs-literal">true</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilterIdentifier</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-20">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-20">§</a>
</div>
<p><code>preprocessFilters</code> - internal function called as part of the Display cycle. The <strong>process-image</strong> filter action loads a Scrawl-canvas asset into the filters engine, where it can be used as a lineIn or lineMix argument for other filter actions.</p>
</div>
<div class="content"><div class='highlight'><pre> P.<span class="hljs-property">preprocessFilters</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">filters</span>) {
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>, iz = filters.<span class="hljs-property">length</span>, filter; i < iz; i++) {
filter = filters[i];
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> j = <span class="hljs-number">0</span>, jz = filter.<span class="hljs-property">actions</span>.<span class="hljs-property">length</span>, obj; j < jz; j++) {
obj = filter.<span class="hljs-property">actions</span>[j];
<span class="hljs-keyword">if</span> (obj.<span class="hljs-property">action</span> == <span class="hljs-string">'process-image'</span>) {
<span class="hljs-keyword">let</span> flag = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">let</span> img = asset[obj.<span class="hljs-property">asset</span>];
<span class="hljs-keyword">if</span> (img) {
<span class="hljs-keyword">if</span> (<span class="hljs-string">'Image'</span> !== img.<span class="hljs-property">type</span>) {
img.<span class="hljs-title function_">checkSource</span>();
<span class="hljs-variable language_">this</span>.<span class="hljs-property">dirtyFilterIdentifier</span> = <span class="hljs-literal">true</span>;
}
<span class="hljs-keyword">if</span> (img.<span class="hljs-property">type</span> === <span class="hljs-string">'Video'</span> || img.<span class="hljs-property">type</span> === <span class="hljs-string">'Sprite'</span> || img.<span class="hljs-property">type</span> === <span class="hljs-string">'Noise'</span> || img.<span class="hljs-property">type</span> === <span class="hljs-string">'Cell'</span> || img.<span class="hljs-property">type</span> === <span class="hljs-string">'RawAsset'</span> || img.<span class="hljs-property">type</span> === <span class="hljs-string">'RdAsset'</span>) {
img.<span class="hljs-title function_">checkSource</span>();
}
<span class="hljs-keyword">let</span> width = img.<span class="hljs-property">sourceNaturalWidth</span>,
height = img.<span class="hljs-property">sourceNaturalHeight</span>,
snd = img.<span class="hljs-property">sourceNaturalDimensions</span>,
cnd = img.<span class="hljs-property">currentDimensions</span>;
<span class="hljs-keyword">if</span> (!width || !height) {
<span class="hljs-keyword">if</span> (snd && snd[<span class="hljs-number">0</span>] && snd[<span class="hljs-number">1</span>]) {
width = width || snd[<span class="hljs-number">0</span>];
height = height || snd[<span class="hljs-number">1</span>];
}
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (cnd && cnd[<span class="hljs-number">0</span>] && cnd[<span class="hljs-number">1</span>]) {
width = width || cnd[<span class="hljs-number">0</span>];
height = height || cnd[<span class="hljs-number">1</span>];
}
}
<span class="hljs-keyword">if</span> (width && height) {
flag = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">let</span> copyX = obj.<span class="hljs-property">copyX</span> || <span class="hljs-number">0</span>,
copyY = obj.<span class="hljs-property">copyY</span> || <span class="hljs-number">0</span>,
copyWidth = obj.<span class="hljs-property">copyWidth</span> || <span class="hljs-number">1</span>,
copyHeight = obj.<span class="hljs-property">copyHeight</span> || <span class="hljs-number">1</span>,
destWidth = obj.<span class="hljs-property">width</span> || <span class="hljs-number">1</span>,
destHeight = obj.<span class="hljs-property">height</span> || <span class="hljs-number">1</span>;
<span class="hljs-keyword">if</span> (copyX.<span class="hljs-property">substring</span>) copyX = (<span class="hljs-built_in">parseFloat</span>(copyX) / <span class="hljs-number">100</span>) * width;
<span class="hljs-keyword">if</span> (copyY.<span class="hljs-property">substring</span>) copyY = (<span class="hljs-built_in">parseFloat</span>(copyY) / <span class="hljs-number">100</span>) * height;
<span class="hljs-keyword">if</span> (copyWidth.<span class="hljs-property">substring</span>) copyWidth = (<span class="hljs-built_in">parseFloat</span>(copyWidth) / <span class="hljs-number">100</span>) * width;
<span class="hljs-keyword">if</span> (copyHeight.<span class="hljs-property">substring</span>) copyHeight = (<span class="hljs-built_in">parseFloat</span>(copyHeight) / <span class="hljs-number">100</span>) * height;
<span class="hljs-keyword">if</span> (destWidth.<span class="hljs-property">substring</span>) destWidth = (<span class="hljs-built_in">parseFloat</span>(destWidth) / <span class="hljs-number">100</span>) * width;
<span class="hljs-keyword">if</span> (destHeight.<span class="hljs-property">substring</span>) destHeight = (<span class="hljs-built_in">parseFloat</span>(destHeight) / <span class="hljs-number">100</span>) * height;
copyX = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">abs</span>(copyX);
copyY = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">abs</span>(copyY);
copyWidth = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">abs</span>(copyWidth);
copyHeight = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">abs</span>(copyHeight);
destWidth = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">abs</span>(destWidth);
destHeight = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">abs</span>(destHeight);
<span class="hljs-keyword">if</span> (copyX > width) {
copyX = width - <span class="hljs-number">2</span>;
copyWidth = <span class="hljs-number">1</span>;
}
<span class="hljs-keyword">if</span> (copyY > height) {
copyY = height - <span class="hljs-number">2</span>;
copyHeight = <span class="hljs-number">1</span>;
}
<span class="hljs-keyword">if</span> (copyWidth > width) {
copyWidth = width - <span class="hljs-number">1</span>;
copyX = <span class="hljs-number">0</span>;
}
<span class="hljs-keyword">if</span> (copyHeight > height) {
copyHeight = height - <span class="hljs-number">1</span>;
copyY = <span class="hljs-number">0</span>;
}
<span class="hljs-keyword">if</span> (copyX + copyWidth > width) {
copyX = width - copyWidth - <span class="hljs-number">1</span>;
}
<span class="hljs-keyword">if</span> (copyY + copyHeight > height) {
copyY = height - copyHeight - <span class="hljs-number">1</span>;
}
<span class="hljs-keyword">let</span> cell = <span class="hljs-title function_">requestCell</span>(),
engine = cell.<span class="hljs-property">engine</span>,
canvas = cell.<span class="hljs-property">element</span>;
canvas.<span class="hljs-property">width</span> = destWidth;
canvas.<span class="hljs-property">height</span> = destHeight;
engine.<span class="hljs-title function_">setTransform</span>(<span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);
engine.<span class="hljs-property">globalCompositeOperation</span> = <span class="hljs-string">'source-over'</span>;
engine.<span class="hljs-property">globalAlpha</span> = <span class="hljs-number">1</span>;
<span class="hljs-keyword">let</span> src = img.<span class="hljs-property">source</span> || img.<span class="hljs-property">element</span>;
engine.<span class="hljs-title function_">drawImage</span>(src, copyX, copyY, copyWidth, copyHeight, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, destWidth, destHeight);
obj.<span class="hljs-property">assetData</span> = engine.<span class="hljs-title function_">getImageData</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, destWidth, destHeight);
<span class="hljs-title function_">releaseCell</span>(cell);
}
}
<span class="hljs-keyword">if</span> (flag) {
obj.<span class="hljs-property">assetData</span> = {
<span class="hljs-attr">width</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">data</span>: <span class="hljs-keyword