p5 2.2.2 → 2.2.3-rc.1

package/types/p5.d.ts

@@ -60,6 +60,14 @@ declare const accelerationX: number;
 
 declare const __accelerationX: typeof accelerationX;
 
+/**
+ * The system variable accelerationY always contains the acceleration of the
+ * device along the y axis. Value is represented as meters per second squared.
+ */
+declare const accelerationY: number;
+
+declare const __accelerationY: typeof accelerationY;
+
 /**
  * A `Number` system variable that tracks the mouse's horizontal movement.
  * 
@@ -75,14 +83,6 @@ declare const movedX: number;
 
 declare const __movedX: typeof movedX;
 
-/**
- * The system variable accelerationY always contains the acceleration of the
- * device along the y axis. Value is represented as meters per second squared.
- */
-declare const accelerationY: number;
-
-declare const __accelerationY: typeof accelerationY;
-
 /**
  * The system variable accelerationZ always contains the acceleration of the
  * device along the z axis. Value is represented as meters per second squared.
@@ -263,20 +263,6 @@ declare const pRotationX: number;
 
 declare const __pRotationX: typeof 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.
- */
-declare const mouseY: number;
-
-declare const __mouseY: typeof mouseY;
-
 /**
  * The system variable pRotationY always contains the rotation of the
  * device along the y axis in the frame previous to the current frame.
@@ -291,6 +277,20 @@ declare const pRotationY: number;
 
 declare const __pRotationY: typeof 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.
+ */
+declare const mouseY: number;
+
+declare const __mouseY: typeof mouseY;
+
 /**
  * The system variable pRotationZ always contains the rotation of the
  * device along the z axis in the frame previous to the current frame.
@@ -1099,19 +1099,6 @@ declare const DEG_TO_RAD: number;
 
 declare const __DEG_TO_RAD: typeof 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.
- */
-declare let disableFriendlyErrors: boolean;
-
-declare let __disableFriendlyErrors: typeof disableFriendlyErrors;
-
 declare const RAD_TO_DEG: number;
 
 declare const __RAD_TO_DEG: typeof RAD_TO_DEG;
@@ -1186,6 +1173,19 @@ declare const TRIANGLES: 4;
 
 declare const __TRIANGLES: typeof 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.
+ */
+declare let disableFriendlyErrors: boolean;
+
+declare let __disableFriendlyErrors: typeof disableFriendlyErrors;
+
 declare const TRIANGLE_FAN: 6;
 
 declare const __TRIANGLE_FAN: typeof TRIANGLE_FAN;
