- 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 Delaunator 002

  Responsive Voronoi cells in a RawAsset wrapper

- §

  Run code

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

- §

  @ts-expect-error

      import Delaunator from 'https://cdn.skypack.dev/delaunator@5.0.0';

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

- §

  The following functions are used to handle the Delaunay object

  - Code adapted from the Delaunator Guide website

      const edgesOfTriangle = (t) => [3 * t, 3 * t + 1, 3 * t + 2];

      const pointsOfTriangle = (del, t) => {

          const { triangles } = del;

          return edgesOfTriangle(t).map(e => triangles[e]);
      };

      const triangleOfEdge = (e) => Math.floor(e / 3);

      const triangleCenter = (pts, del, t) => {

          const vertices = pointsOfTriangle(del, t).map(p => pts[p]);

          return circumcenter(vertices[0], vertices[1], vertices[2]);
      };

      const circumcenter = (a, b, c) => {

          if (a && b && c && a.length && b.length && c.length) {

              const ad = a[0] * a[0] + a[1] * a[1],
                  bd = b[0] * b[0] + b[1] * b[1],
                  cd = c[0] * c[0] + c[1] * c[1];

              const D = 2 * (a[0] * (b[1] - c[1]) + b[0] * (c[1] - a[1]) + c[0] * (a[1] - b[1]));

              return [
                  1 / D * (ad * (b[1] - c[1]) + bd * (c[1] - a[1]) + cd * (a[1] - b[1])),
                  1 / D * (ad * (c[0] - b[0]) + bd * (a[0] - c[0]) + cd * (b[0] - a[0])),
              ];
          }
      };

      const forEachVoronoiEdge = (pts, del, cb) => {

          if (del) {

              const { triangles, halfedges } = del;

              const len = triangles.length;

              for (let e = 0; e < len; e++) {

                  if (e < halfedges[e]) {

                      const p = triangleCenter(pts, del, triangleOfEdge(e));
                      const q = triangleCenter(pts, del, triangleOfEdge(halfedges[e]));

                      cb(e, p, q);
                  }
              }
          }
      };

- §

  #### Scene setup

      const canvas = scrawl.library.artefact.mycanvas;

- §

  Import image from DOM, and create Picture entity using it

      scrawl.importDomImage('.flowers');

- §

  Magic number - base Cell dimensions

      const baseDimension = 400;

- §

  Create the coordinates to be used as the Voronoi web’s points - for this demo these coordinates will be static, except for the first point which will track the mouse cursor position over the canvas

      const coordArray = [],
          center = [baseDimension/2, baseDimension/2];

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

          const x = Math.floor(Math.random() * (baseDimension * 2) - (baseDimension / 2));
          const y = Math.floor(Math.random() * (baseDimension * 2) - (baseDimension / 2));
          coordArray.push([x, y]);
      }

- §

  We build the Voronoi web in a RawAsset wrapper

      const myAsset = scrawl.makeRawAsset({

          name: 'voronoi-web',

          userAttributes: [{

- §

  points - an array holding the coordinate arrays we generate elsewhere

  - For this demo, we will be updating the first coordinate point with the mouse cursor’s position when it is over the canvas element

              key: 'points',
              defaultValue: [],
              setter: function (item) {

                  this.points = [...item];
              },
          },{

- §

  here - a handle to our Canvas wrapper’s base Cell’s `here` object, which gives us the current mouse cursor coordinates

              key: 'here',
              defaultValue: null,
          },{

- §

  delaunay - a handle to the current Delaunator object we recreate on each update

              key: 'delaunay',
              defaultValue: null,
          },{

- §

  canvasWidth, canvasHeight - make the RawAsset’s dimensions the same as our canvas base Cell’s dimensions

              key: 'canvasWidth',
              defaultValue: baseDimension,
          },{
              key: 'canvasHeight',
              defaultValue: baseDimension,
          },{

- §

  trigger - we update the RawAsset at the start of each Display cycle by setting its `trigger` attribute. All the work with recreating the Delaunator object happens here

              key: 'trigger',
              defaultValue: false,
              setter: function (item) {

- §

  @ts-expect-error

                  const { points, here } = this;

                  if (here && here.active) points[0] = [here.x, here.y];
                  else points[0] = [...center];

                  this.delaunay = Delaunator.from(points);

                  this.dirtyData = item;
              },
          }],

- §

  `assetWrapper` is the same as `this` when function is declared with the function keyword

  - We clear the RawAsset’s canvas, then draw the updated Voronoi web onto it

          updateSource: function (assetWrapper) {

              const { element, engine, points, delaunay, canvasWidth, canvasHeight } = assetWrapper;

              element.width = canvasWidth;
              if (!element.height) element.height = canvasHeight;

              engine.strokeStyle = 'black';
              engine.lineWidth = 2;

              engine.beginPath();

              forEachVoronoiEdge(points, delaunay, (e, p, q) => {

                  if (p && q) {

                      engine.moveTo(...p);
                      engine.lineTo(...q);
                  }
              });

              engine.stroke();
          },
      });

