p5 2.2.1 → 2.2.2-rc.1

package/types/p5.d.ts

@@ -5581,6 +5581,112 @@ declare class p5 {
   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.
@@ -5700,6 +5806,36 @@ declare class p5 {
    * function draw() {
    * myFilter.setUniform('time', millis());
    * filter(myFilter);
+   * }`We can use the `noise()` function built into strands to generate a color for each pixel.  (Again no need here for underlying content for the filter to operate on.)  Again we'll animate by passing in an announced uniform variable  `time` with `setUniform()`, each frame.
+   * 
+   * `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.
@@ -5710,116 +5846,11 @@ declare class p5 {
    * 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.
@@ -5985,53 +6016,14 @@ declare class p5 {
   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
@@ -6130,6 +6122,45 @@ declare class p5 {
    */
   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.
    * 
@@ -6807,169 +6838,6 @@ declare class p5 {
   image(img: p5.Image | p5.Element | p5.Texture | p5.Framebuffer | p5.FramebufferTexture | p5.Renderer | p5.Graphics, x: number, y: number, width?: number, height?: number): void;
   image(img: p5.Image | p5.Element | p5.Texture | p5.Framebuffer | p5.FramebufferTexture, dx: number, dy: number, dWidth: number, dHeight: number, sx: number, sy: number, sWidth?: number, sHeight?: number, fit?: typeof p5.CONTAIN | typeof p5.COVER, xAlign?: typeof p5.LEFT | typeof p5.RIGHT | typeof p5.CENTER, yAlign?: typeof p5.TOP | typeof p5.BOTTOM | typeof p5.CENTER): void;
 
-  /**
-   * 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>
@@ -7155,61 +7023,213 @@ declare class p5 {
    * // 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.
+   */
+  mouseDragged(event?: MouseEvent): void;
+
+  /**
+   * Returns `true` if the key it’s checking is pressed and `false` if not.
+   * 
+   * `keyIsDown()` is helpful when checking for multiple different key presses.
+   * For example, `keyIsDown()` can be used to check if both `LEFT_ARROW` and
+   * `UP_ARROW` are pressed:
+   * 
+   * `if (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) {
+   * // Move diagonally.
+   * }``keyIsDown()` can check for key presses using strings based on
+   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key" target="_blank">KeyboardEvent.key</a>
+   * or <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code" target="_blank">KeyboardEvent.code</a> values,
+   * such as `keyIsDown('x')` or `keyIsDown('ArrowLeft')`.
+   * 
+   * Note: In p5.js 2.0 and newer, numeric keycodes (such as 88 for 'X') are no longer supported.
+   * This is a breaking change from previous versions.
+   * 
+   * You can still use the p5 constants like `LEFT_ARROW` which now map to string values
+   * internally rather than numeric codes.
+   * @param code key to check.
+   * @returns whether the key is down or not.
+   */
+  keyIsDown(code: number | string): boolean;
+
+  /**
+   * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply while drawing.
+   * 
+   * Shaders are programs that run on the graphics processing unit (GPU). They
+   * can process many pixels or vertices at the same time, making them fast for
+   * many graphics tasks.
+   * 
+   * You can make new shaders using p5.strands with the
+   * <a href="#/p5/buildMaterialShader">`buildMaterialShader`</a>,
+   * <a href="#/p5/buildColorShader">`buildColorShader`</a>, and
+   * <a href="#/p5/buildNormalShader">`buildNormalShader`</a> functions. You can also use
+   * <a href="#/p5/buildFilterShader">`buildFilterShader`</a> alongside
+   * <a href="#/p5/filter">`filter`</a>, and
+   * <a href="#/p5/buildStrokeShader">`buildStrokeShader`</a> alongside
+   * <a href="#/p5/stroke">`stroke`</a>.
+   * 
+   * The parameter, `s`, is the <a href="#/p5.Shader">p5.Shader</a> object to
+   * apply. For example, calling `shader(myShader)` applies `myShader` to
+   * process each pixel on the canvas. This only changes the fill (the inner part of shapes),
+   * but does not affect the outlines (strokes) or any images drawn using the `image()` function.
+   * The source code from a <a href="#/p5.Shader">p5.Shader</a> object's
+   * fragment and vertex shaders will be compiled the first time it's passed to
+   * `shader()`.
+   * 
+   * Calling <a href="#/p5/resetShader">resetShader()</a> restores a sketch’s
+   * default shaders.
+   * 
+   * Note: Shaders can only be used in WebGL mode.
+   * 
+   * `let myShader;
+   * 
+   * function setup() {
+   * createCanvas(200, 200, WEBGL);
+   * myShader = buildMaterialShader(material);
+   * noStroke();
+   * describe('A square with dynamically changing colors on a beige background.');
+   * }
+   * 
+   * 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.
-   */
-  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.
-   */
-  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.
    */
-  setContent(content: string): void;
+  shader(s: p5.Shader): void;
 
   /**
    * Draws a <a href="#/p5.Geometry">p5.Geometry</a> object to the canvas.
@@ -7228,6 +7248,17 @@ declare class p5 {
    */
   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'`.
@@ -7507,26 +7538,6 @@ declare class p5 {
    */
   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.
    * 
@@ -7588,6 +7599,26 @@ declare class p5 {
    */
   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.
    * 
@@ -8184,25 +8215,6 @@ declare class p5 {
    */
   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.
    * 
@@ -8311,6 +8323,25 @@ declare class p5 {
    */
   mouseReleased(event?: MouseEvent): void;
 
+  /**
+   * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply for images.
+   * 
+   * This method allows the user to apply a custom shader to images, enabling
+   * advanced visual effects such as pixel manipulation, color adjustments,
+   * or dynamic behavior. The shader will be applied to the image drawn using
+   * the <a href="#/p5/image">image()</a> function.
+   * 
+   * The shader will be used exclusively for:
+   * 
+   * - `image()` calls, applying only when drawing 2D images.
+   * 
+   * - 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.
    * 
@@ -8428,11 +8459,11 @@ declare class p5 {
    * 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.
@@ -8728,10 +8759,11 @@ declare class p5 {
    * 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
@@ -8764,62 +8796,15 @@ declare class p5 {
    * <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.
-   */
-  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.
    */
-  loadMaterialShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<p5.Shader>;
+  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.
@@ -8910,30 +8895,51 @@ declare class p5 {
   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.
@@ -9004,6 +9010,19 @@ declare class p5 {
    */
   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.
    * 
@@ -9038,6 +9057,19 @@ declare class p5 {
    */
   erase(strengthFill?: number, strengthStroke?: number): void;
 
+  /**
+   * Returns the base shader used for filters.
+   * 
+   * Calling <a href="#/p5/buildFilterShader">`buildFilterShader(shaderFunction)`</a>
+   * is equivalent to calling `baseFilterShader().modify(shaderFunction)`.
+   * 
+   * Read <a href="#/p5/buildFilterShader">the `buildFilterShader` reference</a> or
+   * call `baseFilterShader().inspectHooks()` for more information on what you can do with
+   * the base filter shader.
+   * @returns The base filter shader.
+   */
+  baseFilterShader(): p5.Shader;
+
   /**
    * Ends erasing that was started with <a href="#/p5/erase">erase()</a>.
    * 
@@ -9066,6 +9098,37 @@ declare class p5 {
   createInput(value?: string, type?: string): p5.Element;
   createInput(value?: string): p5.Element;
 
+  /**
+   * Saves an `Object` or `Array` to a JSON file.
+   * 
+   * JavaScript Object Notation
+   * (<a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON" target="_blank">JSON</a>)
+   * is a standard format for sending data between applications. The format is
+   * based on JavaScript objects which have keys and values. JSON files store
+   * data in an object with strings as keys. Values can be strings, numbers,
+   * Booleans, arrays, `null`, or other objects.
+   * 
+   * The first parameter, `json`, is the data to save. The data can be an array,
+   * as in `[1, 2, 3]`, or an object, as in
+   * `{ x: 50, y: 50, color: 'deeppink' }`.
+   * 
+   * The second parameter, `filename`, is a string that sets the file's name.
+   * For example, calling `saveJSON([1, 2, 3], 'data.json')` saves the array
+   * `[1, 2, 3]` to a file called `data.json` on the user's computer.
+   * 
+   * The third parameter, `optimize`, is optional. If `true` is passed, as in
+   * `saveJSON([1, 2, 3], 'data.json', true)`, then all unneeded whitespace will
+   * be removed to reduce the file size.
+   * 
+   * Note: The browser will either save the file immediately or prompt the user
+   * with a dialogue window.
+   * @param json data to save.
+   * @param filename name of the file to be saved.
+   * @param optimize whether to trim unneeded whitespace. Defaults
+   * to `true`.
+   */
+  saveJSON(json: any[] | object, filename: string, optimize?: boolean): void;
+
   /**
    * Create a new shader that can change how fills are drawn, based on the material used
    * when <a href="#/p5/normalMaterial">`normalMaterial()`</a> is active. Pass the resulting
@@ -9151,41 +9214,11 @@ declare class p5 {
    * 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.
@@ -9231,54 +9264,6 @@ declare class p5 {
    */
   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.
    * 
@@ -9460,7 +9445,74 @@ declare class p5 {
    * @param multiple allow multiple files to be selected.
    * @returns The new input element.
    */
-  createFileInput(callback: (input: p5.File) => any, multiple?: boolean): p5.Element;
+  createFileInput(callback: (input: p5.File) => any, multiple?: boolean): p5.Element;
+
+  /**
+   * Locks the mouse pointer to its current position and makes it invisible.
+   * 
+   * `requestPointerLock()` allows the mouse to move forever without leaving the
+   * screen. Calling `requestPointerLock()` locks the values of
+   * <a href="#/p5/mouseX">mouseX</a>, <a href="#/p5/mouseY">mouseY</a>,
+   * <a href="#/p5/pmouseX">pmouseX</a>, and <a href="#/p5/pmouseY">pmouseY</a>.
+   * <a href="#/p5/movedX">movedX</a> and <a href="#/p5/movedY">movedY</a>
+   * continue updating and can be used to get the distance the mouse moved since
+   * the last frame was drawn. Calling
+   * <a href="#/p5/exitPointerLock">exitPointerLock()</a> resumes updating the
+   * mouse system variables.
+   * 
+   * Note: Most browsers require an input, such as a click, before calling
+   * `requestPointerLock()`. It’s recommended to call `requestPointerLock()` in
+   * an event function such as <a href="#/p5/doubleClicked">doubleClicked()</a>.
+   */
+  requestPointerLock(): void;
+
+  /**
+   * Loads a new shader from a file that can change how fills are drawn, based on the material used
+   * when <a href="#/p5/normalMaterial">`normalMaterial()`</a> is active. Pass the resulting
+   * 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>;
 
   /**
    * Returns the default shader used for fills when
@@ -9477,23 +9529,50 @@ declare class p5 {
   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>.
    */
-  requestPointerLock(): void;
+  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`.
+   */
+  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
@@ -9547,56 +9626,11 @@ declare class p5 {
    * 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): p5.Shader;
-  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>.
-   */
-  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`.
-   */
-  saveStrings(list: string[], filename: string, extension?: string, isCRLF?: boolean): void;
+  buildColorShader(callback: Function, scope?: object): p5.Shader;
+  buildColorShader(hooks: object, scope?: object): p5.Shader;
 
   /**
    * Connects points with a smooth curve (a spline).
@@ -9666,6 +9700,18 @@ declare class p5 {
   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
@@ -9714,18 +9760,6 @@ declare class p5 {
    */
   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.
    * 
@@ -10023,62 +10057,11 @@ declare class p5 {
    * 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.
@@ -10203,6 +10186,58 @@ declare class p5 {
    */
   perspective(fovy?: number, aspect?: number, near?: number, far?: number): void;
 
+  /**
+   * Loads a new shader from a file that can change how strokes are drawn. Pass the resulting
+   * shader into the <a href="#/p5/strokeShader">`strokeShader()`</a> function to apply it
+   * to any strokes you draw.
+   * 
+   * Since this function loads data from another file, it returns a `Promise`.
+   * Use it in an `async function setup`, and `await` its result.
+   * 
+   * `let myShader;
+   * async function setup() {
+   * createCanvas(200, 200, WEBGL);
+   * myShader = await loadStrokeShader('myMaterial.js');
+   * }
+   * 
+   * function draw() {
+   * background(255);
+   * strokeShader(myShader);
+   * strokeWeight(30);
+   * line(
+   * -width/3,
+   * sin(millis()*0.001) * height/4,
+   * width/3,
+   * sin(millis()*0.001 + 1) * height/4
+   * );
+   * }`Inside your shader file, you can call p5.strands hooks to change parts of the shader. For
+   * example, you might use the `worldInputs` hook to change each vertex, or you
+   * might use the `pixelInputs` hook to change each pixel on the surface of a stroke.
+   * 
+   * `// myMaterial.js
+   * pixelInputs.begin();
+   * let opacity = 1 - smoothstep(
+   * 0,
+   * 15,
+   * length(pixelInputs.position - pixelInputs.center)
+   * );
+   * pixelInputs.color.a *= opacity;
+   * pixelInputs.end();`Read the reference for <a href="#/p5/buildStrokeShader">`buildStrokeShader`</a>,
+   * the version of `loadStrokeShader` that takes in a function instead of a separate file,
+   * for a full list of hooks you can use and examples for each.
+   * 
+   * The second parameter, `successCallback`, is optional. If a function is passed, as in
+   * `loadStrokeShader('myShader.js', onLoaded)`, then the `onLoaded()` function will be called
+   * once the shader loads. The shader will be passed to `onLoaded()` as its only argument.
+   * The return value of `handleData()`, if present, will be used as the final return value of
+   * `loadStrokeShader('myShader.js', onLoaded)`.
+   * @param url The URL of your p5.strands JavaScript file.
+   * @param onSuccess A callback function to run when loading completes.
+   * @param onFailure A callback function to run when loading fails.
+   * @returns The stroke shader.
+   */
+  loadStrokeShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<p5.Shader>;
+
   /**
    * Returns the default shader used for strokes.
    * 
@@ -10216,17 +10251,6 @@ declare class p5 {
    */
   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.
-   */
-  resetShader(): void;
-
   /**
    * Sets multiple properties for spline curves at once.
    * 
@@ -10295,6 +10319,17 @@ declare class p5 {
   linePerspective(enable: boolean): boolean;
   linePerspective(): boolean;
 
+  /**
+   * Restores the default shaders.
+   * 
+   * `resetShader()` deactivates any shaders previously applied by
+   * <a href="#/p5/shader">shader()</a>, <a href="#/p5/strokeShader">strokeShader()</a>,
+   * or <a href="#/p5/imageShader">imageShader()</a>.
+   * 
+   * Note: Shaders can only be used in WebGL mode.
+   */
+  resetShader(): void;
+
   /**
    * Sets an orthographic projection for the current camera in a 3D sketch.
    *