p5 2.2.1 → 2.2.2-rc.1

package/types/global.d.ts

@@ -5153,6 +5153,112 @@ EXCLUDE: typeof P5.EXCLUDE;
   min(n0: number, n1: number): number;
   min(nums: number[]): number;
 
+  /**
+   * A function that's called when the browser window is resized.
+   * 
+   * Code placed in the body of `windowResized()` will run when the
+   * browser window's size changes. It's a good place to call
+   * <a href="#/p5/resizeCanvas">resizeCanvas()</a> or make other
+   * adjustments to accommodate the new window size.
+   * 
+   * The `event` parameter is optional. If added to the function declaration, it
+   * can be used for debugging or other purposes.
+   * @param event optional resize Event.
+   */
+  windowResized(event?: Event): void;
+
+  /**
+   * Shuffles the elements of an array.
+   * 
+   * The first parameter, `array`, is the array to be shuffled. For example,
+   * calling `shuffle(myArray)` will shuffle the elements of `myArray`. By
+   * default, the original array won’t be modified. Instead, a copy will be
+   * created, shuffled, and returned.
+   * 
+   * The second parameter, `modify`, is optional. If `true` is passed, as in
+   * `shuffle(myArray, true)`, then the array will be shuffled in place without
+   * making a copy.
+   * @param array array to shuffle.
+   * @param modify if `true`, shuffle the original array in place. Defaults to `false`.
+   * @returns shuffled array.
+   */
+  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.
+   */
+  noDebugMode(): void;
+
+  /**
+   * Gets the blue value of a color.
+   * 
+   * `blue()` extracts the blue 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, `blue()` returns a color's blue value in the range 0
+   * to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to RGB, it
+   * returns the blue 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 blue value.
+   */
+  blue(color: P5.Color | number[] | string): number;
+
+  /**
+   * Converts a single-character `String` to a `Number`.
+   * 
+   * `unchar()` converts single-character strings to their corresponding
+   * integer (whole number).
+   * 
+   * The parameter, `n`, is the character to convert. For example,
+   * `unchar('A')`, returns the number 65. If an array is passed, as in
+   * `unchar(['A', 'B', 'C'])`, an array of integers is returned.
+   * @param n value to convert.
+   * @returns converted number.
+   */
+  unchar(n: string): number;
+  unchar(ns: string[]): number[];
+
+  /**
+   * Changes the unit system used to measure angles.
+   * 
+   * Degrees and radians are both units for measuring angles. There are 360˚ in
+   * one full rotation. A full rotation is 2 × π (about 6.28) radians.
+   * 
+   * Functions such as <a href="#/p5/rotate">rotate()</a> and
+   * <a href="#/p5/sin">sin()</a> expect angles measured radians by default.
+   * Calling `angleMode(DEGREES)` switches to degrees. Calling
+   * `angleMode(RADIANS)` switches back to radians.
+   * 
+   * Calling `angleMode()` with no arguments returns current angle mode, which
+   * is either `RADIANS` or `DEGREES`.
+   * @param mode either RADIANS or DEGREES.
+   * @returns mode either RADIANS or DEGREES
+   */
+  angleMode(mode: typeof P5.RADIANS | typeof P5.DEGREES): typeof P5.RADIANS | typeof P5.DEGREES;
+  angleMode(): typeof P5.RADIANS | typeof P5.DEGREES;
+
+  /**
+   * Loads the current value of each pixel on the canvas into the
+   * <a href="#/p5/pixels">pixels</a> array.
+   * 
+   * `loadPixels()` must be called before reading from or writing to
+   * <a href="#/p5/pixels">pixels</a>.
+   */
+  loadPixels(): void;
+
   /**
    * Creates a <a href="#/p5.Shader">p5.Shader</a> object to be used with the
    * <a href="#/p5/filter">filter()</a> function.
@@ -5272,6 +5378,36 @@ 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.
+   * 
+   * `let myFilter;
+   * 
+   * function setup() {
+   * createCanvas(100, 100, WEBGL);
+   * myFilter = buildFilterShader(noiseShaderCallback);
+   * describe('Evolving animated cloud-like noise in cyan and magenta');
+   * }
+   * 
+   * function noiseShaderCallback() {
+   * let time = uniformFloat();
+   * filterColor.begin();
+   * let coord = filterColor.texCoord;
+   * 
+   * //generate a value roughly between 0 and 1
+   * let noiseVal = noise(coord.x, coord.y, time / 2000);
+   * 
+   * let result = mix(
+   * [1, 0, 1, 1], // Magenta
+   * [0, 1, 1, 1], // Cyan
+   * noiseVal
+   * );
+   * filterColor.set(result);
+   * filterColor.end();
+   * }
+   * 
+   * 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>
    * instead of JavaScript.
@@ -5282,116 +5418,11 @@ EXCLUDE: typeof P5.EXCLUDE;
    * For more info about filters and shaders, see Adam Ferriss' <a href="https://github.com/aferriss/p5jsShaderExamples">repo of shader examples</a>
    * or the <a href="https://p5js.org/learn/getting-started-in-webgl-shaders.html">Introduction to Shaders</a> tutorial.
    * @param callback A function building a p5.strands shader.
+   * @param scope An optional scope object passed to .modify().
    * @returns The material shader
    */
