plotboilerplate 1.25.0 → 1.27.0

package/src/ts/draw.ts

@@ -57,7 +57,9 @@
  * @modified 2023-09-30 Adding `strokeOptions` param to these draw function: line, arrow, cubicBezierArrow, cubicBezier, cubicBezierPath, circle, circleArc, ellipse, square, rect, polygon, polyline.
  * @modified 2023-10-07 Adding the optional `arrowHeadBasePositionBuffer` param to the arrowHead(...) method.
  * @modified 2024-09-13 Remoed the scaling of `lineWidth` in the `polygon` and `polyline` methods. This makes no sense here and doesn't match up with the behavior of other line functions.
- * @version  1.13.0
+ * @modified 2026-01-04 Adding `lineJoin` attribute to the `StrokeOptions`.
+ * @modified 2026-03-18 Adding `isOpen` parameter to `cubicBezierPath` draw method.
+ * @version  1.14.0
  **/
 
 import { CubicBezierCurve } from "./CubicBezierCurve";
@@ -140,6 +142,7 @@ export class drawutils implements DrawLib<void> {
       })
     );
     this.ctx.lineDashOffset = (strokeOptions?.dashOffset ?? 0) * this.scale.x;
+    this.ctx.lineJoin = strokeOptions?.lineJoin ?? null;
   }
 
   // +---------------------------------------------------------------------------------
