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

  Delauney triangulation and Voronoi cell visualisation

- §

  Run code

      import {
          addNativeListener,
          library as L,
          makeBlock,
          makeEmitter,
          makeRender,
          makeStar,
          makeWheel,
          makeWorld,
      } from '../source/scrawl.js';

- §

  @ts-expect-error

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

      import { reportSpeed } 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 nextHalfedge = (e) => (e % 3 === 2) ? e - 2 : e + 1;

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

          const { triangles, halfedges } = del;

          const len = triangles.length;

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

              if (e > halfedges[e]) {

                  const p = pts[triangles[e]];
                  const q = pts[triangles[nextHalfedge(e)]];

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

      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 = L.artefact.mycanvas;

- §

  Create a Block entity which covers the entire canvas; this will act as the area in which particles will be generated by the Emitter entity

      makeBlock({

          name: 'field-block',
          order: 1,

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

          method: 'none',
      });

      makeWheel({

          name: 'mouse-planet',

          radius: 12,

          handle: ['center', 'center'],

          fillStyle: 'gold',

          lockTo: 'mouse',
      });

- §

  #### Particle physics animation scene

- §

  Create a World object which we can then assign to the particle emitter

      const myWorld = makeWorld({

          name: 'demo-world',
          tickMultiplier: 2,

          userAttributes: [
              {
                  key: 'coords',
                  defaultValue: [],

- §

  @ts-expect-error

                  getter: function () { return [].concat(this.coords) },
                  setter: function (emitter) {

- §

  @ts-expect-error

                      const { coords } = this;
                      coords.length = 0;

                      const { particleStore } = emitter;

                      particleStore.forEach(p => {

                          const pos = p.position;

                          coords.push([pos.x, pos.y]);
                      });

                      const here = (canvas) ? canvas.here : false;

                      if (here && here.active) coords.push([here.x, here.y]);
                  },
              },
          ],
      });

      let delaunay = false;

      const buildDelaunayObject = function (coords) {

          return Delaunator.from(coords);
      };

      makeEmitter({

          name: 'field-emitter',
          world: myWorld,

          generationRate: 5,

          particleCount: 80,
          start: ['center', 'center'],

          killRadius: 500,
          killRadiusVariation: 0,

          rangeX: 24,
          rangeFromX: -12,
          rangeY: 24,
          rangeFromY: -12,

          artefact: makeStar({

              name: 'particle-star-entity',

              radius1: 8,
              radius2: 5,

              points: 5,

              handle: ['center', 'center'],

              fillStyle: 'aliceblue',
              strokeStyle: 'orange',
              method: 'fillThenDraw',

              visibility: false,

              noUserInteraction: true,
              noPositionDependencies: true,
              noFilters: true,
              noDeltaUpdates: true,
          }),

          preAction: function (host) {

- §

  generate coords @ts-expect-error

              this.world.set({ coords: this });

- §

  @ts-expect-error

              const c = this.world.get('coords');

- §

  Build a new Delaunay object for each iteration (think of this as a stress test)

              if (c.length) delaunay = buildDelaunayObject(c);

              if (delaunay) {

                  const engine = host.engine;

                  engine.save();

                  engine.setTransform(1, 0, 0, 1, 0, 0);

                  engine.lineWidth = 3;
                  engine.strokeStyle = 'gold';
                  engine.globalAlpha = 0.4;

                  engine.beginPath();

                  forEachTriangleEdge(c, delaunay, (e, p, q) => {

                      if (p && q) {

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

                  engine.stroke();

                  engine.strokeStyle = 'lightgreen';
                  engine.globalAlpha = 1;

                  engine.beginPath();

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

                      if (p && q) {

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

                  engine.stroke();

                  engine.restore();
              }
          },

- §

  The `stampAction` function just adds the stars to the scene

          stampAction: function (artefact, particle, host) {

              const [, , ...start] = particle.history[0];
              artefact.simpleStamp(host, {start});
          },
      });

- §

  #### User interaction

  For this demo we will suppress touchmove functionality over the canvas

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

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

      }, canvas.domElement);

- §

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

      makeRender({

          name: 'demo-animation',
          target: canvas,
          afterShow: report,
      });

- §

  #### Development and testing

      console.log(L);