• Jump To … +
    ./source/core/animationloop.js ./source/core/component.js ./source/core/document.js ./source/core/events.js ./source/core/init.js ./source/core/library.js ./source/core/userInteraction.js ./source/core/utilities.js ./source/factory/action.js ./source/factory/anchor.js ./source/factory/animation.js ./source/factory/bezier.js ./source/factory/block.js ./source/factory/canvas.js ./source/factory/cell.js ./source/factory/cog.js ./source/factory/color.js ./source/factory/coordinate.js ./source/factory/element.js ./source/factory/emitter.js ./source/factory/filter.js ./source/factory/fontAttributes.js ./source/factory/gradient.js ./source/factory/grid.js ./source/factory/group.js ./source/factory/imageAsset.js ./source/factory/line.js ./source/factory/loom.js ./source/factory/mesh.js ./source/factory/net.js ./source/factory/noise.js ./source/factory/oval.js ./source/factory/palette.js ./source/factory/particle.js ./source/factory/particleForce.js ./source/factory/particleHistory.js ./source/factory/particleSpring.js ./source/factory/particleWorld.js ./source/factory/pattern.js ./source/factory/phrase.js ./source/factory/picture.js ./source/factory/polygon.js ./source/factory/polyline.js ./source/factory/quadratic.js ./source/factory/quaternion.js ./source/factory/radialGradient.js ./source/factory/rectangle.js ./source/factory/renderAnimation.js ./source/factory/shape.js ./source/factory/spiral.js ./source/factory/spriteAsset.js ./source/factory/stack.js ./source/factory/star.js ./source/factory/state.js ./source/factory/tetragon.js ./source/factory/ticker.js ./source/factory/tracer.js ./source/factory/tween.js ./source/factory/unstackedElement.js ./source/factory/vector.js ./source/factory/videoAsset.js ./source/factory/wheel.js ./source/mixin/anchor.js ./source/mixin/asset.js ./source/mixin/assetConsumer.js ./source/mixin/base.js ./source/mixin/cascade.js ./source/mixin/delta.js ./source/mixin/displayShape.js ./source/mixin/dom.js ./source/mixin/entity.js ./source/mixin/filter.js ./source/mixin/mimic.js ./source/mixin/path.js ./source/mixin/pattern.js ./source/mixin/pivot.js ./source/mixin/position.js ./source/mixin/shapeBasic.js ./source/mixin/shapeCurve.js ./source/mixin/shapePathCalculation.js ./source/mixin/styles.js ./source/mixin/tween.js ./source/worker/filter-string.js ./source/worker/filter.js
  • ¶

    Cog factory

    A factory for generating star 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:

    • Positioning functionality for the entity is supplied by the position mixin, while rendering functionality comes from the entity mixin.
    • Dimensions, however, have little meaning for path-defined entitys - their width and height are determined by their SVG path data Strings; use scale instead.
    • Path-defined entitys can use CSS color Strings for their fillStyle and strokeStyle values, alongside Gradient, RadialGradient, Color and Pattern objects.
    • They will also accept Filter objects.
    • They can use Anchor objects for user navigation.
    • They can be rendered to the canvas by including them in a Cell object’s Group.
    • They can be animated directly, or using delta animation, or act as the target for Tween animations.
    • Path-defined entitys can be cloned, and killed.
  • ¶

    Using path-defined entitys as Scrawl-canvas paths

    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:

    • To enable a path-defined entity to be used as a path by other artefacts, set its useAsPath flag to true.
    • The artefact can then set its path attribute to the path-defined entity’s name-String (or the entity itself), and set its lockTo Array values to "path".
    • We position the artefact by setting its 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.
    • Path-defined entitys can use other path-defined entitys as a path.
    • Phrase entitys can use a path to position their text block; they can also use a path to position each letter individually along the path.
    • Artefacts (and letters) can be rotated so that they match the rotation at that point along the path - tangential rotation by setting their addPathRotation flag to true.
    • Animate an artefact along the path by either using the artefact’s delta object, or triggering a Tween to perform the movement.
  • ¶

    Demos:

    • Canvas-011 - Shape entity (make, clone, method); drag and drop shape entitys
    • Canvas-012 - Shape entity position; shape entity as a path for other artefacts to follow
    • Canvas-013 - Path-defined entitys: oval, rectangle, line, quadratic, bezier, tetragon, polygon, star, spiral, cog
    • Canvas-014 - Line, quadratic and bezier entitys - control lock alternatives
    • Canvas-018 - Phrase entity - text along a path
    • Canvas-024 - Loom entity functionality
    • Canvas-030 - Polyline entity functionality
    • Canvas-038 - Responsive Shape-based entitys
    • DOM-015 - Use stacked DOM artefact corners as pivot points
    • Component-004 - Scrawl-canvas packets - save and load a range of different entitys
  • ¶

    Imports

    import { constructors } from '../core/library.js';