-  buildFilterShader(callback: Function): P5.Shader;
-  buildFilterShader(hooks: object): P5.Shader;
-
-  /**
-   * A function that's called when the browser window is resized.
-   * 
-   * Code placed in the body of `windowResized()` will run when the
-   * browser window's size changes. It's a good place to call
-   * <a href="#/p5/resizeCanvas">resizeCanvas()</a> or make other
-   * adjustments to accommodate the new window size.
-   * 
-   * The `event` parameter is optional. If added to the function declaration, it
-   * can be used for debugging or other purposes.
-   * @param event optional resize Event.
-   */
-  windowResized(event?: Event): void;
-
-  /**
-   * Shuffles the elements of an array.
-   * 
-   * The first parameter, `array`, is the array to be shuffled. For example,
-   * calling `shuffle(myArray)` will shuffle the elements of `myArray`. By
-   * default, the original array won’t be modified. Instead, a copy will be
-   * created, shuffled, and returned.
-   * 
-   * The second parameter, `modify`, is optional. If `true` is passed, as in
-   * `shuffle(myArray, true)`, then the array will be shuffled in place without
-   * making a copy.
-   * @param array array to shuffle.
-   * @param modify if `true`, shuffle the original array in place. Defaults to `false`.
-   * @returns shuffled array.
-   */
-  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.
-   */
-  noDebugMode(): void;
-
-  /**
-   * Gets the blue value of a color.
-   * 
-   * `blue()` extracts the blue 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, `blue()` returns a color's blue value in the range 0
-   * to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to RGB, it
-   * returns the blue 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 blue value.
-   */
-  blue(color: P5.Color | number[] | string): number;
-
-  /**
-   * Converts a single-character `String` to a `Number`.
-   * 
-   * `unchar()` converts single-character strings to their corresponding
-   * integer (whole number).
-   * 
-   * The parameter, `n`, is the character to convert. For example,
-   * `unchar('A')`, returns the number 65. If an array is passed, as in
-   * `unchar(['A', 'B', 'C'])`, an array of integers is returned.
-   * @param n value to convert.
-   * @returns converted number.
-   */
-  unchar(n: string): number;
-  unchar(ns: string[]): number[];
-
-  /**
-   * Changes the unit system used to measure angles.
-   * 
-   * Degrees and radians are both units for measuring angles. There are 360˚ in
-   * one full rotation. A full rotation is 2 × π (about 6.28) radians.
-   * 
-   * Functions such as <a href="#/p5/rotate">rotate()</a> and
-   * <a href="#/p5/sin">sin()</a> expect angles measured radians by default.
-   * Calling `angleMode(DEGREES)` switches to degrees. Calling
-   * `angleMode(RADIANS)` switches back to radians.
-   * 
-   * Calling `angleMode()` with no arguments returns current angle mode, which
-   * is either `RADIANS` or `DEGREES`.
-   * @param mode either RADIANS or DEGREES.
-   * @returns mode either RADIANS or DEGREES
-   */
-  angleMode(mode: typeof P5.RADIANS | typeof P5.DEGREES): typeof P5.RADIANS | typeof P5.DEGREES;
-  angleMode(): typeof P5.RADIANS | typeof P5.DEGREES;
-
-  /**
-   * Loads the current value of each pixel on the canvas into the
-   * <a href="#/p5/pixels">pixels</a> array.
-   * 
-   * `loadPixels()` must be called before reading from or writing to
-   * <a href="#/p5/pixels">pixels</a>.
-   */
-  loadPixels(): void;
+  buildFilterShader(callback: Function, scope?: object): P5.Shader;
+  buildFilterShader(hooks: object, scope?: object): P5.Shader;
 
   /**
    * Creates a slider `&lt;input&gt;&lt;/input&gt;` element.
@@ -5557,53 +5588,14 @@ EXCLUDE: typeof P5.EXCLUDE;
   fullscreen(val?: boolean): boolean;
 
   /**
-   * Creates a <a href="#/p5.Shader">p5.Shader</a> object to be used with the
-   * <a href="#/p5/filter">filter()</a> function using GLSL.
-   * 
-   * Since this method requires you to write your shaders in GLSL, it is most suitable
-   * for advanced use cases. Consider using <a href="#/p5/buildFilterShader">`buildFilterShader`</a>
-   * first, as a way to create filters in JavaScript using p5.strands.
-   * 
-   * `createFilterShader()` works like
-   * <a href="#/p5/createShader">createShader()</a> but has a default vertex
-   * shader included. `createFilterShader()` is intended to be used along with
-   * <a href="#/p5/filter">filter()</a> for filtering the contents of a canvas.
-   * A filter shader will be applied to the whole canvas instead of just
-   * <a href="#/p5.Geometry">p5.Geometry</a> objects.
+   * Creates a light that shines from a point in all directions.
    * 
-   * The parameter, `fragSrc`, sets the fragment shader. It’s a string that
-   * contains the fragment shader program written in
-   * <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>.
+   * Point lights are like light bulbs that shine in all directions. They can be
+   * placed at different positions to achieve different lighting effects. A
+   * maximum of 5 point lights can be active at once.
    * 
-   * The <a href="#/p5.Shader">p5.Shader</a> object that's created has some
-   * uniforms that can be set:
-   * 
-   * - `sampler2D tex0`, which contains the canvas contents as a texture.
-   * 
-   * - `vec2 canvasSize`, which is the width and height of the canvas, not including pixel density.
-   * 
-   * - `vec2 texelSize`, which is the size of a physical pixel including pixel density. This is calculated as `1.0 / (width * density)` for the pixel width and `1.0 / (height * density)` for the pixel height.
-   * 
-   * The <a href="#/p5.Shader">p5.Shader</a> that's created also provides
-   * `varying vec2 vTexCoord`, a coordinate with values between 0 and 1.
-   * `vTexCoord` describes where on the canvas the pixel will be drawn.
-   * 
-   * For more info about filters and shaders, see Adam Ferriss' <a href="https://github.com/aferriss/p5jsShaderExamples">repo of shader examples</a>
-   * or the <a href="https://p5js.org/learn/getting-started-in-webgl-shaders.html">Introduction to Shaders</a> tutorial.
-   * @param fragSrc source code for the fragment shader.
-   * @returns new shader object created from the fragment shader.
-   */
-  createFilterShader(fragSrc: string): P5.Shader;
-
-  /**
-   * Creates a light that shines from a point in all directions.
-   * 
-   * Point lights are like light bulbs that shine in all directions. They can be
-   * placed at different positions to achieve different lighting effects. A
-   * maximum of 5 point lights can be active at once.
-   * 
-   * There are four ways to call `pointLight()` with parameters to set the
-   * light’s color and position.
+   * There are four ways to call `pointLight()` with parameters to set the
+   * light’s color and position.
    * 
    * The first way to call `pointLight()` has six parameters. The first three
    * parameters, `v1`, `v2`, and `v3`, set the light’s color using the current
@@ -5702,6 +5694,45 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   createButton(label: string, value?: string): P5.Element;
 
+  /**
+   * Creates a <a href="#/p5.Shader">p5.Shader</a> object to be used with the
+   * <a href="#/p5/filter">filter()</a> function using GLSL.
+   * 
+   * Since this method requires you to write your shaders in GLSL, it is most suitable
+   * for advanced use cases. Consider using <a href="#/p5/buildFilterShader">`buildFilterShader`</a>
+   * first, as a way to create filters in JavaScript using p5.strands.
+   * 
+   * `createFilterShader()` works like
+   * <a href="#/p5/createShader">createShader()</a> but has a default vertex
+   * shader included. `createFilterShader()` is intended to be used along with
+   * <a href="#/p5/filter">filter()</a> for filtering the contents of a canvas.
+   * A filter shader will be applied to the whole canvas instead of just
+   * <a href="#/p5.Geometry">p5.Geometry</a> objects.
+   * 
+   * The parameter, `fragSrc`, sets the fragment shader. It’s a string that
+   * contains the fragment shader program written in
+   * <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>.
+   * 
+   * The <a href="#/p5.Shader">p5.Shader</a> object that's created has some
+   * uniforms that can be set:
+   * 
+   * - `sampler2D tex0`, which contains the canvas contents as a texture.
+   * 
+   * - `vec2 canvasSize`, which is the width and height of the canvas, not including pixel density.
+   * 
+   * - `vec2 texelSize`, which is the size of a physical pixel including pixel density. This is calculated as `1.0 / (width * density)` for the pixel width and `1.0 / (height * density)` for the pixel height.
+   * 
+   * The <a href="#/p5.Shader">p5.Shader</a> that's created also provides
+   * `varying vec2 vTexCoord`, a coordinate with values between 0 and 1.
+   * `vTexCoord` describes where on the canvas the pixel will be drawn.
+   * 
+   * For more info about filters and shaders, see Adam Ferriss' <a href="https://github.com/aferriss/p5jsShaderExamples">repo of shader examples</a>
+   * or the <a href="https://p5js.org/learn/getting-started-in-webgl-shaders.html">Introduction to Shaders</a> tutorial.
+   * @param fragSrc source code for the fragment shader.
+   * @returns new shader object created from the fragment shader.
+   */
+  createFilterShader(fragSrc: string): P5.Shader;
+
   /**
    * Concludes the vertices of a custom shape.
    * 
@@ -6379,169 +6410,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;
 
-  /**
-   * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply while drawing.
-   * 
-   * Shaders are programs that run on the graphics processing unit (GPU). They
-   * can process many pixels or vertices at the same time, making them fast for
-   * many graphics tasks.
-   * 
-   * You can make new shaders using p5.strands with the
-   * <a href="#/p5/buildMaterialShader">`buildMaterialShader`</a>,
-   * <a href="#/p5/buildColorShader">`buildColorShader`</a>, and
-   * <a href="#/p5/buildNormalShader">`buildNormalShader`</a> functions. You can also use
-   * <a href="#/p5/buildFilterShader">`buildFilterShader`</a> alongside
-   * <a href="#/p5/filter">`filter`</a>, and
-   * <a href="#/p5/buildStrokeShader">`buildStrokeShader`</a> alongside
-   * <a href="#/p5/stroke">`stroke`</a>.
-   * 
-   * The parameter, `s`, is the <a href="#/p5.Shader">p5.Shader</a> object to
-   * apply. For example, calling `shader(myShader)` applies `myShader` to
-   * process each pixel on the canvas. This only changes the fill (the inner part of shapes),
-   * but does not affect the outlines (strokes) or any images drawn using the `image()` function.
-   * The source code from a <a href="#/p5.Shader">p5.Shader</a> object's
-   * fragment and vertex shaders will be compiled the first time it's passed to
-   * `shader()`.
-   * 
-   * Calling <a href="#/p5/resetShader">resetShader()</a> restores a sketch’s
-   * default shaders.
-   * 
-   * Note: Shaders can only be used in WebGL mode.
-   * 
-   * `let myShader;
-   * 
-   * function setup() {
-   * createCanvas(200, 200, WEBGL);
-   * myShader = buildMaterialShader(material);
-   * noStroke();
-   * describe('A square with dynamically changing colors on a beige background.');
-   * }
-   * 
-   * function material() {
-   * let time = uniformFloat();
-   * finalColor.begin();
-   * let r = 0.2 + 0.5 * abs(sin(time + 0));
-   * let g = 0.2 + 0.5 * abs(sin(time + 1));
-   * let b = 0.2 + 0.5 * abs(sin(time + 2));
-   * finalColor.set([r, g, b, 1]);
-   * finalColor.end();
-   * }
-   * 
-   * function draw() {
-   * background(245, 245, 220);
-   * myShader.setUniform('time', millis() / 1000);
-   * shader(myShader);
-   * 
-   * rectMode(CENTER);
-   * rect(0, 0, 50, 50);
-   * }`For advanced usage, shaders can be written in a language called
-   * <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>.
-   * <a href="#/p5.Shader">p5.Shader</a> objects can be created in this way using the
-   * <a href="#/p5/createShader">createShader()</a> and
-   * <a href="#/p5/loadShader">loadShader()</a> functions.
-   * 
-   * `let fillShader;
-   * 
-   * let vertSrc = `
-   * precision highp float;
-   * attribute vec3 aPosition;
-   * uniform mat4 uModelViewMatrix;
-   * uniform mat4 uProjectionMatrix;
-   * varying vec3 vPosition;
-   * 
-   * void main() {
-   * vPosition = aPosition;
-   * gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
-   * }
-   * `;
-   * 
-   * let fragSrc = `
-   * precision highp float;
-   * uniform vec3 uLightDir;
-   * varying vec3 vPosition;
-   * 
-   * void main() {
-   * vec3 lightDir = normalize(uLightDir);
-   * float brightness = dot(lightDir, normalize(vPosition));
-   * brightness = clamp(brightness, 0.4, 1.0);
-   * vec3 color = vec3(0.3, 0.5, 1.0);
-   * color = color * brightness * 3.0;
-   * gl_FragColor = vec4(color, 1.0);
-   * }
-   * `;
-   * 
-   * function setup() {
-   * createCanvas(200, 200, WEBGL);
-   * fillShader = createShader(vertSrc, fragSrc);
-   * noStroke();
-   * describe('A rotating torus with simulated directional lighting.');
-   * }
-   * 
-   * function draw() {
-   * background(20, 20, 40);
-   * let lightDir = [0.5, 0.5, 1.0];
-   * fillShader.setUniform('uLightDir', lightDir);
-   * shader(fillShader);
-   * rotateY(frameCount * 0.02);
-   * rotateX(frameCount * 0.02);
-   * torus(25, 10, 30, 30);
-   * }``let fillShader;
-   * 
-   * let vertSrc = `
-   * precision highp float;
-   * attribute vec3 aPosition;
-   * uniform mat4 uProjectionMatrix;
-   * uniform mat4 uModelViewMatrix;
-   * varying vec3 vPosition;
-   * void main() {
-   * vPosition = aPosition;
-   * gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
-   * }
-   * `;
-   * 
-   * let fragSrc = `
-   * precision highp float;
-   * uniform vec3 uLightPos;
-   * uniform vec3 uFillColor;
-   * varying vec3 vPosition;
-   * void main() {
-   * float brightness = dot(normalize(uLightPos), normalize(vPosition));
-   * brightness = clamp(brightness, 0.0, 1.0);
-   * vec3 color = uFillColor * brightness;
-   * gl_FragColor = vec4(color, 1.0);
-   * }
-   * `;
-   * 
-   * function setup() {
-   * createCanvas(200, 200, WEBGL);
-   * fillShader = createShader(vertSrc, fragSrc);
-   * shader(fillShader);
-   * noStroke();
-   * describe('A square affected by both fill color and lighting, with lights controlled by mouse.');
-   * }
-   * 
-   * function draw() {
-   * let lightPos = [(mouseX - width / 2) / width,
-   * (mouseY - height / 2) / height, 1.0];
-   * fillShader.setUniform('uLightPos', lightPos);
-   * let fillColor = [map(mouseX, 0, width, 0, 1),
-   * map(mouseY, 0, height, 0, 1), 0.5];
-   * fillShader.setUniform('uFillColor', fillColor);
-   * plane(width, height);
-   * }`<div>
-   * <p>If you want to apply shaders to strokes or images, use the following methods:
-   * 
-   * - <a href="#/p5/strokeShader">strokeShader()</a> : Applies a shader to the stroke (outline) of shapes, allowing independent control over the stroke rendering using shaders.
-   * 
-   * - <a href="#/p5/imageShader">imageShader()</a> : Applies a shader to images or textures, controlling how the shader modifies their appearance during rendering.
-   * 
-   * </p>
-   * </div>
-   * @param s <a href="#/p5.Shader">p5.Shader</a> object
-   * to apply.
-   */
-  shader(s: P5.Shader): void;
-
   /**
    * 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>
@@ -6773,25 +6641,177 @@ EXCLUDE: typeof P5.EXCLUDE;
   keyIsDown(code: number | string): boolean;
 
   /**
-   * Sets the element's content.
+   * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply while drawing.
    * 
-   * An element's content is the text between its tags. For example, the element
-   * `&lt;language&gt;JavaScript&lt;/language&gt;` has the content `JavaScript`.
+   * Shaders are programs that run on the graphics processing unit (GPU). They
+   * can process many pixels or vertices at the same time, making them fast for
+   * many graphics tasks.
    * 
-   * The parameter, `content`, is a string with the element's new content.
-   * @param content new content for the element.
-   */
-  setContent(content: string): void;
-
-  /**
-   * Draws a <a href="#/p5.Geometry">p5.Geometry</a> object to the canvas.
+   * You can make new shaders using p5.strands with the
+   * <a href="#/p5/buildMaterialShader">`buildMaterialShader`</a>,
+   * <a href="#/p5/buildColorShader">`buildColorShader`</a>, and
+   * <a href="#/p5/buildNormalShader">`buildNormalShader`</a> functions. You can also use
+   * <a href="#/p5/buildFilterShader">`buildFilterShader`</a> alongside
+   * <a href="#/p5/filter">`filter`</a>, and
+   * <a href="#/p5/buildStrokeShader">`buildStrokeShader`</a> alongside
+   * <a href="#/p5/stroke">`stroke`</a>.
    * 
-   * The parameter, `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
+   * The parameter, `s`, is the <a href="#/p5.Shader">p5.Shader</a> object to
+   * apply. For example, calling `shader(myShader)` applies `myShader` to
+   * process each pixel on the canvas. This only changes the fill (the inner part of shapes),
+   * but does not affect the outlines (strokes) or any images drawn using the `image()` function.
+   * The source code from a <a href="#/p5.Shader">p5.Shader</a> object's
+   * fragment and vertex shaders will be compiled the first time it's passed to
+   * `shader()`.
+   * 
+   * Calling <a href="#/p5/resetShader">resetShader()</a> restores a sketch’s
+   * default shaders.
+   * 
+   * Note: Shaders can only be used in WebGL mode.
+   * 
+   * `let myShader;
+   * 
+   * function setup() {
+   * createCanvas(200, 200, WEBGL);
+   * myShader = buildMaterialShader(material);
+   * noStroke();
+   * describe('A square with dynamically changing colors on a beige background.');
+   * }
+   * 
+   * function material() {
+   * let time = uniformFloat();
+   * finalColor.begin();
+   * let r = 0.2 + 0.5 * abs(sin(time + 0));
+   * let g = 0.2 + 0.5 * abs(sin(time + 1));
+   * let b = 0.2 + 0.5 * abs(sin(time + 2));
+   * finalColor.set([r, g, b, 1]);
+   * finalColor.end();
+   * }
+   * 
+   * function draw() {
+   * background(245, 245, 220);
+   * myShader.setUniform('time', millis() / 1000);
+   * shader(myShader);
+   * 
+   * rectMode(CENTER);
+   * rect(0, 0, 50, 50);
+   * }`For advanced usage, shaders can be written in a language called
+   * <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>.
+   * <a href="#/p5.Shader">p5.Shader</a> objects can be created in this way using the
+   * <a href="#/p5/createShader">createShader()</a> and
+   * <a href="#/p5/loadShader">loadShader()</a> functions.
+   * 
+   * `let fillShader;
+   * 
+   * let vertSrc = `
+   * precision highp float;
+   * attribute vec3 aPosition;
+   * uniform mat4 uModelViewMatrix;
+   * uniform mat4 uProjectionMatrix;
+   * varying vec3 vPosition;
+   * 
+   * void main() {
+   * vPosition = aPosition;
+   * gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
+   * }
+   * `;
+   * 
+   * let fragSrc = `
+   * precision highp float;
+   * uniform vec3 uLightDir;
+   * varying vec3 vPosition;
+   * 
+   * void main() {
+   * vec3 lightDir = normalize(uLightDir);
+   * float brightness = dot(lightDir, normalize(vPosition));
+   * brightness = clamp(brightness, 0.4, 1.0);
+   * vec3 color = vec3(0.3, 0.5, 1.0);
+   * color = color * brightness * 3.0;
+   * gl_FragColor = vec4(color, 1.0);
+   * }
+   * `;
+   * 
+   * function setup() {
+   * createCanvas(200, 200, WEBGL);
+   * fillShader = createShader(vertSrc, fragSrc);
+   * noStroke();
+   * describe('A rotating torus with simulated directional lighting.');
+   * }
+   * 
+   * function draw() {
+   * background(20, 20, 40);
+   * let lightDir = [0.5, 0.5, 1.0];
+   * fillShader.setUniform('uLightDir', lightDir);
+   * shader(fillShader);
+   * rotateY(frameCount * 0.02);
+   * rotateX(frameCount * 0.02);
+   * torus(25, 10, 30, 30);
+   * }``let fillShader;
+   * 
+   * let vertSrc = `
+   * precision highp float;
+   * attribute vec3 aPosition;
+   * uniform mat4 uProjectionMatrix;
+   * uniform mat4 uModelViewMatrix;
+   * varying vec3 vPosition;
+   * void main() {
+   * vPosition = aPosition;
+   * gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
+   * }
+   * `;
+   * 
+   * let fragSrc = `
+   * precision highp float;
+   * uniform vec3 uLightPos;
+   * uniform vec3 uFillColor;
+   * varying vec3 vPosition;
+   * void main() {
+   * float brightness = dot(normalize(uLightPos), normalize(vPosition));
+   * brightness = clamp(brightness, 0.0, 1.0);
+   * vec3 color = uFillColor * brightness;
+   * gl_FragColor = vec4(color, 1.0);
+   * }
+   * `;
+   * 
+   * function setup() {
+   * createCanvas(200, 200, WEBGL);
+   * fillShader = createShader(vertSrc, fragSrc);
+   * shader(fillShader);
+   * noStroke();
+   * describe('A square affected by both fill color and lighting, with lights controlled by mouse.');
+   * }
+   * 
+   * function draw() {
+   * let lightPos = [(mouseX - width / 2) / width,
+   * (mouseY - height / 2) / height, 1.0];
+   * fillShader.setUniform('uLightPos', lightPos);
+   * let fillColor = [map(mouseX, 0, width, 0, 1),
+   * map(mouseY, 0, height, 0, 1), 0.5];
+   * fillShader.setUniform('uFillColor', fillColor);
+   * plane(width, height);
+   * }`<div>
+   * <p>If you want to apply shaders to strokes or images, use the following methods:
+   * 
+   * - <a href="#/p5/strokeShader">strokeShader()</a> : Applies a shader to the stroke (outline) of shapes, allowing independent control over the stroke rendering using shaders.
+   * 
+   * - <a href="#/p5/imageShader">imageShader()</a> : Applies a shader to images or textures, controlling how the shader modifies their appearance during rendering.
+   * 
+   * </p>
+   * </div>
+   * @param s <a href="#/p5.Shader">p5.Shader</a> object
+   * to apply.
+   */
+  shader(s: P5.Shader): void;
+
+  /**
+   * Draws a <a href="#/p5.Geometry">p5.Geometry</a> object to the canvas.
+   * 
+   * 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>.
    * 
    * Note: `model()` can only be used in WebGL mode.
@@ -6800,6 +6820,17 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   model(model: P5.Geometry, count?: number): void;
 
+  /**
+   * Sets the element's content.
+   * 
+   * An element's content is the text between its tags. For example, the element
+   * `&lt;language&gt;JavaScript&lt;/language&gt;` has the content `JavaScript`.
+   * 
+   * The parameter, `content`, is a string with the element's new content.
+   * @param content new content for the element.
+   */
+  setContent(content: string): void;
+
   /**
    * Method for executing an HTTP request. If data type is not specified,
    * it will default to `'text'`.
@@ -7079,26 +7110,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   square(x: number, y: number, s: number, tl?: number, tr?: number, br?: number, bl?: number): void;
 
-  /**
-   * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply for strokes.
-   * 
-   * This method applies the given shader to strokes, allowing customization of
-   * how lines and outlines are drawn in 3D space. The shader will be used for
-   * strokes until <a href="#/p5/resetShader">resetShader()</a> is called or another
-   * strokeShader is applied.
-   * 
-   * The shader will be used for:
-   * 
-   * - Strokes only, regardless of whether the uniform `uStrokeWeight` is present.
-   * 
-   * To further customize its behavior, refer to the various hooks provided by
-   * the <a href="#/p5/baseStrokeShader">baseStrokeShader()</a> method, which allow
-   * control over stroke weight, vertex positions, colors, and more.
-   * @param s <a href="#/p5.Shader">p5.Shader</a> object
-   * to apply for strokes.
-   */
-  strokeShader(s: P5.Shader): void;
-
   /**
    * Converts 2D screen coordinates to 3D world coordinates.
    * 
@@ -7160,6 +7171,26 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   mousePressed(event?: MouseEvent): void;
 
+  /**
+   * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply for strokes.
+   * 
+   * This method applies the given shader to strokes, allowing customization of
+   * how lines and outlines are drawn in 3D space. The shader will be used for
+   * strokes until <a href="#/p5/resetShader">resetShader()</a> is called or another
+   * strokeShader is applied.
+   * 
+   * The shader will be used for:
+   * 
+   * - Strokes only, regardless of whether the uniform `uStrokeWeight` is present.
+   * 
+   * To further customize its behavior, refer to the various hooks provided by
+   * the <a href="#/p5/baseStrokeShader">baseStrokeShader()</a> method, which allow
+   * control over stroke weight, vertex positions, colors, and more.
+   * @param s <a href="#/p5.Shader">p5.Shader</a> object
+   * to apply for strokes.
+   */
+  strokeShader(s: P5.Shader): void;
+
   /**
    * Tints images using a color.
    * 
@@ -7756,25 +7787,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   noFill(): void;
 
-  /**
-   * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply for images.
-   * 
-   * This method allows the user to apply a custom shader to images, enabling
-   * advanced visual effects such as pixel manipulation, color adjustments,
-   * or dynamic behavior. The shader will be applied to the image drawn using
-   * the <a href="#/p5/image">image()</a> function.
-   * 
-   * The shader will be used exclusively for:
-   * 
-   * - `image()` calls, applying only when drawing 2D images.
-   * 
-   * - This shader will NOT apply to images used in <a href="#/p5/texture">texture()</a> or other 3D contexts.
-   * Any attempts to use the imageShader in these cases will be ignored.
-   * @param s <a href="#/p5.Shader">p5.Shader</a> object
-   * to apply for images.
-   */
-  imageShader(s: P5.Shader): void;
-
   /**
    * Removes all lights from the sketch.
    * 
@@ -7883,6 +7895,25 @@ 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.
+   * 
+   * - 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;
+
   /**
    * Disables drawing points, lines, and the outlines of shapes.
    * 
@@ -8000,11 +8031,11 @@ EXCLUDE: typeof P5.EXCLUDE;
    * values. 0 is equal to the first color, 0.1 is very near the first color,
    * 0.5 is halfway between the two colors, and so on. Negative numbers are set
    * to 0. Numbers greater than 1 are set to 1. This differs from the behavior of
-   * <a href="#/lerp">lerp</a>. It's necessary because numbers outside of the
+   * <a href="#/p5/lerp">lerp</a>. It's necessary because numbers outside of the
    * interval [0, 1] will produce strange and unexpected colors.
    * 
    * The way that colors are interpolated depends on the current
-   * <a href="#/colorMode">colorMode()</a>.
+   * <a href="#/p5/colorMode">colorMode()</a>.
    * @param c1 interpolate from this color.
    * @param c2 interpolate to this color.
    * @param amt number between 0 and 1.
@@ -8300,10 +8331,11 @@ EXCLUDE: typeof P5.EXCLUDE;
    * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
    * for more info.
    * @param callback A function building a p5.strands shader.
+   * @param scope An optional scope object passed to .modify().
    * @returns The material shader.
    */
