scrawl-canvas

<!DOCTYPE html> <html> <head> <title>Color 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="color-factory">Color factory</h1> </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> <p>While any entity using a color style will make use of color functionality, the following demos are most relevant for testing this functionality</p> <ul> <li><a href="../../demo/canvas-003.html">Canvas-003</a> - Linear gradients</li> <li><a href="../../demo/canvas-031.html">Canvas-031</a> - Cell generation and processing order - kaleidoscope clock</li> <li><a href="../../demo/canvas-047.html">Canvas-047</a> - Easing functions for Color and Tween factories</li> <li><a href="../../demo/canvas-059.html">Canvas-059</a> - CSS color space strings - rgb-key, rgb-hex, rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch()</li> <li><a href="../../demo/filters-027.html">Filters-027</a> - Parameters for: reducePalette filter</li> <li><a href="../../demo/packets-002.html">Packets-002</a> - Scrawl-canvas packets; save and load a range of different entitys</li> <li><a href="../../demo/dom-009.html">DOM-009</a> - Stop and restart the main animation loop; add and remove event listener; retrieve all artefacts at a given coordinate</li> <li><a href="../../demo/dom-012.html">DOM-012</a> - Add and remove (kill) Scrawl-canvas canvas elements programmatically</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, radian } <span class="hljs-keyword">from</span> <span class="hljs-string">'../core/library.js'</span>; <span class="hljs-keyword">import</span> { mergeOver, xt, xtGet, isa_obj, isa_fn, easeEngines, Ωempty, λfirstArg, pushUnique, interpolate, correctAngle } <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">'./cell.js'</span>; <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-4"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-4">§</a> </div> <h4 id="color-constructor">Color constructor</h4> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title class_">Color</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-property">rgb</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">rgb_max</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">rgb_min</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">hsl</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">hsl_max</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">hsl_min</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">hwb</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">hwb_max</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">hwb_min</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">xyz</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">xyz_max</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">xyz_min</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">lab</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">lab_max</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">lab_min</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">lch</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">lch_max</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">lch_min</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">oklab</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">oklab_max</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">oklab_min</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">oklch</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">oklch_max</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">oklch_min</span> = []; <span class="hljs-variable language_">this</span>.<span class="hljs-property">easingFunction</span> = λfirstArg; <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">convert</span>(<span class="hljs-string">'transparent'</span>); <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">convert</span>(<span class="hljs-string">'black'</span>, <span class="hljs-string">'_min'</span>); <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">convert</span>(<span class="hljs-string">'white'</span>, <span class="hljs-string">'_max'</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-5"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-5">§</a> </div> <h4 id="color-prototype">Color prototype</h4> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> P = <span class="hljs-title class_">Color</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">'Color'</span>; P.<span class="hljs-property">lib</span> = <span class="hljs-string">'styles'</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-6"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-6">§</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-7"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-7">§</a> </div> <h4 id="color-attributes">Color 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-8"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-8">§</a> </div> <p>A Color object can hold details of three colors</p> <ul> <li>The ‘current’, or last evaluated color</li> <li>The ‘maximum’ range color; relevant attributes are suffixed with <code>_max</code></li> <li>The ‘minimum’ range color; relevant attributes are suffixed with <code>_min</code></li> </ul> <p>On recieving a color to store or process, the Color object will calculate the color’s values in several different color spaces: <code>RGB</code>, <code>HSL</code>, <code>HWB</code>, <code>XYZ</code>, <code>LAB</code>, <code>LCH</code>, <code>OKLAB</code>, <code>OKLCH</code></p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">rgb</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">rgb_max</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">rgb_min</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">hsl</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">hsl_max</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">hsl_min</span>: <span class="hljs-literal">null</span>,</pre></div></div> </li> <li id="section-9"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-9">§</a> </div> <p>hwb() color Strings are not yet widely supported as valid input into browser canvas engines</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">hwb</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">hwb_max</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">hwb_min</span>: <span class="hljs-literal">null</span>,</pre></div></div> </li> <li id="section-10"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-10">§</a> </div> <p>xyz() colors are not valid CSS color strings; they are an intermediary step on the way to converting rgb color values into lab notation</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">xyz</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">xyz_max</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">xyz_min</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>lab() color Strings are not yet widely supported as valid input into browser canvas engines</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">lab</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">lab_max</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">lab_min</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>lch() color Strings are not yet widely supported as valid input into browser canvas engines</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">lch</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">lch_max</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">lch_min</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>oklab() color Strings are not yet widely supported as valid input into browser canvas engines</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">oklab</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">oklab_max</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">oklab_min</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>oklch() color Strings are not yet widely supported as valid input into browser canvas engines</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">oklch</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">oklch_max</span>: <span class="hljs-literal">null</span>, <span class="hljs-attr">oklch_min</span>: <span class="hljs-literal">null</span>,</pre></div></div> </li> <li id="section-15"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-15">§</a> </div> <p>The <strong>easing</strong> and <strong>easingFunction</strong> attributes affect the <code>getRangeColor</code> function, applying an easing function to those requests. Value may be a predefined easing String name, or a function accepting a Number value and returning a Number value, both values to be positive floats in the range 0-1</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">easing</span>: <span class="hljs-string">'linear'</span>, <span class="hljs-attr">easingFunction</span>: <span class="hljs-literal">null</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>colorSpace</strong> - String value defining the color space to be used by the Color object for its internal calculations.</p> <ul> <li>Accepted values from: <code>'RGB', 'HSL', 'HWB', 'XYZ', 'LAB', 'LCH', 'OKLAB', 'OKLCH'</code></li> </ul> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">colorSpace</span>: <span class="hljs-string">'RGB'</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>returnColorAs</strong> - String value defining the type of color String the Color object will return.</p> <ul> <li>This is a shorter list than the internal colorSpace attribute as we only return values for CSS specified color spaces. Note that some of these color spaces are not widely supported across browsers and will lead to errors in canvases displayed on non-supported browsers</li> <li>Accepted values from: <code>'RGB', 'HSL', 'HWB', 'LAB', 'LCH', 'OKLAB', 'OKLCH'</code></li> </ul> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">returnColorAs</span>: <span class="hljs-string">'RGB'</span>,</pre></div></div> </li> <li id="section-18"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-18">§</a> </div> <h5 id="non-retained-argument-attributes-for-factory-clone-set-functions">Non-retained argument attributes (for factory, clone, set functions)</h5> <p><strong>color</strong>, <strong>minimumColor</strong>, <strong>maximumColor</strong> - CSS color definition Strings which the Color object will attempt to convert into various color space values.</p> </div> <div class="content"><div class='highlight'><pre>}; 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">packetFunctions</span> = <span class="hljs-title function_">pushUnique</span>(P.<span class="hljs-property">packetFunctions</span>, [<span class="hljs-string">'easingFunction'</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>No additional clone functionality required</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> <p>Overwrites ./mixin/base.js</p> </div> <div class="content"><div class='highlight'><pre>P.<span class="hljs-property">kill</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) { <span class="hljs-keyword">let</span> myname = <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span>;</pre></div></div> </li> <li id="section-22"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-22">§</a> </div> <p>Remove style from all entity state objects</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">entries</span>(entity).<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">[name, ent]</span>) =></span> { <span class="hljs-keyword">let</span> state = ent.<span class="hljs-property">state</span>; <span class="hljs-keyword">if</span> (state) { <span class="hljs-keyword">let</span> fill = state.<span class="hljs-property">fillStyle</span>, stroke = state.<span class="hljs-property">strokeStyle</span>, shadow = state.<span class="hljs-property">shadowColor</span>; <span class="hljs-keyword">if</span> (<span class="hljs-title function_">isa_obj</span>(fill) && fill.<span class="hljs-property">name</span> === myname) state.<span class="hljs-property">fillStyle</span> = state.<span class="hljs-property">defs</span>.<span class="hljs-property">fillStyle</span>; <span class="hljs-keyword">if</span> (<span class="hljs-title function_">isa_obj</span>(stroke) && stroke.<span class="hljs-property">name</span> === myname) state.<span class="hljs-property">strokeStyle</span> = state.<span class="hljs-property">defs</span>.<span class="hljs-property">strokeStyle</span>; <span class="hljs-keyword">if</span> (<span class="hljs-title function_">isa_obj</span>(shadow) && shadow.<span class="hljs-property">name</span> === myname) state.<span class="hljs-property">shadowColor</span> = state.<span class="hljs-property">defs</span>.<span class="hljs-property">shadowColor</span>; } });</pre></div></div> </li> <li id="section-23"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-23">§</a> </div> <p>Remove style from the Scrawl-canvas library</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">deregister</span>(); <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>; };</pre></div></div> </li> <li id="section-24"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-24">§</a> </div> <h4 id="get-set-deltaset">Get, Set, deltaSet</h4> </div> </li> <li id="section-25"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-25">§</a> </div> <p><code>get</code> - overrides function in mixin/base.js</p> </div> <div class="content"><div class='highlight'><pre>P.<span class="hljs-property">get</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-keyword">if</span> (!<span class="hljs-title function_">xt</span>(item)) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">getCurrentColor</span>(); } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (item.<span class="hljs-property">toFixed</span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">getRangeColor</span>(item); } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (item === <span class="hljs-string">'min'</span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">getMinimumColor</span>(); } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (item === <span class="hljs-string">'max'</span>) { <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">getMaximumColor</span>(); } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (item === <span class="hljs-string">'random'</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">generateRandomColor</span>(); <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">getCurrentColor</span>(); } <span class="hljs-keyword">else</span>{ <span class="hljs-keyword">let</span> getter = <span class="hljs-variable language_">this</span>.<span class="hljs-property">getters</span>[item]; <span class="hljs-keyword">if</span> (getter) <span class="hljs-keyword">return</span> getter.<span class="hljs-title function_">call</span>(<span class="hljs-variable language_">this</span>); <span class="hljs-keyword">else</span> { <span class="hljs-keyword">let</span> def = <span class="hljs-variable language_">this</span>.<span class="hljs-property">defs</span>[item]; <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> def != <span class="hljs-string">'undefined'</span>) { <span class="hljs-keyword">let</span> val = <span class="hljs-variable language_">this</span>[item]; <span class="hljs-keyword">return</span> (<span class="hljs-keyword">typeof</span> val != <span class="hljs-string">'undefined'</span>) ? val : def; } <span class="hljs-keyword">return</span> undef; } } };</pre></div></div> </li> <li id="section-26"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-26">§</a> </div> <p><code>set</code> - overrides function in mixin/base.js - see above for the additional attributes the set object argument can use.</p> </div> <div class="content"><div class='highlight'><pre>P.<span class="hljs-property">set</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">items = Ωempty</span>) { <span class="hljs-keyword">const</span> keys = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">keys</span>(items), keysLen = keys.<span class="hljs-property">length</span>; <span class="hljs-keyword">if</span> (keysLen) { <span class="hljs-keyword">const</span> setters = <span class="hljs-variable language_">this</span>.<span class="hljs-property">setters</span>, defs = <span class="hljs-variable language_">this</span>.<span class="hljs-property">defs</span>; <span class="hljs-keyword">let</span> predefined, i, iz, key, value; <span class="hljs-keyword">for</span> (i = <span class="hljs-number">0</span>; i < keysLen; i++) { key = keys[i]; value = items[key]; <span class="hljs-keyword">if</span> (key && key !== <span class="hljs-string">'name'</span> && value != <span class="hljs-literal">null</span>) { predefined = setters[key]; <span class="hljs-keyword">if</span> (predefined) predefined.<span class="hljs-title function_">call</span>(<span class="hljs-variable language_">this</span>, value); <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> defs[key] !== <span class="hljs-string">'undefined'</span>) <span class="hljs-variable language_">this</span>[key] = value; } } <span class="hljs-keyword">if</span> (items.<span class="hljs-property">random</span>) <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">generateRandomColor</span>(); } <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>; };</pre></div></div> </li> <li id="section-27"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-27">§</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-28"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-28">§</a> </div> <p>The <code>color</code>, <code>minimumColor</code> and <code>maximumColor</code> functions take in a CSS color String and converts it into a set of arrays containing data relevant to various color spaces. <strong>Note that browsers vary in the range of color spaces they support.</strong></p> <ul> <li>Widely supported: various RGB space color Strings - keywords, hex values, <code>rgb()</code>, <code>rgba()</code></li> <li>Widely supported: HSL space color Strings - <code>hsl()</code>, <code>hsla()</code></li> <li>Valid, but poorly supported: HWB, LAB, LCH, OKLAB, OKLCH color spaces - <code>hwb()</code>, <code>lab()</code>, <code>lch()</code>, <code>oklab()</code>, <code>oklch()</code></li> <li>Not valid or supported: XYZ color space - <code>xyz()</code> - used internally to convert between RGB and LAB spaces</li> </ul> <p>These setter functions have complementary Color object functions: <code>setColor</code>, <code>setMinimumColor</code>, <code>setMaximumColor</code></p> </div> <div class="content"><div class='highlight'><pre>S.<span class="hljs-property">color</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">convert</span>(item); }; P.<span class="hljs-property">setColor</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">convert</span>(item); <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>; }; S.<span class="hljs-property">minimumColor</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">convert</span>(item, <span class="hljs-string">'_min'</span>); }; P.<span class="hljs-property">setMinimumColor</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">convert</span>(item, <span class="hljs-string">'_min'</span>); <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>; }; S.<span class="hljs-property">maximumColor</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">convert</span>(item, <span class="hljs-string">'_max'</span>); }; P.<span class="hljs-property">setMaximumColor</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">convert</span>(item, <span class="hljs-string">'_max'</span>); <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>; };</pre></div></div> </li> <li id="section-29"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-29">§</a> </div> <p><code>easing</code> (and its complementary Color object functions: <code>setEasing</code>) - we can apply easing functions to colors, for instance when invoking the Color object’s <code>getRangeColor()</code> function to return the most appropriate color between the Color object’s minimum and maximum color values</p> <ul> <li>Can accept a String value identifying an SC pre-defined easing function (default: <code>linear</code>)</li> <li>Can also accept a function accepting a single Number argument (a value between 0-1) and returning an eased Number (again, between 0-1)</li> </ul> </div> <div class="content"><div class='highlight'><pre>S.<span class="hljs-property">easing</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params">item</span>) { <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setEasingHelper</span>(item); }; S.<span class="hljs-property">easingFunction</span> = S.<span class="hljs-property">easing</span>; P.<span class="hljs-property">setEasi