import { mergeOver } from '../core/utilities.js';

import { requestVector, releaseVector } from './vector.js';

import baseMix from '../mixin/base.js';
import shapeMix from '../mixin/shapeBasic.js';
  • ¶

    Cog constructor

    const Cog = function (items = {}) {

    this.shapeInit(items);
    return this;
};
  • ¶

    Cog prototype

    let P = Cog.prototype = Object.create(Object.prototype);
P.type = 'Cog';
P.lib = 'entity';
P.isArtefact = true;
P.isAsset = false;
  • ¶

    Mixins

    • base
    • shapeBasic
    P = baseMix(P);
P = shapeMix(P);
  • ¶

    Cog attributes

    • Attributes defined in the base mixin: name.
    • Attributes defined in the position mixin: group, visibility, order, 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.
    • Attributes defined in the delta mixin: delta, noDeltaUpdates.
    • Attributes defined in the pivot mixin: pivot, pivotCorner, addPivotHandle, addPivotOffset, addPivotRotation.
    • Attributes defined in the mimic mixin: mimic, useMimicDimensions, useMimicScale, useMimicStart, useMimicHandle, useMimicOffset, useMimicRotation, useMimicFlip, addOwnDimensionsToMimic, addOwnScaleToMimic, addOwnStartToMimic, addOwnHandleToMimic, addOwnOffsetToMimic, addOwnRotationToMimic.
    • Attributes defined in the path mixin: path, pathPosition, addPathHandle, addPathOffset, addPathRotation, constantPathSpeed.
    • Attributes defined in the entity mixin: 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.
    • Attributes defined in the anchor mixin: anchor.
    • Attributes defined in the filter mixin: filters, isStencil.
    • Attributes defined in the shapeBasic mixin: species, useAsPath, precision, pathDefinition, showBoundingBox, boundingBoxColor, minimumBoundingBoxDimensions, constantPathSpeed.
    let defaultAttributes = {

    outerRadius: 0,
    innerRadius: 0,
    outerControlsDistance: 0,
    innerControlsDistance: 0,
    outerControlsOffset: 0,
    innerControlsOffset: 0,
    points: 0,
    twist: 0,
    curve: 'bezier',
};
P.defs = mergeOver(P.defs, defaultAttributes);
  • ¶

    Packet management

    No additional packet functionality required

  • ¶

    Clone management

    No additional clone functionality required

  • ¶

    Kill management

    No additional kill functionality required

  • ¶

    Get, Set, deltaSet

    let S = P.setters,
    D = P.deltaSetters;
  • ¶

    outerRadius, innerRadius

    S.outerRadius = function (item) {

    this.outerRadius = item;
    this.updateDirty();
};
D.outerRadius = function (item) {

    this.outerRadius += item;
    this.updateDirty();
};
S.innerRadius = function (item) {

    this.innerRadius = item;
    this.updateDirty();
};
D.innerRadius = function (item) {

    this.innerRadius += item;
    this.updateDirty();
};
  • ¶

    outerControlsDistance, innerControlsDistance

    S.outerControlsDistance = function (item) {

    this.outerControlsDistance = item;
    this.updateDirty();
};
D.outerControlsDistance = function (item) {

    this.outerControlsDistance += item;
    this.updateDirty();
};
S.innerControlsDistance = function (item) {

    this.innerControlsDistance = item;
    this.updateDirty();
};
D.innerControlsDistance = function (item) {

    this.innerControlsDistance += item;
    this.updateDirty();
};
  • ¶

    outerControlsOffset, innerControlsOffset

    S.outerControlsOffset = function (item) {

    this.outerControlsOffset = item;
    this.updateDirty();
};
D.outerControlsOffset = function (item) {

    this.outerControlsOffset += item;
    this.updateDirty();
};
S.innerControlsOffset = function (item) {

    this.innerControlsOffset = item;
    this.updateDirty();
};
D.innerControlsOffset = function (item) {

    this.innerControlsOffset += item;
    this.updateDirty();
};
  • ¶

    points

    S.points = function (item) {

    this.points = item;
    this.updateDirty();
};
D.points = function (item) {

    this.points += item;
    this.updateDirty();
};
  • ¶

    twist

    S.twist = function (item) {

    this.twist = item;
    this.updateDirty();
};
D.twist = function (item) {

    this.twist += item;
    this.updateDirty();
};
  • ¶

    useBezierCurve

    S.curve = function (item) {

    if (item && ['line', 'quadratic', 'bezier'].indexOf(item) >= 0) {

        this.curve = item;
        this.updateDirty();
    }
    else {

        this.curve = 'bezier';
        this.updateDirty();
    }
};
  • ¶

    Prototype functions

  • ¶

    cleanSpecies - internal helper function - called by prepareStamp

    P.cleanSpecies = function () {

    this.dirtySpecies = false;

    let p = 'M0,0';
    p = this.makeCogPath();

    this.pathDefinition = p;
};
  • ¶

    makeCogPath - internal helper function - called by cleanSpecies

    P.makeCogPath = function () {

    let {points, twist, outerRadius, innerRadius, outerControlsDistance, innerControlsDistance, outerControlsOffset, innerControlsOffset, curve} = this;

    let turn = 360 / points,
        xPts = [],
        currentTrailX, currentTrailY, currentPointX, currentPointY, currentLeadX, currentLeadY, 
        controlStartX, controlStartY, deltaX, deltaY, controlEndX, controlEndY,
        myMin, myXoffset, myYoffset, i,
        myPath = '';

    if (outerRadius.substring || innerRadius.substring || outerControlsDistance.substring || innerControlsDistance.substring || outerControlsOffset.substring || innerControlsOffset.substring) {

        let host = this.getHost();

        if (host) {

            let [hW, hH] = host.currentDimensions;

            outerRadius = (outerRadius.substring) ? (parseFloat(outerRadius) / 100) * hW : outerRadius;
            innerRadius = (innerRadius.substring) ? (parseFloat(innerRadius) / 100) * hW : innerRadius;
            outerControlsDistance = (outerControlsDistance.substring) ? (parseFloat(outerControlsDistance) / 100) * hW : outerControlsDistance;
            innerControlsDistance = (innerControlsDistance.substring) ? (parseFloat(innerControlsDistance) / 100) * hW : innerControlsDistance;
            outerControlsOffset = (outerControlsOffset.substring) ? (parseFloat(outerControlsOffset) / 100) * hW : outerControlsOffset;
            innerControlsOffset = (innerControlsOffset.substring) ? (parseFloat(innerControlsOffset) / 100) * hW : innerControlsOffset;
        } 
    }

    let outerPoint = requestVector({x: 0, y: -outerRadius}),
        innerPoint = requestVector({x: 0, y: -innerRadius}),
        outerPointLead = requestVector({x: outerControlsDistance + outerControlsOffset, y: -outerRadius}),
        innerPointTrail = requestVector({x: -innerControlsDistance + innerControlsOffset, y: -innerRadius}),
        innerPointLead = requestVector({x: innerControlsDistance + innerControlsOffset, y: -innerRadius}),
        outerPointTrail = requestVector({x: -outerControlsDistance + outerControlsOffset, y: -outerRadius});

    innerPointTrail.rotate(-turn/2);
    innerPointTrail.rotate(twist);
    innerPoint.rotate(-turn/2);
    innerPoint.rotate(twist);
    innerPointLead.rotate(-turn/2);
    innerPointLead.rotate(twist);

    currentPointX = outerPoint.x;
    currentPointY = outerPoint.y;

    xPts.push(currentPointX);

    if (curve == 'bezier') {

        for (i = 0; i < points; i++) {

            deltaX = parseFloat((outerPointLead.x - currentPointX).toFixed(1));
            deltaY = parseFloat((outerPointLead.y - currentPointY).toFixed(1));
            myPath += `${deltaX},${deltaY} `;

            innerPointTrail.rotate(turn);
            innerPoint.rotate(turn);
            innerPointLead.rotate(turn);

            deltaX = parseFloat((innerPointTrail.x - currentPointX).toFixed(1));
            deltaY = parseFloat((innerPointTrail.y - currentPointY).toFixed(1));
            myPath += `${deltaX},${deltaY} `;

            deltaX = parseFloat((innerPoint.x - currentPointX).toFixed(1));
            currentPointX += deltaX;
            xPts.push(currentPointX);
            deltaY = parseFloat((innerPoint.y - currentPointY).toFixed(1));
            currentPointY += deltaY;
            myPath += `${deltaX},${deltaY} `;

            deltaX = parseFloat((innerPointLead.x - currentPointX).toFixed(1));
            deltaY = parseFloat((innerPointLead.y - currentPointY).toFixed(1));
            myPath += `${deltaX},${deltaY} `;

            outerPointTrail.rotate(turn);
            outerPoint.rotate(turn);
            outerPointLead.rotate(turn);

            deltaX = parseFloat((outerPointTrail.x - currentPointX).toFixed(1));
            deltaY = parseFloat((outerPointTrail.y - currentPointY).toFixed(1));
            myPath += `${deltaX},${deltaY} `;

            deltaX = parseFloat((outerPoint.x - currentPointX).toFixed(1));
            currentPointX += deltaX;
            xPts.push(currentPointX);
            deltaY = parseFloat((outerPoint.y - currentPointY).toFixed(1));
            currentPointY += deltaY;
            myPath += `${deltaX},${deltaY} `;
        }
    }
    else if (curve == 'quadratic') {

        for (i = 0; i < points; i++) {

            deltaX = parseFloat((outerPointLead.x - currentPointX).toFixed(1));
            deltaY = parseFloat((outerPointLead.y - currentPointY).toFixed(1));
            myPath += `${deltaX},${deltaY} `;

            innerPoint.rotate(turn);
            innerPointLead.rotate(turn);

            deltaX = parseFloat((innerPoint.x - currentPointX).toFixed(1));
            currentPointX += deltaX;
            xPts.push(currentPointX);
            deltaY = parseFloat((innerPoint.y - currentPointY).toFixed(1));
            currentPointY += deltaY;
            myPath += `${deltaX},${deltaY} `;

            deltaX = parseFloat((innerPointLead.x - currentPointX).toFixed(1));
            deltaY = parseFloat((innerPointLead.y - currentPointY).toFixed(1));
            myPath += `${deltaX},${deltaY} `;

            outerPoint.rotate(turn);
            outerPointLead.rotate(turn);

            deltaX = parseFloat((outerPoint.x - currentPointX).toFixed(1));
            currentPointX += deltaX;
            xPts.push(currentPointX);
            deltaY = parseFloat((outerPoint.y - currentPointY).toFixed(1));
            currentPointY += deltaY;
            myPath += `${deltaX},${deltaY} `;
        }
    }
    else {

        for (i = 0; i < points; i++) {

            deltaX = parseFloat((outerPointLead.x - currentPointX).toFixed(1));
            currentPointX += deltaX;
            xPts.push(currentPointX);
            deltaY = parseFloat((outerPointLead.y - currentPointY).toFixed(1));
            currentPointY += deltaY;
            myPath += `${deltaX},${deltaY} `;

            innerPointTrail.rotate(turn);
            innerPoint.rotate(turn);
            innerPointLead.rotate(turn);

            deltaX = parseFloat((innerPointTrail.x - currentPointX).toFixed(1));
            currentPointX += deltaX;
            xPts.push(currentPointX);
            deltaY = parseFloat((innerPointTrail.y - currentPointY).toFixed(1));
            currentPointY += deltaY;
            myPath += `${deltaX},${deltaY} `;

            deltaX = parseFloat((innerPoint.x - currentPointX).toFixed(1));
            currentPointX += deltaX;
            xPts.push(currentPointX);
            deltaY = parseFloat((innerPoint.y - currentPointY).toFixed(1));
            currentPointY += deltaY;
            myPath += `${deltaX},${deltaY} `;

            deltaX = parseFloat((innerPointLead.x - currentPointX).toFixed(1));
            currentPointX += deltaX;
            xPts.push(currentPointX);
            deltaY = parseFloat((innerPointLead.y - currentPointY).toFixed(1));
            currentPointY += deltaY;
            myPath += `${deltaX},${deltaY} `;

            outerPointTrail.rotate(turn);
            outerPoint.rotate(turn);
            outerPointLead.rotate(turn);

            deltaX = parseFloat((outerPointTrail.x - currentPointX).toFixed(1));
            currentPointX += deltaX;
            xPts.push(currentPointX);
            deltaY = parseFloat((outerPointTrail.y - currentPointY).toFixed(1));
            currentPointY += deltaY;
            myPath += `${deltaX},${deltaY} `;

            deltaX = parseFloat((outerPoint.x - currentPointX).toFixed(1));
            currentPointX += deltaX;
            xPts.push(currentPointX);
            deltaY = parseFloat((outerPoint.y - currentPointY).toFixed(1));
            currentPointY += deltaY;
            myPath += `${deltaX},${deltaY} `;
        }
    }
    releaseVector(outerPoint, outerPointLead, outerPointTrail, innerPoint, innerPointLead, innerPointTrail);

    myMin = Math.min(...xPts);
    myXoffset = Math.abs(myMin).toFixed(1);

    if (curve == 'bezier') return `m${myXoffset},0c${myPath}z`;
    if (curve == 'quadratic') return `m${myXoffset},0q${myPath}z`;
    return `m${myXoffset},0l${myPath}z`;
};
  • ¶

    Factories

  • ¶
    makeStar

    Accepts argument with attributes:

    • outerRadius (required) - the outer radius representing the distance between the center of the Shape and the tips of its (acute angle) points.
    • innerRadius (required) - the inner radius representing the distance between the center of the Shape and the obtuse angle at the valley between the tips of its (acute angle) points.
    • … where these radius values are supplied as %Strings, they are calculated as relative to the canvas/cell width value.
    • outerControlsDistance, innerControlsDistance - a Number value measuring the distance from each point to its leading and trailing control points - use this to create more square pegs (useBezierCurve: false) or a more curved tooth outline
    • outerControlsOffset, innerControlsOffset - a Number value which can be used to offset the control points so that the trailing control point is more distant than the leading control point (or vice versa)
    • points (required) - a positive integer Number representing the number of points the star will have.
    • twist - a float Number representing the degrees by which the star’s second radius will be rotated out of line from its first radius; the default value 0 will produce a star with all of its sides of equal length and the star’s valleys falling midway between its connecting points.
    • curve - String: one of ‘bezier’ (default); ‘quadratic’; or ‘line’ - when this flag is set, the entity will be built using the appropriate curve.
    • Note that the use of inner and outer above is purely descriptive: innerRadius can be larger than outerRadius
    scrawl.makeCog({

  name: 'smooth-cog',
  startX: 20,
  startY: 1980,
  outerRadius: 80,
  innerRadius: 60,
  outerControlsDistance: 10,
  innerControlsDistance: 6,
  points: 12,
  fillStyle: 'coral',
  lineWidth: 2,
  method: 'fillAndDraw',
});
    const makeCog = function (items = {}) {

    items.species = 'cog';
    return new Cog(items);
};

constructors.Cog = Cog;
  • ¶

    Exports

    export {
    makeCog,
};