import { a7 as FLAT, a8 as SMOOTH } from '../constants-BxjhKpTv.js';
import { DataArray } from './p5.DataArray.js';
import { Vector } from '../math/p5.Vector.js';
import { downloadFile } from '../io/utilities.js';

/**
 * @module Shape
 * @submodule 3D Primitives
 * @for p5
 * @requires core
 * @requires p5.Geometry
 */


class Geometry {
  constructor(detailX, detailY, callback, renderer) {
    this.renderer = renderer;
    this.vertices = [];

    this.boundingBoxCache = null;


    //an array containing every vertex for stroke drawing
    this.lineVertices = new DataArray();

    // The tangents going into or out of a vertex on a line. Along a straight
    // line segment, both should be equal. At an endpoint, one or the other
    // will not exist and will be all 0. In joins between line segments, they
    // may be different, as they will be the tangents on either side of the join.
    this.lineTangentsIn = new DataArray();
    this.lineTangentsOut = new DataArray();

    // When drawing lines with thickness, entries in this buffer represent which
    // side of the centerline the vertex will be placed. The sign of the number
    // will represent the side of the centerline, and the absolute value will be
    // used as an enum to determine which part of the cap or join each vertex
    // represents. See the doc comments for _addCap and _addJoin for diagrams.
    this.lineSides = new DataArray();

    this.vertexNormals = [];

    this.faces = [];

    this.uvs = [];
    // a 2D array containing edge connectivity pattern for create line vertices
    //based on faces for most objects;
    this.edges = [];
    this.vertexColors = [];

    // One color per vertex representing the stroke color at that vertex
    this.vertexStrokeColors = [];

    this.userVertexProperties = {};

    // One color per line vertex, generated automatically based on
    // vertexStrokeColors in _edgesToVertices()
    this.lineVertexColors = new DataArray();
    this.detailX = detailX !== undefined ? detailX : 1;
    this.detailY = detailY !== undefined ? detailY : 1;
    this.dirtyFlags = {};

    this._hasFillTransparency = undefined;
    this._hasStrokeTransparency = undefined;

    this.gid = `_p5_Geometry_${Geometry.nextId}`;
    Geometry.nextId++;
    if (callback instanceof Function) {
      callback.call(this);
    }
  }

  /**
   * Calculates the position and size of the smallest box that contains the geometry.
   *
   * A bounding box is the smallest rectangular prism that contains the entire
   * geometry. It's defined by the box's minimum and maximum coordinates along
   * each axis, as well as the size (length) and offset (center).
   *
   * Calling `myGeometry.calculateBoundingBox()` returns an object with four
   * properties that describe the bounding box:
   *
   * ```js
   * // Get myGeometry's bounding box.
   * let bbox = myGeometry.calculateBoundingBox();
   *
   * // Print the bounding box to the console.
   * console.log(bbox);
   *
   * // {
   * //  // The minimum coordinate along each axis.
   * //  min: { x: -1, y: -2, z: -3 },
   * //
   * //  // The maximum coordinate along each axis.
   * //  max: { x: 1, y: 2, z: 3},
   * //
   * //  // The size (length) along each axis.
   * //  size: { x: 2, y: 4, z: 6},
   * //
   * //  // The offset (center) along each axis.
   * //  offset: { x: 0, y: 0, z: 0}
   * // }
   * ```
   *
   * @returns {Object} bounding box of the geometry.
   *
   * @example
   * // Click and drag the mouse to view the scene from different angles.
   *
   * let particles;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create a new p5.Geometry object with random spheres.
   *   particles = buildGeometry(createParticles);
   *
   *   describe('Ten white spheres placed randomly against a gray background. A box encloses the spheres.');
   * }
   *
   * function draw() {
   *   background(50);
   *
   *   // Enable orbiting with the mouse.
   *   orbitControl();
   *
   *   // Turn on the lights.
   *   lights();
   *
   *   // Style the particles.
   *   noStroke();
   *   fill(255);
   *
   *   // Draw the particles.
   *   model(particles);
   *
   *   // Calculate the bounding box.
   *   let bbox = particles.calculateBoundingBox();
   *
   *   // Translate to the bounding box's center.
   *   translate(bbox.offset.x, bbox.offset.y, bbox.offset.z);
   *
   *   // Style the bounding box.
   *   stroke(255);
   *   noFill();
   *
   *   // Draw the bounding box.
   *   box(bbox.size.x, bbox.size.y, bbox.size.z);
   * }
   *
   * function createParticles() {
   *   for (let i = 0; i < 10; i += 1) {
   *     // Calculate random coordinates.
   *     let x = randomGaussian(0, 15);
   *     let y = randomGaussian(0, 15);
   *     let z = randomGaussian(0, 15);
   *
   *     push();
   *     // Translate to the particle's coordinates.
   *     translate(x, y, z);
   *     // Draw the particle.
   *     sphere(3);
   *     pop();
   *   }
   * }
   */
  calculateBoundingBox() {
    if (this.boundingBoxCache) {
      return this.boundingBoxCache; // Return cached result if available
    }

    let minVertex = new Vector(
      Number.MAX_VALUE, Number.MAX_VALUE, Number.MAX_VALUE);
    let maxVertex = new Vector(
      Number.MIN_VALUE, Number.MIN_VALUE, Number.MIN_VALUE);

    for (let i = 0; i < this.vertices.length; i++) {
      let vertex = this.vertices[i];
      minVertex.x = Math.min(minVertex.x, vertex.x);
      minVertex.y = Math.min(minVertex.y, vertex.y);
      minVertex.z = Math.min(minVertex.z, vertex.z);

      maxVertex.x = Math.max(maxVertex.x, vertex.x);
      maxVertex.y = Math.max(maxVertex.y, vertex.y);
      maxVertex.z = Math.max(maxVertex.z, vertex.z);
    }
    // Calculate size and offset properties
    let size = new Vector(maxVertex.x - minVertex.x,
      maxVertex.y - minVertex.y, maxVertex.z - minVertex.z);
    let offset = new Vector((minVertex.x + maxVertex.x) / 2,
      (minVertex.y + maxVertex.y) / 2, (minVertex.z + maxVertex.z) / 2);

    // Cache the result for future access
    this.boundingBoxCache = {
      min: minVertex,
      max: maxVertex,
      size: size,
      offset: offset
    };

    return this.boundingBoxCache;
  }

  reset() {
    // Notify renderer that geometry is being reset (for buffer cleanup)
    this.renderer?.onReset?.(this);

    this._hasFillTransparency = undefined;
    this._hasStrokeTransparency = undefined;

    this.lineVertices.clear();
    this.lineTangentsIn.clear();
    this.lineTangentsOut.clear();
    this.lineSides.clear();

    this.vertices.length = 0;
    this.edges.length = 0;
    this.vertexColors.length = 0;
    this.vertexStrokeColors.length = 0;
    this.lineVertexColors.clear();
    this.vertexNormals.length = 0;
    this.uvs.length = 0;

    for (const propName in this.userVertexProperties){
      this.userVertexProperties[propName].delete();
    }
    this.userVertexProperties = {};

    this.dirtyFlags = {};
  }

  hasFillTransparency() {
    if (this._hasFillTransparency === undefined) {
      this._hasFillTransparency = false;
      for (let i = 0; i < this.vertexColors.length; i += 4) {
        if (this.vertexColors[i + 3] < 1) {
          this._hasFillTransparency = true;
          break;
        }
      }
    }
    return this._hasFillTransparency;
  }
  hasStrokeTransparency() {
    if (this._hasStrokeTransparency === undefined) {
      this._hasStrokeTransparency = false;
      for (let i = 0; i < this.lineVertexColors.length; i += 4) {
        if (this.lineVertexColors[i + 3] < 1) {
          this._hasStrokeTransparency = true;
          break;
        }
      }
    }
    return this._hasStrokeTransparency;
  }

  /**
   * Removes the geometry’s internal colors.
   *
   * `p5.Geometry` objects can be created with "internal colors" assigned to
   * vertices or the entire shape. When a geometry has internal colors,
   * <a href="#/p5/fill">fill()</a> has no effect. Calling
   * `myGeometry.clearColors()` allows the
   * <a href="#/p5/fill">fill()</a> function to apply color to the geometry.
   *
   * @example
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   background(200);
   *
   *   // Create a p5.Geometry object.
   *   // Set its internal color to red.
   *   let myGeometry = buildGeometry(function() {
   *     fill(255, 0, 0);
   *     plane(20);
   *   });
   *
   *   // Style the shape.
   *   noStroke();
   *
   *   // Draw the p5.Geometry object (center).
   *   model(myGeometry);
   *
   *   // Translate the origin to the bottom-right.
   *   translate(25, 25, 0);
   *
   *   // Try to fill the geometry with green.
   *   fill(0, 255, 0);
   *
   *   // Draw the geometry again (bottom-right).
   *   model(myGeometry);
   *
   *   // Clear the geometry's colors.
   *   myGeometry.clearColors();
   *
   *   // Fill the geometry with blue.
   *   fill(0, 0, 255);
   *
   *   // Translate the origin up.
   *   translate(0, -50, 0);
   *
   *   // Draw the geometry again (top-right).
   *   model(myGeometry);
   *
   *   describe(
   *     'Three squares drawn against a gray background. Red squares are at the center and the bottom-right. A blue square is at the top-right.'
   *   );
   * }
   */
  clearColors() {
    this.vertexColors = [];
    return this;
  }