@@ -698,7 +701,7 @@ export class drawutils implements DrawLib<void> {
    * @instance
    * @memberof drawutils
    */
-  cubicBezierPath(path: Array<XYCoords>, color: string, lineWidth?: number, strokeOptions?: StrokeOptions) {
+  cubicBezierPath(path: Array<XYCoords>, color: string, lineWidth?: number, strokeOptions?: StrokeOptions, isOpen?: boolean) {
     if (!path || path.length == 0) {
       return;
     }
@@ -723,7 +726,9 @@ export class drawutils implements DrawLib<void> {
         this.offset.y + endPoint.y * this.scale.y
       );
     }
-    this.ctx.closePath();
+    if (!isOpen) {
+      this.ctx.closePath();
+    }
     this.ctx.lineWidth = lineWidth || 1;
     this._fillOrDraw(color);
     this.ctx.restore();

package/src/ts/drawgl.ts

@@ -16,12 +16,13 @@
  * @modified 2023-09-29 Added the `arrowHead(...)` function to the 'DrawLib.arrow()` interface.
  * @modified 2023-09-29 Added the `cubicBezierArrow(...)` function to the 'DrawLib.arrow()` interface.
  * @modified 2023-09-29 Added the `lineDashes` attribute.
+ * @modified 2026-03-18 Adding `isOpen` parameter to `cubicBezierPath` draw method.
  * @version  0.0.10
  **/
 
 import { Polygon } from "./Polygon";
 import { Vertex } from "./Vertex";
-import { DrawLib, XYCoords, SVGPathParams, UID, DrawLibConfiguration, FontStyle, FontWeight } from "./interfaces";
+import { DrawLib, XYCoords, SVGPathParams, UID, DrawLibConfiguration, FontStyle, FontWeight, StrokeOptions } from "./interfaces";
 import { Bounds } from "./Bounds";
 
 /**
@@ -426,7 +427,7 @@ export class drawutilsgl implements DrawLib<void> {
    * @instance
    * @memberof drawutils
    */
-  cubicBezierPath(path: Array<XYCoords>, color: string, lineWidth?: number) {
+  cubicBezierPath(path: Array<XYCoords>, color: string, lineWidth?: number, strokeOptions?: StrokeOptions, isOpen?: boolean) {
     // NOT YET IMPLEMENTED
   }
 

package/src/ts/drawutilssvg.ts

@@ -47,7 +47,11 @@
  * @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).
+ * @modified 2026-01-04 Adding `lineJoin` attribute to the methods' `StrokeOptions` param.
+ * @modified 2026-01-04 Fixing missing `strokeOptions` param in the `drawutilssvg.polygon` method.
+ * @modified 2026-03-18 Adding `isOpen` parameter to `cubicBezierPath` draw method.
+ * @version  1.7.0
  **/
 
 import { CircleSector } from "./CircleSector";
@@ -416,8 +420,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(" "));
@@ -650,6 +658,7 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
    * @param {StrokeOptions=} strokeOptions -
    */
   private applyStrokeOpts(node: SVGElement, strokeOptions?: StrokeOptions) {
+    // Set line dash options?
     if (
       strokeOptions &&
       strokeOptions.dashArray &&
@@ -668,6 +677,10 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
         node.setAttribute("stroke-dashoffset", `${strokeOptions.dashOffset * this.scale.x}`);
       }
     }
+    // Set line join option?
+    if (strokeOptions && strokeOptions.lineJoin && drawutilssvg.nodeSupportsLineJoin(node.tagName)) {
+      node.setAttribute("stroke-linejoin", strokeOptions.lineJoin);
+    }
   }
 
   private _x(x: number): number {
@@ -998,12 +1011,18 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
    * @param {string} color - The CSS colot to draw the path with.
    * @param {number=1} lineWidth - (optional) The line width to use.
    * @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
-   *
+   * @param {boolean} isOpen - (optional) Set to tur if the path should not be closed.
    * @return {void}
    * @instance
    * @memberof drawutilssvg
    */
-  cubicBezierPath(path: Array<XYCoords>, color: string, lineWidth?: number, strokeOptions?: StrokeOptions): SVGElement {
+  cubicBezierPath(
+    path: Array<XYCoords>,
+    color: string,
+    lineWidth?: number,
+    strokeOptions?: StrokeOptions,
+    isOpen?: boolean
+  ): SVGElement {
     const node: SVGElement = this.makeNode("path");
     this.applyStrokeOpts(node, strokeOptions);
     if (!path || path.length == 0) {
@@ -1031,6 +1050,9 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
         this._y(endPoint.y)
       );
     }
+    if (!isOpen) {
+      d.push("Z");
+    }
     node.setAttribute("d", d.join(" "));
     return this._bindFillDraw(node, "cubicBezierPath", color, lineWidth || 1);
   }
@@ -1532,12 +1554,13 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
    * @param {Polygon} polygon - The polygon to draw.
    * @param {string} color - The CSS color to draw the polygon with.
    * @param {number=} lineWidth - (optional) The line width to use; default is 1.
+   * @param {StrokeOptions=} strokeOptions - (optional) Stroke settings to use.
    * @return {void}
    * @instance
    * @memberof drawutilssvg
    */
-  polygon(polygon: Polygon, color: string, lineWidth?: number): SVGElement {
-    return this.polyline(polygon.vertices, polygon.isOpen, color, lineWidth);
+  polygon(polygon: Polygon, color: string, lineWidth?: number, strokeOptions?: StrokeOptions): SVGElement {
+    return this.polyline(polygon.vertices, polygon.isOpen, color, lineWidth, strokeOptions);
   }
 
   /**
@@ -1956,6 +1979,10 @@ export class drawutilssvg implements DrawLib<void | SVGElement> {
     return ["line", "path", "circle", "ellipse", "rectangle", "rect"].includes(nodeName);
   }
 
+  private static nodeSupportsLineJoin(nodeName: string) {
+    return ["line", "path", "circle", "ellipse", "rectangle", "rect"].includes(nodeName);
+  }
+
   /**
    * Creates a basic <line> node with start and end coordinates. The created node will not
    * be bound to any root node.

package/src/ts/interfaces/DrawLib.ts

@@ -25,6 +25,7 @@
  * @modified 2023-09-29 Added the `cubicBezierArrow(...)` function to the 'DrawLib.arrow()` interface.
  * @modified 2023-09-29 Added the `lineDashes` attribute.
  * @modified 2023-09-30 Adding `strokeOptions` param to these draw function: line, arrow, cubicBezierArrow, cubicBezier, cubicBezierPath, circle, circleArc, ellipse, square, rect, polygon, polyline.
+ * @modified 2026-01-04 Adding optional `lineJoin` attribute to the `StrokeOptions` interface.
  **/
 
 import { Bounds } from "../Bounds";
@@ -68,6 +69,8 @@ export interface FontOptions {
 export interface StrokeOptions {
   dashOffset?: number;
   dashArray?: Array<number>;
+  // SVG has more options for this: arcs | bevel | miter | miter-clip | round
+  lineJoin?: "round" | "bevel" | "miter";
 }
 
 /**

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);