scrawl-canvas

<!DOCTYPE html> <html> <head> <title>Crescent 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="crescent-factory">Crescent factory</h1> Crescent entitys are formed by the intersection of two circles, rendered onto a DOM <canvas> element using the Canvas 2D API’s <a href="https://developer.mozilla.org/en-US/docs/Web/API/Path2D">Path2D interface</a> - specifically the arc() method. <ul> <li>Positioning functionality for the Crescent is supplied by the position mixin, while rendering functionality comes from the entity mixin. </li> <li>Crescent dimensions are tied closely to its radius attribute; relative dimensions are calculated using the Crescent’s Cell container’s width.</li> <li>Crescents can use CSS color Strings for their fillStyle and strokeStyle values, alongside Gradient, RadialGradient, Color and Pattern objects. </li> <li>They will also accept Filter objects.</li> <li>They can use Anchor objects for user navigation. </li> <li>They can be rendered to the canvas by including them in a Cell object’s Group. </li> <li>They can be animated directly, or using delta animation, or act as the target for Tween animations.</li> <li>Crescents can be cloned, and killed.</li> </ul> </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-055.html">Canvas-055</a> - TODO</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>import { constructors, radian } from '../core/library.js'; import { mergeOver, xt, xto, xta, isa_number, Ωempty } from '../core/utilities.js'; import { requestCoordinate, releaseCoordinate } from './coordinate.js'; import { requestCell, releaseCell } from './cell.js'; import baseMix from '../mixin/base.js'; import entityMix from '../mixin/entity.js';</pre></div></div> </li> <li id="section-4"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-4">§</a> </div> ensureFloat - return the value provided as a floating point number of given precision; return 0 if not a number </div> <div class="content"><div class='highlight'><pre>const ensureFloat = (val, precision) => { val = parseFloat(val); if (!isa_number(val)) val = 0; if (!isa_number(precision)) precision = 0; return parseFloat(val.toFixed(precision)); };</pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-5">§</a> </div> <h4 id="crescent-constructor">Crescent constructor</h4> </div> <div class="content"><div class='highlight'><pre>const Crescent = function (items = Ωempty) { if (!xto(items.dimensions, items.width, items.height, items.radius)) items.radius = 5; this.entityInit(items); return this; };</pre></div></div> </li> <li id="section-6"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-6">§</a> </div> <h4 id="crescent-prototype">Crescent prototype</h4> </div> <div class="content"><div class='highlight'><pre>let P = Crescent.prototype = Object.create(Object.prototype); P.type = 'Crescent'; P.lib = 'entity'; P.isArtefact = true; P.isAsset = false;</pre></div></div> </li> <li id="section-7"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-7">§</a> </div> <h4 id="mixins">Mixins</h4> <ul> <li><a href="../mixin/base.html">base</a></li> <li><a href="../mixin/entity.html">entity</a></li> </ul> </div> <div class="content"><div class='highlight'><pre>P = baseMix(P); P = entityMix(P);</pre></div></div> </li> <li id="section-8"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-8">§</a> </div> <h4 id="crescent-attributes">Crescent attributes</h4> <ul> <li>Attributes defined in the <a href="../mixin/base.html">base mixin</a>: name.</li> <li>Attributes defined in the <a href="../mixin/position.html">position mixin</a>: group, visibility, order, calculateOrder, stampOrder, start, startX, startY, handle, handleX, handleY, offset, offsetX, offsetY, dimensions, width, height, pivoted, mimicked, lockTo, lockXTo, lockYTo, scale, roll, noUserInteraction, noPositionDependencies, noCanvasEngineUpdates, noFilters, noPathUpdates, purge, bringToFrontOnDrag.</li> <li>Attributes defined in the <a href="../mixin/delta.html">delta mixin</a>: delta, noDeltaUpdates.</li> <li>Attributes defined in the <a href="../mixin/pivot.html">pivot mixin</a>: pivot, pivotCorner, addPivotHandle, addPivotOffset, addPivotRotation.</li> <li>Attributes defined in the <a href="../mixin/mimic.html">mimic mixin</a>: mimic, useMimicDimensions, useMimicScale, useMimicStart, useMimicHandle, useMimicOffset, useMimicRotation, useMimicFlip, addOwnDimensionsToMimic, addOwnScaleToMimic, addOwnStartToMimic, addOwnHandleToMimic, addOwnOffsetToMimic, addOwnRotationToMimic.</li> <li>Attributes defined in the <a href="../mixin/path.html">path mixin</a>: path, pathPosition, addPathHandle, addPathOffset, addPathRotation, constantPathSpeed.</li> <li>Attributes defined in the <a href="../mixin/entity.html">entity mixin</a>: method, pathObject, winding, flipReverse, flipUpend, scaleOutline, lockFillStyleToEntity, lockStrokeStyleToEntity, onEnter, onLeave, onDown, onUp, fillStyle, strokeStyle, globalAlpha, globalCompositeOperation, lineWidth, lineCap, lineJoin, lineDash, lineDashOffset, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, filter.</li> <li>Attributes defined in the <a href="../mixin/anchor.html">anchor mixin</a>: anchor.</li> <li>Attributes defined in the <a href="../mixin/filter.html">filter mixin</a>: filters, isStencil.</li> </ul> </div> <div class="content"><div class='highlight'><pre>let defaultAttributes = {</pre></div></div> </li> <li id="section-9"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-9">§</a> </div> outerRadius, innerRadius - the circles’ radius measured in Number pixels, or as a String% - <code>'10%'</code> - of the Cell’s width </div> <div class="content"><div class='highlight'><pre> outerRadius: 20, innerRadius: 10, displacement: 0, displayIntersect: false, }; P.defs = mergeOver(P.defs, defaultAttributes);</pre></div></div> </li> <li id="section-10"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-10">§</a> </div> <h4 id="packet-management">Packet management</h4> No additional packet functionality required </div> </li> <li id="section-11"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-11">§</a> </div> <h4 id="clone-management">Clone management</h4> No additional clone functionality required </div> </li> <li id="section-12"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-12">§</a> </div> <h4 id="kill-management">Kill management</h4> No additional kill functionality required </div> </li> <li id="section-13"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-13">§</a> </div> <h4 id="get-set-deltaset">Get, Set, deltaSet</h4> </div> <div class="content"><div class='highlight'><pre>let G = P.getters, S = P.setters, D = P.deltaSetters;</pre></div></div> </li> <li id="section-14"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-14">§</a> </div> width and height (and dimensions) values are largely irrelevant to Crescent entitys; they get used internally purely as part of the Display cycle stamp functionality. </div> </li> <li id="section-15"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-15">§</a> </div> If they are used to (delta)set the entity’s values then outerRadius will be set to the supplied width value with String% values calculated from the entity’s host’s width, while innerRadius will be set to the supplied height value with String% values calculated from the entity’s host’s height </div> <div class="content"><div class='highlight'><pre>S.outerRadius = function (val) { if (val != null) { this.outerRadius = val; this.dirtyDimensions = true; this.dirtyFilterIdentifier = true; } }; D.outerRadius = function (val) { if (val != null) { this.outerRadius = addStrings(this.outerRadius, val); this.dirtyDimensions = true; this.dirtyFilterIdentifier = true; } }; S.innerRadius = function (val) { if (val != null) { this.innerRadius = val; this.dirtyDimensions = true; this.dirtyFilterIdentifier = true; } }; D.innerRadius = function (val) { if (val != null) { this.innerRadius = addStrings(this.innerRadius, val); this.dirtyDimensions = true; this.dirtyFilterIdentifier = true; } }; S.width = S.outerRadius; D.width = D.outerRadius; S.height = S.innerRadius; D.height = D.innerRadius; S.displacement = function (val) { if (val != null && val.toFixed && val >= 0) { let d = val; if (d < 0) d = 0; this.displacement = d; this.dirtyDimensions = true; this.dirtyFilterIdentifier = true; } }; D.displacement = function (val) { if (val != null && val.toFixed) { let d = addStrings(this.displacement, val); if (d.toFixed && d < 0) d = 0; this.displacement = d; this.dirtyDimensions = true; this.dirtyFilterIdentifier = true; } }; S.displayIntersect = function (val) { this.displayIntersect = val; this.dirtyPathObject = true; this.dirtyFilterIdentifier = true; };</pre></div></div> </li> <li id="section-16"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-16">§</a> </div> <h4 id="prototype-functions">Prototype functions</h4> </div> </li> <li id="section-17"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-17">§</a> </div> Dimensions calculations - overwrites mixin/position.js function </div> <div class="content"><div class='highlight'><pre>P.cleanDimensionsAdditionalActions = function () { const { outerRadius:oR, innerRadius:iR, displacement:disp } = this; let host = this.getHost(), hostDims; if (host) hostDims = (host.currentDimensions) ? host.currentDimensions : [host.w, host.h]; else hostDims = [300, 150]; let [w, h] = hostDims; this.currentOuterRadius = (oR.substring) ? (parseFloat(oR) / 100) * w : oR; this.currentInnerRadius = (iR.substring) ? (parseFloat(iR) / 100) * h : iR; this.currentDisplacement = (disp.substring) ? (parseFloat(disp) / 100) * w : disp; this.currentDimensions[0] = this.currentDimensions[1] = this.currentOuterRadius * 2; this.dirtyPathObject = true; };</pre></div></div> </li> <li id="section-18"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-18">§</a> </div> <code>calculateInterception</code> - internal function to calculate how the two circles interact </div> <div class="content"><div class='highlight'><pre>P.calculateInterception = function () { if (!xta(this.currentOuterRadius, this.currentInnerRadius, this.currentDisplacement)) this.cleanDimensionsAdditionalActions(); const { currentOuterRadius:oR, currentInnerRadius:iR, currentDisplacement:disp } = this; this.outerCircleStart = 0; this.outerCircleEnd = 360 * radian; this.innerCircleStart = 0; this.innerCircleEnd = 360 * radian; this.drawOuterCircle = false; this.drawDonut = false; let dMax = oR + iR, dMin = oR - iR; let equalCircles = (!dMin) ? true : false; if (equalCircles && !disp) this.drawOuterCircle = true; else { if (disp >= dMax) this.drawOuterCircle = true; else if (disp < dMax && disp > dMin) { let cell = requestCell(); let {engine, element} = cell; let v = requestCoordinate(), a, b;</pre></div></div> </li> <li id="section-19"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-19">§</a> </div> Decided to calculate the start/end angles for each circle through brute force <ul> <li>Trigonometry is the proper answer, but I can’t get the equations to stay still and play nicely</li> <li>So instead we draw circles on a canvas and rotate a vector to see when it enters/leaves the circles</li> </ul> </div> <div class="content"><div class='highlight'><pre> element.width = element.width; engine.fillStyle = 'black'; engine.save(); engine.beginPath(); engine.arc(0, 0, oR, 0, Math.PI * 2); v.setFromArray([iR, 0]); for (a = 0; a < 360; a += 0.5) { v.rotate(0.5); if(engine.isPointInPath(v[0] + disp, v[1])) break; } engine.restore(); engine.save(); engine.beginPath(); engine.arc(disp, 0, iR, 0, Math.PI * 2); v.setFromArray([oR, 0]); for (b = 0; b < 360; b += 0.5) { v.rotate(0.5); if(!engine.isPointInPath(...v)) break; } engine.restore(); this.outerCircleStart = -b * radian; this.outerCircleEnd = b * radian; this.innerCircleStart = a * radian; this.innerCircleEnd = -a * radian; releaseCoordinate(v); releaseCell(cell); } else this.drawDonut = true; } };</pre></div></div> </li> <li id="section-20"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-20">§</a> </div> Calculate the Crescent entity’s Path2D object </div> <div class="content"><div class='highlight'><pre>P.cleanPathObject = function () { this.dirtyPathObject = false; if (!this.noPathUpdates || !this.pathObject) { this.calculateInterception(); let { currentStampHandlePosition:handle, currentScale:scale, currentOuterRadius:oR, currentInnerRadius:iR, outerCircleStart:ocs, outerCircleEnd:oce, innerCircleStart:ics, innerCircleEnd:ice, drawOuterCircle, currentDisplacement:disp, displayIntersect } = this; let p = this.pathObject = new Path2D(); oR *= scale; iR *= scale; disp *= scale; let x = oR - (handle[0] * scale), y = oR - (handle[1] * scale); if (drawOuterCircle) { p.arc(x, y, oR, ocs, oce); p.closePath(); this.pathObjectOuter = false; this.pathObjectInner = false; } else { let pOuter = this.pathObjectOuter = new Path2D(); let pInner = this.pathObjectInner = new Path2D(); if (displayIntersect) p.arc(x, y, oR, ocs, oce); else p.arc(x, y, oR, ocs, oce, true); p.arc(x + disp, y, iR, ics, ice); p.closePath(); pOuter.arc(x, y, oR, ocs, oce, true); pOuter.closePath(); pInner.<span cl