-  buildMaterialShader(callback: Function): P5.Shader;
-  buildMaterialShader(hooks: object): P5.Shader;
+  buildMaterialShader(callback: Function, scope?: object): P5.Shader;
+  buildMaterialShader(hooks: object, scope?: object): P5.Shader;
 
   /**
    * Creates a `&lt;video&gt;` element that "captures" the audio/video stream from
@@ -8347,59 +8379,12 @@ EXCLUDE: typeof P5.EXCLUDE;
   createCapture(type?: typeof P5.AUDIO | typeof P5.VIDEO | object, flipped?: object, callback?: Function): P5.MediaElement;
 
   /**
-   * 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
-   * to any fills you draw.
+   * Sets the color used to draw points, lines, and the outlines of shapes.
    * 
-   * 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 loadMaterialShader('myMaterial.js');
-   * }
-   * 
-   * function draw() {
-   * background(255);
-   * shader(myShader);
-   * myShader.setUniform('time', millis());
-   * lights();
-   * noStroke();
-   * fill('red');
-   * sphere(50);
-   * }`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 shape.
-   * 
-   * `// myMaterial.js
-   * let time = uniformFloat();
-   * worldInputs.begin();
-   * worldInputs.position.y +=
-   * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
-   * worldInputs.end();`Read the reference for <a href="#/p5/buildMaterialShader">`buildMaterialShader`</a>,
-   * the version of `loadMaterialShader` 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
-   * `loadMaterialShader('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
-   * `loadMaterialShader('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 material shader.
-   */
-  loadMaterialShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
-
-  /**
-   * Sets the color used to draw points, lines, and the outlines of shapes.
-   * 
-   * Calling `stroke(255, 165, 0)` or `stroke('orange')` means all shapes drawn
-   * after calling `stroke()` will be outlined with the color orange. The way
-   * these parameters are interpreted may be changed with the
-   * <a href="#/p5/colorMode">colorMode()</a> function.
+   * Calling `stroke(255, 165, 0)` or `stroke('orange')` means all shapes drawn
+   * after calling `stroke()` will be outlined with the color orange. The way
+   * these parameters are interpreted may be changed with the
+   * <a href="#/p5/colorMode">colorMode()</a> function.
    * 
    * The version of `stroke()` with one parameter interprets the value one of
    * three ways. If the parameter is a `Number`, it's interpreted as a grayscale
@@ -8482,30 +8467,51 @@ EXCLUDE: typeof P5.EXCLUDE;
   save(objectOrFilename?: object | string, filename?: string, options?: boolean | string): void;
 
   /**
-   * Returns the default shader used for fills when lights or textures are used.
+   * 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
+   * to any fills you draw.
    * 
-   * Calling <a href="#/p5/buildMaterialShader">`buildMaterialShader(shaderFunction)`</a>
-   * is equivalent to calling `baseMaterialShader().modify(shaderFunction)`.
+   * Since this function loads data from another file, it returns a `Promise`.
+   * Use it in an `async function setup`, and `await` its result.
    * 
-   * Read <a href="#/p5/buildMaterialShader">the `buildMaterialShader` reference</a> or
-   * call `baseMaterialShader().inspectHooks()` for more information on what you can do with
-   * the base material shader.
-   * @returns The base material shader.
-   */
-  baseMaterialShader(): P5.Shader;
-
-  /**
-   * Returns the base shader used for filters.
+   * `let myShader;
+   * async function setup() {
+   * createCanvas(200, 200, WEBGL);
+   * myShader = await loadMaterialShader('myMaterial.js');
+   * }
    * 
-   * Calling <a href="#/p5/buildMaterialShader">`buildFilterShader(shaderFunction)`</a>
-   * is equivalent to calling `baseFilterShader().modify(shaderFunction)`.
+   * function draw() {
+   * background(255);
+   * shader(myShader);
+   * myShader.setUniform('time', millis());
+   * lights();
+   * noStroke();
+   * fill('red');
+   * sphere(50);
+   * }`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 shape.
    * 
-   * 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.
+   * `// myMaterial.js
+   * let time = uniformFloat();
+   * worldInputs.begin();
+   * worldInputs.position.y +=
+   * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
+   * worldInputs.end();`Read the reference for <a href="#/p5/buildMaterialShader">`buildMaterialShader`</a>,
+   * the version of `loadMaterialShader` 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
+   * `loadMaterialShader('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
+   * `loadMaterialShader('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 material shader.
    */
-  baseFilterShader(): P5.Shader;
+  loadMaterialShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
 
   /**
    * Influences the shape of the Bézier curve segment in a custom shape.
@@ -8576,6 +8582,19 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   doubleClicked(event?: MouseEvent): void;
 
+  /**
+   * Returns the default shader used for fills when lights or textures are used.
+   * 
+   * Calling <a href="#/p5/buildMaterialShader">`buildMaterialShader(shaderFunction)`</a>
+   * is equivalent to calling `baseMaterialShader().modify(shaderFunction)`.
+   * 
+   * Read <a href="#/p5/buildMaterialShader">the `buildMaterialShader` reference</a> or
+   * call `baseMaterialShader().inspectHooks()` for more information on what you can do with
+   * the base material shader.
+   * @returns The base material shader.
+   */
+  baseMaterialShader(): P5.Shader;
+
   /**
    * Starts using shapes to erase parts of the canvas.
    * 
@@ -8610,6 +8629,19 @@ 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>.
    * 
@@ -8638,6 +8670,37 @@ 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
@@ -8723,41 +8786,11 @@ EXCLUDE: typeof P5.EXCLUDE;
    * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
    * for more info.
    * @param callback A function building a p5.strands shader.
+   * @param scope An optional scope object passed to .modify().
    * @returns The normal shader.
    */