  /**
   * The `saveObj()` function exports `p5.Geometry` objects as
   * 3D models in the Wavefront .obj file format.
   * This way, you can use the 3D shapes you create in p5.js in other software
   * for rendering, animation, 3D printing, or more.
   *
   * The exported .obj file will include the faces and vertices of the `p5.Geometry`,
   * as well as its texture coordinates and normals, if it has them.
   *
   * @method saveObj
   * @param {String} [fileName='model.obj'] The name of the file to save the model as.
   *                                        If not specified, the default file name will be 'model.obj'.
   * @example
   * let myModel;
   * let saveBtn;
   * function setup() {
   *   createCanvas(200, 200, WEBGL);
   *   myModel = buildGeometry(function()) {
   *     for (let i = 0; i < 5; i++) {
   *       push();
   *       translate(
   *         random(-75, 75),
   *         random(-75, 75),
   *         random(-75, 75)
   *       );
   *       sphere(random(5, 50));
   *       pop();
   *     }
   *   });
   *
   *   saveBtn = createButton('Save .obj');
   *   saveBtn.mousePressed(() => myModel.saveObj());
   *
   *   describe('A few spheres rotating in space');
   * }
   *
   * function draw() {
   *   background(0);
   *   noStroke();
   *   lights();
   *   rotateX(millis() * 0.001);
   *   rotateY(millis() * 0.002);
   *   model(myModel);
   * }
   */
  saveObj(fileName = 'model.obj') {
    let objStr= '';


    // Vertices
    this.vertices.forEach(v => {
      objStr += `v ${v.x} ${v.y} ${v.z}\n`;
    });

    // Texture Coordinates (UVs)
    if (this.uvs && this.uvs.length > 0) {
      for (let i = 0; i < this.uvs.length; i += 2) {
        objStr += `vt ${this.uvs[i]} ${this.uvs[i + 1]}\n`;
      }
    }

    // Vertex Normals
    if (this.vertexNormals && this.vertexNormals.length > 0) {
      this.vertexNormals.forEach(n => {
        objStr += `vn ${n.x} ${n.y} ${n.z}\n`;
      });

    }
    // Faces, obj vertex indices begin with 1 and not 0
    // texture coordinate (uvs) and vertexNormal indices
    // are indicated with trailing ints vertex/normal/uv
    // ex 1/1/1 or 2//2 for vertices without uvs
    this.faces.forEach(face => {
      let faceStr = 'f';
      face.forEach(index =>{
        faceStr += ' ';
        faceStr += index + 1;
        if (this.vertexNormals.length > 0 || this.uvs.length > 0) {
          faceStr += '/';
          if (this.uvs.length > 0) {
            faceStr += index + 1;
          }
          faceStr += '/';
          if (this.vertexNormals.length > 0) {
            faceStr += index + 1;
          }
        }
      });
      objStr += faceStr + '\n';
    });

    const blob = new Blob([objStr], { type: 'text/plain' });
    downloadFile(blob, fileName , 'obj');

  }

  /**
   * The `saveStl()` function exports `p5.Geometry` objects as
   * 3D models in the STL stereolithography file format.
   * This way, you can use the 3D shapes you create in p5.js in other software
   * for rendering, animation, 3D printing, or more.
   *
   * The exported .stl file will include the faces, vertices, and normals of the `p5.Geometry`.
   *
   * By default, this method saves a text-based .stl file. Alternatively, you can save a more compact
   * but less human-readable binary .stl file by passing `{ binary: true }` as a second parameter.
   *
   * @method saveStl
   * @param {String} [fileName='model.stl'] The name of the file to save the model as.
   *                                        If not specified, the default file name will be 'model.stl'.
   * @param {Object} [options] Optional settings.
   * @param {Boolean} [options.binary=false] Whether or not a binary .stl file is saved.
   * @example
   * let myModel;
   * let saveBtn1;
   * let saveBtn2;
   * function setup() {
   *   createCanvas(200, 200, WEBGL);
   *   myModel = buildGeometry(function() {
   *     for (let i = 0; i < 5; i++) {
   *       push();
   *       translate(
   *         random(-75, 75),
   *         random(-75, 75),
   *         random(-75, 75)
   *       );
   *       sphere(random(5, 50));
   *       pop();
   *     }
   *   });
   *
   *   saveBtn1 = createButton('Save .stl');
   *   saveBtn1.mousePressed(function() {
   *     myModel.saveStl();
   *   });
   *   saveBtn2 = createButton('Save binary .stl');
   *   saveBtn2.mousePressed(function() {
   *     myModel.saveStl('model.stl', { binary: true });
   *   });
   *
   *   describe('A few spheres rotating in space');
   * }
   *
   * function draw() {
   *   background(0);
   *   noStroke();
   *   lights();
   *   rotateX(millis() * 0.001);
   *   rotateY(millis() * 0.002);
   *   model(myModel);
   * }
   */
  saveStl(fileName = 'model.stl', { binary = false } = {}){
    let modelOutput;
    let name = fileName.substring(0, fileName.lastIndexOf('.'));
    let faceNormals = [];
    for (let f of this.faces) {
      const U = Vector.sub(this.vertices[f[1]], this.vertices[f[0]]);
      const V = Vector.sub(this.vertices[f[2]], this.vertices[f[0]]);
      const nx = U.y * V.z - U.z * V.y;
      const ny = U.z * V.x - U.x * V.z;
      const nz = U.x * V.y - U.y * V.x;
      faceNormals.push(new Vector(nx, ny, nz).normalize());
    }
    if (binary) {
      let offset = 80;
      const bufferLength =
        this.faces.length * 2 + this.faces.length * 3 * 4 * 4 + 80 + 4;
      const arrayBuffer = new ArrayBuffer(bufferLength);
      modelOutput = new DataView(arrayBuffer);
      modelOutput.setUint32(offset, this.faces.length, true);
      offset += 4;
      for (const [key, f] of Object.entries(this.faces)) {
        const norm = faceNormals[key];
        modelOutput.setFloat32(offset, norm.x, true);
        offset += 4;
        modelOutput.setFloat32(offset, norm.y, true);
        offset += 4;
        modelOutput.setFloat32(offset, norm.z, true);
        offset += 4;
        for (let vertexIndex of f) {
          const vert = this.vertices[vertexIndex];
          modelOutput.setFloat32(offset, vert.x, true);
          offset += 4;
          modelOutput.setFloat32(offset, vert.y, true);
          offset += 4;
          modelOutput.setFloat32(offset, vert.z, true);
          offset += 4;
        }
        modelOutput.setUint16(offset, 0, true);
        offset += 2;
      }
    } else {
      modelOutput = 'solid ' + name + '\n';

      for (const [key, f] of Object.entries(this.faces)) {
        const norm = faceNormals[key];
        modelOutput +=
          ' facet norm ' + norm.x + ' ' + norm.y + ' ' + norm.z + '\n';
        modelOutput += '  outer loop' + '\n';
        for (let vertexIndex of f) {
          const vert = this.vertices[vertexIndex];
          modelOutput +=
            '   vertex ' + vert.x + ' ' + vert.y + ' ' + vert.z + '\n';
        }
        modelOutput += '  endloop' + '\n';
        modelOutput += ' endfacet' + '\n';
      }
      modelOutput += 'endsolid ' + name + '\n';
    }
    const blob = new Blob([modelOutput], { type: 'text/plain' });
    downloadFile(blob, fileName, 'stl');
  }

  /**
   * Flips the geometry’s texture u-coordinates.
   *
   * In order for <a href="#/p5/texture">texture()</a> to work, the geometry
   * needs a way to map the points on its surface to the pixels in a rectangular
   * image that's used as a texture. The geometry's vertex at coordinates
   * `(x, y, z)` maps to the texture image's pixel at coordinates `(u, v)`.
   *
   * The <a href="#/p5.Geometry/uvs">myGeometry.uvs</a> array stores the
   * `(u, v)` coordinates for each vertex in the order it was added to the
   * geometry. Calling `myGeometry.flipU()` flips a geometry's u-coordinates
   * so that the texture appears mirrored horizontally.
   *
   * For example, a plane's four vertices are added clockwise starting from the
   * top-left corner. Here's how calling `myGeometry.flipU()` would change a
   * plane's texture coordinates:
   *
   * ```js
   * // Print the original texture coordinates.
   * // Output: [0, 0, 1, 0, 0, 1, 1, 1]
   * console.log(myGeometry.uvs);
   *
   * // Flip the u-coordinates.
   * myGeometry.flipU();
   *
   * // Print the flipped texture coordinates.
   * // Output: [1, 0, 0, 0, 1, 1, 0, 1]
   * console.log(myGeometry.uvs);
   *
   * // Notice the swaps:
   * // Top vertices: [0, 0, 1, 0] --> [1, 0, 0, 0]
   * // Bottom vertices: [0, 1, 1, 1] --> [1, 1, 0, 1]
   * ```
   *
   * @for p5.Geometry
   *
   * @example
   * let img;
   *
   * async function setup() {
   *   img = await loadImage('assets/laDefense.jpg');
   *   createCanvas(100, 100, WEBGL);
   *
   *   background(200);
   *
   *   // Create p5.Geometry objects.
   *   let geom1 = buildGeometry(createShape);
   *   let geom2 = buildGeometry(createShape);
   *
   *   // Flip geom2's U texture coordinates.
   *   geom2.flipU();
   *
   *   // Left (original).
   *   push();
   *   translate(-25, 0, 0);
   *   texture(img);
   *   noStroke();
   *   model(geom1);
   *   pop();
   *
   *   // Right (flipped).
   *   push();
   *   translate(25, 0, 0);
   *   texture(img);
   *   noStroke();
   *   model(geom2);
   *   pop();
   *
   *   describe(
   *     'Two photos of a ceiling on a gray background. The photos are mirror images of each other.'
   *   );
   * }
   *
   * function createShape() {
   *   plane(40);
   * }
   */
  flipU() {
    this.uvs = this.uvs.flat().map((val, index) => {
      if (index % 2 === 0) {
        return 1 - val;
      } else {
        return val;
      }
    });
  }

