p5 2.0.1 → 2.0.3

package/types/webgl/material.d.ts

@@ -0,0 +1,2656 @@
+// This file is auto-generated from JSDoc documentation
+
+import p5 from 'p5';
+import { Color } from '../color/p5.Color';
+
+declare module 'p5' {
+/**
+ * Loads vertex and fragment shaders to create a
+ * p5.Shader object.Shaders are programs that run on the graphics processing unit (GPU). They
+ * can process many pixels at the same time, making them fast for many
+ * graphics tasks. They’re written in a language called
+ * GLSL
+ * and run along with the rest of the code in a sketch.Once the p5.Shader object is created, it can be
+ * used with the shader() function, as in
+ * `shader(myShader)`. A shader program consists of two files, a vertex shader
+ * and a fragment shader. The vertex shader affects where 3D geometry is drawn
+ * on the screen and the fragment shader affects color.`loadShader()` loads the vertex and fragment shaders from their `.vert` and
+ * `.frag` files. For example, calling
+ * `loadShader('assets/shader.vert', 'assets/shader.frag')` loads both
+ * required shaders and returns a p5.Shader object.The third parameter, `successCallback`, is optional. If a function is
+ * passed, it will be called once the shader has loaded. The callback function
+ * can use the new p5.Shader object as its
+ * parameter. The return value of the `successCallback()` function will be used
+ * as the final return value of `loadShader()`.The fourth parameter, `failureCallback`, is also optional. If a function is
+ * passed, it will be called if the shader fails to load. The callback
+ * function can use the event error as its parameter. The return value of the `
+ * failureCallback()` function will be used as the final return value of `loadShader()`.This function returns a `Promise` and should be used in an `async` setup with
+ * `await`. See the examples for the usage syntax.Note: Shaders can only be used in WebGL mode.
+ *
+ * @param path of the vertex shader to be loaded.
+ * @param path of the fragment shader to be loaded.
+ * @param function to call once the shader is loaded. Can be passed the
+ * <a href="#/p5.Shader">p5.Shader</a> object.
+ * @param function to call if the shader fails to load. Can be passed an
+ * `Error` event object.
+ * @return new shader created from the vertex and fragment shader files.
+ * @example <div modernizr='webgl'>
+ * <code>
+ * // Note: A "uniform" is a global variable within a shader program.
+ * 
+ * let mandelbrot;
+ * 
+ * // Load the shader and create a p5.Shader object.
+ * async function setup() {
+ * mandelbrot = await loadShader('assets/shader.vert', 'assets/shader.frag');
+ * 
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * // Compile and apply the p5.Shader object.
+ * shader(mandelbrot);
+ * 
+ * // Set the shader uniform p to an array.
+ * mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+ * 
+ * // Set the shader uniform r to the value 1.5.
+ * mandelbrot.setUniform('r', 1.5);
+ * 
+ * // Add a quad as a display surface for the shader.
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * 
+ * describe('A black fractal image on a magenta background.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Note: A "uniform" is a global variable within a shader program.
+ * 
+ * let mandelbrot;
+ * 
+ * // Load the shader and create a p5.Shader object.
+ * async function setup() {
+ * mandelbrot = await loadShader('assets/shader.vert', 'assets/shader.frag');
+ * 
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * // Use the p5.Shader object.
+ * shader(mandelbrot);
+ * 
+ * // Set the shader uniform p to an array.
+ * mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+ * 
+ * describe('A fractal image zooms in and out of focus.');
+ * }
+ * 
+ * function draw() {
+ * // Set the shader uniform r to a value that oscillates between 0 and 2.
+ * mandelbrot.setUniform('r', sin(frameCount * 0.01) + 1);
+ * 
+ * // Add a quad as a display surface for the shader.
+ * quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ * }
+ * </code>
+ * </div>
+ */
+function loadShader(vertFilename: string | Request, fragFilename: string | Request, successCallback?: Function, failureCallback?: Function): Promise<p5.Shader>;
+
+/**
+ * Creates a new p5.Shader object.Shaders are programs that run on the graphics processing unit (GPU). They
+ * can process many pixels at the same time, making them fast for many
+ * graphics tasks. They’re written in a language called
+ * GLSL
+ * and run along with the rest of the code in a sketch.Once the p5.Shader object is created, it can be
+ * used with the shader() function, as in
+ * `shader(myShader)`. A shader program consists of two parts, a vertex shader
+ * and a fragment shader. The vertex shader affects where 3D geometry is drawn
+ * on the screen and the fragment shader affects color.The first parameter, `vertSrc`, sets the vertex shader. It’s a string that
+ * contains the vertex shader program written in GLSL.The second parameter, `fragSrc`, sets the fragment shader. It’s a string
+ * that contains the fragment shader program written in GLSL.A shader can optionally describe  which are functions in GLSL that
+ * users may choose to provide to customize the behavior of the shader using the
+ * `modify()` method of `p5.Shader`. These are added by
+ * describing the hooks in a third parameter, `options`, and referencing the hooks in
+ * your `vertSrc` or `fragSrc`. Hooks for the vertex or fragment shader are described under
+ * the `vertex` and `fragment` keys of `options`. Each one is an object. where each key is
+ * the type and name of a hook function, and each value is a string with the
+ * parameter list and default implementation of the hook. For example, to let users
+ * optionally run code at the start of the vertex shader, the options object could
+ * include:`{
+ * vertex: {
+ * 'void beforeVertex': '() {}'
+ * }
+ * }`Then, in your vertex shader source, you can run a hook by calling a function
+ * with the same name prefixed by `HOOK_`. If you want to check if the default
+ * hook has been replaced, maybe to avoid extra overhead, you can check if the
+ * same name prefixed by `AUGMENTED_HOOK_` has been defined:`void main() {
+ * // In most cases, just calling the hook is fine:
+ * HOOK_beforeVertex();
+ * 
+ * // Alternatively, for more efficiency:
+ * #ifdef AUGMENTED_HOOK_beforeVertex
+ * HOOK_beforeVertex();
+ * #endif
+ * 
+ * // Add the rest of your shader code here!
+ * }`Note: Only filter shaders can be used in 2D mode. All shaders can be used
+ * in WebGL mode.
+ *
+ * @param source code for the vertex shader.
+ * @param source code for the fragment shader.
+ * @param An optional object describing how this shader can
+ * be augmented with hooks. It can include:
+ * - `vertex`: An object describing the available vertex shader hooks.
+ * - `fragment`: An object describing the available frament shader hooks.
+ * @returns new shader object created from the
+ * vertex and fragment shaders.
+ * @example <div modernizr='webgl'>
+ * <code>
+ * // Note: A "uniform" is a global variable within a shader program.
+ * 
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `
+ * precision highp float;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * varying vec2 vTexCoord;
+ * 
+ * void main() {
+ * vTexCoord = aTexCoord;
+ * vec4 positionVec4 = vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+ * }
+ * `;
+ * 
+ * // Create a string with the fragment shader program.
+ * // The fragment shader is called for each pixel.
+ * let fragSrc = `
+ * precision highp float;
+ * 
+ * void main() {
+ * // Set each pixel's RGBA value to yellow.
+ * gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
+ * }
+ * `;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * // Create a p5.Shader object.
+ * let shaderProgram = createShader(vertSrc, fragSrc);
+ * 
+ * // Compile and apply the p5.Shader object.
+ * shader(shaderProgram);
+ * 
+ * // Style the drawing surface.
+ * noStroke();
+ * 
+ * // Add a plane as a drawing surface.
+ * plane(100, 100);
+ * 
+ * describe('A yellow square.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Note: A "uniform" is a global variable within a shader program.
+ * 
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `
+ * precision highp float;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * varying vec2 vTexCoord;
+ * 
+ * void main() {
+ * vTexCoord = aTexCoord;
+ * vec4 positionVec4 = vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+ * }
+ * `;
+ * 
+ * // Create a string with the fragment shader program.
+ * // The fragment shader is called for each pixel.
+ * let fragSrc = `
+ * precision highp float;
+ * uniform vec2 p;
+ * uniform float r;
+ * const int numIterations = 500;
+ * varying vec2 vTexCoord;
+ * 
+ * void main() {
+ * vec2 c = p + gl_FragCoord.xy * r;
+ * vec2 z = c;
+ * float n = 0.0;
+ * 
+ * for (int i = numIterations; i > 0; i--) {
+ * if (z.x * z.x + z.y * z.y > 4.0) {
+ * n = float(i) / float(numIterations);
+ * break;
+ * }
+ * z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
+ * }
+ * 
+ * gl_FragColor = vec4(
+ * 0.5 - cos(n * 17.0) / 2.0,
+ * 0.5 - cos(n * 13.0) / 2.0,
+ * 0.5 - cos(n * 23.0) / 2.0,
+ * 1.0
+ * );
+ * }
+ * `;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * // Create a p5.Shader object.
+ * let mandelbrot = createShader(vertSrc, fragSrc);
+ * 
+ * // Compile and apply the p5.Shader object.
+ * shader(mandelbrot);
+ * 
+ * // Set the shader uniform p to an array.
+ * // p is the center point of the Mandelbrot image.
+ * mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+ * 
+ * // Set the shader uniform r to 0.005.
+ * // r is the size of the image in Mandelbrot-space.
+ * mandelbrot.setUniform('r', 0.005);
+ * 
+ * // Style the drawing surface.
+ * noStroke();
+ * 
+ * // Add a plane as a drawing surface.
+ * plane(100, 100);
+ * 
+ * describe('A black fractal image on a magenta background.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Note: A "uniform" is a global variable within a shader program.
+ * 
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `
+ * precision highp float;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ * 
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * varying vec2 vTexCoord;
+ * 
+ * void main() {
+ * vTexCoord = aTexCoord;
+ * vec4 positionVec4 = vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+ * }
+ * `;
+ * 
+ * // Create a string with the fragment shader program.
+ * // The fragment shader is called for each pixel.
+ * let fragSrc = `
+ * precision highp float;
+ * uniform vec2 p;
+ * uniform float r;
+ * const int numIterations = 500;
+ * varying vec2 vTexCoord;
+ * 
+ * void main() {
+ * vec2 c = p + gl_FragCoord.xy * r;
+ * vec2 z = c;
+ * float n = 0.0;
+ * 
+ * for (int i = numIterations; i > 0; i--) {
+ * if (z.x * z.x + z.y * z.y > 4.0) {
+ * n = float(i) / float(numIterations);
+ * break;
+ * }
+ * 
+ * z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
+ * }
+ * 
+ * gl_FragColor = vec4(
+ * 0.5 - cos(n * 17.0) / 2.0,
+ * 0.5 - cos(n * 13.0) / 2.0,
+ * 0.5 - cos(n * 23.0) / 2.0,
+ * 1.0
+ * );
+ * }
+ * `;
+ * 
+ * let mandelbrot;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * // Create a p5.Shader object.
+ * mandelbrot = createShader(vertSrc, fragSrc);
+ * 
+ * // Apply the p5.Shader object.
+ * shader(mandelbrot);
+ * 
+ * // Set the shader uniform p to an array.
+ * // p is the center point of the Mandelbrot image.
+ * mandelbrot.setUniform('p', [-0.74364388703, 0.13182590421]);
+ * 
+ * describe('A fractal image zooms in and out of focus.');
+ * }
+ * 
+ * function draw() {
+ * // Set the shader uniform r to a value that oscillates
+ * // between 0 and 0.005.
+ * // r is the size of the image in Mandelbrot-space.
+ * let radius = 0.005 * (sin(frameCount * 0.01) + 1);
+ * mandelbrot.setUniform('r', radius);
+ * 
+ * // Style the drawing surface.
+ * noStroke();
+ * 
+ * // Add a plane as a drawing surface.
+ * plane(100, 100);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // A shader with hooks.
+ * let myShader;
+ * 
+ * // A shader with modified hooks.
+ * let modifiedShader;
+ * 
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `
+ * precision highp float;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ * 
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * 
+ * void main() {
+ * vec4 positionVec4 = vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+ * }
+ * `;
+ * 
+ * // Create a fragment shader that uses a hook.
+ * let fragSrc = `
+ * precision highp float;
+ * void main() {
+ * // Let users override the color
+ * gl_FragColor = HOOK_getColor(vec4(1., 0., 0., 1.));
+ * }
+ * `;
+ * 
+ * function setup() {
+ * createCanvas(50, 50, WEBGL);
+ * 
+ * // Create a shader with hooks
+ * myShader = createShader(vertSrc, fragSrc, {
+ * fragment: {
+ * 'vec4 getColor': '(vec4 color) { return color; }'
+ * }
+ * });
+ * 
+ * // Make a version of the shader with a hook overridden
+ * modifiedShader = myShader.modify({
+ * 'vec4 getColor': `(vec4 color) {
+ * return vec4(0., 0., 1., 1.);
+ * }`
+ * });
+ * }
+ * 
+ * function draw() {
+ * noStroke();
+ * 
+ * push();
+ * shader(myShader);
+ * translate(-width/3, 0);
+ * sphere(10);
+ * pop();
+ * 
+ * push();
+ * shader(modifiedShader);
+ * translate(width/3, 0);
+ * sphere(10);
+ * pop();
+ * }
+ * </code>
+ * </div>
+ */
+function createShader(vertSrc: string, fragSrc: string, options?: object): p5.Shader;
+
+/**
+ * Creates and loads a filter shader from an external file.
+ *
+ * @param path to the fragment shader file
+ * @param callback to be called once the shader is
+ * loaded. Will be passed the
+ * <a href="#/p5.Shader">p5.Shader</a> object.
+ * @param callback to be called if there is an error
+ * loading the shader. Will be passed the
+ * error event.
+ * @return a promise that resolves with a shader object
+ * @example <div modernizr='webgl'>
+ * <code>
+ * let myShader;
+ * 
+ * async function setup() {
+ * myShader = await loadFilterShader('assets/basic.frag');
+ * createCanvas(100, 100, WEBGL);
+ * noStroke();
+ * }
+ * 
+ * function draw() {
+ * // shader() sets the active shader with our shader
+ * shader(myShader);
+ * 
+ * // rect gives us some geometry on the screen
+ * rect(-50, -50, width, height);
+ * }
+ * </code>
+ * </div>
+ * @alt A rectangle with a shader applied to it.
+ */
+function loadFilterShader(fragFilename: string, successCallback?: Function, failureCallback?: Function): Promise<p5.Shader>;
+
+/**
+ * Creates a p5.Shader object to be used with the
+ * filter() function.`createFilterShader()` works like
+ * createShader() but has a default vertex
+ * shader included. `createFilterShader()` is intended to be used along with
+ * filter() for filtering the contents of a canvas.
+ * A filter shader will be applied to the whole canvas instead of just
+ * p5.Geometry objects.The parameter, `fragSrc`, sets the fragment shader. It’s a string that
+ * contains the fragment shader program written in
+ * GLSL.The p5.Shader object that's created has some
+ * uniforms that can be set:The p5.Shader 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' repo of shader examples
+ * or the Introduction to Shaders tutorial.
+ *
+ * @param source code for the fragment shader.
+ * @returns new shader object created from the fragment shader.
+ * @example <div modernizr='webgl'>
+ * <code>
+ * function setup() {
+ * let fragSrc = `precision highp float;
+ * void main() {
+ * gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
+ * }`;
+ * 
+ * createCanvas(100, 100, WEBGL);
+ * let s = createFilterShader(fragSrc);
+ * filter(s);
+ * describe('a yellow canvas');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div modernizr='webgl'>
+ * <code>
+ * let img, s;
+ * async function setup() {
+ * img = await loadImage('assets/bricks.jpg');
+ * let fragSrc = `precision highp float;
+ * 
+ * // x,y coordinates, given from the vertex shader
+ * varying vec2 vTexCoord;
+ * 
+ * // the canvas contents, given from filter()
+ * uniform sampler2D tex0;
+ * // other useful information from the canvas
+ * uniform vec2 texelSize;
+ * uniform vec2 canvasSize;
+ * // a custom variable from this sketch
+ * uniform float darkness;
+ * 
+ * void main() {
+ * // get the color at current pixel
+ * vec4 color = texture2D(tex0, vTexCoord);
+ * // set the output color
+ * color.b = 1.0;
+ * color *= darkness;
+ * gl_FragColor = vec4(color.rgb, 1.0);
+ * }`;
+ * 
+ * createCanvas(100, 100, WEBGL);
+ * s = createFilterShader(fragSrc);
+ * }
+ * 
+ * function draw() {
+ * image(img, -50, -50);
+ * s.setUniform('darkness', 0.5);
+ * filter(s);
+ * describe('a image of bricks tinted dark blue');
+ * }
+ * </code>
+ * </div>
+ */
+function createFilterShader(fragSrc: string): p5.Shader;
+
+/**
+ * Sets the p5.Shader 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. They’re written in a language called
+ * GLSL
+ * and run along with the rest of the code in a sketch.
+ * p5.Shader objects can be created using the
+ * createShader() and
+ * loadShader() functions.The parameter, `s`, is the p5.Shader 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 p5.Shader object's
+ * fragment and vertex shaders will be compiled the first time it's passed to
+ * `shader()`. See
+ * MDN
+ * for more information about compiling shaders.Calling resetShader() restores a sketch’s
+ * default shaders.Note: Shaders can only be used in WebGL mode.If you want to apply shaders to strokes or images, use the following methods:
+ *
+ * @param <a href="#/p5.Shader">p5.Shader</a> object
+ * to apply.
+ * @example <div modernizr='webgl'>
+ * <code>
+ * 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);
+ * //lights();
+ * torus(25, 10, 30, 30);
+ * }
+ * </code>
+ * </div>
+ * @example <div modernizr='webgl'>
+ * <code>
+ * 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(100, 100);
+ * }
+ * </code>
+ * </div>
+ * @example <div modernizr='webgl'>
+ * <code>
+ * let myShader;
+ * 
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * 
+ * myShader = baseMaterialShader().modify({
+ * declarations: 'uniform float time;',
+ * 'vec4 getFinalColor': `(vec4 color) {
+ * float r = 0.2 + 0.5 * abs(sin(time + 0.0));
+ * float g = 0.2 + 0.5 * abs(sin(time + 1.0));
+ * float b = 0.2 + 0.5 * abs(sin(time + 2.0));
+ * color.rgb = vec3(r, g, b);
+ * return color;
+ * }`
+ * });
+ * 
+ * noStroke();
+ * describe('A 3D cube with dynamically changing colors on a beige background.');
+ * }
+ * 
+ * function draw() {
+ * background(245, 245, 220);
+ * shader(myShader);
+ * myShader.setUniform('time', millis() / 1000.0);
+ * 
+ * box(50);
+ * }
+ * </code>
+ * </div>
+ */
+function shader(s: p5.Shader): void;
+
+/**
+ * Sets the p5.Shader 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 resetShader() is called or another
+ * strokeShader is applied.The shader will be used for:To further customize its behavior, refer to the various hooks provided by
+ * the baseStrokeShader() method, which allow
+ * control over stroke weight, vertex positions, colors, and more.
+ *
+ * @param <a href="#/p5.Shader">p5.Shader</a> object
+ * to apply for strokes.
+ * @example <div modernizr='webgl'>
+ * <code>
+ * let animatedStrokeShader;
+ * 
+ * let vertSrc = `
+ * precision mediump int;
+ * 
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ * uniform float uStrokeWeight;
+ * 
+ * uniform bool uUseLineColor;
+ * uniform vec4 uMaterialColor;
+ * 
+ * uniform vec4 uViewport;
+ * uniform int uPerspective;
+ * uniform int uStrokeJoin;
+ * 
+ * attribute vec4 aPosition;
+ * attribute vec3 aTangentIn;
+ * attribute vec3 aTangentOut;
+ * attribute float aSide;
+ * attribute vec4 aVertexColor;
+ * 
+ * void main() {
+ * vec4 posp = uModelViewMatrix * aPosition;
+ * vec4 posqIn = uModelViewMatrix * (aPosition + vec4(aTangentIn, 0));
+ * vec4 posqOut = uModelViewMatrix * (aPosition + vec4(aTangentOut, 0));
+ * 
+ * float facingCamera = pow(
+ * abs(normalize(posqIn-posp).z),
+ * 0.25
+ * );
+ * 
+ * float scale = mix(1., 0.995, facingCamera);
+ * 
+ * posp.xyz = posp.xyz * scale;
+ * posqIn.xyz = posqIn.xyz * scale;
+ * posqOut.xyz = posqOut.xyz * scale;
+ * 
+ * vec4 p = uProjectionMatrix * posp;
+ * vec4 qIn = uProjectionMatrix * posqIn;
+ * vec4 qOut = uProjectionMatrix * posqOut;
+ * 
+ * vec2 tangentIn = normalize((qIn.xy*p.w - p.xy*qIn.w) * uViewport.zw);
+ * vec2 tangentOut = normalize((qOut.xy*p.w - p.xy*qOut.w) * uViewport.zw);
+ * 
+ * vec2 curPerspScale;
+ * if(uPerspective == 1) {
+ * curPerspScale = (uProjectionMatrix * vec4(1, sign(uProjectionMatrix[1][1]), 0, 0)).xy;
+ * } else {
+ * curPerspScale = p.w / (0.5 * uViewport.zw);
+ * }
+ * 
+ * vec2 offset;
+ * vec2 tangent = aTangentIn == vec3(0.) ? tangentOut : tangentIn;
+ * vec2 normal = vec2(-tangent.y, tangent.x);
+ * float normalOffset = sign(aSide);
+ * float tangentOffset = abs(aSide) - 1.;
+ * offset = (normal * normalOffset + tangent * tangentOffset) *
+ * uStrokeWeight * 0.5;
+ * 
+ * gl_Position.xy = p.xy + offset.xy * curPerspScale;
+ * gl_Position.zw = p.zw;
+ * }
+ * `;
+ * 
+ * let fragSrc = `
+ * precision mediump float;
+ * uniform float uTime;
+ * 
+ * void main() {
+ * float wave = sin(gl_FragCoord.x * 0.1 + uTime) * 0.5 + 0.5;
+ * gl_FragColor = vec4(wave, 0.5, 1.0, 1.0);  // Animated color based on time
+ * }
+ * `;
+ * 
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * animatedStrokeShader = createShader(vertSrc, fragSrc);
+ * strokeShader(animatedStrokeShader);
+ * strokeWeight(4);
+ * 
+ * describe('A hollow cube rotating continuously with its stroke colors changing dynamically over time against a static gray background.');
+ * }
+ * 
+ * function draw() {
+ * animatedStrokeShader.setUniform('uTime', millis() / 1000.0);
+ * background(250);
+ * rotateY(frameCount * 0.02);
+ * noFill();
+ * orbitControl();
+ * box(50);
+ * }
+ * </code>
+ * </div>
+ * @example <div modernizr='webgl'>
+ * <code>
+ * let myShader;
+ * 
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * myShader = baseStrokeShader().modify({
+ * 'float random': `(vec2 p) {
+ * vec3 p3  = fract(vec3(p.xyx) * .1471);
+ * p3 += dot(p3, p3.yzx + 32.33);
+ * return fract((p3.x + p3.y) * p3.z);
+ * }`,
+ * 'Inputs getPixelInputs': `(Inputs inputs) {
+ * // Modify alpha with dithering effect
+ * float a = inputs.color.a;
+ * inputs.color.a = 1.0;
+ * inputs.color *= random(inputs.position.xy) > a ? 0.0 : 1.0;
+ * return inputs;
+ * }`
+ * });
+ * }
+ * 
+ * function draw() {
+ * background(255);
+ * strokeShader(myShader);
+ * strokeWeight(12);
+ * beginShape();
+ * for (let i = 0; i <= 50; i++) {
+ * stroke(
+ * map(i, 0, 50, 150, 255),
+ * 100 + 155 * sin(i / 5),
+ * 255 * map(i, 0, 50, 1, 0)
+ * );
+ * vertex(
+ * map(i, 0, 50, 1, -1) * width / 3,
+ * 50 * cos(i / 10 + frameCount / 80)
+ * );
+ * }
+ * endShape();
+ * }
+ * </code>
+ * </div>
+ */
+function strokeShader(s: p5.Shader): void;
+
+/**
+ * Sets the p5.Shader 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 image() function.The shader will be used exclusively for:
+ *
+ * @param <a href="#/p5.Shader">p5.Shader</a> object
+ * to apply for images.
+ * @example <div modernizr='webgl'>
+ * <code>
+ * let img;
+ * let imgShader;
+ * 
+ * async function setup() {
+ * img = await loadImage('assets/outdoor_image.jpg');
+ * 
+ * createCanvas(200, 200, WEBGL);
+ * noStroke();
+ * 
+ * imgShader = createShader(`
+ * precision mediump float;
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * varying vec2 vTexCoord;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ * 
+ * void main() {
+ * vTexCoord = aTexCoord;
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
+ * }
+ * `, `
+ * precision mediump float;
+ * varying vec2 vTexCoord;
+ * uniform sampler2D uTexture;
+ * uniform vec2 uMousePos;
+ * 
+ * void main() {
+ * vec4 texColor = texture2D(uTexture, vTexCoord);
+ * // Adjust the color based on mouse position
+ * float r = uMousePos.x * texColor.r;
+ * float g = uMousePos.y * texColor.g;
+ * gl_FragColor = vec4(r, g, texColor.b, texColor.a);
+ * }
+ * `);
+ * 
+ * describe(
+ * 'An image on a gray background where the colors change based on the mouse position.'
+ * );
+ * }
+ * 
+ * function draw() {
+ * background(220);
+ * 
+ * imageShader(imgShader);
+ * 
+ * // Map the mouse position to a range between 0 and 1
+ * let mousePosX = map(mouseX, 0, width, 0, 1);
+ * let mousePosY = map(mouseY, 0, height, 0, 1);
+ * 
+ * // Pass the mouse position to the shader as a uniform
+ * imgShader.setUniform('uMousePos', [mousePosX, mousePosY]);
+ * 
+ * // Bind the image texture to the shader
+ * imgShader.setUniform('uTexture', img);
+ * 
+ * image(img, -width / 2, -height / 2, width, height);
+ * }
+ * 
+ * </code>
+ * </div>
+ * @example <div modernizr='webgl'>
+ * <code>
+ * let img;
+ * let imgShader;
+ * 
+ * async function setup() {
+ * img = await loadImage('assets/outdoor_image.jpg');
+ * 
+ * createCanvas(200, 200, WEBGL);
+ * noStroke();
+ * 
+ * imgShader = createShader(`
+ * precision mediump float;
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * varying vec2 vTexCoord;
+ * uniform mat4 uModelViewMatrix;
+ * uniform mat4 uProjectionMatrix;
+ * 
+ * void main() {
+ * vTexCoord = aTexCoord;
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
+ * }
+ * `, `
+ * precision mediump float;
+ * varying vec2 vTexCoord;
+ * uniform sampler2D uTexture;
+ * uniform vec2 uMousePos;
+ * 
+ * void main() {
+ * // Distance from the current pixel to the mouse
+ * float distFromMouse = distance(vTexCoord, uMousePos);
+ * 
+ * // Adjust pixelation based on distance (closer = more detail, farther = blockier)
+ * float pixelSize = mix(0.002, 0.05, distFromMouse);
+ * vec2 pixelatedCoord = vec2(floor(vTexCoord.x / pixelSize) * pixelSize,
+ * floor(vTexCoord.y / pixelSize) * pixelSize);
+ * 
+ * vec4 texColor = texture2D(uTexture, pixelatedCoord);
+ * gl_FragColor = texColor;
+ * }
+ * `);
+ * 
+ * describe('A static image with a grid-like, pixelated effect created by the shader. Each cell in the grid alternates visibility, producing a dithered visual effect.');
+ * }
+ * 
+ * function draw() {
+ * background(220);
+ * imageShader(imgShader);
+ * 
+ * let mousePosX = map(mouseX, 0, width, 0, 1);
+ * let mousePosY = map(mouseY, 0, height, 0, 1);
+ * 
+ * imgShader.setUniform('uMousePos', [mousePosX, mousePosY]);
+ * imgShader.setUniform('uTexture', img);
+ * image(img, -width / 2, -height / 2, width, height);
+ * }
+ * </code>
+ * </div>
+ */
+function imageShader(s: p5.Shader): void;
+
+/**
+ * Get the default shader used with lights, materials,
+ * and textures.You can call `baseMaterialShader().modify()`
+ * and change any of the following hooks:`void beforeVertex`Called at the start of the vertex shader.`Vertex getObjectInputs`Update the vertex data of the model being drawn before any positioning has been applied. It takes in a `Vertex` struct, which includes:`Vertex getWorldInputs`Update the vertex data of the model being drawn after transformations such as `translate()` and `scale()` have been applied, but before the camera has been applied. It takes in a `Vertex` struct like, in the `getObjectInputs` hook above, that can be modified and returned.`Vertex getCameraInputs`Update the vertex data of the model being drawn as they appear relative to the camera. It takes in a `Vertex` struct like, in the `getObjectInputs` hook above, that can be modified and returned.`void afterVertex`Called at the end of the vertex shader.`void beforeFragment`Called at the start of the fragment shader.`Inputs getPixelInputs`Update the per-pixel inputs of the material. It takes in an `Inputs` struct, which includes:`vec4 combineColors`Take in a `ColorComponents` struct containing all the different components of light, and combining them into
+ * a single final color. The struct contains:`vec4 getFinalColor`Update the final color after mixing. It takes in a `vec4 color` and must return a modified version.`void afterFragment`Called at the end of the fragment shader.Most of the time, you will need to write your hooks in GLSL ES version 300. If you
+ * are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.Call `baseMaterialShader().inspectHooks()` to see all the possible hooks and
+ * their default implementations.
+ *
+ * @returns The material shader
+ * @example <div modernizr='webgl'>
+ * <code>
+ * let myShader;
+ * 
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * myShader = baseMaterialShader().modify(() => {
+ * let time = uniformFloat(() => millis());
+ * getWorldInputs((inputs) => {
+ * inputs.position.y +=
+ * 20 * sin(time * 0.001 + inputs.position.x * 0.05);
+ * return inputs;
+ * });
+ * });
+ * }
+ * 
+ * function draw() {
+ * background(255);
+ * shader(myShader);
+ * lights();
+ * noStroke();
+ * fill('red');
+ * sphere(50);
+ * }
+ * </code>
+ * </div>
+ * @example <div modernizr='webgl'>
+ * <code>
+ * let myShader;
+ * 
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * myShader = baseMaterialShader().modify({
+ * declarations: 'vec3 myNormal;',
+ * 'Inputs getPixelInputs': `(Inputs inputs) {
+ * myNormal = inputs.normal;
+ * return inputs;
+ * }`,
+ * 'vec4 getFinalColor': `(vec4 color) {
+ * return mix(
+ * vec4(1.0, 1.0, 1.0, 1.0),
+ * color,
+ * abs(dot(myNormal, vec3(0.0, 0.0, 1.0)))
+ * );
+ * }`
+ * });
+ * }
+ * 
+ * function draw() {
+ * background(255);
+ * rotateY(millis() * 0.001);
+ * shader(myShader);
+ * lights();
+ * noStroke();
+ * fill('red');
+ * torus(30);
+ * }
+ * </code>
+ * </div>
+ * @example <div modernizr='webgl'>
+ * <code>
+ * let myShader;
+ * let environment;
+ * 
+ * async function setup() {
+ * environment = await loadImage('assets/outdoor_spheremap.jpg');
+ * 
+ * createCanvas(200, 200, WEBGL);
+ * myShader = baseMaterialShader().modify(() => {
+ * getPixelInputs((inputs) => {
+ * let factor = sin(
+ * TWO_PI * (inputs.texCoord.x + inputs.texCoord.y)
+ * );
+ * inputs.shininess = mix(1, 100, factor);
+ * inputs.metalness = factor;
+ * return inputs;
+ * })
+ * });
+ * }
+ * 
+ * function draw() {
+ * panorama(environment);
+ * ambientLight(100);
+ * imageLight(environment);
+ * rotateY(millis() * 0.001);
+ * shader(myShader);
+ * noStroke();
+ * fill(255);
+ * specularMaterial(150);
+ * sphere(50);
+ * }
+ * </code>
+ * </div>
+ * @example <div modernizr='webgl'>
+ * <code>
+ * let myShader;
+ * 
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * myShader = baseMaterialShader().modify(() => {
+ * getPixelInputs((inputs) => {
+ * inputs.normal.x += 0.2 * sin(
+ * sin(TWO_PI * dot(inputs.texCoord.yx, vec2(10, 25)))
+ * );
+ * inputs.normal.y += 0.2 * sin(
+ * sin(TWO_PI * dot(inputs.texCoord, vec2(10, 25)))
+ * );
+ * inputs.normal = normalize(inputs.normal);
+ * return inputs;
+ * });
+ * });
+ * }
+ * 
+ * function draw() {
+ * background(255);
+ * shader(myShader);
+ * ambientLight(150);
+ * pointLight(
+ * 255, 255, 255,
+ * 100*cos(frameCount*0.04), -50, 100*sin(frameCount*0.04)
+ * );
+ * noStroke();
+ * fill('red');
+ * shininess(200);
+ * specularMaterial(255);
+ * sphere(50);
+ * }
+ * </code>
+ * </div>
+ */
+function baseMaterialShader(): p5.Shader;
+
+/**
+ * Get the base shader for filters.You can then call `baseFilterShader().modify()`
+ * and change the following hook:`vec4 getColor`Output the final color for the current pixel. It takes in two parameters:
+ * `FilterInputs inputs`, and `in sampler2D canvasContent`, and must return a color
+ * as a `vec4`.`FilterInputs inputs` is a scruct with the following properties:`in sampler2D canvasContent` is a texture with the contents of the sketch, pre-filter. Call
+ * `getTexture(canvasContent, someCoordinate)` to retrieve the color of the sketch at that coordinate,
+ * with coordinate values between 0 and 1.Most of the time, you will need to write your hooks in GLSL ES version 300. If you
+ * are using WebGL 1, write your hooks in GLSL ES 100 instead.
+ *
+ * @returns The filter shader
+ * @example <div modernizr='webgl'>
+ * <code>
+ * let img;
+ * let myShader;
+ * 
+ * async function setup() {
+ * img = await loadImage('assets/bricks.jpg');
+ * createCanvas(100, 100, WEBGL);
+ * myShader = baseFilterShader().modify(() => {
+ * let time = uniformFloat(() => millis());
+ * getColor((inputs, canvasContent) => {
+ * inputs.texCoord.y +=
+ * 0.02 * sin(time * 0.001 + inputs.texCoord.x * 5);
+ * return texture(canvasContent, inputs.texCoord);
+ * });
+ * });
+ * }
+ * 
+ * function draw() {
+ * image(img, -50, -50);
+ * filter(myShader);
+ * describe('an image of bricks, distorting over time');
+ * }
+ * </code>
+ * </div>
+ */
+function baseFilterShader(): p5.Shader;
+
+/**
+ * Get the shader used by `normalMaterial()`.You can call `baseNormalShader().modify()`
+ * and change any of the following hooks:`void beforeVertex`Called at the start of the vertex shader.`Vertex getObjectInputs`Update the vertex data of the model being drawn before any positioning has been applied. It takes in a `Vertex` struct, which includes:`Vertex getWorldInputs`Update the vertex data of the model being drawn after transformations such as `translate()` and `scale()` have been applied, but before the camera has been applied. It takes in a `Vertex` struct like, in the `getObjectInputs` hook above, that can be modified and returned.`Vertex getCameraInputs`Update the vertex data of the model being drawn as they appear relative to the camera. It takes in a `Vertex` struct like, in the `getObjectInputs` hook above, that can be modified and returned.`void afterVertex`Called at the end of the vertex shader.`void beforeFragment`Called at the start of the fragment shader.`vec4 getFinalColor`Update the final color after mixing. It takes in a `vec4 color` and must return a modified version.`void afterFragment`Called at the end of the fragment shader.Most of the time, you will need to write your hooks in GLSL ES version 300. If you
+ * are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.Call `baseNormalShader().inspectHooks()` to see all the possible hooks and
+ * their default implementations.
+ *
+ * @returns The `normalMaterial` shader
+ * @example <div modernizr='webgl'>
+ * <code>
+ * let myShader;
+ * 
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * myShader = baseNormalShader().modify({
+ * uniforms: {
+ * 'float time': () => millis()
+ * },
+ * 'Vertex getWorldInputs': `(Vertex inputs) {
+ * inputs.position.y +=
+ * 20. * sin(time * 0.001 + inputs.position.x * 0.05);
+ * return inputs;
+ * }`
+ * });
+ * }
+ * 
+ * function draw() {
+ * background(255);
+ * shader(myShader);
+ * noStroke();
+ * sphere(50);
+ * }
+ * </code>
+ * </div>
+ * @example <div modernizr='webgl'>
+ * <code>
+ * let myShader;
+ * 
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * myShader = baseNormalShader().modify({
+ * 'Vertex getCameraInputs': `(Vertex inputs) {
+ * inputs.normal = abs(inputs.normal);
+ * return inputs;
+ * }`,
+ * 'vec4 getFinalColor': `(vec4 color) {
+ * // Map the r, g, and b values of the old normal to new colors
+ * // instead of just red, green, and blue:
+ * vec3 newColor =
+ * color.r * vec3(89.0, 240.0, 232.0) / 255.0 +
+ * color.g * vec3(240.0, 237.0, 89.0) / 255.0 +
+ * color.b * vec3(205.0, 55.0, 222.0) / 255.0;
+ * newColor = newColor / (color.r + color.g + color.b);
+ * return vec4(newColor, 1.0) * color.a;
+ * }`
+ * });
+ * }
+ * 
+ * function draw() {
+ * background(255);
+ * shader(myShader);
+ * noStroke();
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.015);
+ * box(100);
+ * }
+ * </code>
+ * </div>
+ */
+function baseNormalShader(): p5.Shader;
+
+/**
+ * Get the shader used when no lights or materials are applied.You can call `baseColorShader().modify()`
+ * and change any of the following hooks:`void beforeVertex`Called at the start of the vertex shader.`Vertex getObjectInputs`Update the vertex data of the model being drawn before any positioning has been applied. It takes in a `Vertex` struct, which includes:`Vertex getWorldInputs`Update the vertex data of the model being drawn after transformations such as `translate()` and `scale()` have been applied, but before the camera has been applied. It takes in a `Vertex` struct like, in the `getObjectInputs` hook above, that can be modified and returned.`Vertex getCameraInputs`Update the vertex data of the model being drawn as they appear relative to the camera. It takes in a `Vertex` struct like, in the `getObjectInputs` hook above, that can be modified and returned.`void afterVertex`Called at the end of the vertex shader.`void beforeFragment`Called at the start of the fragment shader.`vec4 getFinalColor`Update the final color after mixing. It takes in a `vec4 color` and must return a modified version.`void afterFragment`Called at the end of the fragment shader.Most of the time, you will need to write your hooks in GLSL ES version 300. If you
+ * are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.Call `baseColorShader().inspectHooks()` to see all the possible hooks and
+ * their default implementations.
+ *
+ * @returns The color shader
+ * @example <div modernizr='webgl'>
+ * <code>
+ * let myShader;
+ * 
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * myShader = baseColorShader().modify({
+ * uniforms: {
+ * 'float time': () => millis()
+ * },
+ * 'Vertex getWorldInputs': `(Vertex inputs) {
+ * inputs.position.y +=
+ * 20. * sin(time * 0.001 + inputs.position.x * 0.05);
+ * return inputs;
+ * }`
+ * });
+ * }
+ * 
+ * function draw() {
+ * background(255);
+ * shader(myShader);
+ * noStroke();
+ * fill('red');
+ * circle(0, 0, 50);
+ * }
+ * </code>
+ * </div>
+ */
+function baseColorShader(): p5.Shader;
+
+/**
+ * Get the shader used when drawing the strokes of shapes.You can call `baseStrokeShader().modify()`
+ * and change any of the following hooks:`void beforeVertex`Called at the start of the vertex shader.`StrokeVertex getObjectInputs`Update the vertex data of the stroke being drawn before any positioning has been applied. It takes in a `StrokeVertex` struct, which includes:`StrokeVertex getWorldInputs`Update the vertex data of the model being drawn after transformations such as `translate()` and `scale()` have been applied, but before the camera has been applied. It takes in a `StrokeVertex` struct like, in the `getObjectInputs` hook above, that can be modified and returned.`StrokeVertex getCameraInputs`Update the vertex data of the model being drawn as they appear relative to the camera. It takes in a `StrokeVertex` struct like, in the `getObjectInputs` hook above, that can be modified and returned.`void afterVertex`Called at the end of the vertex shader.`void beforeFragment`Called at the start of the fragment shader.`Inputs getPixelInputs`Update the inputs to the shader. It takes in a struct `Inputs inputs`, which includes:`bool shouldDiscard`Caps and joins are made by discarded pixels in the fragment shader to carve away unwanted areas. Use this to change this logic. It takes in a `bool willDiscard` and must return a modified version.`vec4 getFinalColor`Update the final color after mixing. It takes in a `vec4 color` and must return a modified version.`void afterFragment`Called at the end of the fragment shader.Most of the time, you will need to write your hooks in GLSL ES version 300. If you
+ * are using WebGL 1 instead of 2, write your hooks in GLSL ES 100 instead.Call `baseStrokeShader().inspectHooks()` to see all the possible hooks and
+ * their default implementations.
+ *
+ * @returns The stroke shader
+ * @example <div modernizr='webgl'>
+ * <code>
+ * let myShader;
+ * 
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * myShader = baseStrokeShader().modify({
+ * 'Inputs getPixelInputs': `(Inputs inputs) {
+ * float opacity = 1.0 - smoothstep(
+ * 0.0,
+ * 15.0,
+ * length(inputs.position - inputs.center)
+ * );
+ * inputs.color *= opacity;
+ * return inputs;
+ * }`
+ * });
+ * }
+ * 
+ * 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
+ * );
+ * }
+ * </code>
+ * </div>
+ * @example <div modernizr='webgl'>
+ * <code>
+ * let myShader;
+ * 
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * myShader = baseStrokeShader().modify({
+ * uniforms: {
+ * 'float time': () => millis()
+ * },
+ * 'StrokeVertex getWorldInputs': `(StrokeVertex inputs) {
+ * // Add a somewhat random offset to the weight
+ * // that varies based on position and time
+ * float scale = 0.8 + 0.2*sin(10.0 * sin(
+ * floor(time/250.) +
+ * inputs.position.x*0.01 +
+ * inputs.position.y*0.01
+ * ));
+ * inputs.weight *= scale;
+ * return inputs;
+ * }`
+ * });
+ * }
+ * 
+ * function draw() {
+ * background(255);
+ * strokeShader(myShader);
+ * myShader.setUniform('time', millis());
+ * strokeWeight(10);
+ * beginShape();
+ * for (let i = 0; i <= 50; i++) {
+ * let r = map(i, 0, 50, 0, width/3);
+ * let x = r*cos(i*0.2);
+ * let y = r*sin(i*0.2);
+ * vertex(x, y);
+ * }
+ * endShape();
+ * }
+ * </code>
+ * </div>
+ * @example <div modernizr='webgl'>
+ * <code>
+ * let myShader;
+ * 
+ * function setup() {
+ * createCanvas(200, 200, WEBGL);
+ * myShader = baseStrokeShader().modify({
+ * 'float random': `(vec2 p) {
+ * vec3 p3  = fract(vec3(p.xyx) * .1031);
+ * p3 += dot(p3, p3.yzx + 33.33);
+ * return fract((p3.x + p3.y) * p3.z);
+ * }`,
+ * 'Inputs getPixelInputs': `(Inputs inputs) {
+ * // Replace alpha in the color with dithering by
+ * // randomly setting pixel colors to 0 based on opacity
+ * float a = inputs.color.a;
+ * inputs.color.a = 1.0;
+ * inputs.color *= random(inputs.position.xy) > a ? 0.0 : 1.0;
+ * return inputs;
+ * }`
+ * });
+ * }
+ * 
+ * function draw() {
+ * background(255);
+ * strokeShader(myShader);
+ * strokeWeight(10);
+ * beginShape();
+ * for (let i = 0; i <= 50; i++) {
+ * stroke(
+ * 0,
+ * 255
+ * * map(i, 0, 20, 0, 1, true)
+ * * map(i, 30, 50, 1, 0, true)
+ * );
+ * vertex(
+ * map(i, 0, 50, -1, 1) * width/3,
+ * 50 * sin(i/10 + frameCount/100)
+ * );
+ * }
+ * endShape();
+ * }
+ * </code>
+ * </div>
+ */
+function baseStrokeShader(): p5.Shader;
+
+/**
+ * Restores the default shaders.`resetShader()` deactivates any shaders previously applied by
+ * shader(), strokeShader(),
+ * or imageShader().Note: Shaders can only be used in WebGL mode.
+ *
+ * @example <div>
+ * <code>
+ * // Create a string with the vertex shader program.
+ * // The vertex shader is called for each vertex.
+ * let vertSrc = `
+ * attribute vec3 aPosition;
+ * attribute vec2 aTexCoord;
+ * uniform mat4 uProjectionMatrix;
+ * uniform mat4 uModelViewMatrix;
+ * varying vec2 vTexCoord;
+ * 
+ * void main() {
+ * vTexCoord = aTexCoord;
+ * vec4 position = vec4(aPosition, 1.0);
+ * gl_Position = uProjectionMatrix * uModelViewMatrix * position;
+ * }
+ * `;
+ * 
+ * // Create a string with the fragment shader program.
+ * // The fragment shader is called for each pixel.
+ * let fragSrc = `
+ * precision mediump float;
+ * varying vec2 vTexCoord;
+ * 
+ * void main() {
+ * vec2 uv = vTexCoord;
+ * vec3 color = vec3(uv.x, uv.y, min(uv.x + uv.y, 1.0));
+ * gl_FragColor = vec4(color, 1.0);
+ * }
+ * `;
+ * 
+ * let myShader;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * // Create a p5.Shader object.
+ * myShader = createShader(vertSrc, fragSrc);
+ * 
+ * describe(
+ * 'Two rotating cubes on a gray background. The left one has a blue-purple gradient on each face. The right one is red.'
+ * );
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Draw a box using the p5.Shader.
+ * // shader() sets the active shader to myShader.
+ * shader(myShader);
+ * push();
+ * translate(-25, 0, 0);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(width / 4);
+ * pop();
+ * 
+ * // Draw a box using the default fill shader.
+ * // resetShader() restores the default fill shader.
+ * resetShader();
+ * fill(255, 0, 0);
+ * push();
+ * translate(25, 0, 0);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * box(width / 4);
+ * pop();
+ * }
+ * </code>
+ * </div>
+ */
+function resetShader(): void;
+
+/**
+ * Sets the texture that will be used on shapes.A texture is like a skin that wraps around a shape. `texture()` works with
+ * built-in shapes, such as square() and
+ * sphere(), and custom shapes created with
+ * functions such as buildGeometry(). To
+ * texture a geometry created with beginShape(),
+ * uv coordinates must be passed to each
+ * vertex() call.The parameter, `tex`, is the texture to apply. `texture()` can use a range
+ * of sources including images, videos, and offscreen renderers such as
+ * p5.Graphics and
+ * p5.Framebuffer objects.To texture a geometry created with beginShape(),
+ * you will need to specify uv coordinates in vertex().Note: `texture()` can only be used in WebGL mode.
+ *
+ * @param media to use as the texture.
+ * @example <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * // Load an image and create a p5.Image object.
+ * img = await loadImage('assets/laDefense.jpg');
+ * 
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A spinning cube with an image of a ceiling on each face.');
+ * }
+ * 
+ * function draw() {
+ * background(0);
+ * 
+ * // Rotate around the x-, y-, and z-axes.
+ * rotateZ(frameCount * 0.01);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * 
+ * // Apply the image as a texture.
+ * texture(img);
+ * 
+ * // Draw the box.
+ * box(50);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let pg;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * // Create a p5.Graphics object.
+ * pg = createGraphics(100, 100);
+ * 
+ * // Draw a circle to the p5.Graphics object.
+ * pg.background(200);
+ * pg.circle(50, 50, 30);
+ * 
+ * describe('A spinning cube with circle at the center of each face.');
+ * }
+ * 
+ * function draw() {
+ * background(0);
+ * 
+ * // Rotate around the x-, y-, and z-axes.
+ * rotateZ(frameCount * 0.01);
+ * rotateX(frameCount * 0.01);
+ * rotateY(frameCount * 0.01);
+ * 
+ * // Apply the p5.Graphics object as a texture.
+ * texture(pg);
+ * 
+ * // Draw the box.
+ * box(50);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let vid;
+ * 
+ * function setup() {
+ * // Load a video and create a p5.MediaElement object.
+ * vid = createVideo('assets/fingers.mov');
+ * 
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * // Hide the video.
+ * vid.hide();
+ * 
+ * // Set the video to loop.
+ * vid.loop();
+ * 
+ * describe('A rectangle with video as texture');
+ * }
+ * 
+ * function draw() {
+ * background(0);
+ * 
+ * // Rotate around the y-axis.
+ * rotateY(frameCount * 0.01);
+ * 
+ * // Apply the video as a texture.
+ * texture(vid);
+ * 
+ * // Draw the rectangle.
+ * rect(-40, -40, 80, 80);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let vid;
+ * 
+ * function setup() {
+ * // Load a video and create a p5.MediaElement object.
+ * vid = createVideo('assets/fingers.mov');
+ * 
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * // Hide the video.
+ * vid.hide();
+ * 
+ * // Set the video to loop.
+ * vid.loop();
+ * 
+ * describe('A rectangle with video as texture');
+ * }
+ * 
+ * function draw() {
+ * background(0);
+ * 
+ * // Rotate around the y-axis.
+ * rotateY(frameCount * 0.01);
+ * 
+ * // Set the texture mode.
+ * textureMode(NORMAL);
+ * 
+ * // Apply the video as a texture.
+ * texture(vid);
+ * 
+ * // Draw a custom shape using uv coordinates.
+ * beginShape();
+ * vertex(-40, -40, 0, 0);
+ * vertex(40, -40, 1, 0);
+ * vertex(40, 40, 1, 1);
+ * vertex(-40, 40, 0, 1);
+ * endShape();
+ * }
+ * </code>
+ * </div>
+ */
+function texture(tex: p5.Image | p5.MediaElement | p5.Graphics | p5.Texture | p5.Framebuffer | p5.FramebufferTexture): void;
+
+/**
+ * Changes the coordinate system used for textures when they’re applied to
+ * custom shapes.In order for texture() to work, a shape needs a
+ * way to map the points on its surface to the pixels in an image. Built-in
+ * shapes such as rect() and
+ * box() already have these texture mappings based on
+ * their vertices. Custom shapes created with
+ * vertex() require texture mappings to be passed as
+ * uv coordinates.Each call to vertex() must include 5 arguments,
+ * as in `vertex(x, y, z, u, v)`, to map the vertex at coordinates `(x, y, z)`
+ * to the pixel at coordinates `(u, v)` within an image. For example, the
+ * corners of a rectangular image are mapped to the corners of a rectangle by default:// Draw the rectangle.
+ * rect(0, 0, 30, 50);If the image in the code snippet above has dimensions of 300 x 500 pixels,
+ * the same result could be achieved as follows:// Draw the rectangle.
+ * beginShape();// Top-left.
+ * // u: 0, v: 0
+ * vertex(0, 0, 0, 0, 0);// Top-right.
+ * // u: 300, v: 0
+ * vertex(30, 0, 0, 300, 0);// Bottom-right.
+ * // u: 300, v: 500
+ * vertex(30, 50, 0, 300, 500);// Bottom-left.
+ * // u: 0, v: 500
+ * vertex(0, 50, 0, 0, 500);endShape();`textureMode()` changes the coordinate system for uv coordinates.The parameter, `mode`, accepts two possible constants. If `NORMAL` is
+ * passed, as in `textureMode(NORMAL)`, then the texture’s uv coordinates can
+ * be provided in the range 0 to 1 instead of the image’s dimensions. This can
+ * be helpful for using the same code for multiple images of different sizes.
+ * For example, the code snippet above could be rewritten as follows:// Apply the image as a texture.
+ * texture(img);// Draw the rectangle.
+ * beginShape();// Top-left.
+ * // u: 0, v: 0
+ * vertex(0, 0, 0, 0, 0);// Top-right.
+ * // u: 1, v: 0
+ * vertex(30, 0, 0, 1, 0);// Bottom-right.
+ * // u: 1, v: 1
+ * vertex(30, 50, 0, 1, 1);// Bottom-left.
+ * // u: 0, v: 1
+ * vertex(0, 50, 0, 0, 1);endShape();By default, `mode` is `IMAGE`, which scales uv coordinates to the
+ * dimensions of the image. Calling `textureMode(IMAGE)` applies the default.Note: `textureMode()` can only be used in WebGL mode.
+ *
+ * @param either IMAGE or NORMAL.
+ * @example <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * // Load an image and create a p5.Image object.
+ * img = await loadImage('assets/laDefense.jpg');
+ * 
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('An image of a ceiling against a black background.');
+ * }
+ * 
+ * function draw() {
+ * background(0);
+ * 
+ * // Apply the image as a texture.
+ * texture(img);
+ * 
+ * // Draw the custom shape.
+ * // Use the image's width and height as uv coordinates.
+ * beginShape();
+ * vertex(-30, -30, 0, 0);
+ * vertex(30, -30, img.width, 0);
+ * vertex(30, 30, img.width, img.height);
+ * vertex(-30, 30, 0, img.height);
+ * endShape();
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * // Load an image and create a p5.Image object.
+ * img = await loadImage('assets/laDefense.jpg');
+ * 
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('An image of a ceiling against a black background.');
+ * }
+ * 
+ * function draw() {
+ * background(0);
+ * 
+ * // Set the texture mode.
+ * textureMode(NORMAL);
+ * 
+ * // Apply the image as a texture.
+ * texture(img);
+ * 
+ * // Draw the custom shape.
+ * // Use normalized uv coordinates.
+ * beginShape();
+ * vertex(-30, -30, 0, 0);
+ * vertex(30, -30, 1, 0);
+ * vertex(30, 30, 1, 1);
+ * vertex(-30, 30, 0, 1);
+ * endShape();
+ * }
+ * </code>
+ * </div>
+ */
+function textureMode(mode: IMAGE | NORMAL): void;
+
+/**
+ * Changes the way textures behave when a shape’s uv coordinates go beyond the
+ * texture.In order for texture() to work, a shape needs a
+ * way to map the points on its surface to the pixels in an image. Built-in
+ * shapes such as rect() and
+ * box() already have these texture mappings based on
+ * their vertices. Custom shapes created with
+ * vertex() require texture mappings to be passed as
+ * uv coordinates.Each call to vertex() must include 5 arguments,
+ * as in `vertex(x, y, z, u, v)`, to map the vertex at coordinates `(x, y, z)`
+ * to the pixel at coordinates `(u, v)` within an image. For example, the
+ * corners of a rectangular image are mapped to the corners of a rectangle by default:`// Apply the image as a texture.
+ * texture(img);
+ * 
+ * // Draw the rectangle.
+ * rect(0, 0, 30, 50);`If the image in the code snippet above has dimensions of 300 x 500 pixels,
+ * the same result could be achieved as follows:`// Apply the image as a texture.
+ * texture(img);
+ * 
+ * // Draw the rectangle.
+ * beginShape();
+ * 
+ * // Top-left.
+ * // u: 0, v: 0
+ * vertex(0, 0, 0, 0, 0);
+ * 
+ * // Top-right.
+ * // u: 300, v: 0
+ * vertex(30, 0, 0, 300, 0);
+ * 
+ * // Bottom-right.
+ * // u: 300, v: 500
+ * vertex(30, 50, 0, 300, 500);
+ * 
+ * // Bottom-left.
+ * // u: 0, v: 500
+ * vertex(0, 50, 0, 0, 500);
+ * 
+ * endShape();``textureWrap()` controls how textures behave when their uv's go beyond the
+ * texture. Doing so can produce interesting visual effects such as tiling.
+ * For example, the custom shape above could have u-coordinates are greater
+ * than the image’s width:`// Apply the image as a texture.
+ * texture(img);
+ * 
+ * // Draw the rectangle.
+ * beginShape();
+ * vertex(0, 0, 0, 0, 0);
+ * 
+ * // Top-right.
+ * // u: 600
+ * vertex(30, 0, 0, 600, 0);
+ * 
+ * // Bottom-right.
+ * // u: 600
+ * vertex(30, 50, 0, 600, 500);
+ * 
+ * vertex(0, 50, 0, 0, 500);
+ * endShape();`The u-coordinates of 600 are greater than the texture image’s width of 300.
+ * This creates interesting possibilities.The first parameter, `wrapX`, accepts three possible constants. If `CLAMP`
+ * is passed, as in `textureWrap(CLAMP)`, the pixels at the edge of the
+ * texture will extend to the shape’s edges. If `REPEAT` is passed, as in
+ * `textureWrap(REPEAT)`, the texture will tile repeatedly until reaching the
+ * shape’s edges. If `MIRROR` is passed, as in `textureWrap(MIRROR)`, the
+ * texture will tile repeatedly until reaching the shape’s edges, flipping
+ * its orientation between tiles. By default, textures `CLAMP`.The second parameter, `wrapY`, is optional. It accepts the same three
+ * constants, `CLAMP`, `REPEAT`, and `MIRROR`. If one of these constants is
+ * passed, as in `textureWRAP(MIRROR, REPEAT)`, then the texture will `MIRROR`
+ * horizontally and `REPEAT` vertically. By default, `wrapY` will be set to
+ * the same value as `wrapX`.Note: `textureWrap()` can only be used in WebGL mode.
+ *
+ * @param either CLAMP, REPEAT, or MIRROR
+ * @param either CLAMP, REPEAT, or MIRROR
+ * @example <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * img = await loadImage('assets/rockies128.jpg');
+ * 
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe(
+ * 'An image of a landscape occupies the top-left corner of a square. Its edge colors smear to cover the other thre quarters of the square.'
+ * );
+ * }
+ * 
+ * function draw() {
+ * background(0);
+ * 
+ * // Set the texture mode.
+ * textureMode(NORMAL);
+ * 
+ * // Set the texture wrapping.
+ * // Note: CLAMP is the default mode.
+ * textureWrap(CLAMP);
+ * 
+ * // Apply the image as a texture.
+ * texture(img);
+ * 
+ * // Style the shape.
+ * noStroke();
+ * 
+ * // Draw the shape.
+ * // Use uv coordinates > 1.
+ * beginShape();
+ * vertex(-30, -30, 0, 0, 0);
+ * vertex(30, -30, 0, 2, 0);
+ * vertex(30, 30, 0, 2, 2);
+ * vertex(-30, 30, 0, 0, 2);
+ * endShape();
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * img = await loadImage('assets/rockies128.jpg');
+ * 
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('Four identical images of a landscape arranged in a grid.');
+ * }
+ * 
+ * function draw() {
+ * background(0);
+ * 
+ * // Set the texture mode.
+ * textureMode(NORMAL);
+ * 
+ * // Set the texture wrapping.
+ * textureWrap(REPEAT);
+ * 
+ * // Apply the image as a texture.
+ * texture(img);
+ * 
+ * // Style the shape.
+ * noStroke();
+ * 
+ * // Draw the shape.
+ * // Use uv coordinates > 1.
+ * beginShape();
+ * vertex(-30, -30, 0, 0, 0);
+ * vertex(30, -30, 0, 2, 0);
+ * vertex(30, 30, 0, 2, 2);
+ * vertex(-30, 30, 0, 0, 2);
+ * endShape();
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * img = await loadImage('assets/rockies128.jpg');
+ * 
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe(
+ * 'Four identical images of a landscape arranged in a grid. The images are reflected horizontally and vertically, creating a kaleidoscope effect.'
+ * );
+ * }
+ * 
+ * function draw() {
+ * background(0);
+ * 
+ * // Set the texture mode.
+ * textureMode(NORMAL);
+ * 
+ * // Set the texture wrapping.
+ * textureWrap(MIRROR);
+ * 
+ * // Apply the image as a texture.
+ * texture(img);
+ * 
+ * // Style the shape.
+ * noStroke();
+ * 
+ * // Draw the shape.
+ * // Use uv coordinates > 1.
+ * beginShape();
+ * vertex(-30, -30, 0, 0, 0);
+ * vertex(30, -30, 0, 2, 0);
+ * vertex(30, 30, 0, 2, 2);
+ * vertex(-30, 30, 0, 0, 2);
+ * endShape();
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let img;
+ * 
+ * async function setup() {
+ * img = await loadImage('assets/rockies128.jpg');
+ * 
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe(
+ * 'Four identical images of a landscape arranged in a grid. The top row and bottom row are reflections of each other.'
+ * );
+ * }
+ * 
+ * function draw() {
+ * background(0);
+ * 
+ * // Set the texture mode.
+ * textureMode(NORMAL);
+ * 
+ * // Set the texture wrapping.
+ * textureWrap(REPEAT, MIRROR);
+ * 
+ * // Apply the image as a texture.
+ * texture(img);
+ * 
+ * // Style the shape.
+ * noStroke();
+ * 
+ * // Draw the shape.
+ * // Use uv coordinates > 1.
+ * beginShape();
+ * vertex(-30, -30, 0, 0, 0);
+ * vertex(30, -30, 0, 2, 0);
+ * vertex(30, 30, 0, 2, 2);
+ * vertex(-30, 30, 0, 0, 2);
+ * endShape();
+ * }
+ * </code>
+ * </div>
+ */
+function textureWrap(wrapX: CLAMP | REPEAT | MIRROR, wrapY: CLAMP | REPEAT | MIRROR): void;
+
+/**
+ * Sets the current material as a normal material.A normal material sets surfaces facing the x-axis to red, those facing the
+ * y-axis to green, and those facing the z-axis to blue. Normal material isn't
+ * affected by light. It’s often used as a placeholder material when debugging.Note: `normalMaterial()` can only be used in WebGL mode.
+ *
+ * @example <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A multicolor torus drawn on a gray background.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Style the torus.
+ * normalMaterial();
+ * 
+ * // Draw the torus.
+ * torus(30);
+ * }
+ * </code>
+ * </div>
+ */
+function normalMaterial(): void;
+
+/**
+ * Sets the ambient color of shapes’ surface material.The `ambientMaterial()` color sets the components of the
+ * ambientLight() color that shapes will
+ * reflect. For example, calling `ambientMaterial(255, 255, 0)` would cause a
+ * shape to reflect red and green light, but not blue light.`ambientMaterial()` can be called three ways with different parameters to
+ * set the material’s color.The first way to call `ambientMaterial()` has one parameter, `gray`.
+ * Grayscale values between 0 and 255, as in `ambientMaterial(50)`, can be
+ * passed to set the material’s color. Higher grayscale values make shapes
+ * appear brighter.The second way to call `ambientMaterial()` has one parameter, `color`. A
+ * p5.Color object, an array of color values, or a
+ * CSS color string, as in `ambientMaterial('magenta')`, can be passed to set
+ * the material’s color.The third way to call `ambientMaterial()` has three parameters, `v1`, `v2`,
+ * and `v3`. RGB, HSB, or HSL values, as in `ambientMaterial(255, 0, 0)`, can
+ * be passed to set the material’s colors. Color values will be interpreted
+ * using the current colorMode().Note: `ambientMaterial()` can only be used in WebGL mode.
+ *
+ * @param red or hue value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param green or saturation value in the
+ * current <a href="#/p5/colorMode">colorMode()</a>.
+ * @param blue, brightness, or lightness value in the
+ * current <a href="#/p5/colorMode">colorMode()</a>.
+ * @example <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A magenta cube drawn on a gray background.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on a magenta ambient light.
+ * ambientLight(255, 0, 255);
+ * 
+ * // Draw the box.
+ * box();
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A purple cube drawn on a gray background.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on a magenta ambient light.
+ * ambientLight(255, 0, 255);
+ * 
+ * // Add a dark gray ambient material.
+ * ambientMaterial(150);
+ * 
+ * // Draw the box.
+ * box();
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A red cube drawn on a gray background.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on a magenta ambient light.
+ * ambientLight(255, 0, 255);
+ * 
+ * // Add a yellow ambient material using RGB values.
+ * ambientMaterial(255, 255, 0);
+ * 
+ * // Draw the box.
+ * box();
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A red cube drawn on a gray background.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on a magenta ambient light.
+ * ambientLight(255, 0, 255);
+ * 
+ * // Add a yellow ambient material using a p5.Color object.
+ * let c = color(255, 255, 0);
+ * ambientMaterial(c);
+ * 
+ * // Draw the box.
+ * box();
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A red cube drawn on a gray background.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on a magenta ambient light.
+ * ambientLight(255, 0, 255);
+ * 
+ * // Add a yellow ambient material using a color string.
+ * ambientMaterial('yellow');
+ * 
+ * // Draw the box.
+ * box();
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A yellow cube drawn on a gray background.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on a white ambient light.
+ * ambientLight(255, 255, 255);
+ * 
+ * // Add a yellow ambient material using a color string.
+ * ambientMaterial('yellow');
+ * 
+ * // Draw the box.
+ * box();
+ * }
+ * </code>
+ * </div>
+ */
+function ambientMaterial(v1: number, v2: number, v3: number): void;
+
+/**
+ * @param grayscale value between 0 (black) and 255 (white).
+ */
+function ambientMaterial(gray: number): void;
+
+/**
+ * @param color as a <a href="#/p5.Color">p5.Color</a> object,
+ * an array of color values, or a CSS string.
+ */
+function ambientMaterial(color: p5.Color | number[] | string): void;
+
+/**
+ * Sets the emissive color of shapes’ surface material.The `emissiveMaterial()` color sets a color shapes display at full
+ * strength, regardless of lighting. This can give the appearance that a shape
+ * is glowing. However, emissive materials don’t actually emit light that
+ * can affect surrounding objects.`emissiveMaterial()` can be called three ways with different parameters to
+ * set the material’s color.The first way to call `emissiveMaterial()` has one parameter, `gray`.
+ * Grayscale values between 0 and 255, as in `emissiveMaterial(50)`, can be
+ * passed to set the material’s color. Higher grayscale values make shapes
+ * appear brighter.The second way to call `emissiveMaterial()` has one parameter, `color`. A
+ * p5.Color object, an array of color values, or a
+ * CSS color string, as in `emissiveMaterial('magenta')`, can be passed to set
+ * the material’s color.The third way to call `emissiveMaterial()` has four parameters, `v1`, `v2`,
+ * `v3`, and `alpha`. `alpha` is optional. RGBA, HSBA, or HSLA values can be
+ * passed to set the material’s colors, as in `emissiveMaterial(255, 0, 0)` or
+ * `emissiveMaterial(255, 0, 0, 30)`. Color values will be interpreted using
+ * the current colorMode().Note: `emissiveMaterial()` can only be used in WebGL mode.
+ *
+ * @param red or hue value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param green or saturation value in the
+ * current <a href="#/p5/colorMode">colorMode()</a>.
+ * @param blue, brightness, or lightness value in the
+ * current <a href="#/p5/colorMode">colorMode()</a>.
+ * @param alpha value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @example <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A red cube drawn on a gray background.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on a white ambient light.
+ * ambientLight(255, 255, 255);
+ * 
+ * // Add a red emissive material using RGB values.
+ * emissiveMaterial(255, 0, 0);
+ * 
+ * // Draw the box.
+ * box();
+ * }
+ * </code>
+ * </div>
+ */
+function emissiveMaterial(v1: number, v2: number, v3: number, alpha?: number): void;
+
+/**
+ * @param grayscale value between 0 (black) and 255 (white).
+ */
+function emissiveMaterial(gray: number): void;
+
+/**
+ * @param color as a <a href="#/p5.Color">p5.Color</a> object,
+ * an array of color values, or a CSS string.
+ */
+function emissiveMaterial(color: p5.Color | number[] | string): void;
+
+/**
+ * Sets the specular color of shapes’ surface material.The `specularMaterial()` color sets the components of light color that
+ * glossy coats on shapes will reflect. For example, calling
+ * `specularMaterial(255, 255, 0)` would cause a shape to reflect red and
+ * green light, but not blue light.Unlike ambientMaterial(),
+ * `specularMaterial()` will reflect the full color of light sources including
+ * directionalLight(),
+ * pointLight(),
+ * and spotLight(). This is what gives it shapes
+ * their "shiny" appearance. The material’s shininess can be controlled by the
+ * shininess() function.`specularMaterial()` can be called three ways with different parameters to
+ * set the material’s color.The first way to call `specularMaterial()` has one parameter, `gray`.
+ * Grayscale values between 0 and 255, as in `specularMaterial(50)`, can be
+ * passed to set the material’s color. Higher grayscale values make shapes
+ * appear brighter.The second way to call `specularMaterial()` has one parameter, `color`. A
+ * p5.Color> object, an array of color values, or a CSS
+ * color string, as in `specularMaterial('magenta')`, can be passed to set the
+ * material’s color.The third way to call `specularMaterial()` has four parameters, `v1`, `v2`,
+ * `v3`, and `alpha`. `alpha` is optional. RGBA, HSBA, or HSLA values can be
+ * passed to set the material’s colors, as in `specularMaterial(255, 0, 0)` or
+ * `specularMaterial(255, 0, 0, 30)`. Color values will be interpreted using
+ * the current colorMode().
+ *
+ * @param grayscale value between 0 (black) and 255 (white).
+ * @param alpha value in the current current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @example <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click the canvas to apply a specular material.
+ * 
+ * let isGlossy = false;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A red torus drawn on a gray background. It becomes glossy when the user double-clicks.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on a white point light at the top-right.
+ * pointLight(255, 255, 255, 30, -40, 30);
+ * 
+ * // Add a glossy coat if the user has double-clicked.
+ * if (isGlossy === true) {
+ * specularMaterial(255);
+ * shininess(50);
+ * }
+ * 
+ * // Style the torus.
+ * noStroke();
+ * fill(255, 0, 0);
+ * 
+ * // Draw the torus.
+ * torus(30);
+ * }
+ * 
+ * // Make the torus glossy when the user double-clicks.
+ * function doubleClicked() {
+ * isGlossy = true;
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click the canvas to apply a specular material.
+ * 
+ * let isGlossy = false;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe(
+ * 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
+ * );
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on a white point light at the top-right.
+ * pointLight(255, 255, 255, 30, -40, 30);
+ * 
+ * // Add a glossy green coat if the user has double-clicked.
+ * if (isGlossy === true) {
+ * specularMaterial(0, 255, 0);
+ * shininess(50);
+ * }
+ * 
+ * // Style the torus.
+ * noStroke();
+ * fill(255, 0, 0);
+ * 
+ * // Draw the torus.
+ * torus(30);
+ * }
+ * 
+ * // Make the torus glossy when the user double-clicks.
+ * function doubleClicked() {
+ * isGlossy = true;
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click the canvas to apply a specular material.
+ * 
+ * let isGlossy = false;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe(
+ * 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
+ * );
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on a white point light at the top-right.
+ * pointLight(255, 255, 255, 30, -40, 30);
+ * 
+ * // Add a glossy green coat if the user has double-clicked.
+ * if (isGlossy === true) {
+ * // Create a p5.Color object.
+ * let c = color('green');
+ * specularMaterial(c);
+ * shininess(50);
+ * }
+ * 
+ * // Style the torus.
+ * noStroke();
+ * fill(255, 0, 0);
+ * 
+ * // Draw the torus.
+ * torus(30);
+ * }
+ * 
+ * // Make the torus glossy when the user double-clicks.
+ * function doubleClicked() {
+ * isGlossy = true;
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click the canvas to apply a specular material.
+ * 
+ * let isGlossy = false;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe(
+ * 'A red torus drawn on a gray background. It becomes glossy and reflects green light when the user double-clicks.'
+ * );
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on a white point light at the top-right.
+ * pointLight(255, 255, 255, 30, -40, 30);
+ * 
+ * // Add a glossy green coat if the user has double-clicked.
+ * if (isGlossy === true) {
+ * specularMaterial('#00FF00');
+ * shininess(50);
+ * }
+ * 
+ * // Style the torus.
+ * noStroke();
+ * fill(255, 0, 0);
+ * 
+ * // Draw the torus.
+ * torus(30);
+ * }
+ * 
+ * // Make the torus glossy when the user double-clicks.
+ * function doubleClicked() {
+ * isGlossy = true;
+ * }
+ * </code>
+ * </div>
+ */
+function specularMaterial(gray: number, alpha?: number): void;
+
+/**
+ * @param red or hue value in
+ * the current <a href="#/p5/colorMode">colorMode()</a>.
+ * @param green or saturation value
+ * in the current <a href="#/p5/colorMode">colorMode()</a>.
+ * @param blue, brightness, or lightness value
+ * in the current <a href="#/p5/colorMode">colorMode()</a>.
+ */
+function specularMaterial(v1: number, v2: number, v3: number, alpha?: number): void;
+
+/**
+ * @param color as a <a href="#/p5.Color">p5.Color</a> object,
+ * an array of color values, or a CSS string.
+ */
+function specularMaterial(color: p5.Color | number[] | string): void;
+
+/**
+ * Sets the amount of gloss ("shininess") of a
+ * specularMaterial().Shiny materials focus reflected light more than dull materials.
+ * `shininess()` affects the way materials reflect light sources including
+ * directionalLight(),
+ * pointLight(),
+ * and spotLight().The parameter, `shine`, is a number that sets the amount of shininess.
+ * `shine` must be greater than 1, which is its default value.
+ *
+ * @param amount of shine.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe(
+ * 'Two red spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is shinier than the left sphere.'
+ * );
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Turn on a red ambient light.
+ * ambientLight(255, 0, 0);
+ * 
+ * // Get the mouse's coordinates.
+ * let mx = mouseX - 50;
+ * let my = mouseY - 50;
+ * 
+ * // Turn on a white point light that follows the mouse.
+ * pointLight(255, 255, 255, mx, my, 50);
+ * 
+ * // Style the sphere.
+ * noStroke();
+ * 
+ * // Add a specular material with a grayscale value.
+ * specularMaterial(255);
+ * 
+ * // Draw the left sphere with low shininess.
+ * translate(-25, 0, 0);
+ * shininess(10);
+ * sphere(20);
+ * 
+ * // Draw the right sphere with high shininess.
+ * translate(50, 0, 0);
+ * shininess(100);
+ * sphere(20);
+ * }
+ * </code>
+ * </div>
+ */
+function shininess(shine: number): void;
+
+/**
+ * Sets the amount of "metalness" of a
+ * specularMaterial().`metalness()` can make materials appear more metallic. It affects the way
+ * materials reflect light sources including
+ * affects the way materials reflect light sources including
+ * directionalLight(),
+ * pointLight(),
+ * spotLight(), and
+ * imageLight().The parameter, `metallic`, is a number that sets the amount of metalness.
+ * `metallic` must be greater than 1, which is its default value. Higher
+ * values, such as `metalness(100)`, make specular materials appear more
+ * metallic.
+ *
+ * @param amount of metalness.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe(
+ * 'Two blue spheres drawn on a gray background. White light reflects from their surfaces as the mouse moves. The right sphere is more metallic than the left sphere.'
+ * );
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Turn on an ambient light.
+ * ambientLight(200);
+ * 
+ * // Get the mouse's coordinates.
+ * let mx = mouseX - 50;
+ * let my = mouseY - 50;
+ * 
+ * // Turn on a white point light that follows the mouse.
+ * pointLight(255, 255, 255, mx, my, 50);
+ * 
+ * // Style the spheres.
+ * noStroke();
+ * fill(30, 30, 255);
+ * specularMaterial(255);
+ * shininess(20);
+ * 
+ * // Draw the left sphere with low metalness.
+ * translate(-25, 0, 0);
+ * metalness(1);
+ * sphere(20);
+ * 
+ * // Draw the right sphere with high metalness.
+ * translate(50, 0, 0);
+ * metalness(50);
+ * sphere(20);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * let img;
+ * 
+ * async function setup() {
+ * img = await loadImage('assets/outdoor_spheremap.jpg');
+ * 
+ * createCanvas(100 ,100 ,WEBGL);
+ * 
+ * describe(
+ * 'Two spheres floating above a landscape. The surface of the spheres reflect the landscape. The right sphere is more reflective than the left sphere.'
+ * );
+ * }
+ * 
+ * function draw() {
+ * // Add the panorama.
+ * panorama(img);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Use the image as a light source.
+ * imageLight(img);
+ * 
+ * // Style the spheres.
+ * noStroke();
+ * specularMaterial(50);
+ * shininess(200);
+ * 
+ * // Draw the left sphere with low metalness.
+ * translate(-25, 0, 0);
+ * metalness(1);
+ * sphere(20);
+ * 
+ * // Draw the right sphere with high metalness.
+ * translate(50, 0, 0);
+ * metalness(50);
+ * sphere(20);
+ * }
+ * </code>
+ * </div>
+ */
+function metalness(metallic: number): void;
+
+}
+
+export default function material(p5: any, fn: any): void;