-  buildNormalShader(callback: Function): P5.Shader;
-  buildNormalShader(hooks: object): P5.Shader;
-
-  /**
-   * 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;
+  buildNormalShader(callback: Function, scope?: object): P5.Shader;
+  buildNormalShader(hooks: object, scope?: object): P5.Shader;
 
   /**
    * A function that's called once when the mouse wheel moves.
@@ -8803,54 +8836,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   mouseWheel(event?: WheelEvent): 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
-   * shader into the <a href="#/p5/shader">`shader()`</a> function to apply it
-   * to any fills 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 loadNormalShader('myMaterial.js');
-   * }
-   * 
-   * function draw() {
-   * background(255);
-   * shader(myShader);
-   * myShader.setUniform('time', millis());
-   * lights();
-   * noStroke();
-   * fill('red');
-   * sphere(50);
-   * }`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 `finalColor` hook to change the color of each pixel on the surface of a shape.
-   * 
-   * `// myMaterial.js
-   * let time = uniformFloat();
-   * worldInputs.begin();
-   * worldInputs.position.y +=
-   * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
-   * worldInputs.end();`Read the reference for <a href="#/p5/buildNormalShader">`buildNormalShader`</a>,
-   * the version of `loadNormalShader` 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
-   * `loadNormalShader('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
-   * `loadNormalShader('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 normal shader.
-   */
-  loadNormalShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
-
   /**
    * Ends a drawing group that contains its own styles and transformations.
    * 
@@ -9034,20 +9019,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   createFileInput(callback: (input: P5.File) => any, multiple?: boolean): P5.Element;
 
-  /**
-   * Returns the default shader used for fills when
-   * <a href="#/p5/normalMaterial">`normalMaterial()`</a> is activated.
-   * 
-   * Calling <a href="#/p5/buildNormalShader">`buildNormalShader(shaderFunction)`</a>
-   * is equivalent to calling `baseNormalShader().modify(shaderFunction)`.
-   * 
-   * Read <a href="#/p5/buildNormalShader">the `buildNormalShader` reference</a> or
-   * call `baseNormalShader().inspectHooks()` for more information on what you can do with
-   * the base normal shader.
-   * @returns The base material shader.
-   */
-  baseNormalShader(): P5.Shader;
-
   /**
    * Locks the mouse pointer to its current position and makes it invisible.
    * 
@@ -9068,61 +9039,66 @@ EXCLUDE: typeof P5.EXCLUDE;
   requestPointerLock(): void;
 
   /**
-   * Create a new shader that can change how fills are drawn, based on the default shader
-   * used when no lights or textures are applied. Pass the resulting
+   * 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
    * shader into the <a href="#/p5/shader">`shader()`</a> function to apply it
    * to any fills you draw.
    * 
-   * The main way to use `buildColorShader` is to pass a function in as a parameter.
-   * This will let you create a shader using p5.strands.
-   * 
-   * In your function, you can call hooks to change part of the shader. In a material
-   * shader, these are the hooks available:
-   * 
-   * - <a href="#/p5/objectInputs">`objectInputs`</a>: Update vertices before any positioning has been applied. Your function gets run on every vertex.
-   * 
-   * - <a href="#/p5/worldInputs">`worldInputs`</a>: Update vertices after transformations have been applied. Your function gets run on every vertex.
-   * 
-   * - <a href="#/p5/cameraInputs">`cameraInputs`</a>: Update vertices after transformations have been applied, relative to the camera. Your function gets run on every vertex.
-   * 
-   * - <a href="#/p5/finalColor">`finalColor`</a>: Update or replace the pixel color on the surface of a shape. Your function gets run on every pixel.
-   * 
-   * Read the linked reference page for each hook for more information about how to use them.
-   * 
-   * One thing you might want to do is modify the position of every vertex over time:
+   * 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;
-   * 
-   * function setup() {
+   * async function setup() {
    * createCanvas(200, 200, WEBGL);
-   * myShader = buildColorShader(material);
-   * }
-   * 
-   * function material() {
-   * let time = uniformFloat();
-   * worldInputs.begin();
-   * worldInputs.position.y +=
-   * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
-   * worldInputs.end();
+   * myShader = await loadNormalShader('myMaterial.js');
    * }
    * 
    * function draw() {
    * background(255);
    * shader(myShader);
    * myShader.setUniform('time', millis());
+   * lights();
    * noStroke();
    * fill('red');
-   * circle(0, 0, 50);
-   * }`Like the `modify()` method on shaders,
-   * advanced users can also fill in hooks using <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>
-   * instead of JavaScript.
-   * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
-   * for more info.
-   * @param callback A function building a p5.strands shader.
-   * @returns The color shader.
+   * sphere(50);
+   * }`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 `finalColor` hook to change the color of each pixel on the surface of a shape.
+   * 
+   * `// myMaterial.js
+   * let time = uniformFloat();
+   * worldInputs.begin();
+   * worldInputs.position.y +=
+   * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
+   * worldInputs.end();`Read the reference for <a href="#/p5/buildNormalShader">`buildNormalShader`</a>,
+   * the version of `loadNormalShader` 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
+   * `loadNormalShader('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
+   * `loadNormalShader('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 normal shader.
+   */
+  loadNormalShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
+
+  /**
+   * Returns the default shader used for fills when
+   * <a href="#/p5/normalMaterial">`normalMaterial()`</a> is activated.
+   * 
+   * Calling <a href="#/p5/buildNormalShader">`buildNormalShader(shaderFunction)`</a>
+   * is equivalent to calling `baseNormalShader().modify(shaderFunction)`.
+   * 
+   * Read <a href="#/p5/buildNormalShader">the `buildNormalShader` reference</a> or
+   * call `baseNormalShader().inspectHooks()` for more information on what you can do with
+   * the base normal shader.
+   * @returns The base material shader.
    */
-  buildColorShader(callback: Function): P5.Shader;
-  buildColorShader(hooks: object): P5.Shader;
+  baseNormalShader(): P5.Shader;
 
   /**
    * Exits a pointer lock started with
@@ -9170,6 +9146,64 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   saveStrings(list: string[], filename: string, extension?: string, isCRLF?: boolean): void;
 
+  /**
+   * Create a new shader that can change how fills are drawn, based on the default shader
+   * used when no lights or textures are applied. Pass the resulting
+   * shader into the <a href="#/p5/shader">`shader()`</a> function to apply it
+   * to any fills you draw.
+   * 
+   * The main way to use `buildColorShader` is to pass a function in as a parameter.
+   * This will let you create a shader using p5.strands.
+   * 
+   * In your function, you can call hooks to change part of the shader. In a material
+   * shader, these are the hooks available:
+   * 
+   * - <a href="#/p5/objectInputs">`objectInputs`</a>: Update vertices before any positioning has been applied. Your function gets run on every vertex.
+   * 
+   * - <a href="#/p5/worldInputs">`worldInputs`</a>: Update vertices after transformations have been applied. Your function gets run on every vertex.
+   * 
+   * - <a href="#/p5/cameraInputs">`cameraInputs`</a>: Update vertices after transformations have been applied, relative to the camera. Your function gets run on every vertex.
+   * 
+   * - <a href="#/p5/finalColor">`finalColor`</a>: Update or replace the pixel color on the surface of a shape. Your function gets run on every pixel.
+   * 
+   * Read the linked reference page for each hook for more information about how to use them.
+   * 
+   * One thing you might want to do is modify the position of every vertex over time:
+   * 
+   * `let myShader;
+   * 
+   * function setup() {
+   * createCanvas(200, 200, WEBGL);
+   * myShader = buildColorShader(material);
+   * }
+   * 
+   * function material() {
+   * let time = uniformFloat();
+   * worldInputs.begin();
+   * worldInputs.position.y +=
+   * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
+   * worldInputs.end();
+   * }
+   * 
+   * function draw() {
+   * background(255);
+   * shader(myShader);
+   * myShader.setUniform('time', millis());
+   * noStroke();
+   * fill('red');
+   * circle(0, 0, 50);
+   * }`Like the `modify()` method on shaders,
+   * advanced users can also fill in hooks using <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>
+   * instead of JavaScript.
+   * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
+   * for more info.
+   * @param callback A function building a p5.strands shader.
+   * @param scope An optional scope object passed to .modify().
+   * @returns The color shader.
+   */
+  buildColorShader(callback: Function, scope?: object): P5.Shader;
+  buildColorShader(hooks: object, scope?: object): P5.Shader;
+
   /**
    * Connects points with a smooth curve (a spline).
    * 
@@ -9238,6 +9272,18 @@ EXCLUDE: typeof P5.EXCLUDE;
   splineVertex(x: number, y: number, u?: number, v?: number): void;
   splineVertex(x: number, y: number, z: number, u?: number, v?: number): void;
 
+  /**
+   * Writes the contents of a <a href="#/p5.Table">Table</a> object to a file. Defaults to a
+   * text file with comma-separated-values ('csv') but can also
+   * use tab separation ('tsv'), or generate an HTML table ('html').
+   * The file saving process and location of the saved file will
+   * vary between web browsers.
+   * @param Table the <a href="#/p5.Table">Table</a> object to save to a file
+   * @param filename the filename to which the Table should be saved
+   * @param options can be one of "tsv", "csv", or "html"
+   */
+  saveTable(Table: P5.Table, filename: string, options?: string): void;
+
   /**
    * Loads a new shader from a file that can change how fills are drawn, based on the material used
    * when no lights or textures are active. Pass the resulting
@@ -9286,18 +9332,6 @@ EXCLUDE: typeof P5.EXCLUDE;
    */
   loadColorShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
 
-  /**
-   * Writes the contents of a <a href="#/p5.Table">Table</a> object to a file. Defaults to a
-   * text file with comma-separated-values ('csv') but can also
-   * use tab separation ('tsv'), or generate an HTML table ('html').
-   * The file saving process and location of the saved file will
-   * vary between web browsers.
-   * @param Table the <a href="#/p5.Table">Table</a> object to save to a file
-   * @param filename the filename to which the Table should be saved
-   * @param options can be one of "tsv", "csv", or "html"
-   */
-  saveTable(Table: P5.Table, filename: string, options?: string): void;
-
   /**
    * Returns the default shader used for fills when no lights or textures are activate.
    * 
@@ -9595,62 +9629,11 @@ EXCLUDE: typeof P5.EXCLUDE;
    * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
    * for more info.
    * @param callback A function building a p5.strands shader.
+   * @param scope An optional scope object passed to .modify().
    * @returns The stroke shader.
    */
