p5 2.2.3-rc.1 → 2.2.3

package/types/global.d.ts

@@ -965,9 +965,9 @@ BOTTOM: typeof P5.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>
@@ -2897,6 +2897,26 @@ EXCLUDE: typeof P5.EXCLUDE;
   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.
    * 
@@ -2927,31 +2947,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   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.
@@ -3111,20 +3106,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   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.
    * 
@@ -3160,6 +3141,20 @@ EXCLUDE: typeof P5.EXCLUDE;
   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.
    * 
@@ -3402,6 +3397,29 @@ EXCLUDE: typeof P5.EXCLUDE;
   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.
    * 
@@ -3464,14 +3482,14 @@ EXCLUDE: typeof P5.EXCLUDE;
   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;
@@ -3529,27 +3547,6 @@ EXCLUDE: typeof P5.EXCLUDE;
   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.
    * 
@@ -3585,31 +3582,25 @@ EXCLUDE: typeof P5.EXCLUDE;
   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
@@ -3699,11 +3690,11 @@ EXCLUDE: typeof P5.EXCLUDE;
   /**
    * 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;
@@ -4137,6 +4128,38 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   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.
    * 
@@ -4222,16 +4245,16 @@ EXCLUDE: typeof P5.EXCLUDE;
   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;
@@ -4284,38 +4307,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   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.
    * 
@@ -4425,7 +4416,7 @@ EXCLUDE: typeof P5.EXCLUDE;
   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
@@ -4683,6 +4674,42 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   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.
    * 
@@ -4733,7 +4760,7 @@ EXCLUDE: typeof P5.EXCLUDE;
   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.
@@ -4891,52 +4918,16 @@ EXCLUDE: typeof P5.EXCLUDE;
   clear(): void;
 
   /**
-   * Draws a box (rectangular prism).
+   * Converts a `Number` or `String` to a single-character `String`.
    * 
-   * A box is a 3D shape with six faces. Each face makes a 90˚ with four
-   * neighboring faces.
+   * `char()` converts numbers to their single-character string representations.
    * 
-   * 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`.
-   * 
-   * `char()` converts numbers to their single-character string representations.
-   * 
-   * The parameter, `n`, is the value to convert. If a number is passed, as in
-   * `char(65)`, the corresponding single-character string is returned. If a
-   * string is passed, as in `char('65')`, the string is converted to an integer
-   * (whole number) and the corresponding single-character string is returned.
-   * If an array is passed, as in `char([65, 66, 67])`, an array of
-   * single-character strings is returned.
+   * The parameter, `n`, is the value to convert. If a number is passed, as in
+   * `char(65)`, the corresponding single-character string is returned. If a
+   * string is passed, as in `char('65')`, the string is converted to an integer
+   * (whole number) and the corresponding single-character string is returned.
+   * If an array is passed, as in `char([65, 66, 67])`, an array of
+   * single-character strings is returned.
    * 
    * See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode" target="_blank">MDN</a>
    * for more information about conversions.
@@ -5070,7 +5061,7 @@ EXCLUDE: typeof P5.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>`.
    * 
    * The first parameter, `path`, is always a string with the path to the file.
    * Paths to local files should be relative, as in
@@ -5239,6 +5230,33 @@ EXCLUDE: typeof P5.EXCLUDE;
   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.
@@ -5423,7 +5441,7 @@ EXCLUDE: typeof P5.EXCLUDE;
   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.
    * 
@@ -5460,33 +5478,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   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.
    * 
@@ -5677,7 +5668,7 @@ EXCLUDE: typeof P5.EXCLUDE;
   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.
@@ -5968,7 +5959,7 @@ EXCLUDE: typeof P5.EXCLUDE;
   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
@@ -6044,6 +6035,50 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   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.
    * 
@@ -6163,50 +6198,6 @@ EXCLUDE: typeof P5.EXCLUDE;
   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>
@@ -6804,7 +6795,7 @@ EXCLUDE: typeof P5.EXCLUDE;
    * 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.
@@ -6817,9 +6808,7 @@ EXCLUDE: typeof P5.EXCLUDE;
    * 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.
@@ -6927,11 +6916,11 @@ EXCLUDE: typeof P5.EXCLUDE;
   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.
@@ -6960,20 +6949,6 @@ EXCLUDE: typeof P5.EXCLUDE;
   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.
    * 
@@ -7012,6 +6987,20 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   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.
    * 
@@ -7926,8 +7915,8 @@ EXCLUDE: typeof P5.EXCLUDE;
    * 
    * 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.
    * 
@@ -7943,8 +7932,8 @@ EXCLUDE: typeof P5.EXCLUDE;
    * - `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;
@@ -7952,7 +7941,7 @@ EXCLUDE: typeof P5.EXCLUDE;
   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
@@ -8041,7 +8030,7 @@ EXCLUDE: typeof P5.EXCLUDE;
   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.
@@ -8064,22 +8053,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   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.
    * 
@@ -8111,6 +8084,22 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   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.
    */
