A factory for generating ‘degenerate’ spiral shape-based entitys
Path-defined entitys represent a diverse range of shapes rendered onto a DOM <canvas> element using the Canvas API’s Path2D interface. They use the shapeBasic and shapePathCalculation (some also use shapeCurve) mixins to define much of their functionality.
All path-defined entitys can be positioned, cloned, filtered etc:
scale instead.A path is a track - straight, or curved, or as complex as required - placed across a container which artefacts can use as a source of their positioning data. We can animate an artifact to move along the path:
useAsPath flag to true.path attribute to the path-defined entity’s name-String (or the entity itself), and set its lockTo Array values to "path".pathPosition attribute to a float Number value between 0.0 - 1.0, with 0 being the start of the path, and 1 being its end.addPathRotation flag to true.delta object, or triggering a Tween to perform the movement.import { constructors } from '../core/library.js';
import { mergeOver, Ωempty } from '../core/utilities.js';
import { requestCoordinate, releaseCoordinate } from './coordinate.js';
import baseMix from '../mixin/base.js';
import shapeMix from '../mixin/shapeBasic.js';const LineSpiral = function (items = Ωempty) {
this.shapeInit(items);
return this;
};let P = LineSpiral.prototype = Object.create(Object.prototype);
P.type = 'LineSpiral';
P.lib = 'entity';
P.isArtefact = true;
P.isAsset = false;P = baseMix(P);
P = shapeMix(P);let defaultAttributes = {
startRadius: 0,
radiusIncrement: 0.1,
radiusIncrementAdjust: 1,
startAngle: 0,
angleIncrement: 5,
angleIncrementAdjust: 1,
stepLimit: 100,
};
P.defs = mergeOver(P.defs, defaultAttributes);let S = P.setters,
D = P.deltaSetters;startRadius
S.startRadius = function (item) {
this.startRadius = item;
this.updateDirty();
};
D.startRadius = function (item) {
this.startRadius += item;
this.updateDirty();
};radiusIncrement
S.radiusIncrement = function (item) {
this.radiusIncrement = item;
this.updateDirty();
};
D.radiusIncrement = function (item) {
this.radiusIncrement += item;
this.updateDirty();
};radiusIncrementAdjust
S.radiusIncrementAdjust = function (item) {
this.radiusIncrementAdjust = item;
this.updateDirty();
};
D.radiusIncrementAdjust = function (item) {
this.radiusIncrementAdjust += item;
this.updateDirty();
};startAngle
S.startAngle = function (item) {
this.startAngle = item;
this.updateDirty();
};
D.startAngle = function (item) {
this.startAngle += item;
this.updateDirty();
};angleIncrement
S.angleIncrement = function (item) {
this.angleIncrement = item;
this.updateDirty();
};
D.angleIncrement = function (item) {
this.angleIncrement += item;
this.updateDirty();
};angleIncrementAdjust
S.angleIncrementAdjust = function (item) {
this.angleIncrementAdjust = item;
this.updateDirty();
};
D.angleIncrementAdjust = function (item) {
this.angleIncrementAdjust += item;
this.updateDirty();
};stepLimit
S.stepLimit = function (item) {
this.stepLimit = item;
this.updateDirty();
};
D.stepLimit = function (item) {
this.stepLimit += item;
this.updateDirty();
};cleanSpecies - internal helper function - called by prepareStamp
P.cleanSpecies = function () {
this.dirtySpecies = false;
let p = 'm0,0';
p = this.makeLineSpiralPath();
this.pathDefinition = p;
};makeLineSpiralPath - internal helper function - called by cleanSpecies
P.makeLineSpiralPath = function () {
let path = 'm0,0 m';
let {startRadius, radiusIncrement, radiusIncrementAdjust, startAngle, angleIncrement, angleIncrementAdjust, stepLimit} = this;
let coord = requestCoordinate();
let currentAngle = startAngle,
currentAngleIncrement = angleIncrement,
currentRadius = startRadius,
currentRadiusIncrement = radiusIncrement,
counter = 0;
coord.setFromArray([0, currentRadius]).rotate(currentAngle);
path += `${coord[0].toFixed(1)},${coord[1].toFixed(1)}l`;
while (counter < stepLimit) {
counter ++;
currentAngleIncrement *= angleIncrementAdjust;
currentAngle += currentAngleIncrement;
currentRadiusIncrement *= radiusIncrementAdjust;
currentRadius += currentRadiusIncrement;
coord.setFromArray([0, currentRadius]).rotate(currentAngle);
path += `${coord[0].toFixed(1)},${coord[1].toFixed(1)} `;
}
releaseCoordinate(coord);
return path;
};
P.calculateLocalPathAdditionalActions = function () {
let [x, y, w, h] = this.localBox,
scale = this.scale;
this.pathDefinition = this.pathDefinition.replace('m0,0 ', `m${-x / scale},${-y / scale}`);
this.pathCalculatedOnce = false;ALWAYS, when invoking calculateLocalPath from calculateLocalPathAdditionalActions, include the second argument, set to true! Failure to do this leads to an infinite loop which will make your machine weep.
this.calculateLocalPath(this.pathDefinition, true);
};A spiral drawn from an inner-radius outwards by a given number of loops, with the distance between each loop determined by a given increment. Accepts argument with attributes:
scrawl.makeLineSpiral({
name: 'myLineSpiral',
strokeStyle: 'darkgreen',
method: 'draw',
startX: 50,
startY: 100,
loops: 5,
loopIncrement: 0.8,
drawFromLoop: 1,
});
const makeLineSpiral = function (items) {
if (!items) return false;
items.species = 'linespiral';
return new LineSpiral(items);
};
constructors.LineSpiral = LineSpiral;export {
makeLineSpiral,
};