• Jump To … +
    ./source/asset-management/image-asset.js ./source/asset-management/noise-asset.js ./source/asset-management/raw-asset.js ./source/asset-management/reaction-diffusion-asset.js ./source/asset-management/sprite-asset.js ./source/asset-management/video-asset.js ./source/core/animation-loop.js ./source/core/display-cycle.js ./source/core/document.js ./source/core/events.js ./source/core/init.js ./source/core/library.js ./source/core/snippets.js ./source/core/user-interaction.js ./source/factory/action.js ./source/factory/anchor.js ./source/factory/animation.js ./source/factory/bezier.js ./source/factory/block.js ./source/factory/button.js ./source/factory/canvas.js ./source/factory/cell.js ./source/factory/cog.js ./source/factory/color.js ./source/factory/conic-gradient.js ./source/factory/crescent.js ./source/factory/element.js ./source/factory/emitter.js ./source/factory/enhanced-label.js ./source/factory/filter.js ./source/factory/gradient.js ./source/factory/grid.js ./source/factory/group.js ./source/factory/label.js ./source/factory/line-spiral.js ./source/factory/line.js ./source/factory/loom.js ./source/factory/mesh.js ./source/factory/net.js ./source/factory/oval.js ./source/factory/particle-force.js ./source/factory/particle-spring.js ./source/factory/particle-world.js ./source/factory/particle.js ./source/factory/pattern.js ./source/factory/picture.js ./source/factory/polygon.js ./source/factory/polyline.js ./source/factory/quadratic.js ./source/factory/radial-gradient.js ./source/factory/rectangle.js ./source/factory/render-animation.js ./source/factory/shape.js ./source/factory/spiral.js ./source/factory/stack.js ./source/factory/star.js ./source/factory/tetragon.js ./source/factory/ticker.js ./source/factory/tracer.js ./source/factory/tween.js ./source/factory/unstacked-element.js ./source/factory/wheel.js ./source/helper/array-pool.js ./source/helper/color-engine.js ./source/helper/document-root-elements.js ./source/helper/filter-engine-bluenoise-data.js ./source/helper/filter-engine.js ./source/helper/random-seed.js ./source/helper/shape-path-calculation.js ./source/helper/shared-vars.js ./source/helper/system-flags.js ./source/helper/utilities.js ./source/helper/workstore.js ./source/mixin/anchor.js ./source/mixin/asset-advanced-functionality.js ./source/mixin/asset-consumer.js ./source/mixin/asset.js ./source/mixin/base.js ./source/mixin/button.js ./source/mixin/cascade.js ./source/mixin/cell-key-functions.js ./source/mixin/delta.js ./source/mixin/display-shape.js ./source/mixin/dom.js ./source/mixin/entity.js ./source/mixin/filter.js ./source/mixin/hidden-dom-elements.js ./source/mixin/mimic.js ./source/mixin/path.js ./source/mixin/pattern.js ./source/mixin/pivot.js ./source/mixin/position.js ./source/mixin/shape-basic.js ./source/mixin/shape-curve.js ./source/mixin/styles.js ./source/mixin/text.js ./source/mixin/tween.js ./source/scrawl.js ./source/untracked-factory/cell-fragment.js ./source/untracked-factory/coordinate.js ./source/untracked-factory/drag-zone.js ./source/untracked-factory/keyboard-zone.js ./source/untracked-factory/observe-update.js ./source/untracked-factory/palette.js ./source/untracked-factory/particle-history.js ./source/untracked-factory/quaternion.js ./source/untracked-factory/state.js ./source/untracked-factory/text-style.js ./source/untracked-factory/vector.js
  • §

    Core library

    Scrawl-canvas stores most of the objects it creates in a centralized space, so that they can be referenced from other places in the code base, and from user-written code.

    While some sections are dedicated to a single type of object, other sections are aggregations - this may lead to name conflicts if coders are not rigorous in their naming conventions when creating objects (through the make factory functions).

    Exported object (to modules and scrawl object). Scrawl-canvas exposes the library, and its sections, for import into other script files

  • §

    No imports required

  • §

    Current version

    export const version = '8.15.0';
  • §

    Objects created using the makeAnchor factory

    export const anchor = {};
    export const anchornames = [];
  • §

    Objects created using the makeAnimation and makeRender factories

    export const animation = {};
    export const animationnames = [];
  • §

    Objects - specifically tickers - created using the makeTicker and makeTween factories

    export const animationtickers = {};
    export const animationtickersnames = [];
  • §

    An aggregate of all contents in the canvas, element, entity and stack sections of the library.

    export const artefact = {};
    export const artefactnames = [];
  • §

    Scrawl-canvas wrappers for visual media (images, videos, sprites). Anything that a Picture entity or Pattern style can use as their asset source needs to be included in this section of the library

    export const asset = {};
    export const assetnames = [];
  • §

    Canvas element wrappers created during Scrawl-canvas initialization, and the makeCanvas, getCanvas and addCanvas factories

    export const canvas = {};
    export const canvasnames = [];
  • §

    Objects created using the makeCell and canvas.buildCell factories

    export const cell = {};
    export const cellnames = [];
  • §

    DOM element wrappers created during Scrawl-canvas initialization, and created using the makeElement, Stack.addExistingDomElement and Stack.addNewElement factories

    export const element = {};
    export const elementnames = [];
  • §

    All canvas-related artefacts (Blocks, Wheels, etc) get stored in the entity section of the library.

    export const entity = {};
    export const entitynames = [];
  • §

    Objects created using the makeFilter factory

    export const filter = {};
    export const filternames = [];
  • §

    collects metadata of various requested fonts

    export const fontfamilymetadata = {};
    export const fontfamilymetadatanames = [];
  • §

    Objects created using the makeGroup factory, and generated as part of the process of creating Stack and Canvas artefacts, and Cell assets.

    export const group = {};
    export const groupnames = [];
  • §

    Used internally by Gradient and RadialGradient styles

    export const palette = {};
    export const palettenames = [];
  • §

    Physics-related objects

    export const particle = {};
    export const particlenames = [];
    
    export const force = {};
    export const forcenames = [];
    
    export const spring = {};
    export const springnames = [];
    
    export const world = {};
    export const worldnames = [];
  • §

    Stack element wrappers created during Scrawl-canvas initialization, and created using the makeStack and addStack factories

    export const stack = {};
    export const stacknames = [];
  • §

    Objects created using the makeTween and makeAction factories

    export const tween = {};
    export const tweennames = [];
  • §

    Objects created using the makeGradient, makeRadialGradient, makePattern and makeColor factories

    export const styles = {};
    export const stylesnames = [];
  • §

    DOM unstackedElement wrappers created using the makeUnstackedElement and makeSnippet factories

    export const unstackedelement = {};
    export const unstackedelementnames = [];
  • §

    Given a namespace string, kill all objects created with that namespace

    • Function assumes that the namespace string appears as the first part of the object’s name attribute
    export function purge (namespace = '') {
    
        const remove = function (candidates, target, flag = false) {
    
            candidates.forEach(c => {
    
                const obj = target[c];
    
                if (obj && obj.kill) obj.kill(flag);
            });
        };
    
        if (namespace) {
    
            const candidateArtefacts = artefactnames.filter(c => c.indexOf(namespace) === 0);
            remove(candidateArtefacts, artefact);
    
            const candidateAssets = assetnames.filter(c => c.indexOf(namespace) === 0);
            remove(candidateAssets, asset);
    
            const candidateGroups = groupnames.filter(c => c.indexOf(namespace) === 0);
            remove(candidateGroups, group, true);
    
            const candidateStyles = stylesnames.filter(c => c.indexOf(namespace) === 0);
            remove(candidateStyles, styles);
    
            const candidateTweens = tweennames.filter(c => c.indexOf(namespace) === 0);
            remove(candidateTweens, tween);
    
            const candidateAnimations = animationnames.filter(c => c.indexOf(namespace) === 0);
            remove(candidateAnimations, animation);
    
            const candidateAnimationTickers = animationtickersnames.filter(c => c.indexOf(namespace) === 0);
            remove(candidateAnimationTickers, animationtickers);
    
            const candidateFilters = filternames.filter(c => c.indexOf(namespace) === 0);
            remove(candidateFilters, filter);
    
            const candidateAnchors = anchornames.filter(c => c.indexOf(namespace) === 0);
            remove(candidateAnchors, anchor);
    
            const candidateForces = forcenames.filter(c => c.indexOf(namespace) === 0);
            remove(candidateForces, force);
    
            const candidateSprings = springnames.filter(c => c.indexOf(namespace) === 0);
            remove(candidateSprings, spring);
    
            const candidateWorlds = worldnames.filter(c => c.indexOf(namespace) === 0);
            remove(candidateWorlds, world);
        }
    }
    
    
    export function checkFontIsLoaded (font = '') {
    
        const key = `100px ${font}`;
        return fontfamilymetadatanames.includes(key);
    }
    
    export function getFontMetadata (font = '') {
    
        const key = `100px ${font}`;
        if (fontfamilymetadatanames.includes(key)) return fontfamilymetadata[key];
        return null;
    }
    
    export function findArtefact (item = '') {
    
        if (artefactnames.includes(item)) return artefact[item];
        return null;
    }
    
    export function findAsset (item = '') {
    
        if (assetnames.includes(item)) return asset[item];
        return null;
    }
    
    export function findEntity (item = '') {
    
        if (entitynames.includes(item)) return entity[item];
        return null;
    }
    
    export function findCanvas (item = '') {
    
        if (canvasnames.includes(item)) return canvas[item];
        return null;
    }
    
    export function findStyles (item = '') {
    
        if (stylesnames.includes(item)) return styles[item];
        return null;
    }
    
    export function findTween (item = '') {
    
        if (tweennames.includes(item)) return tween[item];
        return null;
    }
    
    export function findPattern (item = '') {
    
        if (stylesnames.includes(item)) return styles[item];
        if (cellnames.includes(item)) return cell[item];
        return null;
    }
    
    export function findCell (item = '') {
    
        if (cellnames.includes(item)) return cell[item];
        return null;
    }
    
    export function findFilter (item = '') {
    
        if (filternames.includes(item)) return filter[item];
        return null;
    }
    
    export function findGroup (item = '') {
    
        if (groupnames.includes(item)) return group[item];
        return null;
    }
    
    export function findStack (item = '') {
    
        if (stacknames.includes(item)) return stack[item];
        return null;
    }
    
    export function findElement (item = '') {
    
        if (elementnames.includes(item)) return element[item];
        return null;
    }
  • §

    All makeXXX factory functions get added as references to the constructors section of the library - used mainly as part of Scrawl-canvas cloning functionality.

    export const constructors = {};