- 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

- §

  # The Animation Loop

  Scrawl-canvas runs a single, centralized requestAnimationFrame (RAF) function - animationLoop - for all animation objects.

  Animation objects are Scrawl-canvas objects with a fn attribute; the function will be invoked once per RAF cycle.

  The RAF function is first invoked as part of Scrawl-canvas initialization when it loads into a web page, and continues to run while the doAnimation flag remains true.

  To stop the RAF:

  `scrawl.stopCoreAnimationLoop()`

  To restart the RAF after it has been stopped:

  `scrawl.startCoreAnimationLoop()`

  … Functionality tested in Demo DOM-009

  As part of initialization, two animation objects are created and added to the animate array:

  - coreTickersAnimation (order: 0) - which will invoke all ticker animations currently subscribed to it - factory/ticker.js
  - coreListenersTracker (order: 0) - which channels window-based events (mouse/touch movement, viewport resize, scrolling) to Scrawl-canvas objects that need to take action in response (thus choking such actions to a maximum 60-per-second) - core/userInteraction.js

  Additional animations can be created via a number of ‘make’ functions:

  - makeAnimation (runs by default) - factory/animation.js
  - makeRender (runs by default) - factory/renderAnimation.js
  - makeTicker (halted by default) - factory/ticker.js
  - makeTween (halted by default) - factory/tween.js

  These objects can be added to the animate Array by invoking their run function, and removed by invoking their halt function.

  The order in which animations objects run during each RAF cycle (= Display cycle) can be (partly) determined by the objects’ order attribute: those with a lower order value will be invoked before those with a higher value.

  Note that ticker/tween animations will all run before other animations (order differences between tickers/tween objects will be respected).

- §

  #### Imports

      import { animation } from "./library.js";

      import { pushUnique, removeItem } from './utilities.js';

      import { getDoAnimation, getResortBatchAnimations, setDoAnimation, setResortBatchAnimations } from './system-flags.js';

      import { releaseArray, requestArray } from '../factory/array-pool.js';

      import { _floor } from './shared-vars.js';

- §

  Local constants

      const animate_sorted = [];
      const animate = [];

      export const animateAdd = (val) => {
          pushUnique(animate, val);
          setResortBatchAnimations(true);
      };

      export const animateRemove = (val) => {
          removeItem(animate, val);
          setResortBatchAnimations(true);
      };

      export const animateIncludes = (val) => animate.includes(val);

- §

  ### Functionality

- §

  Scrawl-canvas animation sorter uses a ‘bucket sort’ algorithm

      const sortAnimations = () => {

          const buckets = requestArray();

          let obj, order, i, iz;

          for (i = 0, iz = animate.length; i < iz; i++) {

              obj = animation[animate[i]];

              if (obj) {

                  order = _floor(obj.order) || 0;

                  if (!buckets[order]) buckets[order] = requestArray();

                  buckets[order].push(obj);
              }
          }
          animate_sorted.length = 0;

          for (i = 0, iz = buckets.length; i < iz; i++) {

              obj = buckets[i];

              if (obj) {

                  animate_sorted.push(...obj);
                  releaseArray(obj);
              }
          }
          releaseArray(buckets);
      };

- §

  The requestAnimationFrame function

      const animationLoop = () => {

          if (getResortBatchAnimations()) {

              setResortBatchAnimations(false);
              sortAnimations();
          }

          for (let i = 0, iz = animate_sorted.length; i < iz; i++) {

              animate_sorted[i].fn();
          }

          if (getDoAnimation()) window.requestAnimationFrame(animationLoop);
      };

- §

  `Exported function` (modules and scrawl object). Start the RAF function running

      export const startCoreAnimationLoop = () => {

          setDoAnimation(true);
          animationLoop();
      };

- §

  `Exported function` (modules and scrawl object). Halt the RAF function

      export const stopCoreAnimationLoop = () => setDoAnimation(false);