p5 2.2.3-rc.1 → 2.2.3

package/types/p5.d.ts

@@ -1137,9 +1137,9 @@ declare const __BOTTOM: typeof BOTTOM;
 
 /**
  * A system variable that provides direct access to the sketch's
- * `<canvas>` element.
+ * `<canvas>` element.
  * 
- * The `&lt;canvas&gt;` element provides many specialized features that aren't
+ * The `<canvas>` element provides many specialized features that aren't
  * included in the p5.js library. The `drawingContext` system variable
  * provides access to these features by exposing the sketch's
  * <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a>
@@ -3325,6 +3325,26 @@ declare class p5 {
   byte(n: string | boolean | number): number;
   byte(ns: any[]): number[];
 
+  /**
+   * Creates a custom <a href="#/p5.Geometry">p5.Geometry</a> object from
+   * simpler 3D shapes.
+   * 
+   * `buildGeometry()` helps with creating complex 3D shapes from simpler ones
+   * such as <a href="#/p5/sphere">sphere()</a>. It can help to make sketches
+   * more performant. For example, if a complex 3D shape doesn’t change while a
+   * sketch runs, then it can be created with `buildGeometry()`. Creating a
+   * <a href="#/p5.Geometry">p5.Geometry</a> object once and then drawing it
+   * will run faster than repeatedly drawing the individual pieces.
+   * 
+   * The parameter, `callback`, is a function with the drawing instructions for
+   * the new <a href="#/p5.Geometry">p5.Geometry</a> object. It will be called
+   * once to create the new 3D shape.
+   * Note: `buildGeometry()` can only be used in WebGL mode.
+   * @param callback function that draws the shape.
+   * @returns new 3D shape.
+   */
+  buildGeometry(callback: Function): p5.Geometry;
+
   /**
    * Calculates coordinates along a Bézier curve using interpolation.
    * 
@@ -3355,31 +3375,6 @@ declare class p5 {
    */
   bezierPoint(a: number, b: number, c: number, d: number, t: number): number;
 
-  /**
-   * Creates a custom <a href="#/p5.Geometry">p5.Geometry</a> object from
-   * simpler 3D shapes.
-   * 
-   * `buildGeometry()` helps with creating complex 3D shapes from simpler ones
-   * such as <a href="#/p5/sphere">sphere()</a>. It can help to make sketches
-   * more performant. For example, if a complex 3D shape doesn’t change while a
-   * sketch runs, then it can be created with `buildGeometry()`. Creating a
-   * <a href="#/p5.Geometry">p5.Geometry</a> object once and then drawing it
-   * will run faster than repeatedly drawing the individual pieces.
-   * 
-   * The parameter, `callback`, is a function with the drawing instructions for
-   * the new <a href="#/p5.Geometry">p5.Geometry</a> object. It will be called
-   * once to create the new 3D shape.
-   * 
-   * See <a href="#/p5/beginGeometry">beginGeometry()</a> and
-   * <a href="#/p5/endGeometry">endGeometry()</a> for another way to build 3D
-   * shapes.
-   * 
-   * Note: `buildGeometry()` can only be used in WebGL mode.
-   * @param callback function that draws the shape.
-   * @returns new 3D shape.
-   */
-  buildGeometry(callback: Function): p5.Geometry;
-
   /**
    * Loads a 3D model to create a
    * <a href="#/p5.Geometry">p5.Geometry</a> object.
@@ -3539,20 +3534,6 @@ declare class p5 {
    */
   smooth(): void;
 
-  /**
-   * Removes all items in the web browser's local storage.
-   * 
-   * Web browsers can save small amounts of data using the built-in
-   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">localStorage object</a>.
-   * Data stored in `localStorage` can be retrieved at any point, even after
-   * refreshing a page or restarting the browser. Data are stored as key-value
-   * pairs. Calling `clearStorage()` removes all data from `localStorage`.
-   * 
-   * Note: Sensitive data such as passwords or personal information shouldn't be
-   * stored in `localStorage`.
-   */
-  clearStorage(): void;
-
   /**
    * Converts a `Number` into a `String` with a plus or minus sign.
    * 
@@ -3588,6 +3569,20 @@ declare class p5 {
   nfp(num: number, left?: number, right?: number): string;
   nfp(nums: number[], left?: number, right?: number): string[];
 
+  /**
+   * Removes all items in the web browser's local storage.
+   * 
+   * Web browsers can save small amounts of data using the built-in
+   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">localStorage object</a>.
+   * Data stored in `localStorage` can be retrieved at any point, even after
+   * refreshing a page or restarting the browser. Data are stored as key-value
+   * pairs. Calling `clearStorage()` removes all data from `localStorage`.
+   * 
+   * Note: Sensitive data such as passwords or personal information shouldn't be
+   * stored in `localStorage`.
+   */
+  clearStorage(): void;
+
   /**
    * Removes all elements created by p5.js, including any event handlers.
    * 
@@ -3830,6 +3825,29 @@ declare class p5 {
   frameRate(fps: number): number;
   frameRate(): number;
 
+  /**
+   * Clears a <a href="#/p5.Geometry">p5.Geometry</a> object from the graphics
+   * processing unit (GPU) memory.
+   * 
+   * <a href="#/p5.Geometry">p5.Geometry</a> objects can contain lots of data
+   * about their vertices, surface normals, colors, and so on. Complex 3D shapes
+   * can use lots of memory which is a limited resource in many GPUs. Calling
+   * `freeGeometry()` works with <a href="#/p5.Geometry">p5.Geometry</a> objects
+   * created with <a href="#/p5/buildGeometry">buildGeometry()</a> and
+   * <a href="#/p5/loadModel">loadModel()</a>.
+   * 
+   * The parameter, `geometry`, is the <a href="#/p5.Geometry">p5.Geometry</a>
+   * object to be freed.
+   * 
+   * Note: A <a href="#/p5.Geometry">p5.Geometry</a> object can still be drawn
+   * after its resources are cleared from GPU memory. It may take longer to draw
+   * the first time it’s redrawn.
+   * 
+   * Note: `freeGeometry()` can only be used in WebGL mode.
+   * @param geometry 3D shape whose resources should be freed.
+   */
+  freeGeometry(geometry: p5.Geometry): void;
+
   /**
    * Calculates the cosine of an angle.
    * 
@@ -3892,14 +3910,14 @@ declare class p5 {
   specularColor(color: p5.Color): void;
 
   /**
-   * Creates a `&lt;div&gt;&lt;/div&gt;` element.
+   * Creates a `<div></div>` element.
    * 
-   * `&lt;div&gt;&lt;/div&gt;` elements are commonly used as containers for
+   * `<div></div>` elements are commonly used as containers for
    * other elements.
    * 
    * The parameter `html` is optional. It accepts a string that sets the
-   * inner HTML of the new `&lt;div&gt;&lt;/div&gt;`.
-   * @param html inner HTML for the new `&lt;div&gt;&lt;/div&gt;` element.
+   * inner HTML of the new `<div></div>`.
+   * @param html inner HTML for the new `<div></div>` element.
    * @returns new <a href="#/p5.Element">p5.Element</a> object.
    */
   createDiv(html?: string): p5.Element;