@@ -8334,7 +8323,7 @@ EXCLUDE: typeof P5.EXCLUDE;
   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
@@ -8647,7 +8636,7 @@ EXCLUDE: typeof P5.EXCLUDE;
   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.
    * 
@@ -8995,7 +8984,7 @@ EXCLUDE: typeof P5.EXCLUDE;
   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.
@@ -9975,6 +9964,20 @@ EXCLUDE: typeof P5.EXCLUDE;
   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.
    * 
@@ -10014,20 +10017,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   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.
    * 
@@ -12426,9 +12415,9 @@ const BOTTOM: typeof P5.BOTTOM;
 
 /**
  * A system variable that provides direct access to the sketch's
- * `&lt;canvas&gt;` 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>
@@ -14358,6 +14347,26 @@ function str(n: string | boolean | number): string;
 function byte(n: string | boolean | number): number;
 function 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.
+ */
+function buildGeometry(callback: Function): P5.Geometry;
+
 /**
  * Calculates coordinates along a Bézier curve using interpolation.
  * 
@@ -14388,31 +14397,6 @@ function byte(ns: any[]): number[];
  */
 function 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.
- */
-function buildGeometry(callback: Function): P5.Geometry;
-
 /**
  * Loads a 3D model to create a
  * <a href="#/p5.Geometry">p5.Geometry</a> object.
@@ -14572,20 +14556,6 @@ function atan2(y: number, x: number): number;
  */
 function 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`.
- */
-function clearStorage(): void;
-
 /**
  * Converts a `Number` into a `String` with a plus or minus sign.
  * 
@@ -14621,6 +14591,20 @@ function clearStorage(): void;
 function nfp(num: number, left?: number, right?: number): string;
 function 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`.
+ */
+function clearStorage(): void;
+
 /**
  * Removes all elements created by p5.js, including any event handlers.
  * 
@@ -14863,6 +14847,29 @@ function lerp(start: number, stop: number, amt: number): number;
 function frameRate(fps: number): number;
 function 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.
+ */
+function freeGeometry(geometry: P5.Geometry): void;
+
 /**
  * Calculates the cosine of an angle.
  * 
@@ -14925,14 +14932,14 @@ function specularColor(values: number[]): void;
 function 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.
  */
 function createDiv(html?: string): P5.Element;
