plotboilerplate 1.24.0 → 1.26.0

package/src/ts/Vertex.ts

@@ -35,7 +35,8 @@
  * @modified 2024-12-17 Outsourced the euclidean distance calculation of `Vertex.distance` to `geomutils.dist4`.
  * @modified 2025-03-24 Making the second parameter `center` of the `Vertex.rotate` method optional.
  * @modified 2025-04-13 Adding the `Vertex.move(amount: XYCoords)` method (does the same as `add`, added by naming convention).
- * @version  2.10.0
+ * @modified 2025-05-07 Class `Vertex` is now implementing interface `IBounded` (to meet convention).
+ * @version  2.11.0
  *
  * @file Vertex
  * @public
@@ -44,8 +45,9 @@
 import { IVertexAttr, VertexAttr } from "./VertexAttr";
 import { UIDGenerator } from "./UIDGenerator";
 import { VertexListeners } from "./VertexListeners";
-import { XYCoords, SVGSerializable, UID } from "./interfaces";
+import { XYCoords, SVGSerializable, UID, IBounded } from "./interfaces";
 import { geomutils } from "./geomutils";
+import { Bounds } from "./Bounds";
 
 /**
  * @classdesc A vertex is a pair of two numbers.<br>
@@ -61,7 +63,7 @@ import { geomutils } from "./geomutils";
  * @requires XYCoords
  *
  */
