p5 2.2.3-rc.0 → 2.2.3

package/types/p5.d.ts

@@ -1137,9 +1137,9 @@ declare const __BOTTOM: typeof BOTTOM;
 
 /**
  * A system variable that provides direct access to the sketch's
- * `<canvas>` element.
+ * `<canvas>` element.
  * 
- * The `&lt;canvas&gt;` element provides many specialized features that aren't
+ * The `<canvas>` element provides many specialized features that aren't
  * included in the p5.js library. The `drawingContext` system variable
  * provides access to these features by exposing the sketch's
  * <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a>
@@ -3325,6 +3325,26 @@ declare class p5 {
   byte(n: string | boolean | number): number;
   byte(ns: any[]): number[];
 
+  /**
+   * Creates a custom <a href="#/p5.Geometry">p5.Geometry</a> object from
+   * simpler 3D shapes.
+   * 
+   * `buildGeometry()` helps with creating complex 3D shapes from simpler ones
+   * such as <a href="#/p5/sphere">sphere()</a>. It can help to make sketches
+   * more performant. For example, if a complex 3D shape doesn’t change while a
+   * sketch runs, then it can be created with `buildGeometry()`. Creating a
+   * <a href="#/p5.Geometry">p5.Geometry</a> object once and then drawing it
+   * will run faster than repeatedly drawing the individual pieces.
+   * 
+   * The parameter, `callback`, is a function with the drawing instructions for
+   * the new <a href="#/p5.Geometry">p5.Geometry</a> object. It will be called
+   * once to create the new 3D shape.
+   * Note: `buildGeometry()` can only be used in WebGL mode.
+   * @param callback function that draws the shape.
+   * @returns new 3D shape.
+   */
+  buildGeometry(callback: Function): p5.Geometry;
+
   /**
    * Calculates coordinates along a Bézier curve using interpolation.
    * 
@@ -3355,31 +3375,6 @@ declare class p5 {
    */
   bezierPoint(a: number, b: number, c: number, d: number, t: number): number;
 
-  /**
-   * Creates a custom <a href="#/p5.Geometry">p5.Geometry</a> object from
-   * simpler 3D shapes.
-   * 
-   * `buildGeometry()` helps with creating complex 3D shapes from simpler ones
-   * such as <a href="#/p5/sphere">sphere()</a>. It can help to make sketches
-   * more performant. For example, if a complex 3D shape doesn’t change while a
-   * sketch runs, then it can be created with `buildGeometry()`. Creating a
-   * <a href="#/p5.Geometry">p5.Geometry</a> object once and then drawing it
-   * will run faster than repeatedly drawing the individual pieces.
-   * 
-   * The parameter, `callback`, is a function with the drawing instructions for
-   * the new <a href="#/p5.Geometry">p5.Geometry</a> object. It will be called
-   * once to create the new 3D shape.
-   * 
-   * See <a href="#/p5/beginGeometry">beginGeometry()</a> and
-   * <a href="#/p5/endGeometry">endGeometry()</a> for another way to build 3D
-   * shapes.
-   * 
-   * Note: `buildGeometry()` can only be used in WebGL mode.
-   * @param callback function that draws the shape.
-   * @returns new 3D shape.
-   */
-  buildGeometry(callback: Function): p5.Geometry;
-
   /**
    * Loads a 3D model to create a
    * <a href="#/p5.Geometry">p5.Geometry</a> object.
@@ -3539,20 +3534,6 @@ declare class p5 {
    */
   smooth(): void;
 
-  /**
-   * Removes all items in the web browser's local storage.
-   * 
-   * Web browsers can save small amounts of data using the built-in
-   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">localStorage object</a>.
-   * Data stored in `localStorage` can be retrieved at any point, even after
-   * refreshing a page or restarting the browser. Data are stored as key-value
-   * pairs. Calling `clearStorage()` removes all data from `localStorage`.
-   * 
-   * Note: Sensitive data such as passwords or personal information shouldn't be
-   * stored in `localStorage`.
-   */
-  clearStorage(): void;
-
   /**
    * Converts a `Number` into a `String` with a plus or minus sign.
    * 
@@ -3588,6 +3569,20 @@ declare class p5 {
   nfp(num: number, left?: number, right?: number): string;
   nfp(nums: number[], left?: number, right?: number): string[];
 
+  /**
+   * Removes all items in the web browser's local storage.
+   * 
+   * Web browsers can save small amounts of data using the built-in
+   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">localStorage object</a>.
+   * Data stored in `localStorage` can be retrieved at any point, even after
+   * refreshing a page or restarting the browser. Data are stored as key-value
+   * pairs. Calling `clearStorage()` removes all data from `localStorage`.
+   * 
+   * Note: Sensitive data such as passwords or personal information shouldn't be
+   * stored in `localStorage`.
+   */
+  clearStorage(): void;
+
   /**
    * Removes all elements created by p5.js, including any event handlers.
    * 
@@ -3830,6 +3825,29 @@ declare class p5 {
   frameRate(fps: number): number;
   frameRate(): number;
 
+  /**
+   * Clears a <a href="#/p5.Geometry">p5.Geometry</a> object from the graphics
+   * processing unit (GPU) memory.
+   * 
+   * <a href="#/p5.Geometry">p5.Geometry</a> objects can contain lots of data
+   * about their vertices, surface normals, colors, and so on. Complex 3D shapes
+   * can use lots of memory which is a limited resource in many GPUs. Calling
+   * `freeGeometry()` works with <a href="#/p5.Geometry">p5.Geometry</a> objects
+   * created with <a href="#/p5/buildGeometry">buildGeometry()</a> and
+   * <a href="#/p5/loadModel">loadModel()</a>.
+   * 
+   * The parameter, `geometry`, is the <a href="#/p5.Geometry">p5.Geometry</a>
+   * object to be freed.
+   * 
+   * Note: A <a href="#/p5.Geometry">p5.Geometry</a> object can still be drawn
+   * after its resources are cleared from GPU memory. It may take longer to draw
+   * the first time it’s redrawn.
+   * 
+   * Note: `freeGeometry()` can only be used in WebGL mode.
+   * @param geometry 3D shape whose resources should be freed.
+   */
+  freeGeometry(geometry: p5.Geometry): void;
+
   /**
    * Calculates the cosine of an angle.
    * 
@@ -3892,14 +3910,14 @@ declare class p5 {
   specularColor(color: p5.Color): void;
 
   /**
-   * Creates a `&lt;div&gt;&lt;/div&gt;` element.
+   * Creates a `<div></div>` element.
    * 
-   * `&lt;div&gt;&lt;/div&gt;` elements are commonly used as containers for
+   * `<div></div>` elements are commonly used as containers for
    * other elements.
    * 
    * The parameter `html` is optional. It accepts a string that sets the
-   * inner HTML of the new `&lt;div&gt;&lt;/div&gt;`.
-   * @param html inner HTML for the new `&lt;div&gt;&lt;/div&gt;` element.
+   * inner HTML of the new `<div></div>`.
+   * @param html inner HTML for the new `<div></div>` element.
    * @returns new <a href="#/p5.Element">p5.Element</a> object.
    */
   createDiv(html?: string): p5.Element;
