- Jump To … +
  ./source/core/animation-loop.js ./source/core/display-cycle.js ./source/core/document-root-elements.js ./source/core/document.js ./source/core/events.js ./source/core/init.js ./source/core/library.js ./source/core/random-seed.js ./source/core/shared-vars.js ./source/core/snippets.js ./source/core/system-flags.js ./source/core/user-interaction.js ./source/core/utilities.js ./source/factory/action.js ./source/factory/anchor.js ./source/factory/animation.js ./source/factory/array-pool.js ./source/factory/bezier.js ./source/factory/block.js ./source/factory/canvas.js ./source/factory/cell-fragment.js ./source/factory/cell.js ./source/factory/cog.js ./source/factory/color.js ./source/factory/conic-gradient.js ./source/factory/coordinate.js ./source/factory/crescent.js ./source/factory/drag-zone.js ./source/factory/element.js ./source/factory/emitter.js ./source/factory/filter-engine-bluenoise-data.js ./source/factory/filter-engine.js ./source/factory/filter.js ./source/factory/font-attributes.js ./source/factory/gradient.js ./source/factory/grid.js ./source/factory/group.js ./source/factory/image-asset.js ./source/factory/keyboard-zone.js ./source/factory/line-spiral.js ./source/factory/line.js ./source/factory/loom.js ./source/factory/mesh.js ./source/factory/net.js ./source/factory/noise-asset.js ./source/factory/observe-update.js ./source/factory/oval.js ./source/factory/palette.js ./source/factory/particle-force.js ./source/factory/particle-history.js ./source/factory/particle-spring.js ./source/factory/particle-world.js ./source/factory/particle.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/radial-gradient.js ./source/factory/raw-asset.js ./source/factory/reaction-diffusion-asset.js ./source/factory/rectangle.js ./source/factory/render-animation.js ./source/factory/shape.js ./source/factory/spiral.js ./source/factory/sprite-asset.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/unstacked-element.js ./source/factory/vector.js ./source/factory/video-asset.js ./source/factory/wheel.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/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/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/shape-path-calculation.js ./source/mixin/styles.js ./source/mixin/tween.js

- §

  # Cell-fragment factory

  Create a highly reduced CellFragment which supplies the cell pool

- §

  #### Imports

      import { doCreate, λnull, λthis } from '../core/utilities.js';

      import { makeState } from './state.js';

      import baseMix from '../mixin/base.js';
      import cellMix from '../mixin/cell-key-functions.js';

      import { _2D, CANVAS, T_CELLFRAGMENT } from '../core/shared-vars.js';

- §

  #### CellFragment constructor

      const CellFragment = function (name) {

          this.name = name;

          const element = this.element = document.createElement(CANVAS);
          const engine = this.engine = element.getContext(_2D, {
              willReadFrequently: true,
          });

          element.width = 1;
          element.height = 1;

          const state = this.state = makeState({ engine });

          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 = λthis;

- §

  #### Kill functionality

  None required

- §

  #### 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 () {

          if (!cellPool.length) cellPool.push(new CellFragment(`pool_${count++}`));

          const c = cellPool.shift();
          c.engine.save();
          return c;
      };

- §

  `Exported function` - releaseCell

      export const releaseCell = function (c) {

          if (c && c.type == T_CELLFRAGMENT) {

              c.engine.restore();
              cellPool.push(c);
          }
      };