@@ -3957,27 +3975,6 @@ declare class p5 {
   boolean(n: string | boolean | number): boolean;
   boolean(ns: any[]): boolean[];
 
-  /**
-   * Removes an item from the web browser's local storage.
-   * 
-   * Web browsers can save small amounts of data using the built-in
-   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">localStorage object</a>.
-   * Data stored in `localStorage` can be retrieved at any point, even after
-   * refreshing a page or restarting the browser. Data are stored as key-value
-   * pairs.
-   * 
-   * <a href="#/p5/storeItem">storeItem()</a> makes it easy to store values in
-   * `localStorage` and `removeItem()` makes it easy to delete them.
-   * 
-   * The parameter, `key`, is the name of the value to remove as a string. For
-   * example, calling `removeItem('size')` removes the item with the key `size`.
-   * 
-   * Note: Sensitive data such as passwords or personal information shouldn't be
-   * stored in `localStorage`.
-   * @param key name of the value to remove.
-   */
-  removeItem(key: string): void;
-
   /**
    * Rotates the coordinate system.
    * 
@@ -4013,31 +4010,25 @@ declare class p5 {
   rotate(angle: number, axis?: p5.Vector | number[]): void;
 
   /**
-   * Clears a <a href="#/p5.Geometry">p5.Geometry</a> object from the graphics
-   * processing unit (GPU) memory.
+   * Removes an item from the web browser's local storage.
    * 
-   * <a href="#/p5.Geometry">p5.Geometry</a> objects can contain lots of data
-   * about their vertices, surface normals, colors, and so on. Complex 3D shapes
-   * can use lots of memory which is a limited resource in many GPUs. Calling
-   * `freeGeometry()` can improve performance by freeing a
-   * <a href="#/p5.Geometry">p5.Geometry</a> object’s resources from GPU memory.
-   * `freeGeometry()` works with <a href="#/p5.Geometry">p5.Geometry</a> objects
-   * created with <a href="#/p5/beginGeometry">beginGeometry()</a> and
-   * <a href="#/p5/endGeometry">endGeometry()</a>,
-   * <a href="#/p5/buildGeometry">buildGeometry()</a>, and
-   * <a href="#/p5/loadModel">loadModel()</a>.
+   * Web browsers can save small amounts of data using the built-in
+   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">localStorage object</a>.
+   * Data stored in `localStorage` can be retrieved at any point, even after
+   * refreshing a page or restarting the browser. Data are stored as key-value
+   * pairs.
    * 
-   * The parameter, `geometry`, is the <a href="#/p5.Geometry">p5.Geometry</a>
-   * object to be freed.
+   * <a href="#/p5/storeItem">storeItem()</a> makes it easy to store values in
+   * `localStorage` and `removeItem()` makes it easy to delete them.
    * 
-   * Note: A <a href="#/p5.Geometry">p5.Geometry</a> object can still be drawn
-   * after its resources are cleared from GPU memory. It may take longer to draw
-   * the first time it’s redrawn.
+   * The parameter, `key`, is the name of the value to remove as a string. For
+   * example, calling `removeItem('size')` removes the item with the key `size`.
    * 
-   * Note: `freeGeometry()` can only be used in WebGL mode.
-   * @param geometry 3D shape whose resources should be freed.
+   * Note: Sensitive data such as passwords or personal information shouldn't be
+   * stored in `localStorage`.
+   * @param key name of the value to remove.
    */
-  freeGeometry(geometry: p5.Geometry): void;
+  removeItem(key: string): void;
 
   /**
    * The <a href="#/p5/setMoveThreshold">setMoveThreshold()</a> function is used to set the movement threshold for
@@ -4127,11 +4118,11 @@ declare class p5 {
   /**
    * Creates a paragraph element.
    * 
-   * `&lt;p&gt;&lt;/p&gt;` elements are commonly used for paragraph-length text.
+   * `<p></p>` elements are commonly used for paragraph-length text.
    * 
    * The parameter `html` is optional. It accepts a string that sets the
-   * inner HTML of the new `&lt;p&gt;&lt;/p&gt;`.
-   * @param html inner HTML for the new `&lt;p&gt;&lt;/p&gt;` element.
+   * inner HTML of the new `<p></p>`.
+   * @param html inner HTML for the new `<p></p>` element.
    * @returns new <a href="#/p5.Element">p5.Element</a> object.
    */
   createP(html?: string): p5.Element;
@@ -4565,6 +4556,38 @@ declare class p5 {
    */
   loadTable(filename: string | Request, separator?: string, header?: string, callback?: Function, errorCallback?: Function): Promise<object>;
 
+  /**
+   * Draws a plane.
+   * 
+   * A plane is a four-sided, flat shape with every angle measuring 90˚. It’s
+   * similar to a rectangle and offers advanced drawing features in WebGL mode.
+   * 
+   * The first parameter, `width`, is optional. If a `Number` is passed, as in
+   * `plane(20)`, it sets the plane’s width and height. By default, `width` is
+   * 50.
+   * 
+   * The second parameter, `height`, is also optional. If a `Number` is passed,
+   * as in `plane(20, 30)`, it sets the plane’s height. By default, `height` is
+   * set to the plane’s `width`.
+   * 
+   * The third parameter, `detailX`, is also optional. If a `Number` is passed,
+   * as in `plane(20, 30, 5)` it sets the number of triangle subdivisions to use
+   * along the x-axis. All 3D shapes are made by connecting triangles to form
+   * their surfaces. By default, `detailX` is 1.
+   * 
+   * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
+   * as in `plane(20, 30, 5, 7)` it sets the number of triangle subdivisions to
+   * use along the y-axis. All 3D shapes are made by connecting triangles to
+   * form their surfaces. By default, `detailY` is 1.
+   * 
+   * Note: `plane()` can only be used in WebGL mode.
+   * @param width width of the plane.
+   * @param height height of the plane.
+   * @param detailX number of triangle subdivisions along the x-axis.
+   * @param detailY number of triangle subdivisions along the y-axis.
+   */
+  plane(width?: number, height?: number, detailX?: number, detailY?: number): void;
+
   /**
    * Gets the red value of a color.
    * 
@@ -4650,16 +4673,16 @@ declare class p5 {
   tan(angle: number): number;
 
   /**
-   * Creates a `&lt;span&gt;&lt;/span&gt;` element.
+   * Creates a `<span></span>` element.
    * 
-   * `&lt;span&gt;&lt;/span&gt;` elements are commonly used as containers
-   * for inline elements. For example, a `&lt;span&gt;&lt;/span&gt;`
+   * `<span></span>` elements are commonly used as containers
+   * for inline elements. For example, a `<span></span>`
    * can hold part of a sentence that's a
    * <span style="color: deeppink;">different</span> style.
    * 
    * The parameter `html` is optional. It accepts a string that sets the
-   * inner HTML of the new `&lt;span&gt;&lt;/span&gt;`.
-   * @param html inner HTML for the new `&lt;span&gt;&lt;/span&gt;` element.
+   * inner HTML of the new `<span></span>`.
+   * @param html inner HTML for the new `<span></span>` element.
    * @returns new <a href="#/p5.Element">p5.Element</a> object.
    */
   createSpan(html?: string): p5.Element;
@@ -4712,38 +4735,6 @@ declare class p5 {
    */
   loadFilterShader(filename: string, successCallback?: Function, failureCallback?: Function): Promise<p5.Shader>;
 
-  /**
-   * Draws a plane.
-   * 
-   * A plane is a four-sided, flat shape with every angle measuring 90˚. It’s
-   * similar to a rectangle and offers advanced drawing features in WebGL mode.
-   * 
-   * The first parameter, `width`, is optional. If a `Number` is passed, as in
-   * `plane(20)`, it sets the plane’s width and height. By default, `width` is
-   * 50.
-   * 
-   * The second parameter, `height`, is also optional. If a `Number` is passed,
-   * as in `plane(20, 30)`, it sets the plane’s height. By default, `height` is
-   * set to the plane’s `width`.
-   * 
-   * The third parameter, `detailX`, is also optional. If a `Number` is passed,
-   * as in `plane(20, 30, 5)` it sets the number of triangle subdivisions to use
-   * along the x-axis. All 3D shapes are made by connecting triangles to form
-   * their surfaces. By default, `detailX` is 1.
-   * 
-   * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
-   * as in `plane(20, 30, 5, 7)` it sets the number of triangle subdivisions to
-   * use along the y-axis. All 3D shapes are made by connecting triangles to
-   * form their surfaces. By default, `detailY` is 1.
-   * 
-   * Note: `plane()` can only be used in WebGL mode.
-   * @param width width of the plane.
-   * @param height height of the plane.
-   * @param detailX number of triangle subdivisions along the x-axis.
-   * @param detailY number of triangle subdivisions along the y-axis.
-   */
-  plane(width?: number, height?: number, detailX?: number, detailY?: number): void;
-
   /**
    * Creates and a new <a href="#/p5.Framebuffer">p5.Framebuffer</a> object.
    * 
@@ -4853,7 +4844,7 @@ declare class p5 {
   map(value: number, start1: number, stop1: number, start2: number, stop2: number, withinBounds?: boolean): number;
 
   /**
-   * Creates an `&lt;img&gt;` element that can appear outside of the canvas.
+   * Creates an `<img>` element that can appear outside of the canvas.
    * 
    * The first parameter, `src`, is a string with the path to the image file.
    * `src` should be a relative path, as in `'assets/image.png'`, or a URL, as
@@ -5111,6 +5102,42 @@ declare class p5 {
    */
   green(color: p5.Color | number[] | string): number;
 
+  /**
+   * Draws a box (rectangular prism).
+   * 
+   * A box is a 3D shape with six faces. Each face makes a 90˚ with four
+   * neighboring faces.
+   * 
+   * The first parameter, `width`, is optional. If a `Number` is passed, as in
+   * `box(20)`, it sets the box’s width and height. By default, `width` is 50.
+   * 
+   * The second parameter, `height`, is also optional. If a `Number` is passed,
+   * as in `box(20, 30)`, it sets the box’s height. By default, `height` is set
+   * to the box’s `width`.
+   * 
+   * The third parameter, `depth`, is also optional. If a `Number` is passed, as
+   * in `box(20, 30, 40)`, it sets the box’s depth. By default, `depth` is set
+   * to the box’s `height`.
+   * 
+   * The fourth parameter, `detailX`, is also optional. If a `Number` is passed,
+   * as in `box(20, 30, 40, 5)`, it sets the number of triangle subdivisions to
+   * use along the x-axis. All 3D shapes are made by connecting triangles to
+   * form their surfaces. By default, `detailX` is 1.
+   * 
+   * The fifth parameter, `detailY`, is also optional. If a number is passed, as
+   * in `box(20, 30, 40, 5, 7)`, it sets the number of triangle subdivisions to
+   * use along the y-axis. All 3D shapes are made by connecting triangles to
+   * form their surfaces. By default, `detailY` is 1.
+   * 
+   * Note: `box()` can only be used in WebGL mode.
+   * @param width width of the box.
+   * @param height height of the box.
+   * @param depth depth of the box.
+   * @param detailX number of triangle subdivisions along the x-axis.
+   * @param detailY number of triangle subdivisions along the y-axis.
+   */
+  box(width?: number, height?: number, depth?: number, detailX?: number, detailY?: number): void;
+
   /**
    * Returns the largest value in a sequence of numbers.
    * 
@@ -5161,7 +5188,7 @@ declare class p5 {
   bezierVertex(x: number, y: number, z: number, u?: number, v?: number): void;
 
   /**
-   * Creates an `&lt;a&gt;&lt;/a&gt;` element that links to another web page.
+   * Creates an `<a></a>` element that links to another web page.
    * 
    * The first parmeter, `href`, is a string that sets the URL of the linked
    * page.
@@ -5318,42 +5345,6 @@ declare class p5 {
   clear(r?: number, g?: number, b?: number, a?: number): void;
   clear(): void;
 
-  /**
-   * Draws a box (rectangular prism).
-   * 
-   * A box is a 3D shape with six faces. Each face makes a 90˚ with four
-   * neighboring faces.
-   * 
-   * The first parameter, `width`, is optional. If a `Number` is passed, as in
-   * `box(20)`, it sets the box’s width and height. By default, `width` is 50.
-   * 
-   * The second parameter, `height`, is also optional. If a `Number` is passed,
-   * as in `box(20, 30)`, it sets the box’s height. By default, `height` is set
-   * to the box’s `width`.
-   * 
-   * The third parameter, `depth`, is also optional. If a `Number` is passed, as
-   * in `box(20, 30, 40)`, it sets the box’s depth. By default, `depth` is set
-   * to the box’s `height`.
-   * 
-   * The fourth parameter, `detailX`, is also optional. If a `Number` is passed,
-   * as in `box(20, 30, 40, 5)`, it sets the number of triangle subdivisions to
-   * use along the x-axis. All 3D shapes are made by connecting triangles to
-   * form their surfaces. By default, `detailX` is 1.
-   * 
-   * The fifth parameter, `detailY`, is also optional. If a number is passed, as
-   * in `box(20, 30, 40, 5, 7)`, it sets the number of triangle subdivisions to
-   * use along the y-axis. All 3D shapes are made by connecting triangles to
-   * form their surfaces. By default, `detailY` is 1.
-   * 
-   * Note: `box()` can only be used in WebGL mode.
-   * @param width width of the box.
-   * @param height height of the box.
-   * @param depth depth of the box.
-   * @param detailX number of triangle subdivisions along the x-axis.
-   * @param detailY number of triangle subdivisions along the y-axis.
-   */
-  box(width?: number, height?: number, depth?: number, detailX?: number, detailY?: number): void;
-
   /**
    * Converts a `Number` or `String` to a single-character `String`.
    * 
@@ -5498,7 +5489,7 @@ declare class p5 {
    * (<a href="https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction" target="_blank">XML</a>)
    * is a standard format for sending data between applications. Like HTML, the
    * XML format is based on tags and attributes, as in
-   * `&lt;time units="s"&gt;1234&lt;/time&gt;`.
+   * `<time units="s">1234</time>`.
    * 
    * The first parameter, `path`, is always a string with the path to the file.
    * Paths to local files should be relative, as in
@@ -5667,6 +5658,33 @@ declare class p5 {
   angleMode(mode: typeof p5.RADIANS | typeof p5.DEGREES): typeof p5.RADIANS | typeof p5.DEGREES;
   angleMode(): typeof p5.RADIANS | typeof p5.DEGREES;
 
+  /**
+   * Draws a sphere.
+   * 
+   * A sphere is a 3D shape with triangular faces that connect to form a round
+   * surface. Spheres with few faces look like crystals. Spheres with many faces
+   * have smooth surfaces and look like balls.
+   * 
+   * The first parameter, `radius`, is optional. If a `Number` is passed, as in
+   * `sphere(20)`, it sets the radius of the sphere. By default, `radius` is 50.
+   * 
+   * The second parameter, `detailX`, is also optional. If a `Number` is passed,
+   * as in `sphere(20, 5)`, it sets the number of triangle subdivisions to use
+   * along the x-axis. All 3D shapes are made by connecting triangles to form
+   * their surfaces. By default, `detailX` is 24.
+   * 
+   * The third parameter, `detailY`, is also optional. If a `Number` is passed,
+   * as in `sphere(20, 5, 2)`, it sets the number of triangle subdivisions to
+   * use along the y-axis. All 3D shapes are made by connecting triangles to
+   * form their surfaces. By default, `detailY` is 16.
+   * 
+   * Note: `sphere()` can only be used in WebGL mode.
+   * @param radius radius of the sphere. Defaults to 50.
+   * @param detailX number of triangle subdivisions along the x-axis. Defaults to 24.
+   * @param detailY number of triangle subdivisions along the y-axis. Defaults to 16.
+   */
+  sphere(radius?: number, detailX?: number, detailY?: number): void;
+
   /**
    * Loads the current value of each pixel on the canvas into the
    * <a href="#/p5/pixels">pixels</a> array.
@@ -5851,7 +5869,7 @@ declare class p5 {
   loadBytes(file: string | Request, callback?: Function, errorCallback?: Function): Promise<Uint8Array>;
 
   /**
-   * Creates a slider `&lt;input&gt;&lt;/input&gt;` element.
+   * Creates a slider `<input></input>` element.
    * 
    * Range sliders are useful for quickly selecting numbers from a given range.
    * 
@@ -5888,33 +5906,6 @@ declare class p5 {
    */
   norm(value: number, start: number, stop: number): number;
 
-  /**
-   * Draws a sphere.
-   * 
-   * A sphere is a 3D shape with triangular faces that connect to form a round
-   * surface. Spheres with few faces look like crystals. Spheres with many faces
-   * have smooth surfaces and look like balls.
-   * 
-   * The first parameter, `radius`, is optional. If a `Number` is passed, as in
-   * `sphere(20)`, it sets the radius of the sphere. By default, `radius` is 50.
-   * 
-   * The second parameter, `detailX`, is also optional. If a `Number` is passed,
-   * as in `sphere(20, 5)`, it sets the number of triangle subdivisions to use
-   * along the x-axis. All 3D shapes are made by connecting triangles to form
-   * their surfaces. By default, `detailX` is 24.
-   * 
-   * The third parameter, `detailY`, is also optional. If a `Number` is passed,
-   * as in `sphere(20, 5, 2)`, it sets the number of triangle subdivisions to
-   * use along the y-axis. All 3D shapes are made by connecting triangles to
-   * form their surfaces. By default, `detailY` is 16.
-   * 
-   * Note: `sphere()` can only be used in WebGL mode.
-   * @param radius radius of the sphere. Defaults to 50.
-   * @param detailX number of triangle subdivisions along the x-axis. Defaults to 24.
-   * @param detailY number of triangle subdivisions along the y-axis. Defaults to 16.
-   */
-  sphere(radius?: number, detailX?: number, detailY?: number): void;
-
   /**
    * A function that's called once when any key is released.
    * 
@@ -6105,7 +6096,7 @@ declare class p5 {
   alpha(color: p5.Color | number[] | string): number;
 
   /**
-   * Creates a `&lt;button&gt;&lt;/button&gt;` element.
+   * Creates a `<button></button>` element.
    * 
    * The first parameter, `label`, is a string that sets the label displayed on
    * the button.
@@ -6396,7 +6387,7 @@ declare class p5 {
   panorama(img: p5.Image): void;
 
   /**
-   * Creates a checkbox `&lt;input&gt;&lt;/input&gt;` element.
+   * Creates a checkbox `<input></input>` element.
    * 
    * Checkboxes extend the <a href="#/p5.Element">p5.Element</a> class with a
    * `checked()` method. Calling `myBox.checked()` returns `true` if it the box
@@ -6472,6 +6463,50 @@ declare class p5 {
    */
   hue(color: p5.Color | number[] | string): number;
 
+  /**
+   * Draws a cylinder.
+   * 
+   * A cylinder is a 3D shape with triangular faces that connect a flat bottom
+   * to a flat top. Cylinders with few faces look like boxes. Cylinders with
+   * many faces have smooth surfaces.
+   * 
+   * The first parameter, `radius`, is optional. If a `Number` is passed, as in
+   * `cylinder(20)`, it sets the radius of the cylinder’s base. By default,
+   * `radius` is 50.
+   * 
+   * The second parameter, `height`, is also optional. If a `Number` is passed,
+   * as in `cylinder(20, 30)`, it sets the cylinder’s height. By default,
+   * `height` is set to the cylinder’s `radius`.
+   * 
+   * The third parameter, `detailX`, is also optional. If a `Number` is passed,
+   * as in `cylinder(20, 30, 5)`, it sets the number of edges used to form the
+   * cylinder's top and bottom. Using more edges makes the top and bottom look
+   * more like circles. By default, `detailX` is 24.
+   * 
+   * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
+   * as in `cylinder(20, 30, 5, 2)`, it sets the number of triangle subdivisions
+   * to use along the y-axis, between cylinder's the top and bottom. All 3D
+   * shapes are made by connecting triangles to form their surfaces. By default,
+   * `detailY` is 1.
+   * 
+   * The fifth parameter, `bottomCap`, is also optional. If a `false` is passed,
+   * as in `cylinder(20, 30, 5, 2, false)` the cylinder’s bottom won’t be drawn.
+   * By default, `bottomCap` is `true`.
+   * 
+   * The sixth parameter, `topCap`, is also optional. If a `false` is passed, as
+   * in `cylinder(20, 30, 5, 2, false, false)` the cylinder’s top won’t be
+   * drawn. By default, `topCap` is `true`.
+   * 
+   * Note: `cylinder()` can only be used in WebGL mode.
+   * @param radius radius of the cylinder. Defaults to 50.
+   * @param height height of the cylinder. Defaults to the value of `radius`.
+   * @param detailX number of edges along the top and bottom. Defaults to 24.
+   * @param detailY number of triangle subdivisions along the y-axis. Defaults to 1.
+   * @param bottomCap whether to draw the cylinder's bottom. Defaults to `true`.
+   * @param topCap whether to draw the cylinder's top. Defaults to `true`.
+   */
+  cylinder(radius?: number, height?: number, detailX?: number, detailY?: number, bottomCap?: boolean, topCap?: boolean): void;
+
   /**
    * Scales the coordinate system.
    * 
@@ -6591,50 +6626,6 @@ declare class p5 {
   httpPost(path: string | Request, data: object | boolean, callback?: Function, errorCallback?: Function): Promise<any>;
   httpPost(path: string | Request, callback?: Function, errorCallback?: Function): Promise<any>;
 
-  /**
-   * Draws a cylinder.
-   * 
-   * A cylinder is a 3D shape with triangular faces that connect a flat bottom
-   * to a flat top. Cylinders with few faces look like boxes. Cylinders with
-   * many faces have smooth surfaces.
-   * 
-   * The first parameter, `radius`, is optional. If a `Number` is passed, as in
-   * `cylinder(20)`, it sets the radius of the cylinder’s base. By default,
-   * `radius` is 50.
-   * 
-   * The second parameter, `height`, is also optional. If a `Number` is passed,
-   * as in `cylinder(20, 30)`, it sets the cylinder’s height. By default,
-   * `height` is set to the cylinder’s `radius`.
-   * 
-   * The third parameter, `detailX`, is also optional. If a `Number` is passed,
-   * as in `cylinder(20, 30, 5)`, it sets the number of edges used to form the
-   * cylinder's top and bottom. Using more edges makes the top and bottom look
-   * more like circles. By default, `detailX` is 24.
-   * 
-   * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
-   * as in `cylinder(20, 30, 5, 2)`, it sets the number of triangle subdivisions
-   * to use along the y-axis, between cylinder's the top and bottom. All 3D
-   * shapes are made by connecting triangles to form their surfaces. By default,
-   * `detailY` is 1.
-   * 
-   * The fifth parameter, `bottomCap`, is also optional. If a `false` is passed,
-   * as in `cylinder(20, 30, 5, 2, false)` the cylinder’s bottom won’t be drawn.
-   * By default, `bottomCap` is `true`.
-   * 
-   * The sixth parameter, `topCap`, is also optional. If a `false` is passed, as
-   * in `cylinder(20, 30, 5, 2, false, false)` the cylinder’s top won’t be
-   * drawn. By default, `topCap` is `true`.
-   * 
-   * Note: `cylinder()` can only be used in WebGL mode.
-   * @param radius radius of the cylinder. Defaults to 50.
-   * @param height height of the cylinder. Defaults to the value of `radius`.
-   * @param detailX number of edges along the top and bottom. Defaults to 24.
-   * @param detailY number of triangle subdivisions along the y-axis. Defaults to 1.
-   * @param bottomCap whether to draw the cylinder's bottom. Defaults to `true`.
-   * @param topCap whether to draw the cylinder's top. Defaults to `true`.
-   */
-  cylinder(radius?: number, height?: number, detailX?: number, detailY?: number, bottomCap?: boolean, topCap?: boolean): void;
-
   /**
    * Returns the sketch's current
    * <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL" target="_blank">URL</a>
@@ -7232,7 +7223,7 @@ declare class p5 {
    * Sets the element's content.
    * 
    * An element's content is the text between its tags. For example, the element
-   * `&lt;language&gt;JavaScript&lt;/language&gt;` has the content `JavaScript`.
+   * `<language>JavaScript</language>` has the content `JavaScript`.
    * 
    * The parameter, `content`, is a string with the element's new content.
    * @param content new content for the element.
@@ -7245,9 +7236,7 @@ declare class p5 {
    * The parameter, `model`, is the
    * <a href="#/p5.Geometry">p5.Geometry</a> object to draw.
    * <a href="#/p5.Geometry">p5.Geometry</a> objects can be built with
-   * <a href="#/p5/buildGeometry">buildGeometry()</a>, or
-   * <a href="#/p5/beginGeometry">beginGeometry()</a> and
-   * <a href="#/p5/endGeometry">endGeometry()</a>. They can also be loaded from
+   * <a href="#/p5/buildGeometry">buildGeometry()</a>. They can also be loaded from
    * a file with <a href="#/p5/loadGeometry">loadGeometry()</a>.
    * 
    * Note: `model()` can only be used in WebGL mode.
@@ -7355,11 +7344,11 @@ declare class p5 {
   saturation(color: p5.Color | number[] | string): number;
 
   /**
-   * Creates a dropdown menu `&lt;select&gt;&lt;/select&gt;` element.
+   * Creates a dropdown menu `<select></select>` element.
    * 
    * The parameter is optional. If `true` is passed, as in
    * `let mySelect = createSelect(true)`, then the dropdown will support
-   * multiple selections. If an existing `&lt;select&gt;&lt;/select&gt;` element
+   * multiple selections. If an existing `<select></select>` element
    * is passed, as in `let mySelect = createSelect(otherSelect)`, the existing
    * element will be wrapped in a new <a href="#/p5.Element">p5.Element</a>
    * object.
@@ -7388,20 +7377,6 @@ declare class p5 {
   createSelect(multiple?: boolean): p5.Element;
   createSelect(existing: object): p5.Element;
 
-  /**
-   * Converts 3D world coordinates to 2D screen coordinates.
-   * 
-   * This function takes a 3D vector and converts its coordinates
-   * from the world space to screen space. This can be useful for placing
-   * 2D elements in a 3D scene or for determining the screen position
-   * of 3D objects.
-   * @param x The x coordinate in world space. (Or a vector for all three coordinates.)
-   * @param y The y coordinate in world space.
-   * @param z The z coordinate in world space.
-   * @returns A vector containing the 2D screen coordinates.
-   */
-  worldToScreen(x: number | p5.Vector, y: number, z?: number): p5.Vector;
-
   /**
    * Draws a cone.
    * 
@@ -7440,6 +7415,20 @@ declare class p5 {
    */
   cone(radius?: number, height?: number, detailX?: number, detailY?: number, cap?: boolean): void;
 
+  /**
+   * Converts 3D world coordinates to 2D screen coordinates.
+   * 
+   * This function takes a 3D vector and converts its coordinates
+   * from the world space to screen space. This can be useful for placing
+   * 2D elements in a 3D scene or for determining the screen position
+   * of 3D objects.
+   * @param x The x coordinate in world space. (Or a vector for all three coordinates.)
+   * @param y The y coordinate in world space.
+   * @param z The z coordinate in world space.
+   * @returns A vector containing the 2D screen coordinates.
+   */
+  worldToScreen(x: number | p5.Vector, y: number, z?: number): p5.Vector;
+
   /**
    * Load a 3d model from an OBJ or STL string.
    * 
@@ -8354,8 +8343,8 @@ declare class p5 {
    * 
    * The parameter is optional. If a string is passed, as in
    * `let myRadio = createSelect('food')`, then each radio option will
-   * have `"food"` as its `name` parameter: `&lt;input name="food"&gt;&lt;/input&gt;`.
-   * If an existing `&lt;div&gt;&lt;/div&gt;` or `&lt;span&gt;&lt;/span&gt;`
+   * have `"food"` as its `name` parameter: `<input name="food"></input>`.
+   * If an existing `<div></div>` or `<span></span>`
    * element is passed, as in `let myRadio = createSelect(container)`, it will
    * become the radio button's parent element.
    * 
@@ -8371,8 +8360,8 @@ declare class p5 {
    * - `myRadio.selected(value)` selects the given option and returns it as an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement" target="_blank">`HTMLInputElement`</a>.
    * 
    * - `myRadio.disable(shouldDisable)` enables the entire radio button if `true` is passed and disables it if `false` is passed.
-   * @param containerElement container HTML Element, either a `&lt;div&gt;&lt;/div&gt;`
-   * or `&lt;span&gt;&lt;/span&gt;`.
+   * @param containerElement container HTML Element, either a `<div></div>`
+   * or `<span></span>`.
    * @returns new <a href="#/p5.Element">p5.Element</a> object.
    */
   createRadio(containerElement?: object): p5.Element;
@@ -8380,7 +8369,7 @@ declare class p5 {
   createRadio(): p5.Element;
 
   /**
-   * Creates a `&lt;video&gt;` element for simple audio/video playback.
+   * Creates a `<video>` element for simple audio/video playback.
    * 
    * `createVideo()` returns a new
    * <a href="#/p5.MediaElement">p5.MediaElement</a> object. Videos are shown by
@@ -8469,7 +8458,7 @@ declare class p5 {
   lerpColor(c1: p5.Color, c2: p5.Color, amt: number): p5.Color;
 
   /**
-   * Creates a hidden `&lt;audio&gt;` element for simple audio playback.
+   * Creates a hidden `<audio>` element for simple audio playback.
    * 
    * `createAudio()` returns a new
    * <a href="#/p5.MediaElement">p5.MediaElement</a> object.
@@ -8492,22 +8481,6 @@ declare class p5 {
    */
   createAudio(src?: string | string[], callback?: (video: p5.MediaElement<HTMLAudioElement>) => any): p5.MediaElement<HTMLAudioElement>;
 
-  /**
-   * Blends multiple colors to find a color between them.
-   * 
-   * The `amt` parameter specifies the amount to interpolate between the color
-   * stops which are colors at each `amt` value "location" with `amt` values
-   * that are between 2 color stops interpolating between them based on its relative
-   * distance to both.
-   * 
-   * The way that colors are interpolated depends on the current
-   * <a href="/reference/p5/colorMode/">colorMode()</a>.
-   * @param colors_stops color stops to interpolate from
-   * @param amt number to use to interpolate relative to color stops
-   * @returns interpolated color.
-   */
-  paletteLerp(colors_stops: [p5.Color | string | number | number[], number][], amt: number): p5.Color;
-
   /**
    * Draws a torus.
    * 
@@ -8539,6 +8512,22 @@ declare class p5 {
    */
   torus(radius?: number, tubeRadius?: number, detailX?: number, detailY?: number): void;
 
+  /**
+   * Blends multiple colors to find a color between them.
+   * 
+   * The `amt` parameter specifies the amount to interpolate between the color
+   * stops which are colors at each `amt` value "location" with `amt` values
+   * that are between 2 color stops interpolating between them based on its relative
+   * distance to both.
+   * 
+   * The way that colors are interpolated depends on the current
+   * <a href="/reference/p5/colorMode/">colorMode()</a>.
+   * @param colors_stops color stops to interpolate from
+   * @param amt number to use to interpolate relative to color stops
+   * @returns interpolated color.
+   */
+  paletteLerp(colors_stops: [p5.Color | string | number | number[], number][], amt: number): p5.Color;
+
   /**
    * Saves the file and closes the print stream.
    */
@@ -8762,7 +8751,7 @@ declare class p5 {
   buildMaterialShader(hooks: object, scope?: object): p5.Shader;
 
   /**
-   * Creates a `&lt;video&gt;` element that "captures" the audio/video stream from
+   * Creates a `<video>` element that "captures" the audio/video stream from
    * the webcam and microphone.
    * 
    * `createCapture()` returns a new
@@ -9075,7 +9064,7 @@ declare class p5 {
   noErase(): void;
 
   /**
-   * Creates a text `&lt;input&gt;&lt;/input&gt;` element.
+   * Creates a text `<input></input>` element.
    * 
    * Call `myInput.size()` to set the length of the text box.
    * 
@@ -9423,7 +9412,7 @@ declare class p5 {
   pop(): void;
 
   /**
-   * Creates an `&lt;input&gt;&lt;/input&gt;` element of type `'file'`.
+   * Creates an `<input></input>` element of type `'file'`.
    * 
    * `createFileInput()` allows users to select local files for use in a sketch.
    * It returns a <a href="#/p5.File">p5.File</a> object.
@@ -10403,6 +10392,20 @@ declare class p5 {
   vertex(x: number, y: number, u?: number, v?: number): void;
   vertex(x: number, y: number, z: number, u?: number, v?: number): void;
 
+  /**
+   * Sets the number of segments used to draw spline curves in WebGL mode.
+   * 
+   * In WebGL mode, smooth shapes are drawn using many flat segments. Adding
+   * more flat segments makes shapes appear smoother.
+   * 
+   * The parameter, `detail`, is the density of segments to use while drawing a
+   * spline curve.
+   * 
+   * Note: `curveDetail()` has no effect in 2D mode.
+   * @param resolution number of segments to use. Default is 1/4
+   */
+  curveDetail(resolution: number): void;
+
   /**
    * Sets the frustum of the current camera in a 3D sketch.
    * 
@@ -10442,20 +10445,6 @@ declare class p5 {
    */
   frustum(left?: number, right?: number, bottom?: number, top?: number, near?: number, far?: number): void;
 
-  /**
-   * Sets the number of segments used to draw spline curves in WebGL mode.
-   * 
-   * In WebGL mode, smooth shapes are drawn using many flat segments. Adding
-   * more flat segments makes shapes appear smoother.
-   * 
-   * The parameter, `detail`, is the density of segments to use while drawing a
-   * spline curve.
-   * 
-   * Note: `curveDetail()` has no effect in 2D mode.
-   * @param resolution number of segments to use. Default is 1/4
-   */
-  curveDetail(resolution: number): void;
-
   /**
    * Creates a new <a href="#/p5.Camera">p5.Camera</a> object.
    * 
@@ -12208,7 +12197,7 @@ const EXCLUDE: typeof __EXCLUDE;
    * Removes the graphics buffer from the web page.
    * 
    * Calling `myGraphics.remove()` removes the graphics buffer's
-   * `&lt;canvas&gt;` element from the web page. The graphics buffer also uses
+   * `<canvas>` element from the web page. The graphics buffer also uses
    * a bit of memory on the CPU that can be freed like so:
    * 
    * `// Remove the graphics buffer from the web page.
@@ -12672,7 +12661,7 @@ const EXCLUDE: typeof __EXCLUDE;
    * (<a href="https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction" target="_blank">XML</a>)
    * is a standard format for sending data between applications. Like HTML, the
    * XML format is based on tags and attributes, as in
-   * `&lt;time units="s"&gt;1234&lt;/time&gt;`.
+   * `<time units="s">1234</time>`.
    * 
    * Note: Use <a href="#/p5/loadXML">loadXML()</a> to load external XML files.
    */
@@ -12688,7 +12677,7 @@ const EXCLUDE: typeof __EXCLUDE;
    * Returns the element's name as a `String`.
    * 
    * An XML element's name is given by its tag. For example, the element
-   * `&lt;language&gt;JavaScript&lt;/language&gt;` has the name `language`.
+   * `<language>JavaScript</language>` has the name `language`.
    * @returns name of the element.
    */
   getName(): string;
@@ -12697,11 +12686,11 @@ const EXCLUDE: typeof __EXCLUDE;
    * Sets the element's tag name.
    * 
    * An XML element's name is given by its tag. For example, the element
-   * `&lt;language&gt;JavaScript&lt;/language&gt;` has the name `language`.
+   * `<language>JavaScript</language>` has the name `language`.
    * 
    * The parameter, `name`, is the element's new name as a string. For example,
    * calling `myXML.setName('planet')` will make the element's new tag name
-   * `&lt;planet&gt;&lt;/planet&gt;`.
+   * `<planet></planet>`.
    * @param name new tag name of the element.
    */
   setName(name: string): void;
@@ -12725,7 +12714,7 @@ const EXCLUDE: typeof __EXCLUDE;
    * 
    * The parameter, `name`, is optional. If a string is passed, as in
    * `myXML.getChildren('cat')`, then the method will only return child elements
-   * with the tag `&lt;cat&gt;`.
+   * with the tag `<cat>`.
    * @param name name of the elements to return.
    * @returns child elements.
    */
@@ -12737,7 +12726,7 @@ const EXCLUDE: typeof __EXCLUDE;
    * 
    * The parameter, `name`, is optional. If a string is passed, as in
    * `myXML.getChild('cat')`, then the first child element with the tag
-   * `&lt;cat&gt;` will be returned. If a number is passed, as in
+   * `<cat>` will be returned. If a number is passed, as in
    * `myXML.getChild(1)`, then the child element at that index will be returned.
    * @param name element name or index.
    * @returns child element.
@@ -12760,7 +12749,7 @@ const EXCLUDE: typeof __EXCLUDE;
    * 
    * The parameter, `name`, is the child element to remove. If a string is
    * passed, as in `myXML.removeChild('cat')`, then the first child element
-   * with the tag `&lt;cat&gt;` will be removed. If a number is passed, as in
+   * with the tag `<cat>` will be removed. If a number is passed, as in
    * `myXML.removeChild(1)`, then the child element at that index will be
    * removed.
    * @param name name or index of the child element to remove.
@@ -14638,9 +14627,9 @@ const EXCLUDE: typeof __EXCLUDE;
   /**
    * Attaches the element to a parent element.
    * 
-   * For example, a `&lt;div&gt;&lt;/div&gt;` element may be used as a box to
+   * For example, a `<div></div>` element may be used as a box to
    * hold two pieces of text, a header and a paragraph. The
-   * `&lt;div&gt;&lt;/div&gt;` is the parent element of both the header and
+   * `<div></div>` is the parent element of both the header and
    * paragraph.
    * 
    * The parameter `parent` can have one of three types. `parent` can be a