  /**
   * Flips the geometry’s texture v-coordinates.
   *
   * In order for <a href="#/p5/texture">texture()</a> to work, the geometry
   * needs a way to map the points on its surface to the pixels in a rectangular
   * image that's used as a texture. The geometry's vertex at coordinates
   * `(x, y, z)` maps to the texture image's pixel at coordinates `(u, v)`.
   *
   * The <a href="#/p5.Geometry/uvs">myGeometry.uvs</a> array stores the
   * `(u, v)` coordinates for each vertex in the order it was added to the
   * geometry. Calling `myGeometry.flipV()` flips a geometry's v-coordinates
   * so that the texture appears mirrored vertically.
   *
   * For example, a plane's four vertices are added clockwise starting from the
   * top-left corner. Here's how calling `myGeometry.flipV()` would change a
   * plane's texture coordinates:
   *
   * ```js
   * // Print the original texture coordinates.
   * // Output: [0, 0, 1, 0, 0, 1, 1, 1]
   * console.log(myGeometry.uvs);
   *
   * // Flip the v-coordinates.
   * myGeometry.flipV();
   *
   * // Print the flipped texture coordinates.
   * // Output: [0, 1, 1, 1, 0, 0, 1, 0]
   * console.log(myGeometry.uvs);
   *
   * // Notice the swaps:
   * // Left vertices: [0, 0] <--> [1, 0]
   * // Right vertices: [1, 0] <--> [1, 1]
   * ```
   *
   * @method flipV
   * @for p5.Geometry
   *
   * @example
   * let img;
   *
   * async function setup() {
   *   img = await loadImage('assets/laDefense.jpg');
   *   createCanvas(100, 100, WEBGL);
   *
   *   background(200);
   *
   *   // Create p5.Geometry objects.
   *   let geom1 = buildGeometry(createShape);
   *   let geom2 = buildGeometry(createShape);
   *
   *   // Flip geom2's V texture coordinates.
   *   geom2.flipV();
   *
   *   // Left (original).
   *   push();
   *   translate(-25, 0, 0);
   *   texture(img);
   *   noStroke();
   *   model(geom1);
   *   pop();
   *
   *   // Right (flipped).
   *   push();
   *   translate(25, 0, 0);
   *   texture(img);
   *   noStroke();
   *   model(geom2);
   *   pop();
   *
   *   describe(
   *     'Two photos of a ceiling on a gray background. The photos are mirror images of each other.'
   *   );
   * }
   *
   * function createShape() {
   *   plane(40);
   * }
   */
  flipV() {
    this.uvs = this.uvs.flat().map((val, index) => {
      if (index % 2 === 0) {
        return val;
      } else {
        return 1 - val;
      }
    });
  }

  /**
   * Computes the geometry's faces using its vertices.
   *
   * All 3D shapes are made by connecting sets of points called *vertices*. A
   * geometry's surface is formed by connecting vertices to form triangles that
   * are stitched together. Each triangular patch on the geometry's surface is
   * called a *face*. `myGeometry.computeFaces()` performs the math needed to
   * define each face based on the distances between vertices.
   *
   * The geometry's vertices are stored as <a href="#/p5.Vector">p5.Vector</a>
   * objects in the <a href="#/p5.Geometry/vertices">myGeometry.vertices</a>
   * array. The geometry's first vertex is the
   * <a href="#/p5.Vector">p5.Vector</a> object at `myGeometry.vertices[0]`,
   * its second vertex is `myGeometry.vertices[1]`, its third vertex is
   * `myGeometry.vertices[2]`, and so on.
   *
   * Calling `myGeometry.computeFaces()` fills the
   * <a href="#/p5.Geometry/faces">myGeometry.faces</a> array with three-element
   * arrays that list the vertices that form each face. For example, a geometry
   * made from a rectangle has two faces because a rectangle is made by joining
   * two triangles. <a href="#/p5.Geometry/faces">myGeometry.faces</a> for a
   * rectangle would be the two-dimensional array
   * `[[0, 1, 2], [2, 1, 3]]`. The first face, `myGeometry.faces[0]`, is the
   * array `[0, 1, 2]` because it's formed by connecting
   * `myGeometry.vertices[0]`, `myGeometry.vertices[1]`,and
   * `myGeometry.vertices[2]`. The second face, `myGeometry.faces[1]`, is the
   * array `[2, 1, 3]` because it's formed by connecting
   * `myGeometry.vertices[2]`, `myGeometry.vertices[1]`, and
   * `myGeometry.vertices[3]`.
   *
   * Note: `myGeometry.computeFaces()` only works when geometries have four or more vertices.
   *
   * @chainable
   *
   * @example
   * // Click and drag the mouse to view the scene from different angles.
   *
   * let myGeometry;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create a p5.Geometry object.
   *   myGeometry = new p5.Geometry();
   *
   *   // Create p5.Vector objects to position the vertices.
   *   let v0 = createVector(-40, 0, 0);
   *   let v1 = createVector(0, -40, 0);
   *   let v2 = createVector(0, 40, 0);
   *   let v3 = createVector(40, 0, 0);
   *
   *   // Add the vertices to myGeometry's vertices array.
   *   myGeometry.vertices.push(v0, v1, v2, v3);
   *
   *   // Compute myGeometry's faces array.
   *   myGeometry.computeFaces();
   *
   *   describe('A red square drawn on a gray background.');
   * }
   *
   * function draw() {
   *   background(200);
   *
   *   // Enable orbiting with the mouse.
   *   orbitControl();
   *
   *   // Turn on the lights.
   *   lights();
   *
   *   // Style the shape.
   *   noStroke();
   *   fill(255, 0, 0);
   *
   *   // Draw the p5.Geometry object.
   *   model(myGeometry);
   * }
   *
   * @example
   * // Click and drag the mouse to view the scene from different angles.
   *
   * let myGeometry;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create a p5.Geometry object using a callback function.
   *   myGeometry = new p5.Geometry(1, 1, createShape);
   *
   *   describe('A red square drawn on a gray background.');
   * }
   *
   * function draw() {
   *   background(200);
   *
   *   // Enable orbiting with the mouse.
   *   orbitControl();
   *
   *   // Turn on the lights.
   *   lights();
   *
   *   // Style the shape.
   *   noStroke();
   *   fill(255, 0, 0);
   *
   *   // Draw the p5.Geometry object.
   *   model(myGeometry);
   * }
   *
   * function createShape() {
   *   // Create p5.Vector objects to position the vertices.
   *   let v0 = createVector(-40, 0, 0);
   *   let v1 = createVector(0, -40, 0);
   *   let v2 = createVector(0, 40, 0);
   *   let v3 = createVector(40, 0, 0);
   *
   *   // Add the vertices to the p5.Geometry object's vertices array.
   *   this.vertices.push(v0, v1, v2, v3);
   *
   *   // Compute the faces array.
   *   this.computeFaces();
   * }
   */
  computeFaces() {
    this.faces.length = 0;
    const sliceCount = this.detailX + 1;
    let a, b, c, d;
    for (let i = 0; i < this.detailY; i++) {
      for (let j = 0; j < this.detailX; j++) {
        a = i * sliceCount + j; // + offset;
        b = i * sliceCount + j + 1; // + offset;
        c = (i + 1) * sliceCount + j + 1; // + offset;
        d = (i + 1) * sliceCount + j; // + offset;
        this.faces.push([a, b, d]);
        this.faces.push([d, b, c]);
      }
    }
    return this;
  }

