- 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 Filters 105

  Use entitys to generate points for the tiles filter

- §

  Run code

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

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

- §

  #### Scene setup

      const plainCanvas = scrawl.library.canvas['plain-canvas'],
          filteredCanvas = scrawl.library.canvas['filtered-canvas'];

      scrawl.importDomImage('.flowers');

- §

  Create the filter

      const myFilter = scrawl.makeFilter({

          name: 'tiles',
          method: 'tiles',
          tileRadius: 50,
          offsetX: 200,
          offsetY: 200,
      });

- §

  Create the target entity

      const plainImg = scrawl.makePicture({

          name: 'plain-img',
          group: plainCanvas.get('baseName'),

          asset: 'iris',

          width: '100%',
          height: '100%',

          copyWidth: '100%',
          copyHeight: '100%',

          method: 'fill',
      });

      const filteredImg = plainImg.clone({

          name: 'filtered-img',
          group: filteredCanvas.get('baseName'),
          filters: ['tiles'],
      });

- §

  Create the line spiral

      const spiral = scrawl.makeLineSpiral({

          name: 'points-from-spiral',
          group: filteredCanvas.get('baseName'),
          start: [200, 200],
          handle: ['center', 'center'],
          radiusIncrement: 0.05,
          radiusIncrementAdjust: 1,
          stepLimit: 1500,
          useAsPath: true,
          method: 'draw',
          globalAlpha: 0.3,
      });

- §

  To make show/hide for the paths (once we have more than one of them) easier

      const pathGroup = scrawl.makeGroup({

          name: 'paths-group',

      }).addArtefacts('points-from-spiral');

- §

  Current paths, and their shared step distance TODO: add more path options, for testing/general interest

      let distance = 50;
      const currentPaths = spiral.name;

- §

  Update filter with spiral points data

      const getPointsFromSpiral = () => {

          const len = spiral.length,
              step = (1 / (Math.floor(len / distance))),
              points = [],
              coord = scrawl.requestCoordinate(),
              pos = spiral.get('position');

          let x, y;

          for (let i = step; i <= 1; i += step) {

              [x, y] = coord.setFromVector(spiral.getPathPositionData(i)).subtract(pos);

- §

  @ts-expect-error

              points.push(Math.round(x), Math.round(y));
          }
          [x, y] = coord.setFromVector(spiral.getPathPositionData(0.00000001)).subtract(pos);

- §

  @ts-expect-error

          points.push(Math.round(x), Math.round(y));

          [x, y] = coord.setFromVector(spiral.getPathPositionData(0.99999999)).subtract(pos);

- §

  @ts-expect-error

          points.push(Math.round(x), Math.round(y));

          scrawl.releaseCoordinate(coord);

          myFilter.set({ points });
      };

      const updateFilterPoints = () => {

          switch (currentPaths) {

              case spiral.name :
                  getPointsFromSpiral();
                  break;
          }
      };

- §

  #### 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 `    Tile dimensions - radius: ${tile_radius.value}px\n    Origin offset - x: ${offset_x.value}px y: ${offset_y.value}px\n    Step along path: ${distance}\n    Spiral: radiusIncrement: ${spiralRadius.value}; radiusIncrementAdjust: ${spiralRadiusAdjust.value}\n    Opacity: ${opacity.value}`;
      });

- §

  Create the Display cycle animation

      scrawl.makeRender({
          name: "plain-canvas-animation",
          target: plainCanvas,
      });

      scrawl.makeRender({
          name: "filtered-canvas-animation",
          target: filteredCanvas,
          afterShow: report,
          afterCreated: updateFilterPoints,
      });

- §

  #### User interaction

  Filter updates

      scrawl.makeUpdater({

          event: ['input', 'change'],
          origin: '.filter-control',

          target: myFilter,

          useNativeListener: true,
          preventDefault: true,

          updates: {
              opacity: ['opacity', 'float'],
              offset_x: ['offsetX', 'round'],
              offset_y: ['offsetY', 'round'],
              tile_radius: ['tileRadius', 'round'],
          },
      });

- §

  Update step limit along paths

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

          const t = e.target,
              value = t.value;

          distance = parseInt(value, 10);

          updateFilterPoints();

      }, '#path-step');

- §

  Show or hide the paths

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

          const t = e.target,
              value = t.value;

          pathGroup.setArtefacts({
              method: (value === 'show') ? 'draw' : 'none',
          });

      }, '#show-path');

- §

  Move the paths

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

          pathGroup.setArtefacts({

- §

  @ts-expect-error

              start: [parseInt(offset_x.value, 10), parseInt(offset_y.value, 10)],
          });

      }, '.move-paths');

- §

  LineSpiral adjustments

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

          spiral.set({

- §

  @ts-expect-error

              radiusIncrement: parseFloat(spiralRadius.value),

- §

  @ts-expect-error

              radiusIncrementAdjust: parseFloat(spiralRadiusAdjust.value),
          });

          updateFilterPoints();

      }, '.spiral-control');

- §

  Setup form

      const pathStep = document.querySelector('#path-step'),
          offset_x = document.querySelector('#offset_x'),
          offset_y = document.querySelector('#offset_y'),
          tile_radius = document.querySelector('#tile_radius'),
          opacity = document.querySelector('#opacity'),
          spiralRadius = document.querySelector('#spiral-radius'),
          spiralRadiusAdjust = document.querySelector('#spiral-radius-adjust'),
          showPath = document.querySelector('#show-path');

- §

  @ts-expect-error

      pathStep.value = 50;

- §

  @ts-expect-error

      opacity.value = 1;

- §

  @ts-expect-error

      showPath.value = 'show';

- §

  @ts-expect-error

      offset_x.value = 200;

- §

  @ts-expect-error

      offset_y.value = 200;

- §

  @ts-expect-error

      tile_radius.value = 50;

- §

  @ts-expect-error

      spiralRadius.value = 0.04;

- §

  @ts-expect-error

      spiralRadiusAdjust.value = 1;

- §

  #### Drag-and-Drop image loading functionality

      addImageDragAndDrop([plainCanvas, filteredCanvas], '#my-image-store', [plainImg, filteredImg]);

- §

  #### Development and testing

      console.log(scrawl.library);