-  buildStrokeShader(callback: Function): P5.Shader;
-  buildStrokeShader(hooks: object): P5.Shader;
-
-  /**
-   * 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>;
+  buildStrokeShader(callback: Function, scope?: object): P5.Shader;
+  buildStrokeShader(hooks: object, scope?: object): P5.Shader;
 
   /**
    * Gets or sets a given spline property.
@@ -9776,31 +9759,72 @@ EXCLUDE: typeof P5.EXCLUDE;
   perspective(fovy?: number, aspect?: number, near?: number, far?: number): void;
 
   /**
-   * Returns the default shader used for strokes.
+   * 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.
    * 
-   * Calling <a href="#/p5/buildStrokeShader">`buildStrokeShader(shaderFunction)`</a>
-   * is equivalent to calling `baseStrokeShader().modify(shaderFunction)`.
+   * Since this function loads data from another file, it returns a `Promise`.
+   * Use it in an `async function setup`, and `await` its result.
    * 
-   * Read <a href="#/p5/buildStrokeShader">the `buildStrokeShader` reference</a> or
-   * call `baseStrokeShader().inspectHooks()` for more information on what you can do with
-   * the base material shader.
-   * @returns The base material shader.
-   */
-  baseStrokeShader(): P5.Shader;
-
-  /**
-   * Restores the default shaders.
+   * `let myShader;
+   * async function setup() {
+   * createCanvas(200, 200, WEBGL);
+   * myShader = await loadStrokeShader('myMaterial.js');
+   * }
    * 
-   * `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>.
+   * 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.
    * 
-   * Note: Shaders can only be used in WebGL mode.
-   */
-  resetShader(): void;
-
-  /**
-   * Sets multiple properties for spline curves at once.
+   * `// 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.
+   * 
+   * Calling <a href="#/p5/buildStrokeShader">`buildStrokeShader(shaderFunction)`</a>
+   * is equivalent to calling `baseStrokeShader().modify(shaderFunction)`.
+   * 
+   * Read <a href="#/p5/buildStrokeShader">the `buildStrokeShader` reference</a> or
+   * call `baseStrokeShader().inspectHooks()` for more information on what you can do with
+   * the base material shader.
+   * @returns The base material shader.
+   */
+  baseStrokeShader(): P5.Shader;
+
+  /**
+   * Sets multiple properties for spline curves at once.
    * 
    * `splineProperties()` accepts an object with key-value pairs to configure
    * how spline curves are drawn. This is a convenient way to set multiple
@@ -9867,6 +9891,17 @@ 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.
    * 
@@ -16589,6 +16624,112 @@ function get(x: number, y: number): number[];
 function min(n0: number, n1: number): number;
 function min(nums: number[]): number;
 
+/**
+ * A function that's called when the browser window is resized.
+ * 
+ * Code placed in the body of `windowResized()` will run when the
+ * browser window's size changes. It's a good place to call
+ * <a href="#/p5/resizeCanvas">resizeCanvas()</a> or make other
+ * adjustments to accommodate the new window size.
+ * 
+ * The `event` parameter is optional. If added to the function declaration, it
+ * can be used for debugging or other purposes.
+ * @param event optional resize Event.
+ */
+function windowResized(event?: Event): void;
+
+/**
+ * Shuffles the elements of an array.
+ * 
+ * The first parameter, `array`, is the array to be shuffled. For example,
+ * calling `shuffle(myArray)` will shuffle the elements of `myArray`. By
+ * default, the original array won’t be modified. Instead, a copy will be
+ * created, shuffled, and returned.
+ * 
+ * The second parameter, `modify`, is optional. If `true` is passed, as in
+ * `shuffle(myArray, true)`, then the array will be shuffled in place without
+ * making a copy.
+ * @param array array to shuffle.
+ * @param modify if `true`, shuffle the original array in place. Defaults to `false`.
+ * @returns shuffled array.
+ */
+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.
+ */
+function noDebugMode(): void;
+
+/**
+ * Gets the blue value of a color.
+ * 
+ * `blue()` extracts the blue 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, `blue()` returns a color's blue value in the range 0
+ * to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to RGB, it
+ * returns the blue 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 blue value.
+ */
+function blue(color: P5.Color | number[] | string): number;
+
+/**
+ * Converts a single-character `String` to a `Number`.
+ * 
+ * `unchar()` converts single-character strings to their corresponding
+ * integer (whole number).
+ * 
+ * The parameter, `n`, is the character to convert. For example,
+ * `unchar('A')`, returns the number 65. If an array is passed, as in
+ * `unchar(['A', 'B', 'C'])`, an array of integers is returned.
+ * @param n value to convert.
+ * @returns converted number.
+ */
+function unchar(n: string): number;
+function unchar(ns: string[]): number[];
+
+/**
+ * Changes the unit system used to measure angles.
+ * 
+ * Degrees and radians are both units for measuring angles. There are 360˚ in
+ * one full rotation. A full rotation is 2 × π (about 6.28) radians.
+ * 
+ * Functions such as <a href="#/p5/rotate">rotate()</a> and
+ * <a href="#/p5/sin">sin()</a> expect angles measured radians by default.
+ * Calling `angleMode(DEGREES)` switches to degrees. Calling
+ * `angleMode(RADIANS)` switches back to radians.
+ * 
+ * Calling `angleMode()` with no arguments returns current angle mode, which
+ * is either `RADIANS` or `DEGREES`.
+ * @param mode either RADIANS or DEGREES.
+ * @returns mode either RADIANS or DEGREES
+ */
+function angleMode(mode: typeof P5.RADIANS | typeof P5.DEGREES): typeof P5.RADIANS | typeof P5.DEGREES;
+function angleMode(): typeof P5.RADIANS | typeof P5.DEGREES;
+
+/**
+ * Loads the current value of each pixel on the canvas into the
+ * <a href="#/p5/pixels">pixels</a> array.
+ * 
+ * `loadPixels()` must be called before reading from or writing to
+ * <a href="#/p5/pixels">pixels</a>.
+ */
+function loadPixels(): void;
+
 /**
  * Creates a <a href="#/p5.Shader">p5.Shader</a> object to be used with the
  * <a href="#/p5/filter">filter()</a> function.
@@ -16708,6 +16849,36 @@ function min(nums: number[]): number;
  * 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.
+ * 
+ * `let myFilter;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * myFilter = buildFilterShader(noiseShaderCallback);
+ * describe('Evolving animated cloud-like noise in cyan and magenta');
+ * }
+ * 
+ * function noiseShaderCallback() {
+ * let time = uniformFloat();
+ * filterColor.begin();
+ * let coord = filterColor.texCoord;
+ * 
+ * //generate a value roughly between 0 and 1
+ * let noiseVal = noise(coord.x, coord.y, time / 2000);
+ * 
+ * let result = mix(
+ * [1, 0, 1, 1], // Magenta
+ * [0, 1, 1, 1], // Cyan
+ * noiseVal
+ * );
+ * filterColor.set(result);
+ * filterColor.end();
+ * }
+ * 
+ * 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>
  * instead of JavaScript.
@@ -16718,157 +16889,52 @@ function min(nums: number[]): number;
  * For more info about filters and shaders, see Adam Ferriss' <a href="https://github.com/aferriss/p5jsShaderExamples">repo of shader examples</a>
  * or the <a href="https://p5js.org/learn/getting-started-in-webgl-shaders.html">Introduction to Shaders</a> tutorial.
  * @param callback A function building a p5.strands shader.
+ * @param scope An optional scope object passed to .modify().
  * @returns The material shader
  */
-function buildFilterShader(callback: Function): P5.Shader;
-function buildFilterShader(hooks: object): P5.Shader;
+function buildFilterShader(callback: Function, scope?: object): P5.Shader;
+function buildFilterShader(hooks: object, scope?: object): P5.Shader;
 
 /**
- * A function that's called when the browser window is resized.
+ * Creates a slider `&lt;input&gt;&lt;/input&gt;` element.
  * 
- * Code placed in the body of `windowResized()` will run when the
- * browser window's size changes. It's a good place to call
- * <a href="#/p5/resizeCanvas">resizeCanvas()</a> or make other
- * adjustments to accommodate the new window size.
+ * Range sliders are useful for quickly selecting numbers from a given range.
  * 
- * The `event` parameter is optional. If added to the function declaration, it
- * can be used for debugging or other purposes.
- * @param event optional resize Event.
- */
-function windowResized(event?: Event): void;
-
-/**
- * Shuffles the elements of an array.
+ * The first two parameters, `min` and `max`, are numbers that set the
+ * slider's minimum and maximum.
  * 
- * The first parameter, `array`, is the array to be shuffled. For example,
- * calling `shuffle(myArray)` will shuffle the elements of `myArray`. By
- * default, the original array won’t be modified. Instead, a copy will be
- * created, shuffled, and returned.
+ * The third parameter, `value`, is optional. It's a number that sets the
+ * slider's default value.
  * 
- * The second parameter, `modify`, is optional. If `true` is passed, as in
- * `shuffle(myArray, true)`, then the array will be shuffled in place without
- * making a copy.
- * @param array array to shuffle.
- * @param modify if `true`, shuffle the original array in place. Defaults to `false`.
- * @returns shuffled array.
- */
-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.
+ * The fourth parameter, `step`, is also optional. It's a number that sets the
+ * spacing between each value in the slider's range. Setting `step` to 0
+ * allows the slider to move smoothly from `min` to `max`.
+ * @param min minimum value of the slider.
+ * @param max maximum value of the slider.
+ * @param value default value of the slider.
+ * @param step size for each step in the slider's range.
+ * @returns new <a href="#/p5.Element">p5.Element</a> object.
  */
-function noDebugMode(): void;
+function createSlider(min: number, max: number, value?: number, step?: number): P5.Element;
 
 /**
- * Gets the blue value of a color.
+ * Maps a number from one range to a value between 0 and 1.
  * 
- * `blue()` extracts the blue value from a
- * <a href="/reference/p5/p5.Color/">p5.Color</a> object, an array of color components, or
- * a CSS color string.
+ * For example, `norm(2, 0, 10)` returns 0.2. 2's position in the original
+ * range [0, 10] is proportional to 0.2's position in the range [0, 1]. This
+ * is the same as calling `map(2, 0, 10, 0, 1)`.
  * 
- * By default, `blue()` returns a color's blue value in the range 0
- * to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to RGB, it
- * returns the blue 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 blue value.
+ * Numbers outside of the original range are not constrained between 0 and 1.
+ * Out-of-range values are often intentional and useful.
+ * @param value incoming value to be normalized.
+ * @param start lower bound of the value's current range.
+ * @param stop upper bound of the value's current range.
+ * @returns normalized number.
  */
-function blue(color: P5.Color | number[] | string): number;
+function norm(value: number, start: number, stop: number): number;
 
 /**
- * Converts a single-character `String` to a `Number`.
- * 
- * `unchar()` converts single-character strings to their corresponding
- * integer (whole number).
- * 
- * The parameter, `n`, is the character to convert. For example,
- * `unchar('A')`, returns the number 65. If an array is passed, as in
- * `unchar(['A', 'B', 'C'])`, an array of integers is returned.
- * @param n value to convert.
- * @returns converted number.
- */
-function unchar(n: string): number;
-function unchar(ns: string[]): number[];
-
-/**
- * Changes the unit system used to measure angles.
- * 
- * Degrees and radians are both units for measuring angles. There are 360˚ in
- * one full rotation. A full rotation is 2 × π (about 6.28) radians.
- * 
- * Functions such as <a href="#/p5/rotate">rotate()</a> and
- * <a href="#/p5/sin">sin()</a> expect angles measured radians by default.
- * Calling `angleMode(DEGREES)` switches to degrees. Calling
- * `angleMode(RADIANS)` switches back to radians.
- * 
- * Calling `angleMode()` with no arguments returns current angle mode, which
- * is either `RADIANS` or `DEGREES`.
- * @param mode either RADIANS or DEGREES.
- * @returns mode either RADIANS or DEGREES
- */
-function angleMode(mode: typeof P5.RADIANS | typeof P5.DEGREES): typeof P5.RADIANS | typeof P5.DEGREES;
-function angleMode(): typeof P5.RADIANS | typeof P5.DEGREES;
-
-/**
- * Loads the current value of each pixel on the canvas into the
- * <a href="#/p5/pixels">pixels</a> array.
- * 
- * `loadPixels()` must be called before reading from or writing to
- * <a href="#/p5/pixels">pixels</a>.
- */
-function loadPixels(): void;
-
-/**
- * Creates a slider `&lt;input&gt;&lt;/input&gt;` element.
- * 
- * Range sliders are useful for quickly selecting numbers from a given range.
- * 
- * The first two parameters, `min` and `max`, are numbers that set the
- * slider's minimum and maximum.
- * 
- * The third parameter, `value`, is optional. It's a number that sets the
- * slider's default value.
- * 
- * The fourth parameter, `step`, is also optional. It's a number that sets the
- * spacing between each value in the slider's range. Setting `step` to 0
- * allows the slider to move smoothly from `min` to `max`.
- * @param min minimum value of the slider.
- * @param max maximum value of the slider.
- * @param value default value of the slider.
- * @param step size for each step in the slider's range.
- * @returns new <a href="#/p5.Element">p5.Element</a> object.
- */
-function createSlider(min: number, max: number, value?: number, step?: number): P5.Element;
-
-/**
- * Maps a number from one range to a value between 0 and 1.
- * 
- * For example, `norm(2, 0, 10)` returns 0.2. 2's position in the original
- * range [0, 10] is proportional to 0.2's position in the range [0, 1]. This
- * is the same as calling `map(2, 0, 10, 0, 1)`.
- * 
- * Numbers outside of the original range are not constrained between 0 and 1.
- * Out-of-range values are often intentional and useful.
- * @param value incoming value to be normalized.
- * @param start lower bound of the value's current range.
- * @param stop upper bound of the value's current range.
- * @returns normalized number.
- */
-function norm(value: number, start: number, stop: number): number;
-
-/**
- * Draws a sphere.
+ * Draws a sphere.
  * 
  * A sphere is a 3D shape with triangular faces that connect to form a round
  * surface. Spheres with few faces look like crystals. Spheres with many faces
@@ -16992,45 +17058,6 @@ function pow(n: number, e: number): number;
  */
 function fullscreen(val?: boolean): boolean;
 
