p5 2.0.1 → 2.0.2

package/types/webgl/p5.Geometry.d.ts

@@ -0,0 +1,1191 @@
+// This file is auto-generated from JSDoc documentation
+
+import p5 from 'p5';
+import { Color } from '../color/p5.Color';
+import { Vector } from '../math/p5.Vector';
+
+declare module 'p5' {
+  class Geometry {
+    constructor(
+        detailX?: number,
+        detailY?: number,
+        callback?: (this: {
+            detailY: number,
+            detailX: number,
+            vertices: p5.Vector[],
+            uvs: number[]
+        }) => void);
+
+  /**
+   * 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:`// 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}
+   * // }`
+   */
+  calculateBoundingBox(): object;
+
+  /**
+   * 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,
+   * fill() has no effect. Calling
+   * `myGeometry.clearColors()` allows the
+   * fill() function to apply color to the geometry.
+   */
+  clearColors(): void;
+
+  /**
+   * Flips the geometry’s texture u-coordinates.In order for texture() 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. 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:`// 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]`
+   */
+  flipU(): void;
+
+  /**
+   * Computes the geometry's faces using its vertices.All 3D shapes are made by connecting sets of points called . 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 . `myGeometry.computeFaces()` performs the math needed to
+   * define each face based on the distances between vertices.The geometry's vertices are stored as p5.Vector
+   * objects in the myGeometry.vertices
+   * array. The geometry's first vertex is the
+   * p5.Vector 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
+   * myGeometry.faces 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. 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]`.Note: `myGeometry.computeFaces()` only works when geometries have four or more vertices.
+   */
+  computeFaces(): void;
+
+  /**
+   * Calculates the normal vector for each vertex on the geometry.All 3D shapes are made by connecting sets of points called . 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 . `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  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 p5.Vector objects in the
+   * myGeometry.vertexNormals 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
+   * @param
+   */
+  computeNormals(shadingType: FLAT | SMOOTH, options: object): void;
+
+  makeEdgesFromFaces(): void;
+
+  /**
+   * 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
+   * setup() function.
+   */
+  normalize(): void;
+
+  /**
+   * 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 vertex(), normal()
+   * and fill() respectively. Custom properties can also
+   * be defined within beginShape() and
+   * endShape().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 vertexProperty() function.
+ *
+   * @param
+   * @param
+   * @param
+   */
+  vertexProperty(propertyName: string, data: number | number[], size: number): void;
+
+  /**
+   * Flips the geometry’s texture v-coordinates.In order for texture() 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. 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:`// 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]`
+   */
+  flipV(): void;
+
+  }
+
+/**
+ * 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:`// 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 bounding box of the geometry.
+ * @example <div>
+ * <code>
+ * // 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();
+ * }
+ * }
+ * </code>
+ * </div>
+ */
+function calculateBoundingBox(): object;
+
+/**
+ * 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,
+ * fill() has no effect. Calling
+ * `myGeometry.clearColors()` allows the
+ * fill() function to apply color to the geometry.
+ *
+ * @example <div>
+ * <code>
+ * 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.'
+ * );
+ * }
+ * </code>
+ * </div>
+ */
+function clearColors(): void;
+
+/**
+ * Flips the geometry’s texture u-coordinates.In order for texture() 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. 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:`// 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 <div>
+ * <code>
+ * 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);
+ * }
+ * </code>
+ * </div>
+ */
+function flipU(): void;
+
+/**
+ * Computes the geometry's faces using its vertices.All 3D shapes are made by connecting sets of points called . 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 . `myGeometry.computeFaces()` performs the math needed to
+ * define each face based on the distances between vertices.The geometry's vertices are stored as p5.Vector
+ * objects in the myGeometry.vertices
+ * array. The geometry's first vertex is the
+ * p5.Vector 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
+ * myGeometry.faces 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. 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]`.Note: `myGeometry.computeFaces()` only works when geometries have four or more vertices.
+ *
+ * @example <div>
+ * <code>
+ * // 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);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // 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();
+ * }
+ * </code>
+ * </div>
+ */
+function computeFaces(): void;
+
+/**
+ * Calculates the normal vector for each vertex on the geometry.All 3D shapes are made by connecting sets of points called . 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 . `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  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 p5.Vector objects in the
+ * myGeometry.vertexNormals 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 shading type. either FLAT or SMOOTH. Defaults to `FLAT`.
+ * @param shading options.
+ * @example <div>
+ * <code>
+ * // 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();
+ * }
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // 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);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // 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();
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // 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();
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // 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();
+ * }
+ * </code>
+ * </div>
+ */
+function computeNormals(shadingType: FLAT | SMOOTH, options?: object): void;
+
+/**
+ * @example <div>
+ * <code>
+ * 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);
+ * }
+ * </code>
+ * </div>
+ */
+function makeEdgesFromFaces(): void;
+
+/**
+ * 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
+ * setup() function.
+ *
+ * @example <div>
+ * <code>
+ * 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);
+ * }
+ * </code>
+ * </div>
+ */
+function normalize(): void;
+
+/**
+ * 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 vertex(), normal()
+ * and fill() respectively. Custom properties can also
+ * be defined within beginShape() and
+ * endShape().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 vertexProperty() function.
+ *
+ * @example <div>
+ * <code>
+ * 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);
+ * }
+ * </code>
+ * </div>
+ * @param the name of the vertex property.
+ * @param the data tied to the vertex property.
+ * @param optional size of each unit of data.
+ */
+function vertexProperty(propertyName: string, data: number | number[], size?: number): void;
+
+/**
+ * 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.
+ *
+ * @param The name of the file to save the model as.
+ * If not specified, the default file name will be 'model.obj'.
+ * @example <div>
+ * <code>
+ * 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);
+ * }
+ * </code>
+ * </div>
+ */
+function saveObj(fileName: string): void;
+
+/**
+ * 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.
+ *
+ * @param The name of the file to save the model as.
+ * If not specified, the default file name will be 'model.stl'.
+ * @param Optional settings. Options can include a boolean `binary` property, which
+ * controls whether or not a binary .stl file is saved. It defaults to false.
+ * @example <div>
+ * <code>
+ * 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);
+ * }
+ * </code>
+ * </div>
+ */
+function saveStl(fileName: string, options?: object): void;
+
+/**
+ * Flips the geometry’s texture v-coordinates.In order for texture() 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. 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:`// 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]`
+ *
+ * @for p5.Geometry
+ * @example <div>
+ * <code>
+ * 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);
+ * }
+ * </code>
+ * </div>
+ */
+function flipV(): void;
+
+}
+
+export default function p5_Geometry(p5: any, fn: any): void;