- §

  Initialize the RawAsset with relevant data

      myAsset.set({
          points: coordArray,
          here: canvas.base.here,
      });

- §

  The RawAsset needs a subscriber to make it active - currently filters do not subscribe to assets so we need to do it via an otherwise unused Picture entity

      scrawl.makePicture({

          name: 'temp',
          asset: 'voronoi-web',
          method: 'none',
      });

- §

  We apply the mosaic effect over our image using a Scrawl-canvas filter

      scrawl.makeFilter({

          name: 'mosaic-filter',

          actions: [{

- §

  Load our RawAsset’s output - the Voronoi web - into the filter

              action: 'process-image',
              lineOut: 'web',
              asset: 'voronoi-web',
              width: baseDimension,
              height: baseDimension,
              copyWidth: '100%',
              copyHeight: '100%',
          },{

- §

  Create the tiles from the Voronoi web

              action: 'flood',
              lineOut: 'white-background',
              red: 255,
              green: 255,
              blue: 255,
              alpha: 255,
          },{
              action: 'compose',
              lineIn: 'web',
              lineMix: 'white-background',
              lineOut: 'webbed-background',
          },{
              action: 'channels-to-alpha',
              lineIn: 'webbed-background',
              lineOut: 'webbed-background',
              includeRed: true,
              includeGreen: false,
              includeBlue: false,
          },{

- §

  Apply our image over the tiles

              action: 'compose',
              lineIn: 'source',
              lineMix: 'webbed-background',
              compose: 'source-atop',
          },{

- §

  Tile shadows - blur the voronoi web then apply it, offset up and left, to the image

              action: 'gaussian-blur',
              lineIn: 'web',
              lineOut: 'blurred-web',
              radius: 3,
          },{
              action: 'compose',
              lineMix: 'blurred-web',
              offsetX: -2,
              offsetY: -2,
              compose: 'destination-atop',
          },{

- §

  Tile highlights - invert the blurred web then apply it, offset down and right, to the image

              action: 'invert-channels',
              lineIn: 'blurred-web',
              lineOut: 'blurred-web',
          },{
              action: 'compose',
              lineMix: 'blurred-web',
              offsetX: 2,
              offsetY: 2,
              compose: 'destination-atop',
          }],
      });

- §

  Display our image in a Picture entity - the filter is applied here

      const piccy = scrawl.makePicture({

          name: 'myFlower',
          asset: 'iris',

          dimensions: ['100%', '100%'],
          copyDimensions: ['100%', '100%'],

          filters: ['mosaic-filter'],
      });

- §

  #### Scene animation

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

      const report = reportSpeed('#reportmessage');

- §

  Create the Display cycle animation

      scrawl.makeRender({

          name: 'demo-animation',
          target: canvas,

- §

  We need to update our RawAsset at the start of each Display cycle

          commence: () => myAsset.set({ trigger: true }),
          afterShow: report,
      });

- §

  #### User interaction

  For this demo we will suppress touchmove functionality over the canvas

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

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

      }, canvas.domElement);

      addImageDragAndDrop(canvas, '#my-image-store', piccy);

- §

  #### Development and testing

      console.log(scrawl.library);