• 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
  • §

    Cell-fragment factory

    Create a highly reduced CellFragment which supplies the cell pool

  • §

    Imports

    import { doCreate, λnull, λcloneError, Ωempty } from '../helper/utilities.js';
    
    import { makeState } from './state.js';
    
    import baseMix from '../mixin/base.js';
    import cellMix from '../mixin/cell-key-functions.js';
    
    import { getCanvasColorSpace } from '../core/user-interaction.js';
  • §

    Shared constants

    import { _2D, CANVAS, DISPLAY_P3, LEFT, SRGB, TOP } from '../helper/shared-vars.js';
  • §

    Local constants

    const T_CELLFRAGMENT = 'CellFragment';
  • §

    CellFragment constructor

    const CellFragment = function (name, colorSpace = SRGB) {
    
        this.name = name;
    
        const element = this.element = document.createElement(CANVAS);
    
        this.engine = element.getContext(_2D, {
            willReadFrequently: true,
            colorSpace,
        });
    
        element.width = 1;
        element.height = 1;
    
        const state = this.state = makeState(Ωempty);
    
        state.setStateFromEngine(this.engine);
    
        return this;
    };
  • §

    CellFragment prototype

    const P = CellFragment.prototype = doCreate();
    P.type = T_CELLFRAGMENT;
  • §

    Mixins

    baseMix(P);
    cellMix(P);
  • §

    Packet/Clone management

    This functionality is disabled for CellFragments objects

    P.stringifyFunction = λnull;
    P.processPacketOut = λnull;
    P.finalizePacketOut = λnull;
    P.saveAsPacket = function () {
    
        return `[${this.name}, ${this.type}, ${this.lib}, {}]`
    };
    P.clone = λcloneError;
  • §

    Kill functionality

    None required

    
    P.setDimensions = function (w, h) {
    
        this.w = w;
        this.h = h;
        this.element.width = w;
        this.element.height = h;
  • §

    Resetting canvas dimensions sets the canvas engine back to system default values

    • As we always require textAlign and textBaseline to be ‘left’ and ‘top’ respectively, we reset them here.
    • requestCell will always call this function before releasing a pool cell into the wild.
        this.engine.textAlign = LEFT;
        this.engine.textBaseline = TOP;
    };
    
    P.clearCell = function () {
    
        this.engine.clearRect(0, 0, this.w, this.h);
    };
  • §

    Cell pool

    A number of processes - for instance collision functionality, and applying filters to entitys and groups - require the use of a <canvas> element and its CanvasRenderingContext2D engine. Rather than generate these canvas elements on the fly, we store them in a pool, to help make the code more efficiant.

    To use a pool cell, request it using the exposed requestCell function.

    IT IS IMPERATIVE that requested cells are released once work with them completes, using the releaseCell function. Failure to do this leads to impaired performance as Javascript creates new canvas elements (often in multiples of 60 per second) which need to be garbage collected by the Javascript engine, thus leading to increasingly shoddy performance the longer the animation runs.

    const cellPool = [];
    
    let count = 0;
  • §

    Exported function - requestCell

    export const requestCell = function (w = 1, h = 1, colorSpace = SRGB) {
    
        if (!cellPool.length) {
    
            cellPool.push(new CellFragment(`pool_${count++}`, getCanvasColorSpace(colorSpace === DISPLAY_P3)));
        }
    
        const c = cellPool.shift();
    
        c.setDimensions(w, h);
    
        c.engine.save();
    
        return c;
    };
    
    export const releaseCell = function (...args) {
    
        args.forEach(a => {
    
            if (a && a.type === T_CELLFRAGMENT) {
    
                a.setDimensions(1, 1);
                a.engine.restore();
                a.state.setStateFromEngine(a.engine);
    
                cellPool.push(a);
            }
        });
    };