p5 2.2.3-rc.0 → 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;
@@ -3947,7 +3938,7 @@ EXCLUDE: typeof P5.EXCLUDE;
    * // Make a version of the shader with a hook overridden
    * modifiedShader = myShader.modify(() => {
    * // Create new uniforms and override the getColor hook
-   * let t = uniformFloat(() => millis() / 1000);
+   * let t = millis() / 1000;
    * getColor(() => {
    * return [0, 0.5 + 0.5 * sin(t), 1, 1];
    * });
@@ -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.
@@ -5248,17 +5266,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   loadPixels(): void;
 
-  /**
-   * This method is suitable for fetching files up to size of 64MB.
-   * @param file name of the file or URL to load
-   * @param callback function to be executed after <a href="#/p5/loadBytes">loadBytes()</a>
-   * completes
-   * @param errorCallback function to be executed if there
-   * is an error
-   * @returns a Uint8Array containing the loaded buffer
-   */
-  loadBytes(file: string | Request, callback?: Function, errorCallback?: Function): Promise<Uint8Array>;
-
   /**
    * Creates a <a href="#/p5.Shader">p5.Shader</a> object to be used with the
    * <a href="#/p5/filter">filter()</a> function.
@@ -5355,7 +5362,7 @@ EXCLUDE: typeof P5.EXCLUDE;
    * filterColor.texCoord.x // x coordinate, from 0 to 1
    * ));
    * filterColor.end();
-   * }`You can also animate your filters over time by passing the time into the shader with `uniformFloat`.
+   * }`You can also animate your filters over time using the `millis()` function.
    * 
    * `let myFilter;
    * function setup() {
@@ -5365,7 +5372,7 @@ EXCLUDE: typeof P5.EXCLUDE;
    * }
    * 
    * function gradient() {
-   * let time = uniformFloat();
+   * let time = millis();
    * filterColor.begin();
    * filterColor.set(mix(
    * [1, 0, 0, 1], // Red
@@ -5376,9 +5383,8 @@ EXCLUDE: typeof P5.EXCLUDE;
    * }
    * 
    * function draw() {
-   * myFilter.setUniform('time', millis());
    * filter(myFilter);
-   * }`We can use the `noise()` function built into strands to generate a color for each pixel.  (Again no need here for underlying content for the filter to operate on.)  Again we'll animate by passing in an announced uniform variable  `time` with `setUniform()`, each frame.
+   * }`We can use the `noise()` function built into strands to generate a color for each pixel.  (Again no need here for underlying content for the filter to operate on.)  Again we'll animate by using the millis() function to get an up-to-date time value.
    * 
    * `let myFilter;
    * 
@@ -5389,7 +5395,7 @@ EXCLUDE: typeof P5.EXCLUDE;
    * }
    * 
    * function noiseShaderCallback() {
-   * let time = uniformFloat();
+   * let time = millis();
    * filterColor.begin();
    * let coord = filterColor.texCoord;
    * 
@@ -5406,7 +5412,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    * }
    * 
    * function draw() {
-   * myFilter.setUniform("time", millis());
    * filter(myFilter);
    * }`Like the `modify()` method on shaders,
    * advanced users can also fill in `filterColor` using <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>
@@ -5425,7 +5430,18 @@ EXCLUDE: typeof P5.EXCLUDE;
   buildFilterShader(hooks: object, scope?: object): P5.Shader;
 
   /**
-   * Creates a slider `&lt;input&gt;&lt;/input&gt;` element.
+   * This method is suitable for fetching files up to size of 64MB.
+   * @param file name of the file or URL to load
+   * @param callback function to be executed after <a href="#/p5/loadBytes">loadBytes()</a>
+   * completes
+   * @param errorCallback function to be executed if there
+   * is an error
+   * @returns a Uint8Array containing the loaded buffer
+   */
+  loadBytes(file: string | Request, callback?: Function, errorCallback?: Function): Promise<Uint8Array>;
+
+  /**
+   * Creates a slider `<input></input>` element.
    * 
    * Range sliders are useful for quickly selecting numbers from a given range.
    * 
@@ -5462,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.
    * 
@@ -5679,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.
@@ -5970,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
@@ -6046,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.
    * 
@@ -6165,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>
@@ -6543,143 +6532,45 @@ EXCLUDE: typeof P5.EXCLUDE;
   lightFalloff(constant: number, linear: number, quadratic: number): void;
 
   /**
-   * A function that's called when the mouse moves.
+   * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply while drawing.
    * 
-   * Declaring the function `mouseMoved()` sets a code block to run
-   * automatically when the user moves the mouse without clicking any mouse
-   * buttons:
+   * Shaders are programs that run on the graphics processing unit (GPU). They
+   * can process many pixels or vertices at the same time, making them fast for
+   * many graphics tasks.
    * 
-   * `function mouseMoved() {
-   * // Code to run.
-   * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
-   * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
-   * value when `mouseMoved()` is called by p5.js:
+   * You can make new shaders using p5.strands with the
+   * <a href="#/p5/buildMaterialShader">`buildMaterialShader`</a>,
+   * <a href="#/p5/buildColorShader">`buildColorShader`</a>, and
+   * <a href="#/p5/buildNormalShader">`buildNormalShader`</a> functions. You can also use
+   * <a href="#/p5/buildFilterShader">`buildFilterShader`</a> alongside
+   * <a href="#/p5/filter">`filter`</a>, and
+   * <a href="#/p5/buildStrokeShader">`buildStrokeShader`</a> alongside
+   * <a href="#/p5/stroke">`stroke`</a>.
    * 
-   * `function mouseMoved() {
-   * if (mouseX < 50) {
-   * // Code to run if the mouse is on the left.
-   * }
+   * The parameter, `s`, is the <a href="#/p5.Shader">p5.Shader</a> object to
+   * apply. For example, calling `shader(myShader)` applies `myShader` to
+   * process each pixel on the canvas. This only changes the fill (the inner part of shapes),
+   * but does not affect the outlines (strokes) or any images drawn using the `image()` function.
+   * The source code from a <a href="#/p5.Shader">p5.Shader</a> object's
+   * fragment and vertex shaders will be compiled the first time it's passed to
+   * `shader()`.
    * 
-   * if (mouseY > 50) {
-   * // Code to run if the mouse is near the bottom.
-   * }
-   * }`The parameter, `event`, is optional. `mouseMoved()` is always passed a
-   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank">MouseEvent</a>
-   * object with properties that describe the mouse move event:
-   * 
-   * `function mouseMoved(event) {
-   * // Code to run that uses the event.
-   * console.log(event);
-   * }`Browsers may have default behaviors attached to various mouse events. For
-   * example, some browsers highlight text when the user moves the mouse while
-   * pressing a mouse button. To prevent any default behavior for this event,
-   * add `return false;` to the end of the function.
-   * @param event optional `MouseEvent` argument.
-   */
-  mouseMoved(event?: MouseEvent): void;
-
-  /**
-   * A function that's called when the mouse moves while a button is pressed.
-   * 
-   * Declaring the function `mouseDragged()` sets a code block to run
-   * automatically when the user clicks and drags the mouse:
-   * 
-   * `function mouseDragged() {
-   * // Code to run.
-   * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
-   * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
-   * value when `mouseDragged()` is called by p5.js:
-   * 
-   * `function mouseDragged() {
-   * if (mouseX < 50) {
-   * // Code to run if the mouse is on the left.
-   * }
-   * 
-   * if (mouseY > 50) {
-   * // Code to run if the mouse is near the bottom.
-   * }
-   * }`The parameter, `event`, is optional. `mouseDragged()` is always passed a
-   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank">MouseEvent</a>
-   * object with properties that describe the mouse drag event:
-   * 
-   * `function mouseDragged(event) {
-   * // Code to run that uses the event.
-   * console.log(event);
-   * }`On touchscreen devices, `mouseDragged()` will run when a user moves a touch
-   * point.
-   * 
-   * Browsers may have default behaviors attached to various mouse events. For
-   * example, some browsers highlight text when the user moves the mouse while
-   * pressing a mouse button. To prevent any default behavior for this event,
-   * add `return false;` to the end of the function.
-   * @param event optional `MouseEvent` argument.
-   */
-  mouseDragged(event?: MouseEvent): void;
-
-  /**
-   * Returns `true` if the key it’s checking is pressed and `false` if not.
-   * 
-   * `keyIsDown()` is helpful when checking for multiple different key presses.
-   * For example, `keyIsDown()` can be used to check if both `LEFT_ARROW` and
-   * `UP_ARROW` are pressed:
-   * 
-   * `if (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) {
-   * // Move diagonally.
-   * }``keyIsDown()` can check for key presses using strings based on
-   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key" target="_blank">KeyboardEvent.key</a>
-   * or <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code" target="_blank">KeyboardEvent.code</a> values,
-   * such as `keyIsDown('x')` or `keyIsDown('ArrowLeft')`.
-   * 
-   * Note: In p5.js 2.0 and newer, numeric keycodes (such as 88 for 'X') are no longer supported.
-   * This is a breaking change from previous versions.
-   * 
-   * You can still use the p5 constants like `LEFT_ARROW` which now map to string values
-   * internally rather than numeric codes.
-   * @param code key to check.
-   * @returns whether the key is down or not.
-   */
-  keyIsDown(code: number | string): boolean;
-
-  /**
-   * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply while drawing.
-   * 
-   * Shaders are programs that run on the graphics processing unit (GPU). They
-   * can process many pixels or vertices at the same time, making them fast for
-   * many graphics tasks.
-   * 
-   * You can make new shaders using p5.strands with the
-   * <a href="#/p5/buildMaterialShader">`buildMaterialShader`</a>,
-   * <a href="#/p5/buildColorShader">`buildColorShader`</a>, and
-   * <a href="#/p5/buildNormalShader">`buildNormalShader`</a> functions. You can also use
-   * <a href="#/p5/buildFilterShader">`buildFilterShader`</a> alongside
-   * <a href="#/p5/filter">`filter`</a>, and
-   * <a href="#/p5/buildStrokeShader">`buildStrokeShader`</a> alongside
-   * <a href="#/p5/stroke">`stroke`</a>.
-   * 
-   * The parameter, `s`, is the <a href="#/p5.Shader">p5.Shader</a> object to
-   * apply. For example, calling `shader(myShader)` applies `myShader` to
-   * process each pixel on the canvas. This only changes the fill (the inner part of shapes),
-   * but does not affect the outlines (strokes) or any images drawn using the `image()` function.
-   * The source code from a <a href="#/p5.Shader">p5.Shader</a> object's
-   * fragment and vertex shaders will be compiled the first time it's passed to
-   * `shader()`.
-   * 
-   * Calling <a href="#/p5/resetShader">resetShader()</a> restores a sketch’s
-   * default shaders.
-   * 
-   * Note: Shaders can only be used in WebGL mode.
-   * 
-   * `let myShader;
-   * 
-   * function setup() {
-   * createCanvas(200, 200, WEBGL);
-   * myShader = buildMaterialShader(material);
-   * noStroke();
-   * describe('A square with dynamically changing colors on a beige background.');
+   * Calling <a href="#/p5/resetShader">resetShader()</a> restores a sketch’s
+   * default shaders.
+   * 
+   * Note: Shaders can only be used in WebGL mode.
+   * 
+   * `let myShader;
+   * 
+   * function setup() {
+   * createCanvas(200, 200, WEBGL);
+   * myShader = buildMaterialShader(material);
+   * noStroke();
+   * describe('A square with dynamically changing colors on a beige background.');
    * }
    * 
    * function material() {
-   * let time = uniformFloat();
+   * let time = millis() / 1000;
    * finalColor.begin();
    * let r = 0.2 + 0.5 * abs(sin(time + 0));
    * let g = 0.2 + 0.5 * abs(sin(time + 1));
@@ -6690,7 +6581,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    * 
    * function draw() {
    * background(245, 245, 220);
-   * myShader.setUniform('time', millis() / 1000);
    * shader(myShader);
    * 
    * rectMode(CENTER);
@@ -6803,11 +6693,109 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   shader(s: P5.Shader): void;
 
+  /**
+   * A function that's called when the mouse moves.
+   * 
+   * Declaring the function `mouseMoved()` sets a code block to run
+   * automatically when the user moves the mouse without clicking any mouse
+   * buttons:
+   * 
+   * `function mouseMoved() {
+   * // Code to run.
+   * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
+   * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
+   * value when `mouseMoved()` is called by p5.js:
+   * 
+   * `function mouseMoved() {
+   * if (mouseX < 50) {
+   * // Code to run if the mouse is on the left.
+   * }
+   * 
+   * if (mouseY > 50) {
+   * // Code to run if the mouse is near the bottom.
+   * }
+   * }`The parameter, `event`, is optional. `mouseMoved()` is always passed a
+   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank">MouseEvent</a>
+   * object with properties that describe the mouse move event:
+   * 
+   * `function mouseMoved(event) {
+   * // Code to run that uses the event.
+   * console.log(event);
+   * }`Browsers may have default behaviors attached to various mouse events. For
+   * example, some browsers highlight text when the user moves the mouse while
+   * pressing a mouse button. To prevent any default behavior for this event,
+   * add `return false;` to the end of the function.
+   * @param event optional `MouseEvent` argument.
+   */
+  mouseMoved(event?: MouseEvent): void;
+
+  /**
+   * A function that's called when the mouse moves while a button is pressed.
+   * 
+   * Declaring the function `mouseDragged()` sets a code block to run
+   * automatically when the user clicks and drags the mouse:
+   * 
+   * `function mouseDragged() {
+   * // Code to run.
+   * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
+   * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
+   * value when `mouseDragged()` is called by p5.js:
+   * 
+   * `function mouseDragged() {
+   * if (mouseX < 50) {
+   * // Code to run if the mouse is on the left.
+   * }
+   * 
+   * if (mouseY > 50) {
+   * // Code to run if the mouse is near the bottom.
+   * }
+   * }`The parameter, `event`, is optional. `mouseDragged()` is always passed a
+   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank">MouseEvent</a>
+   * object with properties that describe the mouse drag event:
+   * 
+   * `function mouseDragged(event) {
+   * // Code to run that uses the event.
+   * console.log(event);
+   * }`On touchscreen devices, `mouseDragged()` will run when a user moves a touch
+   * point.
+   * 
+   * Browsers may have default behaviors attached to various mouse events. For
+   * example, some browsers highlight text when the user moves the mouse while
+   * pressing a mouse button. To prevent any default behavior for this event,
+   * add `return false;` to the end of the function.
+   * @param event optional `MouseEvent` argument.
+   */
+  mouseDragged(event?: MouseEvent): void;
+
+  /**
+   * Returns `true` if the key it’s checking is pressed and `false` if not.
+   * 
+   * `keyIsDown()` is helpful when checking for multiple different key presses.
+   * For example, `keyIsDown()` can be used to check if both `LEFT_ARROW` and
+   * `UP_ARROW` are pressed:
+   * 
+   * `if (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) {
+   * // Move diagonally.
+   * }``keyIsDown()` can check for key presses using strings based on
+   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key" target="_blank">KeyboardEvent.key</a>
+   * or <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code" target="_blank">KeyboardEvent.code</a> values,
+   * such as `keyIsDown('x')` or `keyIsDown('ArrowLeft')`.
+   * 
+   * Note: In p5.js 2.0 and newer, numeric keycodes (such as 88 for 'X') are no longer supported.
+   * This is a breaking change from previous versions.
+   * 
+   * You can still use the p5 constants like `LEFT_ARROW` which now map to string values
+   * internally rather than numeric codes.
+   * @param code key to check.
+   * @returns whether the key is down or not.
+   */
+  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.
@@ -6820,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.
@@ -6930,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.
@@ -6963,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.
    * 
@@ -7015,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.
    * 
@@ -7816,6 +7802,25 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   lightness(color: P5.Color | number[] | string): number;
 
+  /**
+   * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply for images.
+   * 
+   * This method allows the user to apply a custom shader to images, enabling
+   * advanced visual effects such as pixel manipulation, color adjustments,
+   * or dynamic behavior. The shader will be applied to the image drawn using
+   * the <a href="#/p5/image">image()</a> function.
+   * 
+   * The shader will be used exclusively for:
+   * 
+   * - `image()` calls, applying only when drawing 2D images.
+   * 
+   * - This shader will NOT apply to images used in <a href="#/p5/texture">texture()</a> or other 3D contexts.
+   * Any attempts to use the imageShader in these cases will be ignored.
+   * @param s <a href="#/p5.Shader">p5.Shader</a> object
+   * to apply for images.
+   */
+  imageShader(s: P5.Shader): void;
+
   /**
    * Changes the location from which images are drawn when
    * <a href="#/p5/image">image()</a> is called.
@@ -7837,25 +7842,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   imageMode(mode: typeof P5.CORNER | typeof P5.CORNERS | typeof P5.CENTER): void;
 
-  /**
-   * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply for images.
-   * 
-   * This method allows the user to apply a custom shader to images, enabling
-   * advanced visual effects such as pixel manipulation, color adjustments,
-   * or dynamic behavior. The shader will be applied to the image drawn using
-   * the <a href="#/p5/image">image()</a> function.
-   * 
-   * The shader will be used exclusively for:
-   * 
-   * - `image()` calls, applying only when drawing 2D images.
-   * 
-   * - This shader will NOT apply to images used in <a href="#/p5/texture">texture()</a> or other 3D contexts.
-   * Any attempts to use the imageShader in these cases will be ignored.
-   * @param s <a href="#/p5.Shader">p5.Shader</a> object
-   * to apply for images.
-   */
-  imageShader(s: P5.Shader): void;
-
   /**
    * A function that's called once when a mouse button is released.
    * 
@@ -7929,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.
    * 
@@ -7946,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;
@@ -7955,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
@@ -8044,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.
@@ -8067,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.
    * 
@@ -8114,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.
    */
@@ -8202,7 +8188,7 @@ EXCLUDE: typeof P5.EXCLUDE;
    * }
    * 
    * function material() {
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -8212,7 +8198,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * lights();
    * noStroke();
    * fill('red');
@@ -8338,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
@@ -8430,42 +8415,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   createColorPicker(value?: string | P5.Color): P5.Element;
 
-  /**
-   * Saves a given element(image, text, json, csv, wav, or html) to the client's
-   * computer. The first parameter can be a pointer to element we want to save.
-   * The element can be one of <a href="#/p5.Element">p5.Element</a>,an Array of
-   * Strings, an Array of JSON, a JSON object, a <a href="#/p5.Table">p5.Table
-   * </a>, a <a href="#/p5.Image">p5.Image</a>, or a p5.SoundFile (requires
-   * p5.sound). The second parameter is a filename (including extension).The
-   * third parameter is for options specific to this type of object. This method
-   * will save a file that fits the given parameters.
-   * If it is called without specifying an element, by default it will save the
-   * whole canvas as an image file. You can optionally specify a filename as
-   * the first parameter in such a case.
-   * Note that it is not recommended to
-   * call this method within draw, as it will open a new save dialog on every
-   * render.
-   * @param objectOrFilename If filename is provided, will
-   * save canvas as an image with
-   * either png or jpg extension
-   * depending on the filename.
-   * If object is provided, will
-   * save depending on the object
-   * and filename (see examples
-   * above).
-   * @param filename If an object is provided as the first
-   * parameter, then the second parameter
-   * indicates the filename,
-   * and should include an appropriate
-   * file extension (see examples above).
-   * @param options Additional options depend on
-   * filetype. For example, when saving JSON,
-   * <code>true</code> indicates that the
-   * output will be optimized for filesize,
-   * rather than readability.
-   */
-  save(objectOrFilename?: object | string, filename?: string, options?: boolean | string): void;
-
   /**
    * Loads a new shader from a file that can change how fills are drawn. Pass the resulting
    * shader into the <a href="#/p5/shader">`shader()`</a> function to apply it
@@ -8483,7 +8432,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * lights();
    * noStroke();
    * fill('red');
@@ -8493,7 +8441,7 @@ EXCLUDE: typeof P5.EXCLUDE;
    * might use the `pixelInputs` hook to change each pixel on the surface of a shape.
    * 
    * `// myMaterial.js
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -8511,7 +8459,43 @@ EXCLUDE: typeof P5.EXCLUDE;
    * @param onFailure A callback function to run when loading fails.
    * @returns The material shader.
    */
-  loadMaterialShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
+  loadMaterialShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
+
+  /**
+   * Saves a given element(image, text, json, csv, wav, or html) to the client's
+   * computer. The first parameter can be a pointer to element we want to save.
+   * The element can be one of <a href="#/p5.Element">p5.Element</a>,an Array of
+   * Strings, an Array of JSON, a JSON object, a <a href="#/p5.Table">p5.Table
+   * </a>, a <a href="#/p5.Image">p5.Image</a>, or a p5.SoundFile (requires
+   * p5.sound). The second parameter is a filename (including extension).The
+   * third parameter is for options specific to this type of object. This method
+   * will save a file that fits the given parameters.
+   * If it is called without specifying an element, by default it will save the
+   * whole canvas as an image file. You can optionally specify a filename as
+   * the first parameter in such a case.
+   * Note that it is not recommended to
+   * call this method within draw, as it will open a new save dialog on every
+   * render.
+   * @param objectOrFilename If filename is provided, will
+   * save canvas as an image with
+   * either png or jpg extension
+   * depending on the filename.
+   * If object is provided, will
+   * save depending on the object
+   * and filename (see examples
+   * above).
+   * @param filename If an object is provided as the first
+   * parameter, then the second parameter
+   * indicates the filename,
+   * and should include an appropriate
+   * file extension (see examples above).
+   * @param options Additional options depend on
+   * filetype. For example, when saving JSON,
+   * <code>true</code> indicates that the
+   * output will be optimized for filesize,
+   * rather than readability.
+   */
+  save(objectOrFilename?: object | string, filename?: string, options?: boolean | string): void;
 
   /**
    * Influences the shape of the Bézier curve segment in a custom shape.
@@ -8595,6 +8579,19 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   baseMaterialShader(): P5.Shader;
 
+  /**
+   * Returns the base shader used for filters.
+   * 
+   * Calling <a href="#/p5/buildFilterShader">`buildFilterShader(shaderFunction)`</a>
+   * is equivalent to calling `baseFilterShader().modify(shaderFunction)`.
+   * 
+   * Read <a href="#/p5/buildFilterShader">the `buildFilterShader` reference</a> or
+   * call `baseFilterShader().inspectHooks()` for more information on what you can do with
+   * the base filter shader.
+   * @returns The base filter shader.
+   */
+  baseFilterShader(): P5.Shader;
+
   /**
    * Starts using shapes to erase parts of the canvas.
    * 
@@ -8629,19 +8626,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   erase(strengthFill?: number, strengthStroke?: number): void;
 
-  /**
-   * Returns the base shader used for filters.
-   * 
-   * Calling <a href="#/p5/buildFilterShader">`buildFilterShader(shaderFunction)`</a>
-   * is equivalent to calling `baseFilterShader().modify(shaderFunction)`.
-   * 
-   * Read <a href="#/p5/buildFilterShader">the `buildFilterShader` reference</a> or
-   * call `baseFilterShader().inspectHooks()` for more information on what you can do with
-   * the base filter shader.
-   * @returns The base filter shader.
-   */
-  baseFilterShader(): P5.Shader;
-
   /**
    * Ends erasing that was started with <a href="#/p5/erase">erase()</a>.
    * 
@@ -8652,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.
    * 
@@ -8702,7 +8686,7 @@ EXCLUDE: typeof P5.EXCLUDE;
    * }
    * 
    * function material() {
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    * 20. * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -8712,7 +8696,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * noStroke();
    * sphere(50);
    * }`You may also want to change the colors used. By default, the x, y, and z values of the orientation
@@ -9001,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.
@@ -9037,7 +9020,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * lights();
    * noStroke();
    * fill('red');
@@ -9047,7 +9029,7 @@ EXCLUDE: typeof P5.EXCLUDE;
    * might use the `finalColor` hook to change the color of each pixel on the surface of a shape.
    * 
    * `// myMaterial.js
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -9178,7 +9160,7 @@ EXCLUDE: typeof P5.EXCLUDE;
    * }
    * 
    * function material() {
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -9188,7 +9170,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * noStroke();
    * fill('red');
    * circle(0, 0, 50);
@@ -9302,7 +9283,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * lights();
    * noStroke();
    * fill('red');
@@ -9312,7 +9292,7 @@ EXCLUDE: typeof P5.EXCLUDE;
    * might use the `finalColor` hook to change the color of each pixel on the surface of a shape.
    * 
    * `// myMaterial.js
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -9597,7 +9577,7 @@ EXCLUDE: typeof P5.EXCLUDE;
    * }
    * 
    * function material() {
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * // Add a somewhat random offset to the weight
    * // that varies based on position and time
@@ -9613,7 +9593,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    * function draw() {
    * background(255);
    * strokeShader(myShader);
-   * myShader.setUniform('time', millis());
    * strokeWeight(10);
    * beginShape();
    * for (let i = 0; i <= 50; i++) {
@@ -9704,6 +9683,58 @@ EXCLUDE: typeof P5.EXCLUDE;
   splineProperty(property: string, value: any): void;
   splineProperty(property: string): void;
 
+  /**
+   * Loads a new shader from a file that can change how strokes are drawn. Pass the resulting
+   * shader into the <a href="#/p5/strokeShader">`strokeShader()`</a> function to apply it
+   * to any strokes you draw.
+   * 
+   * Since this function loads data from another file, it returns a `Promise`.
+   * Use it in an `async function setup`, and `await` its result.
+   * 
+   * `let myShader;
+   * async function setup() {
+   * createCanvas(200, 200, WEBGL);
+   * myShader = await loadStrokeShader('myMaterial.js');
+   * }
+   * 
+   * function draw() {
+   * background(255);
+   * strokeShader(myShader);
+   * strokeWeight(30);
+   * line(
+   * -width/3,
+   * sin(millis()*0.001) * height/4,
+   * width/3,
+   * sin(millis()*0.001 + 1) * height/4
+   * );
+   * }`Inside your shader file, you can call p5.strands hooks to change parts of the shader. For
+   * example, you might use the `worldInputs` hook to change each vertex, or you
+   * might use the `pixelInputs` hook to change each pixel on the surface of a stroke.
+   * 
+   * `// myMaterial.js
+   * pixelInputs.begin();
+   * let opacity = 1 - smoothstep(
+   * 0,
+   * 15,
+   * length(pixelInputs.position - pixelInputs.center)
+   * );
+   * pixelInputs.color.a *= opacity;
+   * pixelInputs.end();`Read the reference for <a href="#/p5/buildStrokeShader">`buildStrokeShader`</a>,
+   * the version of `loadStrokeShader` that takes in a function instead of a separate file,
+   * for a full list of hooks you can use and examples for each.
+   * 
+   * The second parameter, `successCallback`, is optional. If a function is passed, as in
+   * `loadStrokeShader('myShader.js', onLoaded)`, then the `onLoaded()` function will be called
+   * once the shader loads. The shader will be passed to `onLoaded()` as its only argument.
+   * The return value of `handleData()`, if present, will be used as the final return value of
+   * `loadStrokeShader('myShader.js', onLoaded)`.
+   * @param url The URL of your p5.strands JavaScript file.
+   * @param onSuccess A callback function to run when loading completes.
+   * @param onFailure A callback function to run when loading fails.
+   * @returns The stroke shader.
+   */
+  loadStrokeShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
+
   /**
    * Sets a perspective projection for the current camera in a 3D sketch.
    * 
@@ -9758,58 +9789,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   perspective(fovy?: number, aspect?: number, near?: number, far?: number): void;
 
-  /**
-   * Loads a new shader from a file that can change how strokes are drawn. Pass the resulting
-   * shader into the <a href="#/p5/strokeShader">`strokeShader()`</a> function to apply it
-   * to any strokes you draw.
-   * 
-   * Since this function loads data from another file, it returns a `Promise`.
-   * Use it in an `async function setup`, and `await` its result.
-   * 
-   * `let myShader;
-   * async function setup() {
-   * createCanvas(200, 200, WEBGL);
-   * myShader = await loadStrokeShader('myMaterial.js');
-   * }
-   * 
-   * function draw() {
-   * background(255);
-   * strokeShader(myShader);
-   * strokeWeight(30);
-   * line(
-   * -width/3,
-   * sin(millis()*0.001) * height/4,
-   * width/3,
-   * sin(millis()*0.001 + 1) * height/4
-   * );
-   * }`Inside your shader file, you can call p5.strands hooks to change parts of the shader. For
-   * example, you might use the `worldInputs` hook to change each vertex, or you
-   * might use the `pixelInputs` hook to change each pixel on the surface of a stroke.
-   * 
-   * `// myMaterial.js
-   * pixelInputs.begin();
-   * let opacity = 1 - smoothstep(
-   * 0,
-   * 15,
-   * length(pixelInputs.position - pixelInputs.center)
-   * );
-   * pixelInputs.color.a *= opacity;
-   * pixelInputs.end();`Read the reference for <a href="#/p5/buildStrokeShader">`buildStrokeShader`</a>,
-   * the version of `loadStrokeShader` that takes in a function instead of a separate file,
-   * for a full list of hooks you can use and examples for each.
-   * 
-   * The second parameter, `successCallback`, is optional. If a function is passed, as in
-   * `loadStrokeShader('myShader.js', onLoaded)`, then the `onLoaded()` function will be called
-   * once the shader loads. The shader will be passed to `onLoaded()` as its only argument.
-   * The return value of `handleData()`, if present, will be used as the final return value of
-   * `loadStrokeShader('myShader.js', onLoaded)`.
-   * @param url The URL of your p5.strands JavaScript file.
-   * @param onSuccess A callback function to run when loading completes.
-   * @param onFailure A callback function to run when loading fails.
-   * @returns The stroke shader.
-   */
-  loadStrokeShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
-
   /**
    * Returns the default shader used for strokes.
    * 
@@ -9854,6 +9833,17 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   splineProperties(values: object): object;
 
+  /**
+   * Restores the default shaders.
+   * 
+   * `resetShader()` deactivates any shaders previously applied by
+   * <a href="#/p5/shader">shader()</a>, <a href="#/p5/strokeShader">strokeShader()</a>,
+   * or <a href="#/p5/imageShader">imageShader()</a>.
+   * 
+   * Note: Shaders can only be used in WebGL mode.
+   */
+  resetShader(): void;
+
   /**
    * Enables or disables perspective for lines in 3D sketches.
    * 
@@ -9891,17 +9881,6 @@ EXCLUDE: typeof P5.EXCLUDE;
   linePerspective(enable: boolean): boolean;
   linePerspective(): boolean;
 
-  /**
-   * Restores the default shaders.
-   * 
-   * `resetShader()` deactivates any shaders previously applied by
-   * <a href="#/p5/shader">shader()</a>, <a href="#/p5/strokeShader">strokeShader()</a>,
-   * or <a href="#/p5/imageShader">imageShader()</a>.
-   * 
-   * Note: Shaders can only be used in WebGL mode.
-   */
-  resetShader(): void;
-
   /**
    * Sets an orthographic projection for the current camera in a 3D sketch.
    * 
@@ -9985,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.
    * 
@@ -10024,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.
    * 
@@ -12436,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>
@@ -14368,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.
  * 
@@ -14398,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,29 +14546,15 @@ function atan2(y: number, x: number): number;
 /**
  * Draws certain features with smooth (antialiased) edges.
  * 
- * `smooth()` is active by default. In 2D mode,
- * <a href="#/p5/noSmooth">noSmooth()</a> is helpful for scaling up images
- * without blurring. The functions don't affect shapes or fonts.
- * 
- * In WebGL mode, <a href="#/p5/noSmooth">noSmooth()</a> causes all shapes to
- * be drawn with jagged (aliased) edges. The functions don't affect images or
- * fonts.
- */
-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`.
+ * `smooth()` is active by default. In 2D mode,
+ * <a href="#/p5/noSmooth">noSmooth()</a> is helpful for scaling up images
+ * without blurring. The functions don't affect shapes or fonts.
+ * 
+ * In WebGL mode, <a href="#/p5/noSmooth">noSmooth()</a> causes all shapes to
+ * be drawn with jagged (aliased) edges. The functions don't affect images or
+ * fonts.
  */
-function clearStorage(): void;
+function smooth(): void;
 
 /**
  * Converts a `Number` into a `String` with a plus or minus sign.
@@ -14631,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.
  * 
@@ -14873,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.
  * 
@@ -14935,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;
@@ -15000,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.
  * 
@@ -15056,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
@@ -15170,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;
@@ -15418,7 +15388,7 @@ function createP(html?: string): P5.Element;
  * // Make a version of the shader with a hook overridden
  * modifiedShader = myShader.modify(() => {
  * // Create new uniforms and override the getColor hook
- * let t = uniformFloat(() => millis() / 1000);
+ * let t = millis() / 1000;
  * getColor(() => {
  * return [0, 0.5 + 0.5 * sin(t), 1, 1];
  * });
@@ -15608,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.
  * 
@@ -15693,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;
@@ -15755,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.
  * 
@@ -15896,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
@@ -16154,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.
  * 
@@ -16204,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.
@@ -16361,42 +16367,6 @@ function draw(): void;
 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.
- * 
- * 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;
-
 /**
  * Converts a `Number` or `String` to a single-character `String`.
  * 
@@ -16541,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
@@ -16702,13 +16672,40 @@ function unchar(ns: string[]): number[];
  * Calling `angleMode(DEGREES)` switches to degrees. Calling
  * `angleMode(RADIANS)` switches back to radians.
  * 
- * Calling `angleMode()` with no arguments returns current angle mode, which
- * is either `RADIANS` or `DEGREES`.
- * @param mode either RADIANS or DEGREES.
- * @returns mode either RADIANS or DEGREES
+ * Calling `angleMode()` with no arguments returns current angle mode, which
+ * is either `RADIANS` or `DEGREES`.
+ * @param mode either RADIANS or DEGREES.
+ * @returns mode either RADIANS or DEGREES
+ */
+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 angleMode(mode: typeof P5.RADIANS | typeof P5.DEGREES): typeof P5.RADIANS | typeof P5.DEGREES;
-function angleMode(): typeof P5.RADIANS | typeof P5.DEGREES;
+function sphere(radius?: number, detailX?: number, detailY?: number): void;
 
 /**
  * Loads the current value of each pixel on the canvas into the
@@ -16719,17 +16716,6 @@ function angleMode(): typeof P5.RADIANS | typeof P5.DEGREES;
  */
 function loadPixels(): void;
 
-/**
- * This method is suitable for fetching files up to size of 64MB.
- * @param file name of the file or URL to load
- * @param callback function to be executed after <a href="#/p5/loadBytes">loadBytes()</a>
- * completes
- * @param errorCallback function to be executed if there
- * is an error
- * @returns a Uint8Array containing the loaded buffer
- */
-function loadBytes(file: string | Request, callback?: Function, errorCallback?: Function): Promise<Uint8Array>;
-
 /**
  * Creates a <a href="#/p5.Shader">p5.Shader</a> object to be used with the
  * <a href="#/p5/filter">filter()</a> function.
@@ -16826,7 +16812,7 @@ function loadBytes(file: string | Request, callback?: Function, errorCallback?:
  * filterColor.texCoord.x // x coordinate, from 0 to 1
  * ));
  * filterColor.end();
- * }`You can also animate your filters over time by passing the time into the shader with `uniformFloat`.
+ * }`You can also animate your filters over time using the `millis()` function.
  * 
  * `let myFilter;
  * function setup() {
@@ -16836,7 +16822,7 @@ function loadBytes(file: string | Request, callback?: Function, errorCallback?:
  * }
  * 
  * function gradient() {
- * let time = uniformFloat();
+ * let time = millis();
  * filterColor.begin();
  * filterColor.set(mix(
  * [1, 0, 0, 1], // Red
@@ -16847,9 +16833,8 @@ function loadBytes(file: string | Request, callback?: Function, errorCallback?:
  * }
  * 
  * function draw() {
- * myFilter.setUniform('time', millis());
  * filter(myFilter);
- * }`We can use the `noise()` function built into strands to generate a color for each pixel.  (Again no need here for underlying content for the filter to operate on.)  Again we'll animate by passing in an announced uniform variable  `time` with `setUniform()`, each frame.
+ * }`We can use the `noise()` function built into strands to generate a color for each pixel.  (Again no need here for underlying content for the filter to operate on.)  Again we'll animate by using the millis() function to get an up-to-date time value.
  * 
  * `let myFilter;
  * 
@@ -16860,7 +16845,7 @@ function loadBytes(file: string | Request, callback?: Function, errorCallback?:
  * }
  * 
  * function noiseShaderCallback() {
- * let time = uniformFloat();
+ * let time = millis();
  * filterColor.begin();
  * let coord = filterColor.texCoord;
  * 
@@ -16877,7 +16862,6 @@ function loadBytes(file: string | Request, callback?: Function, errorCallback?:
  * }
  * 
  * function draw() {
- * myFilter.setUniform("time", millis());
  * filter(myFilter);
  * }`Like the `modify()` method on shaders,
  * advanced users can also fill in `filterColor` using <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>
@@ -16896,7 +16880,18 @@ function buildFilterShader(callback: Function, scope?: object): P5.Shader;
 function buildFilterShader(hooks: object, scope?: object): P5.Shader;
 
 /**
- * Creates a slider `&lt;input&gt;&lt;/input&gt;` element.
+ * This method is suitable for fetching files up to size of 64MB.
+ * @param file name of the file or URL to load
+ * @param callback function to be executed after <a href="#/p5/loadBytes">loadBytes()</a>
+ * completes
+ * @param errorCallback function to be executed if there
+ * is an error
+ * @returns a Uint8Array containing the loaded buffer
+ */
+function loadBytes(file: string | Request, callback?: Function, errorCallback?: Function): Promise<Uint8Array>;
+
+/**
+ * Creates a slider `<input></input>` element.
  * 
  * Range sliders are useful for quickly selecting numbers from a given range.
  * 
@@ -16933,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.
  * 
@@ -17150,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.
@@ -17441,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
@@ -17517,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.
  * 
@@ -17636,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>
@@ -17969,147 +17937,49 @@ function getURLParams(): object;
 /**
  * Shears the x-axis so that shapes appear skewed.
  * 
- * By default, the x- and y-axes are perpendicular. The `shearX()` function
- * transforms the coordinate system so that x-coordinates are translated while
- * y-coordinates are fixed.
- * 
- * The first parameter, `angle`, is the amount to shear. For example, calling
- * `shearX(1)` transforms all x-coordinates using the formula
- * `x = x + y * tan(angle)`. `shearX()` interprets angle values using the
- * current <a href="#/p5/angleMode">angleMode()</a>.
- * 
- * By default, transformations accumulate. For example, calling
- * `shearX(1)` twice has the same effect as calling `shearX(2)` once. The
- * <a href="#/p5/push">push()</a> and
- * <a href="#/p5/pop">pop()</a> functions can be used to isolate
- * transformations within distinct drawing groups.
- * 
- * Note: Transformations are reset at the beginning of the draw loop. Calling
- * `shearX(1)` inside the <a href="#/p5/draw">draw()</a> function won't
- * cause shapes to shear continuously.
- * @param angle angle to shear by in the current <a href="#/p5/angleMode">angleMode()</a>.
- */
-function shearX(angle: number): void;
-
-/**
- * Sets the falloff rate for <a href="#/p5/pointLight">pointLight()</a>
- * and <a href="#/p5/spotLight">spotLight()</a>.
- * 
- * A light’s falloff describes the intensity of its beam at a distance. For
- * example, a lantern has a slow falloff, a flashlight has a medium falloff,
- * and a laser pointer has a sharp falloff.
- * 
- * `lightFalloff()` has three parameters, `constant`, `linear`, and
- * `quadratic`. They’re numbers used to calculate falloff at a distance, `d`,
- * as follows:
- * 
- * `falloff = 1 / (constant + d * linear + (d * d) * quadratic)`
- * 
- * Note: `constant`, `linear`, and `quadratic` should always be set to values
- * greater than 0.
- * @param constant constant value for calculating falloff.
- * @param linear linear value for calculating falloff.
- * @param quadratic quadratic value for calculating falloff.
- */
-function lightFalloff(constant: number, linear: number, quadratic: number): void;
-
-/**
- * A function that's called when the mouse moves.
- * 
- * Declaring the function `mouseMoved()` sets a code block to run
- * automatically when the user moves the mouse without clicking any mouse
- * buttons:
- * 
- * `function mouseMoved() {
- * // Code to run.
- * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
- * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
- * value when `mouseMoved()` is called by p5.js:
- * 
- * `function mouseMoved() {
- * if (mouseX < 50) {
- * // Code to run if the mouse is on the left.
- * }
- * 
- * if (mouseY > 50) {
- * // Code to run if the mouse is near the bottom.
- * }
- * }`The parameter, `event`, is optional. `mouseMoved()` is always passed a
- * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank">MouseEvent</a>
- * object with properties that describe the mouse move event:
- * 
- * `function mouseMoved(event) {
- * // Code to run that uses the event.
- * console.log(event);
- * }`Browsers may have default behaviors attached to various mouse events. For
- * example, some browsers highlight text when the user moves the mouse while
- * pressing a mouse button. To prevent any default behavior for this event,
- * add `return false;` to the end of the function.
- * @param event optional `MouseEvent` argument.
- */
-function mouseMoved(event?: MouseEvent): void;
-
-/**
- * A function that's called when the mouse moves while a button is pressed.
- * 
- * Declaring the function `mouseDragged()` sets a code block to run
- * automatically when the user clicks and drags the mouse:
- * 
- * `function mouseDragged() {
- * // Code to run.
- * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
- * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
- * value when `mouseDragged()` is called by p5.js:
- * 
- * `function mouseDragged() {
- * if (mouseX < 50) {
- * // Code to run if the mouse is on the left.
- * }
- * 
- * if (mouseY > 50) {
- * // Code to run if the mouse is near the bottom.
- * }
- * }`The parameter, `event`, is optional. `mouseDragged()` is always passed a
- * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank">MouseEvent</a>
- * object with properties that describe the mouse drag event:
+ * By default, the x- and y-axes are perpendicular. The `shearX()` function
+ * transforms the coordinate system so that x-coordinates are translated while
+ * y-coordinates are fixed.
  * 
- * `function mouseDragged(event) {
- * // Code to run that uses the event.
- * console.log(event);
- * }`On touchscreen devices, `mouseDragged()` will run when a user moves a touch
- * point.
+ * The first parameter, `angle`, is the amount to shear. For example, calling
+ * `shearX(1)` transforms all x-coordinates using the formula
+ * `x = x + y * tan(angle)`. `shearX()` interprets angle values using the
+ * current <a href="#/p5/angleMode">angleMode()</a>.
  * 
- * Browsers may have default behaviors attached to various mouse events. For
- * example, some browsers highlight text when the user moves the mouse while
- * pressing a mouse button. To prevent any default behavior for this event,
- * add `return false;` to the end of the function.
- * @param event optional `MouseEvent` argument.
+ * By default, transformations accumulate. For example, calling
+ * `shearX(1)` twice has the same effect as calling `shearX(2)` once. The
+ * <a href="#/p5/push">push()</a> and
+ * <a href="#/p5/pop">pop()</a> functions can be used to isolate
+ * transformations within distinct drawing groups.
+ * 
+ * Note: Transformations are reset at the beginning of the draw loop. Calling
+ * `shearX(1)` inside the <a href="#/p5/draw">draw()</a> function won't
+ * cause shapes to shear continuously.
+ * @param angle angle to shear by in the current <a href="#/p5/angleMode">angleMode()</a>.
  */
-function mouseDragged(event?: MouseEvent): void;
+function shearX(angle: number): void;
 
 /**
- * Returns `true` if the key it’s checking is pressed and `false` if not.
+ * Sets the falloff rate for <a href="#/p5/pointLight">pointLight()</a>
+ * and <a href="#/p5/spotLight">spotLight()</a>.
  * 
- * `keyIsDown()` is helpful when checking for multiple different key presses.
- * For example, `keyIsDown()` can be used to check if both `LEFT_ARROW` and
- * `UP_ARROW` are pressed:
+ * A light’s falloff describes the intensity of its beam at a distance. For
+ * example, a lantern has a slow falloff, a flashlight has a medium falloff,
+ * and a laser pointer has a sharp falloff.
  * 
- * `if (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) {
- * // Move diagonally.
- * }``keyIsDown()` can check for key presses using strings based on
- * <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key" target="_blank">KeyboardEvent.key</a>
- * or <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code" target="_blank">KeyboardEvent.code</a> values,
- * such as `keyIsDown('x')` or `keyIsDown('ArrowLeft')`.
+ * `lightFalloff()` has three parameters, `constant`, `linear`, and
+ * `quadratic`. They’re numbers used to calculate falloff at a distance, `d`,
+ * as follows:
  * 
- * Note: In p5.js 2.0 and newer, numeric keycodes (such as 88 for 'X') are no longer supported.
- * This is a breaking change from previous versions.
+ * `falloff = 1 / (constant + d * linear + (d * d) * quadratic)`
  * 
- * You can still use the p5 constants like `LEFT_ARROW` which now map to string values
- * internally rather than numeric codes.
- * @param code key to check.
- * @returns whether the key is down or not.
+ * Note: `constant`, `linear`, and `quadratic` should always be set to values
+ * greater than 0.
+ * @param constant constant value for calculating falloff.
+ * @param linear linear value for calculating falloff.
+ * @param quadratic quadratic value for calculating falloff.
  */
-function keyIsDown(code: number | string): boolean;
+function lightFalloff(constant: number, linear: number, quadratic: number): void;
 
 /**
  * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply while drawing.
@@ -18150,7 +18020,7 @@ function keyIsDown(code: number | string): boolean;
  * }
  * 
  * function material() {
- * let time = uniformFloat();
+ * let time = millis() / 1000;
  * finalColor.begin();
  * let r = 0.2 + 0.5 * abs(sin(time + 0));
  * let g = 0.2 + 0.5 * abs(sin(time + 1));
@@ -18161,7 +18031,6 @@ function keyIsDown(code: number | string): boolean;
  * 
  * function draw() {
  * background(245, 245, 220);
- * myShader.setUniform('time', millis() / 1000);
  * shader(myShader);
  * 
  * rectMode(CENTER);
@@ -18274,11 +18143,109 @@ function keyIsDown(code: number | string): boolean;
  */
 function shader(s: P5.Shader): void;
 
+/**
+ * A function that's called when the mouse moves.
+ * 
+ * Declaring the function `mouseMoved()` sets a code block to run
+ * automatically when the user moves the mouse without clicking any mouse
+ * buttons:
+ * 
+ * `function mouseMoved() {
+ * // Code to run.
+ * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
+ * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
+ * value when `mouseMoved()` is called by p5.js:
+ * 
+ * `function mouseMoved() {
+ * if (mouseX < 50) {
+ * // Code to run if the mouse is on the left.
+ * }
+ * 
+ * if (mouseY > 50) {
+ * // Code to run if the mouse is near the bottom.
+ * }
+ * }`The parameter, `event`, is optional. `mouseMoved()` is always passed a
+ * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank">MouseEvent</a>
+ * object with properties that describe the mouse move event:
+ * 
+ * `function mouseMoved(event) {
+ * // Code to run that uses the event.
+ * console.log(event);
+ * }`Browsers may have default behaviors attached to various mouse events. For
+ * example, some browsers highlight text when the user moves the mouse while
+ * pressing a mouse button. To prevent any default behavior for this event,
+ * add `return false;` to the end of the function.
+ * @param event optional `MouseEvent` argument.
+ */
+function mouseMoved(event?: MouseEvent): void;
+
+/**
+ * A function that's called when the mouse moves while a button is pressed.
+ * 
+ * Declaring the function `mouseDragged()` sets a code block to run
+ * automatically when the user clicks and drags the mouse:
+ * 
+ * `function mouseDragged() {
+ * // Code to run.
+ * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
+ * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
+ * value when `mouseDragged()` is called by p5.js:
+ * 
+ * `function mouseDragged() {
+ * if (mouseX < 50) {
+ * // Code to run if the mouse is on the left.
+ * }
+ * 
+ * if (mouseY > 50) {
+ * // Code to run if the mouse is near the bottom.
+ * }
+ * }`The parameter, `event`, is optional. `mouseDragged()` is always passed a
+ * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank">MouseEvent</a>
+ * object with properties that describe the mouse drag event:
+ * 
+ * `function mouseDragged(event) {
+ * // Code to run that uses the event.
+ * console.log(event);
+ * }`On touchscreen devices, `mouseDragged()` will run when a user moves a touch
+ * point.
+ * 
+ * Browsers may have default behaviors attached to various mouse events. For
+ * example, some browsers highlight text when the user moves the mouse while
+ * pressing a mouse button. To prevent any default behavior for this event,
+ * add `return false;` to the end of the function.
+ * @param event optional `MouseEvent` argument.
+ */
+function mouseDragged(event?: MouseEvent): void;
+
+/**
+ * Returns `true` if the key it’s checking is pressed and `false` if not.
+ * 
+ * `keyIsDown()` is helpful when checking for multiple different key presses.
+ * For example, `keyIsDown()` can be used to check if both `LEFT_ARROW` and
+ * `UP_ARROW` are pressed:
+ * 
+ * `if (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) {
+ * // Move diagonally.
+ * }``keyIsDown()` can check for key presses using strings based on
+ * <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key" target="_blank">KeyboardEvent.key</a>
+ * or <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code" target="_blank">KeyboardEvent.code</a> values,
+ * such as `keyIsDown('x')` or `keyIsDown('ArrowLeft')`.
+ * 
+ * Note: In p5.js 2.0 and newer, numeric keycodes (such as 88 for 'X') are no longer supported.
+ * This is a breaking change from previous versions.
+ * 
+ * You can still use the p5 constants like `LEFT_ARROW` which now map to string values
+ * internally rather than numeric codes.
+ * @param code key to check.
+ * @returns whether the key is down or not.
+ */
+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.
@@ -18291,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.
@@ -18401,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.
@@ -18434,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.
  * 
@@ -18486,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.
  * 
@@ -19287,6 +19252,25 @@ function noLights(): void;
  */
 function lightness(color: P5.Color | number[] | string): number;
 
+/**
+ * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply for images.
+ * 
+ * This method allows the user to apply a custom shader to images, enabling
+ * advanced visual effects such as pixel manipulation, color adjustments,
+ * or dynamic behavior. The shader will be applied to the image drawn using
+ * the <a href="#/p5/image">image()</a> function.
+ * 
+ * The shader will be used exclusively for:
+ * 
+ * - `image()` calls, applying only when drawing 2D images.
+ * 
+ * - This shader will NOT apply to images used in <a href="#/p5/texture">texture()</a> or other 3D contexts.
+ * Any attempts to use the imageShader in these cases will be ignored.
+ * @param s <a href="#/p5.Shader">p5.Shader</a> object
+ * to apply for images.
+ */
+function imageShader(s: P5.Shader): void;
+
 /**
  * Changes the location from which images are drawn when
  * <a href="#/p5/image">image()</a> is called.
@@ -19308,25 +19292,6 @@ function lightness(color: P5.Color | number[] | string): number;
  */
 function imageMode(mode: typeof P5.CORNER | typeof P5.CORNERS | typeof P5.CENTER): void;
 
-/**
- * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply for images.
- * 
- * This method allows the user to apply a custom shader to images, enabling
- * advanced visual effects such as pixel manipulation, color adjustments,
- * or dynamic behavior. The shader will be applied to the image drawn using
- * the <a href="#/p5/image">image()</a> function.
- * 
- * The shader will be used exclusively for:
- * 
- * - `image()` calls, applying only when drawing 2D images.
- * 
- * - This shader will NOT apply to images used in <a href="#/p5/texture">texture()</a> or other 3D contexts.
- * Any attempts to use the imageShader in these cases will be ignored.
- * @param s <a href="#/p5.Shader">p5.Shader</a> object
- * to apply for images.
- */
-function imageShader(s: P5.Shader): void;
-
 /**
  * A function that's called once when a mouse button is released.
  * 
@@ -19400,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.
  * 
@@ -19417,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;
@@ -19426,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
@@ -19515,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.
@@ -19538,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.
  * 
@@ -19583,7 +19532,23 @@ function paletteLerp(colors_stops: [P5.Color | string | number | number[], numbe
  * @param detailX number of edges that form the hole. Defaults to 24.
  * @param detailY number of triangle subdivisions along the y-axis. Defaults to 16.
  */
-function torus(radius?: number, tubeRadius?: number, detailX?: number, detailY?: number): void;
+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.
@@ -19673,7 +19638,7 @@ function mouseClicked(event?: MouseEvent): void;
  * }
  * 
  * function material() {
- * let time = uniformFloat();
+ * let time = millis();
  * worldInputs.begin();
  * worldInputs.position.y +=
  * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -19683,7 +19648,6 @@ function mouseClicked(event?: MouseEvent): void;
  * function draw() {
  * background(255);
  * shader(myShader);
- * myShader.setUniform('time', millis());
  * lights();
  * noStroke();
  * fill('red');
@@ -19809,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
@@ -19901,42 +19865,6 @@ function stroke(color: P5.Color): void;
  */
 function createColorPicker(value?: string | P5.Color): P5.Element;
 
-/**
- * Saves a given element(image, text, json, csv, wav, or html) to the client's
- * computer. The first parameter can be a pointer to element we want to save.
- * The element can be one of <a href="#/p5.Element">p5.Element</a>,an Array of
- * Strings, an Array of JSON, a JSON object, a <a href="#/p5.Table">p5.Table
- * </a>, a <a href="#/p5.Image">p5.Image</a>, or a p5.SoundFile (requires
- * p5.sound). The second parameter is a filename (including extension).The
- * third parameter is for options specific to this type of object. This method
- * will save a file that fits the given parameters.
- * If it is called without specifying an element, by default it will save the
- * whole canvas as an image file. You can optionally specify a filename as
- * the first parameter in such a case.
- * Note that it is not recommended to
- * call this method within draw, as it will open a new save dialog on every
- * render.
- * @param objectOrFilename If filename is provided, will
- * save canvas as an image with
- * either png or jpg extension
- * depending on the filename.
- * If object is provided, will
- * save depending on the object
- * and filename (see examples
- * above).
- * @param filename If an object is provided as the first
- * parameter, then the second parameter
- * indicates the filename,
- * and should include an appropriate
- * file extension (see examples above).
- * @param options Additional options depend on
- * filetype. For example, when saving JSON,
- * <code>true</code> indicates that the
- * output will be optimized for filesize,
- * rather than readability.
- */
-function save(objectOrFilename?: object | string, filename?: string, options?: boolean | string): void;
-
 /**
  * Loads a new shader from a file that can change how fills are drawn. Pass the resulting
  * shader into the <a href="#/p5/shader">`shader()`</a> function to apply it
@@ -19954,7 +19882,6 @@ function save(objectOrFilename?: object | string, filename?: string, options?: b
  * function draw() {
  * background(255);
  * shader(myShader);
- * myShader.setUniform('time', millis());
  * lights();
  * noStroke();
  * fill('red');
@@ -19964,7 +19891,7 @@ function save(objectOrFilename?: object | string, filename?: string, options?: b
  * might use the `pixelInputs` hook to change each pixel on the surface of a shape.
  * 
  * `// myMaterial.js
- * let time = uniformFloat();
+ * let time = millis();
  * worldInputs.begin();
  * worldInputs.position.y +=
  * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -19984,6 +19911,42 @@ function save(objectOrFilename?: object | string, filename?: string, options?: b
  */
 function loadMaterialShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
 
+/**
+ * Saves a given element(image, text, json, csv, wav, or html) to the client's
+ * computer. The first parameter can be a pointer to element we want to save.
+ * The element can be one of <a href="#/p5.Element">p5.Element</a>,an Array of
+ * Strings, an Array of JSON, a JSON object, a <a href="#/p5.Table">p5.Table
+ * </a>, a <a href="#/p5.Image">p5.Image</a>, or a p5.SoundFile (requires
+ * p5.sound). The second parameter is a filename (including extension).The
+ * third parameter is for options specific to this type of object. This method
+ * will save a file that fits the given parameters.
+ * If it is called without specifying an element, by default it will save the
+ * whole canvas as an image file. You can optionally specify a filename as
+ * the first parameter in such a case.
+ * Note that it is not recommended to
+ * call this method within draw, as it will open a new save dialog on every
+ * render.
+ * @param objectOrFilename If filename is provided, will
+ * save canvas as an image with
+ * either png or jpg extension
+ * depending on the filename.
+ * If object is provided, will
+ * save depending on the object
+ * and filename (see examples
+ * above).
+ * @param filename If an object is provided as the first
+ * parameter, then the second parameter
+ * indicates the filename,
+ * and should include an appropriate
+ * file extension (see examples above).
+ * @param options Additional options depend on
+ * filetype. For example, when saving JSON,
+ * <code>true</code> indicates that the
+ * output will be optimized for filesize,
+ * rather than readability.
+ */
+function save(objectOrFilename?: object | string, filename?: string, options?: boolean | string): void;
+
 /**
  * Influences the shape of the Bézier curve segment in a custom shape.
  * By default, this is 3; the other possible parameter is 2. This
@@ -20066,6 +20029,19 @@ function doubleClicked(event?: MouseEvent): void;
  */
 function baseMaterialShader(): P5.Shader;
 
+/**
+ * Returns the base shader used for filters.
+ * 
+ * Calling <a href="#/p5/buildFilterShader">`buildFilterShader(shaderFunction)`</a>
+ * is equivalent to calling `baseFilterShader().modify(shaderFunction)`.
+ * 
+ * Read <a href="#/p5/buildFilterShader">the `buildFilterShader` reference</a> or
+ * call `baseFilterShader().inspectHooks()` for more information on what you can do with
+ * the base filter shader.
+ * @returns The base filter shader.
+ */
+function baseFilterShader(): P5.Shader;
+
 /**
  * Starts using shapes to erase parts of the canvas.
  * 
@@ -20100,19 +20076,6 @@ function baseMaterialShader(): P5.Shader;
  */
 function erase(strengthFill?: number, strengthStroke?: number): void;
 
-/**
- * Returns the base shader used for filters.
- * 
- * Calling <a href="#/p5/buildFilterShader">`buildFilterShader(shaderFunction)`</a>
- * is equivalent to calling `baseFilterShader().modify(shaderFunction)`.
- * 
- * Read <a href="#/p5/buildFilterShader">the `buildFilterShader` reference</a> or
- * call `baseFilterShader().inspectHooks()` for more information on what you can do with
- * the base filter shader.
- * @returns The base filter shader.
- */
-function baseFilterShader(): P5.Shader;
-
 /**
  * Ends erasing that was started with <a href="#/p5/erase">erase()</a>.
  * 
@@ -20123,7 +20086,7 @@ function baseFilterShader(): P5.Shader;
 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.
  * 
@@ -20173,7 +20136,7 @@ function createInput(value?: string): P5.Element;
  * }
  * 
  * function material() {
- * let time = uniformFloat();
+ * let time = millis();
  * worldInputs.begin();
  * worldInputs.position.y +=
  * 20. * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -20183,7 +20146,6 @@ function createInput(value?: string): P5.Element;
  * function draw() {
  * background(255);
  * shader(myShader);
- * myShader.setUniform('time', millis());
  * noStroke();
  * sphere(50);
  * }`You may also want to change the colors used. By default, the x, y, and z values of the orientation
@@ -20472,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.
@@ -20508,7 +20470,6 @@ function createFileInput(callback: (input: P5.File) => any, multiple?: boolean):
  * function draw() {
  * background(255);
  * shader(myShader);
- * myShader.setUniform('time', millis());
  * lights();
  * noStroke();
  * fill('red');
@@ -20518,7 +20479,7 @@ function createFileInput(callback: (input: P5.File) => any, multiple?: boolean):
  * might use the `finalColor` hook to change the color of each pixel on the surface of a shape.
  * 
  * `// myMaterial.js
- * let time = uniformFloat();
+ * let time = millis();
  * worldInputs.begin();
  * worldInputs.position.y +=
  * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -20649,7 +20610,7 @@ function saveStrings(list: string[], filename: string, extension?: string, isCRL
  * }
  * 
  * function material() {
- * let time = uniformFloat();
+ * let time = millis();
  * worldInputs.begin();
  * worldInputs.position.y +=
  * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -20659,7 +20620,6 @@ function saveStrings(list: string[], filename: string, extension?: string, isCRL
  * function draw() {
  * background(255);
  * shader(myShader);
- * myShader.setUniform('time', millis());
  * noStroke();
  * fill('red');
  * circle(0, 0, 50);
@@ -20773,7 +20733,6 @@ function saveTable(Table: P5.Table, filename: string, options?: string): void;
  * function draw() {
  * background(255);
  * shader(myShader);
- * myShader.setUniform('time', millis());
  * lights();
  * noStroke();
  * fill('red');
@@ -20783,7 +20742,7 @@ function saveTable(Table: P5.Table, filename: string, options?: string): void;
  * might use the `finalColor` hook to change the color of each pixel on the surface of a shape.
  * 
  * `// myMaterial.js
- * let time = uniformFloat();
+ * let time = millis();
  * worldInputs.begin();
  * worldInputs.position.y +=
  * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -21068,7 +21027,7 @@ function camera(x?: number, y?: number, z?: number, centerX?: number, centerY?:
  * }
  * 
  * function material() {
- * let time = uniformFloat();
+ * let time = millis();
  * worldInputs.begin();
  * // Add a somewhat random offset to the weight
  * // that varies based on position and time
@@ -21084,7 +21043,6 @@ function camera(x?: number, y?: number, z?: number, centerX?: number, centerY?:
  * function draw() {
  * background(255);
  * strokeShader(myShader);
- * myShader.setUniform('time', millis());
  * strokeWeight(10);
  * beginShape();
  * for (let i = 0; i <= 50; i++) {
@@ -21175,6 +21133,58 @@ function buildStrokeShader(hooks: object, scope?: object): P5.Shader;
 function splineProperty(property: string, value: any): void;
 function splineProperty(property: string): void;
 
+/**
+ * Loads a new shader from a file that can change how strokes are drawn. Pass the resulting
+ * shader into the <a href="#/p5/strokeShader">`strokeShader()`</a> function to apply it
+ * to any strokes you draw.
+ * 
+ * Since this function loads data from another file, it returns a `Promise`.
+ * Use it in an `async function setup`, and `await` its result.
+ * 
+ * `let myShader;
+ * async function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * myShader = await loadStrokeShader('myMaterial.js');
+ * }
+ * 
+ * function draw() {
+ * background(255);
+ * strokeShader(myShader);
+ * strokeWeight(30);
+ * line(
+ * -width/3,
+ * sin(millis()*0.001) * height/4,
+ * width/3,
+ * sin(millis()*0.001 + 1) * height/4
+ * );
+ * }`Inside your shader file, you can call p5.strands hooks to change parts of the shader. For
+ * example, you might use the `worldInputs` hook to change each vertex, or you
+ * might use the `pixelInputs` hook to change each pixel on the surface of a stroke.
+ * 
+ * `// myMaterial.js
+ * pixelInputs.begin();
+ * let opacity = 1 - smoothstep(
+ * 0,
+ * 15,
+ * length(pixelInputs.position - pixelInputs.center)
+ * );
+ * pixelInputs.color.a *= opacity;
+ * pixelInputs.end();`Read the reference for <a href="#/p5/buildStrokeShader">`buildStrokeShader`</a>,
+ * the version of `loadStrokeShader` that takes in a function instead of a separate file,
+ * for a full list of hooks you can use and examples for each.
+ * 
+ * The second parameter, `successCallback`, is optional. If a function is passed, as in
+ * `loadStrokeShader('myShader.js', onLoaded)`, then the `onLoaded()` function will be called
+ * once the shader loads. The shader will be passed to `onLoaded()` as its only argument.
+ * The return value of `handleData()`, if present, will be used as the final return value of
+ * `loadStrokeShader('myShader.js', onLoaded)`.
+ * @param url The URL of your p5.strands JavaScript file.
+ * @param onSuccess A callback function to run when loading completes.
+ * @param onFailure A callback function to run when loading fails.
+ * @returns The stroke shader.
+ */
+function loadStrokeShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
+
 /**
  * Sets a perspective projection for the current camera in a 3D sketch.
  * 
@@ -21229,58 +21239,6 @@ function splineProperty(property: string): void;
  */
 function perspective(fovy?: number, aspect?: number, near?: number, far?: number): void;
 
-/**
- * Loads a new shader from a file that can change how strokes are drawn. Pass the resulting
- * shader into the <a href="#/p5/strokeShader">`strokeShader()`</a> function to apply it
- * to any strokes you draw.
- * 
- * Since this function loads data from another file, it returns a `Promise`.
- * Use it in an `async function setup`, and `await` its result.
- * 
- * `let myShader;
- * async function setup() {
- * createCanvas(200, 200, WEBGL);
- * myShader = await loadStrokeShader('myMaterial.js');
- * }
- * 
- * function draw() {
- * background(255);
- * strokeShader(myShader);
- * strokeWeight(30);
- * line(
- * -width/3,
- * sin(millis()*0.001) * height/4,
- * width/3,
- * sin(millis()*0.001 + 1) * height/4
- * );
- * }`Inside your shader file, you can call p5.strands hooks to change parts of the shader. For
- * example, you might use the `worldInputs` hook to change each vertex, or you
- * might use the `pixelInputs` hook to change each pixel on the surface of a stroke.
- * 
- * `// myMaterial.js
- * pixelInputs.begin();
- * let opacity = 1 - smoothstep(
- * 0,
- * 15,
- * length(pixelInputs.position - pixelInputs.center)
- * );
- * pixelInputs.color.a *= opacity;
- * pixelInputs.end();`Read the reference for <a href="#/p5/buildStrokeShader">`buildStrokeShader`</a>,
- * the version of `loadStrokeShader` that takes in a function instead of a separate file,
- * for a full list of hooks you can use and examples for each.
- * 
- * The second parameter, `successCallback`, is optional. If a function is passed, as in
- * `loadStrokeShader('myShader.js', onLoaded)`, then the `onLoaded()` function will be called
- * once the shader loads. The shader will be passed to `onLoaded()` as its only argument.
- * The return value of `handleData()`, if present, will be used as the final return value of
- * `loadStrokeShader('myShader.js', onLoaded)`.
- * @param url The URL of your p5.strands JavaScript file.
- * @param onSuccess A callback function to run when loading completes.
- * @param onFailure A callback function to run when loading fails.
- * @returns The stroke shader.
- */
-function loadStrokeShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
-
 /**
  * Returns the default shader used for strokes.
  * 
@@ -21325,6 +21283,17 @@ function baseStrokeShader(): P5.Shader;
  */
 function splineProperties(values: object): object;
 
+/**
+ * Restores the default shaders.
+ * 
+ * `resetShader()` deactivates any shaders previously applied by
+ * <a href="#/p5/shader">shader()</a>, <a href="#/p5/strokeShader">strokeShader()</a>,
+ * or <a href="#/p5/imageShader">imageShader()</a>.
+ * 
+ * Note: Shaders can only be used in WebGL mode.
+ */
+function resetShader(): void;
+
 /**
  * Enables or disables perspective for lines in 3D sketches.
  * 
@@ -21362,17 +21331,6 @@ function splineProperties(values: object): object;
 function linePerspective(enable: boolean): boolean;
 function linePerspective(): boolean;
 
-/**
- * Restores the default shaders.
- * 
- * `resetShader()` deactivates any shaders previously applied by
- * <a href="#/p5/shader">shader()</a>, <a href="#/p5/strokeShader">strokeShader()</a>,
- * or <a href="#/p5/imageShader">imageShader()</a>.
- * 
- * Note: Shaders can only be used in WebGL mode.
- */
-function resetShader(): void;
-
 /**
  * Sets an orthographic projection for the current camera in a 3D sketch.
  * 
@@ -21456,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.
  * 
@@ -21495,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.
  * 
@@ -22710,3 +22668,5 @@ function sampler(value: any): any;
 
 }
 
+export default p5;
+