  _getFaceNormal(faceId) {
    //This assumes that vA->vB->vC is a counter-clockwise ordering
    const face = this.faces[faceId];
    const vA = this.vertices[face[0]];
    const vB = this.vertices[face[1]];
    const vC = this.vertices[face[2]];
    const ab = Vector.sub(vB, vA);
    const ac = Vector.sub(vC, vA);
    const n = Vector.cross(ab, ac);
    const ln = Vector.mag(n);
    let sinAlpha = ln / (Vector.mag(ab) * Vector.mag(ac));
    if (sinAlpha === 0 || isNaN(sinAlpha)) {
      console.warn(
        'p5.Geometry.prototype._getFaceNormal:',
        'face has colinear sides or a repeated vertex'
      );
      return n;
    }
    if (sinAlpha > 1) sinAlpha = 1; // handle float rounding error
    return n.mult(Math.asin(sinAlpha) / ln);
  }
  /**
   * Calculates the normal vector for each vertex on the geometry.
   *
   * All 3D shapes are made by connecting sets of points called *vertices*. A
   * geometry's surface is formed by connecting vertices to create triangles
   * that are stitched together. Each triangular patch on the geometry's
   * surface is called a *face*. `myGeometry.computeNormals()` performs the
   * math needed to orient each face. Orientation is important for lighting
   * and other effects.
   *
   * A face's orientation is defined by its *normal vector* which points out
   * of the face and is normal (perpendicular) to the surface. Calling
   * `myGeometry.computeNormals()` first calculates each face's normal vector.
   * Then it calculates the normal vector for each vertex by averaging the
   * normal vectors of the faces surrounding the vertex. The vertex normals
   * are stored as <a href="#/p5.Vector">p5.Vector</a> objects in the
   * <a href="#/p5.Geometry/vertexNormals">myGeometry.vertexNormals</a> array.
   *
   * The first parameter, `shadingType`, is optional. Passing the constant
   * `FLAT`, as in `myGeometry.computeNormals(FLAT)`, provides neighboring
   * faces with their own copies of the vertices they share. Surfaces appear
   * tiled with flat shading. Passing the constant `SMOOTH`, as in
   * `myGeometry.computeNormals(SMOOTH)`, makes neighboring faces reuse their
   * shared vertices. Surfaces appear smoother with smooth shading. By
   * default, `shadingType` is `FLAT`.
   *
   * The second parameter, `options`, is also optional. If an object with a
   * `roundToPrecision` property is passed, as in
   * `myGeometry.computeNormals(SMOOTH, { roundToPrecision: 5 })`, it sets the
   * number of decimal places to use for calculations. By default,
   * `roundToPrecision` uses 3 decimal places.
   *
   * @param {(FLAT|SMOOTH)} [shadingType=FLAT] shading type. either FLAT or SMOOTH. Defaults to `FLAT`.
   * @param {Object} [options] shading options.
   * @chainable
   *
   * @example
   * // Click and drag the mouse to view the scene from different angles.
   *
   * let myGeometry;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create a p5.Geometry object.
   *   myGeometry = buildGeometry(function() {
   *     torus();
   *   });
   *
   *   // Compute the vertex normals.
   *   myGeometry.computeNormals();
   *
   *   describe(
   *     "A white torus drawn on a dark gray background. Red lines extend outward from the torus' vertices."
   *   );
   * }
   *
   * function draw() {
   *   background(50);
   *
   *   // Enable orbiting with the mouse.
   *   orbitControl();
   *
   *   // Turn on the lights.
   *   lights();
   *
   *   // Rotate the coordinate system.
   *   rotateX(1);
   *
   *   // Style the helix.
   *   stroke(0);
   *
   *   // Display the helix.
   *   model(myGeometry);
   *
   *   // Style the normal vectors.
   *   stroke(255, 0, 0);
   *
   *   // Iterate over the vertices and vertexNormals arrays.
   *   for (let i = 0; i < myGeometry.vertices.length; i += 1) {
   *
   *     // Get the vertex p5.Vector object.
   *     let v = myGeometry.vertices[i];
   *
   *     // Get the vertex normal p5.Vector object.
   *     let n = myGeometry.vertexNormals[i];
   *
   *     // Calculate a point along the vertex normal.
   *     let p = p5.Vector.mult(n, 5);
   *
   *     // Draw the vertex normal as a red line.
   *     push();
   *     translate(v);
   *     line(0, 0, 0, p.x, p.y, p.z);
   *     pop();
   *   }
   * }
   *
   * @example
   * // Click and drag the mouse to view the scene from different angles.
   *
   * let myGeometry;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create a p5.Geometry object using a callback function.
   *   myGeometry = new p5.Geometry();
   *
   *   // Create p5.Vector objects to position the vertices.
   *   let v0 = createVector(-40, 0, 0);
   *   let v1 = createVector(0, -40, 0);
   *   let v2 = createVector(0, 40, 0);
   *   let v3 = createVector(40, 0, 0);
   *
   *   // Add the vertices to the p5.Geometry object's vertices array.
   *   myGeometry.vertices.push(v0, v1, v2, v3);
   *
   *   // Compute the faces array.
   *   myGeometry.computeFaces();
   *
   *   // Compute the surface normals.
   *   myGeometry.computeNormals();
   *
   *   describe('A red square drawn on a gray background.');
   * }
   *
   * function draw() {
   *   background(200);
   *
   *   // Enable orbiting with the mouse.
   *   orbitControl();
   *
   *   // Add a white point light.
   *   pointLight(255, 255, 255, 0, 0, 10);
   *
   *   // Style the p5.Geometry object.
   *   noStroke();
   *   fill(255, 0, 0);
   *
   *   // Draw the p5.Geometry object.
   *   model(myGeometry);
   * }
   *
   * @example
   * // Click and drag the mouse to view the scene from different angles.
   *
   * let myGeometry;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create a p5.Geometry object.
   *   myGeometry = buildGeometry(createShape);
   *
   *   // Compute normals using default (FLAT) shading.
   *   myGeometry.computeNormals(FLAT);
   *
   *   describe('A white, helical structure drawn on a dark gray background. Its faces appear faceted.');
   * }
   *
   * function draw() {
   *   background(50);
   *
   *   // Enable orbiting with the mouse.
   *   orbitControl();
   *
   *   // Turn on the lights.
   *   lights();
   *
   *   // Rotate the coordinate system.
   *   rotateX(1);
   *
   *   // Style the helix.
   *   noStroke();
   *
   *   // Display the helix.
   *   model(myGeometry);
   * }
   *
   * function createShape() {
   *   // Create a helical shape.
   *   beginShape();
   *   for (let i = 0; i < TWO_PI * 3; i += 0.5) {
   *     let x = 30 * cos(i);
   *     let y = 30 * sin(i);
   *     let z = map(i, 0, TWO_PI * 3, -40, 40);
   *     vertex(x, y, z);
   *   }
   *   endShape();
   * }
   *
   * @example
   * // Click and drag the mouse to view the scene from different angles.
   *
   * let myGeometry;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create a p5.Geometry object.
   *   myGeometry = buildGeometry(createShape);
   *
   *   // Compute normals using smooth shading.
   *   myGeometry.computeNormals(SMOOTH);
   *
   *   describe('A white, helical structure drawn on a dark gray background.');
   * }
   *
   * function draw() {
   *   background(50);
   *
   *   // Enable orbiting with the mouse.
   *   orbitControl();
   *
   *   // Turn on the lights.
   *   lights();
   *
   *   // Rotate the coordinate system.
   *   rotateX(1);
   *
   *   // Style the helix.
   *   noStroke();
   *
   *   // Display the helix.
   *   model(myGeometry);
   * }
   *
   * function createShape() {
   *   // Create a helical shape.
   *   beginShape();
   *   for (let i = 0; i < TWO_PI * 3; i += 0.5) {
   *     let x = 30 * cos(i);
   *     let y = 30 * sin(i);
   *     let z = map(i, 0, TWO_PI * 3, -40, 40);
   *     vertex(x, y, z);
   *   }
   *   endShape();
   * }
   *
   * @example
   * // Click and drag the mouse to view the scene from different angles.
   *
   * let myGeometry;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create a p5.Geometry object.
   *   myGeometry = buildGeometry(createShape);
   *
   *   // Create an options object.
   *   let options = { roundToPrecision: 5 };
   *
   *   // Compute normals using smooth shading.
   *   myGeometry.computeNormals(SMOOTH, options);
   *
   *   describe('A white, helical structure drawn on a dark gray background.');
   * }
   *
   * function draw() {
   *   background(50);
   *
   *   // Enable orbiting with the mouse.
   *   orbitControl();
   *
   *   // Turn on the lights.
   *   lights();
   *
   *   // Rotate the coordinate system.
   *   rotateX(1);
   *
   *   // Style the helix.
   *   noStroke();
   *
   *   // Display the helix.
   *   model(myGeometry);
   * }
   *
   * function createShape() {
   *   // Create a helical shape.
   *   beginShape();
   *   for (let i = 0; i < TWO_PI * 3; i += 0.5) {
   *     let x = 30 * cos(i);
   *     let y = 30 * sin(i);
   *     let z = map(i, 0, TWO_PI * 3, -40, 40);
   *     vertex(x, y, z);
   *   }
   *   endShape();
   * }
   */
  computeNormals(shadingType = FLAT, { roundToPrecision = 3 } = {}) {
    const vertexNormals = this.vertexNormals;
    let vertices = this.vertices;
    const faces = this.faces;
    let iv;

    if (shadingType === SMOOTH) {
      const vertexIndices = {};
      const uniqueVertices = [];

      const power = Math.pow(10, roundToPrecision);
      const rounded = val => Math.round(val * power) / power;
      const getKey = vert =>
        `${rounded(vert.x)},${rounded(vert.y)},${rounded(vert.z)}`;

      // loop through each vertex and add uniqueVertices
      for (let i = 0; i < vertices.length; i++) {
        const vertex = vertices[i];
        const key = getKey(vertex);
        if (vertexIndices[key] === undefined) {
          vertexIndices[key] = uniqueVertices.length;
          uniqueVertices.push(vertex);
        }
      }

      // update face indices to use the deduplicated vertex indices
      faces.forEach(face => {
        for (let fv = 0; fv < 3; ++fv) {
          const originalVertexIndex = face[fv];
          const originalVertex = vertices[originalVertexIndex];
          const key = getKey(originalVertex);
          face[fv] = vertexIndices[key];
        }
      });

      // update edge indices to use the deduplicated vertex indices
      this.edges.forEach(edge => {
        for (let ev = 0; ev < 2; ++ev) {
          const originalVertexIndex = edge[ev];
          const originalVertex = vertices[originalVertexIndex];
          const key = getKey(originalVertex);
          edge[ev] = vertexIndices[key];
        }
      });

      // update the deduplicated vertices
      this.vertices = vertices = uniqueVertices;
    }

    // initialize the vertexNormals array with empty vectors
    vertexNormals.length = 0;
    for (iv = 0; iv < vertices.length; ++iv) {
      vertexNormals.push(new Vector());
    }

    // loop through all the faces adding its normal to the normal
    // of each of its vertices
    faces.forEach((face, f) => {
      const faceNormal = this._getFaceNormal(f);

      // all three vertices get the normal added
      for (let fv = 0; fv < 3; ++fv) {
        const vertexIndex = face[fv];
        vertexNormals[vertexIndex].add(faceNormal);
      }
    });

    // normalize the normals
    for (iv = 0; iv < vertices.length; ++iv) {
      vertexNormals[iv].normalize();
    }

    return this;
  }