@@ -2311,6 +2311,65 @@ declare class p5 {
    */
   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`.
@@ -2383,65 +2442,6 @@ declare class p5 {
 
   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.
    * 
@@ -4375,7 +4375,7 @@ declare class p5 {
    * // Make a version of the shader with a hook overridden
    * modifiedShader = myShader.modify(() => {
    * // Create new uniforms and override the getColor hook
-   * let t = uniformFloat(() => millis() / 1000);
+   * let t = millis() / 1000;
    * getColor(() => {
    * return [0, 0.5 + 0.5 * sin(t), 1, 1];
    * });
@@ -4828,55 +4828,6 @@ declare class p5 {
    */
   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.
    * 
@@ -5297,23 +5248,72 @@ declare class p5 {
   line(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number): void;
 
   /**
-   * Clears the pixels on the canvas.
+   * A function that's called once when the sketch begins running.
    * 
-   * `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.
+   * 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:
    * 
-   * In WebGL mode, this function can clear the screen to a specific color. It
-   * interprets four numeric parameters as normalized RGBA color values. It also
-   * clears the depth buffer. If you are not using the WebGL renderer, these
-   * parameters will have no effect.
-   * @param r normalized red value.
-   * @param g normalized green value.
-   * @param b normalized blue value.
-   * @param a normalized alpha value.
+   * `function 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;
@@ -5612,17 +5612,6 @@ declare class p5 {
    */
   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.
    */
@@ -5783,7 +5772,7 @@ declare class p5 {
    * filterColor.texCoord.x // x coordinate, from 0 to 1
    * ));
    * filterColor.end();
-   * }`You can also animate your filters over time by passing the time into the shader with `uniformFloat`.
+   * }`You can also animate your filters over time using the `millis()` function.
    * 
    * `let myFilter;
    * function setup() {
@@ -5793,7 +5782,7 @@ declare class p5 {
    * }
    * 
    * function gradient() {
-   * let time = uniformFloat();
+   * let time = millis();
    * filterColor.begin();
    * filterColor.set(mix(
    * [1, 0, 0, 1], // Red
@@ -5804,9 +5793,8 @@ declare class p5 {
    * }
    * 
    * function draw() {
-   * myFilter.setUniform('time', millis());
    * filter(myFilter);
-   * }`We can use the `noise()` function built into strands to generate a color for each pixel.  (Again no need here for underlying content for the filter to operate on.)  Again we'll animate by passing in an announced uniform variable  `time` with `setUniform()`, each frame.
+   * }`We can use the `noise()` function built into strands to generate a color for each pixel.  (Again no need here for underlying content for the filter to operate on.)  Again we'll animate by using the millis() function to get an up-to-date time value.
    * 
    * `let myFilter;
    * 
@@ -5817,7 +5805,7 @@ declare class p5 {
    * }
    * 
    * function noiseShaderCallback() {
-   * let time = uniformFloat();
+   * let time = millis();
    * filterColor.begin();
    * let coord = filterColor.texCoord;
    * 
@@ -5834,7 +5822,6 @@ declare class p5 {
    * }
    * 
    * function draw() {
-   * myFilter.setUniform("time", millis());
    * filter(myFilter);
    * }`Like the `modify()` method on shaders,
    * advanced users can also fill in `filterColor` using <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>
@@ -5852,6 +5839,17 @@ declare class p5 {
   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.
    * 
@@ -5971,22 +5969,6 @@ declare class p5 {
    */
   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>.
    * 
@@ -6015,6 +5997,22 @@ declare class p5 {
    */
   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.
    * 
@@ -6292,26 +6290,20 @@ declare class p5 {
   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.
@@ -6334,20 +6326,26 @@ declare class p5 {
   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
@@ -6512,28 +6510,6 @@ declare class p5 {
   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`.
    * 
@@ -6593,6 +6569,28 @@ declare class p5 {
    */
   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.
    * 
@@ -6838,18 +6836,6 @@ declare class p5 {
   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.
    * 
@@ -6923,6 +6909,18 @@ declare class p5 {
   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;
   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
+   */
+  getURLParams(): object;
+
   /**
    * Shears the x-axis so that shapes appear skewed.
    * 
@@ -6970,104 +6968,6 @@ declare class p5 {
    */
   lightFalloff(constant: number, linear: number, quadratic: number): void;
 
-  /**
-   * A function that's called when the mouse moves.
-   * 
-   * Declaring the function `mouseMoved()` sets a code block to run
-   * automatically when the user moves the mouse without clicking any mouse
-   * buttons:
-   * 
-   * `function mouseMoved() {
-   * // Code to run.
-   * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
-   * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
-   * value when `mouseMoved()` is called by p5.js:
-   * 
-   * `function mouseMoved() {
-   * if (mouseX < 50) {
-   * // Code to run if the mouse is on the left.
-   * }
-   * 
-   * if (mouseY > 50) {
-   * // Code to run if the mouse is near the bottom.
-   * }
-   * }`The parameter, `event`, is optional. `mouseMoved()` is always passed a
-   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank">MouseEvent</a>
-   * object with properties that describe the mouse move event:
-   * 
-   * `function mouseMoved(event) {
-   * // Code to run that uses the event.
-   * console.log(event);
-   * }`Browsers may have default behaviors attached to various mouse events. For
-   * example, some browsers highlight text when the user moves the mouse while
-   * pressing a mouse button. To prevent any default behavior for this event,
-   * add `return false;` to the end of the function.
-   * @param event optional `MouseEvent` argument.
-   */
-  mouseMoved(event?: MouseEvent): void;
-
-  /**
-   * A function that's called when the mouse moves while a button is pressed.
-   * 
-   * Declaring the function `mouseDragged()` sets a code block to run
-   * automatically when the user clicks and drags the mouse:
-   * 
-   * `function mouseDragged() {
-   * // Code to run.
-   * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
-   * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
-   * value when `mouseDragged()` is called by p5.js:
-   * 
-   * `function mouseDragged() {
-   * if (mouseX < 50) {
-   * // Code to run if the mouse is on the left.
-   * }
-   * 
-   * if (mouseY > 50) {
-   * // Code to run if the mouse is near the bottom.
-   * }
-   * }`The parameter, `event`, is optional. `mouseDragged()` is always passed a
-   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank">MouseEvent</a>
-   * object with properties that describe the mouse drag event:
-   * 
-   * `function mouseDragged(event) {
-   * // Code to run that uses the event.
-   * console.log(event);
-   * }`On touchscreen devices, `mouseDragged()` will run when a user moves a touch
-   * point.
-   * 
-   * Browsers may have default behaviors attached to various mouse events. For
-   * example, some browsers highlight text when the user moves the mouse while
-   * pressing a mouse button. To prevent any default behavior for this event,
-   * add `return false;` to the end of the function.
-   * @param event optional `MouseEvent` argument.
-   */
-  mouseDragged(event?: MouseEvent): void;
-
-  /**
-   * Returns `true` if the key it’s checking is pressed and `false` if not.
-   * 
-   * `keyIsDown()` is helpful when checking for multiple different key presses.
-   * For example, `keyIsDown()` can be used to check if both `LEFT_ARROW` and
-   * `UP_ARROW` are pressed:
-   * 
-   * `if (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) {
-   * // Move diagonally.
-   * }``keyIsDown()` can check for key presses using strings based on
-   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key" target="_blank">KeyboardEvent.key</a>
-   * or <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code" target="_blank">KeyboardEvent.code</a> values,
-   * such as `keyIsDown('x')` or `keyIsDown('ArrowLeft')`.
-   * 
-   * Note: In p5.js 2.0 and newer, numeric keycodes (such as 88 for 'X') are no longer supported.
-   * This is a breaking change from previous versions.
-   * 
-   * You can still use the p5 constants like `LEFT_ARROW` which now map to string values
-   * internally rather than numeric codes.
-   * @param code key to check.
-   * @returns whether the key is down or not.
-   */
-  keyIsDown(code: number | string): boolean;
-
   /**
    * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply while drawing.
    * 
@@ -7107,7 +7007,7 @@ declare class p5 {
    * }
    * 
    * function material() {
-   * let time = uniformFloat();
+   * let time = millis() / 1000;
    * finalColor.begin();
    * let r = 0.2 + 0.5 * abs(sin(time + 0));
    * let g = 0.2 + 0.5 * abs(sin(time + 1));
@@ -7118,7 +7018,6 @@ declare class p5 {
    * 
    * function draw() {
    * background(245, 245, 220);
-   * myShader.setUniform('time', millis() / 1000);
    * shader(myShader);
    * 
    * rectMode(CENTER);
@@ -7232,21 +7131,102 @@ declare class p5 {
   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.
@@ -7260,31 +7240,21 @@ declare class p5 {
   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.
@@ -7312,8 +7282,35 @@ declare class p5 {
    * @param br optional radius of bottom-right corner.
    * @param bl optional radius of bottom-left corner.
    */
-  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;
+  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.
@@ -7619,6 +7616,22 @@ declare class p5 {
    */
   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.
    * 
@@ -7647,47 +7660,6 @@ declare class p5 {
   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.
    * 
@@ -7736,6 +7708,31 @@ declare class p5 {
   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.
    * 
@@ -8228,18 +8225,6 @@ declare class p5 {
    */
   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.
    * 
@@ -8256,6 +8241,25 @@ declare class p5 {
    */
   lightness(color: p5.Color | number[] | string): number;
 
+  /**
+   * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply for images.
+   * 
+   * This method allows the user to apply a custom shader to images, enabling
+   * advanced visual effects such as pixel manipulation, color adjustments,
+   * or dynamic behavior. The shader will be applied to the image drawn using
+   * the <a href="#/p5/image">image()</a> function.
+   * 
+   * The shader will be used exclusively for:
+   * 
+   * - `image()` calls, applying only when drawing 2D images.
+   * 
+   * - This shader will NOT apply to images used in <a href="#/p5/texture">texture()</a> or other 3D contexts.
+   * Any attempts to use the imageShader in these cases will be ignored.
+   * @param s <a href="#/p5.Shader">p5.Shader</a> object
+   * to apply for images.
+   */
+  imageShader(s: p5.Shader): void;
+
   /**
    * Changes the location from which images are drawn when
    * <a href="#/p5/image">image()</a> is called.
@@ -8324,23 +8328,16 @@ declare class p5 {
   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.
@@ -8630,7 +8627,7 @@ declare class p5 {
    * }
    * 
    * function material() {
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -8640,7 +8637,6 @@ declare class p5 {
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * lights();
    * noStroke();
    * fill('red');
@@ -8858,42 +8854,6 @@ declare class p5 {
    */
   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
@@ -8911,7 +8871,6 @@ declare class p5 {
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * lights();
    * noStroke();
    * fill('red');
@@ -8921,7 +8880,7 @@ declare class p5 {
    * might use the `pixelInputs` hook to change each pixel on the surface of a shape.
    * 
    * `// myMaterial.js
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -8941,6 +8900,42 @@ declare class p5 {
    */
   loadMaterialShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<p5.Shader>;
 
+  /**
+   * Saves a given element(image, text, json, csv, wav, or html) to the client's
+   * computer. The first parameter can be a pointer to element we want to save.
+   * The element can be one of <a href="#/p5.Element">p5.Element</a>,an Array of
+   * Strings, an Array of JSON, a JSON object, a <a href="#/p5.Table">p5.Table
+   * </a>, a <a href="#/p5.Image">p5.Image</a>, or a p5.SoundFile (requires
+   * p5.sound). The second parameter is a filename (including extension).The
+   * third parameter is for options specific to this type of object. This method
+   * will save a file that fits the given parameters.
+   * If it is called without specifying an element, by default it will save the
+   * whole canvas as an image file. You can optionally specify a filename as
+   * the first parameter in such a case.
+   * Note that it is not recommended to
+   * call this method within draw, as it will open a new save dialog on every
+   * render.
+   * @param objectOrFilename If filename is provided, will
+   * save canvas as an image with
+   * either png or jpg extension
+   * depending on the filename.
+   * If object is provided, will
+   * save depending on the object
+   * and filename (see examples
+   * above).
+   * @param filename If an object is provided as the first
+   * parameter, then the second parameter
+   * indicates the filename,
+   * and should include an appropriate
+   * file extension (see examples above).
+   * @param options Additional options depend on
+   * filetype. For example, when saving JSON,
+   * <code>true</code> indicates that the
+   * output will be optimized for filesize,
+   * rather than readability.
+   */
+  save(objectOrFilename?: object | string, filename?: string, options?: boolean | string): void;
+
   /**
    * Influences the shape of the Bézier curve segment in a custom shape.
    * By default, this is 3; the other possible parameter is 2. This
@@ -9023,6 +9018,19 @@ declare class p5 {
    */
   baseMaterialShader(): p5.Shader;
 
+  /**
+   * Returns the base shader used for filters.
+   * 
+   * Calling <a href="#/p5/buildFilterShader">`buildFilterShader(shaderFunction)`</a>
+   * is equivalent to calling `baseFilterShader().modify(shaderFunction)`.
+   * 
+   * Read <a href="#/p5/buildFilterShader">the `buildFilterShader` reference</a> or
+   * call `baseFilterShader().inspectHooks()` for more information on what you can do with
+   * the base filter shader.
+   * @returns The base filter shader.
+   */
+  baseFilterShader(): p5.Shader;
+
   /**
    * Starts using shapes to erase parts of the canvas.
    * 
@@ -9046,29 +9054,16 @@ declare class p5 {
    * 
    * To cancel the erasing effect, use the <a href="#/p5/noErase">noErase()</a>
    * function.
-   * 
-   * `erase()` has no effect on drawing done with the
-   * <a href="#/p5/image">image()</a> and
-   * <a href="#/p5/background">background()</a> functions.
-   * @param strengthFill a number (0-255) for the strength of erasing under a shape's interior.
-   * Defaults to 255, which is full strength.
-   * @param strengthStroke a number (0-255) for the strength of erasing under a shape's edge.
-   * Defaults to 255, which is full strength.
-   */
-  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.
+   * 
+   * `erase()` has no effect on drawing done with the
+   * <a href="#/p5/image">image()</a> and
+   * <a href="#/p5/background">background()</a> functions.
+   * @param strengthFill a number (0-255) for the strength of erasing under a shape's interior.
+   * Defaults to 255, which is full strength.
+   * @param strengthStroke a number (0-255) for the strength of erasing under a shape's edge.
+   * Defaults to 255, which is full strength.
    */
-  baseFilterShader(): p5.Shader;
+  erase(strengthFill?: number, strengthStroke?: number): void;
 
   /**
    * Ends erasing that was started with <a href="#/p5/erase">erase()</a>.
@@ -9098,37 +9093,6 @@ declare class p5 {
   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
@@ -9161,7 +9125,7 @@ declare class p5 {
    * }
    * 
    * function material() {
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    * 20. * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -9171,7 +9135,6 @@ declare class p5 {
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * noStroke();
    * sphere(50);
    * }`You may also want to change the colors used. By default, the x, y, and z values of the orientation
@@ -9264,6 +9227,37 @@ declare class p5 {
    */
   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.
    * 
@@ -9447,25 +9441,6 @@ declare class p5 {
    */
   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
@@ -9484,7 +9459,6 @@ declare class p5 {
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * lights();
    * noStroke();
    * fill('red');
@@ -9494,7 +9468,7 @@ declare class p5 {
    * might use the `finalColor` hook to change the color of each pixel on the surface of a shape.
    * 
    * `// myMaterial.js
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -9514,6 +9488,25 @@ declare class p5 {
    */
   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.
@@ -9606,7 +9599,7 @@ declare class p5 {
    * }
    * 
    * function material() {
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -9616,7 +9609,6 @@ declare class p5 {
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * noStroke();
    * fill('red');
    * circle(0, 0, 50);
@@ -9730,7 +9722,6 @@ declare class p5 {
    * function draw() {
    * background(255);
    * shader(myShader);
-   * myShader.setUniform('time', millis());
    * lights();
    * noStroke();
    * fill('red');
@@ -9740,7 +9731,7 @@ declare class p5 {
    * might use the `finalColor` hook to change the color of each pixel on the surface of a shape.
    * 
    * `// myMaterial.js
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * worldInputs.position.y +=
    * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
@@ -10025,7 +10016,7 @@ declare class p5 {
    * }
    * 
    * function material() {
-   * let time = uniformFloat();
+   * let time = millis();
    * worldInputs.begin();
    * // Add a somewhat random offset to the weight
    * // that varies based on position and time
@@ -10041,7 +10032,6 @@ declare class p5 {
    * function draw() {
    * background(255);
    * strokeShader(myShader);
-   * myShader.setUniform('time', millis());
    * strokeWeight(10);
    * beginShape();
    * for (let i = 0; i <= 50; i++) {
@@ -10132,6 +10122,58 @@ declare class p5 {
   splineProperty(property: string, value: any): void;
   splineProperty(property: string): void;
 
+  /**
+   * Loads a new shader from a file that can change how strokes are drawn. Pass the resulting
+   * shader into the <a href="#/p5/strokeShader">`strokeShader()`</a> function to apply it
+   * to any strokes you draw.
+   * 
+   * Since this function loads data from another file, it returns a `Promise`.
+   * Use it in an `async function setup`, and `await` its result.
+   * 
+   * `let myShader;
+   * async function setup() {
+   * createCanvas(200, 200, WEBGL);
+   * myShader = await loadStrokeShader('myMaterial.js');
+   * }
+   * 
+   * function draw() {
+   * background(255);
+   * strokeShader(myShader);
+   * strokeWeight(30);
+   * line(
+   * -width/3,
+   * sin(millis()*0.001) * height/4,
+   * width/3,
+   * sin(millis()*0.001 + 1) * height/4
+   * );
+   * }`Inside your shader file, you can call p5.strands hooks to change parts of the shader. For
+   * example, you might use the `worldInputs` hook to change each vertex, or you
+   * might use the `pixelInputs` hook to change each pixel on the surface of a stroke.
+   * 
+   * `// myMaterial.js
+   * pixelInputs.begin();
+   * let opacity = 1 - smoothstep(
+   * 0,
+   * 15,
+   * length(pixelInputs.position - pixelInputs.center)
+   * );
+   * pixelInputs.color.a *= opacity;
+   * pixelInputs.end();`Read the reference for <a href="#/p5/buildStrokeShader">`buildStrokeShader`</a>,
+   * the version of `loadStrokeShader` that takes in a function instead of a separate file,
+   * for a full list of hooks you can use and examples for each.
+   * 
+   * The second parameter, `successCallback`, is optional. If a function is passed, as in
+   * `loadStrokeShader('myShader.js', onLoaded)`, then the `onLoaded()` function will be called
+   * once the shader loads. The shader will be passed to `onLoaded()` as its only argument.
+   * The return value of `handleData()`, if present, will be used as the final return value of
+   * `loadStrokeShader('myShader.js', onLoaded)`.
+   * @param url The URL of your p5.strands JavaScript file.
+   * @param onSuccess A callback function to run when loading completes.
+   * @param onFailure A callback function to run when loading fails.
+   * @returns The stroke shader.
+   */
+  loadStrokeShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<p5.Shader>;
+
   /**
    * Sets a perspective projection for the current camera in a 3D sketch.
    * 
@@ -10186,58 +10228,6 @@ declare class p5 {
    */
   perspective(fovy?: number, aspect?: number, near?: number, far?: number): void;
 
-  /**
-   * Loads a new shader from a file that can change how strokes are drawn. Pass the resulting
-   * shader into the <a href="#/p5/strokeShader">`strokeShader()`</a> function to apply it
-   * to any strokes you draw.
-   * 
-   * Since this function loads data from another file, it returns a `Promise`.
-   * Use it in an `async function setup`, and `await` its result.
-   * 
-   * `let myShader;
-   * async function setup() {
-   * createCanvas(200, 200, WEBGL);
-   * myShader = await loadStrokeShader('myMaterial.js');
-   * }
-   * 
-   * function draw() {
-   * background(255);
-   * strokeShader(myShader);
-   * strokeWeight(30);
-   * line(
-   * -width/3,
-   * sin(millis()*0.001) * height/4,
-   * width/3,
-   * sin(millis()*0.001 + 1) * height/4
-   * );
-   * }`Inside your shader file, you can call p5.strands hooks to change parts of the shader. For
-   * example, you might use the `worldInputs` hook to change each vertex, or you
-   * might use the `pixelInputs` hook to change each pixel on the surface of a stroke.
-   * 
-   * `// myMaterial.js
-   * pixelInputs.begin();
-   * let opacity = 1 - smoothstep(
-   * 0,
-   * 15,
-   * length(pixelInputs.position - pixelInputs.center)
-   * );
-   * pixelInputs.color.a *= opacity;
-   * pixelInputs.end();`Read the reference for <a href="#/p5/buildStrokeShader">`buildStrokeShader`</a>,
-   * the version of `loadStrokeShader` that takes in a function instead of a separate file,
-   * for a full list of hooks you can use and examples for each.
-   * 
-   * The second parameter, `successCallback`, is optional. If a function is passed, as in
-   * `loadStrokeShader('myShader.js', onLoaded)`, then the `onLoaded()` function will be called
-   * once the shader loads. The shader will be passed to `onLoaded()` as its only argument.
-   * The return value of `handleData()`, if present, will be used as the final return value of
-   * `loadStrokeShader('myShader.js', onLoaded)`.
-   * @param url The URL of your p5.strands JavaScript file.
-   * @param onSuccess A callback function to run when loading completes.
-   * @param onFailure A callback function to run when loading fails.
-   * @returns The stroke shader.
-   */
-  loadStrokeShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<p5.Shader>;
-
   /**
    * Returns the default shader used for strokes.
    * 
@@ -10282,6 +10272,17 @@ declare class p5 {
    */
   splineProperties(values: object): object;
 
+  /**
+   * Restores the default shaders.
+   * 
+   * `resetShader()` deactivates any shaders previously applied by
+   * <a href="#/p5/shader">shader()</a>, <a href="#/p5/strokeShader">strokeShader()</a>,
+   * or <a href="#/p5/imageShader">imageShader()</a>.
+   * 
+   * Note: Shaders can only be used in WebGL mode.
+   */
+  resetShader(): void;
+
   /**
    * Enables or disables perspective for lines in 3D sketches.
    * 
@@ -10319,17 +10320,6 @@ declare class p5 {
   linePerspective(enable: boolean): boolean;
   linePerspective(): boolean;
 
-  /**
-   * Restores the default shaders.
-   * 
-   * `resetShader()` deactivates any shaders previously applied by
-   * <a href="#/p5/shader">shader()</a>, <a href="#/p5/strokeShader">strokeShader()</a>,
-   * or <a href="#/p5/imageShader">imageShader()</a>.
-   * 
-   * Note: Shaders can only be used in WebGL mode.
-   */
-  resetShader(): void;
-
   /**
    * Sets an orthographic projection for the current camera in a 3D sketch.
    * 
@@ -11679,8 +11669,8 @@ declare class p5 {
   readonly HSB: typeof HSB;
   readonly deviceOrientation: typeof deviceOrientation;
   readonly accelerationX: typeof accelerationX;
-  readonly movedX: typeof movedX;
   readonly accelerationY: typeof accelerationY;
+  readonly movedX: typeof movedX;
   readonly accelerationZ: typeof accelerationZ;
   readonly pAccelerationX: typeof pAccelerationX;
   readonly pAccelerationY: typeof pAccelerationY;
@@ -11696,8 +11686,8 @@ declare class p5 {
   readonly mouseX: typeof mouseX;
   readonly rotationZ: typeof rotationZ;
   readonly pRotationX: typeof pRotationX;
-  readonly mouseY: typeof mouseY;
   readonly pRotationY: typeof pRotationY;
+  readonly mouseY: typeof mouseY;
   readonly pRotationZ: typeof pRotationZ;
   readonly pmouseX: typeof pmouseX;
   readonly code: typeof code;
@@ -11750,7 +11740,6 @@ declare class p5 {
   readonly TAU: typeof TAU;
   readonly TWO_PI: typeof TWO_PI;
   readonly DEG_TO_RAD: typeof DEG_TO_RAD;
-  disableFriendlyErrors: typeof disableFriendlyErrors;
   readonly RAD_TO_DEG: typeof RAD_TO_DEG;
   readonly CORNER: typeof CORNER;
   readonly CORNERS: typeof CORNERS;
@@ -11767,6 +11756,7 @@ declare class p5 {
   readonly LINE_STRIP: typeof LINE_STRIP;
   readonly LINE_LOOP: typeof LINE_LOOP;
   readonly TRIANGLES: typeof TRIANGLES;
+  disableFriendlyErrors: typeof disableFriendlyErrors;
   readonly TRIANGLE_FAN: typeof TRIANGLE_FAN;
   readonly TRIANGLE_STRIP: typeof TRIANGLE_STRIP;
   readonly QUADS: typeof QUADS;
@@ -11876,8 +11866,8 @@ const P2D: typeof __P2D;
 const HSB: typeof __HSB;
 const deviceOrientation: typeof __deviceOrientation;
 const accelerationX: typeof __accelerationX;
-const movedX: typeof __movedX;
 const accelerationY: typeof __accelerationY;
+const movedX: typeof __movedX;
 const accelerationZ: typeof __accelerationZ;
 const pAccelerationX: typeof __pAccelerationX;
 const pAccelerationY: typeof __pAccelerationY;
@@ -11893,8 +11883,8 @@ const focused: typeof __focused;
 const mouseX: typeof __mouseX;
 const rotationZ: typeof __rotationZ;
 const pRotationX: typeof __pRotationX;
-const mouseY: typeof __mouseY;
 const pRotationY: typeof __pRotationY;
+const mouseY: typeof __mouseY;
 const pRotationZ: typeof __pRotationZ;
 const pmouseX: typeof __pmouseX;
 const code: typeof __code;
@@ -11947,7 +11937,6 @@ const QUARTER_PI: typeof __QUARTER_PI;
 const TAU: typeof __TAU;
 const TWO_PI: typeof __TWO_PI;
 const DEG_TO_RAD: typeof __DEG_TO_RAD;
-let disableFriendlyErrors: typeof __disableFriendlyErrors;
 const RAD_TO_DEG: typeof __RAD_TO_DEG;
 const CORNER: typeof __CORNER;
 const CORNERS: typeof __CORNERS;
@@ -11964,6 +11953,7 @@ const LINES: typeof __LINES;
 const LINE_STRIP: typeof __LINE_STRIP;
 const LINE_LOOP: typeof __LINE_LOOP;
 const TRIANGLES: typeof __TRIANGLES;
+let disableFriendlyErrors: typeof __disableFriendlyErrors;
 const TRIANGLE_FAN: typeof __TRIANGLE_FAN;
 const TRIANGLE_STRIP: typeof __TRIANGLE_STRIP;
 const QUADS: typeof __QUADS;
@@ -13020,23 +13010,27 @@ const EXCLUDE: typeof __EXCLUDE;
    * plane(width, height); // Draw a plane with the shader applied
    * }`In addition to calling hooks, you can create uniforms, which are special variables
    * used to pass data from p5.js into the shader. They can be created by calling `uniform` + the
-   * type of the data, such as `uniformFloat` for a number of `uniformVector2` for a two-component vector.
+   * type of the data, such as `uniformFloat` for a number or `uniformVector2` for a two-component vector.
    * They take in a function that returns the data for the variable. You can then reference these
    * variables in your hooks, and their values will update every time you apply
    * the shader with the result of your function.
    * 
+   * Move the mouse over this sketch to increase the moveCounter which will be passed to the shader as a uniform.
+   * 
    * `let myShader;
+   * //count of frames in which mouse has been moved
+   * let moveCounter = 0;
    * 
    * function setup() {
    * createCanvas(200, 200, WEBGL);
    * myShader = baseMaterialShader().modify(() => {
-   * // Get the current time from p5.js
-   * let t = uniformFloat(() => millis());
+   * // Get the move counter from our sketch
+   * let count = uniformFloat(() => moveCounter);
    * 
    * getPixelInputs((inputs) => {
    * inputs.color = [
    * inputs.texCoord,
-   * sin(t * 0.01) / 2 + 0.5,
+   * sin(count/100) / 2 + 0.5,
    * 1,
    * ];
    * return inputs;
@@ -13044,6 +13038,10 @@ const EXCLUDE: typeof __EXCLUDE;
    * });
    * }
    * 
+   * function mouseDragged(){
+   * moveCounter += 1;
+   * }
+   * 
    * function draw() {
    * background(255);
    * noStroke(255);