- 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 056

  Seeded random number generator; point on path

- §

  Run code

      import * as scrawl from '../source/scrawl.js'

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

- §

  #### Scene setup

      const canvas = scrawl.library.artefact.mycanvas;

- §

  Magic numbers

      const noOfPins = 16,
          pinRotationAngle = 360 / noOfPins;

- §

  User-updatable values

      let densityValue = 600,
          lengthValue = 20,
          rotationValue = 360,
          pathrollValue = false;

- §

  We use a Polyline entity as the guide along which we shall calculate the hairs for our Shape entity. The Polyline’s pins are a set of Wheel entitys which the user can drag around the canvas to reshape the Polyline

      const firstPins = scrawl.makeGroup({
          name: 'first-pins',
          host: canvas.base.name,
      });

      const coord = scrawl.requestCoordinate();

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

          coord.setFromArray([0, 200]).rotate(i * pinRotationAngle).add([300, 300]);

          scrawl.makeWheel({
              name: `pin-1-${i}`,
              group: 'first-pins',

- §

  @ts-expect-error

              start: [...coord],
              handle: ['center', 'center'],
              radius: 10,
              fillStyle: 'red',
              method: 'fillThenDraw',
          });
      }

      scrawl.releaseCoordinate(coord);

      const firstOutline = scrawl.makePolyline({

          name: 'first-outline',
          pins: firstPins.get('artefacts'),
          mapToPins: true,
          tension: 0.25,
          strokeStyle: 'green',
          method: 'draw',
          closed: true,
          useAsPath: true,
          constantPathSpeed: true,
      });

- §

  The Shape entity starts with a minimal pathDefinition value. Note that the Shape’s start and handle attributes are centered; this entity does not pivot or mimic to the Polyline entity which is why their borders are often misaligned.

      const secondOutline = scrawl.makeShape({

          name: 'second-outline',
          pathDefinition: 'm0,0',
          start: ['center', 'center'],
          handle: ['center', 'center'],
          lineWidth: 4,
          lineCap: 'round',
          strokeStyle: 'darkslategray',
          method: 'draw',
      });

- §

  We recalculate the Shape entity’s pathDefinition value each time the user updates a control or drags one of the Polyline entity’s pins.

      let currentOutline = '';

      const checkOutlines = function () {

          const outline = firstOutline.get('pathDefinition');

          if (outline !== currentOutline) {

              currentOutline = outline;

- §

  Rotations are calculated with the help of a pool Coordinate object

              const coord = scrawl.requestCoordinate();

- §

  Get the number generator

              const numberGenerator = scrawl.seededRandomNumberGenerator('hello-world');

              let pos, x, y, a, dx, dy;
              let line = '';

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

- §

  getPathPositionData returns an Object with attributes `x`, `y`, `angle`.

  - The first argument is a float Number value between `0` and `1`, representing the relative position of the required point along the path.
  - The second argument is a boolean which, when set to true, will return the `constant speed` coordinate rather than the `natural speed` coordinate.

                  pos = firstOutline.getPathPositionData(i / densityValue, true);
                  x = pos.x;
                  y = pos.y;

                  if (pathrollValue) {

                      a = pos.angle + 90;

                      coord.set(0, numberGenerator.random() * lengthValue).rotate(a + (numberGenerator.random() * rotationValue)).add([x, y]);
                  }
                  else {

                      coord.set(0, numberGenerator.random() * lengthValue).rotate(numberGenerator.random() * rotationValue).add([x, y]);
                  }
                  [dx, dy] = coord;

                  line += `M${x},${y}L${dx},${dy}`;
              }

- §

  Return the Coordinate object back to the pool - failure to do this leads to memory leaks!

              scrawl.releaseCoordinate(coord);

              secondOutline.set({
                  pathDefinition: line,
              });
          }
      };

- §

  #### Scene animation

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

      const report = reportSpeed('#reportmessage', function () {

- §

  @ts-expect-error

          return `    Rotation: ${rotation.value}; Length: ${length.value}; Density: ${density.value}`;
      });

- §

  Create the Display cycle animation

      scrawl.makeRender({

          name: "demo-animation",
          target: canvas,
          commence: checkOutlines,
          afterShow: report,
      });

      scrawl.makeDragZone({
          zone: canvas,
          collisionGroup: 'first-pins',
          endOn: ['up', 'leave'],
          preventTouchDefaultWhenDragging: true,
      });

- §

  #### Development and testing

      const rotation = document.querySelector('#rotation');
      const length = document.querySelector('#length');
      const density = document.querySelector('#density');
      const pathRotation = document.querySelector('#pathroll');

      scrawl.addNativeListener(['input', 'change'], () => {

- §

  @ts-expect-error

          rotationValue = rotation.value;

- §

  @ts-expect-error

          lengthValue = length.value;

- §

  @ts-expect-error

          densityValue = density.value;

- §

  @ts-expect-error

          pathrollValue = ('0' === pathRotation.value) ? false : true;

- §

  Setting the `currentOutline` variable to a null string guarantees that the Shape entity’s pathDefinition will be recalculated at the start of the next Display cycle

          currentOutline = '';

      }, '.controlItem');

- §

  @ts-expect-error

      rotation.value = 360;

- §

  @ts-expect-error

      length.value = 20;

- §

  @ts-expect-error

      density.value = 600;

- §

  @ts-expect-error

      pathRotation.options.selectedIndex = 0;

      console.log(scrawl.library);