  /**
   * Averages the vertex normals. Used in curved
   * surfaces
   * @private
   * @chainable
   */
  averageNormals() {
    for (let i = 0; i <= this.detailY; i++) {
      const offset = this.detailX + 1;
      let temp = Vector.add(
        this.vertexNormals[i * offset],
        this.vertexNormals[i * offset + this.detailX]
      );

      temp = Vector.div(temp, 2);
      this.vertexNormals[i * offset] = temp;
      this.vertexNormals[i * offset + this.detailX] = temp;
    }
    return this;
  }

  /**
   * Averages pole normals.  Used in spherical primitives
   * @private
   * @chainable
   */
  averagePoleNormals() {
    //average the north pole
    let sum = new Vector(0, 0, 0);
    for (let i = 0; i < this.detailX; i++) {
      sum.add(this.vertexNormals[i]);
    }
    sum = Vector.div(sum, this.detailX);

    for (let i = 0; i < this.detailX; i++) {
      this.vertexNormals[i] = sum;
    }

    //average the south pole
    sum = new Vector(0, 0, 0);
    for (
      let i = this.vertices.length - 1;
      i > this.vertices.length - 1 - this.detailX;
      i--
    ) {
      sum.add(this.vertexNormals[i]);
    }
    sum = Vector.div(sum, this.detailX);

    for (
      let i = this.vertices.length - 1;
      i > this.vertices.length - 1 - this.detailX;
      i--
    ) {
      this.vertexNormals[i] = sum;
    }
    return this;
  }

  /**
   * Create a 2D array for establishing stroke connections
   * @private
   * @chainable
   */
  _makeTriangleEdges() {
    this.edges.length = 0;

    for (let j = 0; j < this.faces.length; j++) {
      this.edges.push([this.faces[j][0], this.faces[j][1]]);
      this.edges.push([this.faces[j][1], this.faces[j][2]]);
      this.edges.push([this.faces[j][2], this.faces[j][0]]);
    }

    return this;
  }

  /**
   * @example
   * let tetrahedron;
   * function setup() {
   *   createCanvas(200, 200, WEBGL);
   *   describe('A rotating tetrahedron');
   *
   *   tetrahedron = new p5.Geometry();
   *
   *   // Give each geometry a unique gid
   *   tetrahedron.gid = 'tetrahedron';
   *
   *   // Add four points of the tetrahedron
   *
   *   let radius = 50;
   *   // A 2D triangle:
   *   tetrahedron.vertices.push(createVector(radius, 0, 0));
   *   tetrahedron.vertices.push(createVector(radius, 0, 0).rotate(TWO_PI / 3));
   *   tetrahedron.vertices.push(createVector(radius, 0, 0).rotate(TWO_PI * 2 / 3));
   *   // Add a tip in the z axis:
   *   tetrahedron.vertices.push(createVector(0, 0, radius));
   *
   *   // Create the four faces by connecting the sets of three points
   *   tetrahedron.faces.push([0, 1, 2]);
   *   tetrahedron.faces.push([0, 1, 3]);
   *   tetrahedron.faces.push([0, 2, 3]);
   *   tetrahedron.faces.push([1, 2, 3]);
   *   tetrahedron.makeEdgesFromFaces();
   * }
   *
   * function draw() {
   *   background(200);
   *   strokeWeight(2);
   *   orbitControl();
   *   rotateY(millis() * 0.001);
   *   model(tetrahedron);
   * }
   */
  makeEdgesFromFaces() {
    this._makeTriangleEdges();
  }

  /**
   * Converts each line segment into the vertices and vertex attributes needed
   * to turn the line into a polygon on screen. This will include:
   * - Two triangles line segment to create a rectangle
   * - Two triangles per endpoint to create a stroke cap rectangle. A fragment
   *   shader is responsible for displaying the appropriate cap style within
   *   that rectangle.
   * - Four triangles per join between adjacent line segments, creating a quad on
   *   either side of the join, perpendicular to the lines. A vertex shader will
   *   discard the quad in the "elbow" of the join, and a fragment shader will
   *   display the appropriate join style within the remaining quad.
   *
   * @private
   * @chainable
   */
  _edgesToVertices() {
    this.lineVertices.clear();
    this.lineTangentsIn.clear();
    this.lineTangentsOut.clear();
    this.lineSides.clear();

    const potentialCaps = new Map();
    const connected = new Set();
    let lastValidDir;
    for (let i = 0; i < this.edges.length; i++) {
      const prevEdge = this.edges[i - 1];
      const currEdge = this.edges[i];
      const isPoint = currEdge[0] === currEdge[1];
      const begin = this.vertices[currEdge[0]];
      const end = this.vertices[currEdge[1]];
      const prevColor = (this.vertexStrokeColors.length > 0 && prevEdge)
        ? this.vertexStrokeColors.slice(
          prevEdge[1] * 4,
          (prevEdge[1] + 1) * 4
        )
        : [0, 0, 0, 0];
      const fromColor = this.vertexStrokeColors.length > 0
        ? this.vertexStrokeColors.slice(
          currEdge[0] * 4,
          (currEdge[0] + 1) * 4
        )
        : [0, 0, 0, 0];
      const toColor = this.vertexStrokeColors.length > 0
        ? this.vertexStrokeColors.slice(
          currEdge[1] * 4,
          (currEdge[1] + 1) * 4
        )
        : [0, 0, 0, 0];
      const dir = isPoint
        ? new Vector(0, 1, 0)
        : end
          .copy()
          .sub(begin)
          .normalize();
      const dirOK = dir.magSq() > 0;
      if (dirOK) {
        this._addSegment(begin, end, fromColor, toColor, dir);
      }
      if (!this.renderer?._simpleLines) {
        if (i > 0 && prevEdge[1] === currEdge[0]) {
          if (!connected.has(currEdge[0])) {
            connected.add(currEdge[0]);
            potentialCaps.delete(currEdge[0]);
            // Add a join if this segment shares a vertex with the previous. Skip
            // actually adding join vertices if either the previous segment or this
            // one has a length of 0.
            //
            // Don't add a join if the tangents point in the same direction, which
            // would mean the edges line up exactly, and there is no need for a join.
            if (lastValidDir && dirOK && dir.dot(lastValidDir) < 1 - 1e-8) {
              this._addJoin(begin, lastValidDir, dir, fromColor);
            }
          }
        } else if (isPoint) {
          this._addCap(begin, dir.copy().mult(-1), fromColor);
          this._addCap(begin, dir, fromColor);
        } else {
          // Start a new line
          if (dirOK && !connected.has(currEdge[0])) {
            const existingCap = potentialCaps.get(currEdge[0]);
            if (existingCap) {
              this._addJoin(
                begin,
                existingCap.dir,
                dir,
                fromColor
              );
              potentialCaps.delete(currEdge[0]);
              connected.add(currEdge[0]);
            } else {
              potentialCaps.set(currEdge[0], {
                point: begin,
                dir: dir.copy().mult(-1),
                color: fromColor
              });
            }
          }
          if (!isPoint && lastValidDir && !connected.has(prevEdge[1])) {
            const existingCap = potentialCaps.get(prevEdge[1]);
            if (existingCap) {
              this._addJoin(
                this.vertices[prevEdge[1]],
                lastValidDir,
                existingCap.dir.copy().mult(-1),
                prevColor
              );
              potentialCaps.delete(prevEdge[1]);
              connected.add(prevEdge[1]);
            } else {
              // Close off the last segment with a cap
              potentialCaps.set(prevEdge[1], {
                point: this.vertices[prevEdge[1]],
                dir: lastValidDir,
                color: prevColor
              });
            }
            lastValidDir = undefined;
          }
        }

        if (i === this.edges.length - 1 && !connected.has(currEdge[1])) {
          const existingCap = potentialCaps.get(currEdge[1]);
          if (existingCap) {
            this._addJoin(
              end,
              dir,
              existingCap.dir.copy().mult(-1),
              toColor
            );
            potentialCaps.delete(currEdge[1]);
            connected.add(currEdge[1]);
          } else {
            potentialCaps.set(currEdge[1], {
              point: end,
              dir,
              color: toColor
            });
          }
        }

        if (dirOK) {
          lastValidDir = dir;
        }
      }
    }
    for (const { point, dir, color } of potentialCaps.values()) {
      this._addCap(point, dir, color);
    }
    return this;
  }

  /**
   * Adds the vertices and vertex attributes for two triangles making a rectangle
   * for a straight line segment. A vertex shader is responsible for picking
   * proper coordinates on the screen given the centerline positions, the tangent,
   * and the side of the centerline each vertex belongs to. Sides follow the
   * following scheme:
   *
   *  -1            -1
   *   o-------------o
   *   |             |
   *   o-------------o
   *   1             1
   *
   * @private
   * @chainable
   */
  _addSegment(
    begin,
    end,
    fromColor,
    toColor,
    dir
  ) {
    const a = begin.array();
    const b = end.array();
    const dirArr = dir.array();
    this.lineSides.push(1, 1, -1, 1, -1, -1);
    for (const tangents of [this.lineTangentsIn, this.lineTangentsOut]) {
      for (let i = 0; i < 6; i++) {
        tangents.push(...dirArr);
      }
    }
    this.lineVertices.push(...a, ...b, ...a, ...b, ...b, ...a);
    if (!this.renderer?._simpleLines) {
      this.lineVertexColors.push(
        ...fromColor,
        ...toColor,
        ...fromColor,
        ...toColor,
        ...toColor,
        ...fromColor
      );
    }
    return this;
  }