-/**
- * Creates a <a href="#/p5.Shader">p5.Shader</a> object to be used with the
- * <a href="#/p5/filter">filter()</a> function using GLSL.
- * 
- * Since this method requires you to write your shaders in GLSL, it is most suitable
- * for advanced use cases. Consider using <a href="#/p5/buildFilterShader">`buildFilterShader`</a>
- * first, as a way to create filters in JavaScript using p5.strands.
- * 
- * `createFilterShader()` works like
- * <a href="#/p5/createShader">createShader()</a> but has a default vertex
- * shader included. `createFilterShader()` is intended to be used along with
- * <a href="#/p5/filter">filter()</a> for filtering the contents of a canvas.
- * A filter shader will be applied to the whole canvas instead of just
- * <a href="#/p5.Geometry">p5.Geometry</a> objects.
- * 
- * The parameter, `fragSrc`, sets the fragment shader. It’s a string that
- * contains the fragment shader program written in
- * <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>.
- * 
- * The <a href="#/p5.Shader">p5.Shader</a> object that's created has some
- * uniforms that can be set:
- * 
- * - `sampler2D tex0`, which contains the canvas contents as a texture.
- * 
- * - `vec2 canvasSize`, which is the width and height of the canvas, not including pixel density.
- * 
- * - `vec2 texelSize`, which is the size of a physical pixel including pixel density. This is calculated as `1.0 / (width * density)` for the pixel width and `1.0 / (height * density)` for the pixel height.
- * 
- * The <a href="#/p5.Shader">p5.Shader</a> that's created also provides
- * `varying vec2 vTexCoord`, a coordinate with values between 0 and 1.
- * `vTexCoord` describes where on the canvas the pixel will be drawn.
- * 
- * For more info about filters and shaders, see Adam Ferriss' <a href="https://github.com/aferriss/p5jsShaderExamples">repo of shader examples</a>
- * or the <a href="https://p5js.org/learn/getting-started-in-webgl-shaders.html">Introduction to Shaders</a> tutorial.
- * @param fragSrc source code for the fragment shader.
- * @returns new shader object created from the fragment shader.
- */
-function createFilterShader(fragSrc: string): P5.Shader;
-
 /**
  * Creates a light that shines from a point in all directions.
  * 
@@ -17138,6 +17165,45 @@ function alpha(color: P5.Color | number[] | string): number;
  */
 function createButton(label: string, value?: string): P5.Element;
 
+/**
+ * Creates a <a href="#/p5.Shader">p5.Shader</a> object to be used with the
+ * <a href="#/p5/filter">filter()</a> function using GLSL.
+ * 
+ * Since this method requires you to write your shaders in GLSL, it is most suitable
+ * for advanced use cases. Consider using <a href="#/p5/buildFilterShader">`buildFilterShader`</a>
+ * first, as a way to create filters in JavaScript using p5.strands.
+ * 
+ * `createFilterShader()` works like
+ * <a href="#/p5/createShader">createShader()</a> but has a default vertex
+ * shader included. `createFilterShader()` is intended to be used along with
+ * <a href="#/p5/filter">filter()</a> for filtering the contents of a canvas.
+ * A filter shader will be applied to the whole canvas instead of just
+ * <a href="#/p5.Geometry">p5.Geometry</a> objects.
+ * 
+ * The parameter, `fragSrc`, sets the fragment shader. It’s a string that
+ * contains the fragment shader program written in
+ * <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>.
+ * 
+ * The <a href="#/p5.Shader">p5.Shader</a> object that's created has some
+ * uniforms that can be set:
+ * 
+ * - `sampler2D tex0`, which contains the canvas contents as a texture.
+ * 
+ * - `vec2 canvasSize`, which is the width and height of the canvas, not including pixel density.
+ * 
+ * - `vec2 texelSize`, which is the size of a physical pixel including pixel density. This is calculated as `1.0 / (width * density)` for the pixel width and `1.0 / (height * density)` for the pixel height.
+ * 
+ * The <a href="#/p5.Shader">p5.Shader</a> that's created also provides
+ * `varying vec2 vTexCoord`, a coordinate with values between 0 and 1.
+ * `vTexCoord` describes where on the canvas the pixel will be drawn.
+ * 
+ * For more info about filters and shaders, see Adam Ferriss' <a href="https://github.com/aferriss/p5jsShaderExamples">repo of shader examples</a>
+ * or the <a href="https://p5js.org/learn/getting-started-in-webgl-shaders.html">Introduction to Shaders</a> tutorial.
+ * @param fragSrc source code for the fragment shader.
+ * @returns new shader object created from the fragment shader.
+ */
+function createFilterShader(fragSrc: string): P5.Shader;
+
 /**
  * Concludes the vertices of a custom shape.
  * 
@@ -17815,169 +17881,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;
 
-/**
- * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply while drawing.
- * 
- * Shaders are programs that run on the graphics processing unit (GPU). They
- * can process many pixels or vertices at the same time, making them fast for
- * many graphics tasks.
- * 
- * You can make new shaders using p5.strands with the
- * <a href="#/p5/buildMaterialShader">`buildMaterialShader`</a>,
- * <a href="#/p5/buildColorShader">`buildColorShader`</a>, and
- * <a href="#/p5/buildNormalShader">`buildNormalShader`</a> functions. You can also use
- * <a href="#/p5/buildFilterShader">`buildFilterShader`</a> alongside
- * <a href="#/p5/filter">`filter`</a>, and
- * <a href="#/p5/buildStrokeShader">`buildStrokeShader`</a> alongside
- * <a href="#/p5/stroke">`stroke`</a>.
- * 
- * The parameter, `s`, is the <a href="#/p5.Shader">p5.Shader</a> object to
- * apply. For example, calling `shader(myShader)` applies `myShader` to
- * process each pixel on the canvas. This only changes the fill (the inner part of shapes),
- * but does not affect the outlines (strokes) or any images drawn using the `image()` function.
- * The source code from a <a href="#/p5.Shader">p5.Shader</a> object's
- * fragment and vertex shaders will be compiled the first time it's passed to
- * `shader()`.
- * 
- * Calling <a href="#/p5/resetShader">resetShader()</a> restores a sketch’s
- * default shaders.
- * 
- * Note: Shaders can only be used in WebGL mode.
- * 
- * `let myShader;
- * 
- * function setup() {
- * createCanvas(200, 200, WEBGL);
- * myShader = buildMaterialShader(material);
- * noStroke();
- * describe('A square with dynamically changing colors on a beige background.');
- * }
- * 
- * function material() {
- * let time = uniformFloat();
- * finalColor.begin();
- * let r = 0.2 + 0.5 * abs(sin(time + 0));
- * let g = 0.2 + 0.5 * abs(sin(time + 1));
- * let b = 0.2 + 0.5 * abs(sin(time + 2));
- * finalColor.set([r, g, b, 1]);
- * finalColor.end();
- * }
- * 
- * function draw() {
- * background(245, 245, 220);
- * myShader.setUniform('time', millis() / 1000);
- * shader(myShader);
- * 
- * rectMode(CENTER);
- * rect(0, 0, 50, 50);
- * }`For advanced usage, shaders can be written in a language called
- * <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>.
- * <a href="#/p5.Shader">p5.Shader</a> objects can be created in this way using the
- * <a href="#/p5/createShader">createShader()</a> and
- * <a href="#/p5/loadShader">loadShader()</a> functions.
- * 
- * `let fillShader;
- * 
- * let vertSrc = `
- * precision highp float;
- * attribute vec3 aPosition;
- * uniform mat4 uModelViewMatrix;
- * uniform mat4 uProjectionMatrix;
- * varying vec3 vPosition;
- * 
- * void main() {
- * vPosition = aPosition;
- * gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
- * }
- * `;
- * 
- * let fragSrc = `
- * precision highp float;
- * uniform vec3 uLightDir;
- * varying vec3 vPosition;
- * 
- * void main() {
- * vec3 lightDir = normalize(uLightDir);
- * float brightness = dot(lightDir, normalize(vPosition));
- * brightness = clamp(brightness, 0.4, 1.0);
- * vec3 color = vec3(0.3, 0.5, 1.0);
- * color = color * brightness * 3.0;
- * gl_FragColor = vec4(color, 1.0);
- * }
- * `;
- * 
- * function setup() {
- * createCanvas(200, 200, WEBGL);
- * fillShader = createShader(vertSrc, fragSrc);
- * noStroke();
- * describe('A rotating torus with simulated directional lighting.');
- * }
- * 
- * function draw() {
- * background(20, 20, 40);
- * let lightDir = [0.5, 0.5, 1.0];
- * fillShader.setUniform('uLightDir', lightDir);
- * shader(fillShader);
- * rotateY(frameCount * 0.02);
- * rotateX(frameCount * 0.02);
- * torus(25, 10, 30, 30);
- * }``let fillShader;
- * 
- * let vertSrc = `
- * precision highp float;
- * attribute vec3 aPosition;
- * uniform mat4 uProjectionMatrix;
- * uniform mat4 uModelViewMatrix;
- * varying vec3 vPosition;
- * void main() {
- * vPosition = aPosition;
- * gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
- * }
- * `;
- * 
- * let fragSrc = `
- * precision highp float;
- * uniform vec3 uLightPos;
- * uniform vec3 uFillColor;
- * varying vec3 vPosition;
- * void main() {
- * float brightness = dot(normalize(uLightPos), normalize(vPosition));
- * brightness = clamp(brightness, 0.0, 1.0);
- * vec3 color = uFillColor * brightness;
- * gl_FragColor = vec4(color, 1.0);
- * }
- * `;
- * 
- * function setup() {
- * createCanvas(200, 200, WEBGL);
- * fillShader = createShader(vertSrc, fragSrc);
- * shader(fillShader);
- * noStroke();
- * describe('A square affected by both fill color and lighting, with lights controlled by mouse.');
- * }
- * 
- * function draw() {
- * let lightPos = [(mouseX - width / 2) / width,
- * (mouseY - height / 2) / height, 1.0];
- * fillShader.setUniform('uLightPos', lightPos);
- * let fillColor = [map(mouseX, 0, width, 0, 1),
- * map(mouseY, 0, height, 0, 1), 0.5];
- * fillShader.setUniform('uFillColor', fillColor);
- * plane(width, height);
- * }`<div>
- * <p>If you want to apply shaders to strokes or images, use the following methods:
- * 
- * - <a href="#/p5/strokeShader">strokeShader()</a> : Applies a shader to the stroke (outline) of shapes, allowing independent control over the stroke rendering using shaders.
- * 
- * - <a href="#/p5/imageShader">imageShader()</a> : Applies a shader to images or textures, controlling how the shader modifies their appearance during rendering.
- * 
- * </p>
- * </div>
- * @param s <a href="#/p5.Shader">p5.Shader</a> object
- * to apply.
- */
-function shader(s: P5.Shader): 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>
@@ -18163,61 +18066,213 @@ function mouseMoved(event?: MouseEvent): void;
  * // Code to run if the mouse is on the left.
  * }
  * 