@@ -3957,27 +3975,6 @@ declare class p5 {
   boolean(n: string | boolean | number): boolean;
   boolean(ns: any[]): boolean[];
 
-  /**
-   * Removes an item from the web browser's local storage.
-   * 
-   * Web browsers can save small amounts of data using the built-in
-   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">localStorage object</a>.
-   * Data stored in `localStorage` can be retrieved at any point, even after
-   * refreshing a page or restarting the browser. Data are stored as key-value
-   * pairs.
-   * 
-   * <a href="#/p5/storeItem">storeItem()</a> makes it easy to store values in
-   * `localStorage` and `removeItem()` makes it easy to delete them.
-   * 
-   * The parameter, `key`, is the name of the value to remove as a string. For
-   * example, calling `removeItem('size')` removes the item with the key `size`.
-   * 
-   * Note: Sensitive data such as passwords or personal information shouldn't be
-   * stored in `localStorage`.
-   * @param key name of the value to remove.
-   */
-  removeItem(key: string): void;
-
   /**
    * Rotates the coordinate system.
    * 
@@ -4013,31 +4010,25 @@ declare class p5 {
   rotate(angle: number, axis?: p5.Vector | number[]): void;
 
   /**
-   * Clears a <a href="#/p5.Geometry">p5.Geometry</a> object from the graphics
-   * processing unit (GPU) memory.
+   * Removes an item from the web browser's local storage.
    * 
-   * <a href="#/p5.Geometry">p5.Geometry</a> objects can contain lots of data
-   * about their vertices, surface normals, colors, and so on. Complex 3D shapes
-   * can use lots of memory which is a limited resource in many GPUs. Calling
-   * `freeGeometry()` can improve performance by freeing a
-   * <a href="#/p5.Geometry">p5.Geometry</a> object’s resources from GPU memory.
-   * `freeGeometry()` works with <a href="#/p5.Geometry">p5.Geometry</a> objects
-   * created with <a href="#/p5/beginGeometry">beginGeometry()</a> and
-   * <a href="#/p5/endGeometry">endGeometry()</a>,
-   * <a href="#/p5/buildGeometry">buildGeometry()</a>, and
-   * <a href="#/p5/loadModel">loadModel()</a>.
+   * Web browsers can save small amounts of data using the built-in
+   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">localStorage object</a>.
+   * Data stored in `localStorage` can be retrieved at any point, even after
+   * refreshing a page or restarting the browser. Data are stored as key-value
+   * pairs.
    * 
-   * The parameter, `geometry`, is the <a href="#/p5.Geometry">p5.Geometry</a>
-   * object to be freed.
+   * <a href="#/p5/storeItem">storeItem()</a> makes it easy to store values in
+   * `localStorage` and `removeItem()` makes it easy to delete them.
    * 
-   * Note: A <a href="#/p5.Geometry">p5.Geometry</a> object can still be drawn
-   * after its resources are cleared from GPU memory. It may take longer to draw
-   * the first time it’s redrawn.
+   * The parameter, `key`, is the name of the value to remove as a string. For
+   * example, calling `removeItem('size')` removes the item with the key `size`.
    * 
-   * Note: `freeGeometry()` can only be used in WebGL mode.
-   * @param geometry 3D shape whose resources should be freed.
+   * Note: Sensitive data such as passwords or personal information shouldn't be
+   * stored in `localStorage`.
+   * @param key name of the value to remove.
    */
-  freeGeometry(geometry: p5.Geometry): void;
+  removeItem(key: string): void;
 
   /**
    * The <a href="#/p5/setMoveThreshold">setMoveThreshold()</a> function is used to set the movement threshold for
@@ -4127,11 +4118,11 @@ declare class p5 {
   /**
    * Creates a paragraph element.
    * 
-   * `&lt;p&gt;&lt;/p&gt;` elements are commonly used for paragraph-length text.
+   * `<p></p>` elements are commonly used for paragraph-length text.
    * 
    * The parameter `html` is optional. It accepts a string that sets the
-   * inner HTML of the new `&lt;p&gt;&lt;/p&gt;`.
-   * @param html inner HTML for the new `&lt;p&gt;&lt;/p&gt;` element.
+   * inner HTML of the new `<p></p>`.
+   * @param html inner HTML for the new `<p></p>` element.
    * @returns new <a href="#/p5.Element">p5.Element</a> object.
    */
   createP(html?: string): p5.Element;
@@ -4375,7 +4366,7 @@ declare class p5 {
    * // 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];
    * });