  /**
   * Adds the vertices and vertex attributes for two triangles representing the
   * stroke cap of a line. A fragment shader is responsible for displaying the
   * appropriate cap style within the rectangle they make.
   *
   * The lineSides buffer will include the following values for the points on
   * the cap rectangle:
   *
   *           -1  -2
   * -----------o---o
   *            |   |
   * -----------o---o
   *            1   2
   * @private
   * @chainable
   */
  _addCap(point, tangent, color) {
    const ptArray = point.array();
    const tanInArray = tangent.array();
    const tanOutArray = [0, 0, 0];
    for (let i = 0; i < 6; i++) {
      this.lineVertices.push(...ptArray);
      this.lineTangentsIn.push(...tanInArray);
      this.lineTangentsOut.push(...tanOutArray);
      this.lineVertexColors.push(...color);
    }
    this.lineSides.push(-1, 2, -2, 1, 2, -1);
    return this;
  }

  /**
   * Adds the vertices and vertex attributes for four triangles representing a
   * join between two adjacent line segments. This creates a quad on either side
   * of the shared vertex of the two line segments, with each quad perpendicular
   * to the lines. A vertex shader will discard all but the quad in the "elbow" of
   * the join, and a fragment shader will display the appropriate join style
   * within the remaining quad.
   *
   * The lineSides buffer will include the following values for the points on
   * the join rectangles:
   *
   *            -1     -2
   * -------------o----o
   *              |    |
   *       1 o----o----o -3
   *         |    | 0  |
   * --------o----o    |
   *        2|    3    |
   *         |         |
   *         |         |
   * @private
   * @chainable
   */
  _addJoin(
    point,
    fromTangent,
    toTangent,
    color
  ) {
    const ptArray = point.array();
    const tanInArray = fromTangent.array();
    const tanOutArray = toTangent.array();
    for (let i = 0; i < 12; i++) {
      this.lineVertices.push(...ptArray);
      this.lineTangentsIn.push(...tanInArray);
      this.lineTangentsOut.push(...tanOutArray);
      this.lineVertexColors.push(...color);
    }
    this.lineSides.push(-1, -3, -2, -1, 0, -3);
    this.lineSides.push(3, 1, 2, 3, 0, 1);
    return this;
  }

  /**
   * Transforms the geometry's vertices to fit snugly within a 100×100×100 box
   * centered at the origin.
   *
   * Calling `myGeometry.normalize()` translates the geometry's vertices so that
   * they're centered at the origin `(0, 0, 0)`. Then it scales the vertices so
   * that they fill a 100×100×100 box. As a result, small geometries will grow
   * and large geometries will shrink.
   *
   * Note: `myGeometry.normalize()` only works when called in the
   * <a href="#/p5/setup">setup()</a> function.
   *
   * @chainable
   *
   * @example
   * let myGeometry;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create a very small torus.
   *   myGeometry = buildGeometry(function() {;
   *     torus(1, 0.25);
   *   });
   *
   *   // Normalize the torus so its vertices fill
   *   // the range [-100, 100].
   *   myGeometry.normalize();
   *
   *   describe('A white torus rotates slowly against a dark gray background.');
   * }
   *
   * function draw() {
   *   background(50);
   *
   *   // Turn on the lights.
   *   lights();
   *
   *   // Rotate around the y-axis.
   *   rotateY(frameCount * 0.01);
   *
   *   // Style the torus.
   *   noStroke();
   *
   *   // Draw the torus.
   *   model(myGeometry);
   * }
   */
  normalize() {
    if (this.vertices.length > 0) {
      // Find the corners of our bounding box
      const maxPosition = this.vertices[0].copy();
      const minPosition = this.vertices[0].copy();

      for (let i = 0; i < this.vertices.length; i++) {
        maxPosition.x = Math.max(maxPosition.x, this.vertices[i].x);
        minPosition.x = Math.min(minPosition.x, this.vertices[i].x);
        maxPosition.y = Math.max(maxPosition.y, this.vertices[i].y);
        minPosition.y = Math.min(minPosition.y, this.vertices[i].y);
        maxPosition.z = Math.max(maxPosition.z, this.vertices[i].z);
        minPosition.z = Math.min(minPosition.z, this.vertices[i].z);
      }

      const center = Vector.lerp(maxPosition, minPosition, 0.5);
      const dist = Vector.sub(maxPosition, minPosition);
      const longestDist = Math.max(Math.max(dist.x, dist.y), dist.z);
      const scale = 200 / longestDist;

      for (let i = 0; i < this.vertices.length; i++) {
        this.vertices[i].sub(center);
        this.vertices[i].mult(scale);
      }
    }
    return this;
  }

  /** Sets the shader's vertex property or attribute variables.
   *
   * A vertex property, or vertex attribute, is a variable belonging to a vertex in a shader. p5.js provides some
   * default properties, such as `aPosition`, `aNormal`, `aVertexColor`, etc. These are
   * set using <a href="#/p5/vertex">vertex()</a>, <a href="#/p5/normal">normal()</a>
   * and <a href="#/p5/fill">fill()</a> respectively. Custom properties can also
   * be defined within <a href="#/p5/beginShape">beginShape()</a> and
   * <a href="#/p5/endShape">endShape()</a>.
   *
   * The first parameter, `propertyName`, is a string with the property's name.
   * This is the same variable name which should be declared in the shader, as in
   * `in vec3 aProperty`, similar to .`setUniform()`.
   *
   * The second parameter, `data`, is the value assigned to the shader variable. This value
   * will be pushed directly onto the Geometry object. There should be the same number
   * of custom property values as vertices, this method should be invoked once for each
   * vertex.
   *
   * The `data` can be a Number or an array of numbers. Tn the shader program the type
   * can be declared according to the WebGL specification. Common types include `float`,
   * `vec2`, `vec3`, `vec4` or matrices.
   *
   * See also the global <a href="#/p5/vertexProperty">vertexProperty()</a> function.
   *
   * @example
   * let geo;
   *
   * function cartesianToSpherical(x, y, z) {
   *   let r = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
   *   let theta = acos(z / r);
   *   let phi = atan2(y, x);
   *   return { theta, phi };
   * }
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Modify the material shader to display roughness.
   *   const myShader = baseMaterialShader().modify({
   *     vertexDeclarations:`in float aRoughness;
   *                         out float vRoughness;`,
   *     fragmentDeclarations: 'in float vRoughness;',
   *     'void afterVertex': `() {
   *         vRoughness = aRoughness;
   *     }`,
   *     'vec4 combineColors': `(ColorComponents components) {
   *             vec4 color = vec4(0.);
   *             color.rgb += components.diffuse * components.baseColor * (1.0-vRoughness);
   *             color.rgb += components.ambient * components.ambientColor;
   *             color.rgb += components.specular * components.specularColor * (1.0-vRoughness);
   *             color.a = components.opacity;
   *             return color;
   *     }`
   *   });
   *
   *   // Create the Geometry object.
   *   geo = buildGeometry(function() {
   *     fill('hotpink');
   *     sphere(45, 50, 50);
   *   });
   *
   *   // Set the roughness value for every vertex.
   *   for (let v of geo.vertices){
   *
   *     // convert coordinates to spherical coordinates
   *     let spherical = cartesianToSpherical(v.x, v.y, v.z);
   *
   *     // Set the custom roughness vertex property.
   *     let roughness = noise(spherical.theta*5, spherical.phi*5);
   *     geo.vertexProperty('aRoughness', roughness);
   *   }
   *
   *   // Use the custom shader.
   *   shader(myShader);
   *
   *   describe('A rough pink sphere rotating on a blue background.');
   * }
   *
   * function draw() {
   *   // Set some styles and lighting
   *   background('lightblue');
   *   noStroke();
   *
   *   specularMaterial(255,125,100);
   *   shininess(2);
   *
   *   directionalLight('white', -1, 1, -1);
   *   ambientLight(320);
   *
   *   rotateY(millis()*0.001);
   *
   *   // Draw the geometry
   *   model(geo);
   * }
   *
   * @param {String} propertyName the name of the vertex property.
   * @param {Number|Number[]} data the data tied to the vertex property.
   * @param {Number} [size] optional size of each unit of data.
   */
  vertexProperty(propertyName, data, size){
    let prop;
    if (!this.userVertexProperties[propertyName]){
      prop = this.userVertexProperties[propertyName] =
        this._userVertexPropertyHelper(propertyName, data, size);
    }
    prop = this.userVertexProperties[propertyName];
    if (size){
      prop.pushDirect(data);
    } else {
      prop.setCurrentData(data);
      prop.pushCurrentData();
    }
  }