- * if (mouseY > 50) {
- * // Code to run if the mouse is near the bottom.
+ * 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.
+ * 
+ * Shaders are programs that run on the graphics processing unit (GPU). They
+ * can process many pixels or vertices at the same time, making them fast for
+ * many graphics tasks.
+ * 
+ * You can make new shaders using p5.strands with the
+ * <a href="#/p5/buildMaterialShader">`buildMaterialShader`</a>,
+ * <a href="#/p5/buildColorShader">`buildColorShader`</a>, and
+ * <a href="#/p5/buildNormalShader">`buildNormalShader`</a> functions. You can also use
+ * <a href="#/p5/buildFilterShader">`buildFilterShader`</a> alongside
+ * <a href="#/p5/filter">`filter`</a>, and
+ * <a href="#/p5/buildStrokeShader">`buildStrokeShader`</a> alongside
+ * <a href="#/p5/stroke">`stroke`</a>.
+ * 
+ * The parameter, `s`, is the <a href="#/p5.Shader">p5.Shader</a> object to
+ * apply. For example, calling `shader(myShader)` applies `myShader` to
+ * process each pixel on the canvas. This only changes the fill (the inner part of shapes),
+ * but does not affect the outlines (strokes) or any images drawn using the `image()` function.
+ * The source code from a <a href="#/p5.Shader">p5.Shader</a> object's
+ * fragment and vertex shaders will be compiled the first time it's passed to
+ * `shader()`.
+ * 
+ * Calling <a href="#/p5/resetShader">resetShader()</a> restores a sketch’s
+ * default shaders.
+ * 
+ * Note: Shaders can only be used in WebGL mode.
+ * 
+ * `let myShader;
+ * 
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * myShader = buildMaterialShader(material);
+ * noStroke();
+ * describe('A square with dynamically changing colors on a beige background.');
+ * }
+ * 
+ * function material() {
+ * let time = uniformFloat();
+ * finalColor.begin();
+ * let r = 0.2 + 0.5 * abs(sin(time + 0));
+ * let g = 0.2 + 0.5 * abs(sin(time + 1));
+ * let b = 0.2 + 0.5 * abs(sin(time + 2));
+ * finalColor.set([r, g, b, 1]);
+ * finalColor.end();
+ * }
+ * 
+ * function draw() {
+ * background(245, 245, 220);
+ * myShader.setUniform('time', millis() / 1000);
+ * shader(myShader);
+ * 
+ * rectMode(CENTER);
+ * rect(0, 0, 50, 50);
+ * }`For advanced usage, shaders can be written in a language called
+ * <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>.
+ * <a href="#/p5.Shader">p5.Shader</a> objects can be created in this way using the
+ * <a href="#/p5/createShader">createShader()</a> and
+ * <a href="#/p5/loadShader">loadShader()</a> functions.
+ * 
+ * `let fillShader;
+ * 
+ * let vertSrc = `
+ * precision highp float;
+ * attribute vec3 aPosition;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ * varying vec3 vPosition;
+ * 
+ * void main() {
+ * vPosition = aPosition;
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
+ * }
+ * `;
+ * 
+ * let fragSrc = `
+ * precision highp float;
+ * uniform vec3 uLightDir;
+ * varying vec3 vPosition;
+ * 
+ * void main() {
+ * vec3 lightDir = normalize(uLightDir);
+ * float brightness = dot(lightDir, normalize(vPosition));
+ * brightness = clamp(brightness, 0.4, 1.0);
+ * vec3 color = vec3(0.3, 0.5, 1.0);
+ * color = color * brightness * 3.0;
+ * gl_FragColor = vec4(color, 1.0);
+ * }
+ * `;
+ * 
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * fillShader = createShader(vertSrc, fragSrc);
+ * noStroke();
+ * describe('A rotating torus with simulated directional lighting.');
  * }
- * }`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.
+ * function draw() {
+ * background(20, 20, 40);
+ * let lightDir = [0.5, 0.5, 1.0];
+ * fillShader.setUniform('uLightDir', lightDir);
+ * shader(fillShader);
+ * rotateY(frameCount * 0.02);
+ * rotateX(frameCount * 0.02);
+ * torus(25, 10, 30, 30);
+ * }``let fillShader;
  * 
- * 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.
+ * let vertSrc = `
+ * precision highp float;
+ * attribute vec3 aPosition;
+ * uniform mat4 uProjectionMatrix;
+ * uniform mat4 uModelViewMatrix;
+ * varying vec3 vPosition;
+ * void main() {
+ * vPosition = aPosition;
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
+ * }
+ * `;
  * 
- * `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:
+ * let fragSrc = `
+ * precision highp float;
+ * uniform vec3 uLightPos;
+ * uniform vec3 uFillColor;
+ * varying vec3 vPosition;
+ * void main() {
+ * float brightness = dot(normalize(uLightPos), normalize(vPosition));
+ * brightness = clamp(brightness, 0.0, 1.0);
+ * vec3 color = uFillColor * brightness;
+ * gl_FragColor = vec4(color, 1.0);
+ * }
+ * `;
  * 
- * `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')`.
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * fillShader = createShader(vertSrc, fragSrc);
+ * shader(fillShader);
+ * noStroke();
+ * describe('A square affected by both fill color and lighting, with lights controlled by mouse.');
+ * }
  * 
