- Jump To … +
  ./demo/canvas-001.js ./demo/canvas-002.js ./demo/canvas-003.js ./demo/canvas-004.js ./demo/canvas-005.js ./demo/canvas-006.js ./demo/canvas-007.js ./demo/canvas-008.js ./demo/canvas-009.js ./demo/canvas-010.js ./demo/canvas-011.js ./demo/canvas-012.js ./demo/canvas-013.js ./demo/canvas-014.js ./demo/canvas-015.js ./demo/canvas-015a.js ./demo/canvas-016.js ./demo/canvas-017.js ./demo/canvas-018.js ./demo/canvas-019.js ./demo/canvas-019a.js ./demo/canvas-020.js ./demo/canvas-021.js ./demo/canvas-022.js ./demo/canvas-023.js ./demo/canvas-024.js ./demo/canvas-025.js ./demo/canvas-026.js ./demo/canvas-027.js ./demo/canvas-028.js ./demo/canvas-029.js ./demo/canvas-030.js ./demo/canvas-031.js ./demo/canvas-032.js ./demo/canvas-033.js ./demo/canvas-034.js ./demo/canvas-035.js ./demo/canvas-036.js ./demo/canvas-037.js ./demo/canvas-038.js ./demo/canvas-039.js ./demo/canvas-040.js ./demo/canvas-041.js ./demo/canvas-042.js ./demo/canvas-043.js ./demo/canvas-044.js ./demo/canvas-045.js ./demo/canvas-046.js ./demo/canvas-047.js ./demo/canvas-048.js ./demo/canvas-049.js ./demo/canvas-050.js ./demo/canvas-051.js ./demo/canvas-052.js ./demo/canvas-053.js ./demo/canvas-054.js ./demo/canvas-055.js ./demo/canvas-056.js ./demo/canvas-058.js ./demo/canvas-059.js ./demo/canvas-060.js ./demo/canvas-061.js ./demo/canvas-062.js ./demo/canvas-063.js ./demo/canvas-064.js ./demo/core-001.js ./demo/delaunator-001.js ./demo/delaunator-002.js ./demo/dom-001.js ./demo/dom-002.js ./demo/dom-003.js ./demo/dom-004.js ./demo/dom-005.js ./demo/dom-006.js ./demo/dom-007.js ./demo/dom-008.js ./demo/dom-009.js ./demo/dom-010.js ./demo/dom-011.js ./demo/dom-012.js ./demo/dom-013.js ./demo/dom-015.js ./demo/dom-016.js ./demo/dom-017.js ./demo/dom-018.js ./demo/filters-001.js ./demo/filters-002.js ./demo/filters-002a.js ./demo/filters-003.js ./demo/filters-004.js ./demo/filters-005.js ./demo/filters-006.js ./demo/filters-007.js ./demo/filters-008.js ./demo/filters-009.js ./demo/filters-010.js ./demo/filters-011.js ./demo/filters-012.js ./demo/filters-013.js ./demo/filters-014.js ./demo/filters-015.js ./demo/filters-016.js ./demo/filters-017.js ./demo/filters-018.js ./demo/filters-019.js ./demo/filters-020.js ./demo/filters-021.js ./demo/filters-022.js ./demo/filters-023.js ./demo/filters-024.js ./demo/filters-025.js ./demo/filters-026.js ./demo/filters-027.js ./demo/filters-028.js ./demo/filters-101.js ./demo/filters-102.js ./demo/filters-103.js ./demo/filters-104.js ./demo/filters-105.js ./demo/filters-501.js ./demo/filters-502.js ./demo/filters-503.js ./demo/filters-504.js ./demo/filters-505.js ./demo/mediapipe-001.js ./demo/mediapipe-002.js ./demo/mediapipe-003.js ./demo/modules-001.js ./demo/modules-002.js ./demo/modules-003.js ./demo/modules-004.js ./demo/modules-005.js ./demo/modules-006.js ./demo/packets-001.js ./demo/packets-002.js ./demo/particles-001.js ./demo/particles-002.js ./demo/particles-003.js ./demo/particles-004.js ./demo/particles-005.js ./demo/particles-006.js ./demo/particles-007.js ./demo/particles-008.js ./demo/particles-009.js ./demo/particles-010.js ./demo/particles-011.js ./demo/particles-012.js ./demo/particles-013.js ./demo/particles-014.js ./demo/particles-015.js ./demo/particles-016.js ./demo/rapier-001.js ./demo/snippets-001.js ./demo/snippets-002.js ./demo/snippets-003.js ./demo/snippets-004.js ./demo/snippets-005.js ./demo/snippets-006.js ./demo/tensorflow-001.js ./demo/tensorflow-002.js ./demo/utilities.js