  _userVertexPropertyHelper(propertyName, data, size){
    const geometryInstance = this;
    const prop = this.userVertexProperties[propertyName] = {
      name: propertyName,
      dataSize: size ? size : data.length ? data.length : 1,
      geometry: geometryInstance,
      // Getters
      getName(){
        return this.name;
      },
      getCurrentData(){
        if (this.currentData === undefined) {
          this.currentData = new Array(this.getDataSize()).fill(0);
        }
        return this.currentData;
      },
      getDataSize() {
        return this.dataSize;
      },
      getSrcName() {
        const src = this.name.concat('Src');
        return src;
      },
      getDstName() {
        const dst = this.name.concat('Buffer');
        return dst;
      },
      getSrcArray() {
        const srcName = this.getSrcName();
        return this.geometry[srcName];
      },
      //Setters
      setCurrentData(data) {
        data.length ? data.length : 1;
        // if (size != this.getDataSize()){
        //   p5._friendlyError(`Custom vertex property '${this.name}' has been set with various data sizes. You can change it's name, or if it was an accident, set '${this.name}' to have the same number of inputs each time!`, 'vertexProperty()');
        // }
        this.currentData = data;
      },
      // Utilities
      pushCurrentData(){
        const data = this.getCurrentData();
        this.pushDirect(data);
      },
      pushDirect(data) {
        if (data.length){
          this.getSrcArray().push(...data);
        } else {
          this.getSrcArray().push(data);
        }
      },
      resetSrcArray(){
        this.geometry[this.getSrcName()] = [];
      },
      delete() {
        const srcName = this.getSrcName();
        delete this.geometry[srcName];
        delete this;
      }
    };
    this[prop.getSrcName()] = [];
    return this.userVertexProperties[propertyName];
  }
}
/**
 * Keeps track of how many custom geometry objects have been made so that each
 * can be assigned a unique ID.
 */
Geometry.nextId = 0;

