p5 2.2.2 → 2.2.3-rc.1

package/types/global.d.ts

@@ -48,6 +48,12 @@ deviceOrientation: typeof P5.deviceOrientation;
  */
 accelerationX: typeof P5.accelerationX;
 
+/**
+ * The system variable accelerationY always contains the acceleration of the
+ * device along the y axis. Value is represented as meters per second squared.
+ */
+accelerationY: typeof P5.accelerationY;
+
 /**
  * A `Number` system variable that tracks the mouse's horizontal movement.
  * 
@@ -61,12 +67,6 @@ accelerationX: typeof P5.accelerationX;
  */
 movedX: typeof P5.movedX;
 
-/**
- * The system variable accelerationY always contains the acceleration of the
- * device along the y axis. Value is represented as meters per second squared.
- */
-accelerationY: typeof P5.accelerationY;
-
 /**
  * The system variable accelerationZ always contains the acceleration of the
  * device along the z axis. Value is represented as meters per second squared.
@@ -217,18 +217,6 @@ rotationZ: typeof P5.rotationZ;
  */
 pRotationX: typeof P5.pRotationX;
 
-/**
- * A `Number` system variable that tracks the mouse's vertical position.
- * 
- * `mouseY` keeps track of the mouse's position relative to the
- * top-left corner of the canvas. For example, if the mouse is 50 pixels from
- * the top edge of the canvas, then `mouseY` will be 50.
- * 
- * If touch is used instead of the mouse, then `mouseY` will hold the
- * y-coordinate of the most recent touch point.
- */
-mouseY: typeof P5.mouseY;
-
 /**
  * The system variable pRotationY always contains the rotation of the
  * device along the y axis in the frame previous to the current frame.
@@ -241,6 +229,18 @@ mouseY: typeof P5.mouseY;
  */
 pRotationY: typeof P5.pRotationY;
 
+/**
+ * A `Number` system variable that tracks the mouse's vertical position.
+ * 
+ * `mouseY` keeps track of the mouse's position relative to the
+ * top-left corner of the canvas. For example, if the mouse is 50 pixels from
+ * the top edge of the canvas, then `mouseY` will be 50.
+ * 
+ * If touch is used instead of the mouse, then `mouseY` will hold the
+ * y-coordinate of the most recent touch point.
+ */
+mouseY: typeof P5.mouseY;
+
 /**
  * The system variable pRotationZ always contains the rotation of the
  * device along the z axis in the frame previous to the current frame.
@@ -945,17 +945,6 @@ TWO_PI: typeof P5.TWO_PI;
 
 DEG_TO_RAD: typeof P5.DEG_TO_RAD;
 
-/**
- * Turns off the parts of the Friendly Error System (FES) that impact performance.
- * 
- * The <a href="https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md" target="_blank">FES</a>
- * can cause sketches to draw slowly because it does extra work behind the
- * scenes. For example, the FES checks the arguments passed to functions,
- * which takes time to process. Disabling the FES can significantly improve
- * performance by turning off these checks.
- */
-disableFriendlyErrors: typeof P5.disableFriendlyErrors;
-
 RAD_TO_DEG: typeof P5.RAD_TO_DEG;
 
 CORNER: typeof P5.CORNER;
@@ -998,6 +987,17 @@ LINE_LOOP: typeof P5.LINE_LOOP;
 
 TRIANGLES: typeof P5.TRIANGLES;
 
+/**
+ * Turns off the parts of the Friendly Error System (FES) that impact performance.
+ * 
+ * The <a href="https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md" target="_blank">FES</a>
+ * can cause sketches to draw slowly because it does extra work behind the
+ * scenes. For example, the FES checks the arguments passed to functions,
+ * which takes time to process. Disabling the FES can significantly improve
+ * performance by turning off these checks.
+ */
+disableFriendlyErrors: typeof P5.disableFriendlyErrors;
+
 TRIANGLE_FAN: typeof P5.TRIANGLE_FAN;
 
 TRIANGLE_STRIP: typeof P5.TRIANGLE_STRIP;
@@ -1883,6 +1883,65 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   beginClip(options?: { invert?: boolean }): void;
 
+  /**
+   * Creates a light that shines from all directions.
+   * 
+   * Ambient light does not come from one direction. Instead, 3D shapes are
+   * lit evenly from all sides. Ambient lights are almost always used in
+   * combination with other types of lights.
+   * 
+   * There are three ways to call `ambientLight()` with optional parameters to
+   * set the light’s color.
+   * 
+   * The first way to call `ambientLight()` has two parameters, `gray` and
+   * `alpha`. `alpha` is optional. Grayscale and alpha values between 0 and 255
+   * can be passed to set the ambient light’s color, as in `ambientLight(50)` or
+   * `ambientLight(50, 30)`.
+   * 
+   * The second way to call `ambientLight()` has one parameter, color. A
+   * <a href="#/p5.Color">p5.Color</a> object, an array of color values, or a
+   * CSS color string, as in `ambientLight('magenta')`, can be passed to set the
+   * ambient light’s color.
+   * 
+   * The third way to call `ambientLight()` has four parameters, `v1`, `v2`,
+   * `v3`, and `alpha`. `alpha` is optional. RGBA, HSBA, or HSLA values can be
+   * passed to set the ambient light’s colors, as in `ambientLight(255, 0, 0)`
+   * or `ambientLight(255, 0, 0, 30)`. Color values will be interpreted using
+   * the current <a href="#/p5/colorMode">colorMode()</a>.
+   * @param v1 red or hue value in the current
+   * <a href="#/p5/colorMode">colorMode()</a>.
+   * @param v2 green or saturation value in the current
+   * <a href="#/p5/colorMode">colorMode()</a>.
+   * @param v3 blue, brightness, or lightness value in the current
+   * <a href="#/p5/colorMode">colorMode()</a>.
+   * @param alpha alpha (transparency) value in the current
+   * <a href="#/p5/colorMode">colorMode()</a>.
+   */
+  ambientLight(v1: number, v2: number, v3: number, alpha?: number): void;
+  ambientLight(gray: number, alpha?: number): void;
+  ambientLight(value: string): void;
+  ambientLight(values: number[]): void;
+  ambientLight(color: P5.Color): void;
+
+  /**
+   * Searches the page for all elements that matches the given
+   * <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors" target="_blank">CSS selector string</a>.
+   * 
+   * The selector string can be an ID, class, tag name, or a combination.
+   * `selectAll()` returns an array of <a href="#/p5.Element">p5.Element</a>
+   * objects if it finds any matches and an empty array if none are found.
+   * 
+   * The second parameter, `container`, is optional. It specifies a container to
+   * search within. `container` can be CSS selector string, a
+   * <a href="#/p5.Element">p5.Element</a> object, or an
+   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> object.
+   * @param selectors CSS selector string of element to search for.
+   * @param container CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
+   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.
+   * @returns array of <a href="#/p5.Element">p5.Element</a>s containing any elements found.
+   */
+  selectAll(selectors: string, container?: string | P5.Element | HTMLElement): P5.Element[];
+
   /**
    * A shader function that performs smooth Hermite interpolation between `0.0`
    * and `1.0`.
@@ -1955,65 +2014,6 @@ EXCLUDE: typeof P5.EXCLUDE;
 
   getCameraInputs(callback: Function): void;
 
-  /**
-   * Creates a light that shines from all directions.
-   * 
-   * Ambient light does not come from one direction. Instead, 3D shapes are
-   * lit evenly from all sides. Ambient lights are almost always used in
-   * combination with other types of lights.
-   * 
-   * There are three ways to call `ambientLight()` with optional parameters to
-   * set the light’s color.
-   * 
-   * The first way to call `ambientLight()` has two parameters, `gray` and
-   * `alpha`. `alpha` is optional. Grayscale and alpha values between 0 and 255
-   * can be passed to set the ambient light’s color, as in `ambientLight(50)` or
-   * `ambientLight(50, 30)`.
-   * 
-   * The second way to call `ambientLight()` has one parameter, color. A
-   * <a href="#/p5.Color">p5.Color</a> object, an array of color values, or a
-   * CSS color string, as in `ambientLight('magenta')`, can be passed to set the
-   * ambient light’s color.
-   * 
-   * The third way to call `ambientLight()` has four parameters, `v1`, `v2`,
-   * `v3`, and `alpha`. `alpha` is optional. RGBA, HSBA, or HSLA values can be
-   * passed to set the ambient light’s colors, as in `ambientLight(255, 0, 0)`
-   * or `ambientLight(255, 0, 0, 30)`. Color values will be interpreted using
-   * the current <a href="#/p5/colorMode">colorMode()</a>.
-   * @param v1 red or hue value in the current
-   * <a href="#/p5/colorMode">colorMode()</a>.
-   * @param v2 green or saturation value in the current
-   * <a href="#/p5/colorMode">colorMode()</a>.
-   * @param v3 blue, brightness, or lightness value in the current
-   * <a href="#/p5/colorMode">colorMode()</a>.
-   * @param alpha alpha (transparency) value in the current
-   * <a href="#/p5/colorMode">colorMode()</a>.
-   */
-  ambientLight(v1: number, v2: number, v3: number, alpha?: number): void;
-  ambientLight(gray: number, alpha?: number): void;
-  ambientLight(value: string): void;
-  ambientLight(values: number[]): void;
-  ambientLight(color: P5.Color): void;
-
-  /**
-   * Searches the page for all elements that matches the given
-   * <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors" target="_blank">CSS selector string</a>.
-   * 
-   * The selector string can be an ID, class, tag name, or a combination.
-   * `selectAll()` returns an array of <a href="#/p5.Element">p5.Element</a>
-   * objects if it finds any matches and an empty array if none are found.
-   * 
-   * The second parameter, `container`, is optional. It specifies a container to
-   * search within. `container` can be CSS selector string, a
-   * <a href="#/p5.Element">p5.Element</a> object, or an
-   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> object.
-   * @param selectors CSS selector string of element to search for.
-   * @param container CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
-   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.
-   * @returns array of <a href="#/p5.Element">p5.Element</a>s containing any elements found.
-   */
-  selectAll(selectors: string, container?: string | P5.Element | HTMLElement): P5.Element[];
-
   /**
    * Draws a Bézier curve.
    * 
@@ -3947,7 +3947,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];
    * });
@@ -4400,55 +4400,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   rotateX(angle: number): void;
 
-  /**
-   * A function that's called once when the sketch begins running.
-   * 
-   * Declaring the function `setup()` sets a code block to run once
-   * automatically when the sketch starts running. It's used to perform
-   * setup tasks such as creating the canvas and initializing variables:
-   * 
-   * `function setup() {
-   * // Code to run once at the start of the sketch.
-   * }`Code placed in `setup()` will run once before code placed in
-   * <a href="#/p5/draw">draw()</a> begins looping.
-   * If `setup()` is declared `async` (e.g. `async function setup()`),
-   * execution pauses at each `await` until its promise resolves.
-   * For example, `font = await loadFont(...)` waits for the font asset
-   * to load because `loadFont()` function returns a promise, and the await
-   * keyword means the program will wait for the promise to resolve.
-   * This ensures that all assets are fully loaded before the sketch continues.
-   * 
-   * loading assets.
-   * 
-   * Note: `setup()` doesn’t have to be declared, but it’s common practice to do so.
-   */
-  setup(): void;
-
-  /**
-   * A function that's called repeatedly while the sketch runs.
-   * 
-   * Declaring the function `draw()` sets a code block to run repeatedly
-   * once the sketch starts. It’s used to create animations and respond to
-   * user inputs:
-   * 
-   * `function draw() {
-   * // Code to run repeatedly.
-   * }`This is often called the "draw loop" because p5.js calls the code in
-   * `draw()` in a loop behind the scenes. By default, `draw()` tries to run
-   * 60 times per second. The actual rate depends on many factors. The
-   * drawing rate, called the "frame rate", can be controlled by calling
-   * <a href="#/p5/frameRate">frameRate()</a>. The number of times `draw()`
-   * has run is stored in the system variable
-   * <a href="#/p5/frameCount">frameCount()</a>.
-   * 
-   * Code placed within `draw()` begins looping after
-   * <a href="#/p5/setup">setup()</a> runs. `draw()` will run until the user
-   * closes the sketch. `draw()` can be stopped by calling the
-   * <a href="#/p5/noLoop">noLoop()</a> function. `draw()` can be resumed by
-   * calling the <a href="#/p5/loop">loop()</a> function.
-   */
-  draw(): void;
-
   /**
    * Re-maps a number from one range to another.
    * 
@@ -4869,35 +4820,84 @@ EXCLUDE: typeof P5.EXCLUDE;
   line(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number): void;
 
   /**
-   * Clears the pixels on the canvas.
-   * 
-   * `clear()` makes every pixel 100% transparent. Calling `clear()` doesn't
-   * clear objects created by `createX()` functions such as
-   * <a href="#/p5/createGraphics">createGraphics()</a>,
-   * <a href="#/p5/createVideo">createVideo()</a>, and
-   * <a href="#/p5/createImg">createImg()</a>. These objects will remain
-   * unchanged after calling `clear()` and can be redrawn.
-   * 
-   * In WebGL mode, this function can clear the screen to a specific color. It
-   * interprets four numeric parameters as normalized RGBA color values. It also
-   * clears the depth buffer. If you are not using the WebGL renderer, these
-   * parameters will have no effect.
-   * @param r normalized red value.
-   * @param g normalized green value.
-   * @param b normalized blue value.
-   * @param a normalized alpha value.
-   */
-  clear(r?: number, g?: number, b?: number, a?: number): void;
-  clear(): void;
-
-  /**
-   * Draws a box (rectangular prism).
+   * A function that's called once when the sketch begins running.
    * 
-   * A box is a 3D shape with six faces. Each face makes a 90˚ with four
-   * neighboring faces.
+   * Declaring the function `setup()` sets a code block to run once
+   * automatically when the sketch starts running. It's used to perform
+   * setup tasks such as creating the canvas and initializing variables:
    * 
-   * 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.
+   * `function setup() {
+   * // Code to run once at the start of the sketch.
+   * }`Code placed in `setup()` will run once before code placed in
+   * <a href="#/p5/draw">draw()</a> begins looping.
+   * If `setup()` is declared `async` (e.g. `async function setup()`),
+   * execution pauses at each `await` until its promise resolves.
+   * For example, `font = await loadFont(...)` waits for the font asset
+   * to load because `loadFont()` function returns a promise, and the await
+   * keyword means the program will wait for the promise to resolve.
+   * This ensures that all assets are fully loaded before the sketch continues.
+   * 
+   * loading assets.
+   * 
+   * Note: `setup()` doesn’t have to be declared, but it’s common practice to do so.
+   */
+  setup(): void;
+
+  /**
+   * A function that's called repeatedly while the sketch runs.
+   * 
+   * Declaring the function `draw()` sets a code block to run repeatedly
+   * once the sketch starts. It’s used to create animations and respond to
+   * user inputs:
+   * 
+   * `function draw() {
+   * // Code to run repeatedly.
+   * }`This is often called the "draw loop" because p5.js calls the code in
+   * `draw()` in a loop behind the scenes. By default, `draw()` tries to run
+   * 60 times per second. The actual rate depends on many factors. The
+   * drawing rate, called the "frame rate", can be controlled by calling
+   * <a href="#/p5/frameRate">frameRate()</a>. The number of times `draw()`
+   * has run is stored in the system variable
+   * <a href="#/p5/frameCount">frameCount()</a>.
+   * 
+   * Code placed within `draw()` begins looping after
+   * <a href="#/p5/setup">setup()</a> runs. `draw()` will run until the user
+   * closes the sketch. `draw()` can be stopped by calling the
+   * <a href="#/p5/noLoop">noLoop()</a> function. `draw()` can be resumed by
+   * calling the <a href="#/p5/loop">loop()</a> function.
+   */
+  draw(): void;
+
+  /**
+   * Clears the pixels on the canvas.
+   * 
+   * `clear()` makes every pixel 100% transparent. Calling `clear()` doesn't
+   * clear objects created by `createX()` functions such as
+   * <a href="#/p5/createGraphics">createGraphics()</a>,
+   * <a href="#/p5/createVideo">createVideo()</a>, and
+   * <a href="#/p5/createImg">createImg()</a>. These objects will remain
+   * unchanged after calling `clear()` and can be redrawn.
+   * 
+   * In WebGL mode, this function can clear the screen to a specific color. It
+   * interprets four numeric parameters as normalized RGBA color values. It also
+   * clears the depth buffer. If you are not using the WebGL renderer, these
+   * parameters will have no effect.
+   * @param r normalized red value.
+   * @param g normalized green value.
+   * @param b normalized blue value.
+   * @param a normalized alpha value.
+   */
+  clear(r?: number, g?: number, b?: number, a?: number): void;
+  clear(): void;
+
+  /**
+   * Draws a box (rectangular prism).
+   * 
+   * A box is a 3D shape with six faces. Each face makes a 90˚ with four
+   * neighboring faces.
+   * 
+   * The first parameter, `width`, is optional. If a `Number` is passed, as in
+   * `box(20)`, it sets the box’s width and height. By default, `width` is 50.
    * 
    * The second parameter, `height`, is also optional. If a `Number` is passed,
    * as in `box(20, 30)`, it sets the box’s height. By default, `height` is set
@@ -5184,17 +5184,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   shuffle<T>(array: T[], modify?: boolean): T[];
 
-  /**
-   * 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>;
-
   /**
    * Turns off <a href="#/p5/debugMode">debugMode()</a> in a 3D sketch.
    */