- * 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.
+ * function draw() {
+ * let lightPos = [(mouseX - width / 2) / width,
+ * (mouseY - height / 2) / height, 1.0];
+ * fillShader.setUniform('uLightPos', lightPos);
+ * let fillColor = [map(mouseX, 0, width, 0, 1),
+ * map(mouseY, 0, height, 0, 1), 0.5];
+ * fillShader.setUniform('uFillColor', fillColor);
+ * plane(width, height);
+ * }`<div>
+ * <p>If you want to apply shaders to strokes or images, use the following methods:
  * 
- * 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.
+ * - <a href="#/p5/strokeShader">strokeShader()</a> : Applies a shader to the stroke (outline) of shapes, allowing independent control over the stroke rendering using shaders.
  * 
- * An element's content is the text between its tags. For example, the element
- * `&lt;language&gt;JavaScript&lt;/language&gt;` has the content `JavaScript`.
+ * - <a href="#/p5/imageShader">imageShader()</a> : Applies a shader to images or textures, controlling how the shader modifies their appearance during rendering.
  * 
- * The parameter, `content`, is a string with the element's new content.
- * @param content new content for the element.
+ * </p>
+ * </div>
+ * @param s <a href="#/p5.Shader">p5.Shader</a> object
+ * to apply.
  */
-function setContent(content: string): void;
+function shader(s: P5.Shader): void;
 
 /**
  * Draws a <a href="#/p5.Geometry">p5.Geometry</a> object to the canvas.
@@ -18236,6 +18291,17 @@ function setContent(content: string): void;
  */
 function model(model: P5.Geometry, count?: number): void;
 
+/**
+ * Sets the element's content.
+ * 
+ * An element's content is the text between its tags. For example, the element
+ * `&lt;language&gt;JavaScript&lt;/language&gt;` has the content `JavaScript`.
+ * 
+ * The parameter, `content`, is a string with the element's new content.
+ * @param content new content for the element.
+ */
+function setContent(content: string): void;
+
 /**
  * Method for executing an HTTP request. If data type is not specified,
  * it will default to `'text'`.
@@ -18515,26 +18581,6 @@ function vertexProperty(attributeName: string, data: number | number[]): void;
  */
 function square(x: number, y: number, s: number, tl?: number, tr?: number, br?: number, bl?: number): void;
 
-/**
- * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply for strokes.
- * 
- * This method applies the given shader to strokes, allowing customization of
- * how lines and outlines are drawn in 3D space. The shader will be used for
- * strokes until <a href="#/p5/resetShader">resetShader()</a> is called or another
- * strokeShader is applied.
- * 
- * The shader will be used for:
- * 
- * - Strokes only, regardless of whether the uniform `uStrokeWeight` is present.
- * 
- * To further customize its behavior, refer to the various hooks provided by
- * the <a href="#/p5/baseStrokeShader">baseStrokeShader()</a> method, which allow
- * control over stroke weight, vertex positions, colors, and more.
- * @param s <a href="#/p5.Shader">p5.Shader</a> object
- * to apply for strokes.
- */
-function strokeShader(s: P5.Shader): void;
-
 /**
  * Converts 2D screen coordinates to 3D world coordinates.
  * 
@@ -18596,6 +18642,26 @@ function screenToWorld(x: number | P5.Vector, y: number, z?: number): P5.Vector;
  */
 function mousePressed(event?: MouseEvent): void;
 
+/**
+ * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply for strokes.
+ * 
+ * This method applies the given shader to strokes, allowing customization of
+ * how lines and outlines are drawn in 3D space. The shader will be used for
+ * strokes until <a href="#/p5/resetShader">resetShader()</a> is called or another
+ * strokeShader is applied.
+ * 
+ * The shader will be used for:
+ * 
+ * - Strokes only, regardless of whether the uniform `uStrokeWeight` is present.
+ * 
+ * To further customize its behavior, refer to the various hooks provided by
+ * the <a href="#/p5/baseStrokeShader">baseStrokeShader()</a> method, which allow
+ * control over stroke weight, vertex positions, colors, and more.
+ * @param s <a href="#/p5.Shader">p5.Shader</a> object
+ * to apply for strokes.
+ */
+function strokeShader(s: P5.Shader): void;
+
 /**
  * Tints images using a color.
  * 
@@ -19192,25 +19258,6 @@ function ellipsoid(radiusX?: number, radiusY?: number, radiusZ?: number, detailX
  */
 function noFill(): void;
 
-/**
- * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply for images.
- * 
- * This method allows the user to apply a custom shader to images, enabling
- * advanced visual effects such as pixel manipulation, color adjustments,
- * or dynamic behavior. The shader will be applied to the image drawn using
- * the <a href="#/p5/image">image()</a> function.
- * 
- * The shader will be used exclusively for:
- * 
- * - `image()` calls, applying only when drawing 2D images.
- * 
- * - This shader will NOT apply to images used in <a href="#/p5/texture">texture()</a> or other 3D contexts.
- * Any attempts to use the imageShader in these cases will be ignored.
- * @param s <a href="#/p5.Shader">p5.Shader</a> object
- * to apply for images.
- */
-function imageShader(s: P5.Shader): void;
-
 /**
  * Removes all lights from the sketch.
  * 
@@ -19319,6 +19366,25 @@ 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.
+ * 
+ * - 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;
+
 /**
  * Disables drawing points, lines, and the outlines of shapes.
  * 
@@ -19436,11 +19502,11 @@ function loadFont(path: string, successCallback?: (font: P5.Font) => any, failur
  * values. 0 is equal to the first color, 0.1 is very near the first color,
  * 0.5 is halfway between the two colors, and so on. Negative numbers are set
  * to 0. Numbers greater than 1 are set to 1. This differs from the behavior of
- * <a href="#/lerp">lerp</a>. It's necessary because numbers outside of the
+ * <a href="#/p5/lerp">lerp</a>. It's necessary because numbers outside of the
  * interval [0, 1] will produce strange and unexpected colors.
  * 
  * The way that colors are interpolated depends on the current
- * <a href="#/colorMode">colorMode()</a>.
+ * <a href="#/p5/colorMode">colorMode()</a>.
  * @param c1 interpolate from this color.
  * @param c2 interpolate to this color.
  * @param amt number between 0 and 1.
@@ -19736,10 +19802,11 @@ function mouseClicked(event?: MouseEvent): void;
  * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
  * for more info.
  * @param callback A function building a p5.strands shader.
+ * @param scope An optional scope object passed to .modify().
  * @returns The material shader.
  */
-function buildMaterialShader(callback: Function): P5.Shader;
-function buildMaterialShader(hooks: object): P5.Shader;
+function buildMaterialShader(callback: Function, scope?: object): P5.Shader;
+function buildMaterialShader(hooks: object, scope?: object): P5.Shader;
 
 /**
  * Creates a `&lt;video&gt;` element that "captures" the audio/video stream from
@@ -19772,62 +19839,15 @@ function buildMaterialShader(hooks: object): P5.Shader;
  * <a href="http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https" target="_blank">here</a>
  * and <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" target="_blank">here</a>.
  * @param type type of capture, either AUDIO or VIDEO,
- * or a constraints object. Both video and audio
- * audio streams are captured by default.
- * @param flipped flip the capturing video and mirror the output with `{flipped:true}`. By
- * default it is false.
- * @param callback function to call once the stream
- * has loaded.
- * @returns new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
- */
-function createCapture(type?: typeof P5.AUDIO | typeof P5.VIDEO | object, flipped?: object, callback?: Function): P5.MediaElement;
-
-/**
- * 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
- * to any fills 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 loadMaterialShader('myMaterial.js');
- * }
- * 
- * function draw() {
- * background(255);
- * shader(myShader);
- * myShader.setUniform('time', millis());
- * lights();
- * noStroke();
- * fill('red');
- * sphere(50);
- * }`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 shape.
- * 
- * `// myMaterial.js
- * let time = uniformFloat();
- * worldInputs.begin();
- * worldInputs.position.y +=
- * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
- * worldInputs.end();`Read the reference for <a href="#/p5/buildMaterialShader">`buildMaterialShader`</a>,
- * the version of `loadMaterialShader` 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
- * `loadMaterialShader('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
- * `loadMaterialShader('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 material shader.
+ * or a constraints object. Both video and audio
+ * audio streams are captured by default.
+ * @param flipped flip the capturing video and mirror the output with `{flipped:true}`. By
+ * default it is false.
+ * @param callback function to call once the stream
+ * has loaded.
+ * @returns new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
  */
-function loadMaterialShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
+function createCapture(type?: typeof P5.AUDIO | typeof P5.VIDEO | object, flipped?: object, callback?: Function): P5.MediaElement;
 
 /**
  * Sets the color used to draw points, lines, and the outlines of shapes.
@@ -19918,30 +19938,51 @@ function createColorPicker(value?: string | P5.Color): P5.Element;
 function save(objectOrFilename?: object | string, filename?: string, options?: boolean | string): void;
 
 /**
- * Returns the default shader used for fills when lights or textures are used.
+ * 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
+ * to any fills you draw.
  * 
- * Calling <a href="#/p5/buildMaterialShader">`buildMaterialShader(shaderFunction)`</a>
- * is equivalent to calling `baseMaterialShader().modify(shaderFunction)`.
+ * Since this function loads data from another file, it returns a `Promise`.
+ * Use it in an `async function setup`, and `await` its result.
  * 
- * Read <a href="#/p5/buildMaterialShader">the `buildMaterialShader` reference</a> or
- * call `baseMaterialShader().inspectHooks()` for more information on what you can do with
- * the base material shader.
- * @returns The base material shader.
- */
-function baseMaterialShader(): P5.Shader;
-
-/**
- * Returns the base shader used for filters.
+ * `let myShader;
+ * async function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * myShader = await loadMaterialShader('myMaterial.js');
+ * }
  * 
- * Calling <a href="#/p5/buildMaterialShader">`buildFilterShader(shaderFunction)`</a>
- * is equivalent to calling `baseFilterShader().modify(shaderFunction)`.
+ * function draw() {
+ * background(255);
+ * shader(myShader);
+ * myShader.setUniform('time', millis());
+ * lights();
+ * noStroke();
+ * fill('red');
+ * sphere(50);
+ * }`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 shape.
  * 
- * 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.
+ * `// myMaterial.js
+ * let time = uniformFloat();
+ * worldInputs.begin();
+ * worldInputs.position.y +=
+ * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
+ * worldInputs.end();`Read the reference for <a href="#/p5/buildMaterialShader">`buildMaterialShader`</a>,
+ * the version of `loadMaterialShader` 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
+ * `loadMaterialShader('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
+ * `loadMaterialShader('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 material shader.
  */
-function baseFilterShader(): P5.Shader;
+function loadMaterialShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
 
 /**
  * Influences the shape of the Bézier curve segment in a custom shape.
@@ -20012,6 +20053,19 @@ function bezierOrder(): number;
  */
 function doubleClicked(event?: MouseEvent): void;
 
+/**
+ * Returns the default shader used for fills when lights or textures are used.
+ * 
+ * Calling <a href="#/p5/buildMaterialShader">`buildMaterialShader(shaderFunction)`</a>
+ * is equivalent to calling `baseMaterialShader().modify(shaderFunction)`.
+ * 
+ * Read <a href="#/p5/buildMaterialShader">the `buildMaterialShader` reference</a> or
+ * call `baseMaterialShader().inspectHooks()` for more information on what you can do with
+ * the base material shader.
+ * @returns The base material shader.
+ */
+function baseMaterialShader(): P5.Shader;
+
 /**
  * Starts using shapes to erase parts of the canvas.
  * 
@@ -20046,6 +20100,19 @@ function doubleClicked(event?: MouseEvent): void;
  */
 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>.
  * 
@@ -20074,6 +20141,37 @@ 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
@@ -20159,41 +20257,11 @@ function createInput(value?: string): P5.Element;
  * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
  * for more info.
  * @param callback A function building a p5.strands shader.
+ * @param scope An optional scope object passed to .modify().
  * @returns The normal shader.
  */
-function buildNormalShader(callback: Function): P5.Shader;
-function buildNormalShader(hooks: object): P5.Shader;
-
-/**
- * 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;
+function buildNormalShader(callback: Function, scope?: object): P5.Shader;
+function buildNormalShader(hooks: object, scope?: object): P5.Shader;
 
 /**
  * A function that's called once when the mouse wheel moves.
@@ -20239,54 +20307,6 @@ function saveJSON(json: any[] | object, filename: string, optimize?: boolean): v
  */
 function mouseWheel(event?: WheelEvent): 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
- * shader into the <a href="#/p5/shader">`shader()`</a> function to apply it
- * to any fills 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 loadNormalShader('myMaterial.js');
- * }
- * 
- * function draw() {
- * background(255);
- * shader(myShader);
- * myShader.setUniform('time', millis());
- * lights();
- * noStroke();
- * fill('red');
- * sphere(50);
- * }`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 `finalColor` hook to change the color of each pixel on the surface of a shape.
- * 
- * `// myMaterial.js
- * let time = uniformFloat();
- * worldInputs.begin();
- * worldInputs.position.y +=
- * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
- * worldInputs.end();`Read the reference for <a href="#/p5/buildNormalShader">`buildNormalShader`</a>,
- * the version of `loadNormalShader` 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
- * `loadNormalShader('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
- * `loadNormalShader('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 normal shader.
- */
-function loadNormalShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
-
 /**
  * Ends a drawing group that contains its own styles and transformations.
  * 
@@ -20468,7 +20488,74 @@ function pop(): void;
  * @param multiple allow multiple files to be selected.
  * @returns The new input element.
  */
-function createFileInput(callback: (input: P5.File) => any, multiple?: boolean): P5.Element;
+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
+ * shader into the <a href="#/p5/shader">`shader()`</a> function to apply it
+ * to any fills 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 loadNormalShader('myMaterial.js');
+ * }
+ * 
+ * function draw() {
+ * background(255);
+ * shader(myShader);
+ * myShader.setUniform('time', millis());
+ * lights();
+ * noStroke();
+ * fill('red');
+ * sphere(50);
+ * }`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 `finalColor` hook to change the color of each pixel on the surface of a shape.
+ * 
+ * `// myMaterial.js
+ * let time = uniformFloat();
+ * worldInputs.begin();
+ * worldInputs.position.y +=
+ * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
+ * worldInputs.end();`Read the reference for <a href="#/p5/buildNormalShader">`buildNormalShader`</a>,
+ * the version of `loadNormalShader` 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
+ * `loadNormalShader('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
+ * `loadNormalShader('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 normal shader.
+ */
+function loadNormalShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
 
 /**
  * Returns the default shader used for fills when
@@ -20485,23 +20572,50 @@ function createFileInput(callback: (input: P5.File) => any, multiple?: boolean):
 function baseNormalShader(): P5.Shader;
 
 /**
- * Locks the mouse pointer to its current position and makes it invisible.
+ * Exits a pointer lock started with
+ * <a href="#/p5/requestPointerLock">requestPointerLock</a>.
  * 
- * `requestPointerLock()` allows the mouse to move forever without leaving the
- * screen. Calling `requestPointerLock()` locks the values of
+ * 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.
+ * Calling `exitPointerLock()` 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;
+function exitPointerLock(): void;
+
+/**
+ * Saves an `Array` of `String`s to a file, one per line.
+ * 
+ * The first parameter, `list`, is an array with the strings to save.
+ * 
+ * The second parameter, `filename`, is a string that sets the file's name.
+ * For example, calling `saveStrings(['0', '01', '011'], 'data.txt')` saves
+ * the array `['0', '01', '011']` to a file called `data.txt` on the user's
+ * computer.
+ * 
+ * The third parameter, `extension`, is optional. If a string is passed, as in
+ * `saveStrings(['0', '01', '0`1'], 'data', 'txt')`, the second parameter will
+ * be interpreted as the file name and the third parameter as the extension.
+ * 
+ * The fourth parameter, `isCRLF`, is also optional, If `true` is passed, as
+ * in `saveStrings(['0', '01', '011'], 'data', 'txt', true)`, then two
+ * characters, `\r\n` , will be added to the end of each string to create new
+ * lines in the saved file. `\r` is a carriage return (CR) and `\n` is a line
+ * feed (LF). By default, only `\n` (line feed) is added to each string in
+ * order to create new lines.
+ * 
+ * Note: The browser will either save the file immediately or prompt the user
+ * with a dialogue window.
+ * @param list data to save.
+ * @param filename name of file to be saved.
+ * @param extension format to use for the file.
+ * @param isCRLF whether to add `\r\n` to the end of each
+ * string. Defaults to `false`.
+ */
+function saveStrings(list: string[], filename: string, extension?: string, isCRLF?: boolean): void;
 
 /**
  * Create a new shader that can change how fills are drawn, based on the default shader
@@ -20555,56 +20669,11 @@ function requestPointerLock(): void;
  * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
  * for more info.
  * @param callback A function building a p5.strands shader.
+ * @param scope An optional scope object passed to .modify().
  * @returns The color shader.
  */
-function buildColorShader(callback: Function): P5.Shader;
-function buildColorShader(hooks: object): P5.Shader;
-
-/**
- * Exits a pointer lock started with
- * <a href="#/p5/requestPointerLock">requestPointerLock</a>.
- * 
- * 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>.
- * Calling `exitPointerLock()` 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 exitPointerLock(): void;
-
-/**
- * Saves an `Array` of `String`s to a file, one per line.
- * 
- * The first parameter, `list`, is an array with the strings to save.
- * 
- * The second parameter, `filename`, is a string that sets the file's name.
- * For example, calling `saveStrings(['0', '01', '011'], 'data.txt')` saves
- * the array `['0', '01', '011']` to a file called `data.txt` on the user's
- * computer.
- * 
- * The third parameter, `extension`, is optional. If a string is passed, as in
- * `saveStrings(['0', '01', '0`1'], 'data', 'txt')`, the second parameter will
- * be interpreted as the file name and the third parameter as the extension.
- * 
- * The fourth parameter, `isCRLF`, is also optional, If `true` is passed, as
- * in `saveStrings(['0', '01', '011'], 'data', 'txt', true)`, then two
- * characters, `\r\n` , will be added to the end of each string to create new
- * lines in the saved file. `\r` is a carriage return (CR) and `\n` is a line
- * feed (LF). By default, only `\n` (line feed) is added to each string in
- * order to create new lines.
- * 
- * Note: The browser will either save the file immediately or prompt the user
- * with a dialogue window.
- * @param list data to save.
- * @param filename name of file to be saved.
- * @param extension format to use for the file.
- * @param isCRLF whether to add `\r\n` to the end of each
- * string. Defaults to `false`.
- */
-function saveStrings(list: string[], filename: string, extension?: string, isCRLF?: boolean): void;
+function buildColorShader(callback: Function, scope?: object): P5.Shader;
+function buildColorShader(hooks: object, scope?: object): P5.Shader;
 
 /**
  * Connects points with a smooth curve (a spline).
@@ -20674,6 +20743,18 @@ function splineVertex(x: number, y: number, z?: number): void;
 function splineVertex(x: number, y: number, u?: number, v?: number): void;
 function splineVertex(x: number, y: number, z: number, u?: number, v?: number): void;
 
+/**
+ * Writes the contents of a <a href="#/p5.Table">Table</a> object to a file. Defaults to a
+ * text file with comma-separated-values ('csv') but can also
+ * use tab separation ('tsv'), or generate an HTML table ('html').
+ * The file saving process and location of the saved file will
+ * vary between web browsers.
+ * @param Table the <a href="#/p5.Table">Table</a> object to save to a file
+ * @param filename the filename to which the Table should be saved
+ * @param options can be one of "tsv", "csv", or "html"
+ */
+function saveTable(Table: P5.Table, filename: string, options?: string): void;
+
 /**
  * Loads a new shader from a file that can change how fills are drawn, based on the material used
  * when no lights or textures are active. Pass the resulting
@@ -20722,18 +20803,6 @@ function splineVertex(x: number, y: number, z: number, u?: number, v?: number):
  */
 function loadColorShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;
 
-/**
- * Writes the contents of a <a href="#/p5.Table">Table</a> object to a file. Defaults to a
- * text file with comma-separated-values ('csv') but can also
- * use tab separation ('tsv'), or generate an HTML table ('html').
- * The file saving process and location of the saved file will
- * vary between web browsers.
- * @param Table the <a href="#/p5.Table">Table</a> object to save to a file
- * @param filename the filename to which the Table should be saved
- * @param options can be one of "tsv", "csv", or "html"
- */
-function saveTable(Table: P5.Table, filename: string, options?: string): void;
-
 /**
  * Returns the default shader used for fills when no lights or textures are activate.
  * 
@@ -21031,62 +21100,11 @@ function camera(x?: number, y?: number, z?: number, centerX?: number, centerY?:
  * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
  * for more info.
  * @param callback A function building a p5.strands shader.
+ * @param scope An optional scope object passed to .modify().
  * @returns The stroke shader.
  */
-function buildStrokeShader(callback: Function): P5.Shader;
-function buildStrokeShader(hooks: object): P5.Shader;
-
-/**
- * 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>;
+function buildStrokeShader(callback: Function, scope?: object): P5.Shader;
+function buildStrokeShader(hooks: object, scope?: object): P5.Shader;
 
 /**
  * Gets or sets a given spline property.
@@ -21211,6 +21229,58 @@ 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.
  * 
@@ -21224,17 +21294,6 @@ function perspective(fovy?: number, aspect?: number, near?: number, far?: number
  */
 function baseStrokeShader(): P5.Shader;
 
-/**
- * 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 multiple properties for spline curves at once.
  * 
@@ -21303,6 +21362,17 @@ 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.
  *