function geometry(p5, fn){
  /**
   * A class to describe a 3D shape.
   *
   * Each `p5.Geometry` object represents a 3D shape as a set of connected
   * points called *vertices*. All 3D shapes are made by connecting vertices to
   * form triangles that are stitched together. Each triangular patch on the
   * geometry's surface is called a *face*. The geometry stores information
   * about its vertices and faces for use with effects such as lighting and
   * texture mapping.
   *
   * The first parameter, `detailX`, is optional. If a number is passed, as in
   * `new p5.Geometry(24)`, it sets the number of triangle subdivisions to use
   * along the geometry's x-axis. By default, `detailX` is 1.
   *
   * The second parameter, `detailY`, is also optional. If a number is passed,
   * as in `new p5.Geometry(24, 16)`, it sets the number of triangle
   * subdivisions to use along the geometry's y-axis. By default, `detailX` is
   * 1.
   *
   * The third parameter, `callback`, is also optional. If a function is passed,
   * as in `new p5.Geometry(24, 16, createShape)`, it will be called once to add
   * vertices to the new 3D shape.
   *
   * @class p5.Geometry
   * @param  {Integer} [detailX] number of vertices along the x-axis.
   * @param  {Integer} [detailY] number of vertices along the y-axis.
   * @param {Function} [callback] function to call once the geometry is created.
   *
   * @example
   * // Click and drag the mouse to view the scene from different angles.
   *
   * let myGeometry;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create a p5.Geometry object.
   *   myGeometry = new p5.Geometry();
   *
   *   // Create p5.Vector objects to position the vertices.
   *   let v0 = createVector(-40, 0, 0);
   *   let v1 = createVector(0, -40, 0);
   *   let v2 = createVector(40, 0, 0);
   *
   *   // Add the vertices to the p5.Geometry object's vertices array.
   *   myGeometry.vertices.push(v0, v1, v2);
   *
   *   describe('A white triangle drawn on a gray background.');
   * }
   *
   * function draw() {
   *   background(200);
   *
   *   // Enable orbiting with the mouse.
   *   orbitControl();
   *
   *   // Draw the p5.Geometry object.
   *   model(myGeometry);
   * }
   *
   * @example
   * // Click and drag the mouse to view the scene from different angles.
   *
   * let myGeometry;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create a p5.Geometry object using a callback function.
   *   myGeometry = new p5.Geometry(1, 1, createShape);
   *
   *   describe('A white triangle drawn on a gray background.');
   * }
   *
   * function draw() {
   *   background(200);
   *
   *   // Enable orbiting with the mouse.
   *   orbitControl();
   *
   *   // Draw the p5.Geometry object.
   *   model(myGeometry);
   * }
   *
   * function createShape() {
   *   // Create p5.Vector objects to position the vertices.
   *   let v0 = createVector(-40, 0, 0);
   *   let v1 = createVector(0, -40, 0);
   *   let v2 = createVector(40, 0, 0);
   *
   *   // "this" refers to the p5.Geometry object being created.
   *
   *   // Add the vertices to the p5.Geometry object's vertices array.
   *   this.vertices.push(v0, v1, v2);
   *
   *   // Add an array to list which vertices belong to the face.
   *   // Vertices are listed in clockwise "winding" order from
   *   // left to top to right.
   *   this.faces.push([0, 1, 2]);
   * }
   *
   * @example
   * // Click and drag the mouse to view the scene from different angles.
   *
   * let myGeometry;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create a p5.Geometry object using a callback function.
   *   myGeometry = new p5.Geometry(1, 1, createShape);
   *
   *   describe('A white triangle drawn on a gray background.');
   * }
   *
   * function draw() {
   *   background(200);
   *
   *   // Enable orbiting with the mouse.
   *   orbitControl();
   *
   *   // Draw the p5.Geometry object.
   *   model(myGeometry);
   * }
   *
   * function createShape() {
   *   // Create p5.Vector objects to position the vertices.
   *   let v0 = createVector(-40, 0, 0);
   *   let v1 = createVector(0, -40, 0);
   *   let v2 = createVector(40, 0, 0);
   *
   *   // "this" refers to the p5.Geometry object being created.
   *
   *   // Add the vertices to the p5.Geometry object's vertices array.
   *   this.vertices.push(v0, v1, v2);
   *
   *   // Add an array to list which vertices belong to the face.
   *   // Vertices are listed in clockwise "winding" order from
   *   // left to top to right.
   *   this.faces.push([0, 1, 2]);
   *
   *   // Compute the surface normals to help with lighting.
   *   this.computeNormals();
   * }
   *
   * @example
   * // Click and drag the mouse to view the scene from different angles.
   *
   * // Adapted from Paul Wheeler's wonderful p5.Geometry tutorial.
   * // https://www.paulwheeler.us/articles/custom-3d-geometry-in-p5js/
   * // CC-BY-SA 4.0
   *
   * let myGeometry;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create the p5.Geometry object.
   *   // Set detailX to 48 and detailY to 2.
   *   // >>> try changing them.
   *   myGeometry = new p5.Geometry(48, 2, createShape);
   * }
   *
   * function draw() {
   *   background(50);
   *
   *   // Enable orbiting with the mouse.
   *   orbitControl();
   *
   *   // Turn on the lights.
   *   lights();
   *
   *   // Style the p5.Geometry object.
   *   strokeWeight(0.2);
   *
   *   // Draw the p5.Geometry object.
   *   model(myGeometry);
   * }
   *
   * function createShape() {
   *   // "this" refers to the p5.Geometry object being created.
   *
   *   // Define the Möbius strip with a few parameters.
   *   let spread = 0.1;
   *   let radius = 30;
   *   let stripWidth = 15;
   *   let xInterval = 4 * PI / this.detailX;
   *   let yOffset = -stripWidth / 2;
   *   let yInterval = stripWidth / this.detailY;
   *
   *   for (let j = 0; j <= this.detailY; j += 1) {
   *     // Calculate the "vertical" point along the strip.
   *     let v = yOffset + yInterval * j;
   *
   *     for (let i = 0; i <= this.detailX; i += 1) {
   *       // Calculate the angle of rotation around the strip.
   *       let u = i * xInterval;
   *
   *       // Calculate the coordinates of the vertex.
   *       let x = (radius + v * cos(u / 2)) * cos(u) - sin(u / 2) * 2 * spread;
   *       let y = (radius + v * cos(u / 2)) * sin(u);
   *       if (u < TWO_PI) {
   *         y += sin(u) * spread;
   *       } else {
   *         y -= sin(u) * spread;
   *       }
   *       let z = v * sin(u / 2) + sin(u / 4) * 4 * spread;
   *
   *       // Create a p5.Vector object to position the vertex.
   *       let vert = createVector(x, y, z);
   *
   *       // Add the vertex to the p5.Geometry object's vertices array.
   *       this.vertices.push(vert);
   *     }
   *   }
   *
   *   // Compute the faces array.
   *   this.computeFaces();
   *
   *   // Compute the surface normals to help with lighting.
   *   this.computeNormals();
   * }
   */
  p5.Geometry = Geometry;

  /**
   * An array with the geometry's vertices.
   *
   * The geometry's vertices are stored as
   * <a href="#/p5.Vector">p5.Vector</a> objects in the `myGeometry.vertices`
   * array. The geometry's first vertex is the
   * <a href="#/p5.Vector">p5.Vector</a> object at `myGeometry.vertices[0]`,
   * its second vertex is `myGeometry.vertices[1]`, its third vertex is
   * `myGeometry.vertices[2]`, and so on.
   *
   * @property vertices
   * @for p5.Geometry
   * @name vertices
   *
   * @example
   * // Click and drag the mouse to view the scene from different angles.
   *
   * let myGeometry;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create a p5.Geometry object.
   *   myGeometry = new p5.Geometry();
   *
   *   // Create p5.Vector objects to position the vertices.
   *   let v0 = createVector(-40, 0, 0);
   *   let v1 = createVector(0, -40, 0);
   *   let v2 = createVector(40, 0, 0);
   *
   *   // Add the vertices to the p5.Geometry object's vertices array.
   *   myGeometry.vertices.push(v0, v1, v2);
   *
   *   describe('A white triangle drawn on a gray background.');
   * }
   *
   * function draw() {
   *   background(200);
   *
   *   // Enable orbiting with the mouse.
   *   orbitControl();
   *
   *   // Draw the p5.Geometry object.
   *   model(myGeometry);
   * }
   *
   * @example
   * // Click and drag the mouse to view the scene from different angles.
   *
   * let myGeometry;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create a p5.Geometry object.
   *   myGeometry = buildGeometry(function() {
   *     torus(30, 15, 10, 8);
   *   });
   *
   *   describe('A white torus rotates slowly against a dark gray background. Red spheres mark its vertices.');
   * }
   *
   * function draw() {
   *   background(50);
   *
   *   // Enable orbiting with the mouse.
   *   orbitControl();
   *
   *   // Turn on the lights.
   *   lights();
   *
   *   // Rotate the coordinate system.
   *   rotateY(frameCount * 0.01);
   *
   *   // Style the p5.Geometry object.
   *   fill(255);
   *   stroke(0);
   *
   *   // Display the p5.Geometry object.
   *   model(myGeometry);
   *
   *   // Style the vertices.
   *   fill(255, 0, 0);
   *   noStroke();
   *
   *   // Iterate over the vertices array.
   *   for (let v of myGeometry.vertices) {
   *     // Draw a sphere to mark the vertex.
   *     push();
   *     translate(v);
   *     sphere(2.5);
   *     pop();
   *   }
   * }
   */

  /**
   * An array with the vectors that are normal to the geometry's vertices.
   *
   * A face's orientation is defined by its *normal vector* which points out
   * of the face and is normal (perpendicular) to the surface. Calling
   * `myGeometry.computeNormals()` first calculates each face's normal
   * vector. Then it calculates the normal vector for each vertex by
   * averaging the normal vectors of the faces surrounding the vertex. The
   * vertex normals are stored as <a href="#/p5.Vector">p5.Vector</a>
   * objects in the `myGeometry.vertexNormals` array.
   *
   * @property vertexNormals
   * @name vertexNormals
   * @for p5.Geometry
   *
   * @example
   * // Click and drag the mouse to view the scene from different angles.
   *
   * let myGeometry;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create a p5.Geometry object.
   *   myGeometry = buildGeometry(function() {
   *     torus(30, 15, 10, 8);
   *   });
   *
   *   // Compute the vertex normals.
   *   myGeometry.computeNormals();
   *
   *   describe(
   *     'A white torus rotates against a dark gray background. Red lines extend outward from its vertices.'
   *   );
   * }
   *
   * function draw() {
   *   background(50);
   *
   *   // Enable orbiting with the mouse.
   *   orbitControl();
   *
   *   // Turn on the lights.
   *   lights();
   *
   *   // Rotate the coordinate system.
   *   rotateY(frameCount * 0.01);
   *
   *   // Style the p5.Geometry object.
   *   stroke(0);
   *
   *   // Display the p5.Geometry object.
   *   model(myGeometry);
   *
   *   // Style the normal vectors.
   *   stroke(255, 0, 0);
   *
   *   // Iterate over the vertices and vertexNormals arrays.
   *   for (let i = 0; i < myGeometry.vertices.length; i += 1) {
   *
   *     // Get the vertex p5.Vector object.
   *     let v = myGeometry.vertices[i];
   *
   *     // Get the vertex normal p5.Vector object.
   *     let n = myGeometry.vertexNormals[i];
   *
   *     // Calculate a point along the vertex normal.
   *     let p = p5.Vector.mult(n, 8);
   *
   *     // Draw the vertex normal as a red line.
   *     push();
   *     translate(v);
   *     line(0, 0, 0, p.x, p.y, p.z);
   *     pop();
   *   }
   * }
   *
   * @example
   * // Click and drag the mouse to view the scene from different angles.
   *
   * let myGeometry;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create a p5.Geometry object.
   *   myGeometry = new p5.Geometry();
   *
   *   // Create p5.Vector objects to position the vertices.
   *   let v0 = createVector(-40, 0, 0);
   *   let v1 = createVector(0, -40, 0);
   *   let v2 = createVector(0, 40, 0);
   *   let v3 = createVector(40, 0, 0);
   *
   *   // Add the vertices to the p5.Geometry object's vertices array.
   *   myGeometry.vertices.push(v0, v1, v2, v3);
   *
   *   // Compute the faces array.
   *   myGeometry.computeFaces();
   *
   *   // Compute the surface normals.
   *   myGeometry.computeNormals();
   *
   *   describe('A red square drawn on a gray background.');
   * }
   *
   * function draw() {
   *   background(200);
   *
   *   // Enable orbiting with the mouse.
   *   orbitControl();
   *
   *   // Add a white point light.
   *   pointLight(255, 255, 255, 0, 0, 10);
   *
   *   // Style the p5.Geometry object.
   *   noStroke();
   *   fill(255, 0, 0);
   *
   *   // Display the p5.Geometry object.
   *   model(myGeometry);
   * }
   */

  /**
   * An array that lists which of the geometry's vertices form each of its
   * faces.
   *
   * All 3D shapes are made by connecting sets of points called *vertices*. A
   * geometry's surface is formed by connecting vertices to form triangles
   * that are stitched together. Each triangular patch on the geometry's
   * surface is called a *face*.
   *
   * The geometry's vertices are stored as
   * <a href="#/p5.Vector">p5.Vector</a> objects in the
   * <a href="#/p5.Geometry/vertices">myGeometry.vertices</a> array. The
   * geometry's first vertex is the <a href="#/p5.Vector">p5.Vector</a>
   * object at `myGeometry.vertices[0]`, its second vertex is
   * `myGeometry.vertices[1]`, its third vertex is `myGeometry.vertices[2]`,
   * and so on.
   *
   * For example, a geometry made from a rectangle has two faces because a
   * rectangle is made by joining two triangles. `myGeometry.faces` for a
   * rectangle would be the two-dimensional array `[[0, 1, 2], [2, 1, 3]]`.
   * The first face, `myGeometry.faces[0]`, is the array `[0, 1, 2]` because
   * it's formed by connecting `myGeometry.vertices[0]`,
   * `myGeometry.vertices[1]`,and `myGeometry.vertices[2]`. The second face,
   * `myGeometry.faces[1]`, is the array `[2, 1, 3]` because it's formed by
   * connecting `myGeometry.vertices[2]`, `myGeometry.vertices[1]`,and
   * `myGeometry.vertices[3]`.
   *
   * @property faces
   * @name faces
   * @for p5.Geometry
   *
   * @example
   * // Click and drag the mouse to view the scene from different angles.
   *
   * let myGeometry;
   *
   * function setup() {
   *   createCanvas(100, 100, WEBGL);
   *
   *   // Create a p5.Geometry object.
   *   myGeometry = buildGeometry(function() {
   *     sphere();
   *   });
   *
   *   describe("A sphere drawn on a gray background. The sphere's surface is a grayscale patchwork of triangles.");
   * }
   *
   * function draw() {
   *   background(200);
   *
   *   // Enable orbiting with the mouse.
   *   orbitControl();
   *
   *   // Turn on the lights.
   *   lights();
   *
   *   // Style the p5.Geometry object.
   *   noStroke();
   *
   *   // Set a random seed.
   *   randomSeed(1234);
   *
   *   // Iterate over the faces array.
   *   for (let face of myGeometry.faces) {
   *
   *     // Style the face.
   *     let g = random(0, 255);
   *     fill(g);
   *
   *     // Draw the face.
   *     beginShape();
   *     // Iterate over the vertices that form the face.
   *     for (let f of face) {
   *       // Get the vertex's p5.Vector object.
   *       let v = myGeometry.vertices[f];
   *       vertex(v.x, v.y, v.z);
   *     }
   *     endShape();
   *
   *   }
   * }
   */

  /**
   * An array that lists the texture coordinates for each of the geometry's
   * vertices.
   *
   * In order for <a href="#/p5/texture">texture()</a> to work, the geometry
   * needs a way to map the points on its surface to the pixels in a
   * rectangular image that's used as a texture. The geometry's vertex at
   * coordinates `(x, y, z)` maps to the texture image's pixel at coordinates
   * `(u, v)`.
   *
   * The `myGeometry.uvs` array stores the `(u, v)` coordinates for each
   * vertex in the order it was added to the geometry. For example, the
   * first vertex, `myGeometry.vertices[0]`, has its `(u, v)` coordinates
   * stored at `myGeometry.uvs[0]` and `myGeometry.uvs[1]`.
   *
   * @property uvs
   * @name uvs
   * @for p5.Geometry
   *
   * @example
   * let img;
   *
   * async function setup() {
   *   img = await loadImage('assets/laDefense.jpg');
   *   createCanvas(100, 100, WEBGL);
   *
   *   background(200);
   *
   *   // Create p5.Geometry objects.
   *   let geom1 = buildGeometry(createShape);
   *   let geom2 = buildGeometry(createShape);
   *
   *   // Left (original).
   *   push();
   *   translate(-25, 0, 0);
   *   texture(img);
   *   noStroke();
   *   model(geom1);
   *   pop();
   *
   *   // Set geom2's texture coordinates.
   *   geom2.uvs = [0.25, 0.25, 0.75, 0.25, 0.25, 0.75, 0.75, 0.75];
   *
   *   // Right (zoomed in).
   *   push();
   *   translate(25, 0, 0);
   *   texture(img);
   *   noStroke();
   *   model(geom2);
   *   pop();
   *
   *   describe(
   *     'Two photos of a ceiling on a gray background. The photo on the right zooms in to the center of the photo.'
   *   );
   * }
   *
   * function createShape() {
   *   plane(40);
   * }
   */

  /**
   * A unique identifier for this geometry. The renderer will use this to cache resources.
   *
   * @property {String} gid
   * @for p5.Geometry
   */
}

if(typeof p5 !== 'undefined'){
  geometry(p5, p5.prototype);
}

export { Geometry, geometry as default };