@@ -14990,27 +14997,6 @@ function loadStrings(path: string | Request, successCallback?: Function, errorCa
 function boolean(n: string | boolean | number): boolean;
 function 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.
- */
-function removeItem(key: string): void;
-
 /**
  * Rotates the coordinate system.
  * 
@@ -15046,31 +15032,25 @@ function removeItem(key: string): void;
 function 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.
  */
-function freeGeometry(geometry: P5.Geometry): void;
+function removeItem(key: string): void;
 
 /**
  * The <a href="#/p5/setMoveThreshold">setMoveThreshold()</a> function is used to set the movement threshold for
@@ -15160,11 +15140,11 @@ function log(n: number): number;
 /**
  * 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.
  */
 function createP(html?: string): P5.Element;
@@ -15598,6 +15578,38 @@ function mag(x: number, y: number): number;
  */
 function 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.
+ */
+function plane(width?: number, height?: number, detailX?: number, detailY?: number): void;
+
 /**
  * Gets the red value of a color.
  * 
@@ -15683,16 +15695,16 @@ function filter(shaderFilter: P5.Shader): void;
 function 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.
  */
 function createSpan(html?: string): P5.Element;
@@ -15745,38 +15757,6 @@ function createSpan(html?: string): P5.Element;
  */
 function 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.
- */
-function plane(width?: number, height?: number, detailX?: number, detailY?: number): void;
-
 /**
  * Creates and a new <a href="#/p5.Framebuffer">p5.Framebuffer</a> object.
  * 
@@ -15886,7 +15866,7 @@ function rotateX(angle: number): void;
 function 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
@@ -16144,6 +16124,42 @@ function keyPressed(event?: KeyboardEvent): void;
  */
 function 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.
+ */
+function box(width?: number, height?: number, depth?: number, detailX?: number, detailY?: number): void;
+
 /**
  * Returns the largest value in a sequence of numbers.
  * 
@@ -16194,7 +16210,7 @@ function bezierVertex(x: number, y: number, u?: number, v?: number): void;
 function 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.
@@ -16329,63 +16345,27 @@ function setup(): void;
  */
 function draw(): void;
 
-/**
- * Clears the pixels on the canvas.
- * 
- * `clear()` makes every pixel 100% transparent. Calling `clear()` doesn't
- * clear objects created by `createX()` functions such as
- * <a href="#/p5/createGraphics">createGraphics()</a>,
- * <a href="#/p5/createVideo">createVideo()</a>, and
- * <a href="#/p5/createImg">createImg()</a>. These objects will remain
- * unchanged after calling `clear()` and can be redrawn.
- * 
- * In WebGL mode, this function can clear the screen to a specific color. It
- * interprets four numeric parameters as normalized RGBA color values. It also
- * clears the depth buffer. If you are not using the WebGL renderer, these
- * parameters will have no effect.
- * @param r normalized red value.
- * @param g normalized green value.
- * @param b normalized blue value.
- * @param a normalized alpha value.
- */
-function clear(r?: number, g?: number, b?: number, a?: number): void;
-function 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.
+/**
+ * Clears the pixels on the canvas.
  * 
- * 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.
+ * `clear()` makes every pixel 100% transparent. Calling `clear()` doesn't
+ * clear objects created by `createX()` functions such as
+ * <a href="#/p5/createGraphics">createGraphics()</a>,
+ * <a href="#/p5/createVideo">createVideo()</a>, and
+ * <a href="#/p5/createImg">createImg()</a>. These objects will remain
+ * unchanged after calling `clear()` and can be redrawn.
+ * 
+ * In WebGL mode, this function can clear the screen to a specific color. It
+ * interprets four numeric parameters as normalized RGBA color values. It also
+ * clears the depth buffer. If you are not using the WebGL renderer, these
+ * parameters will have no effect.
+ * @param r normalized red value.
+ * @param g normalized green value.
+ * @param b normalized blue value.
+ * @param a normalized alpha value.
  */
-function box(width?: number, height?: number, depth?: number, detailX?: number, detailY?: number): void;
+function clear(r?: number, g?: number, b?: number, a?: number): void;
+function clear(): void;
 
 /**
  * Converts a `Number` or `String` to a single-character `String`.
@@ -16531,7 +16511,7 @@ function spline(x1: number, y1: number, z1: number, x2: number, y2: number, z2:
  * (<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
@@ -16700,6 +16680,33 @@ function unchar(ns: string[]): number[];
 function angleMode(mode: typeof P5.RADIANS | typeof P5.DEGREES): typeof P5.RADIANS | typeof P5.DEGREES;
 function 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.
+ */
+function 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.
@@ -16884,7 +16891,7 @@ function buildFilterShader(hooks: object, scope?: object): P5.Shader;
 function 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.
  * 
@@ -16921,33 +16928,6 @@ function createSlider(min: number, max: number, value?: number, step?: number):
  */
 function 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.
- */
-function sphere(radius?: number, detailX?: number, detailY?: number): void;
-
 /**
  * A function that's called once when any key is released.
  * 
@@ -17138,7 +17118,7 @@ function point(coordinateVector: P5.Vector): void;
 function 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.
@@ -17429,7 +17409,7 @@ function displayDensity(): number;
 function 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
@@ -17505,6 +17485,50 @@ function keyTyped(event?: KeyboardEvent): void;
  */
 function 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`.
+ */
+function cylinder(radius?: number, height?: number, detailX?: number, detailY?: number, bottomCap?: boolean, topCap?: boolean): void;
+
 /**
  * Scales the coordinate system.
  * 
@@ -17624,50 +17648,6 @@ function httpPost(path: string | Request, data?: object | boolean, datatype?: st
 function httpPost(path: string | Request, data: object | boolean, callback?: Function, errorCallback?: Function): Promise<any>;
 function 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`.
- */
-function 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>
@@ -18265,7 +18245,7 @@ function keyIsDown(code: number | string): boolean;
  * 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.
@@ -18278,9 +18258,7 @@ function setContent(content: string): void;
  * 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.
@@ -18388,11 +18366,11 @@ function shearY(angle: number): void;
 function 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.
@@ -18421,20 +18399,6 @@ function saturation(color: P5.Color | number[] | string): number;
 function createSelect(multiple?: boolean): P5.Element;
 function 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.
- */
-function worldToScreen(x: number | P5.Vector, y: number, z?: number): P5.Vector;
-
 /**
  * Draws a cone.
  * 
@@ -18473,6 +18437,20 @@ function worldToScreen(x: number | P5.Vector, y: number, z?: number): P5.Vector;
  */
 function 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.
+ */
+function worldToScreen(x: number | P5.Vector, y: number, z?: number): P5.Vector;
+
 /**
  * Load a 3d model from an OBJ or STL string.
  * 
@@ -19387,8 +19365,8 @@ function noStroke(): void;
  * 
  * 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.
  * 
@@ -19404,8 +19382,8 @@ function noStroke(): void;
  * - `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.
  */
 function createRadio(containerElement?: object): P5.Element;
@@ -19413,7 +19391,7 @@ function createRadio(name?: string): P5.Element;
 function 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
@@ -19502,7 +19480,7 @@ function loadFont(path: string, successCallback?: (font: P5.Font) => any, failur
 function 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.
@@ -19525,22 +19503,6 @@ function lerpColor(c1: P5.Color, c2: P5.Color, amt: number): P5.Color;
  */
 function 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.
- */
-function paletteLerp(colors_stops: [P5.Color | string | number | number[], number][], amt: number): P5.Color;
-
 /**
  * Draws a torus.
  * 
@@ -19572,6 +19534,22 @@ function paletteLerp(colors_stops: [P5.Color | string | number | number[], numbe
  */
 function 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.
+ */
+function paletteLerp(colors_stops: [P5.Color | string | number | number[], number][], amt: number): P5.Color;
+
 /**
  * Saves the file and closes the print stream.
  */
@@ -19795,7 +19773,7 @@ function buildMaterialShader(callback: Function, scope?: object): P5.Shader;
 function 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
@@ -20108,7 +20086,7 @@ function erase(strengthFill?: number, strengthStroke?: number): void;
 function 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.
  * 
@@ -20456,7 +20434,7 @@ function saveJSON(json: any[] | object, filename: string, optimize?: boolean): v
 function 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.
@@ -21436,6 +21414,20 @@ function vertex(x: number, y: number): void;
 function vertex(x: number, y: number, u?: number, v?: number): void;
 function 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
+ */
+function curveDetail(resolution: number): void;
+
 /**
  * Sets the frustum of the current camera in a 3D sketch.
  * 
@@ -21475,20 +21467,6 @@ function vertex(x: number, y: number, z: number, u?: number, v?: number): void;
  */
 function 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
- */
-function curveDetail(resolution: number): void;
-
 /**
  * Creates a new <a href="#/p5.Camera">p5.Camera</a> object.
  *