@@ -5355,7 +5344,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 +5354,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 +5365,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 +5377,7 @@ EXCLUDE: typeof P5.EXCLUDE;
    * }
    * 
    * function noiseShaderCallback() {
-   * let time = uniformFloat();
+   * let time = millis();
    * filterColor.begin();
    * let coord = filterColor.texCoord;
    * 
@@ -5406,7 +5394,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>
@@ -5424,6 +5411,17 @@ EXCLUDE: typeof P5.EXCLUDE;
   buildFilterShader(callback: Function, scope?: object): P5.Shader;
   buildFilterShader(hooks: object, scope?: object): P5.Shader;
 
+  /**
+   * 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 `&lt;input&gt;&lt;/input&gt;` element.
    * 
@@ -5543,22 +5541,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   rotateZ(angle: number): void;
 
-  /**
-   * Loads a file at the given path as a Blob, then returns the resulting data or
-   * passes it to a success callback function, if provided. On load, this function
-   * returns a `Promise` that resolves to a Blob containing the file data.
-   * @param path The path or Request object pointing to the file
-   * you want to load.
-   * @param successCallback Optional. A function to be called if the
-   * file successfully loads, receiving the
-   * resulting Blob as its only argument.
-   * @param errorCallback Optional. A function to be called if an
-   * error occurs during loading; receives the
-   * error object as its only argument.
-   * @returns A promise that resolves with the loaded Blob.
-   */
-  loadBlob(path: string | Request, successCallback?: Function, errorCallback?: Function): Promise<Blob>;
-
   /**
    * Calculates exponential expressions such as <var>2<sup>3</sup></var>.
    * 
@@ -5587,6 +5569,22 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   fullscreen(val?: boolean): boolean;
 
+  /**
+   * Loads a file at the given path as a Blob, then returns the resulting data or
+   * passes it to a success callback function, if provided. On load, this function
+   * returns a `Promise` that resolves to a Blob containing the file data.
+   * @param path The path or Request object pointing to the file
+   * you want to load.
+   * @param successCallback Optional. A function to be called if the
+   * file successfully loads, receiving the
+   * resulting Blob as its only argument.
+   * @param errorCallback Optional. A function to be called if an
+   * error occurs during loading; receives the
+   * error object as its only argument.
+   * @returns A promise that resolves with the loaded Blob.
+   */
+  loadBlob(path: string | Request, successCallback?: Function, errorCallback?: Function): Promise<Blob>;
+
   /**
    * Creates a light that shines from a point in all directions.
    * 
@@ -5864,26 +5862,20 @@ EXCLUDE: typeof P5.EXCLUDE;
   splinePoint(a: number, b: number, c: number, d: number, t: number): number;
 
   /**
-   * Method for executing an HTTP GET request. If data type is not specified,
-   * it will default to `'text'`. This is equivalent to
-   * calling <code>httpDo(path, 'GET')</code>. The 'binary' datatype will return
-   * a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
-   * which can be used to initialize typed arrays (such as Uint8Array).
-   * @param path name of the file or url to load
-   * @param datatype "json", "jsonp", "binary", "arrayBuffer",
-   * "xml", or "text"
-   * @param callback function to be executed after
-   * <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
-   * as first argument
-   * @param errorCallback function to be executed if
-   * there is an error, response is passed
-   * in as first argument
-   * @returns A promise that resolves with the data when the operation
-   * completes successfully or rejects with the error after
-   * one occurs.
+   * Creates an ambient light from an image.
+   * 
+   * `imageLight()` simulates a light shining from all directions. The effect is
+   * like placing the sketch at the center of a giant sphere that uses the image
+   * as its texture. The image's diffuse light will be affected by
+   * <a href="#/p5/fill">fill()</a> and the specular reflections will be
+   * affected by <a href="#/p5/specularMaterial">specularMaterial()</a> and
+   * <a href="#/p5/shininess">shininess()</a>.
+   * 
+   * The parameter, `img`, is the <a href="#/p5.Image">p5.Image</a> object to
+   * use as the light source.
+   * @param img image to use as the light source.
    */
-  httpGet(path: string | Request, datatype?: string, callback?: Function, errorCallback?: Function): Promise<any>;
-  httpGet(path: string | Request, callback: Function, errorCallback?: Function): Promise<any>;
+  imageLight(img: P5.Image): void;
 
   /**
    * Sets the pixel density or returns the current density.
@@ -5906,20 +5898,26 @@ EXCLUDE: typeof P5.EXCLUDE;
   pixelDensity(): number;
 
   /**
-   * Creates an ambient light from an image.
-   * 
-   * `imageLight()` simulates a light shining from all directions. The effect is
-   * like placing the sketch at the center of a giant sphere that uses the image
-   * as its texture. The image's diffuse light will be affected by
-   * <a href="#/p5/fill">fill()</a> and the specular reflections will be
-   * affected by <a href="#/p5/specularMaterial">specularMaterial()</a> and
-   * <a href="#/p5/shininess">shininess()</a>.
-   * 
-   * The parameter, `img`, is the <a href="#/p5.Image">p5.Image</a> object to
-   * use as the light source.
-   * @param img image to use as the light source.
+   * Method for executing an HTTP GET request. If data type is not specified,
+   * it will default to `'text'`. This is equivalent to
+   * calling <code>httpDo(path, 'GET')</code>. The 'binary' datatype will return
+   * a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
+   * which can be used to initialize typed arrays (such as Uint8Array).
+   * @param path name of the file or url to load
+   * @param datatype "json", "jsonp", "binary", "arrayBuffer",
+   * "xml", or "text"
+   * @param callback function to be executed after
+   * <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
+   * as first argument
+   * @param errorCallback function to be executed if
+   * there is an error, response is passed
+   * in as first argument
+   * @returns A promise that resolves with the data when the operation
+   * completes successfully or rejects with the error after
+   * one occurs.
    */
-  imageLight(img: P5.Image): void;
+  httpGet(path: string | Request, datatype?: string, callback?: Function, errorCallback?: Function): Promise<any>;
+  httpGet(path: string | Request, callback: Function, errorCallback?: Function): Promise<any>;
 
   /**
    * Updates the canvas with the RGBA values in the
@@ -6084,28 +6082,6 @@ EXCLUDE: typeof P5.EXCLUDE;
   scale(s: number | P5.Vector | number[], y?: number, z?: number): void;
   scale(scales: P5.Vector | number[]): void;
 
-  /**
-   * Method for executing an HTTP POST request. If data type is not specified,
-   * it will default to `'text'`. This is equivalent to
-   * calling <code>httpDo(path, 'POST')</code>.
-   * @param path name of the file or url to load
-   * @param data param data passed sent with request
-   * @param datatype "json", "jsonp", "xml", or "text".
-   * If omitted, <a href="#/p5/httpPost">httpPost()</a> will guess.
-   * @param callback function to be executed after
-   * <a href="#/p5/httpPost">httpPost()</a> completes, data is passed in
-   * as first argument
-   * @param errorCallback function to be executed if
-   * there is an error, response is passed
-   * in as first argument
-   * @returns A promise that resolves with the data when the operation
-   * completes successfully or rejects with the error after
-   * one occurs.
-   */
-  httpPost(path: string | Request, data?: object | boolean, datatype?: string, callback?: Function, errorCallback?: Function): Promise<any>;
-  httpPost(path: string | Request, data: object | boolean, callback?: Function, errorCallback?: Function): Promise<any>;
-  httpPost(path: string | Request, callback?: Function, errorCallback?: Function): Promise<any>;
-
   /**
    * Converts a `String` with a hexadecimal value to a  `Number`.
    * 
@@ -6165,6 +6141,28 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   sqrt(n: number): number;
 
+  /**
+   * Method for executing an HTTP POST request. If data type is not specified,
+   * it will default to `'text'`. This is equivalent to
+   * calling <code>httpDo(path, 'POST')</code>.
+   * @param path name of the file or url to load
+   * @param data param data passed sent with request
+   * @param datatype "json", "jsonp", "xml", or "text".
+   * If omitted, <a href="#/p5/httpPost">httpPost()</a> will guess.
+   * @param callback function to be executed after
+   * <a href="#/p5/httpPost">httpPost()</a> completes, data is passed in
+   * as first argument
+   * @param errorCallback function to be executed if
+   * there is an error, response is passed
+   * in as first argument
+   * @returns A promise that resolves with the data when the operation
+   * completes successfully or rejects with the error after
+   * one occurs.
+   */
+  httpPost(path: string | Request, data?: object | boolean, datatype?: string, callback?: Function, errorCallback?: Function): Promise<any>;
+  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.
    * 
@@ -6410,18 +6408,6 @@ EXCLUDE: typeof P5.EXCLUDE;
   image(img: P5.Image | P5.Element | P5.Texture | P5.Framebuffer | P5.FramebufferTexture | P5.Renderer | P5.Graphics, x: number, y: number, width?: number, height?: number): void;
   image(img: P5.Image | P5.Element | P5.Texture | P5.Framebuffer | P5.FramebufferTexture, dx: number, dy: number, dWidth: number, dHeight: number, sx: number, sy: number, sWidth?: number, sHeight?: number, fit?: typeof P5.CONTAIN | typeof P5.COVER, xAlign?: typeof P5.LEFT | typeof P5.RIGHT | typeof P5.CENTER, yAlign?: typeof P5.TOP | typeof P5.BOTTOM | typeof P5.CENTER): void;
 
-  /**
-   * Returns the current
-   * <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#parameters" target="_blank">URL parameters</a>
-   * in an `Object`.
-   * 
-   * For example, calling `getURLParams()` in a sketch hosted at the URL
-   * `https://p5js.org?year=2014&month=May&day=15` returns
-   * `{ year: 2014, month: 'May', day: 15 }`.
-   * @returns URL params
-   */
-  getURLParams(): object;
-
   /**
    * Changes the way color values are interpreted.
    * 
@@ -6496,14 +6482,26 @@ EXCLUDE: typeof P5.EXCLUDE;
   colorMode(): typeof P5.RGB | typeof P5.HSB | typeof P5.HSL | typeof P5.RGBHDR | typeof P5.HWB | typeof P5.LAB | typeof P5.LCH | typeof P5.OKLAB | typeof P5.OKLCH;
 
   /**
-   * 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.
+   * Returns the current
+   * <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#parameters" target="_blank">URL parameters</a>
+   * in an `Object`.
    * 
-   * The first parameter, `angle`, is the amount to shear. For example, calling
-   * `shearX(1)` transforms all x-coordinates using the formula
+   * For example, calling `getURLParams()` in a sketch hosted at the URL
+   * `https://p5js.org?year=2014&month=May&day=15` returns
+   * `{ year: 2014, month: 'May', day: 15 }`.
+   * @returns URL params
+   */
+  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>.
    * 
@@ -6542,104 +6540,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   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.
    * 
@@ -6679,7 +6579,7 @@ EXCLUDE: typeof P5.EXCLUDE;
    * }
    * 
    * 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 +6590,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    * 
    * function draw() {
    * background(245, 245, 220);
-   * myShader.setUniform('time', millis() / 1000);
    * shader(myShader);
    * 
    * rectMode(CENTER);
@@ -6804,21 +6703,102 @@ EXCLUDE: typeof P5.EXCLUDE;
   shader(s: P5.Shader): void;
 
   /**
-   * Draws a <a href="#/p5.Geometry">p5.Geometry</a> object to the canvas.
+   * A function that's called when the mouse moves.
    * 
-   * 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 file with <a href="#/p5/loadGeometry">loadGeometry()</a>.
+   * Declaring the function `mouseMoved()` sets a code block to run
+   * automatically when the user moves the mouse without clicking any mouse
+   * buttons:
    * 
-   * Note: `model()` can only be used in WebGL mode.
-   * @param model 3D shape to be drawn.
-   * @param count number of instances to draw.
+   * `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.
    */
-  model(model: P5.Geometry, count?: number): void;
+  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.
@@ -6832,31 +6812,21 @@ EXCLUDE: typeof P5.EXCLUDE;
   setContent(content: string): void;
 
   /**
-   * Method for executing an HTTP request. If data type is not specified,
-   * it will default to `'text'`.
+   * Draws a <a href="#/p5.Geometry">p5.Geometry</a> object to the canvas.
    * 
-   * This function is meant for more advanced usage of HTTP requests in p5.js. It is
-   * best used when a `Request`
-   * object is passed to the `path` parameter.
+   * 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 file with <a href="#/p5/loadGeometry">loadGeometry()</a>.
    * 
-   * This method is suitable for fetching files up to size of 64MB when "GET" is used.
-   * @param path name of the file or url to load
-   * @param method either "GET", "POST", "PUT", "DELETE",
-   * or other HTTP request methods
-   * @param datatype "json", "jsonp", "xml", or "text"
-   * @param data param data passed sent with request
-   * @param callback function to be executed after
-   * <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
-   * as first argument
-   * @param errorCallback function to be executed if
-   * there is an error, response is passed
-   * in as first argument
-   * @returns A promise that resolves with the data when the operation
-   * completes successfully or rejects with the error after
-   * one occurs.
+   * Note: `model()` can only be used in WebGL mode.
+   * @param model 3D shape to be drawn.
+   * @param count number of instances to draw.
    */
-  httpDo(path: string | Request, method?: string, datatype?: string, data?: object, callback?: Function, errorCallback?: Function): Promise<any>;
-  httpDo(path: string | Request, callback?: Function, errorCallback?: Function): Promise<any>;
+  model(model: P5.Geometry, count?: number): void;
 
   /**
    * Draws a rectangle.
@@ -6887,6 +6857,33 @@ EXCLUDE: typeof P5.EXCLUDE;
   rect(x: number, y: number, w: number, h?: number, tl?: number, tr?: number, br?: number, bl?: number): void;
   rect(x: number, y: number, w: number, h: number, detailX?: number, detailY?: number): void;
 
+  /**
+   * Method for executing an HTTP request. If data type is not specified,
+   * it will default to `'text'`.
+   * 
+   * This function is meant for more advanced usage of HTTP requests in p5.js. It is
+   * best used when a `Request`
+   * object is passed to the `path` parameter.
+   * 
+   * This method is suitable for fetching files up to size of 64MB when "GET" is used.
+   * @param path name of the file or url to load
+   * @param method either "GET", "POST", "PUT", "DELETE",
+   * or other HTTP request methods
+   * @param datatype "json", "jsonp", "xml", or "text"
+   * @param data param data passed sent with request
+   * @param callback function to be executed after
+   * <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
+   * as first argument
+   * @param errorCallback function to be executed if
+   * there is an error, response is passed
+   * in as first argument
+   * @returns A promise that resolves with the data when the operation
+   * completes successfully or rejects with the error after
+   * one occurs.
+   */
+  httpDo(path: string | Request, method?: string, datatype?: string, data?: object, callback?: Function, errorCallback?: Function): Promise<any>;
+  httpDo(path: string | Request, callback?: Function, errorCallback?: Function): Promise<any>;
+
   /**
    * Shears the y-axis so that shapes appear skewed.
    * 
@@ -7191,6 +7188,22 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   strokeShader(s: P5.Shader): void;
 
+  /**
+   * Gets the brightness value of a color.
+   * 
+   * `brightness()` extracts the HSB brightness value from a
+   * <a href="/reference/p5/p5.Color/">p5.Color</a> object, an array of color components, or
+   * a CSS color string.
+   * 
+   * By default, `brightness()` returns a color's HSB brightness in the range 0
+   * to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB, it
+   * returns the brightness value in the given range.
+   * @param color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
+   * color components, or CSS color string.
+   * @returns the brightness value.
+   */
+  brightness(color: P5.Color | number[] | string): number;
+
   /**
    * Tints images using a color.
    * 
@@ -7219,47 +7232,6 @@ EXCLUDE: typeof P5.EXCLUDE;
   tint(values: number[]): void;
   tint(color: P5.Color): void;
 
-  /**
-   * Gets the brightness value of a color.
-   * 
-   * `brightness()` extracts the HSB brightness value from a
-   * <a href="/reference/p5/p5.Color/">p5.Color</a> object, an array of color components, or
-   * a CSS color string.
-   * 
-   * By default, `brightness()` returns a color's HSB brightness in the range 0
-   * to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB, it
-   * returns the brightness value in the given range.
-   * @param color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
-   * color components, or CSS color string.
-   * @returns the brightness value.
-   */
-  brightness(color: P5.Color | number[] | string): number;
-
-  /**
-   * Creates a new <a href="#/p5.PrintWriter">p5.PrintWriter</a> object.
-   * 
-   * <a href="#/p5.PrintWriter">p5.PrintWriter</a> objects provide a way to
-   * save a sequence of text data, called the print stream, to the user's
-   * computer. They're low-level objects that enable precise control of text
-   * output. Functions such as
-   * <a href="#/p5/saveStrings">saveStrings()</a> and
-   * <a href="#/p5/saveJSON">saveJSON()</a> are easier to use for simple file
-   * saving.
-   * 
-   * The first parameter, `filename`, is the name of the file to be written. If
-   * a string is passed, as in `createWriter('words.txt')`, a new
-   * <a href="#/p5.PrintWriter">p5.PrintWriter</a> object will be created that
-   * writes to a file named `words.txt`.
-   * 
-   * The second parameter, `extension`, is optional. If a string is passed, as
-   * in `createWriter('words', 'csv')`, the first parameter will be interpreted
-   * as the file name and the second parameter as the extension.
-   * @param name name of the file to create.
-   * @param extension format to use for the file.
-   * @returns stream for writing data.
-   */
-  createWriter(name: string, extension?: string): P5.PrintWriter;
-
   /**
    * Creates a light that shines from a point in one direction.
    * 
@@ -7308,6 +7280,31 @@ EXCLUDE: typeof P5.EXCLUDE;
   spotLight(v1: number, v2: number, v3: number, position: P5.Vector, rx: number, ry: number, rz: number, angle?: number, concentration?: number): void;
   spotLight(color: P5.Color | number[] | string, x: number, y: number, z: number, rx: number, ry: number, rz: number, angle?: number, concentration?: number): void;
 
+  /**
+   * Creates a new <a href="#/p5.PrintWriter">p5.PrintWriter</a> object.
+   * 
+   * <a href="#/p5.PrintWriter">p5.PrintWriter</a> objects provide a way to
+   * save a sequence of text data, called the print stream, to the user's
+   * computer. They're low-level objects that enable precise control of text
+   * output. Functions such as
+   * <a href="#/p5/saveStrings">saveStrings()</a> and
+   * <a href="#/p5/saveJSON">saveJSON()</a> are easier to use for simple file
+   * saving.
+   * 
+   * The first parameter, `filename`, is the name of the file to be written. If
+   * a string is passed, as in `createWriter('words.txt')`, a new
+   * <a href="#/p5.PrintWriter">p5.PrintWriter</a> object will be created that
+   * writes to a file named `words.txt`.
+   * 
+   * The second parameter, `extension`, is optional. If a string is passed, as
+   * in `createWriter('words', 'csv')`, the first parameter will be interpreted
+   * as the file name and the second parameter as the extension.
+   * @param name name of the file to create.
+   * @param extension format to use for the file.
+   * @returns stream for writing data.
+   */
+  createWriter(name: string, extension?: string): P5.PrintWriter;
+
   /**
    * Translates the coordinate system.
    * 
@@ -7800,18 +7797,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   noLights(): void;
 
-  /**
-   * Writes data to the print stream without adding new lines.
-   * 
-   * The parameter, `data`, is the data to write. `data` can be a number or
-   * string, as in `myWriter.write('hi')`, or an array of numbers and strings,
-   * as in `myWriter.write([1, 2, 3])`. A comma will be inserted between array
-   * array elements when they're added to the print stream.
-   * @param data data to be written as a string, number,
-   * or array of strings and numbers.
-   */
-  write(data: string | number | any[]): void;
-
   /**
    * Gets the lightness value of a color.
    * 
@@ -7828,6 +7813,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.
@@ -7896,23 +7900,16 @@ EXCLUDE: typeof P5.EXCLUDE;
   mouseReleased(event?: MouseEvent): 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.
+   * Writes data to the print stream without adding new lines.
    * 
-   * - 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.
+   * The parameter, `data`, is the data to write. `data` can be a number or
+   * string, as in `myWriter.write('hi')`, or an array of numbers and strings,
+   * as in `myWriter.write([1, 2, 3])`. A comma will be inserted between array
+   * array elements when they're added to the print stream.
+   * @param data data to be written as a string, number,
+   * or array of strings and numbers.
    */
-  imageShader(s: P5.Shader): void;
+  write(data: string | number | any[]): void;
 
   /**
    * Disables drawing points, lines, and the outlines of shapes.
@@ -8202,7 +8199,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 +8209,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * lights();
    * noStroke();
    * fill('red');
@@ -8430,42 +8426,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 +8443,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * lights();
    * noStroke();
    * fill('red');
@@ -8493,7 +8452,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 +8470,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 +8590,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 +8637,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>.
    * 
@@ -8670,37 +8665,6 @@ EXCLUDE: typeof P5.EXCLUDE;
   createInput(value?: string, type?: string): P5.Element;
   createInput(value?: string): P5.Element;
 
-  /**
-   * Saves an `Object` or `Array` to a JSON file.
-   * 
-   * JavaScript Object Notation
-   * (<a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON" target="_blank">JSON</a>)
-   * is a standard format for sending data between applications. The format is
-   * based on JavaScript objects which have keys and values. JSON files store
-   * data in an object with strings as keys. Values can be strings, numbers,
-   * Booleans, arrays, `null`, or other objects.
-   * 
-   * The first parameter, `json`, is the data to save. The data can be an array,
-   * as in `[1, 2, 3]`, or an object, as in
-   * `{ x: 50, y: 50, color: 'deeppink' }`.
-   * 
-   * The second parameter, `filename`, is a string that sets the file's name.
-   * For example, calling `saveJSON([1, 2, 3], 'data.json')` saves the array
-   * `[1, 2, 3]` to a file called `data.json` on the user's computer.
-   * 
-   * The third parameter, `optimize`, is optional. If `true` is passed, as in
-   * `saveJSON([1, 2, 3], 'data.json', true)`, then all unneeded whitespace will
-   * be removed to reduce the file size.
-   * 
-   * Note: The browser will either save the file immediately or prompt the user
-   * with a dialogue window.
-   * @param json data to save.
-   * @param filename name of the file to be saved.
-   * @param optimize whether to trim unneeded whitespace. Defaults
-   * to `true`.
-   */
-  saveJSON(json: any[] | object, filename: string, optimize?: boolean): void;
-
   /**
    * Create a new shader that can change how fills are drawn, based on the material used
    * when <a href="#/p5/normalMaterial">`normalMaterial()`</a> is active. Pass the resulting
@@ -8733,7 +8697,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);
@@ -8743,7 +8707,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
@@ -8836,6 +8799,37 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   mouseWheel(event?: WheelEvent): void;
 
+  /**
+   * Saves an `Object` or `Array` to a JSON file.
+   * 
+   * JavaScript Object Notation
+   * (<a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON" target="_blank">JSON</a>)
+   * is a standard format for sending data between applications. The format is
+   * based on JavaScript objects which have keys and values. JSON files store
+   * data in an object with strings as keys. Values can be strings, numbers,
+   * Booleans, arrays, `null`, or other objects.
+   * 
+   * The first parameter, `json`, is the data to save. The data can be an array,
+   * as in `[1, 2, 3]`, or an object, as in
+   * `{ x: 50, y: 50, color: 'deeppink' }`.
+   * 
+   * The second parameter, `filename`, is a string that sets the file's name.
+   * For example, calling `saveJSON([1, 2, 3], 'data.json')` saves the array
+   * `[1, 2, 3]` to a file called `data.json` on the user's computer.
+   * 
+   * The third parameter, `optimize`, is optional. If `true` is passed, as in
+   * `saveJSON([1, 2, 3], 'data.json', true)`, then all unneeded whitespace will
+   * be removed to reduce the file size.
+   * 
+   * Note: The browser will either save the file immediately or prompt the user
+   * with a dialogue window.
+   * @param json data to save.
+   * @param filename name of the file to be saved.
+   * @param optimize whether to trim unneeded whitespace. Defaults
+   * to `true`.
+   */
+  saveJSON(json: any[] | object, filename: string, optimize?: boolean): void;
+
   /**
    * Ends a drawing group that contains its own styles and transformations.
    * 
@@ -9019,25 +9013,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   createFileInput(callback: (input: P5.File) => any, multiple?: boolean): P5.Element;
 
-  /**
-   * Locks the mouse pointer to its current position and makes it invisible.
-   * 
-   * `requestPointerLock()` allows the mouse to move forever without leaving the
-   * screen. Calling `requestPointerLock()` locks the values of
-   * <a href="#/p5/mouseX">mouseX</a>, <a href="#/p5/mouseY">mouseY</a>,
-   * <a href="#/p5/pmouseX">pmouseX</a>, and <a href="#/p5/pmouseY">pmouseY</a>.
-   * <a href="#/p5/movedX">movedX</a> and <a href="#/p5/movedY">movedY</a>
-   * continue updating and can be used to get the distance the mouse moved since
-   * the last frame was drawn. Calling
-   * <a href="#/p5/exitPointerLock">exitPointerLock()</a> resumes updating the
-   * mouse system variables.
-   * 
-   * Note: Most browsers require an input, such as a click, before calling
-   * `requestPointerLock()`. It’s recommended to call `requestPointerLock()` in
-   * an event function such as <a href="#/p5/doubleClicked">doubleClicked()</a>.
-   */
-  requestPointerLock(): void;
-
   /**
    * Loads a new shader from a file that can change how fills are drawn, based on the material used
    * when <a href="#/p5/normalMaterial">`normalMaterial()`</a> is active. Pass the resulting
@@ -9056,7 +9031,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * lights();
    * noStroke();
    * fill('red');
@@ -9066,7 +9040,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);
@@ -9086,6 +9060,25 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   loadNormalShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
 
+  /**
+   * Locks the mouse pointer to its current position and makes it invisible.
+   * 
+   * `requestPointerLock()` allows the mouse to move forever without leaving the
+   * screen. Calling `requestPointerLock()` locks the values of
+   * <a href="#/p5/mouseX">mouseX</a>, <a href="#/p5/mouseY">mouseY</a>,
+   * <a href="#/p5/pmouseX">pmouseX</a>, and <a href="#/p5/pmouseY">pmouseY</a>.
+   * <a href="#/p5/movedX">movedX</a> and <a href="#/p5/movedY">movedY</a>
+   * continue updating and can be used to get the distance the mouse moved since
+   * the last frame was drawn. Calling
+   * <a href="#/p5/exitPointerLock">exitPointerLock()</a> resumes updating the
+   * mouse system variables.
+   * 
+   * Note: Most browsers require an input, such as a click, before calling
+   * `requestPointerLock()`. It’s recommended to call `requestPointerLock()` in
+   * an event function such as <a href="#/p5/doubleClicked">doubleClicked()</a>.
+   */
+  requestPointerLock(): void;
+
   /**
    * Returns the default shader used for fills when
    * <a href="#/p5/normalMaterial">`normalMaterial()`</a> is activated.
@@ -9178,7 +9171,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 +9181,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * noStroke();
    * fill('red');
    * circle(0, 0, 50);
@@ -9302,7 +9294,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * lights();
    * noStroke();
    * fill('red');
@@ -9312,7 +9303,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 +9588,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 +9604,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 +9694,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.
    * 
@@ -9734,81 +9776,29 @@ EXCLUDE: typeof P5.EXCLUDE;
    * The third parameter, `near`, is the distance from the camera to the near
    * plane. For example, calling `perspective(0.5, 1.5, 100)` sets the camera’s
    * field of view to 0.5 radians, its aspect ratio to 1.5, and places the near
-   * plane 100 pixels from the camera. Any shapes drawn less than 100 pixels
-   * from the camera won’t be visible. By default, near is set to `0.1 * 800`,
-   * which is 1/10th the default distance between the camera and the origin.
-   * 
-   * The fourth parameter, `far`, is the distance from the camera to the far
-   * plane. For example, calling `perspective(0.5, 1.5, 100, 10000)` sets the
-   * camera’s field of view to 0.5 radians, its aspect ratio to 1.5, places the
-   * near plane 100 pixels from the camera, and places the far plane 10,000
-   * pixels from the camera. Any shapes drawn more than 10,000 pixels from the
-   * camera won’t be visible. By default, far is set to `10 * 800`, which is 10
-   * times the default distance between the camera and the origin.
-   * 
-   * Note: `perspective()` can only be used in WebGL mode.
-   * @param fovy camera frustum vertical field of view. Defaults to
-   * `2 * atan(height / 2 / 800)`.
-   * @param aspect camera frustum aspect ratio. Defaults to
-   * `width / height`.
-   * @param near distance from the camera to the near clipping plane.
-   * Defaults to `0.1 * 800`.
-   * @param far distance from the camera to the far clipping plane.
-   * Defaults to `10 * 800`.
-   */
-  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.
+   * plane 100 pixels from the camera. Any shapes drawn less than 100 pixels
+   * from the camera won’t be visible. By default, near is set to `0.1 * 800`,
+   * which is 1/10th the default distance between the camera and the origin.
    * 
-   * `// 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 fourth parameter, `far`, is the distance from the camera to the far
+   * plane. For example, calling `perspective(0.5, 1.5, 100, 10000)` sets the
+   * camera’s field of view to 0.5 radians, its aspect ratio to 1.5, places the
+   * near plane 100 pixels from the camera, and places the far plane 10,000
+   * pixels from the camera. Any shapes drawn more than 10,000 pixels from the
+   * camera won’t be visible. By default, far is set to `10 * 800`, which is 10
+   * times the default distance between the camera and the origin.
    * 
-   * 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.
+   * Note: `perspective()` can only be used in WebGL mode.
+   * @param fovy camera frustum vertical field of view. Defaults to
+   * `2 * atan(height / 2 / 800)`.
+   * @param aspect camera frustum aspect ratio. Defaults to
+   * `width / height`.
+   * @param near distance from the camera to the near clipping plane.
+   * Defaults to `0.1 * 800`.
+   * @param far distance from the camera to the far clipping plane.
+   * Defaults to `10 * 800`.
    */
-  loadStrokeShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
+  perspective(fovy?: number, aspect?: number, near?: number, far?: number): void;
 
   /**
    * Returns the default shader used for strokes.
@@ -9854,6 +9844,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 +9892,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.
    * 
@@ -11249,8 +11239,8 @@ namespace p5 {
   const HSB: typeof P5.HSB;
   const deviceOrientation: typeof P5.deviceOrientation;
   const accelerationX: typeof P5.accelerationX;
-  const movedX: typeof P5.movedX;
   const accelerationY: typeof P5.accelerationY;
+  const movedX: typeof P5.movedX;
   const accelerationZ: typeof P5.accelerationZ;
   const pAccelerationX: typeof P5.pAccelerationX;
   const pAccelerationY: typeof P5.pAccelerationY;
@@ -11266,8 +11256,8 @@ namespace p5 {
   const mouseX: typeof P5.mouseX;
   const rotationZ: typeof P5.rotationZ;
   const pRotationX: typeof P5.pRotationX;
-  const mouseY: typeof P5.mouseY;
   const pRotationY: typeof P5.pRotationY;
+  const mouseY: typeof P5.mouseY;
   const pRotationZ: typeof P5.pRotationZ;
   const pmouseX: typeof P5.pmouseX;
   const code: typeof P5.code;
@@ -11320,7 +11310,6 @@ namespace p5 {
   const TAU: typeof P5.TAU;
   const TWO_PI: typeof P5.TWO_PI;
   const DEG_TO_RAD: typeof P5.DEG_TO_RAD;
-  let disableFriendlyErrors: typeof P5.disableFriendlyErrors;
   const RAD_TO_DEG: typeof P5.RAD_TO_DEG;
   const CORNER: typeof P5.CORNER;
   const CORNERS: typeof P5.CORNERS;
@@ -11337,6 +11326,7 @@ namespace p5 {
   const LINE_STRIP: typeof P5.LINE_STRIP;
   const LINE_LOOP: typeof P5.LINE_LOOP;
   const TRIANGLES: typeof P5.TRIANGLES;
+  let disableFriendlyErrors: typeof P5.disableFriendlyErrors;
   const TRIANGLE_FAN: typeof P5.TRIANGLE_FAN;
   const TRIANGLE_STRIP: typeof P5.TRIANGLE_STRIP;
   const QUADS: typeof P5.QUADS;
@@ -11519,6 +11509,12 @@ const deviceOrientation: typeof P5.deviceOrientation;
  */
 const accelerationX: typeof P5.accelerationX;
 
+/**
+ * The system variable accelerationY always contains the acceleration of the
+ * device along the y axis. Value is represented as meters per second squared.
+ */
+const accelerationY: typeof P5.accelerationY;
+
 /**
  * A `Number` system variable that tracks the mouse's horizontal movement.
  * 
@@ -11532,12 +11528,6 @@ const accelerationX: typeof P5.accelerationX;
  */
 const movedX: typeof P5.movedX;
 
-/**
- * The system variable accelerationY always contains the acceleration of the
- * device along the y axis. Value is represented as meters per second squared.
- */
-const accelerationY: typeof P5.accelerationY;
-
 /**
  * The system variable accelerationZ always contains the acceleration of the
  * device along the z axis. Value is represented as meters per second squared.
@@ -11688,18 +11678,6 @@ const rotationZ: typeof P5.rotationZ;
  */
 const pRotationX: typeof P5.pRotationX;
 
-/**
- * A `Number` system variable that tracks the mouse's vertical position.
- * 
- * `mouseY` keeps track of the mouse's position relative to the
- * top-left corner of the canvas. For example, if the mouse is 50 pixels from
- * the top edge of the canvas, then `mouseY` will be 50.
- * 
- * If touch is used instead of the mouse, then `mouseY` will hold the
- * y-coordinate of the most recent touch point.
- */
-const mouseY: typeof P5.mouseY;
-
 /**
  * The system variable pRotationY always contains the rotation of the
  * device along the y axis in the frame previous to the current frame.
@@ -11712,6 +11690,18 @@ const mouseY: typeof P5.mouseY;
  */
 const pRotationY: typeof P5.pRotationY;
 
+/**
+ * A `Number` system variable that tracks the mouse's vertical position.
+ * 
+ * `mouseY` keeps track of the mouse's position relative to the
+ * top-left corner of the canvas. For example, if the mouse is 50 pixels from
+ * the top edge of the canvas, then `mouseY` will be 50.
+ * 
+ * If touch is used instead of the mouse, then `mouseY` will hold the
+ * y-coordinate of the most recent touch point.
+ */
+const mouseY: typeof P5.mouseY;
+
 /**
  * The system variable pRotationZ always contains the rotation of the
  * device along the z axis in the frame previous to the current frame.
@@ -12416,17 +12406,6 @@ const TWO_PI: typeof P5.TWO_PI;
 
 const DEG_TO_RAD: typeof P5.DEG_TO_RAD;
 
-/**
- * Turns off the parts of the Friendly Error System (FES) that impact performance.
- * 
- * The <a href="https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md" target="_blank">FES</a>
- * can cause sketches to draw slowly because it does extra work behind the
- * scenes. For example, the FES checks the arguments passed to functions,
- * which takes time to process. Disabling the FES can significantly improve
- * performance by turning off these checks.
- */
-const disableFriendlyErrors: typeof P5.disableFriendlyErrors;
-
 const RAD_TO_DEG: typeof P5.RAD_TO_DEG;
 
 const CORNER: typeof P5.CORNER;
@@ -12469,6 +12448,17 @@ const LINE_LOOP: typeof P5.LINE_LOOP;
 
 const TRIANGLES: typeof P5.TRIANGLES;
 
+/**
+ * Turns off the parts of the Friendly Error System (FES) that impact performance.
+ * 
+ * The <a href="https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md" target="_blank">FES</a>
+ * can cause sketches to draw slowly because it does extra work behind the
+ * scenes. For example, the FES checks the arguments passed to functions,
+ * which takes time to process. Disabling the FES can significantly improve
+ * performance by turning off these checks.
+ */
+const disableFriendlyErrors: typeof P5.disableFriendlyErrors;
+
 const TRIANGLE_FAN: typeof P5.TRIANGLE_FAN;
 
 const TRIANGLE_STRIP: typeof P5.TRIANGLE_STRIP;
@@ -13354,6 +13344,65 @@ function orbitControl(sensitivityX?: number, sensitivityY?: number, sensitivityZ
  */
 function beginClip(options?: { invert?: boolean }): void;
 
+/**
+ * Creates a light that shines from all directions.
+ * 
+ * Ambient light does not come from one direction. Instead, 3D shapes are
+ * lit evenly from all sides. Ambient lights are almost always used in
+ * combination with other types of lights.
+ * 
+ * There are three ways to call `ambientLight()` with optional parameters to
+ * set the light’s color.
+ * 
+ * The first way to call `ambientLight()` has two parameters, `gray` and
+ * `alpha`. `alpha` is optional. Grayscale and alpha values between 0 and 255
+ * can be passed to set the ambient light’s color, as in `ambientLight(50)` or
+ * `ambientLight(50, 30)`.
+ * 
+ * The second way to call `ambientLight()` has one parameter, color. A
+ * <a href="#/p5.Color">p5.Color</a> object, an array of color values, or a
+ * CSS color string, as in `ambientLight('magenta')`, can be passed to set the
+ * ambient light’s color.
+ * 
+ * The third way to call `ambientLight()` has four parameters, `v1`, `v2`,
+ * `v3`, and `alpha`. `alpha` is optional. RGBA, HSBA, or HSLA values can be
+ * passed to set the ambient light’s colors, as in `ambientLight(255, 0, 0)`
+ * or `ambientLight(255, 0, 0, 30)`. Color values will be interpreted using
+ * the current <a href="#/p5/colorMode">colorMode()</a>.
+ * @param v1 red or hue value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param v2 green or saturation value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param v3 blue, brightness, or lightness value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param alpha alpha (transparency) value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ */
+function ambientLight(v1: number, v2: number, v3: number, alpha?: number): void;
+function ambientLight(gray: number, alpha?: number): void;
+function ambientLight(value: string): void;
+function ambientLight(values: number[]): void;
+function ambientLight(color: P5.Color): void;
+
+/**
+ * Searches the page for all elements that matches the given
+ * <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors" target="_blank">CSS selector string</a>.
+ * 
+ * The selector string can be an ID, class, tag name, or a combination.
+ * `selectAll()` returns an array of <a href="#/p5.Element">p5.Element</a>
+ * objects if it finds any matches and an empty array if none are found.
+ * 
+ * The second parameter, `container`, is optional. It specifies a container to
+ * search within. `container` can be CSS selector string, a
+ * <a href="#/p5.Element">p5.Element</a> object, or an
+ * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> object.
+ * @param selectors CSS selector string of element to search for.
+ * @param container CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
+ * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.
+ * @returns array of <a href="#/p5.Element">p5.Element</a>s containing any elements found.
+ */
+function selectAll(selectors: string, container?: string | P5.Element | HTMLElement): P5.Element[];
+
 /**
  * A shader function that performs smooth Hermite interpolation between `0.0`
  * and `1.0`.
@@ -13414,76 +13463,17 @@ function smoothstep(edge0: number, edge1: number, x: number): number;
  */
 function getTexture(texture: any, coords: any): any;
 
-function getWorldInputs(callback: Function): void;
-
-function getPixelInputs(callback: Function): void;
-
-function getFinalColor(callback: Function): void;
-
-function getColor(callback: Function): void;
-
-function getObjectInputs(callback: Function): void;
-
-function getCameraInputs(callback: Function): void;
-
-/**
- * Creates a light that shines from all directions.
- * 
- * Ambient light does not come from one direction. Instead, 3D shapes are
- * lit evenly from all sides. Ambient lights are almost always used in
- * combination with other types of lights.
- * 
- * There are three ways to call `ambientLight()` with optional parameters to
- * set the light’s color.
- * 
- * The first way to call `ambientLight()` has two parameters, `gray` and
- * `alpha`. `alpha` is optional. Grayscale and alpha values between 0 and 255
- * can be passed to set the ambient light’s color, as in `ambientLight(50)` or
- * `ambientLight(50, 30)`.
- * 
- * The second way to call `ambientLight()` has one parameter, color. A
- * <a href="#/p5.Color">p5.Color</a> object, an array of color values, or a
- * CSS color string, as in `ambientLight('magenta')`, can be passed to set the
- * ambient light’s color.
- * 
- * The third way to call `ambientLight()` has four parameters, `v1`, `v2`,
- * `v3`, and `alpha`. `alpha` is optional. RGBA, HSBA, or HSLA values can be
- * passed to set the ambient light’s colors, as in `ambientLight(255, 0, 0)`
- * or `ambientLight(255, 0, 0, 30)`. Color values will be interpreted using
- * the current <a href="#/p5/colorMode">colorMode()</a>.
- * @param v1 red or hue value in the current
- * <a href="#/p5/colorMode">colorMode()</a>.
- * @param v2 green or saturation value in the current
- * <a href="#/p5/colorMode">colorMode()</a>.
- * @param v3 blue, brightness, or lightness value in the current
- * <a href="#/p5/colorMode">colorMode()</a>.
- * @param alpha alpha (transparency) value in the current
- * <a href="#/p5/colorMode">colorMode()</a>.
- */
-function ambientLight(v1: number, v2: number, v3: number, alpha?: number): void;
-function ambientLight(gray: number, alpha?: number): void;
-function ambientLight(value: string): void;
-function ambientLight(values: number[]): void;
-function ambientLight(color: P5.Color): void;
-
-/**
- * Searches the page for all elements that matches the given
- * <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors" target="_blank">CSS selector string</a>.
- * 
- * The selector string can be an ID, class, tag name, or a combination.
- * `selectAll()` returns an array of <a href="#/p5.Element">p5.Element</a>
- * objects if it finds any matches and an empty array if none are found.
- * 
- * The second parameter, `container`, is optional. It specifies a container to
- * search within. `container` can be CSS selector string, a
- * <a href="#/p5.Element">p5.Element</a> object, or an
- * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> object.
- * @param selectors CSS selector string of element to search for.
- * @param container CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
- * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.
- * @returns array of <a href="#/p5.Element">p5.Element</a>s containing any elements found.
- */
-function selectAll(selectors: string, container?: string | P5.Element | HTMLElement): P5.Element[];
+function getWorldInputs(callback: Function): void;
+
+function getPixelInputs(callback: Function): void;
+
+function getFinalColor(callback: Function): void;
+
+function getColor(callback: Function): void;
+
+function getObjectInputs(callback: Function): void;
+
+function getCameraInputs(callback: Function): void;
 
 /**
  * Draws a Bézier curve.
@@ -15418,7 +15408,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];
  * });
@@ -15871,55 +15861,6 @@ function degrees(radians: number): number;
  */
 function rotateX(angle: number): void;
 
-/**
- * A function that's called once when the sketch begins running.
- * 
- * Declaring the function `setup()` sets a code block to run once
- * automatically when the sketch starts running. It's used to perform
- * setup tasks such as creating the canvas and initializing variables:
- * 
- * `function setup() {
- * // Code to run once at the start of the sketch.
- * }`Code placed in `setup()` will run once before code placed in
- * <a href="#/p5/draw">draw()</a> begins looping.
- * If `setup()` is declared `async` (e.g. `async function setup()`),
- * execution pauses at each `await` until its promise resolves.
- * For example, `font = await loadFont(...)` waits for the font asset
- * to load because `loadFont()` function returns a promise, and the await
- * keyword means the program will wait for the promise to resolve.
- * This ensures that all assets are fully loaded before the sketch continues.
- * 
- * loading assets.
- * 
- * Note: `setup()` doesn’t have to be declared, but it’s common practice to do so.
- */
-function setup(): void;
-
-/**
- * A function that's called repeatedly while the sketch runs.
- * 
- * Declaring the function `draw()` sets a code block to run repeatedly
- * once the sketch starts. It’s used to create animations and respond to
- * user inputs:
- * 
- * `function draw() {
- * // Code to run repeatedly.
- * }`This is often called the "draw loop" because p5.js calls the code in
- * `draw()` in a loop behind the scenes. By default, `draw()` tries to run
- * 60 times per second. The actual rate depends on many factors. The
- * drawing rate, called the "frame rate", can be controlled by calling
- * <a href="#/p5/frameRate">frameRate()</a>. The number of times `draw()`
- * has run is stored in the system variable
- * <a href="#/p5/frameCount">frameCount()</a>.
- * 
- * Code placed within `draw()` begins looping after
- * <a href="#/p5/setup">setup()</a> runs. `draw()` will run until the user
- * closes the sketch. `draw()` can be stopped by calling the
- * <a href="#/p5/noLoop">noLoop()</a> function. `draw()` can be resumed by
- * calling the <a href="#/p5/loop">loop()</a> function.
- */
-function draw(): void;
-
 /**
  * Re-maps a number from one range to another.
  * 
@@ -16339,6 +16280,55 @@ function saveFrames(filename: string, extension: string, duration: number, frame
 function line(x1: number, y1: number, x2: number, y2: number): void;
 function line(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number): void;
 
+/**
+ * A function that's called once when the sketch begins running.
+ * 
+ * Declaring the function `setup()` sets a code block to run once
+ * automatically when the sketch starts running. It's used to perform
+ * setup tasks such as creating the canvas and initializing variables:
+ * 
+ * `function setup() {
+ * // Code to run once at the start of the sketch.
+ * }`Code placed in `setup()` will run once before code placed in
+ * <a href="#/p5/draw">draw()</a> begins looping.
+ * If `setup()` is declared `async` (e.g. `async function setup()`),
+ * execution pauses at each `await` until its promise resolves.
+ * For example, `font = await loadFont(...)` waits for the font asset
+ * to load because `loadFont()` function returns a promise, and the await
+ * keyword means the program will wait for the promise to resolve.
+ * This ensures that all assets are fully loaded before the sketch continues.
+ * 
+ * loading assets.
+ * 
+ * Note: `setup()` doesn’t have to be declared, but it’s common practice to do so.
+ */
+function setup(): void;
+
+/**
+ * A function that's called repeatedly while the sketch runs.
+ * 
+ * Declaring the function `draw()` sets a code block to run repeatedly
+ * once the sketch starts. It’s used to create animations and respond to
+ * user inputs:
+ * 
+ * `function draw() {
+ * // Code to run repeatedly.
+ * }`This is often called the "draw loop" because p5.js calls the code in
+ * `draw()` in a loop behind the scenes. By default, `draw()` tries to run
+ * 60 times per second. The actual rate depends on many factors. The
+ * drawing rate, called the "frame rate", can be controlled by calling
+ * <a href="#/p5/frameRate">frameRate()</a>. The number of times `draw()`
+ * has run is stored in the system variable
+ * <a href="#/p5/frameCount">frameCount()</a>.
+ * 
+ * Code placed within `draw()` begins looping after
+ * <a href="#/p5/setup">setup()</a> runs. `draw()` will run until the user
+ * closes the sketch. `draw()` can be stopped by calling the
+ * <a href="#/p5/noLoop">noLoop()</a> function. `draw()` can be resumed by
+ * calling the <a href="#/p5/loop">loop()</a> function.
+ */
+function draw(): void;
+
 /**
  * Clears the pixels on the canvas.
  * 
@@ -16655,17 +16645,6 @@ function windowResized(event?: Event): void;
  */
 function shuffle<T>(array: T[], modify?: boolean): T[];
 
-/**
- * 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>;
-
 /**
  * Turns off <a href="#/p5/debugMode">debugMode()</a> in a 3D sketch.
  */
@@ -16826,7 +16805,7 @@ function loadPixels(): void;
  * 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 +16815,7 @@ function loadPixels(): void;
  * }
  * 
  * function gradient() {
- * let time = uniformFloat();
+ * let time = millis();
  * filterColor.begin();
  * filterColor.set(mix(
  * [1, 0, 0, 1], // Red
@@ -16847,9 +16826,8 @@ function loadPixels(): void;
  * }
  * 
  * 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 +16838,7 @@ function loadPixels(): void;
  * }
  * 
  * function noiseShaderCallback() {
- * let time = uniformFloat();
+ * let time = millis();
  * filterColor.begin();
  * let coord = filterColor.texCoord;
  * 
@@ -16877,7 +16855,6 @@ function loadPixels(): void;
  * }
  * 
  * 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>
@@ -16895,6 +16872,17 @@ function loadPixels(): void;
 function buildFilterShader(callback: Function, scope?: object): P5.Shader;
 function buildFilterShader(hooks: object, scope?: object): P5.Shader;
 
+/**
+ * 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 `&lt;input&gt;&lt;/input&gt;` element.
  * 
@@ -17014,22 +17002,6 @@ function keyReleased(event?: KeyboardEvent): void;
  */
 function rotateZ(angle: number): void;
 
-/**
- * Loads a file at the given path as a Blob, then returns the resulting data or
- * passes it to a success callback function, if provided. On load, this function
- * returns a `Promise` that resolves to a Blob containing the file data.
- * @param path The path or Request object pointing to the file
- * you want to load.
- * @param successCallback Optional. A function to be called if the
- * file successfully loads, receiving the
- * resulting Blob as its only argument.
- * @param errorCallback Optional. A function to be called if an
- * error occurs during loading; receives the
- * error object as its only argument.
- * @returns A promise that resolves with the loaded Blob.
- */
-function loadBlob(path: string | Request, successCallback?: Function, errorCallback?: Function): Promise<Blob>;
-
 /**
  * Calculates exponential expressions such as <var>2<sup>3</sup></var>.
  * 
@@ -17058,6 +17030,22 @@ function pow(n: number, e: number): number;
  */
 function fullscreen(val?: boolean): boolean;
 
+/**
+ * Loads a file at the given path as a Blob, then returns the resulting data or
+ * passes it to a success callback function, if provided. On load, this function
+ * returns a `Promise` that resolves to a Blob containing the file data.
+ * @param path The path or Request object pointing to the file
+ * you want to load.
+ * @param successCallback Optional. A function to be called if the
+ * file successfully loads, receiving the
+ * resulting Blob as its only argument.
+ * @param errorCallback Optional. A function to be called if an
+ * error occurs during loading; receives the
+ * error object as its only argument.
+ * @returns A promise that resolves with the loaded Blob.
+ */
+function loadBlob(path: string | Request, successCallback?: Function, errorCallback?: Function): Promise<Blob>;
+
 /**
  * Creates a light that shines from a point in all directions.
  * 
@@ -17335,26 +17323,20 @@ function hex(ns: number[], digits?: number): string[];
 function splinePoint(a: number, b: number, c: number, d: number, t: number): number;
 
 /**
- * Method for executing an HTTP GET request. If data type is not specified,
- * it will default to `'text'`. This is equivalent to
- * calling <code>httpDo(path, 'GET')</code>. The 'binary' datatype will return
- * a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
- * which can be used to initialize typed arrays (such as Uint8Array).
- * @param path name of the file or url to load
- * @param datatype "json", "jsonp", "binary", "arrayBuffer",
- * "xml", or "text"
- * @param callback function to be executed after
- * <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
- * as first argument
- * @param errorCallback function to be executed if
- * there is an error, response is passed
- * in as first argument
- * @returns A promise that resolves with the data when the operation
- * completes successfully or rejects with the error after
- * one occurs.
+ * Creates an ambient light from an image.
+ * 
+ * `imageLight()` simulates a light shining from all directions. The effect is
+ * like placing the sketch at the center of a giant sphere that uses the image
+ * as its texture. The image's diffuse light will be affected by
+ * <a href="#/p5/fill">fill()</a> and the specular reflections will be
+ * affected by <a href="#/p5/specularMaterial">specularMaterial()</a> and
+ * <a href="#/p5/shininess">shininess()</a>.
+ * 
+ * The parameter, `img`, is the <a href="#/p5.Image">p5.Image</a> object to
+ * use as the light source.
+ * @param img image to use as the light source.
  */
-function httpGet(path: string | Request, datatype?: string, callback?: Function, errorCallback?: Function): Promise<any>;
-function httpGet(path: string | Request, callback: Function, errorCallback?: Function): Promise<any>;
+function imageLight(img: P5.Image): void;
 
 /**
  * Sets the pixel density or returns the current density.
@@ -17377,20 +17359,26 @@ function pixelDensity(val?: number): number;
 function pixelDensity(): number;
 
 /**
- * Creates an ambient light from an image.
- * 
- * `imageLight()` simulates a light shining from all directions. The effect is
- * like placing the sketch at the center of a giant sphere that uses the image
- * as its texture. The image's diffuse light will be affected by
- * <a href="#/p5/fill">fill()</a> and the specular reflections will be
- * affected by <a href="#/p5/specularMaterial">specularMaterial()</a> and
- * <a href="#/p5/shininess">shininess()</a>.
- * 
- * The parameter, `img`, is the <a href="#/p5.Image">p5.Image</a> object to
- * use as the light source.
- * @param img image to use as the light source.
+ * Method for executing an HTTP GET request. If data type is not specified,
+ * it will default to `'text'`. This is equivalent to
+ * calling <code>httpDo(path, 'GET')</code>. The 'binary' datatype will return
+ * a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
+ * which can be used to initialize typed arrays (such as Uint8Array).
+ * @param path name of the file or url to load
+ * @param datatype "json", "jsonp", "binary", "arrayBuffer",
+ * "xml", or "text"
+ * @param callback function to be executed after
+ * <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
+ * as first argument
+ * @param errorCallback function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @returns A promise that resolves with the data when the operation
+ * completes successfully or rejects with the error after
+ * one occurs.
  */
-function imageLight(img: P5.Image): void;
+function httpGet(path: string | Request, datatype?: string, callback?: Function, errorCallback?: Function): Promise<any>;
+function httpGet(path: string | Request, callback: Function, errorCallback?: Function): Promise<any>;
 
 /**
  * Updates the canvas with the RGBA values in the
@@ -17555,28 +17543,6 @@ function hue(color: P5.Color | number[] | string): number;
 function scale(s: number | P5.Vector | number[], y?: number, z?: number): void;
 function scale(scales: P5.Vector | number[]): void;
 
-/**
- * Method for executing an HTTP POST request. If data type is not specified,
- * it will default to `'text'`. This is equivalent to
- * calling <code>httpDo(path, 'POST')</code>.
- * @param path name of the file or url to load
- * @param data param data passed sent with request
- * @param datatype "json", "jsonp", "xml", or "text".
- * If omitted, <a href="#/p5/httpPost">httpPost()</a> will guess.
- * @param callback function to be executed after
- * <a href="#/p5/httpPost">httpPost()</a> completes, data is passed in
- * as first argument
- * @param errorCallback function to be executed if
- * there is an error, response is passed
- * in as first argument
- * @returns A promise that resolves with the data when the operation
- * completes successfully or rejects with the error after
- * one occurs.
- */
-function httpPost(path: string | Request, data?: object | boolean, datatype?: string, callback?: Function, errorCallback?: Function): Promise<any>;
-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>;
-
 /**
  * Converts a `String` with a hexadecimal value to a  `Number`.
  * 
@@ -17634,7 +17600,29 @@ function quad(x1: number, y1: number, z1: number, x2: number, y2: number, z2: nu
  * @param n non-negative number to square root.
  * @returns square root of number.
  */
-function sqrt(n: number): number;
+function sqrt(n: number): number;
+
+/**
+ * Method for executing an HTTP POST request. If data type is not specified,
+ * it will default to `'text'`. This is equivalent to
+ * calling <code>httpDo(path, 'POST')</code>.
+ * @param path name of the file or url to load
+ * @param data param data passed sent with request
+ * @param datatype "json", "jsonp", "xml", or "text".
+ * If omitted, <a href="#/p5/httpPost">httpPost()</a> will guess.
+ * @param callback function to be executed after
+ * <a href="#/p5/httpPost">httpPost()</a> completes, data is passed in
+ * as first argument
+ * @param errorCallback function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @returns A promise that resolves with the data when the operation
+ * completes successfully or rejects with the error after
+ * one occurs.
+ */
+function httpPost(path: string | Request, data?: object | boolean, datatype?: string, callback?: Function, errorCallback?: Function): Promise<any>;
+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.
@@ -17881,18 +17869,6 @@ function normal(x: number, y: number, z: number): void;
 function image(img: P5.Image | P5.Element | P5.Texture | P5.Framebuffer | P5.FramebufferTexture | P5.Renderer | P5.Graphics, x: number, y: number, width?: number, height?: number): void;
 function image(img: P5.Image | P5.Element | P5.Texture | P5.Framebuffer | P5.FramebufferTexture, dx: number, dy: number, dWidth: number, dHeight: number, sx: number, sy: number, sWidth?: number, sHeight?: number, fit?: typeof P5.CONTAIN | typeof P5.COVER, xAlign?: typeof P5.LEFT | typeof P5.RIGHT | typeof P5.CENTER, yAlign?: typeof P5.TOP | typeof P5.BOTTOM | typeof P5.CENTER): void;
 
-/**
- * Returns the current
- * <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#parameters" target="_blank">URL parameters</a>
- * in an `Object`.
- * 
- * For example, calling `getURLParams()` in a sketch hosted at the URL
- * `https://p5js.org?year=2014&month=May&day=15` returns
- * `{ year: 2014, month: 'May', day: 15 }`.
- * @returns URL params
- */
-function getURLParams(): object;
-
 /**
  * Changes the way color values are interpreted.
  * 
@@ -17966,6 +17942,18 @@ function colorMode(mode: typeof P5.RGB | typeof P5.HSB | typeof P5.HSL | typeof
 function colorMode(mode: typeof P5.RGB | typeof P5.HSB | typeof P5.HSL | typeof P5.RGBHDR | typeof P5.HWB | typeof P5.LAB | typeof P5.LCH | typeof P5.OKLAB | typeof P5.OKLCH, max1: number, max2: number, max3: number, maxA?: number): typeof P5.RGB | typeof P5.HSB | typeof P5.HSL | typeof P5.RGBHDR | typeof P5.HWB | typeof P5.LAB | typeof P5.LCH | typeof P5.OKLAB | typeof P5.OKLCH;
 function colorMode(): typeof P5.RGB | typeof P5.HSB | typeof P5.HSL | typeof P5.RGBHDR | typeof P5.HWB | typeof P5.LAB | typeof P5.LCH | typeof P5.OKLAB | typeof P5.OKLCH;
 
+/**
+ * Returns the current
+ * <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#parameters" target="_blank">URL parameters</a>
+ * in an `Object`.
+ * 
+ * For example, calling `getURLParams()` in a sketch hosted at the URL
+ * `https://p5js.org?year=2014&month=May&day=15` returns
+ * `{ year: 2014, month: 'May', day: 15 }`.
+ * @returns URL params
+ */
+function getURLParams(): object;
+
 /**
  * Shears the x-axis so that shapes appear skewed.
  * 
@@ -18013,104 +18001,6 @@ function shearX(angle: number): void;
  */
 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:
- * 
- * `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 <a href="#/p5.Shader">p5.Shader</a> object to apply while drawing.
  * 
@@ -18150,7 +18040,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 +18051,6 @@ function keyIsDown(code: number | string): boolean;
  * 
  * function draw() {
  * background(245, 245, 220);
- * myShader.setUniform('time', millis() / 1000);
  * shader(myShader);
  * 
  * rectMode(CENTER);
@@ -18275,21 +18164,102 @@ function keyIsDown(code: number | string): boolean;
 function shader(s: P5.Shader): void;
 
 /**
- * Draws a <a href="#/p5.Geometry">p5.Geometry</a> object to the canvas.
+ * A function that's called when the mouse moves.
  * 
- * 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 file with <a href="#/p5/loadGeometry">loadGeometry()</a>.
+ * Declaring the function `mouseMoved()` sets a code block to run
+ * automatically when the user moves the mouse without clicking any mouse
+ * buttons:
  * 
- * Note: `model()` can only be used in WebGL mode.
- * @param model 3D shape to be drawn.
- * @param count number of instances to draw.
+ * `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 model(model: P5.Geometry, count?: number): void;
+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.
@@ -18303,31 +18273,21 @@ function model(model: P5.Geometry, count?: number): void;
 function setContent(content: string): void;
 
 /**
- * Method for executing an HTTP request. If data type is not specified,
- * it will default to `'text'`.
+ * Draws a <a href="#/p5.Geometry">p5.Geometry</a> object to the canvas.
  * 
- * This function is meant for more advanced usage of HTTP requests in p5.js. It is
- * best used when a `Request`
- * object is passed to the `path` parameter.
+ * 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 file with <a href="#/p5/loadGeometry">loadGeometry()</a>.
  * 
- * This method is suitable for fetching files up to size of 64MB when "GET" is used.
- * @param path name of the file or url to load
- * @param method either "GET", "POST", "PUT", "DELETE",
- * or other HTTP request methods
- * @param datatype "json", "jsonp", "xml", or "text"
- * @param data param data passed sent with request
- * @param callback function to be executed after
- * <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
- * as first argument
- * @param errorCallback function to be executed if
- * there is an error, response is passed
- * in as first argument
- * @returns A promise that resolves with the data when the operation
- * completes successfully or rejects with the error after
- * one occurs.
+ * Note: `model()` can only be used in WebGL mode.
+ * @param model 3D shape to be drawn.
+ * @param count number of instances to draw.
  */
-function httpDo(path: string | Request, method?: string, datatype?: string, data?: object, callback?: Function, errorCallback?: Function): Promise<any>;
-function httpDo(path: string | Request, callback?: Function, errorCallback?: Function): Promise<any>;
+function model(model: P5.Geometry, count?: number): void;
 
 /**
  * Draws a rectangle.
@@ -18358,6 +18318,33 @@ function httpDo(path: string | Request, callback?: Function, errorCallback?: Fun
 function rect(x: number, y: number, w: number, h?: number, tl?: number, tr?: number, br?: number, bl?: number): void;
 function rect(x: number, y: number, w: number, h: number, detailX?: number, detailY?: number): void;
 
+/**
+ * Method for executing an HTTP request. If data type is not specified,
+ * it will default to `'text'`.
+ * 
+ * This function is meant for more advanced usage of HTTP requests in p5.js. It is
+ * best used when a `Request`
+ * object is passed to the `path` parameter.
+ * 
+ * This method is suitable for fetching files up to size of 64MB when "GET" is used.
+ * @param path name of the file or url to load
+ * @param method either "GET", "POST", "PUT", "DELETE",
+ * or other HTTP request methods
+ * @param datatype "json", "jsonp", "xml", or "text"
+ * @param data param data passed sent with request
+ * @param callback function to be executed after
+ * <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
+ * as first argument
+ * @param errorCallback function to be executed if
+ * there is an error, response is passed
+ * in as first argument
+ * @returns A promise that resolves with the data when the operation
+ * completes successfully or rejects with the error after
+ * one occurs.
+ */
+function httpDo(path: string | Request, method?: string, datatype?: string, data?: object, callback?: Function, errorCallback?: Function): Promise<any>;
+function httpDo(path: string | Request, callback?: Function, errorCallback?: Function): Promise<any>;
+
 /**
  * Shears the y-axis so that shapes appear skewed.
  * 
@@ -18662,6 +18649,22 @@ function mousePressed(event?: MouseEvent): void;
  */
 function strokeShader(s: P5.Shader): void;
 
+/**
+ * Gets the brightness value of a color.
+ * 
+ * `brightness()` extracts the HSB brightness value from a
+ * <a href="/reference/p5/p5.Color/">p5.Color</a> object, an array of color components, or
+ * a CSS color string.
+ * 
+ * By default, `brightness()` returns a color's HSB brightness in the range 0
+ * to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB, it
+ * returns the brightness value in the given range.
+ * @param color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
+ * color components, or CSS color string.
+ * @returns the brightness value.
+ */
+function brightness(color: P5.Color | number[] | string): number;
+
 /**
  * Tints images using a color.
  * 
@@ -18690,47 +18693,6 @@ function tint(gray: number, alpha?: number): void;
 function tint(values: number[]): void;
 function tint(color: P5.Color): void;
 
-/**
- * Gets the brightness value of a color.
- * 
- * `brightness()` extracts the HSB brightness value from a
- * <a href="/reference/p5/p5.Color/">p5.Color</a> object, an array of color components, or
- * a CSS color string.
- * 
- * By default, `brightness()` returns a color's HSB brightness in the range 0
- * to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB, it
- * returns the brightness value in the given range.
- * @param color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
- * color components, or CSS color string.
- * @returns the brightness value.
- */
-function brightness(color: P5.Color | number[] | string): number;
-
-/**
- * Creates a new <a href="#/p5.PrintWriter">p5.PrintWriter</a> object.
- * 
- * <a href="#/p5.PrintWriter">p5.PrintWriter</a> objects provide a way to
- * save a sequence of text data, called the print stream, to the user's
- * computer. They're low-level objects that enable precise control of text
- * output. Functions such as
- * <a href="#/p5/saveStrings">saveStrings()</a> and
- * <a href="#/p5/saveJSON">saveJSON()</a> are easier to use for simple file
- * saving.
- * 
- * The first parameter, `filename`, is the name of the file to be written. If
- * a string is passed, as in `createWriter('words.txt')`, a new
- * <a href="#/p5.PrintWriter">p5.PrintWriter</a> object will be created that
- * writes to a file named `words.txt`.
- * 
- * The second parameter, `extension`, is optional. If a string is passed, as
- * in `createWriter('words', 'csv')`, the first parameter will be interpreted
- * as the file name and the second parameter as the extension.
- * @param name name of the file to create.
- * @param extension format to use for the file.
- * @returns stream for writing data.
- */
-function createWriter(name: string, extension?: string): P5.PrintWriter;
-
 /**
  * Creates a light that shines from a point in one direction.
  * 
@@ -18779,6 +18741,31 @@ function spotLight(v1: number, v2: number, v3: number, x: number, y: number, z:
 function spotLight(v1: number, v2: number, v3: number, position: P5.Vector, rx: number, ry: number, rz: number, angle?: number, concentration?: number): void;
 function spotLight(color: P5.Color | number[] | string, x: number, y: number, z: number, rx: number, ry: number, rz: number, angle?: number, concentration?: number): void;
 
+/**
+ * Creates a new <a href="#/p5.PrintWriter">p5.PrintWriter</a> object.
+ * 
+ * <a href="#/p5.PrintWriter">p5.PrintWriter</a> objects provide a way to
+ * save a sequence of text data, called the print stream, to the user's
+ * computer. They're low-level objects that enable precise control of text
+ * output. Functions such as
+ * <a href="#/p5/saveStrings">saveStrings()</a> and
+ * <a href="#/p5/saveJSON">saveJSON()</a> are easier to use for simple file
+ * saving.
+ * 
+ * The first parameter, `filename`, is the name of the file to be written. If
+ * a string is passed, as in `createWriter('words.txt')`, a new
+ * <a href="#/p5.PrintWriter">p5.PrintWriter</a> object will be created that
+ * writes to a file named `words.txt`.
+ * 
+ * The second parameter, `extension`, is optional. If a string is passed, as
+ * in `createWriter('words', 'csv')`, the first parameter will be interpreted
+ * as the file name and the second parameter as the extension.
+ * @param name name of the file to create.
+ * @param extension format to use for the file.
+ * @returns stream for writing data.
+ */
+function createWriter(name: string, extension?: string): P5.PrintWriter;
+
 /**
  * Translates the coordinate system.
  * 
@@ -19271,18 +19258,6 @@ function noFill(): void;
  */
 function noLights(): void;
 
-/**
- * Writes data to the print stream without adding new lines.
- * 
- * The parameter, `data`, is the data to write. `data` can be a number or
- * string, as in `myWriter.write('hi')`, or an array of numbers and strings,
- * as in `myWriter.write([1, 2, 3])`. A comma will be inserted between array
- * array elements when they're added to the print stream.
- * @param data data to be written as a string, number,
- * or array of strings and numbers.
- */
-function write(data: string | number | any[]): void;
-
 /**
  * Gets the lightness value of a color.
  * 
@@ -19299,6 +19274,25 @@ function write(data: string | number | any[]): 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.
@@ -19367,23 +19361,16 @@ function imageMode(mode: typeof P5.CORNER | typeof P5.CORNERS | typeof P5.CENTER
 function mouseReleased(event?: MouseEvent): 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.
+ * Writes data to the print stream without adding new lines.
  * 
- * - 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.
+ * The parameter, `data`, is the data to write. `data` can be a number or
+ * string, as in `myWriter.write('hi')`, or an array of numbers and strings,
+ * as in `myWriter.write([1, 2, 3])`. A comma will be inserted between array
+ * array elements when they're added to the print stream.
+ * @param data data to be written as a string, number,
+ * or array of strings and numbers.
  */
-function imageShader(s: P5.Shader): void;
+function write(data: string | number | any[]): void;
 
 /**
  * Disables drawing points, lines, and the outlines of shapes.
@@ -19673,7 +19660,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 +19670,6 @@ function mouseClicked(event?: MouseEvent): void;
  * function draw() {
  * background(255);
  * shader(myShader);
- * myShader.setUniform('time', millis());
  * lights();
  * noStroke();
  * fill('red');
@@ -19901,42 +19887,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 +19904,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 +19913,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);
@@ -19982,7 +19931,43 @@ function save(objectOrFilename?: object | string, filename?: string, options?: b
  * @param onFailure A callback function to run when loading fails.
  * @returns The material shader.
  */
-function loadMaterialShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
+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.
@@ -20066,6 +20051,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 +20098,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>.
  * 
@@ -20141,37 +20126,6 @@ function noErase(): void;
 function createInput(value?: string, type?: string): P5.Element;
 function createInput(value?: string): P5.Element;
 
-/**
- * Saves an `Object` or `Array` to a JSON file.
- * 
- * JavaScript Object Notation
- * (<a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON" target="_blank">JSON</a>)
- * is a standard format for sending data between applications. The format is
- * based on JavaScript objects which have keys and values. JSON files store
- * data in an object with strings as keys. Values can be strings, numbers,
- * Booleans, arrays, `null`, or other objects.
- * 
- * The first parameter, `json`, is the data to save. The data can be an array,
- * as in `[1, 2, 3]`, or an object, as in
- * `{ x: 50, y: 50, color: 'deeppink' }`.
- * 
- * The second parameter, `filename`, is a string that sets the file's name.
- * For example, calling `saveJSON([1, 2, 3], 'data.json')` saves the array
- * `[1, 2, 3]` to a file called `data.json` on the user's computer.
- * 
- * The third parameter, `optimize`, is optional. If `true` is passed, as in
- * `saveJSON([1, 2, 3], 'data.json', true)`, then all unneeded whitespace will
- * be removed to reduce the file size.
- * 
- * Note: The browser will either save the file immediately or prompt the user
- * with a dialogue window.
- * @param json data to save.
- * @param filename name of the file to be saved.
- * @param optimize whether to trim unneeded whitespace. Defaults
- * to `true`.
- */
-function saveJSON(json: any[] | object, filename: string, optimize?: boolean): void;
-
 /**
  * Create a new shader that can change how fills are drawn, based on the material used
  * when <a href="#/p5/normalMaterial">`normalMaterial()`</a> is active. Pass the resulting
@@ -20204,7 +20158,7 @@ function saveJSON(json: any[] | object, filename: string, optimize?: boolean): v
  * }
  * 
  * function material() {
- * let time = uniformFloat();
+ * let time = millis();
  * worldInputs.begin();
  * worldInputs.position.y +=
  * 20. * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -20214,7 +20168,6 @@ function saveJSON(json: any[] | object, filename: string, optimize?: boolean): v
  * 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
@@ -20307,6 +20260,37 @@ function buildNormalShader(hooks: object, scope?: object): P5.Shader;
  */
 function mouseWheel(event?: WheelEvent): void;
 
+/**
+ * Saves an `Object` or `Array` to a JSON file.
+ * 
+ * JavaScript Object Notation
+ * (<a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON" target="_blank">JSON</a>)
+ * is a standard format for sending data between applications. The format is
+ * based on JavaScript objects which have keys and values. JSON files store
+ * data in an object with strings as keys. Values can be strings, numbers,
+ * Booleans, arrays, `null`, or other objects.
+ * 
+ * The first parameter, `json`, is the data to save. The data can be an array,
+ * as in `[1, 2, 3]`, or an object, as in
+ * `{ x: 50, y: 50, color: 'deeppink' }`.
+ * 
+ * The second parameter, `filename`, is a string that sets the file's name.
+ * For example, calling `saveJSON([1, 2, 3], 'data.json')` saves the array
+ * `[1, 2, 3]` to a file called `data.json` on the user's computer.
+ * 
+ * The third parameter, `optimize`, is optional. If `true` is passed, as in
+ * `saveJSON([1, 2, 3], 'data.json', true)`, then all unneeded whitespace will
+ * be removed to reduce the file size.
+ * 
+ * Note: The browser will either save the file immediately or prompt the user
+ * with a dialogue window.
+ * @param json data to save.
+ * @param filename name of the file to be saved.
+ * @param optimize whether to trim unneeded whitespace. Defaults
+ * to `true`.
+ */
+function saveJSON(json: any[] | object, filename: string, optimize?: boolean): void;
+
 /**
  * Ends a drawing group that contains its own styles and transformations.
  * 
@@ -20490,25 +20474,6 @@ function pop(): void;
  */
 function createFileInput(callback: (input: P5.File) => any, multiple?: boolean): P5.Element;
 
-/**
- * Locks the mouse pointer to its current position and makes it invisible.
- * 
- * `requestPointerLock()` allows the mouse to move forever without leaving the
- * screen. Calling `requestPointerLock()` locks the values of
- * <a href="#/p5/mouseX">mouseX</a>, <a href="#/p5/mouseY">mouseY</a>,
- * <a href="#/p5/pmouseX">pmouseX</a>, and <a href="#/p5/pmouseY">pmouseY</a>.
- * <a href="#/p5/movedX">movedX</a> and <a href="#/p5/movedY">movedY</a>
- * continue updating and can be used to get the distance the mouse moved since
- * the last frame was drawn. Calling
- * <a href="#/p5/exitPointerLock">exitPointerLock()</a> resumes updating the
- * mouse system variables.
- * 
- * Note: Most browsers require an input, such as a click, before calling
- * `requestPointerLock()`. It’s recommended to call `requestPointerLock()` in
- * an event function such as <a href="#/p5/doubleClicked">doubleClicked()</a>.
- */
-function requestPointerLock(): void;
-
 /**
  * Loads a new shader from a file that can change how fills are drawn, based on the material used
  * when <a href="#/p5/normalMaterial">`normalMaterial()`</a> is active. Pass the resulting
@@ -20527,7 +20492,6 @@ function requestPointerLock(): void;
  * function draw() {
  * background(255);
  * shader(myShader);
- * myShader.setUniform('time', millis());
  * lights();
  * noStroke();
  * fill('red');
@@ -20537,7 +20501,7 @@ function requestPointerLock(): 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);
@@ -20557,6 +20521,25 @@ function requestPointerLock(): void;
  */
 function loadNormalShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
 
+/**
+ * Locks the mouse pointer to its current position and makes it invisible.
+ * 
+ * `requestPointerLock()` allows the mouse to move forever without leaving the
+ * screen. Calling `requestPointerLock()` locks the values of
+ * <a href="#/p5/mouseX">mouseX</a>, <a href="#/p5/mouseY">mouseY</a>,
+ * <a href="#/p5/pmouseX">pmouseX</a>, and <a href="#/p5/pmouseY">pmouseY</a>.
+ * <a href="#/p5/movedX">movedX</a> and <a href="#/p5/movedY">movedY</a>
+ * continue updating and can be used to get the distance the mouse moved since
+ * the last frame was drawn. Calling
+ * <a href="#/p5/exitPointerLock">exitPointerLock()</a> resumes updating the
+ * mouse system variables.
+ * 
+ * Note: Most browsers require an input, such as a click, before calling
+ * `requestPointerLock()`. It’s recommended to call `requestPointerLock()` in
+ * an event function such as <a href="#/p5/doubleClicked">doubleClicked()</a>.
+ */
+function requestPointerLock(): void;
+
 /**
  * Returns the default shader used for fills when
  * <a href="#/p5/normalMaterial">`normalMaterial()`</a> is activated.
@@ -20649,7 +20632,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 +20642,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 +20755,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 +20764,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 +21049,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 +21065,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 +21155,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 +21261,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 +21305,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 +21353,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.
  * 
@@ -22710,3 +22690,5 @@ function sampler(value: any): any;
 
 }
 
+export default p5;
+