@@ -4565,6 +4556,38 @@ declare class p5 {
    */
   loadTable(filename: string | Request, separator?: string, header?: string, callback?: Function, errorCallback?: Function): Promise<object>;
 
+  /**
+   * Draws a plane.
+   * 
+   * A plane is a four-sided, flat shape with every angle measuring 90˚. It’s
+   * similar to a rectangle and offers advanced drawing features in WebGL mode.
+   * 
+   * The first parameter, `width`, is optional. If a `Number` is passed, as in
+   * `plane(20)`, it sets the plane’s width and height. By default, `width` is
+   * 50.
+   * 
+   * The second parameter, `height`, is also optional. If a `Number` is passed,
+   * as in `plane(20, 30)`, it sets the plane’s height. By default, `height` is
+   * set to the plane’s `width`.
+   * 
+   * The third parameter, `detailX`, is also optional. If a `Number` is passed,
+   * as in `plane(20, 30, 5)` it sets the number of triangle subdivisions to use
+   * along the x-axis. All 3D shapes are made by connecting triangles to form
+   * their surfaces. By default, `detailX` is 1.
+   * 
+   * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
+   * as in `plane(20, 30, 5, 7)` it sets the number of triangle subdivisions to
+   * use along the y-axis. All 3D shapes are made by connecting triangles to
+   * form their surfaces. By default, `detailY` is 1.
+   * 
+   * Note: `plane()` can only be used in WebGL mode.
+   * @param width width of the plane.
+   * @param height height of the plane.
+   * @param detailX number of triangle subdivisions along the x-axis.
+   * @param detailY number of triangle subdivisions along the y-axis.
+   */
+  plane(width?: number, height?: number, detailX?: number, detailY?: number): void;
+
   /**
    * Gets the red value of a color.
    * 
@@ -4650,16 +4673,16 @@ declare class p5 {
   tan(angle: number): number;
 
   /**
-   * Creates a `&lt;span&gt;&lt;/span&gt;` element.
+   * Creates a `<span></span>` element.
    * 
-   * `&lt;span&gt;&lt;/span&gt;` elements are commonly used as containers
-   * for inline elements. For example, a `&lt;span&gt;&lt;/span&gt;`
+   * `<span></span>` elements are commonly used as containers
+   * for inline elements. For example, a `<span></span>`
    * can hold part of a sentence that's a
    * <span style="color: deeppink;">different</span> style.
    * 
    * The parameter `html` is optional. It accepts a string that sets the
-   * inner HTML of the new `&lt;span&gt;&lt;/span&gt;`.
-   * @param html inner HTML for the new `&lt;span&gt;&lt;/span&gt;` element.
+   * inner HTML of the new `<span></span>`.
+   * @param html inner HTML for the new `<span></span>` element.
    * @returns new <a href="#/p5.Element">p5.Element</a> object.
    */
   createSpan(html?: string): p5.Element;
@@ -4712,38 +4735,6 @@ declare class p5 {
    */
   loadFilterShader(filename: string, successCallback?: Function, failureCallback?: Function): Promise<p5.Shader>;
 
-  /**
-   * Draws a plane.
-   * 
-   * A plane is a four-sided, flat shape with every angle measuring 90˚. It’s
-   * similar to a rectangle and offers advanced drawing features in WebGL mode.
-   * 
-   * The first parameter, `width`, is optional. If a `Number` is passed, as in
-   * `plane(20)`, it sets the plane’s width and height. By default, `width` is
-   * 50.
-   * 
-   * The second parameter, `height`, is also optional. If a `Number` is passed,
-   * as in `plane(20, 30)`, it sets the plane’s height. By default, `height` is
-   * set to the plane’s `width`.
-   * 
-   * The third parameter, `detailX`, is also optional. If a `Number` is passed,
-   * as in `plane(20, 30, 5)` it sets the number of triangle subdivisions to use
-   * along the x-axis. All 3D shapes are made by connecting triangles to form
-   * their surfaces. By default, `detailX` is 1.
-   * 
-   * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
-   * as in `plane(20, 30, 5, 7)` it sets the number of triangle subdivisions to
-   * use along the y-axis. All 3D shapes are made by connecting triangles to
-   * form their surfaces. By default, `detailY` is 1.
-   * 
-   * Note: `plane()` can only be used in WebGL mode.
-   * @param width width of the plane.
-   * @param height height of the plane.
-   * @param detailX number of triangle subdivisions along the x-axis.
-   * @param detailY number of triangle subdivisions along the y-axis.
-   */
-  plane(width?: number, height?: number, detailX?: number, detailY?: number): void;
-
   /**
    * Creates and a new <a href="#/p5.Framebuffer">p5.Framebuffer</a> object.
    * 
@@ -4853,7 +4844,7 @@ declare class p5 {
   map(value: number, start1: number, stop1: number, start2: number, stop2: number, withinBounds?: boolean): number;
 
   /**
-   * Creates an `&lt;img&gt;` element that can appear outside of the canvas.
+   * Creates an `<img>` element that can appear outside of the canvas.
    * 
    * The first parameter, `src`, is a string with the path to the image file.
    * `src` should be a relative path, as in `'assets/image.png'`, or a URL, as
@@ -5111,6 +5102,42 @@ declare class p5 {
    */
   green(color: p5.Color | number[] | string): number;
 
+  /**
+   * Draws a box (rectangular prism).
+   * 
+   * A box is a 3D shape with six faces. Each face makes a 90˚ with four
+   * neighboring faces.
+   * 
+   * The first parameter, `width`, is optional. If a `Number` is passed, as in
+   * `box(20)`, it sets the box’s width and height. By default, `width` is 50.
+   * 
+   * The second parameter, `height`, is also optional. If a `Number` is passed,
+   * as in `box(20, 30)`, it sets the box’s height. By default, `height` is set
+   * to the box’s `width`.
+   * 
+   * The third parameter, `depth`, is also optional. If a `Number` is passed, as
+   * in `box(20, 30, 40)`, it sets the box’s depth. By default, `depth` is set
+   * to the box’s `height`.
+   * 
+   * The fourth parameter, `detailX`, is also optional. If a `Number` is passed,
+   * as in `box(20, 30, 40, 5)`, it sets the number of triangle subdivisions to
+   * use along the x-axis. All 3D shapes are made by connecting triangles to
+   * form their surfaces. By default, `detailX` is 1.
+   * 
+   * The fifth parameter, `detailY`, is also optional. If a number is passed, as
+   * in `box(20, 30, 40, 5, 7)`, it sets the number of triangle subdivisions to
+   * use along the y-axis. All 3D shapes are made by connecting triangles to
+   * form their surfaces. By default, `detailY` is 1.
+   * 
+   * Note: `box()` can only be used in WebGL mode.
+   * @param width width of the box.
+   * @param height height of the box.
+   * @param depth depth of the box.
+   * @param detailX number of triangle subdivisions along the x-axis.
+   * @param detailY number of triangle subdivisions along the y-axis.
+   */
+  box(width?: number, height?: number, depth?: number, detailX?: number, detailY?: number): void;
+
   /**
    * Returns the largest value in a sequence of numbers.
    * 
@@ -5161,7 +5188,7 @@ declare class p5 {
   bezierVertex(x: number, y: number, z: number, u?: number, v?: number): void;
 
   /**
-   * Creates an `&lt;a&gt;&lt;/a&gt;` element that links to another web page.
+   * Creates an `<a></a>` element that links to another web page.
    * 
    * The first parmeter, `href`, is a string that sets the URL of the linked
    * page.
@@ -5319,52 +5346,16 @@ declare class p5 {
   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.
@@ -5498,7 +5489,7 @@ declare class p5 {
    * (<a href="https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction" target="_blank">XML</a>)
    * is a standard format for sending data between applications. Like HTML, the
    * XML format is based on tags and attributes, as in
-   * `&lt;time units="s"&gt;1234&lt;/time&gt;`.
+   * `<time units="s">1234</time>`.
    * 
    * The first parameter, `path`, is always a string with the path to the file.
    * Paths to local files should be relative, as in
@@ -5667,6 +5658,33 @@ declare class p5 {
   angleMode(mode: typeof p5.RADIANS | typeof p5.DEGREES): typeof p5.RADIANS | typeof p5.DEGREES;
   angleMode(): typeof p5.RADIANS | typeof p5.DEGREES;
 
+  /**
+   * Draws a sphere.
+   * 
+   * A sphere is a 3D shape with triangular faces that connect to form a round
+   * surface. Spheres with few faces look like crystals. Spheres with many faces
+   * have smooth surfaces and look like balls.
+   * 
+   * The first parameter, `radius`, is optional. If a `Number` is passed, as in
+   * `sphere(20)`, it sets the radius of the sphere. By default, `radius` is 50.
+   * 
+   * The second parameter, `detailX`, is also optional. If a `Number` is passed,
+   * as in `sphere(20, 5)`, it sets the number of triangle subdivisions to use
+   * along the x-axis. All 3D shapes are made by connecting triangles to form
+   * their surfaces. By default, `detailX` is 24.
+   * 
+   * The third parameter, `detailY`, is also optional. If a `Number` is passed,
+   * as in `sphere(20, 5, 2)`, it sets the number of triangle subdivisions to
+   * use along the y-axis. All 3D shapes are made by connecting triangles to
+   * form their surfaces. By default, `detailY` is 16.
+   * 
+   * Note: `sphere()` can only be used in WebGL mode.
+   * @param radius radius of the sphere. Defaults to 50.
+   * @param detailX number of triangle subdivisions along the x-axis. Defaults to 24.
+   * @param detailY number of triangle subdivisions along the y-axis. Defaults to 16.
+   */
+  sphere(radius?: number, detailX?: number, detailY?: number): void;
+
   /**
    * Loads the current value of each pixel on the canvas into the
    * <a href="#/p5/pixels">pixels</a> array.
@@ -5676,17 +5694,6 @@ declare class p5 {
    */
   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.
@@ -5783,7 +5790,7 @@ declare class p5 {
    * 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() {
@@ -5793,7 +5800,7 @@ declare class p5 {
    * }
    * 
    * function gradient() {
-   * let time = uniformFloat();
+   * let time = millis();
    * filterColor.begin();
    * filterColor.set(mix(
    * [1, 0, 0, 1], // Red
@@ -5804,9 +5811,8 @@ declare class p5 {
    * }
    * 
    * 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;
    * 
@@ -5817,7 +5823,7 @@ declare class p5 {
    * }
    * 
    * function noiseShaderCallback() {
-   * let time = uniformFloat();
+   * let time = millis();
    * filterColor.begin();
    * let coord = filterColor.texCoord;
    * 
@@ -5834,7 +5840,6 @@ declare class p5 {
    * }
    * 
    * 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>
@@ -5853,7 +5858,18 @@ declare class p5 {
   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.
    * 
@@ -5890,33 +5906,6 @@ declare class p5 {
    */
   norm(value: number, start: number, stop: number): number;
 
-  /**
-   * Draws a sphere.
-   * 
-   * A sphere is a 3D shape with triangular faces that connect to form a round
-   * surface. Spheres with few faces look like crystals. Spheres with many faces
-   * have smooth surfaces and look like balls.
-   * 
-   * The first parameter, `radius`, is optional. If a `Number` is passed, as in
-   * `sphere(20)`, it sets the radius of the sphere. By default, `radius` is 50.
-   * 
-   * The second parameter, `detailX`, is also optional. If a `Number` is passed,
-   * as in `sphere(20, 5)`, it sets the number of triangle subdivisions to use
-   * along the x-axis. All 3D shapes are made by connecting triangles to form
-   * their surfaces. By default, `detailX` is 24.
-   * 
-   * The third parameter, `detailY`, is also optional. If a `Number` is passed,
-   * as in `sphere(20, 5, 2)`, it sets the number of triangle subdivisions to
-   * use along the y-axis. All 3D shapes are made by connecting triangles to
-   * form their surfaces. By default, `detailY` is 16.
-   * 
-   * Note: `sphere()` can only be used in WebGL mode.
-   * @param radius radius of the sphere. Defaults to 50.
-   * @param detailX number of triangle subdivisions along the x-axis. Defaults to 24.
-   * @param detailY number of triangle subdivisions along the y-axis. Defaults to 16.
-   */
-  sphere(radius?: number, detailX?: number, detailY?: number): void;
-
   /**
    * A function that's called once when any key is released.
    * 
@@ -6107,7 +6096,7 @@ declare class p5 {
   alpha(color: p5.Color | number[] | string): number;
 
   /**
-   * Creates a `&lt;button&gt;&lt;/button&gt;` element.
+   * Creates a `<button></button>` element.
    * 
    * The first parameter, `label`, is a string that sets the label displayed on
    * the button.
@@ -6398,7 +6387,7 @@ declare class p5 {
   panorama(img: p5.Image): void;
 
   /**
-   * Creates a checkbox `&lt;input&gt;&lt;/input&gt;` element.
+   * Creates a checkbox `<input></input>` element.
    * 
    * Checkboxes extend the <a href="#/p5.Element">p5.Element</a> class with a
    * `checked()` method. Calling `myBox.checked()` returns `true` if it the box
@@ -6474,6 +6463,50 @@ declare class p5 {
    */
   hue(color: p5.Color | number[] | string): number;
 
+  /**
+   * Draws a cylinder.
+   * 
+   * A cylinder is a 3D shape with triangular faces that connect a flat bottom
+   * to a flat top. Cylinders with few faces look like boxes. Cylinders with
+   * many faces have smooth surfaces.
+   * 
+   * The first parameter, `radius`, is optional. If a `Number` is passed, as in
+   * `cylinder(20)`, it sets the radius of the cylinder’s base. By default,
+   * `radius` is 50.
+   * 
+   * The second parameter, `height`, is also optional. If a `Number` is passed,
+   * as in `cylinder(20, 30)`, it sets the cylinder’s height. By default,
+   * `height` is set to the cylinder’s `radius`.
+   * 
+   * The third parameter, `detailX`, is also optional. If a `Number` is passed,
+   * as in `cylinder(20, 30, 5)`, it sets the number of edges used to form the
+   * cylinder's top and bottom. Using more edges makes the top and bottom look
+   * more like circles. By default, `detailX` is 24.
+   * 
+   * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
+   * as in `cylinder(20, 30, 5, 2)`, it sets the number of triangle subdivisions
+   * to use along the y-axis, between cylinder's the top and bottom. All 3D
+   * shapes are made by connecting triangles to form their surfaces. By default,
+   * `detailY` is 1.
+   * 
+   * The fifth parameter, `bottomCap`, is also optional. If a `false` is passed,
+   * as in `cylinder(20, 30, 5, 2, false)` the cylinder’s bottom won’t be drawn.
+   * By default, `bottomCap` is `true`.
+   * 
+   * The sixth parameter, `topCap`, is also optional. If a `false` is passed, as
+   * in `cylinder(20, 30, 5, 2, false, false)` the cylinder’s top won’t be
+   * drawn. By default, `topCap` is `true`.
+   * 
+   * Note: `cylinder()` can only be used in WebGL mode.
+   * @param radius radius of the cylinder. Defaults to 50.
+   * @param height height of the cylinder. Defaults to the value of `radius`.
+   * @param detailX number of edges along the top and bottom. Defaults to 24.
+   * @param detailY number of triangle subdivisions along the y-axis. Defaults to 1.
+   * @param bottomCap whether to draw the cylinder's bottom. Defaults to `true`.
+   * @param topCap whether to draw the cylinder's top. Defaults to `true`.
+   */
+  cylinder(radius?: number, height?: number, detailX?: number, detailY?: number, bottomCap?: boolean, topCap?: boolean): void;
+
   /**
    * Scales the coordinate system.
    * 
@@ -6593,50 +6626,6 @@ declare class p5 {
   httpPost(path: string | Request, data: object | boolean, callback?: Function, errorCallback?: Function): Promise<any>;
   httpPost(path: string | Request, callback?: Function, errorCallback?: Function): Promise<any>;
 
-  /**
-   * Draws a cylinder.
-   * 
-   * A cylinder is a 3D shape with triangular faces that connect a flat bottom
-   * to a flat top. Cylinders with few faces look like boxes. Cylinders with
-   * many faces have smooth surfaces.
-   * 
-   * The first parameter, `radius`, is optional. If a `Number` is passed, as in
-   * `cylinder(20)`, it sets the radius of the cylinder’s base. By default,
-   * `radius` is 50.
-   * 
-   * The second parameter, `height`, is also optional. If a `Number` is passed,
-   * as in `cylinder(20, 30)`, it sets the cylinder’s height. By default,
-   * `height` is set to the cylinder’s `radius`.
-   * 
-   * The third parameter, `detailX`, is also optional. If a `Number` is passed,
-   * as in `cylinder(20, 30, 5)`, it sets the number of edges used to form the
-   * cylinder's top and bottom. Using more edges makes the top and bottom look
-   * more like circles. By default, `detailX` is 24.
-   * 
-   * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
-   * as in `cylinder(20, 30, 5, 2)`, it sets the number of triangle subdivisions
-   * to use along the y-axis, between cylinder's the top and bottom. All 3D
-   * shapes are made by connecting triangles to form their surfaces. By default,
-   * `detailY` is 1.
-   * 
-   * The fifth parameter, `bottomCap`, is also optional. If a `false` is passed,
-   * as in `cylinder(20, 30, 5, 2, false)` the cylinder’s bottom won’t be drawn.
-   * By default, `bottomCap` is `true`.
-   * 
-   * The sixth parameter, `topCap`, is also optional. If a `false` is passed, as
-   * in `cylinder(20, 30, 5, 2, false, false)` the cylinder’s top won’t be
-   * drawn. By default, `topCap` is `true`.
-   * 
-   * Note: `cylinder()` can only be used in WebGL mode.
-   * @param radius radius of the cylinder. Defaults to 50.
-   * @param height height of the cylinder. Defaults to the value of `radius`.
-   * @param detailX number of edges along the top and bottom. Defaults to 24.
-   * @param detailY number of triangle subdivisions along the y-axis. Defaults to 1.
-   * @param bottomCap whether to draw the cylinder's bottom. Defaults to `true`.
-   * @param topCap whether to draw the cylinder's top. Defaults to `true`.
-   */
-  cylinder(radius?: number, height?: number, detailX?: number, detailY?: number, bottomCap?: boolean, topCap?: boolean): void;
-
   /**
    * Returns the sketch's current
    * <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL" target="_blank">URL</a>
@@ -6970,104 +6959,6 @@ declare class p5 {
    */
   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.
-   */
-  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.
    * 
@@ -7107,7 +6998,7 @@ declare class p5 {
    * }
    * 
    * 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));
@@ -7118,7 +7009,6 @@ declare class p5 {
    * 
    * function draw() {
    * background(245, 245, 220);
-   * myShader.setUniform('time', millis() / 1000);
    * shader(myShader);
    * 
    * rectMode(CENTER);
@@ -7176,66 +7066,164 @@ declare class p5 {
    * torus(25, 10, 30, 30);
    * }``let fillShader;
    * 
-   * let vertSrc = `
-   * precision highp float;
-   * attribute vec3 aPosition;
-   * uniform mat4 uProjectionMatrix;
-   * uniform mat4 uModelViewMatrix;
-   * varying vec3 vPosition;
-   * void main() {
-   * vPosition = aPosition;
-   * gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
-   * }
-   * `;
+   * let vertSrc = `
+   * precision highp float;
+   * attribute vec3 aPosition;
+   * uniform mat4 uProjectionMatrix;
+   * uniform mat4 uModelViewMatrix;
+   * varying vec3 vPosition;
+   * void main() {
+   * vPosition = aPosition;
+   * gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
+   * }
+   * `;
+   * 
+   * let fragSrc = `
+   * precision highp float;
+   * uniform vec3 uLightPos;
+   * uniform vec3 uFillColor;
+   * varying vec3 vPosition;
+   * void main() {
+   * float brightness = dot(normalize(uLightPos), normalize(vPosition));
+   * brightness = clamp(brightness, 0.0, 1.0);
+   * vec3 color = uFillColor * brightness;
+   * gl_FragColor = vec4(color, 1.0);
+   * }
+   * `;
+   * 
+   * function setup() {
+   * createCanvas(200, 200, WEBGL);
+   * fillShader = createShader(vertSrc, fragSrc);
+   * shader(fillShader);
+   * noStroke();
+   * describe('A square affected by both fill color and lighting, with lights controlled by mouse.');
+   * }
+   * 
+   * function draw() {
+   * let lightPos = [(mouseX - width / 2) / width,
+   * (mouseY - height / 2) / height, 1.0];
+   * fillShader.setUniform('uLightPos', lightPos);
+   * let fillColor = [map(mouseX, 0, width, 0, 1),
+   * map(mouseY, 0, height, 0, 1), 0.5];
+   * fillShader.setUniform('uFillColor', fillColor);
+   * plane(width, height);
+   * }`<div>
+   * <p>If you want to apply shaders to strokes or images, use the following methods:
+   * 
+   * - <a href="#/p5/strokeShader">strokeShader()</a> : Applies a shader to the stroke (outline) of shapes, allowing independent control over the stroke rendering using shaders.
+   * 
+   * - <a href="#/p5/imageShader">imageShader()</a> : Applies a shader to images or textures, controlling how the shader modifies their appearance during rendering.
+   * 
+   * </p>
+   * </div>
+   * @param s <a href="#/p5.Shader">p5.Shader</a> object
+   * to apply.
+   */
+  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:
    * 
-   * let fragSrc = `
-   * precision highp float;
-   * uniform vec3 uLightPos;
-   * uniform vec3 uFillColor;
-   * varying vec3 vPosition;
-   * void main() {
-   * float brightness = dot(normalize(uLightPos), normalize(vPosition));
-   * brightness = clamp(brightness, 0.0, 1.0);
-   * vec3 color = uFillColor * brightness;
-   * gl_FragColor = vec4(color, 1.0);
+   * `function mouseDragged() {
+   * if (mouseX < 50) {
+   * // Code to run if the mouse is on the left.
    * }
-   * `;
    * 
-   * function setup() {
-   * createCanvas(200, 200, WEBGL);
-   * fillShader = createShader(vertSrc, fragSrc);
-   * shader(fillShader);
-   * noStroke();
-   * describe('A square affected by both fill color and lighting, with lights controlled by mouse.');
+   * 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 draw() {
-   * let lightPos = [(mouseX - width / 2) / width,
-   * (mouseY - height / 2) / height, 1.0];
-   * fillShader.setUniform('uLightPos', lightPos);
-   * let fillColor = [map(mouseX, 0, width, 0, 1),
-   * map(mouseY, 0, height, 0, 1), 0.5];
-   * fillShader.setUniform('uFillColor', fillColor);
-   * plane(width, height);
-   * }`<div>
-   * <p>If you want to apply shaders to strokes or images, use the following methods:
+   * `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.
    * 
-   * - <a href="#/p5/strokeShader">strokeShader()</a> : Applies a shader to the stroke (outline) of shapes, allowing independent control over the stroke rendering using shaders.
+   * 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.
    * 
-   * - <a href="#/p5/imageShader">imageShader()</a> : Applies a shader to images or textures, controlling how the shader modifies their appearance during rendering.
+   * `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:
    * 
-   * </p>
-   * </div>
-   * @param s <a href="#/p5.Shader">p5.Shader</a> object
-   * to apply.
+   * `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.
    */
-  shader(s: p5.Shader): void;
+  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.
@@ -7248,9 +7236,7 @@ declare class p5 {
    * The parameter, `model`, is the
    * <a href="#/p5.Geometry">p5.Geometry</a> object to draw.
    * <a href="#/p5.Geometry">p5.Geometry</a> objects can be built with
-   * <a href="#/p5/buildGeometry">buildGeometry()</a>, or
-   * <a href="#/p5/beginGeometry">beginGeometry()</a> and
-   * <a href="#/p5/endGeometry">endGeometry()</a>. They can also be loaded from
+   * <a href="#/p5/buildGeometry">buildGeometry()</a>. They can also be loaded from
    * a file with <a href="#/p5/loadGeometry">loadGeometry()</a>.
    * 
    * Note: `model()` can only be used in WebGL mode.
@@ -7358,11 +7344,11 @@ declare class p5 {
   saturation(color: p5.Color | number[] | string): number;
 
   /**
-   * Creates a dropdown menu `&lt;select&gt;&lt;/select&gt;` element.
+   * Creates a dropdown menu `<select></select>` element.
    * 
    * The parameter is optional. If `true` is passed, as in
    * `let mySelect = createSelect(true)`, then the dropdown will support
-   * multiple selections. If an existing `&lt;select&gt;&lt;/select&gt;` element
+   * multiple selections. If an existing `<select></select>` element
    * is passed, as in `let mySelect = createSelect(otherSelect)`, the existing
    * element will be wrapped in a new <a href="#/p5.Element">p5.Element</a>
    * object.
@@ -7391,20 +7377,6 @@ declare class p5 {
   createSelect(multiple?: boolean): p5.Element;
   createSelect(existing: object): p5.Element;
 
-  /**
-   * Converts 3D world coordinates to 2D screen coordinates.
-   * 
-   * This function takes a 3D vector and converts its coordinates
-   * from the world space to screen space. This can be useful for placing
-   * 2D elements in a 3D scene or for determining the screen position
-   * of 3D objects.
-   * @param x The x coordinate in world space. (Or a vector for all three coordinates.)
-   * @param y The y coordinate in world space.
-   * @param z The z coordinate in world space.
-   * @returns A vector containing the 2D screen coordinates.
-   */
-  worldToScreen(x: number | p5.Vector, y: number, z?: number): p5.Vector;
-
   /**
    * Draws a cone.
    * 
@@ -7443,6 +7415,20 @@ declare class p5 {
    */
   cone(radius?: number, height?: number, detailX?: number, detailY?: number, cap?: boolean): void;
 
+  /**
+   * Converts 3D world coordinates to 2D screen coordinates.
+   * 
+   * This function takes a 3D vector and converts its coordinates
+   * from the world space to screen space. This can be useful for placing
+   * 2D elements in a 3D scene or for determining the screen position
+   * of 3D objects.
+   * @param x The x coordinate in world space. (Or a vector for all three coordinates.)
+   * @param y The y coordinate in world space.
+   * @param z The z coordinate in world space.
+   * @returns A vector containing the 2D screen coordinates.
+   */
+  worldToScreen(x: number | p5.Vector, y: number, z?: number): p5.Vector;
+
   /**
    * Load a 3d model from an OBJ or STL string.
    * 
@@ -8244,6 +8230,25 @@ declare class p5 {
    */
   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.
@@ -8265,25 +8270,6 @@ declare class p5 {
    */
   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.
    * 
@@ -8357,8 +8343,8 @@ declare class p5 {
    * 
    * The parameter is optional. If a string is passed, as in
    * `let myRadio = createSelect('food')`, then each radio option will
-   * have `"food"` as its `name` parameter: `&lt;input name="food"&gt;&lt;/input&gt;`.
-   * If an existing `&lt;div&gt;&lt;/div&gt;` or `&lt;span&gt;&lt;/span&gt;`
+   * have `"food"` as its `name` parameter: `<input name="food"></input>`.
+   * If an existing `<div></div>` or `<span></span>`
    * element is passed, as in `let myRadio = createSelect(container)`, it will
    * become the radio button's parent element.
    * 
@@ -8374,8 +8360,8 @@ declare class p5 {
    * - `myRadio.selected(value)` selects the given option and returns it as an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement" target="_blank">`HTMLInputElement`</a>.
    * 
    * - `myRadio.disable(shouldDisable)` enables the entire radio button if `true` is passed and disables it if `false` is passed.
-   * @param containerElement container HTML Element, either a `&lt;div&gt;&lt;/div&gt;`
-   * or `&lt;span&gt;&lt;/span&gt;`.
+   * @param containerElement container HTML Element, either a `<div></div>`
+   * or `<span></span>`.
    * @returns new <a href="#/p5.Element">p5.Element</a> object.
    */
   createRadio(containerElement?: object): p5.Element;
@@ -8383,7 +8369,7 @@ declare class p5 {
   createRadio(): p5.Element;
 
   /**
-   * Creates a `&lt;video&gt;` element for simple audio/video playback.
+   * Creates a `<video>` element for simple audio/video playback.
    * 
    * `createVideo()` returns a new
    * <a href="#/p5.MediaElement">p5.MediaElement</a> object. Videos are shown by
@@ -8472,7 +8458,7 @@ declare class p5 {
   lerpColor(c1: p5.Color, c2: p5.Color, amt: number): p5.Color;
 
   /**
-   * Creates a hidden `&lt;audio&gt;` element for simple audio playback.
+   * Creates a hidden `<audio>` element for simple audio playback.
    * 
    * `createAudio()` returns a new
    * <a href="#/p5.MediaElement">p5.MediaElement</a> object.
@@ -8495,22 +8481,6 @@ declare class p5 {
    */
   createAudio(src?: string | string[], callback?: (video: p5.MediaElement<HTMLAudioElement>) => any): p5.MediaElement<HTMLAudioElement>;
 
-  /**
-   * Blends multiple colors to find a color between them.
-   * 
-   * The `amt` parameter specifies the amount to interpolate between the color
-   * stops which are colors at each `amt` value "location" with `amt` values
-   * that are between 2 color stops interpolating between them based on its relative
-   * distance to both.
-   * 
-   * The way that colors are interpolated depends on the current
-   * <a href="/reference/p5/colorMode/">colorMode()</a>.
-   * @param colors_stops color stops to interpolate from
-   * @param amt number to use to interpolate relative to color stops
-   * @returns interpolated color.
-   */
-  paletteLerp(colors_stops: [p5.Color | string | number | number[], number][], amt: number): p5.Color;
-
   /**
    * Draws a torus.
    * 
@@ -8542,6 +8512,22 @@ declare class p5 {
    */
   torus(radius?: number, tubeRadius?: number, detailX?: number, detailY?: number): void;
 
+  /**
+   * Blends multiple colors to find a color between them.
+   * 
+   * The `amt` parameter specifies the amount to interpolate between the color
+   * stops which are colors at each `amt` value "location" with `amt` values
+   * that are between 2 color stops interpolating between them based on its relative
+   * distance to both.
+   * 
+   * The way that colors are interpolated depends on the current
+   * <a href="/reference/p5/colorMode/">colorMode()</a>.
+   * @param colors_stops color stops to interpolate from
+   * @param amt number to use to interpolate relative to color stops
+   * @returns interpolated color.
+   */
+  paletteLerp(colors_stops: [p5.Color | string | number | number[], number][], amt: number): p5.Color;
+
   /**
    * Saves the file and closes the print stream.
    */
@@ -8630,7 +8616,7 @@ declare class p5 {
    * }
    * 
    * function material() {
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -8640,7 +8626,6 @@ declare class p5 {
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * lights();
    * noStroke();
    * fill('red');
@@ -8766,7 +8751,7 @@ declare class p5 {
   buildMaterialShader(hooks: object, scope?: object): p5.Shader;
 
   /**
-   * Creates a `&lt;video&gt;` element that "captures" the audio/video stream from
+   * Creates a `<video>` element that "captures" the audio/video stream from
    * the webcam and microphone.
    * 
    * `createCapture()` returns a new
@@ -8826,73 +8811,37 @@ declare class p5 {
    * The version of `stroke()` with three parameters interprets them as RGB, HSB,
    * or HSL colors, depending on the current `colorMode()`.
    * 
-   * The version of `stroke()` with four parameters interprets them as RGBA, HSBA,
-   * or HSLA colors, depending on the current `colorMode()`. The last parameter
-   * sets the alpha (transparency) value.
-   * @param v1 red value if color mode is RGB or hue value if color mode is HSB.
-   * @param v2 green value if color mode is RGB or saturation value if color mode is HSB.
-   * @param v3 blue value if color mode is RGB or brightness value if color mode is HSB.
-   * @param alpha alpha value, controls transparency (0 - transparent, 255 - opaque).
-   */
-  stroke(v1: number, v2: number, v3: number, alpha?: number): void;
-  stroke(value: string): void;
-  stroke(gray: number, alpha?: number): void;
-  stroke(values: number[]): void;
-  stroke(color: p5.Color): void;
-
-  /**
-   * Creates a color picker element.
-   * 
-   * The parameter, `value`, is optional. If a color string or
-   * <a href="#/p5.Color">p5.Color</a> object is passed, it will set the default
-   * color.
-   * 
-   * Color pickers extend the <a href="#/p5.Element">p5.Element</a> class with a
-   * couple of helpful methods for managing colors:
-   * 
-   * - `myPicker.value()` returns the current color as a hex string in the format `'#rrggbb'`.
-   * 
-   * - `myPicker.color()` returns the current color as a <a href="#/p5.Color">p5.Color</a> object.
-   * @param value default color as a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color" target="_blank">CSS color string</a>.
-   * @returns new <a href="#/p5.Element">p5.Element</a> object.
-   */
-  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.
+   * The version of `stroke()` with four parameters interprets them as RGBA, HSBA,
+   * or HSLA colors, depending on the current `colorMode()`. The last parameter
+   * sets the alpha (transparency) value.
+   * @param v1 red value if color mode is RGB or hue value if color mode is HSB.
+   * @param v2 green value if color mode is RGB or saturation value if color mode is HSB.
+   * @param v3 blue value if color mode is RGB or brightness value if color mode is HSB.
+   * @param alpha alpha value, controls transparency (0 - transparent, 255 - opaque).
    */
-  save(objectOrFilename?: object | string, filename?: string, options?: boolean | string): void;
+  stroke(v1: number, v2: number, v3: number, alpha?: number): void;
+  stroke(value: string): void;
+  stroke(gray: number, alpha?: number): void;
+  stroke(values: number[]): void;
+  stroke(color: p5.Color): void;
+
+  /**
+   * Creates a color picker element.
+   * 
+   * The parameter, `value`, is optional. If a color string or
+   * <a href="#/p5.Color">p5.Color</a> object is passed, it will set the default
+   * color.
+   * 
+   * Color pickers extend the <a href="#/p5.Element">p5.Element</a> class with a
+   * couple of helpful methods for managing colors:
+   * 
+   * - `myPicker.value()` returns the current color as a hex string in the format `'#rrggbb'`.
+   * 
+   * - `myPicker.color()` returns the current color as a <a href="#/p5.Color">p5.Color</a> object.
+   * @param value default color as a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color" target="_blank">CSS color string</a>.
+   * @returns new <a href="#/p5.Element">p5.Element</a> object.
+   */
+  createColorPicker(value?: string | p5.Color): p5.Element;
 
   /**
    * Loads a new shader from a file that can change how fills are drawn. Pass the resulting
@@ -8911,7 +8860,6 @@ declare class p5 {
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * lights();
    * noStroke();
    * fill('red');
@@ -8921,7 +8869,7 @@ declare class p5 {
    * 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);
@@ -8941,6 +8889,42 @@ declare class p5 {
    */
   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.
    * By default, this is 3; the other possible parameter is 2. This
@@ -9023,6 +9007,19 @@ declare class p5 {
    */
   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.
    * 
@@ -9057,19 +9054,6 @@ declare class p5 {
    */
   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>.
    * 
@@ -9080,7 +9064,7 @@ declare class p5 {
   noErase(): void;
 
   /**
-   * Creates a text `&lt;input&gt;&lt;/input&gt;` element.
+   * Creates a text `<input></input>` element.
    * 
    * Call `myInput.size()` to set the length of the text box.
    * 
@@ -9130,7 +9114,7 @@ declare class p5 {
    * }
    * 
    * function material() {
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    * 20. * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -9140,7 +9124,6 @@ declare class p5 {
    * 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
@@ -9429,7 +9412,7 @@ declare class p5 {
   pop(): void;
 
   /**
-   * Creates an `&lt;input&gt;&lt;/input&gt;` element of type `'file'`.
+   * Creates an `<input></input>` element of type `'file'`.
    * 
    * `createFileInput()` allows users to select local files for use in a sketch.
    * It returns a <a href="#/p5.File">p5.File</a> object.
@@ -9465,7 +9448,6 @@ declare class p5 {
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * lights();
    * noStroke();
    * fill('red');
@@ -9475,7 +9457,7 @@ declare class p5 {
    * 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);
@@ -9606,7 +9588,7 @@ declare class p5 {
    * }
    * 
    * function material() {
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -9616,7 +9598,6 @@ declare class p5 {
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * noStroke();
    * fill('red');
    * circle(0, 0, 50);
@@ -9730,7 +9711,6 @@ declare class p5 {
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * lights();
    * noStroke();
    * fill('red');
@@ -9740,7 +9720,7 @@ declare class p5 {
    * 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);
@@ -10025,7 +10005,7 @@ declare class p5 {
    * }
    * 
    * 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
@@ -10041,7 +10021,6 @@ declare class p5 {
    * function draw() {
    * background(255);
    * strokeShader(myShader);
-   * myShader.setUniform('time', millis());
    * strokeWeight(10);
    * beginShape();
    * for (let i = 0; i <= 50; i++) {
@@ -10132,6 +10111,58 @@ declare class p5 {
   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.
    * 
@@ -10186,58 +10217,6 @@ declare class p5 {
    */
   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.
    * 
@@ -10282,6 +10261,17 @@ declare class p5 {
    */
   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.
    * 
@@ -10319,17 +10309,6 @@ declare class p5 {
   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.
    * 
@@ -10413,6 +10392,20 @@ declare class p5 {
   vertex(x: number, y: number, u?: number, v?: number): void;
   vertex(x: number, y: number, z: number, u?: number, v?: number): void;
 
+  /**
+   * Sets the number of segments used to draw spline curves in WebGL mode.
+   * 
+   * In WebGL mode, smooth shapes are drawn using many flat segments. Adding
+   * more flat segments makes shapes appear smoother.
+   * 
+   * The parameter, `detail`, is the density of segments to use while drawing a
+   * spline curve.
+   * 
+   * Note: `curveDetail()` has no effect in 2D mode.
+   * @param resolution number of segments to use. Default is 1/4
+   */
+  curveDetail(resolution: number): void;
+
   /**
    * Sets the frustum of the current camera in a 3D sketch.
    * 
@@ -10452,20 +10445,6 @@ declare class p5 {
    */
   frustum(left?: number, right?: number, bottom?: number, top?: number, near?: number, far?: number): void;
 
-  /**
-   * Sets the number of segments used to draw spline curves in WebGL mode.
-   * 
-   * In WebGL mode, smooth shapes are drawn using many flat segments. Adding
-   * more flat segments makes shapes appear smoother.
-   * 
-   * The parameter, `detail`, is the density of segments to use while drawing a
-   * spline curve.
-   * 
-   * Note: `curveDetail()` has no effect in 2D mode.
-   * @param resolution number of segments to use. Default is 1/4
-   */
-  curveDetail(resolution: number): void;
-
   /**
    * Creates a new <a href="#/p5.Camera">p5.Camera</a> object.
    * 
@@ -12218,7 +12197,7 @@ const EXCLUDE: typeof __EXCLUDE;
    * Removes the graphics buffer from the web page.
    * 
    * Calling `myGraphics.remove()` removes the graphics buffer's
-   * `&lt;canvas&gt;` element from the web page. The graphics buffer also uses
+   * `<canvas>` element from the web page. The graphics buffer also uses
    * a bit of memory on the CPU that can be freed like so:
    * 
    * `// Remove the graphics buffer from the web page.
@@ -12682,7 +12661,7 @@ const EXCLUDE: typeof __EXCLUDE;
    * (<a href="https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction" target="_blank">XML</a>)
    * is a standard format for sending data between applications. Like HTML, the
    * XML format is based on tags and attributes, as in
-   * `&lt;time units="s"&gt;1234&lt;/time&gt;`.
+   * `<time units="s">1234</time>`.
    * 
    * Note: Use <a href="#/p5/loadXML">loadXML()</a> to load external XML files.
    */
@@ -12698,7 +12677,7 @@ const EXCLUDE: typeof __EXCLUDE;
    * Returns the element's name as a `String`.
    * 
    * An XML element's name is given by its tag. For example, the element
-   * `&lt;language&gt;JavaScript&lt;/language&gt;` has the name `language`.
+   * `<language>JavaScript</language>` has the name `language`.
    * @returns name of the element.
    */
   getName(): string;
@@ -12707,11 +12686,11 @@ const EXCLUDE: typeof __EXCLUDE;
    * Sets the element's tag name.
    * 
    * An XML element's name is given by its tag. For example, the element
-   * `&lt;language&gt;JavaScript&lt;/language&gt;` has the name `language`.
+   * `<language>JavaScript</language>` has the name `language`.
    * 
    * The parameter, `name`, is the element's new name as a string. For example,
    * calling `myXML.setName('planet')` will make the element's new tag name
-   * `&lt;planet&gt;&lt;/planet&gt;`.
+   * `<planet></planet>`.
    * @param name new tag name of the element.
    */
   setName(name: string): void;
@@ -12735,7 +12714,7 @@ const EXCLUDE: typeof __EXCLUDE;
    * 
    * The parameter, `name`, is optional. If a string is passed, as in
    * `myXML.getChildren('cat')`, then the method will only return child elements
-   * with the tag `&lt;cat&gt;`.
+   * with the tag `<cat>`.
    * @param name name of the elements to return.
    * @returns child elements.
    */
@@ -12747,7 +12726,7 @@ const EXCLUDE: typeof __EXCLUDE;
    * 
    * The parameter, `name`, is optional. If a string is passed, as in
    * `myXML.getChild('cat')`, then the first child element with the tag
-   * `&lt;cat&gt;` will be returned. If a number is passed, as in
+   * `<cat>` will be returned. If a number is passed, as in
    * `myXML.getChild(1)`, then the child element at that index will be returned.
    * @param name element name or index.
    * @returns child element.
@@ -12770,7 +12749,7 @@ const EXCLUDE: typeof __EXCLUDE;
    * 
    * The parameter, `name`, is the child element to remove. If a string is
    * passed, as in `myXML.removeChild('cat')`, then the first child element
-   * with the tag `&lt;cat&gt;` will be removed. If a number is passed, as in
+   * with the tag `<cat>` will be removed. If a number is passed, as in
    * `myXML.removeChild(1)`, then the child element at that index will be
    * removed.
    * @param name name or index of the child element to remove.
@@ -13020,23 +12999,27 @@ const EXCLUDE: typeof __EXCLUDE;
    * plane(width, height); // Draw a plane with the shader applied
    * }`In addition to calling hooks, you can create uniforms, which are special variables
    * used to pass data from p5.js into the shader. They can be created by calling `uniform` + the
-   * type of the data, such as `uniformFloat` for a number of `uniformVector2` for a two-component vector.
+   * type of the data, such as `uniformFloat` for a number or `uniformVector2` for a two-component vector.
    * They take in a function that returns the data for the variable. You can then reference these
    * variables in your hooks, and their values will update every time you apply
    * the shader with the result of your function.
    * 
+   * Move the mouse over this sketch to increase the moveCounter which will be passed to the shader as a uniform.
+   * 
    * `let myShader;
+   * //count of frames in which mouse has been moved
+   * let moveCounter = 0;
    * 
    * function setup() {
    * createCanvas(200, 200, WEBGL);
    * myShader = baseMaterialShader().modify(() => {
-   * // Get the current time from p5.js
-   * let t = uniformFloat(() => millis());
+   * // Get the move counter from our sketch
+   * let count = uniformFloat(() => moveCounter);
    * 
    * getPixelInputs((inputs) => {
    * inputs.color = [
    * inputs.texCoord,
-   * sin(t * 0.01) / 2 + 0.5,
+   * sin(count/100) / 2 + 0.5,
    * 1,
    * ];
    * return inputs;
@@ -13044,6 +13027,10 @@ const EXCLUDE: typeof __EXCLUDE;
    * });
    * }
    * 
+   * function mouseDragged(){
+   * moveCounter += 1;
+   * }
+   * 
    * function draw() {
    * background(255);
    * noStroke(255);
@@ -14640,9 +14627,9 @@ const EXCLUDE: typeof __EXCLUDE;
   /**
    * Attaches the element to a parent element.
    * 
-   * For example, a `&lt;div&gt;&lt;/div&gt;` element may be used as a box to
+   * For example, a `<div></div>` element may be used as a box to
    * hold two pieces of text, a header and a paragraph. The
-   * `&lt;div&gt;&lt;/div&gt;` is the parent element of both the header and
+   * `<div></div>` is the parent element of both the header and
    * paragraph.
    * 
    * The parameter `parent` can have one of three types. `parent` can be a