- §

  # Demo Canvas 006

  Canvas tween stress test

- §

  Run code

      import {
          addNativeListener,
          library as L,
          makeRender,
          makeTween,
          makeWheel,
          makeColor,
          releaseVector,
          requestVector,
      } from '../source/scrawl.js'

      import { reportSpeed } from './utilities.js';

- §

  #### Scene setup

  Get a handle to the Canvas wrapper

      const porthole = L.artefact.porthole;

      porthole.set({
          css: {
              borderRadius: '50%'
          }
      });

- §

  Namespacing boilerplate

      const namespace = 'demo';
      const name = (n) => `${namespace}-${n}`;

- §

  ##### Star generation functionality

  We use this entity as a template for cloning new stars

      const starling = makeWheel({

          name: name('starling'),

          radius: 3,
          handleX: 'center',
          handleY: 'center',

          method: 'fill',
          fillStyle: 'white',

- §

  Adding in some flags to help speed up the Display cycle

          noDeltaUpdates: true,
          noPositionDependencies: true,
          noFilters: true,
          noUserInteraction: true,

          purge: 'all',
      });

- §

  Useful variables

      let starCount = 0;
      const addNumber = 100;

- §

  Color factory will generate a new star color on each user click

      const colorBuilder = makeColor({
          name: name('my-color-builder'),
          minimumColor: '#fcc',
          maximumColor: '#ccf',
          colorSpace: 'OKLAB',
      });

- §

  `makeStar` function

      const makeStars = function (buildNumber) {

- §

  We use a Vector for calculating the new star’s direction

          const v = requestVector();

          for (let i = 0; i < buildNumber; i++) {

              starCount++;

- §

  Clone the entity template

              const star = starling.clone({

                  name: name(`star_${starCount}`),

- §

  Additional flags for speeding up the Display cycle

                  noCanvasEngineUpdates: true,

- §

  All cloned stars will share the template star’s State object - to save on memory

                  sharedState: true,
              });

              const myRandom = Math.random();

              v.setXY(1, 0).rotate(Math.random() * 360).scalarMultiply(300);

- §

  Every star gets its own Tween object

  - And each Tween generates its own Ticker timeline object

              makeTween({

                  name: star.name,

                  targets: star,
                  duration: Math.round((myRandom * 3000) + 2000),
                  cycles: 0,

- §

  We will animate the star’s `start` Coordinate (using startX and startY pseudo-attributes)

                  definitions: [{
                      attribute: 'startX',
                      start: 300,
                      end: 300 + v.x
                  }, {
                      attribute: 'startY',
                      start: 300,
                      end: 300 + v.y
                  }, {

- §

  We will also animate the star’s `scale` value to make the animation look more 3D

                      attribute: 'scale',
                      start: 0.5,
                      end: Math.round((1 - myRandom) * 0.9) + 0.6,
                  }]

- §

  We start the Tween running immediately after it has been created.

              }).run();

          }

- §

  We need to release our Vector back to its vector pool

  - Failure to release pool objects can lead to memory leaks.

          releaseVector(v);

- §

  Change the color of the stars each time the user clicks on the porthole

          starling.set({
              fillStyle: colorBuilder.getRangeColor(Math.random()),
          });
      };

- §

  Generate the initial stars

      makeStars(100);

- §

  #### Scene animation

  Function to display frames-per-second data, and other information relevant to the demo

      const report = reportSpeed('#reportmessage', function () {
          return `Stars: ${starCount}`;
      });

- §

  Create the Display cycle animation

      makeRender({

          name: name('animation'),
          target: porthole,
          afterShow: report,
      });

- §

  #### User interaction

  Event listeners

      const addStars = (e) => {

          e.preventDefault();
          e.returnValue = false;

          makeStars(addNumber);
      };
      addNativeListener('click', addStars, porthole.domElement);

- §

  #### Development and testing

      console.log(L);