-export class Vertex implements XYCoords, SVGSerializable {
+export class Vertex implements IBounded, XYCoords, SVGSerializable {
   private static readonly ZERO = new Vertex(0, 0);
 
   /**
@@ -645,6 +647,22 @@ export class Vertex implements XYCoords, SVGSerializable {
     return this;
   }
 
+  //--- BEGIN --- Implement interface `IBounded`
+  /**
+   * Get the bounding box (bounds) of this Vertex.
+   * This is just by convention – any vertex is just a position without any useful with or height (0).
+   *
+   * @method getBounds
+   * @instance
+   * @memberof Vertex
+   * @return {Bounds} The rectangular bounds of this Vertex (width and height are zero).
+   **/
+  getBounds(): Bounds {
+    // return Bounds.computeFromVertices([this.a, this.b, this.c]);
+    return Bounds.computeFromVertices([this]);
+  }
+  //--- END --- Implement interface `IBounded`
+
   /**
    * Get a string representation of this vertex.
    *

package/src/ts/drawutilssvg.ts

@@ -47,7 +47,8 @@
  * @modified 2024-01-30 Fixing an issue with immutable style sets; changes to the global draw config did not reflect here (do now).
  * @modified 2024-03-10 Fixing some types for Typescript 5 compatibility.
  * @modified 2024-07-24 Caching custom style defs in a private buffer variable.
- * @version  1.6.10
+ * @modified 2025-11-14 Fixing a bug in the CSS `mix-blend-mode` property handling (caused a runtime error).
+ * @version  1.6.11
  **/
 
 import { CircleSector } from "./CircleSector";
@@ -416,8 +417,12 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
       node = this.createSVGNode(nodeName);
     }
     if (this.drawlibConfiguration.blendMode) {
-      // node.style["mix-blend-mode"] = this.drawlibConfiguration.blendMode;
-      node.style["mix-blend-mode" as keyof Object](this.drawlibConfiguration.blendMode);
+      const blendMode = node.style["mix-blend-mode" as keyof Object];
+      if (typeof blendMode === "function") {
+        blendMode(this.drawlibConfiguration.blendMode);
+      } else {
+        node.style["mix-blend-mode"] = this.drawlibConfiguration.blendMode;
+      }
     }
     // if (this.lineDashEnabled && this.lineDash && this.lineDash.length > 0 && drawutilssvg.nodeSupportsLineDash(nodeName)) {
     //   node.setAttribute("stroke-dasharray", this.lineDash.join(" "));

package/src/ts/interfaces/core.ts

@@ -22,6 +22,8 @@
  * @modified 2024-08-25 Added the `CSSBackdropFilterParams` params to the global params (all optional).
  * @modified 2025-03-29 Added interface `Intersectable`.
  * @modified 2025-04-16 Added interface `IBounded`.
+ * @modified 2025-05-07 Added callback `onContentChanged` to PB to track if the drawable content changed.
+ * @modified 2025-06-07 Adding helper type `PolygonIntersectionTuple` for re-usability.
  **/
 
 import { Vertex } from "../Vertex";
@@ -114,6 +116,18 @@ export interface CanvasWrapper {
   setSize: (width: number, height: number) => void;
   element: HTMLCanvasElement | SVGElement;
 }
+
+/**
+ * The interface for PB change events.
+ */
+export interface IPBChangeEvent {
+  type: "DRAWABLES_ADDED" | "DRAWABLES_REMOVED";
+  addedDrawables: Array<Drawable>;
+  removedDrawables: Array<Drawable>;
+}
+
+export type PBContentChangeListener = (event: IPBChangeEvent) => void; // A callback function that will be triggered after content changed.
+
 /**
  * The config that's used by PB.
  */
@@ -303,3 +317,20 @@ export interface IBounded {
    **/
   getBounds(): IBounds;
 }
+
+export interface IShapeInteractionHelper {
+  /**
+   * Let this shape helper draw it's handle lines. It's up to the helper what they look like.
+   * @param {DrawLib<any>} draw - The draw library to use.
+   * @param {DrawLib<any>} fill - The fill library to use.
+   */
+  drawHandleLines(draw: DrawLib<any>, fill: DrawLib<any>): void;
+
+  /**
+   * Destroys this helper. This means that all listeners get released and this helper
+   * will not receive or handle any events.
+   */
+  destroy(): void;
+}
+
+export type PolygonIntersectionTuple<T> = { edgeIndex: number; intersection: T };

package/src/ts/utils/LissajousFigure.ts

@@ -0,0 +1,110 @@
+/**
+ * A wrapper for Lissajous figure params.
+ *
+ * @author   Ikaros Kappler
+ * @date     2018-11-22
+ * @modified 2025-10-29 Ported to typescript from demo 13-lissajous.
+ * @version  1.0.0
+ */
+
+import { Vertex } from "../Vertex";
+
+export class LissajousFigure {
+  freqA: number;
+  freqB: number;
+  phaseA: number;
+  phaseB: number;
+
+  /**
+   * Create a new figure with the given settings.
+   * @param {number} freqA - The 'horizontal' frequency.
+   * @param {number} freqB - The 'vertical' frequency.
+   * @param {number} phaseA - The 'horizonal' phase shift.
+   * @param {number} phaseB - The 'vertical' phase shift.
+   */
+  constructor(freqA: number, freqB: number, phaseA: number, phaseB: number) {
+    this.freqA = freqA;
+    this.freqB = freqB;
+    this.phaseA = phaseA;
+    this.phaseB = phaseB;
+  }
+
+  /**
+   * Get the point at the given abstract time.
+   *
+   * The result is periodic in 0..TWO_PI.
+   *
+   * @param {number} t - The timing value (for example milliseconds).
+   * @returns {Vertex} The x-y-position on the Lissajous figure at the given time.
+   */
+  public getPointAt(t: number): Vertex {
+    return new Vertex(Math.sin(this.phaseA + this.freqA * t), Math.sin(this.phaseB + this.freqB * t));
+  }
+
+  public toPolyLine(stepSize: number): Array<Vertex> {
+    const polyLine: Array<Vertex> = [];
+
+    let pA = new Vertex(0, 0);
+
+    stepSize = Math.abs(stepSize);
+    for (var t = 0; t <= 2 * Math.PI; t += stepSize) {
+      pA = this.getPointAt(t);
+      polyLine.push(pA.clone());
+    }
+    return polyLine;
+  }
+
+  public toQuadraticBezierApproximation(
+    stepSize: number
+    // scale: number
+    // alternating: boolean
+  ): Array<[Vertex, Vertex, Vertex] | [Vertex, Vertex]> {
+    const result: Array<[Vertex, Vertex, Vertex] | [Vertex, Vertex]> = [];
+    let pA = new Vertex(0, 0);
+    let pB = new Vertex(0, 0);
+    stepSize = Math.abs(stepSize);
+
+    let p1 = new Vertex(0, 0);
+    let dx1 = this.freqA;
+    let dy1 = this.freqB;
+    pA = this.getPointAt(stepSize);
+    let x2, y2, dx2, dy2, det, x3, y3;
+    var i = 0;
+    for (var t = stepSize; t <= 2 * Math.PI + 2 * stepSize; t += stepSize) {
+      x2 = Math.sin(this.phaseA + this.freqA * t);
+      y2 = Math.sin(this.phaseB + this.freqB * t);
+      dx2 = this.freqA * Math.cos(this.phaseA + this.freqA * t);
+      dy2 = this.freqB * Math.cos(this.phaseB + this.freqB * t);
+      det = dx1 * dy2 - dy1 * dx2;
+      if (Math.abs(det) > 0.1) {
+        x3 = ((x2 * dy2 - y2 * dx2) * dx1 - (p1.x * dy1 - p1.y * dx1) * dx2) / det;
+        y3 = ((x2 * dy2 - y2 * dx2) * dy1 - (p1.x * dy1 - p1.y * dx1) * dy2) / det;
+        // pB.set(scale * x2, scale * y2 * (alternating ? -1 : 1));
+        // pB.set(scale * x2, scale * y2);
+        pB.set(x2, y2);
+
+        // pB.set(x2, y2);
+
+        if (i > 0) {
+          //   pb.draw.quadraticBezier(pA, new Vertex(scale * x3, scale * y3), pB, "rgba(0,108,255,1.0)", 2);
+          //   result.push([pA.clone(), new Vertex(scale * x3, scale * y3), pB.clone()]);
+          result.push([pA.clone(), new Vertex(x3, y3), pB.clone()]);
+        }
+      } else {
+        // pB.set(scale * x2, scale * y2);
+        pB.set(x2, y2);
+
+        if (i > 0) {
+          //   pb.draw.line(pA, pB, "rgba(0,192,192,0.8)", 2);
+          result.push([pA.clone(), pB.clone()]);
+        }
+      }
+      p1.set(x2, y2);
+      dx1 = dx2;
+      dy1 = dy2;
+      pA.set(pB);
+      i++;
+    } // END for
+    return result;
+  }
+}

package/src/ts/utils/PerlinNoise.ts

@@ -0,0 +1,368 @@
+/*
+ * A speed-improved perlin and simplex noise algorithms for 2D.
+ *
+ * Based on example code by Stefan Gustavson (stegu@itn.liu.se).
+ * Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
+ * Better rank ordering method by Stefan Gustavson in 2012.
+ * Converted to Javascript by Joseph Gentle.
+ *
+ * Version 2012-03-09
+ *
+ * This code was placed in the public domain by its original author,
+ * Stefan Gustavson. You may use it as you see fit, but
+ * attribution is appreciated.
+ *
+ * @modified 2023-03-07 Ikaros Kappler; ported to Typescript & refactored to class.
+ * @modified 2025-11-12 Ikaros Kappler; moved from a different project `floatsim` and refactored the class.
+ */
+
+class Grad {
+  x: number;
+  y: number;
+  z: number;
+  constructor(x: number, y: number, z: number) {
+    this.x = x;
+    this.y = y;
+    this.z = z;
+  }
+  dot2(x: number, y: number) {
+    return this.x * x + this.y * y;
+  }
+  dot3(x: number, y: number, z: number) {
+    return this.x * x + this.y * y + this.z * z;
+  }
+}
+
+const grad3: Array<Grad> = [
+  new Grad(1, 1, 0),
+  new Grad(-1, 1, 0),
+  new Grad(1, -1, 0),
+  new Grad(-1, -1, 0),
+  new Grad(1, 0, 1),
+  new Grad(-1, 0, 1),
+  new Grad(1, 0, -1),
+  new Grad(-1, 0, -1),
+  new Grad(0, 1, 1),
+  new Grad(0, -1, 1),
+  new Grad(0, 1, -1),
+  new Grad(0, -1, -1)
+];
+
+const p: Array<number> = [
+  151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23,
+  190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33, 88, 237, 149, 56, 87, 174, 20,
+  125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220,
+  105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196,
+  135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255,
+  82, 85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70, 221,
+  153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228,
+  251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107, 49, 192, 214, 31, 181, 199, 106,
+  157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78,
+  66, 215, 61, 156, 180
+];
+// To remove the need for index wrapping, double the permutation table length
+// const perm = new Array<number>(512);
+// const gradP = new Array<Grad>(512);
+
+// Skewing and unskewing factors for 2, 3, and 4 dimensions
+const F2 = 0.5 * (Math.sqrt(3) - 1);
+const G2 = (3 - Math.sqrt(3)) / 6;
+
+const F3 = 1 / 3;
+const G3 = 1 / 6;
+
+const fade = (t: number) => {
+  return t * t * t * (t * (t * 6 - 15) + 10);
+};
+
+const lerp = (a: number, b: number, t: number) => {
+  return (1 - t) * a + t * b;
+};
+
+// export const noise = {
+export class PerlinNoise {
+  // To remove the need for index wrapping, double the permutation table length
+  perm = new Array<number>(512);
+  gradP = new Array<Grad>(512);
+
+  constructor() {
+    // Use initial seed.
+    this.seed(0);
+  }
+
+  // This isn't a very good seeding function, but it works ok. It supports 2^16
+  // different seed values. Write something better if you need more seeds.
+  //   module.seed = function (seed) {
+  seed(seed: number): PerlinNoise {
+    if (seed > 0 && seed < 1) {
+      // Scale the seed out
+      seed *= 65536;
+    }
+
+    seed = Math.floor(seed);
+    if (seed < 256) {
+      seed |= seed << 8;
+    }
+
+    for (var i = 0; i < 256; i++) {
+      var v: number;
+      if (i & 1) {
+        v = p[i] ^ (seed & 255);
+      } else {
+        v = p[i] ^ ((seed >> 8) & 255);
+      }
+
+      this.perm[i] = this.perm[i + 256] = v;
+      this.gradP[i] = this.gradP[i + 256] = grad3[v % 12];
+    }
+    return this;
+  }
+
+  // 2D simplex noise
+  simplex2(xin: number, yin: number): number {
+    var n0: number, n1: number, n2: number; // Noise contributions from the three corners
+    // Skew the input space to determine which simplex cell we're in
+    const s = (xin + yin) * F2; // Hairy factor for 2D
+    var i: number = Math.floor(xin + s);
+    var j: number = Math.floor(yin + s);
+    const t: number = (i + j) * G2;
+    const x0: number = xin - i + t; // The x,y distances from the cell origin, unskewed.
+    const y0: number = yin - j + t;
+    // For the 2D case, the simplex shape is an equilateral triangle.
+    // Determine which simplex we are in.
+    var i1: number, j1: number; // Offsets for second (middle) corner of simplex in (i,j) coords
+    if (x0 > y0) {
+      // lower triangle, XY order: (0,0)->(1,0)->(1,1)
+      i1 = 1;
+      j1 = 0;
+    } else {
+      // upper triangle, YX order: (0,0)->(0,1)->(1,1)
+      i1 = 0;
+      j1 = 1;
+    }
+    // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
+    // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
+    // c = (3-sqrt(3))/6
+    const x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
+    const y1 = y0 - j1 + G2;
+    const x2 = x0 - 1 + 2 * G2; // Offsets for last corner in (x,y) unskewed coords
+    const y2 = y0 - 1 + 2 * G2;
+    // Work out the hashed gradient indices of the three simplex corners
+    i &= 255;
+    j &= 255;
+    const gi0 = this.gradP[i + this.perm[j]];
+    const gi1 = this.gradP[i + i1 + this.perm[j + j1]];
+    const gi2 = this.gradP[i + 1 + this.perm[j + 1]];
+    // Calculate the contribution from the three corners
+    var t0 = 0.5 - x0 * x0 - y0 * y0;
+    if (t0 < 0) {
+      n0 = 0;
+    } else {
+      t0 *= t0;
+      n0 = t0 * t0 * gi0.dot2(x0, y0); // (x,y) of grad3 used for 2D gradient
+    }
+    var t1 = 0.5 - x1 * x1 - y1 * y1;
+    if (t1 < 0) {
+      n1 = 0;
+    } else {
+      t1 *= t1;
+      n1 = t1 * t1 * gi1.dot2(x1, y1);
+    }
+    var t2 = 0.5 - x2 * x2 - y2 * y2;
+    if (t2 < 0) {
+      n2 = 0;
+    } else {
+      t2 *= t2;
+      n2 = t2 * t2 * gi2.dot2(x2, y2);
+    }
+    // Add contributions from each corner to get the final noise value.
+    // The result is scaled to return values in the interval [-1,1].
+    return 70 * (n0 + n1 + n2);
+  }
+
+  // 3D simplex noise
+  simplex3(xin: number, yin: number, zin: number): number {
+    var n0: number, n1: number, n2: number, n3: number; // Noise contributions from the four corners
+
+    // Skew the input space to determine which simplex cell we're in
+    const s: number = (xin + yin + zin) * F3; // Hairy factor for 2D
+    var i: number = Math.floor(xin + s);
+    var j: number = Math.floor(yin + s);
+    var k: number = Math.floor(zin + s);
+
+    const t: number = (i + j + k) * G3;
+    const x0: number = xin - i + t; // The x,y distances from the cell origin, unskewed.
+    const y0: number = yin - j + t;
+    const z0: number = zin - k + t;
+
+    // For the 3D case, the simplex shape is a slightly irregular tetrahedron.
+    // Determine which simplex we are in.
+    var i1: number, j1: number, k1: number; // Offsets for second corner of simplex in (i,j,k) coords
+    var i2: number, j2: number, k2: number; // Offsets for third corner of simplex in (i,j,k) coords
+    if (x0 >= y0) {
+      if (y0 >= z0) {
+        i1 = 1;
+        j1 = 0;
+        k1 = 0;
+        i2 = 1;
+        j2 = 1;
+        k2 = 0;
+      } else if (x0 >= z0) {
+        i1 = 1;
+        j1 = 0;
+        k1 = 0;
+        i2 = 1;
+        j2 = 0;
+        k2 = 1;
+      } else {
+        i1 = 0;
+        j1 = 0;
+        k1 = 1;
+        i2 = 1;
+        j2 = 0;
+        k2 = 1;
+      }
+    } else {
+      if (y0 < z0) {
+        i1 = 0;
+        j1 = 0;
+        k1 = 1;
+        i2 = 0;
+        j2 = 1;
+        k2 = 1;
+      } else if (x0 < z0) {
+        i1 = 0;
+        j1 = 1;
+        k1 = 0;
+        i2 = 0;
+        j2 = 1;
+        k2 = 1;
+      } else {
+        i1 = 0;
+        j1 = 1;
+        k1 = 0;
+        i2 = 1;
+        j2 = 1;
+        k2 = 0;
+      }
+    }
+    // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
+    // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
+    // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
+    // c = 1/6.
+    const x1: number = x0 - i1 + G3; // Offsets for second corner
+    const y1: number = y0 - j1 + G3;
+    const z1: number = z0 - k1 + G3;
+
+    const x2: number = x0 - i2 + 2 * G3; // Offsets for third corner
+    const y2: number = y0 - j2 + 2 * G3;
+    const z2: number = z0 - k2 + 2 * G3;
+
+    const x3: number = x0 - 1 + 3 * G3; // Offsets for fourth corner
+    const y3: number = y0 - 1 + 3 * G3;
+    const z3: number = z0 - 1 + 3 * G3;
+
+    // Work out the hashed gradient indices of the four simplex corners
+    i &= 255;
+    j &= 255;
+    k &= 255;
+    const gi0: Grad = this.gradP[i + this.perm[j + this.perm[k]]];
+    const gi1: Grad = this.gradP[i + i1 + this.perm[j + j1 + this.perm[k + k1]]];
+    const gi2: Grad = this.gradP[i + i2 + this.perm[j + j2 + this.perm[k + k2]]];
+    const gi3: Grad = this.gradP[i + 1 + this.perm[j + 1 + this.perm[k + 1]]];
+
+    // Calculate the contribution from the four corners
+    var t0: number = 0.5 - x0 * x0 - y0 * y0 - z0 * z0;
+    if (t0 < 0) {
+      n0 = 0;
+    } else {
+      t0 *= t0;
+      n0 = t0 * t0 * gi0.dot3(x0, y0, z0); // (x,y) of grad3 used for 2D gradient
+    }
+    var t1 = 0.5 - x1 * x1 - y1 * y1 - z1 * z1;
+    if (t1 < 0) {
+      n1 = 0;
+    } else {
+      t1 *= t1;
+      n1 = t1 * t1 * gi1.dot3(x1, y1, z1);
+    }
+    var t2 = 0.5 - x2 * x2 - y2 * y2 - z2 * z2;
+    if (t2 < 0) {
+      n2 = 0;
+    } else {
+      t2 *= t2;
+      n2 = t2 * t2 * gi2.dot3(x2, y2, z2);
+    }
+    var t3 = 0.5 - x3 * x3 - y3 * y3 - z3 * z3;
+    if (t3 < 0) {
+      n3 = 0;
+    } else {
+      t3 *= t3;
+      n3 = t3 * t3 * gi3.dot3(x3, y3, z3);
+    }
+    // Add contributions from each corner to get the final noise value.
+    // The result is scaled to return values in the interval [-1,1].
+    return 32 * (n0 + n1 + n2 + n3);
+  }
+
+  // 2D Perlin Noise
+  perlin2(x_init: number, y_init: number): number {
+    // Find unit grid cell containing point
+    var X: number = Math.floor(x_init),
+      Y: number = Math.floor(y_init);
+    // Get relative xy coordinates of point within that cell
+    const x: number = x_init - X;
+    const y: number = y_init - Y;
+    // Wrap the integer cells at 255 (smaller integer period can be introduced here)
+    X = X & 255;
+    Y = Y & 255;
+
+    // Calculate noise contributions from each of the four corners
+    const n00: number = this.gradP[X + this.perm[Y]].dot2(x, y);
+    const n01: number = this.gradP[X + this.perm[Y + 1]].dot2(x, y - 1);
+    const n10: number = this.gradP[X + 1 + this.perm[Y]].dot2(x - 1, y);
+    const n11: number = this.gradP[X + 1 + this.perm[Y + 1]].dot2(x - 1, y - 1);
+
+    // Compute the fade curve value for x
+    const u: number = fade(x);
+
+    // Interpolate the four results
+    return lerp(lerp(n00, n10, u), lerp(n01, n11, u), fade(y));
+  }
+
+  // 3D Perlin Noise
+  perlin3(x_init: number, y_init: number, z_init: number): number {
+    // Find unit grid cell containing point
+    var X: number = Math.floor(x_init),
+      Y: number = Math.floor(y_init),
+      Z: number = Math.floor(z_init);
+    // Get relative xyz coordinates of point within that cell
+    const x: number = x_init - X;
+    const y: number = y_init - Y;
+    const z: number = z_init - Z;
+    // Wrap the integer cells at 255 (smaller integer period can be introduced here)
+    X = X & 255;
+    Y = Y & 255;
+    Z = Z & 255;
+
+    // Calculate noise contributions from each of the eight corners
+    const n000: number = this.gradP[X + this.perm[Y + this.perm[Z]]].dot3(x, y, z);
+    const n001: number = this.gradP[X + this.perm[Y + this.perm[Z + 1]]].dot3(x, y, z - 1);
+    const n010: number = this.gradP[X + this.perm[Y + 1 + this.perm[Z]]].dot3(x, y - 1, z);
+    const n011: number = this.gradP[X + this.perm[Y + 1 + this.perm[Z + 1]]].dot3(x, y - 1, z - 1);
+    const n100: number = this.gradP[X + 1 + this.perm[Y + this.perm[Z]]].dot3(x - 1, y, z);
+    const n101: number = this.gradP[X + 1 + this.perm[Y + this.perm[Z + 1]]].dot3(x - 1, y, z - 1);
+    const n110: number = this.gradP[X + 1 + this.perm[Y + 1 + this.perm[Z]]].dot3(x - 1, y - 1, z);
+    const n111: number = this.gradP[X + 1 + this.perm[Y + 1 + this.perm[Z + 1]]].dot3(x - 1, y - 1, z - 1);
+
+    // Compute the fade curve value for x, y, z
+    const u: number = fade(x);
+    const v: number = fade(y);
+    const w: number = fade(z);
+
+    // Interpolate
+    return lerp(lerp(lerp(n000, n100, u), lerp(n001, n101, u), w), lerp(lerp(n010, n110, u), lerp(n011, n111, u), w), v);
+  }
+}
+
+// noise.seed(0);

package/src/ts/utils/SVGPathUtils.ts

@@ -0,0 +1,55 @@
+/**
+ * A collection of SVG path generation tools.
+ *
+ * @author  Ikaros Kappler
+ * @date    2025-04-04
+ * @version 1.0.0
+ */
+
+import { Circle } from "../Circle";
+import { Vertex } from "../Vertex";
+import { geomutils } from "../geomutils";
+import { SVGPathParams } from "../interfaces";
+
+export const SVGPathUtils = {
+  /**
+   * Creates an SVG shape resembling a circlular ring sector.
+   *
+   * @param {Vertex} center - The center position of the ring.
+   * @param {number} innerRadius - The inner radius of the ring.
+   * @param {number} outerRadius - The outer radius of the ring.
+   * @param {number} startAngle - The start angle of the ring.
+   * @param {number} endAngle - The end angle of the ring.
+   * @returns {SVGPathParams} SVG path parmams for a closed shape representing the circular ring sector.
+   */
+  mkCircularRingSector: (
+    center: Vertex,
+    innerRadius: number,
+    outerRadius: number,
+    startAngle: number,
+    endAngle: number
+  ): SVGPathParams => {
+    const innerStart: Vertex = Circle.circleUtils.vertAt(startAngle, innerRadius).add(center);
+    const innerEnd: Vertex = Circle.circleUtils.vertAt(endAngle, innerRadius).add(center);
+    const outerStart: Vertex = Circle.circleUtils.vertAt(startAngle, outerRadius).add(center);
+    const outerEnd: Vertex = Circle.circleUtils.vertAt(endAngle, outerRadius).add(center);
+
+    const buffer: SVGPathParams = ["M", innerStart.x, innerStart.y];
+    // var isLargeArcRequired = geomutils.mapAngleTo2PI(Math.abs(startAngle - endAngle)) >= Math.PI;
+    // var isLargeArcRequired = Math.abs(geomutils.mapAngleTo2PI(startAngle) - geomutils.mapAngleTo2PI(endAngle)) >= Math.PI;
+    const isLargeArcRequired =
+      geomutils.mapAngleTo2PI(geomutils.mapAngleTo2PI(startAngle) - geomutils.mapAngleTo2PI(endAngle)) >= Math.PI;
+
+    const rotation: number = 0.0;
+    const innerLargeArcFlag: number = isLargeArcRequired ? 0 : 1;
+    const innerSweepFlag: number = 1; // isLargeArcRequired ? 1 : 0; // 1;
+    const outerLargeArcFlag: number = isLargeArcRequired ? 0 : 1;
+    const outerSweepFlag: number = 0; // isLargeArcRequired ? 0 : 1; // 0;
+    buffer.push("A", innerRadius, innerRadius, rotation, innerLargeArcFlag, innerSweepFlag, innerEnd.x, innerEnd.y);
+    buffer.push("L", outerEnd.x, outerEnd.y);
+    buffer.push("A", outerRadius, outerRadius, rotation, outerLargeArcFlag, outerSweepFlag, outerStart.x, outerStart.y);
+    buffer.push("Z");
+
+    return buffer;
+  }
+};