// This file is auto-generated from JSDoc documentation

import P5 from './p5';

declare global {
interface Window {

p5: P5;
VIDEO: typeof P5.VIDEO;

RGB: typeof P5.RGB;

/**
 * Version of this p5.js.
 */
VERSION: typeof P5.VERSION;

RGBP3: typeof P5.RGBP3;

AUDIO: typeof P5.AUDIO;

/**
 * The default, two-dimensional renderer in p5.js.
 * 
 * Use this when calling <a href="#/p5/createCanvas"> (for example,
 * `createCanvas(400, 400, P2D)`) to specify a 2D context.
 */
P2D: typeof P5.P2D;

/**
 * HSB (hue, saturation, brightness) is a type of color model.
 * You can learn more about it at
 * <a href="https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html">HSB</a>.
 */
HSB: typeof P5.HSB;

/**
 * The system variable deviceOrientation always contains the orientation of
 * the device. The value of this variable will either be set 'landscape'
 * or 'portrait'. If no data is available it will be set to 'undefined'.
 * either LANDSCAPE or PORTRAIT.
 */
deviceOrientation: typeof P5.deviceOrientation;

/**
 * The system variable accelerationX always contains the acceleration of the
 * device along the x axis. Value is represented as meters per second squared.
 */
accelerationX: typeof P5.accelerationX;

/**
 * A `Number` system variable that tracks the mouse's horizontal movement.
 * 
 * `movedX` tracks how many pixels the mouse moves left or right between
 * frames. `movedX` will have a negative value if the mouse moves left between
 * frames and a positive value if it moves right. `movedX` can be calculated
 * as `mouseX - pmouseX`.
 * 
 * Note: `movedX` continues updating even when
 * <a href="#/p5/requestPointerLock">requestPointerLock()</a> is active.
 */
movedX: typeof P5.movedX;

/**
 * The system variable accelerationY always contains the acceleration of the
 * device along the y axis. Value is represented as meters per second squared.
 */
accelerationY: typeof P5.accelerationY;

/**
 * The system variable accelerationZ always contains the acceleration of the
 * device along the z axis. Value is represented as meters per second squared.
 */
accelerationZ: typeof P5.accelerationZ;

/**
 * The system variable pAccelerationX always contains the acceleration of the
 * device along the x axis in the frame previous to the current frame. Value
 * is represented as meters per second squared.
 */
pAccelerationX: typeof P5.pAccelerationX;

/**
 * The system variable pAccelerationY always contains the acceleration of the
 * device along the y axis in the frame previous to the current frame. Value
 * is represented as meters per second squared.
 */
pAccelerationY: typeof P5.pAccelerationY;

/**
 * A `Number` system variable that tracks the mouse's vertical movement.
 * 
 * `movedY` tracks how many pixels the mouse moves up or down between
 * frames. `movedY` will have a negative value if the mouse moves up between
 * frames and a positive value if it moves down. `movedY` can be calculated
 * as `mouseY - pmouseY`.
 * 
 * Note: `movedY` continues updating even when
 * <a href="#/p5/requestPointerLock">requestPointerLock()</a> is active.
 */
movedY: typeof P5.movedY;

/**
 * A `Boolean` system variable that's `true` if any key is currently pressed
 * and `false` if not.
 */
keyIsPressed: typeof P5.keyIsPressed;

/**
 * The system variable pAccelerationZ always contains the acceleration of the
 * device along the z axis in the frame previous to the current frame. Value
 * is represented as meters per second squared.
 */
pAccelerationZ: typeof P5.pAccelerationZ;

/**
 * A `Number` variable that tracks the number of frames drawn since the sketch
 * started.
 * 
 * `frameCount`'s value is 0 inside <a href="#/p5/setup">setup()</a>. It
 * increments by 1 each time the code in <a href="#/p5/draw">draw()</a>
 * finishes executing.
 */
frameCount: typeof P5.frameCount;

/**
 * The system variable rotationX always contains the rotation of the
 * device along the x axis. If the sketch <a href="#/p5/angleMode">
 * angleMode()</a> is set to DEGREES, the value will be -180 to 180. If
 * it is set to RADIANS, the value will be -PI to PI.
 * 
 * Note: The order the rotations are called is important, ie. if used
 * together, it must be called in the order Z-X-Y or there might be
 * unexpected behaviour.
 */
rotationX: typeof P5.rotationX;

/**
 * A `Number` variable that tracks the number of milliseconds it took to draw
 * the last frame.
 * 
 * `deltaTime` contains the amount of time it took
 * <a href="#/p5/draw">draw()</a> to execute during the previous frame. It's
 * useful for simulating physics.
 */
deltaTime: typeof P5.deltaTime;

/**
 * The system variable rotationY always contains the rotation of the
 * device along the y axis. If the sketch <a href="#/p5/angleMode">
 * angleMode()</a> is set to DEGREES, the value will be -90 to 90. If
 * it is set to RADIANS, the value will be -PI/2 to PI/2.
 * 
 * Note: The order the rotations are called is important, ie. if used
 * together, it must be called in the order Z-X-Y or there might be
 * unexpected behaviour.
 */
rotationY: typeof P5.rotationY;

/**
 * A `String` system variable that contains the value of the last key typed.
 * 
 * The key variable is helpful for checking whether an
 * <a href="https://en.wikipedia.org/wiki/ASCII#Printable_characters" target="_blank">ASCII</a>
 * key has been typed. For example, the expression `key === "a"` evaluates to
 * `true` if the `a` key was typed and `false` if not. `key` doesn’t update
 * for special keys such as `LEFT_ARROW` and `ENTER`. Use keyCode instead for
 * special keys. The <a href="#/p5/keyIsDown">keyIsDown()</a> function should
 * be used to check for multiple different key presses at the same time.
 */
key: typeof P5.key;

/**
 * A `Boolean` variable that's `true` if the browser is focused and `false` if
 * not.
 * 
 * Note: The browser window can only receive input if it's focused.
 */
focused: typeof P5.focused;

/**
 * A `Number` system variable that tracks the mouse's horizontal position.
 * 
 * `mouseX` keeps track of the mouse's position relative to the
 * top-left corner of the canvas. For example, if the mouse is 50 pixels from
 * the left edge of the canvas, then `mouseX` will be 50.
 * 
 * If touch is used instead of the mouse, then `mouseX` will hold the
 * x-coordinate of the most recent touch point.
 */
mouseX: typeof P5.mouseX;

/**
 * The system variable rotationZ always contains the rotation of the
 * device along the z axis. If the sketch <a href="#/p5/angleMode">
 * angleMode()</a> is set to DEGREES, the value will be 0 to 360. If
 * it is set to RADIANS, the value will be 0 to 2*PI.
 * 
 * Unlike rotationX and rotationY, this variable is available for devices
 * with a built-in compass only.
 * 
 * Note: The order the rotations are called is important, ie. if used
 * together, it must be called in the order Z-X-Y or there might be
 * unexpected behaviour.
 */
rotationZ: typeof P5.rotationZ;

/**
 * The system variable pRotationX always contains the rotation of the
 * device along the x axis in the frame previous to the current frame.
 * If the sketch <a href="#/p5/angleMode"> angleMode()</a> is set to DEGREES,
 * the value will be -180 to 180. If it is set to RADIANS, the value will
 * be -PI to PI.
 * 
 * pRotationX can also be used with rotationX to determine the rotate
 * direction of the device along the X-axis.
 */
pRotationX: typeof P5.pRotationX;

/**
 * The system variable pRotationY always contains the rotation of the
 * device along the y axis in the frame previous to the current frame.
 * If the sketch <a href="#/p5/angleMode"> angleMode()</a> is set to DEGREES,
 * the value will be -90 to 90. If it is set to RADIANS, the value will
 * be -PI/2 to PI/2.
 * 
 * pRotationY can also be used with rotationY to determine the rotate
 * direction of the device along the Y-axis.
 */
pRotationY: typeof P5.pRotationY;

/**
 * A `Number` system variable that tracks the mouse's vertical position.
 * 
 * `mouseY` keeps track of the mouse's position relative to the
 * top-left corner of the canvas. For example, if the mouse is 50 pixels from
 * the top edge of the canvas, then `mouseY` will be 50.
 * 
 * If touch is used instead of the mouse, then `mouseY` will hold the
 * y-coordinate of the most recent touch point.
 */
mouseY: typeof P5.mouseY;

/**
 * The system variable pRotationZ always contains the rotation of the
 * device along the z axis in the frame previous to the current frame.
 * If the sketch <a href="#/p5/angleMode"> angleMode()</a> is set to DEGREES,
 * the value will be 0 to 360. If it is set to RADIANS, the value will
 * be 0 to 2*PI.
 * 
 * pRotationZ can also be used with rotationZ to determine the rotate
 * direction of the device along the Z-axis.
 */
pRotationZ: typeof P5.pRotationZ;

/**
 * A `Number` system variable that tracks the mouse's previous horizontal
 * position.
 * 
 * `pmouseX` keeps track of the mouse's position relative to the
 * top-left corner of the canvas. Its value is
 * <a href="#/p5/mouseX">mouseX</a> from the previous frame. For example, if
 * the mouse was 50 pixels from the left edge of the canvas during the last
 * frame, then `pmouseX` will be 50.
 * 
 * If touch is used instead of the mouse, then `pmouseX` will hold the
 * x-coordinate of the last touch point.
 * 
 * Note: `pmouseX` is reset to the current <a href="#/p5/mouseX">mouseX</a>
 * value at the start of each touch event.
 */
pmouseX: typeof P5.pmouseX;

/**
 * The `code` property represents a physical key on the keyboard (as opposed
 * to the character generated by pressing the key). In other words, this
 * property returns a value that isn't altered by keyboard layout or the state
 * of the modifier keys.
 * 
 * This property is useful when you want to handle keys based on their
 * physical positions on the input device rather than the characters associated
 * with those keys;
 * 
 * Unlike <a href="#/p5/key">key</a>, the `code` property differentiates between
 * physical keys that generate the same character—for example, `CtrlLeft` and
 * `CtrlRight`—so each can be handled independently.
 * Here's the MDN docs for <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code" target="_blank">KeyboardEvent.code</a>
 * 
 * Pressing the key physically labeled “A” always yields `KeyA`, regardless
 * of the current keyboard layout (QWERTY, Dvorak, AZERTY, etc.) or the character
 * that appears in a text field.
 * 
 * The code property returns a plain string (e.g., 'ArrowRight'). You can
 * compare it directly with string literals:
 * 
 * `if (keyIsDown(RIGHT_ARROW)) {
 * // …
 * }
 * // The line above is equivalent to:
 * if (code === 'ArrowRight') {
 * // …
 * }
 * if (key  === 'ArrowRight') {
 * // …
 * }`The system variables `BACKSPACE`, `DELETE`, `ENTER`, `RETURN`, `TAB`,
 * `ESCAPE`, `SHIFT`, `CONTROL`, `OPTION`, `ALT`, `UP_ARROW`, `DOWN_ARROW`,
 * `LEFT_ARROW`, and `RIGHT_ARROW` are all helpful shorthands the key codes of
 * special keys.
 * These are simply shorthands for the same string values:
 * 
 * `if (code === RIGHT_ARROW) {
 * // ..
 * }`<p>The table below summarizes how the main keyboard-related system variables changed between p5.js 1.x and 2.x.</p>
 * <table>
 * <thead>
 * <tr>
 * <th>Variable</th>
 * <th>p5.js 1.x </th>
 * <th>p5.js 2.x </th>
 * </tr>
 * </thead>
 * <tbody>
 * <tr>
 * <td><code>key</code></td>
 * <td>Text string (e.g., <code>"ArrowUp"</code>).</td>
 * <td>Text string (e.g., <code>"ArrowUp"</code>, <code>"f"</code> or <code>"F"</code>).</td>
 * </tr>
 * <tr>
 * <td><code>code</code></td>
 * <td><em>Not supported.</em></td>
 * <td>Text String (e.g., <code>"ArrowUp"</code>, <code>"KeyF"</code>).</td>
 * </tr>
 * <tr>
 * <td><code>keyCode</code></td>
 * <td>Number (e.g., <code>70</code>).</td>
 * <td>Number (unchanged; e.g., <code>70</code>).</td>
 * </tr>
 * <tr>
 * <td>System variables (<code>BACKSPACE</code>, <code>UP_ARROW</code>, …)</td>
 * <td>Number</td>
 * <td>Text String (e.g., <code>"ArrowUp"</code>).</td>
 * </tr>
 * </tbody>
 * </table>
 */
code: typeof P5.code;

/**
 * When a device is rotated, the axis that triggers the <a href="#/p5/deviceTurned">deviceTurned()</a>
 * method is stored in the turnAxis variable. The turnAxis variable is only defined within
 * the scope of deviceTurned().
 */
turnAxis: typeof P5.turnAxis;

/**
 * A `Number` system variable that tracks the mouse's previous vertical
 * position.
 * 
 * `pmouseY` keeps track of the mouse's position relative to the
 * top-left corner of the canvas. Its value is
 * <a href="#/p5/mouseY">mouseY</a> from the previous frame. For example, if
 * the mouse was 50 pixels from the top edge of the canvas during the last
 * frame, then `pmouseY` will be 50.
 * 
 * If touch is used instead of the mouse, then `pmouseY` will hold the
 * y-coordinate of the last touch point.
 * 
 * Note: `pmouseY` is reset to the current <a href="#/p5/mouseY">mouseY</a>
 * value at the start of each touch event.
 */
pmouseY: typeof P5.pmouseY;

/**
 * A `Number` variable that tracks the mouse's horizontal position within the
 * browser.
 * 
 * `winMouseX` keeps track of the mouse's position relative to the top-left
 * corner of the browser window. For example, if the mouse is 50 pixels from
 * the left edge of the browser, then `winMouseX` will be 50.
 * 
 * On a touchscreen device, `winMouseX` will hold the x-coordinate of the most
 * recent touch point.
 * 
 * Note: Use <a href="#/p5/mouseX">mouseX</a> to track the mouse’s
 * x-coordinate within the canvas.
 */
winMouseX: typeof P5.winMouseX;

/**
 * A `Number` system variable that contains the code of the last key pressed.
 * 
 * Every key has a numeric key code. For example, the letter `a` key has the key code 65.
 * Use this key code to determine which key was pressed by comparing it to the numeric value
 * of the desired key.
 * 
 * For example, to detect when the Enter key is pressed:
 * 
 * `if (keyCode === 13) { // Enter key
 * // Code to run if the Enter key was pressed.
 * }`Alternatively, you can use the <a href="#/p5/key">key</a> function to directly compare the key value:
 * 
 * `if (key === 'Enter') { // Enter key
 * // Code to run if the Enter key was pressed.
 * }`Use the following numeric codes for the arrow keys:
 * 
 * Up Arrow: 38
 * Down Arrow: 40
 * Left Arrow: 37
 * Right Arrow: 39
 * 
 * More key codes can be found at websites such as
 * <a href="http://keycode.info/">keycode.info</a>.
 */
keyCode: typeof P5.keyCode;

/**
 * A `Number` variable that tracks the mouse's vertical position within the
 * browser.
 * 
 * `winMouseY` keeps track of the mouse's position relative to the top-left
 * corner of the browser window. For example, if the mouse is 50 pixels from
 * the top edge of the browser, then `winMouseY` will be 50.
 * 
 * On a touchscreen device, `winMouseY` will hold the y-coordinate of the most
 * recent touch point.
 * 
 * Note: Use <a href="#/p5/mouseY">mouseY</a> to track the mouse’s
 * y-coordinate within the canvas.
 */
winMouseY: typeof P5.winMouseY;

/**
 * A `String` variable with the WebGL version in use.
 * 
 * `webglVersion`'s value equals one of the following string constants:
 * 
 * - `WEBGL2` whose value is `'webgl2'`,
 * 
 * - `WEBGL` whose value is `'webgl'`, or
 * 
 * - `P2D` whose value is `'p2d'`. This is the default for 2D sketches.
 * 
 * - `P2DP3` whose value is `'p2d-p3'` (used for P3 2D sketches, if available).
 * 
 * See <a href="#/p5/setAttributes">setAttributes()</a> for ways to set the
 * WebGL version.
 */
webglVersion: typeof P5.webglVersion;

/**
 * A `Number` variable that tracks the mouse's previous horizontal position
 * within the browser.
 * 
 * `pwinMouseX` keeps track of the mouse's position relative to the top-left
 * corner of the browser window. Its value is
 * <a href="#/p5/winMouseX">winMouseX</a> from the previous frame. For
 * example, if the mouse was 50 pixels from
 * the left edge of the browser during the last frame, then `pwinMouseX` will
 * be 50.
 * 
 * On a touchscreen device, `pwinMouseX` will hold the x-coordinate of the most
 * recent touch point. `pwinMouseX` is reset to the current
 * <a href="#/p5/winMouseX">winMouseX</a> value at the start of each touch
 * event.
 * 
 * Note: Use <a href="#/p5/pmouseX">pmouseX</a> to track the mouse’s previous
 * x-coordinate within the canvas.
 */
pwinMouseX: typeof P5.pwinMouseX;

/**
 * A `Number` variable that stores the width of the screen display.
 * 
 * `displayWidth` is useful for running full-screen programs. Its value
 * depends on the current <a href="#/p5/pixelDensity">pixelDensity()</a>.
 * 
 * Note: The actual screen width can be computed as
 * `displayWidth * pixelDensity()`.
 */
displayWidth: typeof P5.displayWidth;

/**
 * A `Number` variable that stores the height of the screen display.
 * 
 * `displayHeight` is useful for running full-screen programs. Its value
 * depends on the current <a href="#/p5/pixelDensity">pixelDensity()</a>.
 * 
 * Note: The actual screen height can be computed as
 * `displayHeight * pixelDensity()`.
 */
displayHeight: typeof P5.displayHeight;

/**
 * A `Number` variable that tracks the mouse's previous vertical position
 * within the browser.
 * 
 * `pwinMouseY` keeps track of the mouse's position relative to the top-left
 * corner of the browser window. Its value is
 * <a href="#/p5/winMouseY">winMouseY</a> from the previous frame. For
 * example, if the mouse was 50 pixels from
 * the top edge of the browser during the last frame, then `pwinMouseY` will
 * be 50.
 * 
 * On a touchscreen device, `pwinMouseY` will hold the y-coordinate of the most
 * recent touch point. `pwinMouseY` is reset to the current
 * <a href="#/p5/winMouseY">winMouseY</a> value at the start of each touch
 * event.
 * 
 * Note: Use <a href="#/p5/pmouseY">pmouseY</a> to track the mouse’s previous
 * y-coordinate within the canvas.
 */
pwinMouseY: typeof P5.pwinMouseY;

/**
 * A `Number` variable that stores the width of the browser's viewport.
 * 
 * The <a href="https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport" target="_blank">layout viewport</a>
 * is the area within the browser that's available for drawing.
 */
windowWidth: typeof P5.windowWidth;

/**
 * A `Number` variable that stores the height of the browser's viewport.
 * 
 * The <a href="https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport" target="_blank">layout viewport</a>
 * is the area within the browser that's available for drawing.
 */
windowHeight: typeof P5.windowHeight;

/**
 * An object that tracks the current state of mouse buttons, showing which
 * buttons are pressed at any given moment.
 * 
 * The `mouseButton` object has three properties:
 * 
 * - `left`: A boolean indicating whether the left mouse button is pressed.
 * 
 * - `right`: A boolean indicating whether the right mouse button is pressed.
 * 
 * - `center`: A boolean indicating whether the middle mouse button (scroll wheel button) is pressed.
 * 
 * Note: Different browsers may track `mouseButton` differently. See
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons" target="_blank">MDN</a>
 * for more information.
 */
mouseButton: typeof P5.mouseButton;

/**
 * An `Array` of all the current touch points on a touchscreen device.
 * 
 * The `touches` array is empty by default. When the user touches their
 * screen, a new touch point is tracked and added to the array. Touch points
 * are `Objects` with the following properties:
 * 
 * `// Iterate over the touches array.
 * for (let touch of touches) {
 * // x-coordinate relative to the top-left
 * // corner of the canvas.
 * console.log(touch.x);
 * 
 * // y-coordinate relative to the top-left
 * // corner of the canvas.
 * console.log(touch.y);
 * 
 * // x-coordinate relative to the top-left
 * // corner of the browser.
 * console.log(touch.winX);
 * 
 * // y-coordinate relative to the top-left
 * // corner of the browser.
 * console.log(touch.winY);
 * 
 * // ID number
 * console.log(touch.id);
 * }`
 */
touches: typeof P5.touches;

/**
 * A `Boolean` system variable that's `true` if the mouse is pressed and
 * `false` if not.
 */
mouseIsPressed: typeof P5.mouseIsPressed;

HSL: typeof P5.HSL;

/**
 * An expanded color space (P3) variant of the default, two-dimensional renderer.
 * 
 * When available, this mode can allow for extended color ranges and more
 * dynamic color representation. Use it similarly to `P2D`:
 * `createCanvas(400, 400, P2DP3)`.
 */
P2DP3: typeof P5.P2DP3;

HWB: typeof P5.HWB;

/**
 * A `String` constant that's used to set the
 * <a href="#/p5/angleMode">angleMode()</a>.
 * 
 * By default, functions such as <a href="#/p5/rotate">rotate()</a> and
 * <a href="#/p5/sin">sin()</a> expect angles measured in units of radians.
 * Calling `angleMode(DEGREES)` ensures that angles are measured in units of
 * degrees.
 * 
 * Note: `TWO_PI` radians equals 360˚.
 */
DEGREES: typeof P5.DEGREES;

LAB: typeof P5.LAB;

LCH: typeof P5.LCH;

OKLAB: typeof P5.OKLAB;

/**
 * One of the two render modes in p5.js, used for computationally intensive tasks like 3D rendering and shaders.
 * 
 * `WEBGL` differs from the default <a href="/reference/p5/P2D">`P2D`</a> renderer in the following ways:
 * 
 * - Coordinate System - When drawing in `WEBGL` mode, the origin point (0,0,0) is located at the center of the screen, not the top-left corner. See <a href="https://p5js.org/tutorials/coordinates-and-transformations/">the tutorial page about coordinates and transformations</a>.
 * 
 * - 3D Shapes - `WEBGL` mode can be used to draw 3-dimensional shapes like <a href="#/p5/box">box()</a>, <a href="#/p5/sphere">sphere()</a>, <a href="#/p5/cone">cone()</a>, and <a href="https://p5js.org/reference/#3D%20Primitives">more</a>. See <a href="https://p5js.org/tutorials/custom-geometry/">the tutorial page about custom geometry</a> to make more complex objects.
 * 
 * - Shape Detail - When drawing in `WEBGL` mode, you can specify how smooth curves should be drawn by using a `detail` parameter. See <a href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#3d-primitives-shapes">the wiki section about shapes</a> for a more information and an example.
 * 
 * - Textures - A texture is like a skin that wraps onto a shape. See <a href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#textures">the wiki section about textures</a> for examples of mapping images onto surfaces with textures.
 * 
 * - Materials and Lighting - `WEBGL` offers different types of lights like <a href="#/p5/ambientLight">ambientLight()</a> to place around a scene. Materials like <a href="#/p5/specularMaterial">specularMaterial()</a> reflect the lighting to convey shape and depth. See <a href="https://p5js.org/tutorials/lights-camera-materials/">the tutorial page for styling and appearance</a> to experiment with different combinations.
 * 
 * - Camera - The viewport of a `WEBGL` sketch can be adjusted by changing camera attributes. See <a href="https://p5js.org/tutorials/lights-camera-materials#camera-and-view">the tutorial page section about cameras</a> for an explanation of camera controls.
 * 
 * - Text - `WEBGL` requires opentype/truetype font files to be preloaded using <a href="#/p5/loadFont">loadFont()</a>. See <a href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#text">the wiki section about text</a> for details, along with a workaround.
 * 
 * - Shaders - Shaders are hardware accelerated programs that can be used for a variety of effects and graphics. See the <a href="https://p5js.org/tutorials/intro-to-shaders/">introduction to shaders</a> to get started with shaders in p5.js.
 * 
 * - Graphics Acceleration - `WEBGL` mode uses the graphics card instead of the CPU, so it may help boost the performance of your sketch (example: drawing more shapes on the screen at once).
 * 
 * To learn more about WEBGL mode, check out <a href="https://p5js.org/tutorials/#webgl">all the interactive WEBGL tutorials</a> in the "Tutorials" section of this website, or read the wiki article <a href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5">"Getting started with WebGL in p5"</a>.
 */
WEBGL: typeof P5.WEBGL;

OKLCH: typeof P5.OKLCH;

RGBA: typeof P5.RGBA;

/**
 * One of the two possible values of a WebGL canvas (either WEBGL or WEBGL2),
 * which can be used to determine what capabilities the rendering environment
 * has.
 */
WEBGL2: typeof P5.WEBGL2;

/**
 * A constant used for creating a WebGPU rendering context
 */
WEBGPU: typeof P5.WEBGPU;

/**
 * A `String` constant that's used to set the
 * <a href="#/p5/angleMode">angleMode()</a>.
 * 
 * By default, functions such as <a href="#/p5/rotate">rotate()</a> and
 * <a href="#/p5/sin">sin()</a> expect angles measured in units of radians.
 * Calling `angleMode(RADIANS)` ensures that angles are measured in units of
 * radians. Doing so can be useful if the
 * <a href="#/p5/angleMode">angleMode()</a> has been set to
 * <a href="#/p5/DEGREES">DEGREES</a>.
 * 
 * Note: `TWO_PI` radians equals 360˚.
 */
RADIANS: typeof P5.RADIANS;

ARROW: typeof P5.ARROW;

SIMPLE: typeof P5.SIMPLE;

FULL: typeof P5.FULL;

CROSS: typeof P5.CROSS;

HAND: typeof P5.HAND;

MOVE: typeof P5.MOVE;

TEXT: typeof P5.TEXT;

WAIT: typeof P5.WAIT;

/**
 * A `Number` constant that's approximately 1.5708.
 * 
 * `HALF_PI` is half the value of the mathematical constant π. It's useful for
 * many tasks that involve rotation and oscillation. For example, calling
 * `rotate(HALF_PI)` rotates the coordinate system `HALF_PI` radians, which is
 * a quarter turn (90˚).
 * 
 * Note: `TWO_PI` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI`
 * radians equals 90˚, and `QUARTER_PI` radians equals 45˚.
 */
HALF_PI: typeof P5.HALF_PI;

/**
 * A shader hook block that modifies the world-space properties of each vertex in a shader. This hook can be used inside <a href="#/p5/buildColorShader">`buildColorShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to customize vertex positions, normals, texture coordinates, and colors before rendering. Modifications happen between the `.begin()` and `.end()` methods of the hook. "World space" refers to the coordinate system of the 3D scene, before any camera or projection transformations are applied.
 * 
 * `worldInputs` has the following properties:
 * 
 * - `position`: a three-component vector representing the original position of the vertex.
 * 
 * - `normal`: a three-component vector representing the direction the surface is facing.
 * 
 * - `texCoord`: a two-component vector representing the texture coordinates.
 * 
 * - `color`: a four-component vector representing the color of the vertex (red, green, blue, alpha).
 * 
 * This hook is available in:
 * 
 * - <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a>
 * 
 * - <a href="#/p5/buildNormalShader">`buildNormalShader()`</a>
 * 
 * - <a href="#/p5/buildColorShader">`buildColorShader()`</a>
 * 
 * - <a href="#/p5/buildStrokeShader">`buildStrokeShader()`</a>
 */
worldInputs: typeof P5.worldInputs;

/**
 * A shader hook block that modifies how color components are combined in the fragment shader. This hook can be used inside <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to control the final color output of a material. Modifications happen between the `.begin()` and `.end()` methods of the hook.
 * 
 * `combineColors` has the following properties:
 * 
 * - `baseColor`: a three-component vector representing the base color (red, green, blue).
 * 
 * - `diffuse`: a single number representing the diffuse reflection.
 * 
 * - `ambientColor`: a three-component vector representing the ambient color.
 * 
 * - `ambient`: a single number representing the ambient reflection.
 * 
 * - `specularColor`: a three-component vector representing the specular color.
 * 
 * - `specular`: a single number representing the specular reflection.
 * 
 * - `emissive`: a three-component vector representing the emissive color.
 * 
 * - `opacity`: a single number representing the opacity.
 * 
 * Call `.set()` on the hook with a vector with four components (red, green, blue, alpha) for the final color.
 * 
 * This hook is available in:
 * 
 * - <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a>
 */
combineColors: typeof P5.combineColors;

/**
 * Returns the index of the current instance when drawing multiple copies of a
 * shape with <a href="#/p5/model">`model(count)`</a>. The first instance has an
 * index of `0`, the second has `1`, and so on.
 * 
 * This lets each copy of a shape behave differently. For example, you can use
 * the index to place instances at different positions, give them different colors,
 * or animate them at different speeds.
 * 
 * `instanceIndex` can only be used inside a p5.strands shader callback.
 * 
 * (Note: `instanceID()` is also available as a function for compatibility.)
 * 
 * `let instancesShader;
 * let instance;
 * let count = 5;
 * 
 * function drawInstance() {
 * sphere(15);
 * }
 * 
 * function setup() {
 * createCanvas(200, 200, WEBGL);
 * instance = buildGeometry(drawInstance);
 * instancesShader = buildMaterialShader(drawSpaced);
 * describe('Five red spheres arranged in a horizontal line.');
 * }
 * 
 * function drawSpaced() {
 * worldInputs.begin();
 * // Spread spheres evenly across the canvas based on their index
 * let spacing = width / count;
 * worldInputs.position.x +=
 * (instanceIndex - (count - 1) / 2) * spacing;
 * worldInputs.end();
 * }
 * 
 * function draw() {
 * background(220);
 * lights();
 * noStroke();
 * fill('red');
 * shader(instancesShader);
 * model(instance, count);
 * }`If you are using WebGPU mode, a common pattern is to use `instanceIndex` to look up data made with
 * <a href="#/p5/createStorage">`createStorage()`</a>.
 * This lets you give each instance different properties.
 * 
 * `let instanceData;
 * let instancesShader;
 * let instance;
 * let count = 5;
 * 
 * async function setup() {
 * await createCanvas(200, 200, WEBGPU);
 * 
 * let data = [];
 * for (let i = 0; i < count; i++) {
 * data.push({
 * position: createVector(
 * random(-1, 1) * width / 2,
 * random(-1, 1) * height / 2,
 * 0,
 * ),
 * color: color(
 * random(255),
 * random(255),
 * random(255)
 * )
 * });
 * }
 * instanceData = createStorage(data);
 * instance = buildGeometry(drawInstance);
 * instancesShader = buildMaterialShader(drawInstances);
 * describe('Five spheres at random positions, each a different random color.');
 * }
 * 
 * function drawInstance() {
 * sphere(15);
 * }
 * 
 * function drawInstances() {
 * let data = uniformStorage(instanceData);
 * let itemColor = sharedVec4();
 * 
 * worldInputs.begin();
 * let item = data[instanceIndex];
 * itemColor = item.color;
 * worldInputs.position += item.position;
 * worldInputs.end();
 * 
 * finalColor.begin();
 * finalColor.set(itemColor);
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * lights();
 * noStroke();
 * shader(instancesShader);
 * model(instance, count);
 * }`This can be paired with <a href="#/p5/buildComputeShader">`buildComputeShader`</a>
 * to update the data being read.
 */
instanceIndex: typeof P5.instanceIndex;

/**
 * A shader hook block that modifies the properties of each pixel before the final color is calculated. This hook can be used inside <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to adjust per-pixel data before lighting is applied. Modifications happen between the `.begin()` and `.end()` methods of the hook.
 * 
 * The properties of `pixelInputs` depend on the shader:
 * 
 * - In <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a>:
 * 
 * - `normal`: a three-component vector representing the surface normal.
 * 
 * - `texCoord`: a two-component vector representing the texture coordinates (u, v).
 * 
 * - `ambientLight`: a three-component vector representing the ambient light color.
 * 
 * - `ambientMaterial`: a three-component vector representing the material's ambient color.
 * 
 * - `specularMaterial`: a three-component vector representing the material's specular color.
 * 
 * - `emissiveMaterial`: a three-component vector representing the material's emissive color.
 * 
 * - `color`: a four-component vector representing the base color (red, green, blue, alpha).
 * 
 * - `shininess`: a number controlling specular highlights.
 * 
 * - `metalness`: a number controlling the metalness factor.
 * 
 * - In <a href="#/p5/buildStrokeShader">`buildStrokeShader()`</a>:
 * 
 * - `color`: a four-component vector representing the stroke color (red, green, blue, alpha).
 * 
 * - `tangent`: a two-component vector representing the stroke tangent.
 * 
 * - `center`: a two-component vector representing the cap/join center.
 * 
 * - `position`: a two-component vector representing the current fragment position.
 * 
 * - `strokeWeight`: a number representing the stroke weight in pixels.
 * 
 * This hook is available in:
 * 
 * - <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a>
 * 
 * - <a href="#/p5/buildStrokeShader">`buildStrokeShader()`</a>
 */
pixelInputs: typeof P5.pixelInputs;

/**
 * A shader hook block that modifies the final color of each pixel after all lighting is applied. This hook can be used inside <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to adjust the color before it appears on the screen. Modifications happen between the `.begin()` and `.end()` methods of the hook.
 * 
 * `finalColor` has the following properties:
 * 
 * - `color`: a four-component vector representing the pixel color (red, green, blue, alpha).
 * 
 * - `texCoord`: a two-component vector representing the texture coordinates (u, v)
 * 
 * Call `.set()` on the hook with a vector with four components (red, green, blue, alpha) to update the final color.
 * 
 * This hook is available in:
 * 
 * - <a href="#/p5/buildColorShader">`buildColorShader()`</a>
 * 
 * - <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a>
 * 
 * - <a href="#/p5/buildNormalShader">`buildNormalShader()`</a>
 * 
 * - <a href="#/p5/buildStrokeShader">`buildStrokeShader()`</a>
 */
finalColor: typeof P5.finalColor;

/**
 * A shader hook block that sets the color for each pixel in a filter shader. This hook can be used inside <a href="#/p5/buildFilterShader">`buildFilterShader()`</a> to control the output color for each pixel.
 * 
 * `filterColor` has the following properties:
 * 
 * - `texCoord`: a two-component vector representing the texture coordinates (u, v).
 * 
 * - `canvasSize`: a two-component vector representing the canvas size in pixels (width, height).
 * 
 * - `texelSize`: a two-component vector representing the size of a single texel in texture space.
 * 
 * - `canvasContent`: a texture containing the sketch's contents before the filter is applied.
 * 
 * Call `.set()` on the hook with a vector with four components (red, green, blue, alpha) to update the final color.
 * 
 * This hook is available in:
 * 
 * - <a href="#/p5/buildFilterShader">`buildFilterShader()`</a>
 */
filterColor: typeof P5.filterColor;

/**
 * A shader hook block to modify the properties of each vertex before any transformations are applied. This hook can be used inside <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to customize vertex positions, normals, texture coordinates, and colors before rendering. Modifications happen between the `.begin()` and `.end()` methods of the hook. "Object space" refers to the coordinate system of the 3D scene before any transformations, cameras, or projection transformations are applied.
 * 
 * `objectInputs` has the following properties:
 * 
 * - `position`: a three-component vector representing the original position of the vertex.
 * 
 * - `normal`: a three-component vector representing the direction the surface is facing.
 * 
 * - `texCoord`: a two-component vector representing the texture coordinates.
 * 
 * - `color`: a four-component vector representing the color of the vertex (red, green, blue, alpha).
 * 
 * This hook is available in:
 * 
 * - <a href="#/p5/buildColorShader">`buildColorShader()`</a>
 * 
 * - <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a>
 * 
 * - <a href="#/p5/buildNormalShader">`buildNormalShader()`</a>
 * 
 * - <a href="#/p5/buildStrokeShader">`buildStrokeShader()`</a>
 */
objectInputs: typeof P5.objectInputs;

/**
 * A shader hook block that adjusts vertex properties from the perspective of the camera. This hook can be used inside <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to customize vertex positions, normals, texture coordinates, and colors before rendering. "Camera space" refers to the coordinate system of the 3D scene after transformations have been applied, seen relative to the camera.
 * 
 * `cameraInputs`  has the following properties:
 * 
 * - `position`: a three-component vector representing the position after camera transformation.
 * 
 * - `normal`: a three-component vector representing the normal after camera transformation.
 * 
 * - `texCoord`: a two-component vector representing the texture coordinates.
 * 
 * - `color`: a four-component vector representing the color of the vertex (red, green, blue, alpha).
 * 
 * This hook is available in:
 * 
 * - <a href="#/p5/buildColorShader">`buildColorShader()`</a>
 * 
 * - <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a>
 * 
 * - <a href="#/p5/buildNormalShader">`buildNormalShader()`</a>
 * 
 * - <a href="#/p5/buildStrokeShader">`buildStrokeShader()`</a>
 */
cameraInputs: typeof P5.cameraInputs;

/**
 * A `Number` constant that's approximately 3.1416.
 * 
 * `PI` is the mathematical constant π. It's useful for many tasks that
 * involve rotation and oscillation. For example, calling `rotate(PI)` rotates
 * the coordinate system `PI` radians, which is a half turn (180˚).
 * 
 * Note: `TWO_PI` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI`
 * radians equals 90˚, and `QUARTER_PI` radians equals 45˚.
 */
PI: typeof P5.PI;

/**
 * A `Number` constant that's approximately 0.7854.
 * 
 * `QUARTER_PI` is one-fourth the value of the mathematical constant π. It's
 * useful for many tasks that involve rotation and oscillation. For example,
 * calling `rotate(QUARTER_PI)` rotates the coordinate system `QUARTER_PI`
 * radians, which is an eighth of a turn (45˚).
 * 
 * Note: `TWO_PI` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI`
 * radians equals 90˚, and `QUARTER_PI` radians equals 45˚.
 */
QUARTER_PI: typeof P5.QUARTER_PI;

/**
 * A `Number` constant that's approximately 6.2382.
 * 
 * `TAU` is twice the value of the mathematical constant π. It's useful for
 * many tasks that involve rotation and oscillation. For example, calling
 * `rotate(TAU)` rotates the coordinate system `TAU` radians, which is one
 * full turn (360˚). `TAU` and `TWO_PI` are equal.
 * 
 * Note: `TAU` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI`
 * radians equals 90˚, and `QUARTER_PI` radians equals 45˚.
 */
TAU: typeof P5.TAU;

/**
 * A `Number` constant that's approximately 6.2382.
 * 
 * `TWO_PI` is twice the value of the mathematical constant π. It's useful for
 * many tasks that involve rotation and oscillation. For example, calling
 * `rotate(TWO_PI)` rotates the coordinate system `TWO_PI` radians, which is
 * one full turn (360˚). `TWO_PI` and `TAU` are equal.
 * 
 * Note: `TWO_PI` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI`
 * radians equals 90˚, and `QUARTER_PI` radians equals 45˚.
 */
TWO_PI: typeof P5.TWO_PI;

DEG_TO_RAD: typeof P5.DEG_TO_RAD;

RAD_TO_DEG: typeof P5.RAD_TO_DEG;

CORNER: typeof P5.CORNER;

CORNERS: typeof P5.CORNERS;

RADIUS: typeof P5.RADIUS;

RIGHT: typeof P5.RIGHT;

LEFT: typeof P5.LEFT;

CENTER: typeof P5.CENTER;

TOP: typeof P5.TOP;

BOTTOM: typeof P5.BOTTOM;

BASELINE: typeof P5.BASELINE;

POINTS: typeof P5.POINTS;

LINES: typeof P5.LINES;

/**
 * A system variable that provides direct access to the sketch's
 * `<canvas>` element.
 * 
 * The `<canvas>` element provides many specialized features that aren't
 * included in the p5.js library. The `drawingContext` system variable
 * provides access to these features by exposing the sketch's
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a>
 * object.
 */
drawingContext: typeof P5.drawingContext;

LINE_STRIP: typeof P5.LINE_STRIP;

LINE_LOOP: typeof P5.LINE_LOOP;

TRIANGLES: typeof P5.TRIANGLES;

TRIANGLE_FAN: typeof P5.TRIANGLE_FAN;

TRIANGLE_STRIP: typeof P5.TRIANGLE_STRIP;

/**
 * Turns off the parts of the Friendly Error System (FES) that impact performance.
 * 
 * The <a href="https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md" target="_blank">FES</a>
 * can cause sketches to draw slowly because it does extra work behind the
 * scenes. For example, the FES checks the arguments passed to functions,
 * which takes time to process. Disabling the FES can significantly improve
 * performance by turning off these checks.
 */
disableFriendlyErrors: typeof P5.disableFriendlyErrors;

QUADS: typeof P5.QUADS;

QUAD_STRIP: typeof P5.QUAD_STRIP;

TESS: typeof P5.TESS;

EMPTY_PATH: typeof P5.EMPTY_PATH;

PATH: typeof P5.PATH;

CLOSE: typeof P5.CLOSE;

OPEN: typeof P5.OPEN;

CHORD: typeof P5.CHORD;

PIE: typeof P5.PIE;

PROJECT: typeof P5.PROJECT;

SQUARE: typeof P5.SQUARE;

ROUND: typeof P5.ROUND;

BEVEL: typeof P5.BEVEL;

MITER: typeof P5.MITER;

/**
 * AUTO allows us to automatically set the width or height of an element (but not both),
 * based on the current height and width of the element. Only one parameter can
 * be passed to the <a href="/reference/p5.Element/size">size</a> function as AUTO, at a time.
 */
AUTO: typeof P5.AUTO;

ALT: typeof P5.ALT;

BACKSPACE: typeof P5.BACKSPACE;

CONTROL: typeof P5.CONTROL;

DELETE: typeof P5.DELETE;

DOWN_ARROW: typeof P5.DOWN_ARROW;

ENTER: typeof P5.ENTER;

ESCAPE: typeof P5.ESCAPE;

LEFT_ARROW: typeof P5.LEFT_ARROW;

OPTION: typeof P5.OPTION;

RETURN: typeof P5.RETURN;

RIGHT_ARROW: typeof P5.RIGHT_ARROW;

SHIFT: typeof P5.SHIFT;

TAB: typeof P5.TAB;

UP_ARROW: typeof P5.UP_ARROW;

BLEND: typeof P5.BLEND;

REMOVE: typeof P5.REMOVE;

ADD: typeof P5.ADD;

DARKEST: typeof P5.DARKEST;

LIGHTEST: typeof P5.LIGHTEST;

DIFFERENCE: typeof P5.DIFFERENCE;

SUBTRACT: typeof P5.SUBTRACT;

EXCLUSION: typeof P5.EXCLUSION;

/**
 * An array containing the color of each pixel on the canvas.
 * 
 * Colors are stored as numbers representing red, green, blue, and alpha
 * (RGBA) values. `pixels` is a one-dimensional array for performance reasons.
 * 
 * Each pixel occupies four elements in the `pixels` array, one for each RGBA
 * value. For example, the pixel at coordinates (0, 0) stores its RGBA values
 * at `pixels[0]`, `pixels[1]`, `pixels[2]`, and `pixels[3]`, respectively.
 * The next pixel at coordinates (1, 0) stores its RGBA values at `pixels[4]`,
 * `pixels[5]`, `pixels[6]`, and `pixels[7]`. And so on. The `pixels` array
 * for a 100×100 canvas has 100 × 100 × 4 = 40,000 elements.
 * 
 * Some displays use several smaller pixels to set the color at a single
 * point. The <a href="#/p5/pixelDensity">pixelDensity()</a> function returns
 * the pixel density of the canvas. High density displays often have a
 * <a href="#/p5/pixelDensity">pixelDensity()</a> of 2. On such a display, the
 * `pixels` array for a 100×100 canvas has 200 × 200 × 4 =
 * 160,000 elements.
 * 
 * Accessing the RGBA values for a point on the canvas requires a little math
 * as shown below. The <a href="#/p5/loadPixels">loadPixels()</a> function
 * must be called before accessing the `pixels` array. The
 * <a href="#/p5/updatePixels">updatePixels()</a> function must be called
 * after any changes are made.
 */
pixels: typeof P5.pixels;

MULTIPLY: typeof P5.MULTIPLY;

SCREEN: typeof P5.SCREEN;

REPLACE: typeof P5.REPLACE;

OVERLAY: typeof P5.OVERLAY;

HARD_LIGHT: typeof P5.HARD_LIGHT;

SOFT_LIGHT: typeof P5.SOFT_LIGHT;

DODGE: typeof P5.DODGE;

BURN: typeof P5.BURN;

THRESHOLD: typeof P5.THRESHOLD;

GRAY: typeof P5.GRAY;

OPAQUE: typeof P5.OPAQUE;

INVERT: typeof P5.INVERT;

POSTERIZE: typeof P5.POSTERIZE;

DILATE: typeof P5.DILATE;

ERODE: typeof P5.ERODE;

BLUR: typeof P5.BLUR;

NORMAL: typeof P5.NORMAL;

ITALIC: typeof P5.ITALIC;

BOLD: typeof P5.BOLD;

BOLDITALIC: typeof P5.BOLDITALIC;

CHAR: typeof P5.CHAR;

WORD: typeof P5.WORD;

LINEAR: typeof P5.LINEAR;

QUADRATIC: typeof P5.QUADRATIC;

BEZIER: typeof P5.BEZIER;

CURVE: typeof P5.CURVE;

STROKE: typeof P5.STROKE;

FILL: typeof P5.FILL;

TEXTURE: typeof P5.TEXTURE;

IMMEDIATE: typeof P5.IMMEDIATE;

IMAGE: typeof P5.IMAGE;

NEAREST: typeof P5.NEAREST;

REPEAT: typeof P5.REPEAT;

CLAMP: typeof P5.CLAMP;

MIRROR: typeof P5.MIRROR;

FLAT: typeof P5.FLAT;

SMOOTH: typeof P5.SMOOTH;

LANDSCAPE: typeof P5.LANDSCAPE;

PORTRAIT: typeof P5.PORTRAIT;

GRID: typeof P5.GRID;

AXES: typeof P5.AXES;

LABEL: typeof P5.LABEL;

FALLBACK: typeof P5.FALLBACK;

CONTAIN: typeof P5.CONTAIN;

COVER: typeof P5.COVER;

/**
 * A `Number` variable that stores the width of the canvas in pixels.
 * 
 * `width`'s default value is 100. Calling
 * <a href="#/p5/createCanvas">createCanvas()</a> or
 * <a href="#/p5/resizeCanvas">resizeCanvas()</a> changes the value of
 * `width`. Calling <a href="#/p5/noCanvas">noCanvas()</a> sets its value to
 * 0.
 */
width: typeof P5.width;

/**
 * A `Number` variable that stores the height of the canvas in pixels.
 * 
 * `height`'s default value is 100. Calling
 * <a href="#/p5/createCanvas">createCanvas()</a> or
 * <a href="#/p5/resizeCanvas">resizeCanvas()</a> changes the value of
 * `height`. Calling <a href="#/p5/noCanvas">noCanvas()</a> sets its value to
 * 0.
 */
height: typeof P5.height;

UNSIGNED_BYTE: typeof P5.UNSIGNED_BYTE;

UNSIGNED_INT: typeof P5.UNSIGNED_INT;

FLOAT: typeof P5.FLOAT;

HALF_FLOAT: typeof P5.HALF_FLOAT;

/**
 * The `splineProperty('ends')` mode where splines curve through
 * their first and last points.
 */
INCLUDE: typeof P5.INCLUDE;

/**
 * The `splineProperty('ends')` mode where the first and last points in a spline
 * affect the direction of the curve, but are not rendered.
 */
EXCLUDE: typeof P5.EXCLUDE;

/**
 * Information about the current iteration of a compute shader.
 * 
 * Use it inside a
 * <a href="#/p5/buildComputeShader">`buildComputeShader()`</a>
 * function to write a loop that runs in parallel on the GPU.
 * 
 * `index` is a three-component vector with the current index
 * across all dimensions passed to
 * <a href="#/p5/compute">`compute()`</a>. For example, use
 * `index.x` to get the index when looping in one dimension.
 */
index: typeof P5.index;

  /**
   * Removes the sketch from the web page.
   * 
   * Calling `remove()` stops the draw loop and removes any HTML elements
   * created by the sketch, including the canvas. A new sketch can be
   * created by using the <a href="#/p5/p5">p5()</a> constructor, as in
   * `new p5()`.
   */
  remove(): void;
  remove(): void;
  remove(): void;
  remove(): void;

  /**
   * Creates a loading indicator when the sketch's setup() function is running.
   * It is called and removed automatically using the presetup and postsetup lifecycles hooks.
   * @param p5 The p5 constructor
   * @param fn The p5 prototype object
   * @param lifecycles Lifecycle hooks for the sketch
   */
  loading(p5: any, fn: any, lifecycles: any): void;

  /**
   * Returns a Quaternion for the
   * axis angle representation of the rotation
   * @param angle Angle with which the points needs to be rotated
   * @param x x component of the axis vector
   * @param y y component of the axis vector
   * @param z z component of the axis vector
   */
  fromAxisAngle(angle?: number, x?: number, y?: number, z?: number): void;

  /**
   * Returns the current day as a number from 1–31.
   * @returns current day between 1 and 31.
   */
  day(): number;

  /**
   * Multiplies a quaternion with other quaternion.
   * @param quat quaternion to multiply with the quaternion calling the method.
   */
  mult(quat?: P5.Quat): void;

  /**
   * Displays text in the web browser's console.
   * 
   * `print()` is helpful for printing values while debugging. Each call to
   * `print()` creates a new line of text.
   * 
   * Note: Call `print('\n')` to print a blank line. Calling `print()` without
   * an argument opens the browser's dialog for printing documents.
   * @param contents content to print to the console.
   */
  print(contents: any): void;
  print(data: string | number | any[]): void;

  /**
   * Returns the current hour as a number from 0–23.
   * @returns current hour between 0 and 23.
   */
  hour(): number;

  /**
   * Sets the seed value for the <a href="#/p5/random">random()</a> and
   * <a href="#/p5/randomGaussian">randomGaussian()</a> functions.
   * 
   * By default, <a href="#/p5/random">random()</a> and
   * <a href="#/p5/randomGaussian">randomGaussian()</a> produce different
   * results each time a sketch is run. Calling `randomSeed()` with a constant
   * argument, such as `randomSeed(99)`, makes these functions produce the same
   * results each time a sketch is run.
   * @param seed seed value.
   */
  randomSeed(seed: number): void;

  /**
   * Converts a `String` to a floating point (decimal) `Number`.
   * 
   * `float()` converts strings that resemble numbers, such as `'12.34'`, into
   * numbers.
   * 
   * The parameter, `str`, is the string value to convert. For example, calling
   * `float('12.34')` returns the number `12.34`.  If an array of strings is
   * passed, as in `float(['12.34', '56.78'])`, then an array of numbers will be
   * returned.
   * 
   * Note: If a string can't be converted to a number, as in `float('giraffe')`,
   * then the value `NaN` (not a number) will be returned.
   * @param str string to convert.
   * @returns converted number.
   */
  float(str: string): number;
  float(ns: string[]): number[];

  /**
   * Rotates the Quaternion by the quaternion passed
   * which contains the axis of roation and angle of rotation
   * @param axesQuat axis quaternion which contains
   * the axis of rotation and angle of rotation
   */
  rotateBy(axesQuat?: P5.Quat): void;

  /**
   * Changes where ellipses, circles, and arcs are drawn.
   * 
   * By default, the first two parameters of
   * <a href="#/p5/ellipse">ellipse()</a>, <a href="#/p5/circle">circle()</a>,
   * and <a href="#/p5/arc">arc()</a>
   * are the x- and y-coordinates of the shape's center. The next parameters set
   * the shape's width and height. This is the same as calling
   * `ellipseMode(CENTER)`.
   * 
   * `ellipseMode(RADIUS)` also uses the first two parameters to set the x- and
   * y-coordinates of the shape's center. The next parameters are half of the
   * shapes's width and height. Calling `ellipse(0, 0, 10, 15)` draws a shape
   * with a width of 20 and height of 30.
   * 
   * `ellipseMode(CORNER)` uses the first two parameters as the upper-left
   * corner of the shape. The next parameters are its width and height.
   * 
   * `ellipseMode(CORNERS)` uses the first two parameters as the location of one
   * corner of the ellipse's bounding box. The next parameters are the location
   * of the opposite corner.
   * 
   * The argument passed to `ellipseMode()` must be written in ALL CAPS because
   * the constants `CENTER`, `RADIUS`, `CORNER`, and `CORNERS` are defined this
   * way. JavaScript is a case-sensitive language.
   * 
   * Calling `ellipseMode()` without an argument returns the current ellipseMode, either `CENTER`, `RADIUS`, `CORNER`, or `CORNERS`.
   * @param mode either CENTER, RADIUS, CORNER, or CORNERS
   * @returns the current ellipseMode.
   */
  ellipseMode(mode: typeof P5.CENTER | typeof P5.RADIUS | typeof P5.CORNER | typeof P5.CORNERS): typeof P5.CENTER | typeof P5.RADIUS | typeof P5.CORNER | typeof P5.CORNERS;
  ellipseMode(): typeof P5.CENTER | typeof P5.RADIUS | typeof P5.CORNER | typeof P5.CORNERS;

  /**
   * Calculates the absolute value of a number.
   * 
   * A number's absolute value is its distance from zero on the number line.
   * -5 and 5 are both five units away from zero, so calling `abs(-5)` and
   * `abs(5)` both return 5. The absolute value of a number is always positive.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * describe('A gray square with a vertical black line that divides it in half. A white rectangle gets taller when the user moves the mouse away from the line.');
   * }
   * 
   * function draw() {
   * background(200);
   * 
   * // Divide the canvas.
   * line(50, 0, 50, 100);
   * 
   * // Calculate the mouse's distance from the middle.
   * let h = abs(mouseX - 50);
   * 
   * // Draw a rectangle based on the mouse's distance
   * // from the middle.
   * rect(0, 100 - h, 100, h);
   * }``abs()` can also be used in shaders with p5.strands. The following example
   * uses `abs()` to create a mirror effect on the color of a shape.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere with colors that fold back like a mirror.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
   * let t = millis() * 0.001;
   * 
   * // sin(t) goes between -1 and 1 over time.
   * let sinVal = sin(t);
   * 
   * // abs() folds the negative values to positive.
   * // Now value goes between 0 and 1, creating a mirror effect.
   * let value = abs(sinVal);
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let navy = [0.2, 0.2, 0.8, 1];
   * let coral = [0.8, 0.2, 0.2, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between navy (when value = 0) and coral (when value = 1).
   * finalColor.set(mix(navy, coral, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param n number to compute.
   * @returns absolute value of given number.
   */
  abs(n: number): number;

  /**
   * Converts a `Number` into a `String` with a given number of digits.
   * 
   * `nf()` converts numbers such as `123.45` into strings formatted with a set
   * number of digits, as in `'123.4500'`.
   * 
   * The first parameter, `num`, is the number to convert to a string. For
   * example, calling `nf(123.45)` returns the string `'123.45'`. If an array of
   * numbers is passed, as in `nf([123.45, 67.89])`, an array of formatted
   * strings will be returned.
   * 
   * The second parameter, `left`, is optional. If a number is passed, as in
   * `nf(123.45, 4)`, it sets the minimum number of digits to include to the
   * left of the decimal place. If `left` is larger than the number of digits in
   * `num`, then unused digits will be set to 0. For example, calling
   * `nf(123.45, 4)` returns the string `'0123.45'`.
   * 
   * The third parameter, `right`, is also optional. If a number is passed, as
   * in `nf(123.45, 4, 1)`, it sets the minimum number of digits to include to
   * the right of the decimal place. If `right` is smaller than the number of
   * decimal places in `num`, then `num` will be rounded to the given number of
   * decimal places. For example, calling `nf(123.45, 4, 1)` returns the string
   * `'0123.5'`. If right is larger than the number of decimal places in `num`,
   * then unused decimal places will be set to 0. For example, calling
   * `nf(123.45, 4, 3)` returns the string `'0123.450'`.
   * 
   * When the number is negative, for example, calling `nf(-123.45, 5, 2)`
   * returns the string `'-00123.45'`.
   * @param num number to format.
   * @param left number of digits to include to the left of
   * the decimal point.
   * @param right number of digits to include to the right
   * of the decimal point.
   * @returns formatted string.
   */
  nf(num: number | string, left?: number | string, right?: number | string): string;
  nf(nums: number[], left?: number | string, right?: number | string): string[];

  /**
   * Sets the stroke rendering mode to balance performance and visual features when drawing lines.
   * 
   * `strokeMode()` offers two modes:
   * 
   * - `SIMPLE`: Optimizes for speed by disabling caps, joins, and stroke color features.
   * Use this mode for faster line rendering when these visual details are unnecessary.
   * 
   * - `FULL`: Enables caps, joins, and stroke color for lines.
   * This mode provides enhanced visuals but may reduce performance due to additional processing.
   * 
   * Choose the mode that best suits your application's needs to either improve rendering speed or enhance visual quality.
   * @param mode The stroke mode to set. Possible values are:
   * 
   * - `'SIMPLE'`: Fast rendering without caps, joins, or stroke color.
   * 
   * - `'FULL'`: Detailed rendering with caps, joins, and stroke color.
   */
  strokeMode(mode: string): void;

  /**
   * Searches the page for the first element that matches the given
   * <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors" target="_blank">CSS selector string</a>.
   * 
   * The selector string can be an ID, class, tag name, or a combination.
   * `select()` returns a <a href="#/p5.Element">p5.Element</a> object if it
   * finds a match and `null` if not.
   * 
   * The second parameter, `container`, is optional. It specifies a container to
   * search within. `container` can be CSS selector string, a
   * <a href="#/p5.Element">p5.Element</a> object, or an
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> object.
   * @param selectors CSS selector string of element to search for.
   * @param container CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.
   * @returns <a href="#/p5.Element">p5.Element</a> containing the element.
   */
  select(selectors: string, container?: string | P5.Element | HTMLElement): P5.Element | null;

  /**
   * Loads an image to create a <a href="#/p5.Image">p5.Image</a> object.
   * 
   * `loadImage()` interprets the first parameter one of three ways. If the path
   * to an image file is provided, `loadImage()` will load it. Paths to local
   * files should be relative, such as `'assets/thundercat.jpg'`. URLs such as
   * `'https://example.com/thundercat.jpg'` may be blocked due to browser
   * security. Raw image data can also be passed as a base64 encoded image in
   * the form `'data:image/png;base64,arandomsequenceofcharacters'`. The `path`
   * parameter can also be defined as a `Request`
   * object for more advanced usage.
   * 
   * The second parameter is optional. If a function is passed, it will be
   * called once the image has loaded. The callback function can optionally use
   * the new <a href="#/p5.Image">p5.Image</a> object. The return value of the
   * function will be used as the final return value of `loadImage()`.
   * 
   * The third parameter is also optional. If a function is passed, it will be
   * called if the image fails to load. The callback function can optionally use
   * the event error. The return value of the function will be used as the final
   * return value of `loadImage()`.
   * 
   * This function returns a `Promise` and should be used in an `async` setup with
   * `await`. See the examples for the usage syntax.
   * @param path path of the image to be loaded or base64 encoded image.
   * @param successCallback function called with
   * <a href="#/p5.Image">p5.Image</a> once it
   * loads.
   * @param failureCallback function called with event
   * error if the image fails to load.
   * @returns the <a href="#/p5.Image">p5.Image</a> object.
   */
  loadImage(path: string | Request, successCallback?: (arg0: P5.Image) => void, failureCallback?: (arg0: Event) => void): Promise<P5.Image>;

  /**
   * Creates a new <a href="#/p5.Vector">p5.Vector</a> object.
   * 
   * A vector can be thought of in different ways. In one view, a vector is like
   * an arrow pointing in space. Vectors have both magnitude (length) and
   * direction. This view is helpful for programming motion.
   * 
   * A vector's components determine its magnitude and direction. For example,
   * calling `createVector(3, 4)` creates a new
   * <a href="#/p5.Vector">p5.Vector</a> object with an x-component of 3 and a
   * y-component of 4. From the origin, this vector's tip is 3 units to the
   * right and 4 units down.
   * 
   * You can also pass N dimensions to the `createVector` function. For example,
   * calling `createVector(1, 2, 3, 4)` creates a vector with four components.
   * This allows for flexibility in representing vectors in higher-dimensional
   * spaces.
   * 
   * Calling `createVector()` with no arguments is deprecated and will emit
   * a friendly warning. Use `createVector(0)`, `createVector(0, 0)`, or
   * `createVector(0, 0, 0)` instead.
   * 
   * <a href="#/p5.Vector">p5.Vector</a> objects are often used to program
   * motion because they simplify the math. For example, a moving ball has a
   * position and a velocity. Position describes where the ball is in space. The
   * ball's position vector extends from the origin to the ball's center.
   * Velocity describes the ball's speed and the direction it's moving. If the
   * ball is moving straight up, its velocity vector points straight up. Adding
   * the ball's velocity vector to its position vector moves it, as in
   * `pos.add(vel)`. Vector math relies on methods inside the
   * <a href="#/p5.Vector">p5.Vector</a> class.
   * @param x List of numbers representing each component of the vector.
   * @returns new <a href="#/p5.Vector">p5.Vector</a> object.
   */
  createVector(...x: number[]): P5.Vector;

  /**
   * Returns the current minute as a number from 0–59.
   * @returns current minute between 0 and 59.
   */
  minute(): number;

  /**
   * Stops the code in <a href="#/p5/draw">draw()</a> from running repeatedly.
   * 
   * By default, <a href="#/p5/draw">draw()</a> tries to run 60 times per
   * second. Calling `noLoop()` stops <a href="#/p5/draw">draw()</a> from
   * repeating. The draw loop can be restarted by calling
   * <a href="#/p5/loop">loop()</a>. <a href="#/p5/draw">draw()</a> can be run
   * once by calling <a href="#/p5/redraw">redraw()</a>.
   * 
   * The <a href="#/p5/isLooping">isLooping()</a> function can be used to check
   * whether a sketch is looping, as in `isLooping() === true`.
   */
  noLoop(): void;

  /**
   * Creates a screen reader-accessible description of the canvas.
   * 
   * The first parameter, `text`, is the description of the canvas.
   * 
   * The second parameter, `display`, is optional. It determines how the
   * description is displayed. If `LABEL` is passed, as in
   * `describe('A description.', LABEL)`, the description will be visible in
   * a div element next to the canvas. If `FALLBACK` is passed, as in
   * `describe('A description.', FALLBACK)`, the description will only be
   * visible to screen readers. This is the default mode.
   * 
   * Read
   * <a href="/learn/accessible-labels.html">Writing accessible canvas descriptions</a>
   * to learn more about making sketches accessible.
   * @param text description of the canvas.
   * @param display either LABEL or FALLBACK.
   */
  describe(text: string, display?: typeof P5.FALLBACK | typeof P5.LABEL): void;

  /**
   * Stores a value in the web browser's local storage.
   * 
   * Web browsers can save small amounts of data using the built-in
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">localStorage object</a>.
   * Data stored in `localStorage` can be retrieved at any point, even after
   * refreshing a page or restarting the browser. Data are stored as key-value
   * pairs.
   * 
   * `storeItem()` makes it easy to store values in `localStorage` and
   * <a href="#/p5/getItem">getItem()</a> makes it easy to retrieve them.
   * 
   * The first parameter, `key`, is the name of the value to be stored as a
   * string.
   * 
   * The second parameter, `value`, is the value to be stored. Values can have
   * any type.
   * 
   * Note: Sensitive data such as passwords or personal information shouldn't be
   * stored in `localStorage`.
   * @param key name of the value.
   * @param value value to be stored.
   */
  storeItem(key: string, value: string | number | boolean | object | any[]): void;

  /**
   * Creates a screen reader-accessible description of shapes on the canvas.
   * 
   * `textOutput()` adds a general description, list of shapes, and
   * table of shapes to the web page. The general description includes the
   * canvas size, canvas color, and number of shapes. For example,
   * `Your output is a, 100 by 100 pixels, gray canvas containing the following 2 shapes:`.
   * 
   * A list of shapes follows the general description. The list describes the
   * color, location, and area of each shape. For example,
   * `a red circle at middle covering 3% of the canvas`. Each shape can be
   * selected to get more details.
   * 
   * `textOutput()` uses its table of shapes as a list. The table describes the
   * shape, color, location, coordinates and area. For example,
   * `red circle location = middle area = 3%`. This is different from
   * <a href="#/p5/gridOutput">gridOutput()</a>, which uses its table as a grid.
   * 
   * The `display` parameter is optional. It determines how the description is
   * displayed. If `LABEL` is passed, as in `textOutput(LABEL)`, the description
   * will be visible in a div element next to the canvas. Using `LABEL` creates
   * unhelpful duplicates for screen readers. Only use `LABEL` during
   * development. If `FALLBACK` is passed, as in `textOutput(FALLBACK)`, the
   * description will only be visible to screen readers. This is the default
   * mode.
   * 
   * Read
   * <a href="/learn/accessible-labels.html">Writing accessible canvas descriptions</a>
   * to learn more about making sketches accessible.
   * @param display either FALLBACK or LABEL.
   */
  textOutput(display?: typeof P5.FALLBACK | typeof P5.LABEL): void;

  /**
   * Copies a region of pixels from one image to another.
   * 
   * The first parameter, `srcImage`, is the
   * <a href="#/p5.Image">p5.Image</a> object to blend.
   * 
   * The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
   * to blend from the source image. `(sx, sy)` is the top-left corner of the
   * region. `sw` and `sh` are the regions width and height.
   * 
   * The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
   * of the canvas to blend into. `(dx, dy)` is the top-left corner of the
   * region. `dw` and `dh` are the regions width and height.
   * 
   * The tenth parameter, `blendMode`, sets the effect used to blend the images'
   * colors. The options are `BLEND`, `DARKEST`, `LIGHTEST`, `DIFFERENCE`,
   * `MULTIPLY`, `EXCLUSION`, `SCREEN`, `REPLACE`, `OVERLAY`, `HARD_LIGHT`,
   * `SOFT_LIGHT`, `DODGE`, `BURN`, `ADD`, or `NORMAL`
   * @param srcImage source image.
   * @param sx x-coordinate of the source's upper-left corner.
   * @param sy y-coordinate of the source's upper-left corner.
   * @param sw source image width.
   * @param sh source image height.
   * @param dx x-coordinate of the destination's upper-left corner.
   * @param dy y-coordinate of the destination's upper-left corner.
   * @param dw destination image width.
   * @param dh destination image height.
   * @param blendMode the blend mode. either
   * BLEND, DARKEST, LIGHTEST, DIFFERENCE,
   * MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
   * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
   */
  blend(srcImage: P5.Image, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number, blendMode: typeof P5.BLEND | typeof P5.DARKEST | typeof P5.LIGHTEST | typeof P5.DIFFERENCE | typeof P5.MULTIPLY | typeof P5.EXCLUSION | typeof P5.SCREEN | typeof P5.REPLACE | typeof P5.OVERLAY | typeof P5.HARD_LIGHT | typeof P5.SOFT_LIGHT | typeof P5.DODGE | typeof P5.BURN | typeof P5.ADD | typeof P5.NORMAL): void;
  blend(sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number, blendMode: typeof P5.BLEND | typeof P5.DARKEST | typeof P5.LIGHTEST | typeof P5.DIFFERENCE | typeof P5.MULTIPLY | typeof P5.EXCLUSION | typeof P5.SCREEN | typeof P5.REPLACE | typeof P5.OVERLAY | typeof P5.HARD_LIGHT | typeof P5.SOFT_LIGHT | typeof P5.DODGE | typeof P5.BURN | typeof P5.ADD | typeof P5.NORMAL): void;

  /**
   * Creates a canvas element on the web page.
   * 
   * `createCanvas()` creates the main drawing canvas for a sketch. It should
   * only be called once at the beginning of <a href="#/p5/setup">setup()</a>.
   * Calling `createCanvas()` more than once causes unpredictable behavior.
   * 
   * The first two parameters, `width` and `height`, are optional. They set the
   * dimensions of the canvas and the values of the
   * <a href="#/p5/width">width</a> and <a href="#/p5/height">height</a> system
   * variables. For example, calling `createCanvas(900, 500)` creates a canvas
   * that's 900×500 pixels. By default, `width` and `height` are both 100.
   * 
   * The third parameter is also optional. If either of the constants `P2D` or
   * `WEBGL` is passed, as in `createCanvas(900, 500, WEBGL)`, then it will set
   * the sketch's rendering mode. If an existing
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement" target="_blank">HTMLCanvasElement</a>
   * is passed, as in `createCanvas(900, 500, myCanvas)`, then it will be used
   * by the sketch. To use `WEBGPU` mode, make sure you have the WebGPU mode addon included.
   * 
   * The fourth parameter is also optional. If an existing
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement" target="_blank">HTMLCanvasElement</a>
   * is passed, as in `createCanvas(900, 500, WEBGL, myCanvas)`, then it will be
   * used by the sketch.
   * 
   * Note: In WebGL mode, the canvas will use a WebGL2 context if it's supported
   * by the browser. Check the <a href="#/p5/webglVersion">webglVersion</a>
   * system variable to check what version is being used, or call
   * `setAttributes({ version: 1 })` to create a WebGL1 context.
   * 
   * Note: In WebGPU mode, you must `await` this function.
   * @param width width of the canvas. Defaults to 100.
   * @param height height of the canvas. Defaults to 100.
   * @param renderer either P2D or WEBGL. Defaults to `P2D`.
   * @param canvas existing canvas element that should be used for the sketch.
   * @returns new `p5.Renderer` that holds the canvas.
   */
  createCanvas(width?: number, height?: number, renderer?: typeof P5.P2D | typeof P5.WEBGL | typeof P5.P2DP3, canvas?: HTMLCanvasElement): P5.Renderer;
  createCanvas(width: number, height: number, renderer: typeof P5.WEBGPU, canvas?: HTMLCanvasElement): Promise<P5.Renderer>;
  createCanvas(width?: number, height?: number, canvas?: HTMLCanvasElement): P5.Renderer;

  /**
   * Loads vertex and fragment shaders to create a
   * <a href="#/p5.Shader">p5.Shader</a> 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
   * <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>
   * and run along with the rest of the code in a sketch.
   * 
   * Once the <a href="#/p5.Shader">p5.Shader</a> object is created, it can be
   * used with the <a href="#/p5/shader">shader()</a> 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 <a href="#/p5.Shader">p5.Shader</a> 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 <a href="#/p5.Shader">p5.Shader</a> 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 vertFilename path of the vertex shader to be loaded.
   * @param fragFilename path of the fragment shader to be loaded.
   * @param successCallback function to call once the shader is loaded. Can be passed the
   * <a href="#/p5.Shader">p5.Shader</a> object.
   * @param failureCallback function to call if the shader fails to load. Can be passed an
   * `Error` event object.
   * @returns new shader created from the vertex and fragment shader files.
   */
  loadShader(vertFilename: string | Request, fragFilename: string | Request, successCallback?: Function, failureCallback?: Function): Promise<P5.Shader>;

  /**
   * Creates a new <a href="#/p5.Image">p5.Image</a> object.
   * 
   * `createImage()` uses the `width` and `height` parameters to set the new
   * <a href="#/p5.Image">p5.Image</a> object's dimensions in pixels. The new
   * <a href="#/p5.Image">p5.Image</a> can be modified by updating its
   * <a href="#/p5.Image/pixels">pixels</a> array or by calling its
   * <a href="#/p5.Image/get">get()</a> and
   * <a href="#/p5.Image/set">set()</a> methods. The
   * <a href="#/p5.Image/loadPixels">loadPixels()</a> method must be called
   * before reading or modifying pixel values. The
   * <a href="#/p5.Image/updatePixels">updatePixels()</a> method must be called
   * for updates to take effect.
   * 
   * Note: The new <a href="#/p5.Image">p5.Image</a> object is transparent by
   * default.
   * @param width width in pixels.
   * @param height height in pixels.
   * @returns new <a href="#/p5.Image">p5.Image</a> object.
   */
  createImage(width: number, height: number): P5.Image;

  /**
   * Allows the user to orbit around a 3D sketch using a mouse, trackpad, or
   * touchscreen.
   * 
   * 3D sketches are viewed through an imaginary camera. Calling
   * `orbitControl()` within the <a href="#/p5/draw">draw()</a> function allows
   * the user to change the camera’s position:
   * 
   * `function draw() {
   * background(200);
   * 
   * // Enable orbiting with the mouse.
   * orbitControl();
   * 
   * // Rest of sketch.
   * }`Left-clicking and dragging or swipe motion will rotate the camera position
   * about the center of the sketch. Right-clicking and dragging or multi-swipe
   * will pan the camera position without rotation. Using the mouse wheel
   * (scrolling) or pinch in/out will move the camera further or closer from the
   * center of the sketch.
   * 
   * The first three parameters, `sensitivityX`, `sensitivityY`, and
   * `sensitivityZ`, are optional. They’re numbers that set the sketch’s
   * sensitivity to movement along each axis. For example, calling
   * `orbitControl(1, 2, -1)` keeps movement along the x-axis at its default
   * value, makes the sketch twice as sensitive to movement along the y-axis,
   * and reverses motion along the z-axis. By default, all sensitivity values
   * are 1.
   * 
   * The fourth parameter, `options`, is also optional. It’s an object that
   * changes the behavior of orbiting. For example, calling
   * `orbitControl(1, 1, 1, options)` keeps the default sensitivity values while
   * changing the behaviors set with `options`. The object can have the
   * following properties:
   * 
   * `let options = {
   * // Setting this to false makes mobile interactions smoother by
   * // preventing accidental interactions with the page while orbiting.
   * // By default, it's true.
   * disableTouchActions: true,
   * 
   * // Setting this to true makes the camera always rotate in the
   * // direction the mouse/touch is moving.
   * // By default, it's false.
   * freeRotation: false
   * };
   * 
   * orbitControl(1, 1, 1, options);`
   * @param sensitivityX sensitivity to movement along the x-axis. Defaults to 1.
   * @param sensitivityY sensitivity to movement along the y-axis. Defaults to 1.
   * @param sensitivityZ sensitivity to movement along the z-axis. Defaults to 1.
   * @param options Settings for orbitControl:
   */
  orbitControl(sensitivityX?: number, sensitivityY?: number, sensitivityZ?: number, options?: { disableTouchActions?: boolean; freeRotation?: boolean }): void;

  /**
   * Draws certain features with jagged (aliased) edges.
   * 
   * <a href="#/p5/smooth">smooth()</a> is active by default. In 2D mode,
   * `noSmooth()` is helpful for scaling up images without blurring. The
   * functions don't affect shapes or fonts.
   * 
   * In WebGL mode, `noSmooth()` causes all shapes to be drawn with jagged
   * (aliased) edges. The functions don't affect images or fonts.
   * 
   * Note: In WebGPU mode, you must `await` this function.
   */
  noSmooth(): void | Promise<void>;

  /**
   * Starts defining a shape that will mask any shapes drawn afterward.
   * 
   * Any shapes drawn between `beginClip()` and
   * <a href="#/p5/endClip">endClip()</a> will add to the mask shape. The mask
   * will apply to anything drawn after <a href="#/p5/endClip">endClip()</a>.
   * 
   * The parameter, `options`, is optional. If an object with an `invert`
   * property is passed, as in `beginClip({ invert: true })`, it will be used to
   * set the masking mode. `{ invert: true }` inverts the mask, creating holes
   * in shapes that are masked. `invert` is `false` by default.
   * 
   * Masks can be contained between the
   * <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions.
   * Doing so allows unmasked shapes to be drawn after masked shapes.
   * 
   * Masks can also be defined in a callback function that's passed to
   * <a href="#/p5/clip">clip()</a>.
   * @param options an object containing clip settings.
   */
  beginClip(options?: { invert?: boolean }): void;

  /**
   * Calculates the closest integer value that is greater than or equal to a
   * number.
   * 
   * For example, calling `ceil(9.03)` and `ceil(9.97)` both return the value
   * 10.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Use RGB color with values from 0 to 1.
   * colorMode(RGB, 1);
   * 
   * noStroke();
   * 
   * // Draw the left rectangle.
   * let r = 0.3;
   * fill(r, 0, 0);
   * rect(0, 0, 50, 100);
   * 
   * // Round r up to 1.
   * r = ceil(r);
   * 
   * // Draw the right rectangle.
   * fill(r, 0, 0);
   * rect(50, 0, 50, 100);
   * 
   * describe('Two rectangles. The one on the left is dark red and the one on the right is bright red.');
   * }``ceil()` can also be used in shaders with p5.strands. The following example
   * uses `ceil()` to create a stepped color effect on a shape.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere with stepped color bands.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
   * let t = millis() * 0.001;
   * 
   * // sin(t) goes between -1 and 1.
   * // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
   * let sinVal = 0.5 + 0.5 * sin(t);
   * 
   * // Multiply by 4 then ceil to get the next whole number up.
   * // Divide by 4 to bring the result back to the 0 to 1 range.
   * // This creates 4 distinct stepped color levels: 0.25, 0.5, 0.75, 1.
   * let value = ceil(sinVal * 4) / 4;
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let cyan = [0, 0.5, 1, 1];
   * let orange = [1, 0.5, 0, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between cyan (when value = 0) and orange (when value = 1).
   * // ceil() creates sharp steps between color levels.
   * finalColor.set(mix(cyan, orange, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param n number to round up.
   * @returns rounded up number.
   */
  ceil(n: number): number;

  /**
   * Creates a light that shines from all directions.
   * 
   * Ambient light does not come from one direction. Instead, 3D shapes are
   * lit evenly from all sides. Ambient lights are almost always used in
   * combination with other types of lights.
   * 
   * There are three ways to call `ambientLight()` with optional parameters to
   * set the light’s color.
   * 
   * The first way to call `ambientLight()` has two parameters, `gray` and
   * `alpha`. `alpha` is optional. Grayscale and alpha values between 0 and 255
   * can be passed to set the ambient light’s color, as in `ambientLight(50)` or
   * `ambientLight(50, 30)`.
   * 
   * The second way to call `ambientLight()` has one parameter, color. A
   * <a href="#/p5.Color">p5.Color</a> object, an array of color values, or a
   * CSS color string, as in `ambientLight('magenta')`, can be passed to set the
   * ambient light’s color.
   * 
   * The third way to call `ambientLight()` has four parameters, `v1`, `v2`,
   * `v3`, and `alpha`. `alpha` is optional. RGBA, HSBA, or HSLA values can be
   * passed to set the ambient light’s colors, as in `ambientLight(255, 0, 0)`
   * or `ambientLight(255, 0, 0, 30)`. Color values will be interpreted using
   * the current <a href="#/p5/colorMode">colorMode()</a>.
   * @param v1 red or hue value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   * @param v2 green or saturation value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   * @param v3 blue, brightness, or lightness value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   * @param alpha alpha (transparency) value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   */
  ambientLight(v1: number, v2: number, v3: number, alpha?: number): void;
  ambientLight(gray: number, alpha?: number): void;
  ambientLight(value: string): void;
  ambientLight(values: number[]): void;
  ambientLight(color: P5.Color): void;

  /**
   * Searches the page for all elements that matches the given
   * <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors" target="_blank">CSS selector string</a>.
   * 
   * The selector string can be an ID, class, tag name, or a combination.
   * `selectAll()` returns an array of <a href="#/p5.Element">p5.Element</a>
   * objects if it finds any matches and an empty array if none are found.
   * 
   * The second parameter, `container`, is optional. It specifies a container to
   * search within. `container` can be CSS selector string, a
   * <a href="#/p5.Element">p5.Element</a> object, or an
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> object.
   * @param selectors CSS selector string of element to search for.
   * @param container CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.
   * @returns array of <a href="#/p5.Element">p5.Element</a>s containing any elements found.
   */
  selectAll(selectors: string, container?: string | P5.Element | HTMLElement): P5.Element[];

  /**
   * Draws a Bézier curve.
   * 
   * Bézier curves can form shapes and curves that slope gently. They're defined
   * by two anchor points and two control points. Bézier curves provide more
   * control than the spline curves created with the
   * <a href="#/p5/spline">spline()</a> function.
   * 
   * The first two parameters, `x1` and `y1`, set the first anchor point. The
   * first anchor point is where the curve starts.
   * 
   * The next four parameters, `x2`, `y2`, `x3`, and `y3`, set the two control
   * points. The control points "pull" the curve towards them.
   * 
   * The seventh and eighth parameters, `x4` and `y4`, set the last anchor
   * point. The last anchor point is where the curve ends.
   * 
   * Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
   * `bezier()` has twelve arguments because each point has x-, y-,
   * and z-coordinates.
   * @param x1 x-coordinate of the first anchor point.
   * @param y1 y-coordinate of the first anchor point.
   * @param x2 x-coordinate of the first control point.
   * @param y2 y-coordinate of the first control point.
   * @param x3 x-coordinate of the second control point.
   * @param y3 y-coordinate of the second control point.
   * @param x4 x-coordinate of the second anchor point.
   * @param y4 y-coordinate of the second anchor point.
   */
  bezier(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): void;
  bezier(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number, x3: number, y3: number, z3: number, x4: number, y4: number, z4: number): void;

  /**
   * Calculates the arc cosine of a number.
   * 
   * `acos()` is the inverse of <a href="#/p5/cos">cos()</a>. It expects
   * arguments in the range -1 to 1. By default, `acos()` returns values in the
   * range 0 to π (about 3.14). If the
   * <a href="#/p5/angleMode">angleMode()</a> is `DEGREES`, then values are
   * returned in the range 0 to 180.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Calculate cos() and acos() values.
   * let a = PI;
   * let c = cos(a);
   * let ac = acos(c);
   * 
   * // Display the values.
   * text(`${round(a, 3)}`, 35, 25);
   * text(`${round(c, 3)}`, 35, 50);
   * text(`${round(ac, 3)}`, 35, 75);
   * 
   * describe('The numbers 3.142, -1, and 3.142 written on separate rows.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Calculate cos() and acos() values.
   * let a = PI + QUARTER_PI;
   * let c = cos(a);
   * let ac = acos(c);
   * 
   * // Display the values.
   * text(`${round(a, 3)}`, 35, 25);
   * text(`${round(c, 3)}`, 35, 50);
   * text(`${round(ac, 3)}`, 35, 75);
   * 
   * describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');
   * }``acos()` can also be used in shaders with p5.strands. The following example
   * uses `acos()` to create a pulsing color transition on a shape.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere that pulses between orange and teal.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
   * let t = millis() * 0.001;
   * 
   * // acos(cos(t)) creates a triangle wave that goes from 0 to PI and back.
   * // Dividing by PI normalizes the result to the 0 to 1 range.
   * let value = acos(cos(t)) / PI;
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let orange = [1, 0.5, 0, 1];
   * let teal = [0, 0.8, 0.8, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between orange (when value = 0) and teal (when value = 1).
   * // acos() creates a pulsing effect by turning smooth oscillation into a triangle wave.
   * finalColor.set(mix(orange, teal, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param value value whose arc cosine is to be returned.
   * @returns arc cosine of the given value.
   */
  acos(value: number): number;

  /**
   * Ends defining a mask that was started with
   * <a href="#/p5/beginClip">beginClip()</a>.
   */
  endClip(): void;

  /**
   * Converts a `Boolean`, `String`, or decimal `Number` to an integer.
   * 
   * `int()` converts values to integers. Integers are positive or negative
   * numbers without decimals. If the original value has decimals, as in -34.56,
   * they're removed to produce an integer such as -34.
   * 
   * The parameter, `n`, is the value to convert. If `n` is a Boolean, as in
   * `int(false)` or `int(true)`, then the number 0 (`false`) or 1 (`true`) will
   * be returned. If `n` is a string or number, as in `int('45')` or
   * `int(67.89)`, then an integer will be returned. If an array is passed, as
   * in `int([12.34, 56.78])`, then an array of integers will be returned.
   * 
   * Note: If a value can't be converted to a number, as in `int('giraffe')`,
   * then the value `NaN` (not a number) will be returned.
   * @param n value to convert.
   * @returns converted number.
   */
  int(n: string | boolean | number): number;
  int(ns: any[]): number[];

  /**
   * Copies pixels from a source image to a region of the canvas.
   * 
   * The first parameter, `srcImage`, is the
   * <a href="#/p5.Image">p5.Image</a> object to blend. The source image can be
   * the canvas itself or a
   * <a href="#/p5.Image">p5.Image</a> object. `copy()` will scale pixels from
   * the source region if it isn't the same size as the destination region.
   * 
   * The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
   * to copy from the source image. `(sx, sy)` is the top-left corner of the
   * region. `sw` and `sh` are the region's width and height.
   * 
   * The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
   * of the canvas to copy into. `(dx, dy)` is the top-left corner of the
   * region. `dw` and `dh` are the region's width and height.
   * @param srcImage source image.
   * @param sx x-coordinate of the source's upper-left corner.
   * @param sy y-coordinate of the source's upper-left corner.
   * @param sw source image width.
   * @param sh source image height.
   * @param dx x-coordinate of the destination's upper-left corner.
   * @param dy y-coordinate of the destination's upper-left corner.
   * @param dw destination image width.
   * @param dh destination image height.
   */
  copy(srcImage: P5.Image | P5.Element, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
  copy(sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;

  /**
   * Resumes the draw loop after <a href="#/p5/noLoop">noLoop()</a> has been
   * called.
   * 
   * By default, <a href="#/p5/draw">draw()</a> tries to run 60 times per
   * second. Calling <a href="#/p5/noLoop">noLoop()</a> stops
   * <a href="#/p5/draw">draw()</a> from repeating. The draw loop can be
   * restarted by calling `loop()`.
   * 
   * The <a href="#/p5/isLooping">isLooping()</a> function can be used to check
   * whether a sketch is looping, as in `isLooping() === true`.
   */
  loop(): void;

  /**
   * A function alias for <a href="#/p5/instanceIndex">`instanceIndex`</a>, kept for compatibility.
   * Prefer using <a href="#/p5/instanceIndex">`instanceIndex`</a> directly as a value instead.
   * 
   * Returns the index of the current instance when drawing multiple copies of a
   * shape with <a href="#/p5/model">`model(count)`</a>.
   * 
   * `instanceID()` can only be used inside a p5.strands shader callback.
   * @returns The index of the current instance.
   */
  instanceID(): any;

  /**
   * A shader function that performs smooth Hermite interpolation between `0.0`
   * and `1.0`.
   * 
   * This function is equivalent to the GLSL built-in
   * `smoothstep(edge0, edge1, x)` and is available inside p5.strands shader
   * callbacks. It is commonly used to create soft transitions, smooth edges,
   * fades, and anti-aliased effects.
   * 
   * Smoothstep is useful when a threshold or cutoff is needed, but with a
   * gradual transition instead of a hard edge.
   * 
   * - Returns `0.0` when `x` is less than or equal to `edge0`
   * 
   * - Returns `1.0` when `x` is greater than or equal to `edge1`
   * 
   * - Smoothly interpolates between `0.0` and `1.0` when `x` is between them
   * @param edge0 Lower edge of the transition
   * @param edge1 Upper edge of the transition
   * @param x Input value to interpolate
   * @returns A value between `0.0` and `1.0`
   */
  smoothstep(edge0: number, edge1: number, x: number): number;

  /**
   * Declares a storage buffer uniform inside a <a href="#/p5.Shader/modify">modify()</a> callback,
   * making a <a href="#/p5/createStorage">createStorage()</a> buffer accessible in the shader.
   * 
   * Pass a `p5.StorageBuffer` (or a function returning one) as the second argument
   * to set it as the default value, applied automatically each frame. Pass a plain
   * object with the same field layout as the buffer's struct elements to declare the
   * schema without binding a specific buffer.
   * 
   * When called without a name, p5.strands automatically uses the name of the
   * variable it is assigned to as the uniform name.
   * 
   * Note: `uniformStorage` is only available when using p5.strands.
   * @param name The name of the storage buffer uniform in the shader.
   * @param bufferOrSchema A storage buffer to bind,
   * a function returning a storage buffer (called each frame), or a plain object
   * describing the struct field layout.
   * @returns A strands node representing the storage buffer.
   */
  uniformStorage(name: string, bufferOrSchema?: P5.StorageBuffer | Function | object): any;
  uniformStorage(bufferOrSchema?: P5.StorageBuffer | Function | object): any;

  getTexture(texture: any, coords: any): any;

  getWorldInputs(callback: Function): void;

  getPixelInputs(callback: Function): void;

  getFinalColor(callback: Function): void;

  getColor(callback: Function): void;

  getObjectInputs(callback: Function): void;

  getCameraInputs(callback: Function): void;

  /**
   * Performs linear interpolation between two values.
   * 
   * The `mix()` function linearly interpolates between two values based on a third
   * parameter. It's a GLSL built-in function available in p5.strands shaders.
   * 
   * The function computes: `x * (1 - a) + y * a`
   * 
   * When `a` is 0.0, the function returns `x`. When `a` is 1.0, it returns `y`.
   * Values between 0.0 and 1.0 produce a linear blend between the two values.
   * 
   * This function works with scalars, vectors (vec2, vec3, vec4), and can also
   * accept a boolean for the third parameter to select between the two values.
   * 
   * Note: This function is only available inside shader code created with
   * <a href="#/p5/buildMaterialShader">buildMaterialShader()</a>,
   * <a href="#/p5/buildColorShader">buildColorShader()</a>, or similar functions.
   * For regular p5.js code, use <a href="#/p5/lerp">lerp()</a> instead.
   * @param x first value to interpolate from.
   * @param y second value to interpolate to.
   * @param a interpolation amount (0.0-1.0) or boolean selector.
   * @returns interpolated value.
   */
  mix(x: number | P5.Vector, y: number | P5.Vector, a: number | boolean): number | P5.Vector;

  /**
   * Applies a transformation matrix to the coordinate system.
   * 
   * Transformations such as
   * <a href="#/p5/translate">translate()</a>,
   * <a href="#/p5/rotate">rotate()</a>, and
   * <a href="#/p5/scale">scale()</a>
   * use matrix-vector multiplication behind the scenes. A table of numbers,
   * called a matrix, encodes each transformation. The values in the matrix
   * then multiply each point on the canvas, which is represented by a vector.
   * 
   * `applyMatrix()` allows for many transformations to be applied at once. See
   * <a href="https://en.wikipedia.org/wiki/Transformation_matrix" target="_blank">Wikipedia</a>
   * and <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web" target="_blank">MDN</a>
   * for more details about transformations.
   * 
   * There are two ways to call `applyMatrix()` in two and three dimensions.
   * 
   * In 2D mode, the parameters `a`, `b`, `c`, `d`, `e`, and `f`, correspond to
   * elements in the following transformation matrix:
   * 
   * <img style="max-width: 150px" src="assets/transformation-matrix.png"
   * alt="The transformation matrix used when applyMatrix is called in 2D mode."/>
   * 
   * The numbers can be passed individually, as in
   * `applyMatrix(2, 0, 0, 0, 2, 0)`. They can also be passed in an array, as in
   * `applyMatrix([2, 0, 0, 0, 2, 0])`.
   * 
   * In 3D mode, the parameters `a`, `b`, `c`, `d`, `e`, `f`, `g`, `h`, `i`,
   * `j`, `k`, `l`, `m`, `n`, `o`, and `p` correspond to elements in the
   * following transformation matrix:
   * 
   * <img style="max-width: 300px" src="assets/transformation-matrix-4-4.png"
   * alt="The transformation matrix used when applyMatrix is called in 3D mode."/>
   * 
   * The numbers can be passed individually, as in
   * `applyMatrix(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)`. They can
   * also be passed in an array, as in
   * `applyMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1])`.
   * 
   * By default, transformations accumulate. The
   * <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions
   * can be used to isolate transformations within distinct drawing groups.
   * 
   * Note: Transformations are reset at the beginning of the draw loop. Calling
   * `applyMatrix()` inside the <a href="#/p5/draw">draw()</a> function won't
   * cause shapes to transform continuously.
   * @param arr an array containing the elements of the transformation matrix. Its length should be either 6 (2D) or 16 (3D).
   */
  applyMatrix(arr: number[]): void;
  applyMatrix(a: number, b: number, c: number, d: number, e: number, f: number): void;
  applyMatrix(a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number, p: number): void;

  /**
   * Converts a `Number` into a `String` with commas to mark units of 1,000.
   * 
   * `nfc()` converts numbers such as 12345 into strings formatted with commas
   * to mark the thousands place, as in `'12,345'`.
   * 
   * The first parameter, `num`, is the number to convert to a string. For
   * example, calling `nfc(12345)` returns the string `'12,345'`.
   * 
   * The second parameter, `right`, is optional. If a number is passed, as in
   * `nfc(12345, 1)`, it sets the minimum number of digits to include to the
   * right of the decimal place. If `right` is smaller than the number of
   * decimal places in `num`, then `num` will be rounded to the given number of
   * decimal places. For example, calling `nfc(12345.67, 1)` returns the string
   * `'12,345.7'`. If `right` is larger than the number of decimal places in
   * `num`, then unused decimal places will be set to 0. For example, calling
   * `nfc(12345.67, 3)` returns the string `'12,345.670'`.
   * @param num number to format.
   * @param right number of digits to include to the right
   * of the decimal point.
   * @returns formatted string.
   */
  nfc(num: number | string, right?: number | string): string;
  nfc(nums: number[], right?: number | string): string[];

  /**
   * Constrains a number between a minimum and maximum value.
   * @param n number to constrain.
   * @param low minimum limit.
   * @param high maximum limit.
   * @returns constrained number.
   */
  constrain(n: number, low: number, high: number): number;

  /**
   * Begins a drawing group that contains its own styles and transformations.
   * 
   * By default, styles such as <a href="#/p5/fill">fill()</a> and
   * transformations such as <a href="#/p5/rotate">rotate()</a> are applied to
   * all drawing that follows. The `push()` and <a href="#/p5/pop">pop()</a>
   * functions can limit the effect of styles and transformations to a specific
   * group of shapes, images, and text. For example, a group of shapes could be
   * translated to follow the mouse without affecting the rest of the sketch:
   * 
   * `// Begin the drawing group.
   * push();
   * 
   * // Translate the origin to the mouse's position.
   * translate(mouseX, mouseY);
   * 
   * // Style the face.
   * noStroke();
   * fill('green');
   * 
   * // Draw the face.
   * circle(0, 0, 60);
   * 
   * // Style the eyes.
   * fill('white');
   * 
   * // Draw the left eye.
   * ellipse(-20, -20, 30, 20);
   * 
   * // Draw the right eye.
   * ellipse(20, -20, 30, 20);
   * 
   * // End the drawing group.
   * pop();
   * 
   * // Draw a bug.
   * let x = random(0, 100);
   * let y = random(0, 100);
   * text('🦟', x, y);`In the code snippet above, the bug's position isn't affected by
   * `translate(mouseX, mouseY)` because that transformation is contained
   * between `push()` and <a href="#/p5/pop">pop()</a>. The bug moves around
   * the entire canvas as expected.
   * 
   * Note: `push()` and <a href="#/p5/pop">pop()</a> are always called as a
   * pair. Both functions are required to begin and end a drawing group.
   * 
   * `push()` and <a href="#/p5/pop">pop()</a> can also be nested to create
   * subgroups. For example, the code snippet above could be changed to give
   * more detail to the frog’s eyes:
   * 
   * `// Begin the drawing group.
   * push();
   * 
   * // Translate the origin to the mouse's position.
   * translate(mouseX, mouseY);
   * 
   * // Style the face.
   * noStroke();
   * fill('green');
   * 
   * // Draw a face.
   * circle(0, 0, 60);
   * 
   * // Style the eyes.
   * fill('white');
   * 
   * // Draw the left eye.
   * push();
   * translate(-20, -20);
   * ellipse(0, 0, 30, 20);
   * fill('black');
   * circle(0, 0, 8);
   * pop();
   * 
   * // Draw the right eye.
   * push();
   * translate(20, -20);
   * ellipse(0, 0, 30, 20);
   * fill('black');
   * circle(0, 0, 8);
   * pop();
   * 
   * // End the drawing group.
   * pop();
   * 
   * // Draw a bug.
   * let x = random(0, 100);
   * let y = random(0, 100);
   * text('🦟', x, y);`In this version, the code to draw each eye is contained between its own
   * `push()` and <a href="#/p5/pop">pop()</a> functions. Doing so makes it
   * easier to add details in the correct part of a drawing.
   * 
   * `push()` and <a href="#/p5/pop">pop()</a> contain the effects of the
   * following functions:
   * 
   * - <a href="#/p5/fill">fill()</a>
   * 
   * - <a href="#/p5/noFill">noFill()</a>
   * 
   * - <a href="#/p5/noStroke">noStroke()</a>
   * 
   * - <a href="#/p5/stroke">stroke()</a>
   * 
   * - <a href="#/p5/tint">tint()</a>
   * 
   * - <a href="#/p5/noTint">noTint()</a>
   * 
   * - <a href="#/p5/strokeWeight">strokeWeight()</a>
   * 
   * - <a href="#/p5/strokeCap">strokeCap()</a>
   * 
   * - <a href="#/p5/strokeJoin">strokeJoin()</a>
   * 
   * - <a href="#/p5/imageMode">imageMode()</a>
   * 
   * - <a href="#/p5/rectMode">rectMode()</a>
   * 
   * - <a href="#/p5/ellipseMode">ellipseMode()</a>
   * 
   * - <a href="#/p5/colorMode">colorMode()</a>
   * 
   * - <a href="#/p5/textAlign">textAlign()</a>
   * 
   * - <a href="#/p5/textFont">textFont()</a>
   * 
   * - <a href="#/p5/textSize">textSize()</a>
   * 
   * - <a href="#/p5/textLeading">textLeading()</a>
   * 
   * - <a href="#/p5/applyMatrix">applyMatrix()</a>
   * 
   * - <a href="#/p5/resetMatrix">resetMatrix()</a>
   * 
   * - <a href="#/p5/rotate">rotate()</a>
   * 
   * - <a href="#/p5/scale">scale()</a>
   * 
   * - <a href="#/p5/shearX">shearX()</a>
   * 
   * - <a href="#/p5/shearY">shearY()</a>
   * 
   * - <a href="#/p5/translate">translate()</a>
   * 
   * In WebGL mode, `push()` and <a href="#/p5/pop">pop()</a> contain the
   * effects of a few additional styles:
   * 
   * - <a href="#/p5/setCamera">setCamera()</a>
   * 
   * - <a href="#/p5/ambientLight">ambientLight()</a>
   * 
   * - <a href="#/p5/directionalLight">directionalLight()</a>
   * 
   * - <a href="#/p5/pointLight">pointLight()</a> <a href="#/p5/texture">texture()</a>
   * 
   * - <a href="#/p5/specularMaterial">specularMaterial()</a>
   * 
   * - <a href="#/p5/shininess">shininess()</a>
   * 
   * - <a href="#/p5/normalMaterial">normalMaterial()</a>
   * 
   * - <a href="#/p5/shader">shader()</a>
   */
  push(): void;

  /**
   * Creates a screen reader-accessible description of elements in the canvas.
   * 
   * Elements are shapes or groups of shapes that create meaning together. For
   * example, a few overlapping circles could make an "eye" element.
   * 
   * The first parameter, `name`, is the name of the element.
   * 
   * The second parameter, `text`, is the description of the element.
   * 
   * The third parameter, `display`, is optional. It determines how the
   * description is displayed. If `LABEL` is passed, as in
   * `describe('A description.', LABEL)`, the description will be visible in
   * a div element next to the canvas. Using `LABEL` creates unhelpful
   * duplicates for screen readers. Only use `LABEL` during development. If
   * `FALLBACK` is passed, as in `describe('A description.', FALLBACK)`, the
   * description will only be visible to screen readers. This is the default
   * mode.
   * 
   * Read
   * <a href="/learn/accessible-labels.html">Writing accessible canvas descriptions</a>
   * to learn more about making sketches accessible.
   * @param name name of the element.
   * @param text description of the element.
   * @param display either LABEL or FALLBACK.
   */
  describeElement(name: string, text: string, display?: typeof P5.FALLBACK | typeof P5.LABEL): void;

  /**
   * Returns the number of milliseconds since a sketch started running.
   * 
   * `millis()` keeps track of how long a sketch has been running in
   * milliseconds (thousandths of a second). This information is often
   * helpful for timing events and animations.
   * 
   * If a sketch has a
   * <a href="#/p5/setup">setup()</a> function, then `millis()` begins tracking
   * time before the code in <a href="#/p5/setup">setup()</a> runs.  If a
   * sketch includes asynchronous loading using `async`/`await`, then
   * `millis()` begins tracking time as soon as the asynchronous code
   * starts running.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Get the number of milliseconds the sketch has run.
   * let ms = millis();
   * 
   * // Style the text.
   * textAlign(LEFT, CENTER);
   * textSize(10);
   * textFont('Courier New');
   * 
   * // Display how long it took setup() to be called.
   * text(`Startup time: ${round(ms, 2)} ms`, 5, 50, 90);
   * 
   * describe(
   * `The text 'Startup time: ${round(ms, 2)} ms' written in black on a gray background.`
   * );
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * describe('The text "Running time: S sec" written in black on a gray background. The number S increases as the sketch runs.');
   * }
   * 
   * function draw() {
   * background(200);
   * 
   * // Get the number of seconds the sketch has run.
   * let s = millis() / 1000;
   * 
   * // Style the text.
   * textAlign(LEFT, CENTER);
   * textSize(10);
   * textFont('Courier New');
   * 
   * // Display how long the sketch has run.
   * text(`Running time: ${nf(s, 1, 1)} sec`, 5, 50, 90);
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * describe('A white circle oscillates left and right on a gray background.');
   * }
   * 
   * function draw() {
   * background(200);
   * 
   * // Get the number of seconds the sketch has run.
   * let s = millis() / 1000;
   * 
   * // Calculate an x-coordinate.
   * let x = 30 * sin(s) + 50;
   * 
   * // Draw the circle.
   * circle(x, 50, 30);
   * }``async function setup() {
   * // Load the GeoJSON.
   * await loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Get the number of milliseconds the sketch has run.
   * let ms = millis();
   * 
   * // Style the text.
   * textAlign(LEFT, CENTER);
   * textFont('Courier New');
   * textSize(11);
   * 
   * // Display how long it took to load the data.
   * text(`It took ${round(ms, 2)} ms to load the data`, 5, 50, 100);
   * 
   * describe(
   * `The text "It took ${round(ms, 2)} ms to load the data" written in black on a gray background.`
   * );
   * }``millis()` can also be used in shaders with p5.strands. The following example
   * uses `millis()` to create time-based color transitions on a shape.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere whose color shifts over time.');
   * }
   * 
   * function shaderCallback() {
   * let t = millis() * 0.001;
   * let value = 0.5 + 0.5 * sin(t);
   * let skyBlue = [0.2, 0.6, 0.8, 1];
   * let magenta = [0.8, 0.2, 0.6, 1];
   * finalColor.begin();
   * finalColor.set(mix(skyBlue, magenta, value));
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @returns number of milliseconds since starting the sketch.
   */
  millis(): number;

  /**
   * Returns `true` if the draw loop is running and `false` if not.
   * 
   * By default, <a href="#/p5/draw">draw()</a> tries to run 60 times per
   * second. Calling <a href="#/p5/noLoop">noLoop()</a> stops
   * <a href="#/p5/draw">draw()</a> from repeating. The draw loop can be
   * restarted by calling <a href="#/p5/loop">loop()</a>.
   * 
   * The `isLooping()` function can be used to check whether a sketch is
   * looping, as in `isLooping() === true`.
   */
  isLooping(): boolean;

  /**
   * Creates a screen reader-accessible description of shapes on the canvas.
   * 
   * `gridOutput()` adds a general description, table of shapes, and list of
   * shapes to the web page. The general description includes the canvas size,
   * canvas color, and number of shapes. For example,
   * `gray canvas, 100 by 100 pixels, contains 2 shapes:  1 circle 1 square`.
   * 
   * `gridOutput()` uses its table of shapes as a grid. Each shape in the grid
   * is placed in a cell whose row and column correspond to the shape's location
   * on the canvas. The grid cells describe the color and type of shape at that
   * location. For example, `red circle`. These descriptions can be selected
   * individually to get more details. This is different from
   * <a href="#/p5/textOutput">textOutput()</a>, which uses its table as a list.
   * 
   * A list of shapes follows the table. The list describes the color, type,
   * location, and area of each shape. For example,
   * `red circle, location = middle, area = 3 %`.
   * 
   * The `display` parameter is optional. It determines how the description is
   * displayed. If `LABEL` is passed, as in `gridOutput(LABEL)`, the description
   * will be visible in a div element next to the canvas. Using `LABEL` creates
   * unhelpful duplicates for screen readers. Only use `LABEL` during
   * development. If `FALLBACK` is passed, as in `gridOutput(FALLBACK)`, the
   * description will only be visible to screen readers. This is the default
   * mode.
   * 
   * Read
   * <a href="/learn/accessible-labels.html">Writing accessible canvas descriptions</a>
   * to learn more about making sketches accessible.
   * @param display either FALLBACK or LABEL.
   */
  gridOutput(display?: typeof P5.FALLBACK | typeof P5.LABEL): void;

  /**
   * Resizes the canvas to a given width and height.
   * 
   * `resizeCanvas()` immediately clears the canvas and calls
   * <a href="#/p5/redraw">redraw()</a>. It's common to call `resizeCanvas()`
   * within the body of <a href="#/p5/windowResized">windowResized()</a> like
   * so:
   * 
   * `function windowResized() {
   * resizeCanvas(windowWidth, windowHeight);
   * }`The first two parameters, `width` and `height`, set the dimensions of the
   * canvas. They also the values of the <a href="#/p5/width">width</a> and
   * <a href="#/p5/height">height</a> system variables. For example, calling
   * `resizeCanvas(300, 500)` resizes the canvas to 300×500 pixels, then sets
   * <a href="#/p5/width">width</a> to 300 and
   * <a href="#/p5/height">height</a> 500.
   * 
   * The third parameter, `noRedraw`, is optional. If `true` is passed, as in
   * `resizeCanvas(300, 500, true)`, then the canvas will be canvas to 300×500
   * pixels but the <a href="#/p5/redraw">redraw()</a> function won't be called
   * immediately. By default, <a href="#/p5/redraw">redraw()</a> is called
   * immediately when `resizeCanvas()` finishes executing.
   * @param width width of the canvas.
   * @param height height of the canvas.
   * @param noRedraw whether to delay calling
   * <a href="#/p5/redraw">redraw()</a>. Defaults
   * to `false`.
   */
  resizeCanvas(width: number, height: number, noRedraw?: boolean): void;

  /**
   * Generates a gif from a sketch and saves it to a file.
   * 
   * `saveGif()` may be called in <a href="#/p5/setup">setup()</a> or at any
   * point while a sketch is running.
   * 
   * The first parameter, `fileName`, sets the gif's file name.
   * 
   * The second parameter, `duration`, sets the gif's duration in seconds.
   * 
   * The third parameter, `options`, is optional. If an object is passed,
   * `saveGif()` will use its properties to customize the gif. `saveGif()`
   * recognizes the properties `delay`, `units`, `silent`,
   * `notificationDuration`, and `notificationID`.
   * @param filename file name of gif.
   * @param duration duration in seconds to capture from the sketch.
   * @param options an object that can contain five more properties:
   */
  saveGif(filename: string, duration: number, options?: { delay?: number; units?: 'seconds' | 'frames'; silent?: boolean; notificationDuration?: number; notificationID?: string }): void;

  /**
   * Saves the current canvas as an image.
   * 
   * By default, `saveCanvas()` saves the canvas as a PNG image called
   * `untitled.png`.
   * 
   * The first parameter, `filename`, is optional. It's a string that sets the
   * file's name. If a file extension is included, as in
   * `saveCanvas('drawing.png')`, then the image will be saved using that
   * format.
   * 
   * The second parameter, `extension`, is also optional. It sets the files format.
   * Either `'png'`, `'webp'`, or `'jpg'` can be used. For example, `saveCanvas('drawing', 'jpg')`
   * saves the canvas to a file called `drawing.jpg`.
   * 
   * Note: The browser will either save the file immediately or prompt the user
   * with a dialogue window.
   * @param selectedCanvas reference to a
   * specific HTML5 canvas element.
   * @param filename file name. Defaults to 'untitled'.
   * @param extension file extension, either 'png', 'webp', or 'jpg'. Defaults to 'png'.
   */
  saveCanvas(selectedCanvas: P5.Framebuffer | P5.Element | HTMLCanvasElement, filename?: string, extension?: string): void;
  saveCanvas(filename?: string, extension?: string): void;

  /**
   * Clears all transformations applied to the coordinate system.
   */
  resetMatrix(): void;

  /**
   * Returns a value in the web browser's local storage.
   * 
   * Web browsers can save small amounts of data using the built-in
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">localStorage object</a>.
   * Data stored in `localStorage` can be retrieved at any point, even after
   * refreshing a page or restarting the browser. Data are stored as key-value
   * pairs.
   * 
   * <a href="#/p5/storeItem">storeItem()</a> makes it easy to store values in
   * `localStorage` and `getItem()` makes it easy to retrieve them.
   * 
   * The first parameter, `key`, is the name of the value to be stored as a
   * string.
   * 
   * The second parameter, `value`, is the value to be retrieved a string. For
   * example, calling `getItem('size')` retrieves the value with the key `size`.
   * 
   * Note: Sensitive data such as passwords or personal information shouldn't be
   * stored in `localStorage`.
   * @param key name of the value.
   * @returns stored item.
   */
  getItem(key: string): string | number | boolean | object | any[];

  /**
   * Returns random numbers that can be tuned to feel organic.
   * 
   * Values returned by <a href="#/p5/random">random()</a> and
   * <a href="#/p5/randomGaussian">randomGaussian()</a> can change by large
   * amounts between function calls. By contrast, values returned by `noise()`
   * can be made "smooth". Calls to `noise()` with similar inputs will produce
   * similar outputs. `noise()` is used to create textures, motion, shapes,
   * terrains, and so on. Ken Perlin invented `noise()` while animating the
   * original <em>Tron</em> film in the 1980s.
   * 
   * `noise()` always returns values between 0 and 1. It returns the same value
   * for a given input while a sketch is running. `noise()` produces different
   * results each time a sketch runs. The
   * <a href="#/p5/noiseSeed">noiseSeed()</a> function can be used to generate
   * the same sequence of Perlin noise values each time a sketch runs.
   * 
   * The character of the noise can be adjusted in two ways. The first way is to
   * scale the inputs. `noise()` interprets inputs as coordinates. The sequence
   * of noise values will be smoother when the input coordinates are closer. The
   * second way is to use the <a href="#/p5/noiseDetail">noiseDetail()</a>
   * function.
   * 
   * The version of `noise()` with one parameter computes noise values in one
   * dimension. This dimension can be thought of as space, as in `noise(x)`, or
   * time, as in `noise(t)`.
   * 
   * The version of `noise()` with two parameters computes noise values in two
   * dimensions. These dimensions can be thought of as space, as in
   * `noise(x, y)`, or space and time, as in `noise(x, t)`.
   * 
   * The version of `noise()` with three parameters computes noise values in
   * three dimensions. These dimensions can be thought of as space, as in
   * `noise(x, y, z)`, or space and time, as in `noise(x, y, t)`.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * describe('A black dot moves randomly on a gray square.');
   * }
   * 
   * function draw() {
   * background(200);
   * 
   * // Calculate the coordinates.
   * let x = 100 * noise(0.005 * frameCount);
   * let y = 100 * noise(0.005 * frameCount + 10000);
   * 
   * // Draw the point.
   * strokeWeight(5);
   * point(x, y);
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * describe('A black dot moves randomly on a gray square.');
   * }
   * 
   * function draw() {
   * background(200);
   * 
   * // Set the noise level and scale.
   * let noiseLevel = 100;
   * let noiseScale = 0.005;
   * 
   * // Scale the input coordinate.
   * let nt = noiseScale * frameCount;
   * 
   * // Compute the noise values.
   * let x = noiseLevel * noise(nt);
   * let y = noiseLevel * noise(nt + 10000);
   * 
   * // Draw the point.
   * strokeWeight(5);
   * point(x, y);
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * describe('A hilly terrain drawn in gray against a black sky.');
   * }
   * 
   * function draw() {
   * // Set the noise level and scale.
   * let noiseLevel = 100;
   * let noiseScale = 0.02;
   * 
   * // Scale the input coordinate.
   * let x = frameCount;
   * let nx = noiseScale * x;
   * 
   * // Compute the noise value.
   * let y = noiseLevel * noise(nx);
   * 
   * // Draw the line.
   * line(x, 0, x, y);
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * describe('A calm sea drawn in gray against a black sky.');
   * }
   * 
   * function draw() {
   * background(200);
   * 
   * // Set the noise level and scale.
   * let noiseLevel = 100;
   * let noiseScale = 0.002;
   * 
   * // Iterate from left to right.
   * for (let x = 0; x < 100; x += 1) {
   * // Scale the input coordinates.
   * let nx = noiseScale * x;
   * let nt = noiseScale * frameCount;
   * 
   * // Compute the noise value.
   * let y = noiseLevel * noise(nx, nt);
   * 
   * // Draw the line.
   * line(x, 0, x, y);
   * }
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Set the noise level and scale.
   * let noiseLevel = 255;
   * let noiseScale = 0.01;
   * 
   * // Iterate from top to bottom.
   * for (let y = 0; y < 100; y += 1) {
   * // Iterate from left to right.
   * for (let x = 0; x < 100; x += 1) {
   * // Scale the input coordinates.
   * let nx = noiseScale * x;
   * let ny = noiseScale * y;
   * 
   * // Compute the noise value.
   * let c = noiseLevel * noise(nx, ny);
   * 
   * // Draw the point.
   * stroke(c);
   * point(x, y);
   * }
   * }
   * 
   * describe('A gray cloudy pattern.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * describe('A gray cloudy pattern that changes.');
   * }
   * 
   * function draw() {
   * // Set the noise level and scale.
   * let noiseLevel = 255;
   * let noiseScale = 0.009;
   * 
   * // Iterate from top to bottom.
   * for (let y = 0; y < 100; y += 1) {
   * // Iterate from left to right.
   * for (let x = 0; x < width; x += 1) {
   * // Scale the input coordinates.
   * let nx = noiseScale * x;
   * let ny = noiseScale * y;
   * let nt = noiseScale * frameCount;
   * 
   * // Compute the noise value.
   * let c = noiseLevel * noise(nx, ny, nt);
   * 
   * // Draw the point.
   * stroke(c);
   * point(x, y);
   * }
   * }
   * }``noise()` can also be used in shaders with p5.strands, where it returns
   * values in the range 0 to 1. The example below uses `noise()` inside a
   * filter shader to create a cloud-like texture effect:
   * 
   * `let myFilter;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myFilter = buildFilterShader(shaderCallback);
   * describe('A cloud-like noise pattern.');
   * }
   * 
   * function shaderCallback() {
   * filterColor.begin();
   * let coord = filterColor.texCoord;
   * let t = millis() / 2000;
   * // noise() returns values in the range 0 to 1.
   * let mixFraction = noise(coord.x * 5, coord.y * 5, t);
   * let darkBlue = [0.1, 0.1, 0.3, 1];
   * let lightBlue = [0.9, 0.9, 1, 1];
   * filterColor.set(mix(darkBlue, lightBlue, mixFraction));
   * filterColor.end();
   * }
   * 
   * function draw() {
   * filter(myFilter);
   * }`
   * @param x x-coordinate in noise space.
   * @param y y-coordinate in noise space.
   * @param z z-coordinate in noise space.
   * @returns Perlin noise value at specified coordinates.
   */
  noise(x: number, y?: number, z?: number): number;

  /**
   * Changes where rectangles and squares are drawn.
   * 
   * By default, the first two parameters of
   * <a href="#/p5/rect">rect()</a> and <a href="#/p5/square">square()</a>,
   * are the x- and y-coordinates of the shape's upper left corner. The next parameters set
   * the shape's width and height. This is the same as calling
   * `rectMode(CORNER)`.
   * 
   * `rectMode(CORNERS)` also uses the first two parameters as the location of
   * one of the corners. The next parameters are the location of the opposite
   * corner. This mode only works for <a href="#/p5/rect">rect()</a>.
   * 
   * `rectMode(CENTER)` uses the first two parameters as the x- and
   * y-coordinates of the shape's center. The next parameters are its width and
   * height.
   * 
   * `rectMode(RADIUS)` also uses the first two parameters as the x- and
   * y-coordinates of the shape's center. The next parameters are
   * half of the shape's width and height.
   * 
   * The argument passed to `rectMode()` must be written in ALL CAPS because the
   * constants `CENTER`, `RADIUS`, `CORNER`, and `CORNERS` are defined this way.
   * JavaScript is a case-sensitive language.
   * 
   * Calling `rectMode()` without an argument returns the current rectMode, either `CORNER`, `CORNERS`, `CENTER`, or `RADIUS`.
   * @param mode either CORNER, CORNERS, CENTER, or RADIUS
   * @returns the current rectMode.
   */
  rectMode(mode: typeof P5.CENTER | typeof P5.RADIUS | typeof P5.CORNER | typeof P5.CORNERS): typeof P5.CENTER | typeof P5.RADIUS | typeof P5.CORNER | typeof P5.CORNERS;
  rectMode(): typeof P5.CENTER | typeof P5.RADIUS | typeof P5.CORNER | typeof P5.CORNERS;

  /**
   * Returns the current month as a number from 1–12.
   * @returns current month between 1 and 12.
   */
  month(): number;

  /**
   * Returns a random number or a random element from an array.
   * 
   * `random()` follows uniform distribution, which means that all outcomes are
   * equally likely. When `random()` is used to generate numbers, all
   * numbers in the output range are equally likely to be returned. When
   * `random()` is used to select elements from an array, all elements are
   * equally likely to be chosen.
   * 
   * By default, `random()` produces different results each time a sketch runs.
   * The <a href="#/p5/randomSeed">randomSeed()</a> function can be used to
   * generate the same sequence of numbers or choices each time a sketch runs.
   * 
   * The version of `random()` with no parameters returns a random number from 0
   * up to but not including 1.
   * 
   * The version of `random()` with one parameter works one of two ways. If the
   * argument passed is a number, `random()` returns a random number from 0 up
   * to but not including the number. For example, calling `random(5)` returns
   * values between 0 and 5. If the argument passed is an array, `random()`
   * returns a random element from that array. For example, calling
   * `random(['🦁', '🐯', '🐻'])` returns either a lion, tiger, or bear emoji.
   * 
   * The version of `random()` with two parameters returns a random number from
   * a given range. The arguments passed set the range's lower and upper bounds.
   * For example, calling `random(-5, 10.2)` returns values from -5 up to but
   * not including 10.2.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Get random coordinates between 0 and 100.
   * let x = random(0, 100);
   * let y = random(0, 100);
   * 
   * // Draw a point.
   * strokeWeight(5);
   * point(x, y);
   * 
   * describe('A black dot appears in a random position on a gray square.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Get random coordinates between 0 and 100.
   * let x = random(100);
   * let y = random(100);
   * 
   * // Draw the point.
   * strokeWeight(5);
   * point(x, y);
   * 
   * describe('A black dot appears in a random position on a gray square.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create an array of emoji strings.
   * let animals = ['🦁', '🐯', '🐻'];
   * 
   * // Choose a random element from the array.
   * let choice = random(animals);
   * 
   * // Style the text.
   * textAlign(CENTER);
   * textSize(20);
   * 
   * // Display the emoji.
   * text(choice, 50, 50);
   * 
   * describe('An animal face is displayed at random. Either a lion, tiger, or bear.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * // Slow the frame rate.
   * frameRate(5);
   * 
   * describe('A black dot moves around randomly on a gray square.');
   * }
   * 
   * function draw() {
   * background(200);
   * 
   * // Get random coordinates between 0 and 100.
   * let x = random(100);
   * let y = random(100);
   * 
   * // Draw the point.
   * strokeWeight(5);
   * point(x, y);
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * // Slow the frame rate.
   * frameRate(5);
   * 
   * describe('A black dot moves around randomly in the middle of a gray square.');
   * }
   * 
   * function draw() {
   * background(200);
   * 
   * // Get random coordinates between 45 and 55.
   * let x = random(45, 55);
   * let y = random(45, 55);
   * 
   * // Draw the point.
   * strokeWeight(5);
   * point(x, y);
   * }``let x = 50;
   * let y = 50;
   * 
   * function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * describe('A black dot moves around randomly leaving a trail.');
   * }
   * 
   * function draw() {
   * // Update x and y randomly.
   * x += random(-1, 1);
   * y += random(-1, 1);
   * 
   * // Draw the point.
   * point(x, y);
   * }``random()` can also be used in shaders with p5.strands. The following example
   * uses `random()` to create varying colors on a shape.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere with randomly varying colors.');
   * }
   * 
   * function shaderCallback() {
   * let r = random();
   * let g = random();
   * let b = random();
   * finalColor.begin();
   * finalColor.set([r, g, b, 1]);
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param min lower bound (inclusive).
   * @param max upper bound (exclusive).
   * @returns random number.
   */
  random(min?: number, max?: number): number;
  random<T>(choices: readonly T[]): T;

  /**
   * Loads a JSON file to create an `Object`.
   * 
   * 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, `path`, is a string with the path to the file.
   * Paths to local files should be relative, as in
   * `loadJSON('assets/data.json')`. URLs such as
   * `'https://example.com/data.json'` may be blocked due to browser security.
   * The `path` parameter can also be defined as a `Request`
   * object for more advanced usage.
   * 
   * The second parameter, `successCallback`, is optional. If a function is
   * passed, as in `loadJSON('assets/data.json', handleData)`, then the
   * `handleData()` function will be called once the data loads. The object
   * created from the JSON data will be passed to `handleData()` as its only argument.
   * The return value of the `handleData()` function will be used as the final return
   * value of `loadJSON('assets/data.json', handleData)`.
   * 
   * The third parameter, `failureCallback`, is also optional. If a function is
   * passed, as in `loadJSON('assets/data.json', handleData, handleFailure)`,
   * then the `handleFailure()` function will be called if an error occurs while
   * loading. The `Error` object will be passed to `handleFailure()` as its only
   * argument. The return value of the `handleFailure()` function will be used as the
   * final return value of `loadJSON('assets/data.json', handleData, handleFailure)`.
   * 
   * This function returns a `Promise` and should be used in an `async` setup with
   * `await`. See the examples for the usage syntax.
   * @param path path of the JSON file to be loaded.
   * @param successCallback function to call once the data is loaded. Will be passed the object.
   * @param errorCallback function to call if the data fails to load. Will be passed an `Error` event object.
   * @returns object containing the loaded data.
   */
  loadJSON(path: string | Request, successCallback?: Function, errorCallback?: Function): Promise<object>;

  /**
   * Draws an arc.
   * 
   * An arc is a section of an ellipse defined by the `x`, `y`, `w`, and
   * `h` parameters. `x` and `y` set the location of the arc's center. `w` and
   * `h` set the arc's width and height. See
   * <a href="#/p5/ellipse">ellipse()</a> and
   * <a href="#/p5/ellipseMode">ellipseMode()</a> for more details.
   * 
   * The fifth and sixth parameters, `start` and `stop`, set the angles
   * between which to draw the arc. Arcs are always drawn clockwise from
   * `start` to `stop`. Angles are always given in radians.
   * 
   * The seventh parameter, `mode`, is optional. It determines the arc's fill
   * style. The fill modes are a semi-circle (`OPEN`), a closed semi-circle
   * (`CHORD`), or a closed pie segment (`PIE`).
   * 
   * The eighth parameter, `detail`, is also optional. It determines how many
   * vertices are used to draw the arc in WebGL mode. The default value is 25.
   * @param x x-coordinate of the arc's ellipse.
   * @param y y-coordinate of the arc's ellipse.
   * @param w width of the arc's ellipse by default.
   * @param h height of the arc's ellipse by default.
   * @param start angle to start the arc, specified in radians.
   * @param stop angle to stop the arc, specified in radians.
   * @param mode optional parameter to determine the way of drawing
   * the arc. either CHORD, PIE, or OPEN.
   * @param detail optional parameter for WebGL mode only. This is to
   * specify the number of vertices that makes up the
   * perimeter of the arc. Default value is 25. Won't
   * draw a stroke for a detail of more than 50.
   */
  arc(x: number, y: number, w: number, h: number, start: number, stop: number, mode?: typeof P5.CHORD | typeof P5.PIE | typeof P5.OPEN, detail?: number): void;

  /**
   * Removes the default canvas.
   * 
   * By default, a 100×100 pixels canvas is created without needing to call
   * <a href="#/p5/createCanvas">createCanvas()</a>. `noCanvas()` removes the
   * default canvas for sketches that don't need it.
   */
  noCanvas(): void;

  /**
   * Creates a new <a href="#/p5.Element">p5.Element</a> object.
   * 
   * The first parameter, `tag`, is a string an HTML tag such as `'h5'`.
   * 
   * The second parameter, `content`, is optional. It's a string that sets the
   * HTML content to insert into the new element. New elements have no content
   * by default.
   * @param tag tag for the new element.
   * @param content HTML content to insert into the element.
   * @returns new <a href="#/p5.Element">p5.Element</a> object.
   */
  createElement(tag: string, content?: string): P5.Element;

  /**
   * Calculates the arc sine of a number.
   * 
   * `asin()` is the inverse of <a href="#/p5/sin">sin()</a>. It expects input
   * values in the range of -1 to 1. By default, `asin()` returns values in the
   * range -π ÷ 2 (about -1.57) to π ÷ 2 (about 1.57). If
   * the <a href="#/p5/angleMode">angleMode()</a> is `DEGREES` then values are
   * returned in the range -90 to 90.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Calculate sin() and asin() values.
   * let a = PI / 3;
   * let s = sin(a);
   * let as = asin(s);
   * 
   * // Display the values.
   * text(`${round(a, 3)}`, 35, 25);
   * text(`${round(s, 3)}`, 35, 50);
   * text(`${round(as, 3)}`, 35, 75);
   * 
   * describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Calculate sin() and asin() values.
   * let a = PI + PI / 3;
   * let s = sin(a);
   * let as = asin(s);
   * 
   * // Display the values.
   * text(`${round(a, 3)}`, 35, 25);
   * text(`${round(s, 3)}`, 35, 50);
   * text(`${round(as, 3)}`, 35, 75);
   * 
   * describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');
   * }``asin()` can also be used in shaders with p5.strands. The following example
   * uses `asin()` to create a smooth color transition on a shape.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere that smoothly shifts between green and purple.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
   * let t = millis() * 0.001;
   * 
   * // asin(sin(t)) returns a value between -PI/2 and PI/2.
   * // Dividing by PI/2 normalizes to -1 to 1, then adding 1 and multiplying by 0.5
   * // remaps to the 0 to 1 range.
   * let value = (asin(sin(t)) / (PI / 2) + 1) * 0.5;
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let green = [0, 1, 0.5, 1];
   * let purple = [0.5, 0, 1, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between green (when value = 0) and purple (when value = 1).
   * finalColor.set(mix(green, purple, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param value value whose arc sine is to be returned.
   * @returns arc sine of the given value.
   */
  asin(value: number): number;

  /**
   * Calculates the distance between two points.
   * 
   * The version of `dist()` with four parameters calculates distance in two
   * dimensions.
   * 
   * The version of `dist()` with six parameters calculates distance in three
   * dimensions.
   * 
   * Use <a href="#/p5.Vector/dist">p5.Vector.dist()</a> to calculate the
   * distance between two <a href="#/p5.Vector">p5.Vector</a> objects.
   * @param x1 x-coordinate of the first point.
   * @param y1 y-coordinate of the first point.
   * @param x2 x-coordinate of the second point.
   * @param y2 y-coordinate of the second point.
   * @returns distance between the two points.
   */
  dist(x1: number, y1: number, x2: number, y2: number): number;
  dist(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number): number;

  /**
   * Changes the cursor's appearance.
   * 
   * The first parameter, `type`, sets the type of cursor to display. The
   * built-in options are `ARROW`, `CROSS`, `HAND`, `MOVE`, `TEXT`, and `WAIT`.
   * `cursor()` also recognizes standard CSS cursor properties passed as
   * strings: `'help'`, `'wait'`, `'crosshair'`, `'not-allowed'`, `'zoom-in'`,
   * and `'grab'`. If the path to an image is passed, as in
   * `cursor('assets/target.png')`, then the image will be used as the cursor.
   * Images must be in .cur, .gif, .jpg, .jpeg, or .png format and should be <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#icon_size_limits">at most 32 by 32 pixels large.</a>
   * 
   * The parameters `x` and `y` are optional. If an image is used for the
   * cursor, `x` and `y` set the location pointed to within the image. They are
   * both 0 by default, so the cursor points to the image's top-left corner. `x`
   * and `y` must be less than the image's width and height, respectively.
   * 
   * Calling `cursor()` without an argument returns the current cursor type as a string.
   * @param type Built-in: either ARROW, CROSS, HAND, MOVE, TEXT, or WAIT.
   * Native CSS properties: 'grab', 'progress', and so on.
   * Path to cursor image.
   * @param x horizontal active spot of the cursor.
   * @param y vertical active spot of the cursor.
   * @returns the current cursor type
   */
  cursor(type: typeof P5.ARROW | typeof P5.CROSS | typeof P5.HAND | typeof P5.MOVE | typeof P5.TEXT | typeof P5.WAIT | string, x?: number, y?: number): typeof P5.ARROW | typeof P5.CROSS | typeof P5.HAND | typeof P5.MOVE | typeof P5.TEXT | typeof P5.WAIT | string;
  cursor(): typeof P5.ARROW | typeof P5.CROSS | typeof P5.HAND | typeof P5.MOVE | typeof P5.TEXT | typeof P5.WAIT | string;

  /**
   * Converts a `Boolean` or `Number` to `String`.
   * 
   * `str()` converts values to strings. See the
   * <a href="#/p5/String">String</a> reference page for guidance on using
   * template literals instead.
   * 
   * The parameter, `n`, is the value to convert. If `n` is a Boolean, as in
   * `str(false)` or `str(true)`, then the value will be returned as a string,
   * as in `'false'` or `'true'`. If `n` is a number, as in `str(123)`, then its
   * value will be returned as a string, as in `'123'`. If an array is passed,
   * as in `str([12.34, 56.78])`, then an array of strings will be returned.
   * @param n value to convert.
   * @returns converted string.
   */
  str(n: string | boolean | number): string;

  /**
   * Returns the current second as a number from 0–59.
   * @returns current second between 0 and 59.
   */
  second(): number;

  /**
   * Creates a custom <a href="#/p5.Geometry">p5.Geometry</a> object from
   * simpler 3D shapes.
   * 
   * `buildGeometry()` helps with creating complex 3D shapes from simpler ones
   * such as <a href="#/p5/sphere">sphere()</a>. It can help to make sketches
   * more performant. For example, if a complex 3D shape doesn’t change while a
   * sketch runs, then it can be created with `buildGeometry()`. Creating a
   * <a href="#/p5.Geometry">p5.Geometry</a> object once and then drawing it
   * will run faster than repeatedly drawing the individual pieces.
   * 
   * The parameter, `callback`, is a function with the drawing instructions for
   * the new <a href="#/p5.Geometry">p5.Geometry</a> object. It will be called
   * once to create the new 3D shape.
   * Note: `buildGeometry()` can only be used in WebGL mode.
   * @param callback function that draws the shape.
   * @returns new 3D shape.
   */
  buildGeometry(callback: Function): P5.Geometry;

  /**
   * Converts a `Boolean`, `String`, or `Number` to its byte value.
   * 
   * `byte()` converts a value to an integer (whole number) between -128 and
   * 127. Values greater than 127 wrap around while negative values are
   * unchanged. For example, 128 becomes -128 and -129 remains the same.
   * 
   * The parameter, `n`, is the value to convert. If `n` is a Boolean, as in
   * `byte(false)` or `byte(true)`, the number 0 (`false`) or 1 (`true`) will be
   * returned. If `n` is a string or number, as in `byte('256')` or `byte(256)`,
   * then the byte value will be returned. Decimal values are ignored. If an
   * array is passed, as in `byte([true, 123, '456'])`, then an array of byte
   * values will be returned.
   * 
   * Note: If a value can't be converted to a number, as in `byte('giraffe')`,
   * then the value `NaN` (not a number) will be returned.
   * @param n value to convert.
   * @returns converted byte value.
   */
  byte(n: string | boolean | number): number;
  byte(ns: any[]): number[];

  /**
   * Calculates coordinates along a Bézier curve using interpolation.
   * 
   * `bezierPoint()` calculates coordinates along a Bézier curve using the
   * anchor and control points. It expects points in the same order as the
   * <a href="#/p5/bezier">bezier()</a> function. `bezierPoint()` works one axis
   * at a time. Passing the anchor and control points' x-coordinates will
   * calculate the x-coordinate of a point on the curve. Passing the anchor and
   * control points' y-coordinates will calculate the y-coordinate of a point on
   * the curve.
   * 
   * The first parameter, `a`, is the coordinate of the first anchor point.
   * 
   * The second and third parameters, `b` and `c`, are the coordinates of the
   * control points.
   * 
   * The fourth parameter, `d`, is the coordinate of the last anchor point.
   * 
   * The fifth parameter, `t`, is the amount to interpolate along the curve. 0
   * is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
   * between them.
   * @param a coordinate of first anchor point.
   * @param b coordinate of first control point.
   * @param c coordinate of second control point.
   * @param d coordinate of second anchor point.
   * @param t amount to interpolate between 0 and 1.
   * @returns coordinate of the point on the curve.
   */
  bezierPoint(a: number, b: number, c: number, d: number, t: number): number;

  /**
   * Sets the color of a pixel or draws an image to the canvas.
   * 
   * `set()` is easy to use but it's not as fast as
   * <a href="#/p5/pixels">pixels</a>. Use <a href="#/p5/pixels">pixels</a>
   * to set many pixel values.
   * 
   * `set()` interprets the first two parameters as x- and y-coordinates. It
   * interprets the last parameter as a grayscale value, a `[R, G, B, A]` pixel
   * array, a <a href="#/p5.Color">p5.Color</a> object, or a
   * <a href="#/p5.Image">p5.Image</a> object. If an image is passed, the first
   * two parameters set the coordinates for the image's upper-left corner,
   * regardless of the current <a href="#/p5/imageMode">imageMode()</a>.
   * 
   * <a href="#/p5/updatePixels">updatePixels()</a> must be called after using
   * `set()` for changes to appear.
   * @param x x-coordinate of the pixel.
   * @param y y-coordinate of the pixel.
   * @param c grayscale value | pixel array |
   * <a href="#/p5.Color">p5.Color</a> object | <a href="#/p5.Image">p5.Image</a> to copy.
   */
  set(x: number, y: number, c: number | number[] | object): void;

  /**
   * Loads a 3D model to create a
   * <a href="#/p5.Geometry">p5.Geometry</a> object.
   * 
   * `loadModel()` can load 3D models from OBJ and STL files. Once the model is
   * loaded, it can be displayed with the
   * <a href="#/p5/model">model()</a> function, as in `model(shape)`.
   * 
   * There are three ways to call `loadModel()` with optional parameters to help
   * process the model.
   * 
   * The first parameter, `path`, is a `String` with the path to the file. Paths
   * to local files should be relative, as in `loadModel('assets/model.obj')`.
   * URLs such as `'https://example.com/model.obj'` may be blocked due to browser
   * security. The `path` parameter can also be defined as a `Request`
   * object for more advanced usage.
   * Note: When loading a `.obj` file that references materials stored in
   * `.mtl` files, p5.js will attempt to load and apply those materials.
   * To ensure that the `.obj` file reads the `.mtl` file correctly include the
   * `.mtl` file alongside it.
   * 
   * The first way to call `loadModel()` has three optional parameters after the
   * file path. The first optional parameter, `successCallback`, is a function
   * to call once the model loads. For example,
   * `loadModel('assets/model.obj', handleModel)` will call the `handleModel()`
   * function once the model loads. The second optional parameter,
   * `failureCallback`, is a function to call if the model fails to load. For
   * example, `loadModel('assets/model.obj', handleModel, handleFailure)` will
   * call the `handleFailure()` function if an error occurs while loading. The
   * third optional parameter, `fileType`, is the model’s file extension as a
   * string. For example,
   * `loadModel('assets/model', handleModel, handleFailure, '.obj')` will try to
   * load the file model as a `.obj` file.
   * 
   * The second way to call `loadModel()` has four optional parameters after the
   * file path. The first optional parameter is a `Boolean` value. If `true` is
   * passed, as in `loadModel('assets/model.obj', true)`, then the model will be
   * resized to ensure it fits the canvas. The next three parameters are
   * `successCallback`, `failureCallback`, and `fileType` as described above.
   * 
   * The third way to call `loadModel()` has one optional parameter after the
   * file path. The optional parameter, `options`, is an `Object` with options,
   * as in `loadModel('assets/model.obj', options)`. The `options` object can
   * have the following properties:
   * 
   * `let options = {
   * // Enables standardized size scaling during loading if set to true.
   * normalize: true,
   * 
   * // Function to call once the model loads.
   * successCallback: handleModel,
   * 
   * // Function to call if an error occurs while loading.
   * failureCallback: handleError,
   * 
   * // Model's file extension.
   * fileType: '.stl',
   * 
   * // Flips the U texture coordinates of the model.
   * flipU: false,
   * 
   * // Flips the V texture coordinates of the model.
   * flipV: false
   * };
   * 
   * // Pass the options object to loadModel().
   * loadModel('assets/model.obj', options);`This function returns a `Promise` and should be used in an `async` setup with
   * `await`. See the examples for the usage syntax.
   * 
   * Note: There’s no support for colored STL files. STL files with color will
   * be rendered without color.
   * @param path path of the model to be loaded.
   * @param fileType model’s file extension. Either `'.obj'` or `'.stl'`.
   * @param normalize if `true`, scale the model to fit the canvas.
   * @param successCallback function to call once the model is loaded. Will be passed
   * the <a href="#/p5.Geometry">p5.Geometry</a> object.
   * @param failureCallback function to call if the model fails to load. Will be passed an `Error` event object.
   * @returns the <a href="#/p5.Geometry">p5.Geometry</a> object
   */
  loadModel(path: string | Request, fileType?: string, normalize?: boolean, successCallback?: (arg0: P5.Geometry) => void, failureCallback?: (arg0: Event) => void): Promise<P5.Geometry>;
  loadModel(path: string | Request, fileType?: string, successCallback?: (arg0: P5.Geometry) => void, failureCallback?: (arg0: Event) => void): Promise<P5.Geometry>;
  loadModel(path: string | Request, options?: { fileType?: string; successCallback?: (arg0: P5.Geometry) => void; failureCallback?: (arg0: Event) => void; normalize?: boolean; flipU?: boolean; flipV?: boolean }): Promise<P5.Geometry>;

  /**
   * Runs the code in <a href="#/p5/draw">draw()</a> once.
   * 
   * By default, <a href="#/p5/draw">draw()</a> tries to run 60 times per
   * second. Calling <a href="#/p5/noLoop">noLoop()</a> stops
   * <a href="#/p5/draw">draw()</a> from repeating. Calling `redraw()` will
   * execute the code in the <a href="#/p5/draw">draw()</a> function a set
   * number of times. `await` the result of `redraw` to make sure it has finished.
   * 
   * The parameter, `n`, is optional. If a number is passed, as in `redraw(5)`,
   * then the draw loop will run the given number of times. By default, `n` is
   * 1.
   * @param n number of times to run <a href="#/p5/draw">draw()</a>. Defaults to 1.
   */
  redraw(n?: number): Promise<void>;

  /**
   * Returns the current year as a number such as 1999.
   * @returns current year.
   */
  year(): number;

  /**
   * Converts a `Number` into a `String` with a plus or minus sign.
   * 
   * `nfp()` converts numbers such as 123 into strings formatted with a `+` or
   * `-` symbol to mark whether they're positive or negative, as in `'+123'`.
   * 
   * The first parameter, `num`, is the number to convert to a string. For
   * example, calling `nfp(123.45)` returns the string `'+123.45'`. If an array
   * of numbers is passed, as in `nfp([123.45, -6.78])`, an array of formatted
   * strings will be returned.
   * 
   * The second parameter, `left`, is optional. If a number is passed, as in
   * `nfp(123.45, 4)`, it sets the minimum number of digits to include to the
   * left of the decimal place. If `left` is larger than the number of digits in
   * `num`, then unused digits will be set to 0. For example, calling
   * `nfp(123.45, 4)` returns the string `'+0123.45'`.
   * 
   * The third parameter, `right`, is also optional. If a number is passed, as
   * in `nfp(123.45, 4, 1)`, it sets the minimum number of digits to include to
   * the right of the decimal place. If `right` is smaller than the number of
   * decimal places in `num`, then `num` will be rounded to the given number of
   * decimal places.  For example, calling `nfp(123.45, 4, 1)` returns the
   * string `'+0123.5'`. If `right` is larger than the number of decimal places
   * in `num`, then unused decimal places will be set to 0.  For example,
   * calling `nfp(123.45, 4, 3)` returns the string `'+0123.450'`.
   * @param num number to format.
   * @param left number of digits to include to the left of the
   * decimal point.
   * @param right number of digits to include to the right of the
   * decimal point.
   * @returns formatted string.
   */
  nfp(num: number, left?: number, right?: number): string;
  nfp(nums: number[], left?: number, right?: number): string[];

  /**
   * Draws certain features with smooth (antialiased) edges.
   * 
   * `smooth()` is active by default. In 2D mode,
   * <a href="#/p5/noSmooth">noSmooth()</a> is helpful for scaling up images
   * without blurring. The functions don't affect shapes or fonts.
   * 
   * In WebGL mode, <a href="#/p5/noSmooth">noSmooth()</a> causes all shapes to
   * be drawn with jagged (aliased) edges. The functions don't affect images or
   * fonts.
   */
  smooth(): void;

  /**
   * Removes all items in the web browser's local storage.
   * 
   * Web browsers can save small amounts of data using the built-in
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">localStorage object</a>.
   * Data stored in `localStorage` can be retrieved at any point, even after
   * refreshing a page or restarting the browser. Data are stored as key-value
   * pairs. Calling `clearStorage()` removes all data from `localStorage`.
   * 
   * Note: Sensitive data such as passwords or personal information shouldn't be
   * stored in `localStorage`.
   */
  clearStorage(): void;

  /**
   * Removes all elements created by p5.js, including any event handlers.
   * 
   * There are two exceptions:
   * canvas elements created by <a href="#/p5/createCanvas">createCanvas()</a>
   * and <a href="#/p5.Renderer">p5.Render</a> objects created by
   * <a href="#/p5/createGraphics">createGraphics()</a>.
   */
  removeElements(): void;

  /**
   * Begins adding vertices to a custom shape.
   * 
   * The `beginShape()` and <a href="#/p5/endShape">endShape()</a> functions
   * allow for creating custom shapes in 2D or 3D. `beginShape()` begins adding
   * vertices to a custom shape and <a href="#/p5/endShape">endShape()</a> stops
   * adding them.
   * 
   * The parameter, `kind`, sets the kind of shape to make. The available kinds are:
   * 
   * - `PATH` (the default) to draw shapes by tracing out the path along their edges.
   * 
   * - `POINTS` to draw a series of points.
   * 
   * - `LINES` to draw a series of unconnected line segments.
   * 
   * - `TRIANGLES` to draw a series of separate triangles.
   * 
   * - `TRIANGLE_FAN` to draw a series of connected triangles sharing the first vertex in a fan-like fashion.
   * 
   * - `TRIANGLE_STRIP` to draw a series of connected triangles in strip fashion.
   * 
   * - `QUADS` to draw a series of separate quadrilaterals (quads).
   * 
   * - `QUAD_STRIP` to draw quad strip using adjacent edges to form the next quad.
   * 
   * After calling `beginShape()`, shapes can be built by calling
   * <a href="#/p5/vertex">vertex()</a>,
   * <a href="#/p5/bezierVertex">bezierVertex()</a>, and/or
   * <a href="#/p5/splineVertex">splineVertex()</a>. Calling
   * <a href="#/p5/endShape">endShape()</a> will stop adding vertices to the
   * shape. Each shape will be outlined with the current stroke color and filled
   * with the current fill color.
   * 
   * Transformations such as <a href="#/p5/translate">translate()</a>,
   * <a href="#/p5/rotate">rotate()</a>, and
   * <a href="#/p5/scale">scale()</a> don't work between `beginShape()` and
   * <a href="#/p5/endShape">endShape()</a>. It's also not possible to use
   * other shapes, such as <a href="#/p5/ellipse">ellipse()</a> or
   * <a href="#/p5/rect">rect()</a>, between `beginShape()` and
   * <a href="#/p5/endShape">endShape()</a>.
   * @param kind either POINTS, LINES, TRIANGLES, TRIANGLE_FAN
   * TRIANGLE_STRIP, QUADS, QUAD_STRIP or PATH. Defaults to PATH.
   */
  beginShape(kind?: typeof P5.POINTS | typeof P5.LINES | typeof P5.TRIANGLES | typeof P5.TRIANGLE_FAN | typeof P5.TRIANGLE_STRIP | typeof P5.QUADS | typeof P5.QUAD_STRIP | typeof P5.PATH): void;

  /**
   * The `saveObj()` function exports `p5.Geometry` objects as
   * 3D models in the Wavefront .obj file format.
   * This way, you can use the 3D shapes you create in p5.js in other software
   * for rendering, animation, 3D printing, or more.
   * 
   * The exported .obj file will include the faces and vertices of the `p5.Geometry`,
   * as well as its texture coordinates and normals, if it has them.
   * @param fileName The name of the file to save the model as.
   * If not specified, the default file name will be 'model.obj'.
   */
  saveObj(fileName?: string): void;

  /**
   * Returns a random number fitting a Gaussian, or normal, distribution.
   * 
   * Normal distributions look like bell curves when plotted. Values from a
   * normal distribution cluster around a central value called the mean. The
   * cluster's standard deviation describes its spread.
   * 
   * By default, `randomGaussian()` produces different results each time a
   * sketch runs. The <a href="#/p5/randomSeed">randomSeed()</a> function can be
   * used to generate the same sequence of numbers each time a sketch runs.
   * 
   * There's no minimum or maximum value that `randomGaussian()` might return.
   * Values far from the mean are very unlikely and values near the mean are
   * very likely.
   * 
   * The version of `randomGaussian()` with no parameters returns values with a
   * mean of 0 and standard deviation of 1.
   * 
   * The version of `randomGaussian()` with one parameter interprets the
   * argument passed as the mean. The standard deviation is 1.
   * 
   * The version of `randomGaussian()` with two parameters interprets the first
   * argument passed as the mean and the second as the standard deviation.
   * @param mean mean.
   * @param sd standard deviation.
   * @returns random number.
   */
  randomGaussian(mean?: number, sd?: number): number;

  /**
   * Helpers for create methods.
   */
  addElement(): void;
  addElement(): void;

  /**
   * Defines a shape that will mask any shapes drawn afterward.
   * 
   * The first parameter, `callback`, is a function that defines the mask.
   * Any shapes drawn in  `callback` will add to the mask shape. The mask
   * will apply to anything drawn after `clip()` is called.
   * 
   * The second parameter, `options`, is optional. If an object with an `invert`
   * property is passed, as in `beginClip({ invert: true })`, it will be used to
   * set the masking mode. `{ invert: true }` inverts the mask, creating holes
   * in shapes that are masked. `invert` is `false` by default.
   * 
   * Masks can be contained between the
   * <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions.
   * Doing so allows unmasked shapes to be drawn after masked shapes.
   * 
   * Masks can also be defined with <a href="#/p5/beginClip">beginClip()</a>
   * and <a href="#/p5/endClip">endClip()</a>.
   * @param callback a function that draws the mask shape.
   * @param options an object containing clip settings.
   */
  clip(callback: Function, options?: { invert?: boolean }): void;

  /**
   * Calculates the arc tangent of a number.
   * 
   * `atan()` is the inverse of <a href="#/p5/tan">tan()</a>. It expects input
   * values in the range of -Infinity to Infinity. By default, `atan()` returns
   * values in the range -π ÷ 2 (about -1.57) to π ÷ 2
   * (about 1.57). If the <a href="#/p5/angleMode">angleMode()</a> is `DEGREES`
   * then values are returned in the range -90 to 90.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Calculate tan() and atan() values.
   * let a = PI / 3;
   * let t = tan(a);
   * let at = atan(t);
   * 
   * // Display the values.
   * text(`${round(a, 3)}`, 35, 25);
   * text(`${round(t, 3)}`, 35, 50);
   * text(`${round(at, 3)}`, 35, 75);
   * 
   * describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Calculate tan() and atan() values.
   * let a = PI + PI / 3;
   * let t = tan(a);
   * let at = atan(t);
   * 
   * // Display the values.
   * text(`${round(a, 3)}`, 35, 25);
   * text(`${round(t, 3)}`, 35, 50);
   * text(`${round(at, 3)}`, 35, 75);
   * 
   * describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');
   * }``atan()` can also be used in shaders with p5.strands. The following example
   * uses `atan()` to create a soft color transition on a shape.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere that softly shifts between pink and lime.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
   * // sin() oscillates the input between -5 and 5, so atan() gets both positive and negative values.
   * let t = sin(millis() * 0.001) * 5;
   * 
   * // atan(t) returns values between -PI/2 and PI/2.
   * // Dividing by PI/2 normalizes to -1 to 1, then adding 1 and multiplying by 0.5
   * // remaps to the 0 to 1 range.
   * // atan() compresses the wide range of t into a smooth S-curve (soft clipping).
   * let value = (atan(t) / (PI / 2) + 1) * 0.5;
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let pink = [1, 0, 0.5, 1];
   * let lime = [0.5, 1, 0, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between pink (when value = 0) and lime (when value = 1).
   * // atan() creates a soft, eased transition instead of a linear blend.
   * finalColor.set(mix(pink, lime, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param value value whose arc tangent is to be returned.
   * @returns arc tangent of the given value.
   */
  atan(value: number): number;

  /**
   * Creates a <a href="#/p5.Graphics">p5.Graphics</a> object.
   * 
   * `createGraphics()` creates an offscreen drawing canvas (graphics buffer)
   * and returns it as a <a href="#/p5.Graphics">p5.Graphics</a> object. Drawing
   * to a separate graphics buffer can be helpful for performance and for
   * organizing code.
   * 
   * The first two parameters, `width` and `height`, are optional. They set the
   * dimensions of the <a href="#/p5.Graphics">p5.Graphics</a> object. For
   * example, calling `createGraphics(900, 500)` creates a graphics buffer
   * that's 900×500 pixels.
   * 
   * The third parameter is also optional. If either of the constants `P2D` or
   * `WEBGL` is passed, as in `createGraphics(900, 500, WEBGL)`, then it will set
   * the <a href="#/p5.Graphics">p5.Graphics</a> object's rendering mode. If an
   * existing
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement" target="_blank">HTMLCanvasElement</a>
   * is passed, as in `createGraphics(900, 500, myCanvas)`, then it will be used
   * by the graphics buffer.
   * 
   * The fourth parameter is also optional. If an existing
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement" target="_blank">HTMLCanvasElement</a>
   * is passed, as in `createGraphics(900, 500, WEBGL, myCanvas)`, then it will be
   * used by the graphics buffer.
   * 
   * Note: In WebGL mode, the <a href="#/p5.Graphics">p5.Graphics</a> object
   * will use a WebGL2 context if it's supported by the browser. Check the
   * <a href="#/p5/webglVersion">webglVersion</a> system variable to check what
   * version is being used, or call `setAttributes({ version: 1 })` to create a
   * WebGL1 context.
   * @param width width of the graphics buffer.
   * @param height height of the graphics buffer.
   * @param renderer either P2D or WEBGL. Defaults to P2D.
   * @param canvas existing canvas element that should be
   * used for the graphics buffer..
   * @returns new graphics buffer.
   */
  createGraphics(width: number, height: number, renderer?: typeof P5.P2D | typeof P5.WEBGL, canvas?: HTMLCanvasElement): P5.Graphics;
  createGraphics(width: number, height: number, canvas?: HTMLCanvasElement): P5.Graphics;

  /**
   * Clears a <a href="#/p5.Geometry">p5.Geometry</a> object from the graphics
   * processing unit (GPU) memory.
   * 
   * <a href="#/p5.Geometry">p5.Geometry</a> objects can contain lots of data
   * about their vertices, surface normals, colors, and so on. Complex 3D shapes
   * can use lots of memory which is a limited resource in many GPUs. Calling
   * `freeGeometry()` works with <a href="#/p5.Geometry">p5.Geometry</a> objects
   * created with <a href="#/p5/buildGeometry">buildGeometry()</a> and
   * <a href="#/p5/loadModel">loadModel()</a>.
   * 
   * The parameter, `geometry`, is the <a href="#/p5.Geometry">p5.Geometry</a>
   * object to be freed.
   * 
   * Note: A <a href="#/p5.Geometry">p5.Geometry</a> object can still be drawn
   * after its resources are cleared from GPU memory. It may take longer to draw
   * the first time it’s redrawn.
   * 
   * Note: `freeGeometry()` can only be used in WebGL mode.
   * @param geometry 3D shape whose resources should be freed.
   */
  freeGeometry(geometry: P5.Geometry): void;

  /**
   * Sets the number of frames to draw per second.
   * 
   * Calling `frameRate()` with one numeric argument, as in `frameRate(30)`,
   * attempts to draw 30 frames per second (FPS). The target frame rate may not
   * be achieved depending on the sketch's processing needs. Most computers
   * default to a frame rate of 60 FPS. Frame rates of 24 FPS and above are
   * fast enough for smooth animations.
   * 
   * Calling `frameRate()` without an argument returns the current frame rate.
   * The value returned is an approximation.
   * @param fps number of frames to draw per second.
   * @returns current frame rate.
   */
  frameRate(fps: number): number;
  frameRate(): number;

  /**
   * Sets the style for rendering the ends of lines.
   * 
   * The caps for line endings are either rounded (`ROUND`), squared
   * (`SQUARE`), or extended (`PROJECT`). The default cap is `ROUND`.
   * 
   * The argument passed to `strokeCap()` must be written in ALL CAPS because
   * the constants `ROUND`, `SQUARE`, and `PROJECT` are defined this way.
   * JavaScript is a case-sensitive language.
   * @param cap either ROUND, SQUARE, or PROJECT
   */
  strokeCap(cap: typeof P5.ROUND | typeof P5.SQUARE | typeof P5.PROJECT): void;

  /**
   * Calculates the value of Euler's number e (2.71828...) raised to the power
   * of a number.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Top-left.
   * let d = exp(1);
   * circle(10, 10, d);
   * 
   * // Left-center.
   * d = exp(2);
   * circle(20, 20, d);
   * 
   * // Right-center.
   * d = exp(3);
   * circle(40, 40, d);
   * 
   * // Bottom-right.
   * d = exp(4);
   * circle(80, 80, d);
   * 
   * describe('A series of circles that grow exponentially from top left to bottom right.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * describe('A series of black dots that grow exponentially from left to right.');
   * }
   * 
   * function draw() {
   * // Invert the y-axis.
   * scale(1, -1);
   * translate(0, -100);
   * 
   * // Calculate the coordinates.
   * let x = frameCount;
   * let y = 0.005 * exp(x * 0.1);
   * 
   * // Draw a point.
   * point(x, y);
   * }``exp()` can also be used in shaders with p5.strands. The following example
   * uses `exp()` to create an accelerating color transition on a shape.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere that brightens with accelerating speed.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.0005 to slow it.
   * let t = millis() * 0.0005;
   * 
   * // exp(t) grows slowly at first, then accelerates (exponential growth).
   * // Multiply by 0.01 to keep it from growing too fast.
   * // min(..., 1) caps the value at 1 so it doesn't go past white.
   * let value = min(exp(t) * 0.01, 1);
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let darkBlue = [0.1, 0.1, 0.3, 1];
   * let lightYellow = [1, 1, 0.5, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between darkBlue (when value = 0) and lightYellow (when value = 1).
   * // Because exp() accelerates, the color transition gets faster over time.
   * finalColor.set(mix(darkBlue, lightYellow, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param n exponent to raise.
   * @returns e^n
   */
  exp(n: number): number;

  /**
   * Adjusts the character of the noise produced by the
   * <a href="#/p5/noise">noise()</a> function.
   * 
   * Perlin noise values are created by adding layers of noise together. The
   * noise layers, called octaves, are similar to harmonics in music. Lower
   * octaves contribute more to the output signal. They define the overall
   * intensity of the noise. Higher octaves create finer-grained details.
   * 
   * By default, noise values are created by combining four octaves. Each higher
   * octave contributes half as much (50% less) compared to its predecessor.
   * `noiseDetail()` changes the number of octaves and the falloff amount. For
   * example, calling `noiseDetail(6, 0.25)` ensures that
   * <a href="#/p5/noise">noise()</a> will use six octaves. Each higher octave
   * will contribute 25% as much (75% less) compared to its predecessor. Falloff
   * values between 0 and 1 are valid. However, falloff values greater than 0.5
   * might result in noise values greater than 1.
   * @param lod number of octaves to be used by the noise.
   * @param falloff falloff factor for each octave.
   */
  noiseDetail(lod: number, falloff?: number): void;

  /**
   * Sets the specular color for lights.
   * 
   * `specularColor()` affects lights that bounce off a surface in a preferred
   * direction. These lights include
   * <a href="#/p5/directionalLight">directionalLight()</a>,
   * <a href="#/p5/pointLight">pointLight()</a>, and
   * <a href="#/p5/spotLight">spotLight()</a>. The function helps to create
   * highlights on <a href="#/p5.Geometry">p5.Geometry</a> objects that are
   * styled with <a href="#/p5/specularMaterial">specularMaterial()</a>. If a
   * geometry does not use
   * <a href="#/p5/specularMaterial">specularMaterial()</a>, then
   * `specularColor()` will have no effect.
   * 
   * Note: `specularColor()` doesn’t affect lights that bounce in all
   * directions, including <a href="#/p5/ambientLight">ambientLight()</a> and
   * <a href="#/p5/imageLight">imageLight()</a>.
   * 
   * There are three ways to call `specularColor()` with optional parameters to
   * set the specular highlight color.
   * 
   * The first way to call `specularColor()` has two optional parameters, `gray`
   * and `alpha`. Grayscale and alpha values between 0 and 255, as in
   * `specularColor(50)` or `specularColor(50, 80)`, can be passed to set the
   * specular highlight color.
   * 
   * The second way to call `specularColor()` has one optional parameter,
   * `color`. A <a href="#/p5.Color">p5.Color</a> object, an array of color
   * values, or a CSS color string can be passed to set the specular highlight
   * color.
   * 
   * The third way to call `specularColor()` has four optional parameters, `v1`,
   * `v2`, `v3`, and `alpha`. RGBA, HSBA, or HSLA values, as in
   * `specularColor(255, 0, 0, 80)`, can be passed to set the specular highlight
   * color. Color values will be interpreted using the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   * @param v1 red or hue value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   * @param v2 green or saturation value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   * @param v3 blue, brightness, or lightness value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   */
  specularColor(v1: number, v2: number, v3: number): void;
  specularColor(gray: number): void;
  specularColor(value: string): void;
  specularColor(values: number[]): void;
  specularColor(color: P5.Color): void;

  /**
   * Creates a <a href="#/p5/p5.Color">p5.Color</a> object.
   * 
   * By default, the parameters are interpreted as RGB values. Calling
   * `color(255, 204, 0)` will return a bright yellow color. The way these
   * parameters are interpreted may be changed with the
   * <a href="#/p5/colorMode">colorMode()</a> function.
   * 
   * The version of `color()` with one parameter interprets the value one of two
   * ways. If the parameter is a number, it's interpreted as a grayscale value.
   * If the parameter is a string, it's interpreted as a CSS color string.
   * 
   * The version of `color()` with two parameters interprets the first one as a
   * grayscale value. The second parameter sets the alpha (transparency) value.
   * 
   * The version of `color()` with three parameters interprets them as RGB, HSB,
   * or HSL colors, depending on the current `colorMode()`.
   * 
   * The version of `color()` with four parameters interprets them as RGBA, HSBA,
   * or HSLA colors, depending on the current `colorMode()`. The last parameter
   * sets the alpha (transparency) value.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a p5.Color object using RGB values.
   * let c = color(255, 204, 0);
   * 
   * // Draw the square.
   * fill(c);
   * noStroke();
   * square(30, 20, 55);
   * 
   * describe('A yellow square on a gray canvas.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a p5.Color object using RGB values.
   * let c1 = color(255, 204, 0);
   * 
   * // Draw the left circle.
   * fill(c1);
   * noStroke();
   * circle(25, 25, 80);
   * 
   * // Create a p5.Color object using a grayscale value.
   * let c2 = color(65);
   * 
   * // Draw the right circle.
   * fill(c2);
   * circle(75, 75, 80);
   * 
   * describe(
   * 'Two circles on a gray canvas. The circle in the top-left corner is yellow and the one at the bottom-right is gray.'
   * );
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a p5.Color object using a named color.
   * let c = color('magenta');
   * 
   * // Draw the square.
   * fill(c);
   * noStroke();
   * square(20, 20, 60);
   * 
   * describe('A magenta square on a gray canvas.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a p5.Color object using a hex color code.
   * let c1 = color('#0f0');
   * 
   * // Draw the left rectangle.
   * fill(c1);
   * noStroke();
   * rect(0, 10, 45, 80);
   * 
   * // Create a p5.Color object using a hex color code.
   * let c2 = color('#00ff00');
   * 
   * // Draw the right rectangle.
   * fill(c2);
   * rect(55, 10, 45, 80);
   * 
   * describe('Two bright green rectangles on a gray canvas.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a p5.Color object using a RGB color string.
   * let c1 = color('rgb(0, 0, 255)');
   * 
   * // Draw the top-left square.
   * fill(c1);
   * square(10, 10, 35);
   * 
   * // Create a p5.Color object using a RGB color string.
   * let c2 = color('rgb(0%, 0%, 100%)');
   * 
   * // Draw the top-right square.
   * fill(c2);
   * square(55, 10, 35);
   * 
   * // Create a p5.Color object using a RGBA color string.
   * let c3 = color('rgba(0, 0, 255, 1)');
   * 
   * // Draw the bottom-left square.
   * fill(c3);
   * square(10, 55, 35);
   * 
   * // Create a p5.Color object using a RGBA color string.
   * let c4 = color('rgba(0%, 0%, 100%, 1)');
   * 
   * // Draw the bottom-right square.
   * fill(c4);
   * square(55, 55, 35);
   * 
   * describe('Four blue squares in the corners of a gray canvas.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a p5.Color object using a HSL color string.
   * let c1 = color('hsl(160, 100%, 50%)');
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c1);
   * rect(0, 10, 45, 80);
   * 
   * // Create a p5.Color object using a HSLA color string.
   * let c2 = color('hsla(160, 100%, 50%, 0.5)');
   * 
   * // Draw the right rectangle.
   * fill(c2);
   * rect(55, 10, 45, 80);
   * 
   * describe('Two sea green rectangles. A darker rectangle on the left and a brighter one on the right.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a p5.Color object using a HSB color string.
   * let c1 = color('hsb(160, 100%, 50%)');
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c1);
   * rect(0, 10, 45, 80);
   * 
   * // Create a p5.Color object using a HSBA color string.
   * let c2 = color('hsba(160, 100%, 50%, 0.5)');
   * 
   * // Draw the right rectangle.
   * fill(c2);
   * rect(55, 10, 45, 80);
   * 
   * describe('Two green rectangles. A darker rectangle on the left and a brighter one on the right.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a p5.Color object using RGB values.
   * let c1 = color(50, 55, 100);
   * 
   * // Draw the left rectangle.
   * fill(c1);
   * rect(0, 10, 45, 80);
   * 
   * // Switch the color mode to HSB.
   * colorMode(HSB, 100);
   * 
   * // Create a p5.Color object using HSB values.
   * let c2 = color(50, 55, 100);
   * 
   * // Draw the right rectangle.
   * fill(c2);
   * rect(55, 10, 45, 80);
   * 
   * describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.');
   * }`p5.strands is an experimental mode for writing shader code with p5.js-like
   * syntax instead of GLSL. In p5.strands shader callbacks, `color()` accepts
   * the same input formats but returns a `vec4` instead of a `p5.Color`
   * object, with RGBA components normalized to the 0–1 range. All colors in
   * strands are RGB-based; `colorMode()` has no effect inside shader
   * callbacks. Color utility functions such as `red()`, `green()`, `blue()`,
   * `alpha()`, `hue()`, `saturation()`, `brightness()`, and `lightness()`
   * also return values in the 0–1 range when used in strands.
   * 
   * `let myShader;
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildMaterialShader(myShaderBuilder);
   * }
   * 
   * function myShaderBuilder() {
   * finalColor.begin();
   * // Same syntax as regular sketch code...
   * let c = color(255, 0, 0);
   * // ...but c is a vec4 with normalized RGBA (0-1), not a p5.Color.
   * finalColor.set(c);
   * finalColor.end();
   * }
   * 
   * function draw() {
   * shader(myShader);
   * noStroke();
   * sphere(40);
   * 
   * describe('A red sphere on a gray background.');
   * }`
   * @param gray number specifying value between white and black.
   * @param alpha alpha value relative to current color range
   * (default is 0-255).
   * @returns resulting color.
   */
  color(gray: number, alpha?: number): P5.Color;
  color(v1: number, v2: number, v3: number, alpha?: number): P5.Color;
  color(value: string): P5.Color;
  color(values: number[]): P5.Color;
  color(color: P5.Color): P5.Color;

  /**
   * Creates a `<div></div>` element.
   * 
   * `<div></div>` elements are commonly used as containers for
   * other elements.
   * 
   * The parameter `html` is optional. It accepts a string that sets the
   * inner HTML of the new `<div></div>`.
   * @param html inner HTML for the new `<div></div>` element.
   * @returns new <a href="#/p5.Element">p5.Element</a> object.
   */
  createDiv(html?: string): P5.Element;

  /**
   * Loads a text file to create an `Array`.
   * 
   * The first parameter, `path`, is always a string with the path to the file.
   * Paths to local files should be relative, as in
   * `loadStrings('assets/data.txt')`. URLs such as
   * `'https://example.com/data.txt'` may be blocked due to browser security.
   * The `path` parameter can also be defined as a `Request`
   * object for more advanced usage.
   * 
   * The second parameter, `successCallback`, is optional. If a function is
   * passed, as in `loadStrings('assets/data.txt', handleData)`, then the
   * `handleData()` function will be called once the data loads. The array
   * created from the text data will be passed to `handleData()` as its only
   * argument. The return value of the `handleData()` function will be used as
   * the final return value of `loadStrings('assets/data.txt', handleData)`.
   * 
   * The third parameter, `failureCallback`, is also optional. If a function is
   * passed, as in `loadStrings('assets/data.txt', handleData, handleFailure)`,
   * then the `handleFailure()` function will be called if an error occurs while
   * loading. The `Error` object will be passed to `handleFailure()` as its only
   * argument. The return value of the `handleFailure()` function will be used as
   * the final return value of `loadStrings('assets/data.txt', handleData, handleFailure)`.
   * 
   * This function returns a `Promise` and should be used in an `async` setup with
   * `await`. See the examples for the usage syntax.
   * @param path path of the text file to be loaded.
   * @param successCallback function to call once the data is
   * loaded. Will be passed the array.
   * @param errorCallback function to call if the data fails to
   * load. Will be passed an `Error` event
   * object.
   * @returns new array containing the loaded text.
   */
  loadStrings(path: string | Request, successCallback?: Function, errorCallback?: Function): Promise<string[]>;

  /**
   * Converts a `String` or `Number` to a `Boolean`.
   * 
   * `boolean()` converts values to `true` or `false`.
   * 
   * The parameter, `n`, is the value to convert. If `n` is a string, then
   * `boolean('true')` will return `true` and every other string value will
   * return `false`. If `n` is a number, then `boolean(0)` will return `false`
   * and every other numeric value will return `true`. If an array is passed, as
   * `in boolean([0, 1, 'true', 'blue'])`, then an array of Boolean values will
   * be returned.
   * @param n value to convert.
   * @returns converted Boolean value.
   */
  boolean(n: string | boolean | number): boolean;
  boolean(ns: any[]): boolean[];

  /**
   * Rotates the coordinate system.
   * 
   * By default, the positive x-axis points to the right and the positive y-axis
   * points downward. The `rotate()` function changes this orientation by
   * rotating the coordinate system about the origin. Everything drawn after
   * `rotate()` is called will appear to be rotated.
   * 
   * The first parameter, `angle`, is the amount to rotate. For example, calling
   * `rotate(1)` rotates the coordinate system clockwise 1 radian which is
   * nearly 57˚. `rotate()` interprets angle values using the current
   * <a href="#/p5/angleMode">angleMode()</a>.
   * 
   * The second parameter, `axis`, is optional. It's used to orient 3D rotations
   * in WebGL mode. If a <a href="#/p5.Vector">p5.Vector</a> is passed, as in
   * `rotate(QUARTER_PI, myVector)`, then the coordinate system will rotate
   * `QUARTER_PI` radians about `myVector`. If an array of vector components is
   * passed, as in `rotate(QUARTER_PI, [1, 0, 0])`, then the coordinate system
   * will rotate `QUARTER_PI` radians about a vector with the components
   * `[1, 0, 0]`.
   * 
   * By default, transformations accumulate. For example, calling `rotate(1)`
   * twice has the same effect as calling `rotate(2)` once. The
   * <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions
   * can be used to isolate transformations within distinct drawing groups.
   * 
   * Note: Transformations are reset at the beginning of the draw loop. Calling
   * `rotate(1)` inside the <a href="#/p5/draw">draw()</a> function won't cause
   * shapes to spin.
   * @param angle angle of rotation in the current <a href="#/p5/angleMode">angleMode()</a>.
   * @param axis axis to rotate about in 3D.
   */
  rotate(angle: number, axis?: P5.Vector | number[]): void;

  /**
   * Removes an item from the web browser's local storage.
   * 
   * Web browsers can save small amounts of data using the built-in
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">localStorage object</a>.
   * Data stored in `localStorage` can be retrieved at any point, even after
   * refreshing a page or restarting the browser. Data are stored as key-value
   * pairs.
   * 
   * <a href="#/p5/storeItem">storeItem()</a> makes it easy to store values in
   * `localStorage` and `removeItem()` makes it easy to delete them.
   * 
   * The parameter, `key`, is the name of the value to remove as a string. For
   * example, calling `removeItem('size')` removes the item with the key `size`.
   * 
   * Note: Sensitive data such as passwords or personal information shouldn't be
   * stored in `localStorage`.
   * @param key name of the value to remove.
   */
  removeItem(key: string): void;

  /**
   * Calculates coordinates along a line that's tangent to a Bézier curve.
   * 
   * Tangent lines skim the surface of a curve. A tangent line's slope equals
   * the curve's slope at the point where it intersects.
   * 
   * `bezierTangent()` calculates coordinates along a tangent line using the
   * Bézier curve's anchor and control points. It expects points in the same
   * order as the <a href="#/p5/bezier">bezier()</a> function. `bezierTangent()`
   * works one axis at a time. Passing the anchor and control points'
   * x-coordinates will calculate the x-coordinate of a point on the tangent
   * line. Passing the anchor and control points' y-coordinates will calculate
   * the y-coordinate of a point on the tangent line.
   * 
   * The first parameter, `a`, is the coordinate of the first anchor point.
   * 
   * The second and third parameters, `b` and `c`, are the coordinates of the
   * control points.
   * 
   * The fourth parameter, `d`, is the coordinate of the last anchor point.
   * 
   * The fifth parameter, `t`, is the amount to interpolate along the curve. 0
   * is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
   * between them.
   * @param a coordinate of first anchor point.
   * @param b coordinate of first control point.
   * @param c coordinate of second control point.
   * @param d coordinate of second anchor point.
   * @param t amount to interpolate between 0 and 1.
   * @returns coordinate of a point on the tangent line.
   */
  bezierTangent(a: number, b: number, c: number, d: number, t: number): number;

  /**
   * The <a href="#/p5/setMoveThreshold">setMoveThreshold()</a> function is used to set the movement threshold for
   * the <a href="#/p5/deviceMoved">deviceMoved()</a> function. The default threshold is set to 0.5.
   * @param value The threshold value
   */
  setMoveThreshold(value: number): void;

  /**
   * Draws an ellipse (oval).
   * 
   * An ellipse is a round shape defined by the `x`, `y`, `w`, and
   * `h` parameters. `x` and `y` set the location of its center. `w` and
   * `h` set its width and height. See
   * <a href="#/p5/ellipseMode">ellipseMode()</a> for other ways to set
   * its position.
   * 
   * If no height is set, the value of width is used for both the width and
   * height. If a negative height or width is specified, the absolute value is
   * taken.
   * 
   * The fifth parameter, `detail`, is also optional. It determines how many
   * vertices are used to draw the ellipse in WebGL mode. The default value is
   * 25.
   * @param x x-coordinate of the center of the ellipse.
   * @param y y-coordinate of the center of the ellipse.
   * @param w width of the ellipse.
   * @param h height of the ellipse.
   */
  ellipse(x: number, y: number, w: number, h?: number): void;
  ellipse(x: number, y: number, w: number, h: number, detail?: number): void;

  /**
   * Creates a paragraph element.
   * 
   * `<p></p>` elements are commonly used for paragraph-length text.
   * 
   * The parameter `html` is optional. It accepts a string that sets the
   * inner HTML of the new `<p></p>`.
   * @param html inner HTML for the new `<p></p>` element.
   * @returns new <a href="#/p5.Element">p5.Element</a> object.
   */
  createP(html?: string): P5.Element;

  /**
   * Creates a new <a href="#/p5.Shader">p5.Shader</a> object using GLSL.
   * 
   * If you are interested in writing shaders, consider using p5.strands shaders using
   * <a href="#/p5/buildMaterialShader">`buildMaterialShader`<a>,
   * <a href="#/p5/buildStrokeShader">`buildStrokeShader`</a>, or
   * <a href="#/p5/buildFilterShader">`buildFilterShader`</a>.
   * With p5.strands, you can modify existing shaders using JavaScript. With
   * `createShader`, shaders are made from scratch, and are written in GLSL. This
   * will be most useful for advanced cases, and for authors of add-on libraries.
   * 
   * 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.
   * 
   * Once the <a href="#/p5.Shader">p5.Shader</a> object is created, it can be
   * used with the <a href="#/p5/shader">shader()</a> function, as in
   * `shader(myShader)`. A GLSL 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.
   * 
   * Here is a simple example with a simple vertex shader that applies whatevre
   * transformations have been set, and a simple fragment shader that ignores
   * all material settings and just outputs yellow:
   * 
   * `// 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.');
   * }`Fragment shaders are often the fastest way to dynamically create per-pixel textures.
   * Here is an example of a fractal being drawn in the fragment shader. It also creates custom
   * uniform variables in the shader, which can be set from your main sketch code. By passing
   * the time in as a uniform, we can animate the fractal in the shader.
   * 
   * `// 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);
   * 
   * // Add a plane as a drawing surface.
   * noStroke();
   * plane(100, 100);
   * }`A shader can optionally describe hooks, which are functions in GLSL that
   * users may choose to provide to customize the behavior of the shader using the
   * <a href="#/p5.Shader/modify">`modify()`</a> method of `p5.Shader`. Users can
   * write their modifications using p5.strands, without needing to learn GLSL.
   * 
   * 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!
   * }`Then, a user of your shader can modify it with p5.strands. Here is what
   * that looks like when we put everything together:
   * 
   * `// 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(100, 100, WEBGL);
   * 
   * // Create a shader with hooks. By default, this hook returns
   * // the initial value.
   * myShader = createShader(vertSrc, fragSrc, {
   * fragment: {
   * 'vec4 getColor': '(vec4 color) { return color; }'
   * }
   * });
   * 
   * // Make a version of the shader with a hook overridden
   * modifiedShader = myShader.modify(() => {
   * // Create new uniforms and override the getColor hook
   * let t = millis() / 1000;
   * getColor(() => {
   * return [0, 0.5 + 0.5 * sin(t), 1, 1];
   * });
   * });
   * }
   * 
   * function draw() {
   * noStroke();
   * 
   * push();
   * shader(myShader);
   * translate(-width/3, 0);
   * sphere(20);
   * pop();
   * 
   * push();
   * shader(modifiedShader);
   * translate(width/3, 0);
   * sphere(20);
   * pop();
   * }`Note: Only filter shaders can be used in 2D mode. All shaders can be used
   * in WebGL mode.
   * @param vertSrc source code for the vertex shader.
   * @param fragSrc source code for the fragment shader.
   * @param options An optional object describing how this shader can
   * be augmented with hooks. It can include:
   * @returns new shader object created from the
   * vertex and fragment shaders.
   */
  createShader(vertSrc: string, fragSrc: string, options?: { vertex?: object; fragment?: object }): P5.Shader;

  /**
   * Calculates the angle formed by a point, the origin, and the positive
   * x-axis.
   * 
   * `atan2()` is most often used for orienting geometry to the mouse's
   * position, as in `atan2(mouseY, mouseX)`. The first parameter is the point's
   * y-coordinate and the second parameter is its x-coordinate.
   * 
   * By default, `atan2()` returns values in the range
   * -π (about -3.14) to π (3.14). If the
   * <a href="#/p5/angleMode">angleMode()</a> is `DEGREES`, then values are
   * returned in the range -180 to 180.
   * @param y y-coordinate of the point.
   * @param x x-coordinate of the point.
   * @returns arc tangent of the given point.
   */
  atan2(y: number, x: number): number;

  /**
   * Converts a positive `Number` into a `String` with an extra space in front.
   * 
   * `nfs()` converts positive numbers such as 123.45 into strings formatted
   * with an extra space in front, as in ' 123.45'. Doing so can be helpful for
   * aligning positive and negative numbers.
   * 
   * The first parameter, `num`, is the number to convert to a string. For
   * example, calling `nfs(123.45)` returns the string `' 123.45'`.
   * 
   * The second parameter, `left`, is optional. If a number is passed, as in
   * `nfs(123.45, 4)`, it sets the minimum number of digits to include to the
   * left of the decimal place. If `left` is larger than the number of digits in
   * `num`, then unused digits will be set to 0. For example, calling
   * `nfs(123.45, 4)` returns the string `' 0123.45'`.
   * 
   * The third parameter, `right`, is also optional. If a number is passed, as
   * in `nfs(123.45, 4, 1)`, it sets the minimum number of digits to include to
   * the right of the decimal place. If `right` is smaller than the number of
   * decimal places in `num`, then `num` will be rounded to the given number of
   * decimal places.  For example, calling `nfs(123.45, 4, 1)` returns the
   * string `' 0123.5'`. If `right` is larger than the number of decimal places
   * in `num`, then unused decimal places will be set to 0.  For example,
   * calling `nfs(123.45, 4, 3)` returns the string `' 0123.450'`.
   * @param num number to format.
   * @param left number of digits to include to the left of the
   * decimal point.
   * @param right number of digits to include to the right of the
   * decimal point.
   * @returns formatted string.
   */
  nfs(num: number, left?: number, right?: number): string;
  nfs(nums: any[], left?: number, right?: number): string[];

  /**
   * Returns the target frame rate.
   * 
   * The value is either the system frame rate or the last value passed to
   * <a href="#/p5/frameRate">frameRate()</a>.
   * @returns _targetFrameRate
   */
  getTargetFrameRate(): number;

  /**
   * The <a href="#/p5/setShakeThreshold">setShakeThreshold()</a> function is used to set the movement threshold for
   * the <a href="#/p5/deviceShaken">deviceShaken()</a> function. The default threshold is set to 30.
   * @param value The threshold value
   */
  setShakeThreshold(value: number): void;

  /**
   * Sets the seed value for the <a href="#/p5/noise">noise()</a> function.
   * 
   * By default, <a href="#/p5/noise">noise()</a> produces different results
   * each time a sketch is run. Calling `noiseSeed()` with a constant argument,
   * such as `noiseSeed(99)`, makes <a href="#/p5/noise">noise()</a> produce the
   * same results each time a sketch is run.
   * @param seed seed value.
   */
  noiseSeed(seed: number): void;

  /**
   * The `saveStl()` function exports `p5.Geometry` objects as
   * 3D models in the STL stereolithography file format.
   * This way, you can use the 3D shapes you create in p5.js in other software
   * for rendering, animation, 3D printing, or more.
   * 
   * The exported .stl file will include the faces, vertices, and normals of the `p5.Geometry`.
   * 
   * By default, this method saves a text-based .stl file. Alternatively, you can save a more compact
   * but less human-readable binary .stl file by passing `{ binary: true }` as a second parameter.
   * @param fileName The name of the file to save the model as.
   * If not specified, the default file name will be 'model.stl'.
   * @param options Optional settings.
   */
  saveStl(fileName?: string, options?: { binary?: boolean }): void;

  /**
   * Draws a circle.
   * 
   * A circle is a round shape defined by the `x`, `y`, and `d` parameters.
   * `x` and `y` set the location of its center. `d` sets its width and height (diameter).
   * Every point on the circle's edge is the same distance, `0.5 * d`, from its center.
   * `0.5 * d` (half the diameter) is the circle's radius.
   * See <a href="#/p5/ellipseMode">ellipseMode()</a> for other ways to set its position.
   * @param x x-coordinate of the center of the circle.
   * @param y y-coordinate of the center of the circle.
   * @param d diameter of the circle.
   */
  circle(x: number, y: number, d: number): void;

  /**
   * Calculates the closest integer value that is less than or equal to the
   * value of a number.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * // Use RGB color with values from 0 to 1.
   * colorMode(RGB, 1);
   * 
   * noStroke();
   * 
   * // Draw the left rectangle.
   * let r = 0.8;
   * fill(r, 0, 0);
   * rect(0, 0, 50, 100);
   * 
   * // Round r down to 0.
   * r = floor(r);
   * 
   * // Draw the right rectangle.
   * fill(r, 0, 0);
   * rect(50, 0, 50, 100);
   * 
   * describe('Two rectangles. The one on the left is bright red and the one on the right is black.');
   * }``floor()` can also be used in shaders with p5.strands. The following example
   * uses `floor()` to create banding effects on a shape.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere with posterized color bands.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
   * let t = millis() * 0.001;
   * 
   * // sin(t) goes between -1 and 1.
   * // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
   * let sinVal = 0.5 + 0.5 * sin(t);
   * 
   * // Multiply by 4 then floor to get the next whole number down.
   * // Divide by 4 to bring the result back to the 0 to 1 range.
   * // This creates 5 distinct stepped color levels: 0, 0.25, 0.5, 0.75, 1.
   * let value = floor(sinVal * 4) / 4;
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let darkPurple = [0.2, 0, 0.8, 1];
   * let brightTeal = [0.2, 1, 0.8, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between darkPurple (when value = 0) and brightTeal (when value = 1).
   * // The floor() creates visible banding/posterization in the color.
   * finalColor.set(mix(darkPurple, brightTeal, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param n number to round down.
   * @returns rounded down number.
   */
  floor(n: number): number;

  /**
   * Hides the cursor from view.
   */
  noCursor(): void;

  /**
   * Reads the contents of a file or URL and creates a <a href="#/p5.Table">p5.Table</a> object with
   * its values. If a file is specified, it must be located in the sketch's
   * "data" folder. The filename parameter can also be a URL to a file found
   * online. By default, the file is assumed to be comma-separated (in CSV
   * format). Table only looks for a header row if the 'header' option is
   * included.
   * 
   * This function returns a `Promise` and should be used in an `async` setup with
   * `await`. See the examples for the usage syntax.
   * 
   * All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB.
   * @param filename name of the file or URL to load
   * @param separator the separator character used by the file, defaults to `','`
   * @param header "header" to indicate table has header row
   * @param callback function to be executed after
   * <a href="#/p5/loadTable">loadTable()</a> completes. On success, the
   * <a href="#/p5.Table">Table</a> object is passed in as the
   * first argument.
   * @param errorCallback function to be executed if
   * there is an error, response is passed
   * in as first argument
   * @returns <a href="#/p5.Table">Table</a> object containing data
   */
  loadTable(filename: string | Request, separator?: string, header?: string, callback?: Function, errorCallback?: Function): Promise<object>;

  /**
   * Draws a plane.
   * 
   * A plane is a four-sided, flat shape with every angle measuring 90˚. It’s
   * similar to a rectangle and offers advanced drawing features in WebGL mode.
   * 
   * The first parameter, `width`, is optional. If a `Number` is passed, as in
   * `plane(20)`, it sets the plane’s width and height. By default, `width` is
   * 50.
   * 
   * The second parameter, `height`, is also optional. If a `Number` is passed,
   * as in `plane(20, 30)`, it sets the plane’s height. By default, `height` is
   * set to the plane’s `width`.
   * 
   * The third parameter, `detailX`, is also optional. If a `Number` is passed,
   * as in `plane(20, 30, 5)` it sets the number of triangle subdivisions to use
   * along the x-axis. All 3D shapes are made by connecting triangles to form
   * their surfaces. By default, `detailX` is 1.
   * 
   * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
   * as in `plane(20, 30, 5, 7)` it sets the number of triangle subdivisions to
   * use along the y-axis. All 3D shapes are made by connecting triangles to
   * form their surfaces. By default, `detailY` is 1.
   * 
   * Note: `plane()` can only be used in WebGL mode.
   * @param width width of the plane.
   * @param height height of the plane.
   * @param detailX number of triangle subdivisions along the x-axis.
   * @param detailY number of triangle subdivisions along the y-axis.
   */
  plane(width?: number, height?: number, detailX?: number, detailY?: number): void;

  /**
   * Sets the style of the joints that connect line segments.
   * 
   * Joints are either mitered (`MITER`), beveled (`BEVEL`), or rounded
   * (`ROUND`). The default joint is `MITER` in 2D mode and `ROUND` in WebGL
   * mode.
   * 
   * The argument passed to `strokeJoin()` must be written in ALL CAPS because
   * the constants `MITER`, `BEVEL`, and `ROUND` are defined this way.
   * JavaScript is a case-sensitive language.
   * 
   * Calling `strokeJoin()` without an argument returns the current stroke join style, either `MITER`, `BEVEL`, or `ROUND`.
   * @param join either MITER, BEVEL, or ROUND
   * @returns the current stroke join style.
   */
  strokeJoin(join: typeof P5.MITER | typeof P5.BEVEL | typeof P5.ROUND): typeof P5.MITER | typeof P5.BEVEL | typeof P5.ROUND;
  strokeJoin(): typeof P5.MITER | typeof P5.BEVEL | typeof P5.ROUND;

  /**
   * Applies an image filter to the canvas.
   * 
   * The preset options are:
   * 
   * `INVERT`
   * Inverts the colors in the image. No parameter is used.
   * 
   * `GRAY`
   * Converts the image to grayscale. No parameter is used.
   * 
   * `THRESHOLD`
   * Converts the image to black and white. Pixels with a grayscale value
   * above a given threshold are converted to white. The rest are converted to
   * black. The threshold must be between 0.0 (black) and 1.0 (white). If no
   * value is specified, 0.5 is used.
   * 
   * `OPAQUE`
   * Sets the alpha channel to entirely opaque. No parameter is used.
   * 
   * `POSTERIZE`
   * Limits the number of colors in the image. Each color channel is limited to
   * the number of colors specified. Values between 2 and 255 are valid, but
   * results are most noticeable with lower values. The default value is 4.
   * 
   * `BLUR`
   * Blurs the image. The level of blurring is specified by a blur radius. Larger
   * values increase the blur. The default value is 4. A gaussian blur is used
   * in `P2D` mode. A box blur is used in `WEBGL` mode.
   * 
   * `ERODE`
   * Reduces the light areas. No parameter is used.
   * 
   * `DILATE`
   * Increases the light areas. No parameter is used.
   * 
   * `filter()` uses WebGL in the background by default because it's faster.
   * This can be disabled in `P2D` mode by adding a `false` argument, as in
   * `filter(BLUR, false)`. This may be useful to keep computation off the GPU
   * or to work around a lack of WebGL support.
   * 
   * In WebgL mode, `filter()` can also use custom shaders. See
   * <a href="#/p5/createFilterShader">createFilterShader()</a> for more
   * information.
   * @param filterType either THRESHOLD, GRAY, OPAQUE, INVERT,
   * POSTERIZE, BLUR, ERODE, DILATE or BLUR.
   * @param filterParam parameter unique to each filter.
   * @param useWebGL flag to control whether to use fast
   * WebGL filters (GPU) or original image
   * filters (CPU); defaults to `true`.
   */
  filter(filterType: typeof P5.THRESHOLD | typeof P5.GRAY | typeof P5.OPAQUE | typeof P5.INVERT | typeof P5.POSTERIZE | typeof P5.BLUR | typeof P5.ERODE | typeof P5.DILATE | typeof P5.BLUR, filterParam?: number, useWebGL?: boolean): void;
  filter(filterType: typeof P5.THRESHOLD | typeof P5.GRAY | typeof P5.OPAQUE | typeof P5.INVERT | typeof P5.POSTERIZE | typeof P5.BLUR | typeof P5.ERODE | typeof P5.DILATE | typeof P5.BLUR, filterParam?: number, useWebGL?: boolean): void;
  filter(shaderFilter: P5.Shader): void;

  /**
   * Creates a `<span></span>` element.
   * 
   * `<span></span>` elements are commonly used as containers
   * for inline elements. For example, a `<span></span>`
   * can hold part of a sentence that's a
   * <span style="color: deeppink;">different</span> style.
   * 
   * The parameter `html` is optional. It accepts a string that sets the
   * inner HTML of the new `<span></span>`.
   * @param html inner HTML for the new `<span></span>` element.
   * @returns new <a href="#/p5.Element">p5.Element</a> object.
   */
  createSpan(html?: string): P5.Element;

  /**
   * Loads a new shader from a file that can be applied to the contents of the canvas with
   * <a href="#/p5/filter">`filter()`</a>. Pass the resulting shader into `filter()` to apply it.
   * 
   * Since this function loads data from another file, it returns a `Promise`.
   * Use it in an `async function setup`, and `await` its result.
   * 
   * `async function setup() {
   * createCanvas(50, 50, WEBGL);
   * let img = await loadImage('assets/bricks.jpg');
   * let myFilter = await loadFilterShader('myFilter.js');
   * 
   * image(img, -50, -50);
   * filter(myFilter);
   * describe('Bricks tinted red');
   * }`Inside your shader file, you can use p5.strands hooks to change parts of the shader. For
   * a filter shader, use `filterColor` to change each pixel on the canvas.
   * 
   * `// myFilter.js
   * filterColor.begin();
   * let result = getTexture(
   * filterColor.canvasContent,
   * filterColor.texCoord
   * );
   * // Zero out the green and blue channels, leaving red
   * result.g = 0;
   * result.b = 0;
   * filterColor.set(result);
   * filterColor.end();`Read the reference for <a href="#/p5/buildFilterShader">`buildFilterShader`</a>,
   * the version of `loadFilterShader` that takes in a function instead of a separate file,
   * for more examples.
   * 
   * The second parameter, `successCallback`, is optional. If a function is passed, as in
   * `loadFilterShader('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
   * `loadFilterShader('myShader.js', onLoaded)`.
   * @param filename path to a p5.strands JavaScript file or a GLSL fragment shader file
   * @param successCallback callback to be called once the shader is
   * loaded. Will be passed the
   * <a href="#/p5.Shader">p5.Shader</a> object.
   * @param failureCallback callback to be called if there is an error
   * loading the shader. Will be passed the
   * error event.
   * @returns a promise that resolves with a shader object
   */
  loadFilterShader(filename: string, successCallback?: Function, failureCallback?: Function): Promise<P5.Shader>;

  /**
   * Rotates the coordinate system about the x-axis in WebGL mode.
   * 
   * The parameter, `angle`, is the amount to rotate. For example, calling
   * `rotateX(1)` rotates the coordinate system about the x-axis by 1 radian.
   * `rotateX()` interprets angle values using the current
   * <a href="#/p5/angleMode">angleMode()</a>.
   * 
   * By default, transformations accumulate. For example, calling `rotateX(1)`
   * twice has the same effect as calling `rotateX(2)` once. The
   * <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions
   * can be used to isolate transformations within distinct drawing groups.
   * 
   * Note: Transformations are reset at the beginning of the draw loop. Calling
   * `rotateX(1)` inside the <a href="#/p5/draw">draw()</a> function won't cause
   * shapes to spin.
   * @param angle angle of rotation in the current <a href="#/p5/angleMode">angleMode()</a>.
   */
  rotateX(angle: number): void;

  /**
   * Creates and a new <a href="#/p5.Framebuffer">p5.Framebuffer</a> object.
   * 
   * <a href="#/p5.Framebuffer">p5.Framebuffer</a> objects are separate drawing
   * surfaces that can be used as textures in WebGL mode. They're similar to
   * <a href="#/p5.Graphics">p5.Graphics</a> objects and generally run much
   * faster when used as textures.
   * 
   * The parameter, `options`, is optional. An object can be passed to configure
   * the <a href="#/p5.Framebuffer">p5.Framebuffer</a> object. The available
   * properties are:
   * 
   * - `format`: data format of the texture, either `UNSIGNED_BYTE`, `FLOAT`, or `HALF_FLOAT`. Default is `UNSIGNED_BYTE`.
   * 
   * - `channels`: whether to store `RGB` or `RGBA` color channels. Default is to match the main canvas which is `RGBA`.
   * 
   * - `depth`: whether to include a depth buffer. Default is `true`.
   * 
   * - `depthFormat`: data format of depth information, either `UNSIGNED_INT` or `FLOAT`. Default is `FLOAT`.
   * 
   * - `stencil`: whether to include a stencil buffer for masking. `depth` must be `true` for this feature to work. Defaults to the value of `depth` which is `true`.
   * 
   * - `antialias`: whether to perform anti-aliasing. If set to `true`, as in `{ antialias: true }`, 2 samples will be used by default. The number of samples can also be set, as in `{ antialias: 4 }`. Default is to match <a href="#/p5/setAttributes">setAttributes()</a> which is `false` (`true` in Safari).
   * 
   * - `width`: width of the <a href="#/p5.Framebuffer">p5.Framebuffer</a> object. Default is to always match the main canvas width.
   * 
   * - `height`: height of the <a href="#/p5.Framebuffer">p5.Framebuffer</a> object. Default is to always match the main canvas height.
   * 
   * - `density`: pixel density of the <a href="#/p5.Framebuffer">p5.Framebuffer</a> object. Default is to always match the main canvas pixel density.
   * 
   * - `textureFiltering`: how to read values from the <a href="#/p5.Framebuffer">p5.Framebuffer</a> object. Either `LINEAR` (nearby pixels will be interpolated) or `NEAREST` (no interpolation). Generally, use `LINEAR` when using the texture as an image and `NEAREST` if reading the texture as data. Default is `LINEAR`.
   * 
   * If the `width`, `height`, or `density` attributes are set, they won't automatically match the main canvas and must be changed manually.
   * 
   * Note: `createFramebuffer()` can only be used in WebGL mode.
   * @param options configuration options.
   * @returns new framebuffer.
   */
  createFramebuffer(options?: { format?: typeof P5.UNSIGNED_BYTE | typeof P5.FLOAT | typeof P5.HALF_FLOAT; channels?: typeof P5.RGB | typeof P5.RGBA; depth?: boolean; depthFormat?: typeof P5.UNSIGNED_INT | typeof P5.FLOAT; stencil?: boolean; antialias?: boolean | number; width?: number; height?: number; density?: number; textureFiltering?: typeof P5.LINEAR | typeof P5.NEAREST }): P5.Framebuffer;

  /**
   * Creates an `<img>` element that can appear outside of the canvas.
   * 
   * The first parameter, `src`, is a string with the path to the image file.
   * `src` should be a relative path, as in `'assets/image.png'`, or a URL, as
   * in `'https://example.com/image.png'`.
   * 
   * The second parameter, `alt`, is a string with the
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#usage_notes" target="_blank">alternate text</a>
   * for the image. An empty string `''` can be used for images that aren't displayed.
   * 
   * The third parameter, `crossOrigin`, is optional. It's a string that sets the
   * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes" target="_blank">crossOrigin property</a>
   * of the image. Use `'anonymous'` or `'use-credentials'` to fetch the image
   * with cross-origin access.
   * 
   * The fourth parameter, `callback`, is also optional. It sets a function to
   * call after the image loads. The new image is passed to the callback
   * function as a <a href="#/p5.Element">p5.Element</a> object.
   * @param src relative path or URL for the image.
   * @param alt alternate text for the image.
   * @returns new <a href="#/p5.Element">p5.Element</a> object.
   */
  createImg(src: string, alt: string): P5.Element;
  createImg(src: string, alt: string, crossOrigin?: string, successCallback?: Function): P5.Element;

  /**
   * Sets the width of the stroke used for points, lines, and the outlines of
   * shapes.
   * 
   * Note: In 2D mode, `strokeWeight()` is affected by transformations,
   * especially calls to <a href="#/p5/scale">scale()</a>. It isn't affected by
   * transformations in WebGL and WebGPU modes.
   * 
   * Calling `strokeWeight()` without an argument returns the current stroke weight as a number.
   * @param weight the weight of the stroke (in pixels).
   * @returns the current stroke weight.
   */
  strokeWeight(weight: number): number;
  strokeWeight(): number;

  /**
   * Gets the red value of a color.
   * 
   * `red()` extracts the red 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, `red()` returns a color's red value in the range 0
   * to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to RGB, it
   * returns the red value in the given range.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a p5.Color object.
   * let c = color(175, 100, 220);
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'redValue' to 175.
   * let redValue = red(c);
   * 
   * // Draw the right rectangle.
   * fill(redValue, 0, 0);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is light purple and the right one is red.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a color array.
   * let c = [175, 100, 220];
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'redValue' to 175.
   * let redValue = red(c);
   * 
   * // Draw the right rectangle.
   * fill(redValue, 0, 0);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is light purple and the right one is red.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a CSS color string.
   * let c = 'rgb(175, 100, 220)';
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'redValue' to 175.
   * let redValue = red(c);
   * 
   * // Draw the right rectangle.
   * fill(redValue, 0, 0);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is light purple and the right one is red.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Use RGB color with values in the range 0-100.
   * colorMode(RGB, 100);
   * 
   * // Create a p5.Color object.
   * let c = color(69, 39, 86);
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'redValue' to 69.
   * let redValue = red(c);
   * 
   * // Draw the right rectangle.
   * fill(redValue, 0, 0);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is light purple and the right one is red.');
   * }`In p5.strands shader callbacks, `red()` operates on `vec4` values and
   * returns the red channel as a normalized value in the 0–1 range.
   * `colorMode()` has no effect inside shader callbacks.
   * 
   * `let myShader;
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildMaterialShader(myShaderBuilder);
   * }
   * 
   * function myShaderBuilder() {
   * finalColor.begin();
   * let c = color(200, 100, 50);
   * let r = red(c);
   * finalColor.set(vec4(r, 0, 0, 1.0));
   * finalColor.end();
   * }
   * 
   * function draw() {
   * shader(myShader);
   * noStroke();
   * sphere(40);
   * 
   * describe('A sphere colored using only its red channel.');
   * }`
   * @param color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
   * color components, or CSS color string.
   * @returns the red value.
   */
  red(color: P5.Color | number[] | string): number;

  /**
   * Calculates the cosine of an angle.
   * 
   * `cos()` is useful for many geometric tasks in creative coding. The values
   * returned oscillate between -1 and 1 as the input angle increases. `cos()`
   * calculates the cosine of an angle, using radians by default, or according
   * to if <a href="#/p5/angleMode">angleMode()</a> setting (RADIANS or DEGREES).
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * describe('A white ball on a string oscillates left and right.');
   * }
   * 
   * function draw() {
   * background(200);
   * 
   * // Calculate the coordinates.
   * let x = 30 * cos(frameCount * 0.05) + 50;
   * let y = 50;
   * 
   * // Draw the oscillator.
   * line(50, y, x, y);
   * circle(x, y, 20);
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * describe('A series of black dots form a wave pattern.');
   * }
   * 
   * function draw() {
   * // Calculate the coordinates.
   * let x = frameCount;
   * let y = 30 * cos(x * 0.1) + 50;
   * 
   * // Draw the point.
   * point(x, y);
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * describe('A series of black dots form an infinity symbol.');
   * }
   * 
   * function draw() {
   * // Calculate the coordinates.
   * let x = 30 * cos(frameCount * 0.1) + 50;
   * let y = 10 * sin(frameCount * 0.2) + 50;
   * 
   * // Draw the point.
   * point(x, y);
   * }``cos()` can also be used in shaders with p5.strands. The following example
   * uses `cos()` to smoothly oscillate the color of a shape over time.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere that fades between yellow and blue.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
   * let t = millis() * 0.001;
   * 
   * // cos(t) oscillates between -1 and 1.
   * // 0.5 + 0.5 * cos(t) remaps this to the 0 to 1 range.
   * let value = 0.5 + 0.5 * cos(t);
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let yellow = [1, 1, 0, 1];
   * let blue = [0, 0, 1, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between yellow (when value = 0) and blue (when value = 1).
   * finalColor.set(mix(yellow, blue, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param angle the angle, in radians by default, or according to if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or DEGREES).
   * @returns cosine of the angle.
   */
  cos(angle: number): number;

  /**
   * The <a href="#/p5/deviceMoved">deviceMoved()</a> function is called when the device is moved by more than
   * the threshold value along X, Y or Z axis. The default threshold is set to 0.5.
   * The threshold value can be changed using <a href="https://p5js.org/reference/p5/setMoveThreshold">setMoveThreshold()</a>.
   */
  deviceMoved(): void;

  /**
   * The <a href="#/p5/deviceTurned">deviceTurned()</a> function is called when the device rotates by
   * more than 90 degrees continuously.
   * 
   * The axis that triggers the <a href="#/p5/deviceTurned">deviceTurned()</a> method is stored in the turnAxis
   * variable. The <a href="#/p5/deviceTurned">deviceTurned()</a> method can be locked to trigger on any axis:
   * X, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.
   */
  deviceTurned(): void;

  /**
   * The <a href="#/p5/deviceShaken">deviceShaken()</a> function is called when the device total acceleration
   * changes of accelerationX and accelerationY values is more than
   * the threshold value. The default threshold is set to 30.
   * The threshold value can be changed using <a href="https://p5js.org/reference/p5/setShakeThreshold">setShakeThreshold()</a>.
   */
  deviceShaken(): void;

  /**
   * Sets the color used for the background of the canvas.
   * 
   * By default, the background is transparent. `background()` is typically used
   * within <a href="#/p5/draw">draw()</a> to clear the display window at the
   * beginning of each frame. It can also be used inside
   * <a href="#/p5/setup">setup()</a> to set the background on the first frame
   * of animation.
   * 
   * The version of `background()` with one parameter interprets the value one
   * of four ways. If the parameter is a `Number`, it's interpreted as a grayscale
   * value. If the parameter is a `String`, it's interpreted as a CSS color string.
   * RGB, RGBA, HSL, HSLA, hex, and named color strings are supported. If the
   * parameter is a <a href="#/p5.Color">p5.Color</a> object, it will be used as
   * the background color. If the parameter is a
   * <a href="#/p5.Image">p5.Image</a> object, it will be used as the background
   * image.
   * 
   * The version of `background()` with two parameters interprets the first one
   * as a grayscale value. The second parameter sets the alpha (transparency)
   * value.
   * 
   * The version of `background()` with three parameters interprets them as RGB,
   * HSB, or HSL colors, depending on the current
   * <a href="#/p5/colorMode">colorMode()</a>. By default, colors are specified
   * in RGB values. Calling `background(255, 204, 0)` sets the background a bright
   * yellow color.
   * 
   * The version of `background()` with four parameters interprets them as RGBA,
   * HSBA, or HSLA colors, depending on the current
   * <a href="#/p5/colorMode">colorMode()</a>. The last parameter sets the alpha
   * (transparency) value.
   * @param color any value created by the <a href="#/p5/color">color()</a> function
   */
  background(color: P5.Color): void;
  background(colorstring: string, a?: number): void;
  background(gray: number, a?: number): void;
  background(v1: number, v2: number, v3: number, a?: number): void;
  background(values: number[]): void;
  background(image: P5.Image, a?: number): void;

  /**
   * Creates a light that shines in one direction.
   * 
   * Directional lights don’t shine from a specific point. They’re like a sun
   * that shines from somewhere offscreen. The light’s direction is set using
   * three `(x, y, z)` values between -1 and 1. For example, setting a light’s
   * direction as `(1, 0, 0)` will light <a href="#/p5.Geometry">p5.Geometry</a>
   * objects from the left since the light faces directly to the right. A
   * maximum of 5 directional lights can be active at once.
   * 
   * There are four ways to call `directionalLight()` with parameters to set the
   * light’s color and direction.
   * 
   * The first way to call `directionalLight()` has six parameters. The first
   * three parameters, `v1`, `v2`, and `v3`, set the light’s color using the
   * current <a href="#/p5/colorMode">colorMode()</a>. The last three
   * parameters, `x`, `y`, and `z`, set the light’s direction. For example,
   * `directionalLight(255, 0, 0, 1, 0, 0)` creates a red `(255, 0, 0)` light
   * that shines to the right `(1, 0, 0)`.
   * 
   * The second way to call `directionalLight()` has four parameters. The first
   * three parameters, `v1`, `v2`, and `v3`, set the light’s color using the
   * current <a href="#/p5/colorMode">colorMode()</a>. The last parameter,
   * `direction` sets the light’s direction using a
   * <a href="#/p5.Vector">p5.Vector</a> object. For example,
   * `directionalLight(255, 0, 0, lightDir)` creates a red `(255, 0, 0)` light
   * that shines in the direction the `lightDir` vector points.
   * 
   * The third way to call `directionalLight()` has four parameters. The first
   * parameter, `color`, sets the light’s color using a
   * <a href="#/p5.Color">p5.Color</a> object or an array of color values. The
   * last three parameters, `x`, `y`, and `z`, set the light’s direction. For
   * example, `directionalLight(myColor, 1, 0, 0)` creates a light that shines
   * to the right `(1, 0, 0)` with the color value of `myColor`.
   * 
   * The fourth way to call `directionalLight()` has two parameters. The first
   * parameter, `color`, sets the light’s color using a
   * <a href="#/p5.Color">p5.Color</a> object or an array of color values. The
   * second parameter, `direction`, sets the light’s direction using a
   * <a href="#/p5.Vector">p5.Vector</a> object. For example,
   * `directionalLight(myColor, lightDir)` creates a light that shines in the
   * direction the `lightDir` vector points with the color value of `myColor`.
   * @param v1 red or hue value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   * @param v2 green or saturation value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   * @param v3 blue, brightness, or lightness value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   * @param x x-component of the light's direction between -1 and 1.
   * @param y y-component of the light's direction between -1 and 1.
   * @param z z-component of the light's direction between -1 and 1.
   */
  directionalLight(v1: number, v2: number, v3: number, x: number, y: number, z: number): void;
  directionalLight(v1: number, v2: number, v3: number, direction: P5.Vector): void;
  directionalLight(color: P5.Color | number[] | string, x: number, y: number, z: number): void;
  directionalLight(color: P5.Color | number[] | string, direction: P5.Vector): void;

  /**
   * Splits a `String` into pieces and returns an array containing the pieces.
   * 
   * `splitTokens()` is an enhanced version of
   * <a href="#/p5/split">split()</a>. It can split a string when any characters
   * from a list are detected.
   * 
   * The first parameter, `value`, is the string to split.
   * 
   * The second parameter, `delim`, is optional. It sets the character(s) that
   * should be used to split the string. `delim` can be a single string, as in
   * `splitTokens('rock...paper...scissors...shoot', '...')`, or an array of
   * strings, as in
   * `splitTokens('rock;paper,scissors...shoot, [';', ',', '...'])`. By default,
   * if no `delim` characters are specified, then any whitespace character is
   * used to split. Whitespace characters include tab (`\t`), line feed (`\n`),
   * carriage return (`\r`), form feed (`\f`), and space.
   * @param value string to split.
   * @param delim character(s) to use for splitting the string.
   * @returns separated strings.
   */
  splitTokens(value: string, delim?: string): string[];

  /**
   * Calculates a number between two numbers at a specific increment.
   * 
   * The `amt` parameter is the amount to interpolate between the two numbers.
   * 0.0 is equal to the first number, 0.1 is very near the first number, 0.5 is
   * half-way in between, and 1.0 is equal to the second number. The `lerp()`
   * function is convenient for creating motion along a straight path and for
   * drawing dotted lines.
   * 
   * If the value of `amt` is less than 0 or more than 1, `lerp()` will return a
   * number outside of the original interval. For example, calling
   * `lerp(0, 10, 1.5)` will return 15.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Declare variables for coordinates.
   * let a = 20;
   * let b = 80;
   * let c = lerp(a, b, 0.2);
   * let d = lerp(a, b, 0.5);
   * let e = lerp(a, b, 0.8);
   * 
   * strokeWeight(5);
   * 
   * // Draw the original points in black.
   * stroke(0);
   * point(a, 50);
   * point(b, 50);
   * 
   * // Draw the lerped points in gray.
   * stroke(100);
   * point(c, 50);
   * point(d, 50);
   * point(e, 50);
   * 
   * describe('Five points in a horizontal line. The outer points are black and the inner points are gray.');
   * }``let x = 50;
   * let y = 50;
   * let targetX = 50;
   * let targetY = 50;
   * 
   * function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * describe('A white circle at the center of a gray canvas. The circle moves to where the user clicks, then moves smoothly back to the center.');
   * }
   * 
   * function draw() {
   * background(220);
   * 
   * // Move x and y toward the target.
   * x = lerp(x, targetX, 0.05);
   * y = lerp(y, targetY, 0.05);
   * 
   * // Draw the circle.
   * circle(x, y, 20);
   * }
   * 
   * // Set x and y when the user clicks the mouse.
   * function mouseClicked() {
   * x = mouseX;
   * y = mouseY;
   * }``lerp()` can also be used in shaders with p5.strands, where it maps to the
   * <a href="#/p5/mix">mix()</a> function in GLSL. The following example
   * uses `lerp()` to blend colors on a shape over time.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere that blends between teal and coral.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
   * let t = millis() * 0.001;
   * 
   * // sin(t) goes between -1 and 1 over time.
   * // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
   * let value = 0.5 + 0.5 * sin(t);
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let teal = [0, 0.8, 0.8, 1];
   * let coral = [1, 0.5, 0.3, 1];
   * 
   * finalColor.begin();
   * 
   * // lerp() blends teal (when value = 0) and coral (when value = 1).
   * finalColor.set(lerp(teal, coral, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param start first value.
   * @param stop second value.
   * @param amt number.
   * @returns lerped value.
   */
  lerp(start: number, stop: number, amt: number): number;

  /**
   * A function that's called once when any key is pressed.
   * 
   * Declaring the function `keyPressed()` sets a code block to run once
   * automatically when the user presses any key:
   * 
   * `function keyPressed() {
   * // Code to run.
   * }`The <a href="#/p5/key">key</a> and <a href="#/p5/keyCode">keyCode</a>
   * variables will be updated with the most recently typed value when
   * `keyPressed()` is called by p5.js:
   * 
   * `function keyPressed() {
   * if (key === 'c') {
   * // Code to run.
   * }
   * 
   * if (keyCode === 13) { // Enter key
   * // Code to run.
   * }
   * }`The parameter, `event`, is optional. `keyPressed()` is always passed a
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent" target="_blank">KeyboardEvent</a>
   * object with properties that describe the key press event:
   * 
   * `function keyPressed(event) {
   * // Code to run that uses the event.
   * console.log(event);
   * }`Browsers may have default behaviors attached to various key events. For
   * example, some browsers may jump to the bottom of a web page when the
   * `SPACE` key is pressed. To prevent any default behavior for this event, add
   * `return false;` to the end of the function.
   * @param event optional `KeyboardEvent` callback argument.
   */
  keyPressed(event?: KeyboardEvent): void;

  /**
   * Draws a box (rectangular prism).
   * 
   * A box is a 3D shape with six faces. Each face makes a 90˚ with four
   * neighboring faces.
   * 
   * The first parameter, `width`, is optional. If a `Number` is passed, as in
   * `box(20)`, it sets the box’s width and height. By default, `width` is 50.
   * 
   * The second parameter, `height`, is also optional. If a `Number` is passed,
   * as in `box(20, 30)`, it sets the box’s height. By default, `height` is set
   * to the box’s `width`.
   * 
   * The third parameter, `depth`, is also optional. If a `Number` is passed, as
   * in `box(20, 30, 40)`, it sets the box’s depth. By default, `depth` is set
   * to the box’s `height`.
   * 
   * The fourth parameter, `detailX`, is also optional. If a `Number` is passed,
   * as in `box(20, 30, 40, 5)`, it sets the number of triangle subdivisions to
   * use along the x-axis. All 3D shapes are made by connecting triangles to
   * form their surfaces. By default, `detailX` is 1.
   * 
   * The fifth parameter, `detailY`, is also optional. If a number is passed, as
   * in `box(20, 30, 40, 5, 7)`, it sets the number of triangle subdivisions to
   * use along the y-axis. All 3D shapes are made by connecting triangles to
   * form their surfaces. By default, `detailY` is 1.
   * 
   * Note: `box()` can only be used in WebGL mode.
   * @param width width of the box.
   * @param height height of the box.
   * @param depth depth of the box.
   * @param detailX number of triangle subdivisions along the x-axis.
   * @param detailY number of triangle subdivisions along the y-axis.
   */
  box(width?: number, height?: number, depth?: number, detailX?: number, detailY?: number): void;

  /**
   * Clears the depth buffer in WebGL mode.
   * 
   * `clearDepth()` clears information about how far objects are from the camera
   * in 3D space. This information is stored in an object called the
   * depth buffer. Clearing the depth buffer ensures new objects aren't drawn
   * behind old ones. Doing so can be useful for feedback effects in which the
   * previous frame serves as the background for the current frame.
   * 
   * The parameter, `depth`, is optional. If a number is passed, as in
   * `clearDepth(0.5)`, it determines the range of objects to clear from the
   * depth buffer. 0 doesn't clear any depth information, 0.5 clears depth
   * information halfway between the near and far clipping planes, and 1 clears
   * depth information all the way to the far clipping plane. By default,
   * `depth` is 1.
   * 
   * Note: `clearDepth()` can only be used in WebGL mode.
   * @param depth amount of the depth buffer to clear between 0
   * (none) and 1 (far clipping plane). Defaults to 1.
   */
  clearDepth(depth?: number): void;

  /**
   * Adds a Bézier curve segment to a custom shape.
   * 
   * `bezierVertex()` adds a curved segment to custom shapes. The Bézier curves
   * it creates are defined like those made by the
   * <a href="#/p5/bezier">bezier()</a> function. `bezierVertex()` must be
   * called between the
   * <a href="#/p5/beginShape">beginShape()</a> and
   * <a href="#/p5/endShape">endShape()</a> functions.
   * Bézier need a starting point. Building a shape
   * only with Bézier curves needs one initial
   * call to <a href="#/p5/vertex">bezierVertex()</a>, before
   * a number of `bezierVertex()` calls that is a multiple of the parameter
   * set by <a href="#/p5/bezierOrder">bezierOrder(...)</a> (default 3).
   * But shapes can mix different types of vertices, so if there
   * are some previous vertices, then the initial anchor is not needed,
   * only the multiples of 3 (or the Bézier order) calls to
   * `bezierVertex` for each curve.
   * 
   * Each curve of order 3 requires three calls to `bezierVertex`, so
   * 2 curves would need 7 calls to `bezierVertex()`:
   * (1 one initial anchor point, two sets of 3 curves describing the curves)
   * With `bezierOrder(2)`, two curves would need 5 calls: 1 + 2 + 2.
   * 
   * Bézier curves can also be drawn in 3D using WebGL mode.
   * 
   * Note: `bezierVertex()` won’t work when an argument is passed to
   * <a href="#/p5/beginShape">beginShape()</a>.
   * @param x x-coordinate of the first control point.
   * @param y y-coordinate of the first control point.
   */
  bezierVertex(x: number, y: number, u?: number, v?: number): void;
  bezierVertex(x: number, y: number, z: number, u?: number, v?: number): void;

  /**
   * Creates an `<a></a>` element that links to another web page.
   * 
   * The first parmeter, `href`, is a string that sets the URL of the linked
   * page.
   * 
   * The second parameter, `html`, is a string that sets the inner HTML of the
   * link. It's common to use text, images, or buttons as links.
   * 
   * The third parameter, `target`, is optional. It's a string that tells the
   * web browser where to open the link. By default, links open in the current
   * browser tab. Passing `'_blank'` will cause the link to open in a new
   * browser tab. MDN describes a few
   * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target" target="_blank">other options</a>.
   * @param href URL of linked page.
   * @param html inner HTML of link element to display.
   * @param target target where the new link should open,
   * either `'_blank'`, `'_self'`, `'_parent'`, or `'_top'`.
   * @returns new <a href="#/p5.Element">p5.Element</a> object.
   */
  createA(href: string, html: string, target?: string): P5.Element;

  /**
   * Captures a sequence of frames from the canvas that can be saved as images.
   * 
   * `saveFrames()` creates an array of frame objects. Each frame is stored as
   * an object with its file type, file name, and image data as a string. For
   * example, the first saved frame might have the following properties:
   * 
   * `{ ext: 'png', filenmame: 'frame0', imageData: 'data:image/octet-stream;base64, abc123' }`.
   * 
   * The first parameter, `filename`, sets the prefix for the file names. For
   * example, setting the prefix to `'frame'` would generate the image files
   * `frame0.png`, `frame1.png`, and so on.
   * 
   * The second parameter, `extension`, sets the file type to either `'png'` or
   * `'jpg'`.
   * 
   * The third parameter, `duration`, sets the duration to record in seconds.
   * The maximum duration is 15 seconds.
   * 
   * The fourth parameter, `framerate`, sets the number of frames to record per
   * second. The maximum frame rate value is 22. Limits are placed on `duration`
   * and `framerate` to avoid using too much memory. Recording large canvases
   * can easily crash sketches or even web browsers.
   * 
   * The fifth parameter, `callback`, is optional. If a function is passed,
   * image files won't be saved by default. The callback function can be used
   * to process an array containing the data for each captured frame. The array
   * of image data contains a sequence of objects with three properties for each
   * frame: `imageData`, `filename`, and `extension`.
   * 
   * Note: Frames are downloaded as individual image files by default.
   * @param filename prefix of file name.
   * @param extension file extension, either 'jpg' or 'png'.
   * @param duration duration in seconds to record. This parameter will be constrained to be less or equal to 15.
   * @param framerate number of frames to save per second. This parameter will be constrained to be less or equal to 22.
   * @param callback callback function that will be executed
   * to handle the image data. This function
   * should accept an array as argument. The
   * array will contain the specified number of
   * frames of objects. Each object has three
   * properties: `imageData`, `filename`, and `extension`.
   */
  saveFrames(filename: string, extension: string, duration: number, framerate: number, callback?: (arg0: any[]) => void): void;

  /**
   * Draws a straight line between two points.
   * 
   * A line's default width is one pixel. The version of `line()` with four
   * parameters draws the line in 2D. To color a line, use the
   * <a href="#/p5/stroke">stroke()</a> function. To change its width, use the
   * <a href="#/p5/strokeWeight">strokeWeight()</a> function. A line
   * can't be filled, so the <a href="#/p5/fill">fill()</a> function won't
   * affect the line's color.
   * 
   * The version of `line()` with six parameters allows the line to be drawn in
   * 3D space. Doing so requires adding the `WEBGL` argument to
   * <a href="#/p5/createCanvas">createCanvas()</a>.
   * @param x1 the x-coordinate of the first point.
   * @param y1 the y-coordinate of the first point.
   * @param x2 the x-coordinate of the second point.
   * @param y2 the y-coordinate of the second point.
   */
  line(x1: number, y1: number, x2: number, y2: number): void;
  line(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number): void;

  /**
   * Clears the pixels on the canvas.
   * 
   * `clear()` makes every pixel 100% transparent. Calling `clear()` doesn't
   * clear objects created by `createX()` functions such as
   * <a href="#/p5/createGraphics">createGraphics()</a>,
   * <a href="#/p5/createVideo">createVideo()</a>, and
   * <a href="#/p5/createImg">createImg()</a>. These objects will remain
   * unchanged after calling `clear()` and can be redrawn.
   * 
   * In WebGL mode, this function can clear the screen to a specific color. It
   * interprets four numeric parameters as normalized RGBA color values. It also
   * clears the depth buffer. If you are not using the WebGL renderer, these
   * parameters will have no effect.
   * @param r normalized red value.
   * @param g normalized green value.
   * @param b normalized blue value.
   * @param a normalized alpha value.
   */
  clear(r?: number, g?: number, b?: number, a?: number): void;
  clear(): void;

  /**
   * A function that's called once when the sketch begins running.
   * 
   * Declaring the function `setup()` sets a code block to run once
   * automatically when the sketch starts running. It's used to perform
   * setup tasks such as creating the canvas and initializing variables:
   * 
   * `function setup() {
   * // Code to run once at the start of the sketch.
   * }`Code placed in `setup()` will run once before code placed in
   * <a href="#/p5/draw">draw()</a> begins looping.
   * If `setup()` is declared `async` (e.g. `async function setup()`),
   * execution pauses at each `await` until its promise resolves.
   * For example, `font = await loadFont(...)` waits for the font asset
   * to load because `loadFont()` function returns a promise, and the await
   * keyword means the program will wait for the promise to resolve.
   * This ensures that all assets are fully loaded before the sketch continues.
   * 
   * loading assets.
   * 
   * Note: `setup()` doesn’t have to be declared, but it’s common practice to do so.
   */
  setup(): void | Promise<void>;

  /**
   * A function that's called repeatedly while the sketch runs.
   * 
   * Declaring the function `draw()` sets a code block to run repeatedly
   * once the sketch starts. It’s used to create animations and respond to
   * user inputs:
   * 
   * `function draw() {
   * // Code to run repeatedly.
   * }`This is often called the "draw loop" because p5.js calls the code in
   * `draw()` in a loop behind the scenes. By default, `draw()` tries to run
   * 60 times per second. The actual rate depends on many factors. The
   * drawing rate, called the "frame rate", can be controlled by calling
   * <a href="#/p5/frameRate">frameRate()</a>. The number of times `draw()`
   * has run is stored in the system variable
   * <a href="#/p5/frameCount">frameCount()</a>.
   * 
   * Code placed within `draw()` begins looping after
   * <a href="#/p5/setup">setup()</a> runs. `draw()` will run until the user
   * closes the sketch. `draw()` can be stopped by calling the
   * <a href="#/p5/noLoop">noLoop()</a> function. `draw()` can be resumed by
   * calling the <a href="#/p5/loop">loop()</a> function.
   */
  draw(): void;

  /**
   * Converts a `Number` or `String` to a single-character `String`.
   * 
   * `char()` converts numbers to their single-character string representations.
   * 
   * The parameter, `n`, is the value to convert. If a number is passed, as in
   * `char(65)`, the corresponding single-character string is returned. If a
   * string is passed, as in `char('65')`, the string is converted to an integer
   * (whole number) and the corresponding single-character string is returned.
   * If an array is passed, as in `char([65, 66, 67])`, an array of
   * single-character strings is returned.
   * 
   * See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode" target="_blank">MDN</a>
   * for more information about conversions.
   * @param n value to convert.
   * @returns converted single-character string.
   */
  char(n: string | number): string;
  char(ns: any[]): string[];

  /**
   * Rotates the coordinate system about the y-axis in WebGL mode.
   * 
   * The parameter, `angle`, is the amount to rotate. For example, calling
   * `rotateY(1)` rotates the coordinate system about the y-axis by 1 radian.
   * `rotateY()` interprets angle values using the current
   * <a href="#/p5/angleMode">angleMode()</a>.
   * 
   * By default, transformations accumulate. For example, calling `rotateY(1)`
   * twice has the same effect as calling `rotateY(2)` once. The
   * <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions
   * can be used to isolate transformations within distinct drawing groups.
   * 
   * Note: Transformations are reset at the beginning of the draw loop. Calling
   * `rotateY(1)` inside the <a href="#/p5/draw">draw()</a> function won't cause
   * shapes to spin.
   * @param angle angle of rotation in the current <a href="#/p5/angleMode">angleMode()</a>.
   */
  rotateY(angle: number): void;

  /**
   * Adds a grid and an axes icon to clarify orientation in 3D sketches.
   * 
   * `debugMode()` adds a grid that shows where the “ground” is in a sketch. By
   * default, the grid will run through the origin `(0, 0, 0)` of the sketch
   * along the XZ plane. `debugMode()` also adds an axes icon that points along
   * the positive x-, y-, and z-axes. Calling `debugMode()` displays the grid
   * and axes icon with their default size and position.
   * 
   * There are four ways to call `debugMode()` with optional parameters to
   * customize the debugging environment.
   * 
   * The first way to call `debugMode()` has one parameter, `mode`. If the
   * system constant `GRID` is passed, as in `debugMode(GRID)`, then the grid
   * will be displayed and the axes icon will be hidden. If the constant `AXES`
   * is passed, as in `debugMode(AXES)`, then the axes icon will be displayed
   * and the grid will be hidden.
   * 
   * The second way to call `debugMode()` has six parameters. The first
   * parameter, `mode`, selects either `GRID` or `AXES` to be displayed. The
   * next five parameters, `gridSize`, `gridDivisions`, `xOff`, `yOff`, and
   * `zOff` are optional. They’re numbers that set the appearance of the grid
   * (`gridSize` and `gridDivisions`) and the placement of the axes icon
   * (`xOff`, `yOff`, and `zOff`). For example, calling
   * `debugMode(20, 5, 10, 10, 10)` sets the `gridSize` to 20 pixels, the number
   * of `gridDivisions` to 5, and offsets the axes icon by 10 pixels along the
   * x-, y-, and z-axes.
   * 
   * The third way to call `debugMode()` has five parameters. The first
   * parameter, `mode`, selects either `GRID` or `AXES` to be displayed. The
   * next four parameters, `axesSize`, `xOff`, `yOff`, and `zOff` are optional.
   * They’re numbers that set the appearance of the size of the axes icon
   * (`axesSize`) and its placement (`xOff`, `yOff`, and `zOff`).
   * 
   * The fourth way to call `debugMode()` has nine optional parameters. The
   * first five parameters, `gridSize`, `gridDivisions`, `gridXOff`, `gridYOff`,
   * and `gridZOff` are numbers that set the appearance of the grid. For
   * example, calling `debugMode(100, 5, 0, 0, 0)` sets the `gridSize` to 100,
   * the number of `gridDivisions` to 5, and sets all the offsets to 0 so that
   * the grid is centered at the origin. The next four parameters, `axesSize`,
   * `xOff`, `yOff`, and `zOff` are numbers that set the appearance of the size
   * of the axes icon (`axesSize`) and its placement (`axesXOff`, `axesYOff`,
   * and `axesZOff`). For example, calling
   * `debugMode(100, 5, 0, 0, 0, 50, 10, 10, 10)` sets the `gridSize` to 100,
   * the number of `gridDivisions` to 5, and sets all the offsets to 0 so that
   * the grid is centered at the origin. It then sets the `axesSize` to 50 and
   * offsets the icon 10 pixels along each axis.
   */
  debugMode(): void;
  debugMode(mode: typeof P5.GRID | typeof P5.AXES): void;
  debugMode(mode: typeof P5.GRID | typeof P5.AXES, gridSize?: number, gridDivisions?: number, xOff?: number, yOff?: number, zOff?: number): void;
  debugMode(mode: typeof P5.GRID | typeof P5.AXES, axesSize?: number, xOff?: number, yOff?: number, zOff?: number): void;
  debugMode(gridSize?: number, gridDivisions?: number, gridXOff?: number, gridYOff?: number, gridZOff?: number, axesSize?: number, axesXOff?: number, axesYOff?: number, axesZOff?: number): void;

  /**
   * Rotates the camera in a clockwise/counter-clockwise direction.
   * 
   * Rolling rotates the camera without changing its orientation. The rotation
   * happens in the camera’s "local" space.
   * 
   * The parameter, `angle`, is the angle the camera should rotate. Passing a
   * positive angle, as in `myCamera.roll(0.001)`, rotates the camera in counter-clockwise direction.
   * Passing a negative angle, as in `myCamera.roll(-0.001)`, rotates the
   * camera in clockwise direction.
   * 
   * Note: Angles are interpreted based on the current
   * <a href="#/p5/angleMode">angleMode()</a>.
   * @param angle amount to rotate camera in current
   * <a href="#/p5/angleMode">angleMode</a> units.
   */
  roll(angle: number): void;

  /**
   * Draws a curve using a Catmull-Rom spline.
   * 
   * Spline curves can form shapes and curves that slope gently. They’re like
   * cables that are attached to a set of points. By default (`ends: INCLUDE`),
   * the curve passes through all four points you provide, in order
   * `p0(x1,y1)` -> `p1(x2,y2)` -> `p2(x3,y3)` -> `p3(x4,y4)`. Think of them as
   * points on a curve. If you switch to `ends: EXCLUDE`, p0 and p3 act
   * like control points and only the middle span `p1->p2` is drawn.
   * 
   * Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
   * `spline()` has twelve arguments because each point has x-, y-, and
   * z-coordinates.
   * @param x1 x-coordinate of point p0.
   * @param y1 y-coordinate of point p0.
   * @param x2 x-coordinate of point p1.
   * @param y2 y-coordinate of point p1.
   * @param x3 x-coordinate of point p2.
   * @param y3 y-coordinate of point p2.
   * @param x4 x-coordinate of point p3.
   * @param y4 y-coordinate of point p3.
   */
  spline(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): void;
  spline(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number, x3: number, y3: number, z3: number, x4: number, y4: number, z4: number): void;

  /**
   * Calculates the sine of an angle.
   * 
   * `sin()` is useful for many geometric tasks in creative coding. The values
   * returned oscillate between -1 and 1 as the input angle increases. `sin()`
   * calculates the sine of an angle, using radians by default, or according to
   * if <a href="#/p5/angleMode">angleMode()</a> setting (RADIANS or DEGREES).
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * describe('A white ball on a string oscillates up and down.');
   * }
   * 
   * function draw() {
   * background(200);
   * 
   * // Calculate the coordinates.
   * let x = 50;
   * let y = 30 * sin(frameCount * 0.05) + 50;
   * 
   * // Draw the oscillator.
   * line(50, y, x, y);
   * circle(x, y, 20);
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * describe('A series of black dots form a wave pattern.');
   * }
   * 
   * function draw() {
   * // Calculate the coordinates.
   * let x = frameCount;
   * let y = 30 * sin(x * 0.1) + 50;
   * 
   * // Draw the point.
   * point(x, y);
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * describe('A series of black dots form an infinity symbol.');
   * }
   * 
   * function draw() {
   * // Calculate the coordinates.
   * let x = 30 * cos(frameCount * 0.1) + 50;
   * let y = 10 * sin(frameCount * 0.2) + 50;
   * 
   * // Draw the point.
   * point(x, y);
   * }``sin()` can also be used in shaders with p5.strands. The following example
   * uses `sin()` to oscillate the color of a shape over time.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere that pulses between cyan and magenta.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
   * let t = millis() * 0.001;
   * 
   * // sin(t) oscillates between -1 and 1.
   * // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
   * let value = 0.5 + 0.5 * sin(t);
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let cyan = [0, 1, 1, 1];
   * let magenta = [1, 0, 1, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between cyan (when value = 0) and magenta (when value = 1).
   * finalColor.set(mix(cyan, magenta, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param angle the angle, in radians by default, or according to if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or DEGREES).
   * @returns sine of the angle.
   */
  sin(angle: number): number;

  /**
   * Loads an XML file to create a <a href="#/p5.XML">p5.XML</a> object.
   * 
   * Extensible Markup Language
   * (<a href="https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction" target="_blank">XML</a>)
   * is a standard format for sending data between applications. Like HTML, the
   * XML format is based on tags and attributes, as in
   * `<time units="s">1234</time>`.
   * 
   * The first parameter, `path`, is always a string with the path to the file.
   * Paths to local files should be relative, as in
   * `loadXML('assets/data.xml')`. URLs such as `'https://example.com/data.xml'`
   * may be blocked due to browser security. The `path` parameter can also be defined
   * as a `Request`
   * object for more advanced usage.
   * 
   * The second parameter, `successCallback`, is optional. If a function is
   * passed, as in `loadXML('assets/data.xml', handleData)`, then the
   * `handleData()` function will be called once the data loads. The
   * <a href="#/p5.XML">p5.XML</a> object created from the data will be passed
   * to `handleData()` as its only argument. The return value of the `handleData()`
   * function will be used as the final return value of `loadXML('assets/data.xml', handleData)`.
   * 
   * The third parameter, `failureCallback`, is also optional. If a function is
   * passed, as in `loadXML('assets/data.xml', handleData, handleFailure)`, then
   * the `handleFailure()` function will be called if an error occurs while
   * loading. The `Error` object will be passed to `handleFailure()` as its only
   * argument. The return value of the `handleFailure()` function will be used as the
   * final return value of `loadXML('assets/data.xml', handleData, handleFailure)`.
   * 
   * This function returns a `Promise` and should be used in an `async` setup with
   * `await`. See the examples for the usage syntax.
   * @param path path of the XML file to be loaded.
   * @param successCallback function to call once the data is
   * loaded. Will be passed the
   * <a href="#/p5.XML">p5.XML</a> object.
   * @param errorCallback function to call if the data fails to
   * load. Will be passed an `Error` event
   * object.
   * @returns XML data loaded into a <a href="#/p5.XML">p5.XML</a>
   * object.
   */
  loadXML(path: string | Request, successCallback?: Function, errorCallback?: Function): Promise<P5.XML>;

  /**
   * Gets a pixel or a region of pixels from the canvas.
   * 
   * `get()` is easy to use but it's not as fast as
   * <a href="#/p5/pixels">pixels</a>. Use <a href="#/p5/pixels">pixels</a>
   * to read many pixel values.
   * 
   * The version of `get()` with no parameters returns the entire canvas.
   * 
   * The version of `get()` with two parameters interprets them as
   * coordinates. It returns an array with the `[R, G, B, A]` values of the
   * pixel at the given point.
   * 
   * The version of `get()` with four parameters interprets them as coordinates
   * and dimensions. It returns a subsection of the canvas as a
   * <a href="#/p5.Image">p5.Image</a> object. The first two parameters are the
   * coordinates for the upper-left corner of the subsection. The last two
   * parameters are the width and height of the subsection.
   * 
   * Use <a href="#/p5.Image/get">p5.Image.get()</a> to work directly with
   * <a href="#/p5.Image">p5.Image</a> objects.
   * @param x x-coordinate of the pixel.
   * @param y y-coordinate of the pixel.
   * @param w width of the subsection to be returned.
   * @param h height of the subsection to be returned.
   * @returns subsection as a <a href="#/p5.Image">p5.Image</a> object.
   */
  get(x: number, y: number, w: number, h: number): P5.Image;
  get(): P5.Image;
  get(x: number, y: number): number[];

  /**
   * Calculates the natural logarithm (the base-e logarithm) of a number.
   * 
   * `log()` expects the `n` parameter to be a value greater than 0 because
   * the natural logarithm is defined that way.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Top-left.
   * let d = log(50);
   * circle(33, 33, d);
   * 
   * // Bottom-right.
   * d = log(500000000);
   * circle(67, 67, d);
   * 
   * describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is about five times larger.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * describe('A series of black dots that get higher slowly from left to right.');
   * }
   * 
   * function draw() {
   * // Invert the y-axis.
   * scale(1, -1);
   * translate(0, -100);
   * 
   * // Calculate coordinates.
   * let x = frameCount;
   * let y = 15 * log(x);
   * 
   * // Draw a point.
   * point(x, y);
   * }``log()` can also be used in shaders with p5.strands. The following example
   * uses `log()` to create a decelerating color transition on a shape.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere that slowly shifts from purple to yellow.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
   * let t = millis() * 0.001;
   * 
   * // log(1 + t * 2) grows at a moderate pace over time.
   * // Multiply by 0.4 to bring it into the 0 to 1 range.
   * // min(..., 1) caps the value at 1.
   * let value = min(log(1 + t * 2) * 0.4, 1);
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let purple = [0.5, 0, 0.5, 1];
   * let yellow = [1, 1, 0, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between purple (when value = 0) and yellow (when value = 1).
   * // Because log() slows down over time, the color transition decelerates.
   * finalColor.set(mix(purple, yellow, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param n number greater than 0.
   * @returns natural logarithm of n.
   */
  log(n: number): number;

  /**
   * 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[];

  /**
   * Gets the green value of a color.
   * 
   * `green()` extracts the green 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, `green()` returns a color's green value in the range 0
   * to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to RGB, it
   * returns the green value in the given range.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a p5.Color object.
   * let c = color(175, 100, 220);
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'greenValue' to 100.
   * let greenValue = green(c);
   * 
   * // Draw the right rectangle.
   * fill(0, greenValue, 0);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is light purple and the right one is dark green.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a color array.
   * let c = [175, 100, 220];
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'greenValue' to 100.
   * let greenValue = green(c);
   * 
   * // Draw the right rectangle.
   * fill(0, greenValue, 0);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is light purple and the right one is dark green.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a CSS color string.
   * let c = 'rgb(175, 100, 220)';
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'greenValue' to 100.
   * let greenValue = green(c);
   * 
   * // Draw the right rectangle.
   * fill(0, greenValue, 0);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is light purple and the right one is dark green.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Use RGB color with values in the range 0-100.
   * colorMode(RGB, 100);
   * 
   * // Create a p5.Color object using RGB values.
   * let c = color(69, 39, 86);
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'greenValue' to 39.
   * let greenValue = green(c);
   * 
   * // Draw the right rectangle.
   * fill(0, greenValue, 0);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is light purple and the right one is dark green.');
   * }`In p5.strands shader callbacks, `green()` operates on `vec4` values and
   * returns the green channel as a normalized value in the 0–1 range.
   * `colorMode()` has no effect inside shader callbacks.
   * 
   * `let myShader;
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildMaterialShader(myShaderBuilder);
   * }
   * 
   * function myShaderBuilder() {
   * finalColor.begin();
   * let c = color(50, 200, 100);
   * let g = green(c);
   * finalColor.set(vec4(0, g, 0, 1.0));
   * finalColor.end();
   * }
   * 
   * function draw() {
   * shader(myShader);
   * noStroke();
   * sphere(40);
   * 
   * describe('A sphere colored using only its green channel.');
   * }`
   * @param color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
   * color components, or CSS color string.
   * @returns the green value.
   */
  green(color: P5.Color | number[] | string): 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;

  /**
   * 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[];

  /**
   * Turns off <a href="#/p5/debugMode">debugMode()</a> in a 3D sketch.
   */
  noDebugMode(): void;

  /**
   * Draws a sphere.
   * 
   * A sphere is a 3D shape with triangular faces that connect to form a round
   * surface. Spheres with few faces look like crystals. Spheres with many faces
   * have smooth surfaces and look like balls.
   * 
   * The first parameter, `radius`, is optional. If a `Number` is passed, as in
   * `sphere(20)`, it sets the radius of the sphere. By default, `radius` is 50.
   * 
   * The second parameter, `detailX`, is also optional. If a `Number` is passed,
   * as in `sphere(20, 5)`, it sets the number of triangle subdivisions to use
   * along the x-axis. All 3D shapes are made by connecting triangles to form
   * their surfaces. By default, `detailX` is 24.
   * 
   * The third parameter, `detailY`, is also optional. If a `Number` is passed,
   * as in `sphere(20, 5, 2)`, it sets the number of triangle subdivisions to
   * use along the y-axis. All 3D shapes are made by connecting triangles to
   * form their surfaces. By default, `detailY` is 16.
   * 
   * Note: `sphere()` can only be used in WebGL mode.
   * @param radius radius of the sphere. Defaults to 50.
   * @param detailX number of triangle subdivisions along the x-axis. Defaults to 24.
   * @param detailY number of triangle subdivisions along the y-axis. Defaults to 16.
   */
  sphere(radius?: number, detailX?: number, detailY?: number): void;

  /**
   * 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;

  /**
   * This method is suitable for fetching files up to size of 64MB.
   * @param file name of the file or URL to load
   * @param callback function to be executed after <a href="#/p5/loadBytes">loadBytes()</a>
   * completes
   * @param errorCallback function to be executed if there
   * is an error
   * @returns a Uint8Array containing the loaded buffer
   */
  loadBytes(file: string | Request, callback?: Function, errorCallback?: Function): Promise<Uint8Array>;

  /**
   * Creates a <a href="#/p5.Shader">p5.Shader</a> object to be used with the
   * <a href="#/p5/filter">filter()</a> function.
   * 
   * The main way to use `buildFilterShader` is to pass a function in as a parameter.
   * This will let you create a shader using p5.strands.
   * 
   * In your function, you can use <a href="#/p5/filterColor">`filterColor`</a> with a function
   * that will be called for each pixel on the image to determine its final color. You can
   * read the color of the current pixel with `getTexture(canvasContent, coord)`.
   * See <a href="#/p5/getTexture">getTexture()</a>.
   * 
   * `async function setup() {
   * createCanvas(50, 50, WEBGL);
   * let img = await loadImage('assets/bricks.jpg');
   * let myFilter = buildFilterShader(tintShader);
   * 
   * image(img, -50, -50);
   * filter(myFilter);
   * describe('Bricks tinted red');
   * }
   * 
   * function tintShader() {
   * filterColor.begin();
   * let result = getTexture(
   * filterColor.canvasContent,
   * filterColor.texCoord
   * );
   * // Zero out the green and blue channels, leaving red
   * result.g = 0;
   * result.b = 0;
   * filterColor.set(result);
   * filterColor.end();
   * }`You can create uniforms if you want to pass data into your filter from the rest of your sketch.
   * For example, you could pass in the mouse cursor position and use that to control how much
   * you warp the content. If you create a uniform inside the shader using a function like `uniformFloat()`, with
   * `uniform` + the type of the data, you can set its value using `setUniform` right before applying the filter.
   * In the example below, move your mouse across the image to see it update the `warpAmount` uniform:
   * 
   * `let img;
   * let myFilter;
   * async function setup() {
   * createCanvas(50, 50, WEBGL);
   * img = await loadImage('assets/bricks.jpg');
   * myFilter = buildFilterShader(warpShader);
   * describe('Warped bricks');
   * }
   * 
   * function warpShader() {
   * let warpAmount = uniformFloat();
   * filterColor.begin();
   * let coord = filterColor.texCoord;
   * coord.y += sin(coord.x * 10) * warpAmount;
   * filterColor.set(
   * getTexture(filterColor.canvasContent, coord)
   * );
   * filterColor.end();
   * }
   * 
   * function draw() {
   * image(img, -50, -50);
   * myFilter.setUniform(
   * 'warpAmount',
   * map(mouseX, 0, width, 0, 1, true)
   * );
   * filter(myFilter);
   * }`You can also make filters that do not need any content to be drawn first!
   * There is a lot you can draw just using, for example, the position of the pixel.
   * `inputs.texCoord` has an `x` and a `y` property, each with a number between 0 and 1.
   * 
   * `function setup() {
   * createCanvas(50, 50, WEBGL);
   * let myFilter = buildFilterShader(gradient);
   * describe('A gradient with red, green, yellow, and black');
   * filter(myFilter);
   * }
   * 
   * function gradient() {
   * filterColor.begin();
   * filterColor.set([filterColor.texCoord.x, filterColor.texCoord.y, 0, 1]);
   * filterColor.end();
   * }``function setup() {
   * createCanvas(50, 50, WEBGL);
   * let myFilter = buildFilterShader(gradient);
   * describe('A gradient from red to blue');
   * filter(myFilter);
   * }
   * 
   * function gradient() {
   * filterColor.begin();
   * filterColor.set(mix(
   * [1, 0, 0, 1], // Red
   * [0, 0, 1, 1], // Blue
   * filterColor.texCoord.x // x coordinate, from 0 to 1
   * ));
   * filterColor.end();
   * }`You can also animate your filters over time using the `millis()` function.
   * 
   * `let myFilter;
   * function setup() {
   * createCanvas(50, 50, WEBGL);
   * myFilter = buildFilterShader(gradient);
   * describe('A moving, repeating gradient from red to blue');
   * }
   * 
   * function gradient() {
   * let time = millis();
   * filterColor.begin();
   * filterColor.set(mix(
   * [1, 0, 0, 1], // Red
   * [0, 0, 1, 1], // Blue
   * sin(filterColor.texCoord.x*15 + time*0.004)/2+0.5
   * ));
   * filterColor.end();
   * }
   * 
   * function draw() {
   * 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 using the millis() function to get an up-to-date time value.
   * 
   * `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 = millis();
   * 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() {
   * 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.
   * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
   * for more info. Alternatively, `buildFilterShader()` can also be used like
   * <a href="#/p5/createShader">createShader()</a>, but where you only specify a fragment shader.
   * 
   * 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, scope?: object): P5.Shader;
  buildFilterShader(hooks: object, scope?: object): P5.Shader;

  /**
   * Creates a slider `<input></input>` element.
   * 
   * Range sliders are useful for quickly selecting numbers from a given range.
   * 
   * The first two parameters, `min` and `max`, are numbers that set the
   * slider's minimum and maximum.
   * 
   * The third parameter, `value`, is optional. It's a number that sets the
   * slider's default value.
   * 
   * The fourth parameter, `step`, is also optional. It's a number that sets the
   * spacing between each value in the slider's range. Setting `step` to 0
   * allows the slider to move smoothly from `min` to `max`.
   * @param min minimum value of the slider.
   * @param max maximum value of the slider.
   * @param value default value of the slider.
   * @param step size for each step in the slider's range.
   * @returns new <a href="#/p5.Element">p5.Element</a> object.
   */
  createSlider(min: number, max: number, value?: number, step?: number): P5.Element;

  /**
   * Calculates the magnitude, or length, of a vector.
   * 
   * A vector can be thought of in different ways. In one view, a vector is a
   * point in space. The vector's components, `x` and `y`, are the point's
   * coordinates `(x, y)`. A vector's magnitude is the distance from the origin
   * `(0, 0)` to `(x, y)`. `mag(x, y)` is a shortcut for calling
   * `dist(0, 0, x, y)`.
   * 
   * A vector can also be thought of as an arrow pointing in space. This view is
   * helpful for programming motion. See <a href="#/p5.Vector">p5.Vector</a> for
   * more details.
   * 
   * Use <a href="#/p5.Vector/mag">p5.Vector.mag()</a> to calculate the
   * magnitude of a <a href="#/p5.Vector">p5.Vector</a> object.
   * @param x first component.
   * @param y second component.
   * @returns magnitude of vector.
   */
  mag(x: number, y: number): number;

  /**
   * Calculates the tangent of an angle.
   * 
   * `tan()` is useful for many geometric tasks in creative coding. The values
   * returned range from -Infinity to Infinity and repeat periodically as the
   * input angle increases. `tan()` calculates the tan of an angle, using radians
   * by default, or according to
   * if <a href="#/p5/angleMode">angleMode()</a> setting (RADIANS or DEGREES).
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * describe('A series of identical curves drawn with black dots. Each curve starts from the top of the canvas, continues down at a slight angle, flattens out at the middle of the canvas, then continues to the bottom.');
   * }
   * 
   * function draw() {
   * // Calculate the coordinates.
   * let x = frameCount;
   * let y = 5 * tan(x * 0.1) + 50;
   * 
   * // Draw the point.
   * point(x, y);
   * }``tan()` can also be used in shaders with p5.strands. The following example
   * uses `tan()` to create rapid color transitions on a shape.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere with rapidly shifting colors.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.0005 to slow it down.
   * let t = millis() * 0.0005;
   * 
   * // tan(t) can grow to very large values (even infinity) at certain angles.
   * // 0.5 + 0.5 * tan(t) shifts the range but can still go way past 0 or 1.
   * // min(max(..., 0), 1) clamps the result to the 0 to 1 range.
   * let value = min(max(0.5 + 0.5 * tan(t), 0), 1);
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let orange = [1, 0.5, 0, 1];
   * let blue = [0, 0.5, 1, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between orange (when value = 0) and blue (when value = 1).
   * // tan() creates rapid, dramatic color shifts as it spikes and resets.
   * finalColor.set(mix(orange, blue, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param angle the angle, in radians by default, or according to if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or DEGREES).
   * @returns tangent of the angle.
   */
  tan(angle: number): number;

  /**
   * A function that's called once when any key is released.
   * 
   * Declaring the function `keyReleased()` sets a code block to run once
   * automatically when the user releases any key:
   * 
   * `function keyReleased() {
   * // Code to run.
   * }`The <a href="#/p5/key">key</a> and <a href="#/p5/keyCode">keyCode</a>
   * variables will be updated with the most recently released value when
   * `keyReleased()` is called by p5.js:
   * 
   * `function keyReleased() {
   * if (key === 'c') {
   * // Code to run.
   * }
   * 
   * if (keyCode === 13) { // Enter key
   * // Code to run.
   * }
   * }`The parameter, `event`, is optional. `keyReleased()` is always passed a
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent" target="_blank">KeyboardEvent</a>
   * object with properties that describe the key press event:
   * 
   * `function keyReleased(event) {
   * // Code to run that uses the event.
   * console.log(event);
   * }`Browsers may have default behaviors attached to various key events. To
   * prevent any default behavior for this event, add `return false;` to the end
   * of the function.
   * @param event optional `KeyboardEvent` callback argument.
   */
  keyReleased(event?: KeyboardEvent): void;

  /**
   * Rotates the coordinate system about the z-axis in WebGL mode.
   * 
   * The parameter, `angle`, is the amount to rotate. For example, calling
   * `rotateZ(1)` rotates the coordinate system about the z-axis by 1 radian.
   * `rotateZ()` interprets angle values using the current
   * <a href="#/p5/angleMode">angleMode()</a>.
   * 
   * By default, transformations accumulate. For example, calling `rotateZ(1)`
   * twice has the same effect as calling `rotateZ(2)` once. The
   * <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions
   * can be used to isolate transformations within distinct drawing groups.
   * 
   * Note: Transformations are reset at the beginning of the draw loop. Calling
   * `rotateZ(1)` inside the <a href="#/p5/draw">draw()</a> function won't cause
   * shapes to spin.
   * @param angle angle of rotation in the current <a href="#/p5/angleMode">angleMode()</a>.
   */
  rotateZ(angle: number): void;

  /**
   * Loads a file at the given path as a Blob, then returns the resulting data or
   * passes it to a success callback function, if provided. On load, this function
   * returns a `Promise` that resolves to a Blob containing the file data.
   * @param path The path or Request object pointing to the file
   * you want to load.
   * @param successCallback Optional. A function to be called if the
   * file successfully loads, receiving the
   * resulting Blob as its only argument.
   * @param errorCallback Optional. A function to be called if an
   * error occurs during loading; receives the
   * error object as its only argument.
   * @returns A promise that resolves with the loaded Blob.
   */
  loadBlob(path: string | Request, successCallback?: Function, errorCallback?: Function): Promise<Blob>;

  /**
   * Toggles full-screen mode or returns the current mode.
   * 
   * Calling `fullscreen(true)` makes the sketch full-screen. Calling
   * `fullscreen(false)` makes the sketch its original size.
   * 
   * Calling `fullscreen()` without an argument returns `true` if the sketch
   * is in full-screen mode and `false` if not.
   * 
   * Note: Due to browser restrictions, `fullscreen()` can only be called with
   * user input such as a mouse press.
   * @param val whether the sketch should be in fullscreen mode.
   * @returns current fullscreen state.
   */
  fullscreen(val?: boolean): boolean;

  /**
   * Draws a single point in space.
   * 
   * A point's default width is one pixel. To color a point, use the
   * <a href="#/p5/stroke">stroke()</a> function. To change its width, use the
   * <a href="#/p5/strokeWeight">strokeWeight()</a> function. A point
   * can't be filled, so the <a href="#/p5/fill">fill()</a> function won't
   * affect the point's color.
   * 
   * The version of `point()` with two parameters allows the point's location to
   * be set with its x- and y-coordinates, as in `point(10, 20)`.
   * 
   * The version of `point()` with three parameters allows the point to be drawn
   * in 3D space with x-, y-, and z-coordinates, as in `point(10, 20, 30)`.
   * Doing so requires adding the `WEBGL` argument to
   * <a href="#/p5/createCanvas">createCanvas()</a>.
   * 
   * The version of `point()` with one parameter allows the point's location to
   * be set with a <a href="#/p5/p5.Vector">p5.Vector</a> object.
   * @param x the x-coordinate.
   * @param y the y-coordinate.
   * @param z the z-coordinate (for WebGL mode).
   */
  point(x: number, y: number, z?: number): void;
  point(coordinateVector: P5.Vector): void;

  /**
   * 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.
   * 
   * 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
   * <a href="#/p5/colorMode">colorMode()</a>. The last three parameters, `x`,
   * `y`, and `z`, set the light’s position. For example,
   * `pointLight(255, 0, 0, 50, 0, 0)` creates a red `(255, 0, 0)` light that
   * shines from the coordinates `(50, 0, 0)`.
   * 
   * The second way to call `pointLight()` has four parameters. The first three
   * parameters, `v1`, `v2`, and `v3`, set the light’s color using the current
   * <a href="#/p5/colorMode">colorMode()</a>. The last parameter, position sets
   * the light’s position using a <a href="#/p5.Vector">p5.Vector</a> object.
   * For example, `pointLight(255, 0, 0, lightPos)` creates a red `(255, 0, 0)`
   * light that shines from the position set by the `lightPos` vector.
   * 
   * The third way to call `pointLight()` has four parameters. The first
   * parameter, `color`, sets the light’s color using a
   * <a href="#/p5.Color">p5.Color</a> object or an array of color values. The
   * last three parameters, `x`, `y`, and `z`, set the light’s position. For
   * example, `directionalLight(myColor, 50, 0, 0)` creates a light that shines
   * from the coordinates `(50, 0, 0)` with the color value of `myColor`.
   * 
   * The fourth way to call `pointLight()` has two parameters. The first
   * parameter, `color`, sets the light’s color using a
   * <a href="#/p5.Color">p5.Color</a> object or an array of color values. The
   * second parameter, `position`, sets the light’s position using a
   * <a href="#/p5.Vector">p5.Vector</a> object. For example,
   * `directionalLight(myColor, lightPos)` creates a light that shines from the
   * position set by the `lightPos` vector with the color value of `myColor`.
   * @param v1 red or hue value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   * @param v2 green or saturation value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   * @param v3 blue, brightness, or lightness value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   * @param x x-coordinate of the light.
   * @param y y-coordinate of the light.
   * @param z z-coordinate of the light.
   */
  pointLight(v1: number, v2: number, v3: number, x: number, y: number, z: number): void;
  pointLight(v1: number, v2: number, v3: number, position: P5.Vector): void;
  pointLight(color: P5.Color | number[] | string, x: number, y: number, z: number): void;
  pointLight(color: P5.Color | number[] | string, position: P5.Vector): void;

  /**
   * Creates a `<button></button>` element.
   * 
   * The first parameter, `label`, is a string that sets the label displayed on
   * the button.
   * 
   * The second parameter, `value`, is optional. It's a string that sets the
   * button's value. See
   * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value" target="_blank">MDN</a>
   * for more details.
   * @param label label displayed on the button.
   * @param value value of the button.
   * @returns new <a href="#/p5.Element">p5.Element</a> object.
   */
  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.
   * 
   * The <a href="#/p5/beginShape">beginShape()</a> and `endShape()` functions
   * allow for creating custom shapes in 2D or 3D.
   * <a href="#/p5/beginShape">beginShape()</a> begins adding vertices to a
   * custom shape and `endShape()` stops adding them.
   * 
   * The first parameter, `mode`, is optional. By default, the first and last
   * vertices of a shape aren't connected. If the constant `CLOSE` is passed, as
   * in `endShape(CLOSE)`, then the first and last vertices will be connected.
   * When CLOSE mode is used for splines (with `splineVeertex()`), the shape is ended smoothly.
   * 
   * The second parameter, `count`, is also optional. In WebGL mode, it’s more
   * efficient to draw many copies of the same shape using a technique called
   * <a href="https://webglfundamentals.org/webgl/lessons/webgl-instanced-drawing.html" target="_blank">instancing</a>.
   * The `count` parameter tells WebGL mode how many copies to draw. For
   * example, calling `endShape(CLOSE, 400)` after drawing a custom shape will
   * make it efficient to draw 400 copies. This feature requires
   * <a href="https://p5js.org/tutorials/intro-to-shaders/" target="_blank">writing a custom shader</a>.
   * 
   * After calling <a href="#/p5/beginShape">beginShape()</a>, shapes can be
   * built by calling <a href="#/p5/vertex">vertex()</a>,
   * <a href="#/p5/bezierVertex">bezierVertex()</a> and/or
   * <a href="#/p5/splineVertex">splineVertex()</a>. Calling
   * `endShape()` will stop adding vertices to the
   * shape. Each shape will be outlined with the current stroke color and filled
   * with the current fill color.
   * 
   * Transformations such as <a href="#/p5/translate">translate()</a>,
   * <a href="#/p5/rotate">rotate()</a>, and
   * <a href="#/p5/scale">scale()</a> don't work between
   * <a href="#/p5/beginShape">beginShape()</a> and `endShape()`. It's also not
   * possible to use other shapes, such as <a href="#/p5/ellipse">ellipse()</a> or
   * <a href="#/p5/rect">rect()</a>, between
   * <a href="#/p5/beginShape">beginShape()</a> and `endShape()`.
   * @param mode use CLOSE to close the shape
   * @param count number of times you want to draw/instance the shape (for WebGL mode).
   */
  endShape(mode?: typeof P5.CLOSE, count?: number): void;

  /**
   * Converts an angle measured in radians to its value in degrees.
   * 
   * 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.
   * 
   * The same angle can be expressed in with either unit. For example, 90° is a
   * quarter of a full rotation. The same angle is 2 × π ÷ 4
   * (about 1.57) radians.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Calculate the angle conversion.
   * let rad = QUARTER_PI;
   * let deg = degrees(rad);
   * 
   * // Display the conversion.
   * text(`${round(rad, 2)} rad = ${deg}˚`, 10, 50);
   * 
   * describe('The text "0.79 rad = 45˚".');
   * }``degrees()` can also be used in shaders with p5.strands. The following example
   * uses `degrees()` to convert a radian value to degrees inside a shader.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere that cycles through warm colors.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
   * let t = millis() * 0.001;
   * 
   * // degrees() converts the radian value t to degrees.
   * // (deg % 360) wraps the degrees into a 0-360 range.
   * // Dividing by 360 normalizes to the 0 to 1 range.
   * let deg = degrees(t);
   * let value = (deg % 360) / 360;
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let red = [1, 0, 0, 1];
   * let yellow = [1, 1, 0, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between red (when value = 0) and yellow (when value = 1).
   * // degrees() creates a cycling sawtooth pattern as time increases.
   * finalColor.set(mix(red, yellow, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param radians radians value to convert to degrees.
   * @returns converted angle.
   */
  degrees(radians: number): number;

  /**
   * Converts a `Number` to a `String` with its hexadecimal value.
   * 
   * `hex()` converts a number to a string with its hexadecimal number value.
   * Hexadecimal (hex) numbers are base-16, which means there are 16 unique
   * digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
   * number `11` (eleven) in base-10 is written as the letter `B` in hex.
   * 
   * The first parameter, `n`, is the number to convert. For example, `hex(20)`,
   * returns the string `'00000014'`. If an array is passed, as in
   * `hex([1, 10, 100])`, an array of hexadecimal strings is returned.
   * 
   * The second parameter, `digits`, is optional. If a number is passed, as in
   * `hex(20, 2)`, it sets the number of hexadecimal digits to display. For
   * example, calling `hex(20, 2)` returns the string `'14'`.
   * @param n value to convert.
   * @param digits number of digits to include.
   * @returns converted hexadecimal value.
   */
  hex(n: number, digits?: number): string;
  hex(ns: number[], digits?: number): string[];

  /**
   * Calculates coordinates along a spline curve using interpolation.
   * 
   * `splinePoint()` calculates coordinates along a spline curve using four
   * points p0, p1, p2, p3. It expects points in the same order as the
   * <a href="#/p5/spline">spline()</a> function. `splinePoint()` works one axis
   * at a time. Passing the points' x-coordinates will
   * calculate the x-coordinate of a point on the curve. Passing the
   * points' y-coordinates will calculate the y-coordinate of a point on
   * the curve.
   * 
   * The first parameter, `a`, is the coordinate of point p0.
   * 
   * The second and third parameters, `b` and `c`, are the coordinates of
   * points p1 and p2.
   * 
   * The fourth parameter, `d`, is the coordinate of point p3.
   * 
   * The fifth parameter, `t`, is the amount to interpolate along the span
   * from p1 to p2. `t = 0` is p1, `t = 1` is p2, and `t = 0.5` is halfway
   * between them.
   * @param a coordinate of point p0.
   * @param b coordinate of point p1.
   * @param c coordinate of point p2.
   * @param d coordinate of point p3.
   * @param t amount to interpolate between 0 and 1.
   * @returns coordinate of a point on the curve.
   */
  splinePoint(a: number, b: number, c: number, d: number, t: number): number;

  /**
   * Re-maps a number from one range to another.
   * 
   * For example, calling `map(2, 0, 10, 0, 100)` returns 20. The first three
   * arguments set the original value to 2 and the original range from 0 to 10.
   * The last two arguments set the target range from 0 to 100. 20's position
   * in the target range [0, 100] is proportional to 2's position in the
   * original range [0, 10].
   * 
   * The sixth parameter, `withinBounds`, is optional. By default, `map()` can
   * return values outside of the target range. For example,
   * `map(11, 0, 10, 0, 100)` returns 110. Passing `true` as the sixth parameter
   * constrains the remapped value to the target range. For example,
   * `map(11, 0, 10, 0, 100, true)` returns 100.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * describe('Two horizontal lines. The top line grows horizontally as the mouse moves to the right. The bottom line also grows horizontally but is scaled to stay on the left half of the canvas.');
   * }
   * 
   * function draw() {
   * background(200);
   * 
   * // Draw the top line.
   * line(0, 25, mouseX, 25);
   * 
   * // Remap mouseX from [0, 100] to [0, 50].
   * let x = map(mouseX, 0, 100, 0, 50);
   * 
   * // Draw the bottom line.
   * line(0, 75, 0, x);
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * describe('A circle changes color from black to white as the mouse moves from left to right.');
   * }
   * 
   * function draw() {
   * background(200);
   * 
   * // Remap mouseX from [0, 100] to [0, 255]
   * let c = map(mouseX, 0, 100, 0, 255);
   * 
   * // Style the circle.
   * fill(c);
   * 
   * // Draw the circle.
   * circle(50, 50, 20);
   * }``map()` can also be used in shaders with p5.strands. The following example
   * uses `map()` to remap time values to color in a shader.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere that shifts between cyan and orange over time.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
   * let t = millis() * 0.001;
   * 
   * // sin(t) goes between -1 and 1 over time.
   * let sinVal = sin(t);
   * 
   * // map() remaps this from the range [-1, 1] to the range [0, 1].
   * let value = map(sinVal, -1, 1, 0, 1);
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let cyan = [0, 0.5, 1, 1];
   * let orange = [1, 0.5, 0, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between cyan (when value = 0) and orange (when value = 1).
   * finalColor.set(mix(cyan, orange, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param value the value to be remapped.
   * @param start1 lower bound of the value's current range.
   * @param stop1 upper bound of the value's current range.
   * @param start2 lower bound of the value's target range.
   * @param stop2 upper bound of the value's target range.
   * @param withinBounds constrain the value to the newly mapped range.
   * @returns remapped number.
   */
  map(value: number, start1: number, stop1: number, start2: number, stop2: number, withinBounds?: boolean): number;

  /**
   * Sets the pixel density or returns the current density.
   * 
   * Computer displays are grids of little lights called <em>pixels</em>. A
   * display's <em>pixel density</em> describes how many pixels it packs into an
   * area. Displays with smaller pixels have a higher pixel density and create
   * sharper images.
   * 
   * `pixelDensity()` sets the pixel scaling for high pixel density displays.
   * By default, the pixel density is set to match the display's density.
   * Calling `pixelDensity(1)` turn this off.
   * 
   * Calling `pixelDensity()` without an argument returns the current pixel
   * density.
   * @param val desired pixel density.
   * @returns current pixel density of the sketch.
   */
  pixelDensity(val?: number): number;
  pixelDensity(): number;

  /**
   * Method for executing an HTTP GET request. If data type is not specified,
   * it will default to `'text'`. This is equivalent to
   * calling <code>httpDo(path, 'GET')</code>. The 'binary' datatype will return
   * a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
   * which can be used to initialize typed arrays (such as Uint8Array).
   * @param path name of the file or url to load
   * @param datatype "json", "jsonp", "binary", "arrayBuffer",
   * "xml", or "text"
   * @param callback function to be executed after
   * <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
   * as first argument
   * @param errorCallback function to be executed if
   * there is an error, response is passed
   * in as first argument
   * @returns A promise that resolves with the data when the operation
   * completes successfully or rejects with the error after
   * one occurs.
   */
  httpGet(path: string | Request, datatype?: string, callback?: Function, errorCallback?: Function): Promise<any>;
  httpGet(path: string | Request, callback: Function, errorCallback?: Function): Promise<any>;

  /**
   * Creates an ambient light from an image.
   * 
   * `imageLight()` simulates a light shining from all directions. The effect is
   * like placing the sketch at the center of a giant sphere that uses the image
   * as its texture. The image's diffuse light will be affected by
   * <a href="#/p5/fill">fill()</a> and the specular reflections will be
   * affected by <a href="#/p5/specularMaterial">specularMaterial()</a> and
   * <a href="#/p5/shininess">shininess()</a>.
   * 
   * The parameter, `img`, is the <a href="#/p5.Image">p5.Image</a> object to
   * use as the light source.
   * @param img image to use as the light source.
   */
  imageLight(img: P5.Image): 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.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a p5.Color object using RGB values.
   * let c = color(175, 100, 220);
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'blueValue' to 220.
   * let blueValue = blue(c);
   * 
   * // Draw the right rectangle.
   * fill(0, 0, blueValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is light purple and the right one is royal blue.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a color array.
   * let c = [175, 100, 220];
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'blueValue' to 220.
   * let blueValue = blue(c);
   * 
   * // Draw the right rectangle.
   * fill(0, 0, blueValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is light purple and the right one is royal blue.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a CSS color string.
   * let c = 'rgb(175, 100, 220)';
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'blueValue' to 220.
   * let blueValue = blue(c);
   * 
   * // Draw the right rectangle.
   * fill(0, 0, blueValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is light purple and the right one is royal blue.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Use RGB color with values in the range 0-100.
   * colorMode(RGB, 100);
   * 
   * // Create a p5.Color object using RGB values.
   * let c = color(69, 39, 86);
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'blueValue' to 86.
   * let blueValue = blue(c);
   * 
   * // Draw the right rectangle.
   * fill(0, 0, blueValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is light purple and the right one is royal blue.');
   * }`In p5.strands shader callbacks, `blue()` operates on `vec4` values and
   * returns the blue channel as a normalized value in the 0–1 range.
   * `colorMode()` has no effect inside shader callbacks.
   * 
   * `let myShader;
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildMaterialShader(myShaderBuilder);
   * }
   * 
   * function myShaderBuilder() {
   * finalColor.begin();
   * let c = color(50, 100, 200);
   * let b = blue(c);
   * finalColor.set(vec4(0, 0, b, 1.0));
   * finalColor.end();
   * }
   * 
   * function draw() {
   * shader(myShader);
   * noStroke();
   * sphere(40);
   * 
   * describe('A sphere colored using only its blue channel.');
   * }`
   * @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;

  /**
   * Updates the canvas with the RGBA values in the
   * <a href="#/p5/pixels">pixels</a> array.
   * 
   * `updatePixels()` only needs to be called after changing values in the
   * <a href="#/p5/pixels">pixels</a> array. Such changes can be made directly
   * after calling <a href="#/p5/loadPixels">loadPixels()</a> or by calling
   * <a href="#/p5/set">set()</a>.
   * @param x x-coordinate of the upper-left corner of region
   * to update.
   * @param y y-coordinate of the upper-left corner of region
   * to update.
   * @param w width of region to update.
   * @param h height of region to update.
   */
  updatePixels(x?: number, y?: number, w?: number, h?: number): void;
  updatePixels(): void;

  /**
   * Returns the display's current pixel density.
   * @returns current pixel density of the display.
   */
  displayDensity(): number;

  /**
   * Converts an angle measured in degrees to its value in radians.
   * 
   * 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.
   * 
   * The same angle can be expressed in with either unit. For example, 90° is a
   * quarter of a full rotation. The same angle is 2 × π ÷ 4
   * (about 1.57) radians.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Caclulate the angle conversion.
   * let deg = 45;
   * let rad = radians(deg);
   * 
   * // Display the angle conversion.
   * text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);
   * 
   * describe('The text "45˚ = 0.785 rad".');
   * }``radians()` can also be used in shaders with p5.strands. The following example
   * uses `radians()` to convert degrees to radians inside a shader.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere that fades between red and white.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start.
   * // Multiply by 0.05 and mod 360 to cycle through 0-360 degrees over time.
   * let deg = (millis() * 0.05) % 360;
   * 
   * // radians() converts degrees to radians so sin() can use them.
   * let rad = radians(deg);
   * 
   * // sin(rad) oscillates between -1 and 1.
   * // 0.5 + 0.5 * sin(rad) remaps this to the 0 to 1 range.
   * let value = 0.5 + 0.5 * sin(rad);
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let red = [1, 0, 0, 1];
   * let white = [1, 1, 1, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between red (when value = 0) and white (when value = 1).
   * // radians() converts the degree input so sin() can produce smooth oscillation.
   * finalColor.set(mix(red, white, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param degrees degree value to convert to radians.
   * @returns converted angle.
   */
  radians(degrees: number): number;

  /**
   * Creates an immersive 3D background.
   * 
   * `panorama()` transforms images containing 360˚ content, such as maps or
   * HDRIs, into immersive 3D backgrounds that surround a sketch. Exploring the
   * space requires changing the camera's perspective with functions such as
   * <a href="#/p5/orbitControl">orbitControl()</a> or
   * <a href="#/p5/camera">camera()</a>.
   * @param img 360˚ image to use as the background.
   */
  panorama(img: P5.Image): void;

  /**
   * Creates a checkbox `<input></input>` element.
   * 
   * Checkboxes extend the <a href="#/p5.Element">p5.Element</a> class with a
   * `checked()` method. Calling `myBox.checked()` returns `true` if it the box
   * is checked and `false` if not.
   * 
   * The first parameter, `label`, is optional. It's a string that sets the label
   * to display next to the checkbox.
   * 
   * The second parameter, `value`, is also optional. It's a boolean that sets the
   * checkbox's value.
   * @param label label displayed after the checkbox.
   * @param value value of the checkbox. Checked is `true` and unchecked is `false`.
   * @returns new <a href="#/p5.Element">p5.Element</a> object.
   */
  createCheckbox(label?: string, value?: boolean): P5.Element;

  /**
   * A function that's called once when keys with printable characters are pressed.
   * 
   * Declaring the function `keyTyped()` sets a code block to run once
   * automatically when the user presses any key with a printable character such
   * as `a` or 1. Modifier keys such as `SHIFT`, `CONTROL`, and the arrow keys
   * will be ignored:
   * 
   * `function keyTyped() {
   * // Code to run.
   * }`The <a href="#/p5/key">key</a> and <a href="#/p5/keyCode">keyCode</a>
   * variables will be updated with the most recently released value when
   * `keyTyped()` is called by p5.js:
   * 
   * `function keyTyped() {
   * // Check for the "c" character using key.
   * if (key === 'c') {
   * // Code to run.
   * }
   * 
   * // Check for "c" using keyCode.
   * if (keyCode === 67) { // 67 is the ASCII code for 'c'
   * // Code to run.
   * }
   * }`The parameter, `event`, is optional. `keyTyped()` is always passed a
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent" target="_blank">KeyboardEvent</a>
   * object with properties that describe the key press event:
   * 
   * `function keyReleased(event) {
   * // Code to run that uses the event.
   * console.log(event);
   * }`Note: Use the <a href="#/p5/keyPressed">keyPressed()</a> function and
   * <a href="#/p5/keyCode">keyCode</a> system variable to respond to modifier
   * keys such as `ALT`.
   * 
   * Browsers may have default behaviors attached to various key events. To
   * prevent any default behavior for this event, add `return false;` to the end
   * of the function.
   * @param event optional `KeyboardEvent` callback argument.
   */
  keyTyped(event?: KeyboardEvent): void;

  /**
   * Draws a cylinder.
   * 
   * A cylinder is a 3D shape with triangular faces that connect a flat bottom
   * to a flat top. Cylinders with few faces look like boxes. Cylinders with
   * many faces have smooth surfaces.
   * 
   * The first parameter, `radius`, is optional. If a `Number` is passed, as in
   * `cylinder(20)`, it sets the radius of the cylinder’s base. By default,
   * `radius` is 50.
   * 
   * The second parameter, `height`, is also optional. If a `Number` is passed,
   * as in `cylinder(20, 30)`, it sets the cylinder’s height. By default,
   * `height` is set to the cylinder’s `radius`.
   * 
   * The third parameter, `detailX`, is also optional. If a `Number` is passed,
   * as in `cylinder(20, 30, 5)`, it sets the number of edges used to form the
   * cylinder's top and bottom. Using more edges makes the top and bottom look
   * more like circles. By default, `detailX` is 24.
   * 
   * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
   * as in `cylinder(20, 30, 5, 2)`, it sets the number of triangle subdivisions
   * to use along the y-axis, between cylinder's the top and bottom. All 3D
   * shapes are made by connecting triangles to form their surfaces. By default,
   * `detailY` is 1.
   * 
   * The fifth parameter, `bottomCap`, is also optional. If a `false` is passed,
   * as in `cylinder(20, 30, 5, 2, false)` the cylinder’s bottom won’t be drawn.
   * By default, `bottomCap` is `true`.
   * 
   * The sixth parameter, `topCap`, is also optional. If a `false` is passed, as
   * in `cylinder(20, 30, 5, 2, false, false)` the cylinder’s top won’t be
   * drawn. By default, `topCap` is `true`.
   * 
   * Note: `cylinder()` can only be used in WebGL mode.
   * @param radius radius of the cylinder. Defaults to 50.
   * @param height height of the cylinder. Defaults to the value of `radius`.
   * @param detailX number of edges along the top and bottom. Defaults to 24.
   * @param detailY number of triangle subdivisions along the y-axis. Defaults to 1.
   * @param bottomCap whether to draw the cylinder's bottom. Defaults to `true`.
   * @param topCap whether to draw the cylinder's top. Defaults to `true`.
   */
  cylinder(radius?: number, height?: number, detailX?: number, detailY?: number, bottomCap?: boolean, topCap?: boolean): void;

  /**
   * Scales the coordinate system.
   * 
   * By default, shapes are drawn at their original scale. A rectangle that's 50
   * pixels wide appears to take up half the width of a 100 pixel-wide canvas.
   * The `scale()` function can shrink or stretch the coordinate system so that
   * shapes appear at different sizes. There are two ways to call `scale()` with
   * parameters that set the scale factor(s).
   * 
   * The first way to call `scale()` uses numbers to set the amount of scaling.
   * The first parameter, `s`, sets the amount to scale each axis. For example,
   * calling `scale(2)` stretches the x-, y-, and z-axes by a factor of 2. The
   * next two parameters, `y` and `z`, are optional. They set the amount to
   * scale the y- and z-axes. For example, calling `scale(2, 0.5, 1)` stretches
   * the x-axis by a factor of 2, shrinks the y-axis by a factor of 0.5, and
   * leaves the z-axis unchanged.
   * 
   * The second way to call `scale()` uses a <a href="#/p5.Vector">p5.Vector</a>
   * object to set the scale factors. For example, calling `scale(myVector)`
   * uses the x-, y-, and z-components of `myVector` to set the amount of
   * scaling along the x-, y-, and z-axes. Doing so is the same as calling
   * `scale(myVector.x, myVector.y, myVector.z)`.
   * 
   * By default, transformations accumulate. For example, calling `scale(1)`
   * twice has the same effect as calling `scale(2)` once. The
   * <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions
   * can be used to isolate transformations within distinct drawing groups.
   * 
   * Note: Transformations are reset at the beginning of the draw loop. Calling
   * `scale(2)` inside the <a href="#/p5/draw">draw()</a> function won't cause
   * shapes to grow continuously.
   * @param s amount to scale along the positive x-axis.
   * @param y amount to scale along the positive y-axis. Defaults to `s`.
   * @param z amount to scale along the positive z-axis. Defaults to `y`.
   */
  scale(s: number | P5.Vector | number[], y?: number, z?: number): void;
  scale(scales: P5.Vector | number[]): void;

  /**
   * Converts a `String` with a hexadecimal value to a  `Number`.
   * 
   * `unhex()` converts a string with its hexadecimal number value to a number.
   * Hexadecimal (hex) numbers are base-16, which means there are 16 unique
   * digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
   * number `11` (eleven) in base-10 is written as the letter `B` in hex.
   * 
   * The first parameter, `n`, is the hex string to convert. For example,
   * `unhex('FF')`, returns the number 255. If an array is passed, as in
   * `unhex(['00', '80', 'FF'])`, an array of numbers is returned.
   * @param n value to convert.
   * @returns converted number.
   */
  unhex(n: string): number;
  unhex(ns: string[]): number[];

  /**
   * Draws a quadrilateral (four-sided shape).
   * 
   * Quadrilaterals include rectangles, squares, rhombuses, and trapezoids. The
   * first pair of parameters `(x1, y1)` sets the quad's first point. The next
   * three pairs of parameters set the coordinates for its next three points
   * `(x2, y2)`, `(x3, y3)`, and `(x4, y4)`. Points should be added in either
   * clockwise or counter-clockwise order.
   * 
   * The version of `quad()` with twelve parameters allows the quad to be drawn
   * in 3D space. Doing so requires adding the `WEBGL` argument to
   * <a href="#/p5/createCanvas">createCanvas()</a>.
   * 
   * The thirteenth and fourteenth parameters are optional. In WebGL mode, they
   * set the number of segments used to draw the quadrilateral in the x- and
   * y-directions. They're both 2 by default.
   * @param x1 the x-coordinate of the first point.
   * @param y1 the y-coordinate of the first point.
   * @param x2 the x-coordinate of the second point.
   * @param y2 the y-coordinate of the second point.
   * @param x3 the x-coordinate of the third point.
   * @param y3 the y-coordinate of the third point.
   * @param x4 the x-coordinate of the fourth point.
   * @param y4 the y-coordinate of the fourth point.
   * @param detailX number of segments in the x-direction.
   * @param detailY number of segments in the y-direction.
   */
  quad(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, detailX?: number, detailY?: number): void;
  quad(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number, x3: number, y3: number, z3: number, x4: number, y4: number, z4: number, detailX?: number, detailY?: number): void;

  /**
   * Method for executing an HTTP POST request. If data type is not specified,
   * it will default to `'text'`. This is equivalent to
   * calling <code>httpDo(path, 'POST')</code>.
   * @param path name of the file or url to load
   * @param data param data passed sent with request
   * @param datatype "json", "jsonp", "xml", or "text".
   * If omitted, <a href="#/p5/httpPost">httpPost()</a> will guess.
   * @param callback function to be executed after
   * <a href="#/p5/httpPost">httpPost()</a> completes, data is passed in
   * as first argument
   * @param errorCallback function to be executed if
   * there is an error, response is passed
   * in as first argument
   * @returns A promise that resolves with the data when the operation
   * completes successfully or rejects with the error after
   * one occurs.
   */
  httpPost(path: string | Request, data?: object | boolean, datatype?: string, callback?: Function, errorCallback?: Function): Promise<any>;
  httpPost(path: string | Request, data: object | boolean, callback?: Function, errorCallback?: Function): Promise<any>;
  httpPost(path: string | Request, callback?: Function, errorCallback?: Function): Promise<any>;

  /**
   * Returns the sketch's current
   * <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL" target="_blank">URL</a>
   * as a `String`.
   * @returns url
   */
  getURL(): string;

  /**
   * Returns the largest value in a sequence of numbers.
   * 
   * The version of `max()` with one parameter interprets it as an array of
   * numbers and returns the largest number.
   * 
   * The version of `max()` with two or more parameters interprets them as
   * individual numbers and returns the largest number.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Calculate the maximum of 10, 5, and 20.
   * let m = max(10, 5, 20);
   * 
   * // Style the text.
   * textAlign(CENTER);
   * textSize(16);
   * 
   * // Display the max.
   * text(m, 50, 50);
   * 
   * describe('The number 20 written in the middle of a gray square.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create an array of numbers.
   * let numbers = [10, 5, 20];
   * 
   * // Calculate the maximum of the array.
   * let m = max(numbers);
   * 
   * // Style the text.
   * textAlign(CENTER);
   * textSize(16);
   * 
   * // Display the max.
   * text(m, 50, 50);
   * 
   * describe('The number 20 written in the middle of a gray square.');
   * }``max()` can also be used in shaders with p5.strands. The following example
   * uses `max()` to clamp values in a shader.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere that shifts from rose to steelBlue and stops.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
   * let t = millis() * 0.001;
   * 
   * // 1 - t * 0.2 decreases steadily over time.
   * // max(..., 0) ensures the value never goes below 0.
   * let value = max(1 - t * 0.2, 0);
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let steelBlue = [0, 0.3, 0.8, 1];
   * let rose = [1, 0.3, 0.8, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between steelBlue (when value = 0) and rose (when value = 1).
   * // max() clamps the blend so the color stops changing once it reaches steelBlue.
   * finalColor.set(mix(steelBlue, rose, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param n0 first number to compare.
   * @param n1 second number to compare.
   * @returns maximum number.
   */
  max(n0: number, n1: number): number;
  max(nums: number[]): number;

  /**
   * Places an ambient and directional light in the scene.
   * The lights are set to ambientLight(128, 128, 128) and
   * directionalLight(128, 128, 128, 0, 0, -1).
   * 
   * Note: lights need to be called (whether directly or indirectly)
   * within draw() to remain persistent in a looping program.
   * Placing them in setup() will cause them to only have an effect
   * the first time through the loop.
   */
  lights(): void;

  /**
   * Gets the alpha (transparency) value of a color.
   * 
   * `alpha()` extracts the alpha value from a
   * <a href="#/p5.Color">p5.Color</a> object, an array of color components, or
   * a CSS color string.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a p5.Color object.
   * let c = color(0, 126, 255, 102);
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'alphaValue' to 102.
   * let alphaValue = alpha(c);
   * 
   * // Draw the right rectangle.
   * fill(alphaValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a color array.
   * let c = [0, 126, 255, 102];
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'alphaValue' to 102.
   * let alphaValue = alpha(c);
   * 
   * // Draw the left rectangle.
   * fill(alphaValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create a CSS color string.
   * let c = 'rgba(0, 126, 255, 0.4)';
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'alphaValue' to 102.
   * let alphaValue = alpha(c);
   * 
   * // Draw the right rectangle.
   * fill(alphaValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
   * }`In p5.strands shader callbacks, `alpha()` operates on `vec4` values and
   * returns the alpha channel as a normalized value in the 0–1 range.
   * `colorMode()` has no effect inside shader callbacks.
   * 
   * `let myShader;
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildMaterialShader(myShaderBuilder);
   * }
   * 
   * function myShaderBuilder() {
   * finalColor.begin();
   * let c = color(255, 0, 0, 128);
   * let a = alpha(c);
   * finalColor.set(vec4(1.0, 0, 0, a * 0.5));
   * finalColor.end();
   * }
   * 
   * function draw() {
   * shader(myShader);
   * noStroke();
   * sphere(40);
   * 
   * describe('A semi-transparent sphere.');
   * }`
   * @param color <a href="#/p5.Color">p5.Color</a> object, array of
   * color components, or CSS color string.
   * @returns the alpha value.
   */
  alpha(color: P5.Color | number[] | string): number;

  /**
   * Returns the current
   * <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#path_to_resource" target="_blank">URL</a>
   * path as an `Array` of `String`s.
   * 
   * For example, consider a sketch hosted at the URL
   * `https://example.com/sketchbook`. Calling `getURLPath()` returns
   * `['sketchbook']`. For a sketch hosted at the URL
   * `https://example.com/sketchbook/monday`, `getURLPath()` returns
   * `['sketchbook', 'monday']`.
   * @returns path components.
   */
  getURLPath(): string[];

  /**
   * Calculates coordinates along a line that's tangent to a spline curve.
   * 
   * Tangent lines skim the surface of a curve. A tangent line's slope equals
   * the curve's slope at the point where it intersects.
   * 
   * `splineTangent()` calculates coordinates along a tangent line using four
   * points p0, p1, p2, p3. It expects points in the same order as the
   * <a href="#/p5/spline">spline()</a> function. `splineTangent()` works one
   * axis at a time. Passing the points' x-coordinates returns the x-component of
   * the tangent vector; passing the points' y-coordinates returns the y-component.
   * The first parameter, `a`, is the coordinate of point p0.
   * 
   * The second and third parameters, `b` and `c`, are the coordinates of
   * points p1 and p2.
   * 
   * The fourth parameter, `d`, is the coordinate of point p3.
   * 
   * The fifth parameter, `t`, is the amount to interpolate along the span
   * from p1 to p2. `t = 0` is p1, `t = 1` is p2, and `t = 0.5` is halfway
   * between them.
   * @param a coordinate of point p0.
   * @param b coordinate of point p1.
   * @param c coordinate of point p2.
   * @param d coordinate of point p3.
   * @param t amount to interpolate between 0 and 1.
   * @returns coordinate of a point on the tangent line.
   */
  splineTangent(a: number, b: number, c: number, d: number, t: number): number;

  /**
   * Sets the normal vector for vertices in a custom 3D shape.
   * 
   * 3D shapes created with <a href="#/p5/beginShape">beginShape()</a> and
   * <a href="#/p5/endShape">endShape()</a> are made by connecting sets of
   * points called vertices. Each vertex added with
   * <a href="#/p5/vertex">vertex()</a> has a normal vector that points away
   * from it. The normal vector controls how light reflects off the shape.
   * 
   * `normal()` can be called two ways with different parameters to define the
   * normal vector's components.
   * 
   * The first way to call `normal()` has three parameters, `x`, `y`, and `z`.
   * If `Number`s are passed, as in `normal(1, 2, 3)`, they set the x-, y-, and
   * z-components of the normal vector.
   * 
   * The second way to call `normal()` has one parameter, `vector`. If a
   * <a href="#/p5.Vector">p5.Vector</a> object is passed, as in
   * `normal(myVector)`, its components will be used to set the normal vector.
   * 
   * `normal()` changes the normal vector of vertices added to a custom shape
   * with <a href="#/p5/vertex">vertex()</a>. `normal()` must be called between
   * the <a href="#/p5/beginShape">beginShape()</a> and
   * <a href="#/p5/endShape">endShape()</a> functions, just like
   * <a href="#/p5/vertex">vertex()</a>. The normal vector set by calling
   * `normal()` will affect all following vertices until `normal()` is called
   * again:
   * 
   * `beginShape();
   * 
   * // Set the vertex normal.
   * normal(-0.4, -0.4, 0.8);
   * 
   * // Add a vertex.
   * vertex(-30, -30, 0);
   * 
   * // Set the vertex normal.
   * normal(0, 0, 1);
   * 
   * // Add vertices.
   * vertex(30, -30, 0);
   * vertex(30, 30, 0);
   * 
   * // Set the vertex normal.
   * normal(0.4, -0.4, 0.8);
   * 
   * // Add a vertex.
   * vertex(-30, 30, 0);
   * 
   * endShape();`
   * @param vector vertex normal as a <a href="#/p5.Vector">p5.Vector</a> object.
   */
  normal(vector: P5.Vector): void;
  normal(x: number, y: number, z: number): void;

  /**
   * Shears the x-axis so that shapes appear skewed.
   * 
   * By default, the x- and y-axes are perpendicular. The `shearX()` function
   * transforms the coordinate system so that x-coordinates are translated while
   * y-coordinates are fixed.
   * 
   * The first parameter, `angle`, is the amount to shear. For example, calling
   * `shearX(1)` transforms all x-coordinates using the formula
   * `x = x + y * tan(angle)`. `shearX()` interprets angle values using the
   * current <a href="#/p5/angleMode">angleMode()</a>.
   * 
   * By default, transformations accumulate. For example, calling
   * `shearX(1)` twice has the same effect as calling `shearX(2)` once. The
   * <a href="#/p5/push">push()</a> and
   * <a href="#/p5/pop">pop()</a> functions can be used to isolate
   * transformations within distinct drawing groups.
   * 
   * Note: Transformations are reset at the beginning of the draw loop. Calling
   * `shearX(1)` inside the <a href="#/p5/draw">draw()</a> function won't
   * cause shapes to shear continuously.
   * @param angle angle to shear by in the current <a href="#/p5/angleMode">angleMode()</a>.
   */
  shearX(angle: number): void;

  /**
   * Changes the way color values are interpreted.
   * 
   * By default, the `Number` parameters for <a href="#/p5/fill">fill()</a>,
   * <a href="#/p5/stroke">stroke()</a>,
   * <a href="#/p5/background">background()</a>, and
   * <a href="#/p5/color">color()</a> are defined by values between 0 and 255
   * using the RGB color model. This is equivalent to calling
   * `colorMode(RGB, 255)`. Pure red is `color(255, 0, 0)` in this model.
   * 
   * Calling `colorMode(RGB, 100)` sets colors to use RGB color values
   * between 0 and 100. Pure red is `color(100, 0, 0)` in this model.
   * 
   * Calling `colorMode(HSB)` or `colorMode(HSL)` changes to HSB or HSL systems instead of RGB.
   * Pure red is `color(0, 100, 100)` in HSB and `color(0, 100, 50)` in HSL.
   * 
   * Some additional color modes that p5.js supports are:
   * 
   * `RGBP3` - High Dynamic Range RGB defined within the Display P3 color space.
   * Colors are expressed with an extended dynamic range. To render these colors
   * accurately, you must use the P3 canvas.
   * 
   * `HWB`    - Hue, Whiteness, Blackness.
   * Similar to HSB and HSL, this mode uses a hue angle.
   * Instead of saturation and lightness, HWB defines colors based on the percentage
   * of whiteness and blackness. This is the color model used by Chrome's GUI color picker.
   * Pure red in HWB is represented as `color(0, 0, 0)` (i.e., hue 0 with 0% whiteness and 0% blackness).
   * 
   * `     <img src="assets/hwb.png"></img>``LAB`    - Also known as CIE Lab, this color mode defines colors with Lightness, Alpha, and Beta.
   * It is widely used in professional color measurement contexts due to its perceptual uniformity.
   * 
   * `LCH`    - A more intuitive representation of the CIE Lab color space using Lightness, Chroma, and Hue.
   * This mode separates the color's chromatic intensity (chroma) from its lightness,
   * simplifying color selection and manipulation.
   * 
   * `OKLAB`  - A variant of the CIE Lab color space that corrects for non-uniformities inherent in LAB.
   * The adjustment provides a more perceptually accurate and uniform representation,
   * which is particularly beneficial for smooth color transitions.
   * 
   * `OKLCH`  - An easier-to-use representation of OKLAB, expressing colors in terms of Lightness, Chroma, and Hue.
   * This mode retains the perceptual benefits of OKLAB while offering a more intuitive format for color manipulation.
   * 
   * <a href="#/p5.Color">p5.Color</a> objects remember the mode that they were
   * created in. Changing modes doesn't affect their appearance.
   * 
   * `Single-value (Grayscale) Colors`:
   * When a color is specified with only one parameter (e.g., `color(g)`), p5.js will interpret it
   * as a grayscale color. However, how that single parameter translates into a grayscale value
   * depends on the color mode:
   * 
   * - `RGB, HSB, and HSL`: In RGB, the single value is interpreted using the “blue” maximum
   * (i.e., the single parameter is mapped to the blue channel's max).
   * In HSB and HSL, the single value is mapped to Brightness and Lightness max respectively with hue=0 .
   * and saturation=0.
   * 
   * - `LAB, LCH, OKLAB, and OKLCH`: The single value is taken to be the `lightness (L)` component,
   * with the specified max range for that channel.
   * 
   * - `HWB`: Grayscale relies on both the `whiteness (W)` and `blackness (B)` channels. Since
   * a single value cannot directly account for two distinct channels, the library uses an
   * average of their max values to interpret the single grayscale parameter. For instance,
   * if W has a max of 50 and B has a max of 100, then the single grayscale parameter
   * is mapped using (50 + 100) / 2 = 75 as its effective maximum. More complex or negative
   * ranges are currently not handled, so results in those cases may be ambiguous.
   * @param mode either RGB, HSB, HSL,
   * or one of the extended modes described above.
   * @param max range for all values.
   * @returns The current color mode.
   */
  colorMode(mode: typeof P5.RGB | typeof P5.HSB | typeof P5.HSL | typeof P5.RGBP3 | typeof P5.HWB | typeof P5.LAB | typeof P5.LCH | typeof P5.OKLAB | typeof P5.OKLCH, max?: number): typeof P5.RGB | typeof P5.HSB | typeof P5.HSL | typeof P5.RGBP3 | typeof P5.HWB | typeof P5.LAB | typeof P5.LCH | typeof P5.OKLAB | typeof P5.OKLCH;
  colorMode(mode: typeof P5.RGB | typeof P5.HSB | typeof P5.HSL | typeof P5.RGBP3 | typeof P5.HWB | typeof P5.LAB | typeof P5.LCH | typeof P5.OKLAB | typeof P5.OKLCH, max1: number, max2: number, max3: number, maxA?: number): typeof P5.RGB | typeof P5.HSB | typeof P5.HSL | typeof P5.RGBP3 | typeof P5.HWB | typeof P5.LAB | typeof P5.LCH | typeof P5.OKLAB | typeof P5.OKLCH;
  colorMode(): typeof P5.RGB | typeof P5.HSB | typeof P5.HSL | typeof P5.RGBP3 | typeof P5.HWB | typeof P5.LAB | typeof P5.LCH | typeof P5.OKLAB | typeof P5.OKLCH;

  /**
   * Returns the current
   * <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#parameters" target="_blank">URL parameters</a>
   * in an `Object`.
   * 
   * For example, calling `getURLParams()` in a sketch hosted at the URL
   * `https://p5js.org?year=2014&month=May&day=15` returns
   * `{ year: 2014, month: 'May', day: 15 }`.
   * @returns URL params
   */
  getURLParams(): object;

  /**
   * Draws an image to the canvas.
   * 
   * The first parameter, `img`, is the source image to be drawn. `img` can be
   * any of the following objects:
   * 
   * - <a href="#/p5.Image">p5.Image</a>
   * 
   * - <a href="#/p5.Element">p5.Element</a>
   * 
   * - <a href="#/p5.Texture">p5.Texture</a>
   * 
   * - <a href="#/p5.Framebuffer">p5.Framebuffer</a>
   * 
   * - <a href="#/p5.FramebufferTexture">p5.FramebufferTexture</a>
   * 
   * The second and third parameters, `dx` and `dy`, set the coordinates of the
   * destination image's top left corner. See
   * <a href="#/p5/imageMode">imageMode()</a> for other ways to position images.
   * 
   * `let img;
   * 
   * async function setup() {
   * // Load the image.
   * img = await loadImage('assets/laDefense.jpg');
   * 
   * createCanvas(100, 100);
   * 
   * background(50);
   * 
   * // Draw the image.
   * image(img, 0, 0);
   * 
   * describe('An image of the underside of a white umbrella with a gridded ceiling above.');
   * }`Here's a diagram that explains how optional parameters work in `image()`:
   * 
   * <img src="assets/drawImage.png"></img>
   * 
   * The fourth and fifth parameters, `dw` and `dh`, are optional. They set the
   * the width and height to draw the destination image. By default, `image()`
   * draws the full source image at its original size.
   * 
   * The sixth and seventh parameters, `sx` and `sy`, are also optional.
   * These coordinates define the top left corner of a subsection to draw from
   * the source image.
   * 
   * The eighth and ninth parameters, `sw` and `sh`, are also optional.
   * They define the width and height of a subsection to draw from the source
   * image. By default, `image()` draws the full subsection that begins at
   * `(sx, sy)` and extends to the edges of the source image.
   * 
   * The ninth parameter, `fit`, is also optional. It enables a subsection of
   * the source image to be drawn without affecting its aspect ratio. If
   * `CONTAIN` is passed, the full subsection will appear within the destination
   * rectangle. If `COVER` is passed, the subsection will completely cover the
   * destination rectangle. This may have the effect of zooming into the
   * subsection.
   * 
   * The tenth and eleventh paremeters, `xAlign` and `yAlign`, are also
   * optional. They determine how to align the fitted subsection. `xAlign` can
   * be set to either `LEFT`, `RIGHT`, or `CENTER`. `yAlign` can be set to
   * either `TOP`, `BOTTOM`, or `CENTER`. By default, both `xAlign` and `yAlign`
   * are set to `CENTER`.
   * @param img image to display.
   * @param x x-coordinate of the top-left corner of the image.
   * @param y y-coordinate of the top-left corner of the image.
   * @param width width to draw the image.
   * @param height height to draw the image.
   */
  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 falloff rate for <a href="#/p5/pointLight">pointLight()</a>
   * and <a href="#/p5/spotLight">spotLight()</a>.
   * 
   * A light’s falloff describes the intensity of its beam at a distance. For
   * example, a lantern has a slow falloff, a flashlight has a medium falloff,
   * and a laser pointer has a sharp falloff.
   * 
   * `lightFalloff()` has three parameters, `constant`, `linear`, and
   * `quadratic`. They’re numbers used to calculate falloff at a distance, `d`,
   * as follows:
   * 
   * `falloff = 1 / (constant + d * linear + (d * d) * quadratic)`
   * 
   * Note: `constant`, `linear`, and `quadratic` should always be set to values
   * greater than 0.
   * @param constant constant value for calculating falloff.
   * @param linear linear value for calculating falloff.
   * @param quadratic quadratic value for calculating falloff.
   */
  lightFalloff(constant: number, linear: number, quadratic: number): 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 = millis() / 1000;
   * 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);
   * 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;

  /**
   * A function that's called when the mouse moves.
   * 
   * Declaring the function `mouseMoved()` sets a code block to run
   * automatically when the user moves the mouse without clicking any mouse
   * buttons:
   * 
   * `function mouseMoved() {
   * // Code to run.
   * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
   * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
   * value when `mouseMoved()` is called by p5.js:
   * 
   * `function mouseMoved() {
   * if (mouseX < 50) {
   * // Code to run if the mouse is on the left.
   * }
   * 
   * if (mouseY > 50) {
   * // Code to run if the mouse is near the bottom.
   * }
   * }`The parameter, `event`, is optional. `mouseMoved()` is always passed a
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank">MouseEvent</a>
   * object with properties that describe the mouse move event:
   * 
   * `function mouseMoved(event) {
   * // Code to run that uses the event.
   * console.log(event);
   * }`Browsers may have default behaviors attached to various mouse events. For
   * example, some browsers highlight text when the user moves the mouse while
   * pressing a mouse button. To prevent any default behavior for this event,
   * add `return false;` to the end of the function.
   * @param event optional `MouseEvent` argument.
   */
  mouseMoved(event?: MouseEvent): void;

  /**
   * A function that's called when the mouse moves while a button is pressed.
   * 
   * Declaring the function `mouseDragged()` sets a code block to run
   * automatically when the user clicks and drags the mouse:
   * 
   * `function mouseDragged() {
   * // Code to run.
   * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
   * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
   * value when `mouseDragged()` is called by p5.js:
   * 
   * `function mouseDragged() {
   * if (mouseX < 50) {
   * // Code to run if the mouse is on the left.
   * }
   * 
   * if (mouseY > 50) {
   * // Code to run if the mouse is near the bottom.
   * }
   * }`The parameter, `event`, is optional. `mouseDragged()` is always passed a
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank">MouseEvent</a>
   * object with properties that describe the mouse drag event:
   * 
   * `function mouseDragged(event) {
   * // Code to run that uses the event.
   * console.log(event);
   * }`On touchscreen devices, `mouseDragged()` will run when a user moves a touch
   * point.
   * 
   * Browsers may have default behaviors attached to various mouse events. For
   * example, some browsers highlight text when the user moves the mouse while
   * pressing a mouse button. To prevent any default behavior for this event,
   * add `return false;` to the end of the function.
   * @param event optional `MouseEvent` argument.
   */
  mouseDragged(event?: MouseEvent): void;

  /**
   * Returns `true` if the key it’s checking is pressed and `false` if not.
   * 
   * `keyIsDown()` is helpful when checking for multiple different key presses.
   * For example, `keyIsDown()` can be used to check if both `LEFT_ARROW` and
   * `UP_ARROW` are pressed:
   * 
   * `if (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) {
   * // Move diagonally.
   * }``keyIsDown()` can check for key presses using strings based on
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key" target="_blank">KeyboardEvent.key</a>
   * or <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code" target="_blank">KeyboardEvent.code</a> values,
   * such as `keyIsDown('x')` or `keyIsDown('ArrowLeft')`.
   * 
   * Note: In p5.js 2.0 and newer, numeric keycodes (such as 88 for 'X') are no longer supported.
   * This is a breaking change from previous versions.
   * 
   * You can still use the p5 constants like `LEFT_ARROW` which now map to string values
   * internally rather than numeric codes.
   * @param code key to check.
   * @returns whether the key is down or not.
   */
  keyIsDown(code: number | string): boolean;

  /**
   * Sets the element's content.
   * 
   * An element's content is the text between its tags. For example, the element
   * `<language>JavaScript</language>` 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;

  /**
   * 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;

  /**
   * Draws a rectangle.
   * 
   * A rectangle is a four-sided shape defined by the `x`, `y`, `w`, and `h`
   * parameters. `x` and `y` set the location of its top-left corner. `w` sets
   * its width and `h` sets its height. Every angle in the rectangle measures
   * 90˚. See <a href="#/p5/rectMode">rectMode()</a> for other ways to define
   * rectangles.
   * 
   * The version of `rect()` with five parameters creates a rounded rectangle. The
   * fifth parameter sets the radius for all four corners.
   * 
   * The version of `rect()` with eight parameters also creates a rounded
   * rectangle. Each of the last four parameters set the radius of a corner. The
   * radii start with the top-left corner and move clockwise around the
   * rectangle. If any of these parameters are omitted, they are set to the
   * value of the last radius that was set.
   * @param x x-coordinate of the rectangle.
   * @param y y-coordinate of the rectangle.
   * @param w width of the rectangle.
   * @param h height of the rectangle.
   * @param tl optional radius of top-left corner.
   * @param tr optional radius of top-right corner.
   * @param br optional radius of bottom-right corner.
   * @param bl optional radius of bottom-left corner.
   */
  rect(x: number, y: number, w: number, h?: number, tl?: number, tr?: number, br?: number, bl?: number): void;
  rect(x: number, y: number, w: number, h: number, detailX?: number, detailY?: number): void;

  /**
   * Shears the y-axis so that shapes appear skewed.
   * 
   * By default, the x- and y-axes are perpendicular. The `shearY()` function
   * transforms the coordinate system so that y-coordinates are translated while
   * x-coordinates are fixed.
   * 
   * The first parameter, `angle`, is the amount to shear. For example, calling
   * `shearY(1)` transforms all y-coordinates using the formula
   * `y = y + x * tan(angle)`. `shearY()` interprets angle values using the
   * current <a href="#/p5/angleMode">angleMode()</a>.
   * 
   * By default, transformations accumulate. For example, calling
   * `shearY(1)` twice has the same effect as calling `shearY(2)` once. The
   * <a href="#/p5/push">push()</a> and
   * <a href="#/p5/pop">pop()</a> functions can be used to isolate
   * transformations within distinct drawing groups.
   * 
   * Note: Transformations are reset at the beginning of the draw loop. Calling
   * `shearY(1)` inside the <a href="#/p5/draw">draw()</a> function won't
   * cause shapes to shear continuously.
   * @param angle angle to shear by in the current <a href="#/p5/angleMode">angleMode()</a>.
   */
  shearY(angle: number): void;

  /**
   * Returns the smallest value in a sequence of numbers.
   * 
   * The version of `min()` with one parameter interprets it as an array of
   * numbers and returns the smallest number.
   * 
   * The version of `min()` with two or more parameters interprets them as
   * individual numbers and returns the smallest number.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Calculate the minimum of 10, 5, and 20.
   * let m = min(10, 5, 20);
   * 
   * // Style the text.
   * textAlign(CENTER);
   * textSize(16);
   * 
   * // Display the min.
   * text(m, 50, 50);
   * 
   * describe('The number 5 written in the middle of a gray square.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create an array of numbers.
   * let numbers = [10, 5, 20];
   * 
   * // Calculate the minimum of the array.
   * let m = min(numbers);
   * 
   * // Style the text.
   * textAlign(CENTER);
   * textSize(16);
   * 
   * // Display the min.
   * text(m, 50, 50);
   * 
   * describe('The number 5 written in the middle of a gray square.');
   * }``min()` can also be used in shaders with p5.strands. The following example
   * uses `min()` to clamp values in a shader.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere that shifts from red to green and stops.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
   * let t = millis() * 0.001;
   * 
   * // t * 0.2 grows steadily over time.
   * // min(..., 1) caps the value at 1 so it doesn't go past the target color.
   * let value = min(t * 0.2, 1);
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let deepRed = [0.8, 0, 0.2, 1];
   * let yellowGreen = [0.8, 1, 0.2, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between deepRed (when value = 0) and yellowGreen (when value = 1).
   * // min() clamps the blend so the color stops changing once it reaches yellowGreen.
   * finalColor.set(mix(deepRed, yellowGreen, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param n0 first number to compare.
   * @param n1 second number to compare.
   * @returns minimum number.
   */
  min(n0: number, n1: number): number;
  min(nums: number[]): number;

  /**
   * Method for executing an HTTP request. If data type is not specified,
   * it will default to `'text'`.
   * 
   * This function is meant for more advanced usage of HTTP requests in p5.js. It is
   * best used when a `Request`
   * object is passed to the `path` parameter.
   * 
   * This method is suitable for fetching files up to size of 64MB when "GET" is used.
   * @param path name of the file or url to load
   * @param method either "GET", "POST", "PUT", "DELETE",
   * or other HTTP request methods
   * @param datatype "json", "jsonp", "xml", or "text"
   * @param data param data passed sent with request
   * @param callback function to be executed after
   * <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
   * as first argument
   * @param errorCallback function to be executed if
   * there is an error, response is passed
   * in as first argument
   * @returns A promise that resolves with the data when the operation
   * completes successfully or rejects with the error after
   * one occurs.
   */
  httpDo(path: string | Request, method?: string, datatype?: string, data?: object, callback?: Function, errorCallback?: Function): Promise<any>;
  httpDo(path: string | Request, callback?: Function, errorCallback?: Function): Promise<any>;

  /**
   * Draws a <a href="#/p5.Geometry">p5.Geometry</a> object to the canvas.
   * 
   * The first parameter, `model`, is the
   * <a href="#/p5.Geometry">p5.Geometry</a> object to draw.
   * <a href="#/p5.Geometry">p5.Geometry</a> objects can be built with
   * <a href="#/p5/buildGeometry">buildGeometry()</a>. They can also be loaded from
   * a file with <a href="#/p5/loadGeometry">loadGeometry()</a>.
   * 
   * Note: `model()` can only be used in WebGL mode.
   * 
   * `// Click and drag the mouse to view the scene from different angles.
   * 
   * let shape;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * 
   * // Create the p5.Geometry object.
   * shape = buildGeometry(createShape);
   * 
   * describe('A white cone drawn on a gray background.');
   * }
   * 
   * function draw() {
   * background(200);
   * 
   * // Enable orbiting with the mouse.
   * orbitControl();
   * 
   * // Draw the p5.Geometry object.
   * model(shape);
   * }
   * 
   * // Create p5.Geometry object from a single cone.
   * function createShape() {
   * cone();
   * }``// Click and drag the mouse to view the scene from different angles.
   * 
   * let shape;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * 
   * // Create the p5.Geometry object.
   * shape = buildGeometry(createArrow);
   * 
   * describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');
   * }
   * 
   * function draw() {
   * background(50);
   * 
   * // Enable orbiting with the mouse.
   * orbitControl();
   * 
   * // Turn on the lights.
   * lights();
   * 
   * // Style the arrows.
   * noStroke();
   * 
   * // Draw the p5.Geometry object.
   * model(shape);
   * 
   * // Translate and rotate the coordinate system.
   * translate(30, 0, 0);
   * rotateZ(frameCount * 0.01);
   * 
   * // Draw the p5.Geometry object again.
   * model(shape);
   * }
   * 
   * function createArrow() {
   * // Add shapes to the p5.Geometry object.
   * push();
   * rotateX(PI);
   * cone(10);
   * translate(0, -10, 0);
   * cylinder(3, 20);
   * pop();
   * }``// Click and drag the mouse to view the scene from different angles.
   * 
   * let shape;
   * 
   * async function setup() {
   * shape = await loadModel('assets/octahedron.obj');
   * 
   * createCanvas(100, 100, WEBGL);
   * 
   * describe('A white octahedron drawn against a gray background.');
   * }
   * 
   * function draw() {
   * background(200);
   * 
   * // Enable orbiting with the mouse.
   * orbitControl();
   * 
   * // Draw the shape.
   * model(shape);
   * }`Multiple instances can be drawn at once with `model(geometry, count)`. On its own,
   * all the instances get drawn to the same spot, but you can use
   * <a href="#/p5/instanceID">`instanceID()`</a> inside of a shader to handle each instance.
   * At large counts, this often runs faster than using a `for` loop.
   * 
   * `let instancesShader;
   * let instance;
   * let count = 5;
   * 
   * function drawInstance() {
   * sphere(15);
   * }
   * 
   * function setup() {
   * createCanvas(200, 200, WEBGL);
   * instance = buildGeometry(drawInstance);
   * instancesShader = buildMaterialShader(drawSpaced);
   * }
   * 
   * function drawSpaced() {
   * worldInputs.begin();
   * // Spread spheres evenly across the canvas based on their index
   * let spacing = width / count;
   * worldInputs.position.x +=
   * (instanceID() - (count - 1) / 2) * spacing;
   * worldInputs.end();
   * }
   * 
   * function draw() {
   * background(220);
   * lights();
   * noStroke();
   * fill('red');
   * shader(instancesShader);
   * model(instance, count);
   * }`
   * @param model 3D shape to be drawn.
   * @param count number of instances to draw.
   */
  model(model: P5.Geometry, count?: number): void;

  /**
   * Gets the hue value of a color.
   * 
   * `hue()` extracts the hue value from a
   * <a href="/reference/p5/p5.Color/">p5.Color</a> object, an array of color components, or
   * a CSS color string.
   * 
   * Hue describes a color's position on the color wheel. By default, `hue()`
   * returns a color's HSL hue in the range 0 to 360. If the
   * <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB or HSL, it returns the hue
   * value in the given mode.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Use HSL color.
   * colorMode(HSL);
   * 
   * // Create a p5.Color object.
   * let c = color(0, 50, 100);
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 20, 35, 60);
   * 
   * // Set 'hueValue' to 0.
   * let hueValue = hue(c);
   * 
   * // Draw the right rectangle.
   * fill(hueValue);
   * rect(50, 20, 35, 60);
   * 
   * describe(
   * 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
   * );
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Use HSL color.
   * colorMode(HSL);
   * 
   * // Create a color array.
   * let c = [0, 50, 100];
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 20, 35, 60);
   * 
   * // Set 'hueValue' to 0.
   * let hueValue = hue(c);
   * 
   * // Draw the right rectangle.
   * fill(hueValue);
   * rect(50, 20, 35, 60);
   * 
   * describe(
   * 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
   * );
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Use HSL color.
   * colorMode(HSL);
   * 
   * // Create a CSS color string.
   * let c = 'rgb(255, 128, 128)';
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 20, 35, 60);
   * 
   * // Set 'hueValue' to 0.
   * let hueValue = hue(c);
   * 
   * // Draw the right rectangle.
   * fill(hueValue);
   * rect(50, 20, 35, 60);
   * 
   * describe(
   * 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
   * );
   * }`In p5.strands shader callbacks, `hue()` operates on `vec4` values and
   * returns the hue as a normalized value in the 0–1 range.
   * `colorMode()` has no effect inside shader callbacks.
   * 
   * `let myShader;
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildMaterialShader(myShaderBuilder);
   * }
   * 
   * function myShaderBuilder() {
   * finalColor.begin();
   * let c = color(0, 255, 128);
   * let h = hue(c);
   * finalColor.set(vec4(h, h, h, 1.0));
   * finalColor.end();
   * }
   * 
   * function draw() {
   * shader(myShader);
   * noStroke();
   * sphere(40);
   * 
   * describe('A sphere shaded in grayscale based on hue.');
   * }`
   * @param color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
   * color components, or CSS color string.
   * @returns the hue value.
   */
  hue(color: P5.Color | number[] | string): number;

  /**
   * Creates a dropdown menu `<select></select>` element.
   * 
   * The parameter is optional. If `true` is passed, as in
   * `let mySelect = createSelect(true)`, then the dropdown will support
   * multiple selections. If an existing `<select></select>` element
   * is passed, as in `let mySelect = createSelect(otherSelect)`, the existing
   * element will be wrapped in a new <a href="#/p5.Element">p5.Element</a>
   * object.
   * 
   * Dropdowns extend the <a href="#/p5.Element">p5.Element</a> class with a few
   * helpful methods for managing options:
   * 
   * - `mySelect.option(name, [value])` adds an option to the menu. The first paremeter, `name`, is a string that sets the option's name and value. The second parameter, `value`, is optional. If provided, it sets the value that corresponds to the key `name`. If an option with `name` already exists, its value is changed to `value`.
   * 
   * - `mySelect.value()` returns the currently-selected option's value.
   * 
   * - `mySelect.selected()` returns the currently-selected option.
   * 
   * - `mySelect.selected(option)` selects the given option by default.
   * 
   * - `mySelect.disable()` marks the whole dropdown element as disabled.
   * 
   * - `mySelect.disable(option)` marks a given option as disabled.
   * 
   * - `mySelect.enable()` marks the whole dropdown element as enabled.
   * 
   * - `mySelect.enable(option)` marks a given option as enabled.
   * @param multiple support multiple selections.
   * @returns new <a href="#/p5.Element">p5.Element</a> object.
   */
  createSelect(multiple?: boolean): P5.Element;
  createSelect(existing: object): P5.Element;

  /**
   * Draws a cone.
   * 
   * A cone is a 3D shape with triangular faces that connect a flat bottom to a
   * single point. Cones with few faces look like pyramids. Cones with many
   * faces have smooth surfaces.
   * 
   * The first parameter, `radius`, is optional. If a `Number` is passed, as in
   * `cone(20)`, it sets the radius of the cone’s base. By default, `radius` is
   * 50.
   * 
   * The second parameter, `height`, is also optional. If a `Number` is passed,
   * as in `cone(20, 30)`, it sets the cone’s height. By default, `height` is
   * set to the cone’s `radius`.
   * 
   * The third parameter, `detailX`, is also optional. If a `Number` is passed,
   * as in `cone(20, 30, 5)`, it sets the number of edges used to form the
   * cone's base. Using more edges makes the base look more like a circle. By
   * default, `detailX` is 24.
   * 
   * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
   * as in `cone(20, 30, 5, 7)`, it sets the number of triangle subdivisions to
   * use along the y-axis connecting the base to the tip. All 3D shapes are made
   * by connecting triangles to form their surfaces. By default, `detailY` is 1.
   * 
   * The fifth parameter, `cap`, is also optional. If a `false` is passed, as
   * in `cone(20, 30, 5, 7, false)` the cone’s base won’t be drawn. By default,
   * `cap` is `true`.
   * 
   * Note: `cone()` can only be used in WebGL mode.
   * @param radius radius of the cone's base. Defaults to 50.
   * @param height height of the cone. Defaults to the value of `radius`.
   * @param detailX number of edges used to draw the base. Defaults to 24.
   * @param detailY number of triangle subdivisions along the y-axis. Defaults to 1.
   * @param cap whether to draw the cone's base.  Defaults to `true`.
   */
  cone(radius?: number, height?: number, detailX?: number, detailY?: number, cap?: boolean): void;

  /**
   * Maps a number from one range to a value between 0 and 1.
   * 
   * For example, `norm(2, 0, 10)` returns 0.2. 2's position in the original
   * range [0, 10] is proportional to 0.2's position in the range [0, 1]. This
   * is the same as calling `map(2, 0, 10, 0, 1)`.
   * 
   * Numbers outside of the original range are not constrained between 0 and 1.
   * Out-of-range values are often intentional and useful.
   * @param value incoming value to be normalized.
   * @param start lower bound of the value's current range.
   * @param stop upper bound of the value's current range.
   * @returns normalized number.
   */
  norm(value: number, start: number, stop: number): number;

  /**
   * Converts 3D world coordinates to 2D screen coordinates.
   * 
   * This function takes a 3D vector and converts its coordinates
   * from the world space to screen space. This can be useful for placing
   * 2D elements in a 3D scene or for determining the screen position
   * of 3D objects.
   * @param x The x coordinate in world space. (Or a vector for all three coordinates.)
   * @param y The y coordinate in world space.
   * @param z The z coordinate in world space.
   * @returns A vector containing the 2D screen coordinates.
   */
  worldToScreen(x: number | P5.Vector, y: number, z?: number): P5.Vector;

  /**
   * Sets the shader's vertex property or attribute variables.
   * 
   * A vertex property, or vertex attribute, is a variable belonging to a vertex in a shader. p5.js provides some
   * default properties, such as `aPosition`, `aNormal`, `aVertexColor`, etc. These are
   * set using <a href="#/p5/vertex">vertex()</a>, <a href="#/p5/normal">normal()</a>
   * and <a href="#/p5/fill">fill()</a> respectively. Custom properties can also
   * be defined within <a href="#/p5/beginShape">beginShape()</a> and
   * <a href="#/p5/endShape">endShape()</a>.
   * 
   * The first parameter, `propertyName`, is a string with the property's name.
   * This is the same variable name which should be declared in the shader, such as
   * `in vec3 aProperty`, similar to .`setUniform()`.
   * 
   * The second parameter, `data`, is the value assigned to the shader variable. This
   * value will be applied to subsequent vertices created with
   * <a href="#/p5/vertex">vertex()</a>. It can be a Number or an array of numbers,
   * and in the shader program the type can be declared according to the WebGL
   * specification. Common types include `float`, `vec2`, `vec3`, `vec4` or matrices.
   * 
   * See also the <a href="#/p5/vertexProperty">vertexProperty()</a> method on
   * <a href="#/p5/Geometry">Geometry</a> objects.
   * @param attributeName the name of the vertex attribute.
   * @param data the data tied to the vertex attribute.
   */
  vertexProperty(attributeName: string, data: number | number[]): void;

  /**
   * Draws a square.
   * 
   * A square is a four-sided shape defined by the `x`, `y`, and `s`
   * parameters. `x` and `y` set the location of its top-left corner. `s` sets
   * its width and height. Every angle in the square measures 90˚ and all its
   * sides are the same length. See <a href="#/p5/rectMode">rectMode()</a> for
   * other ways to define squares.
   * 
   * The version of `square()` with four parameters creates a rounded square.
   * The fourth parameter sets the radius for all four corners.
   * 
   * The version of `square()` with seven parameters also creates a rounded
   * square. Each of the last four parameters set the radius of a corner. The
   * radii start with the top-left corner and move clockwise around the
   * square. If any of these parameters are omitted, they are set to the
   * value of the last radius that was set.
   * @param x x-coordinate of the square.
   * @param y y-coordinate of the square.
   * @param s side size of the square.
   * @param tl optional radius of top-left corner.
   * @param tr optional radius of top-right corner.
   * @param br optional radius of bottom-right corner.
   * @param bl optional radius of bottom-left corner.
   */
  square(x: number, y: number, s: number, tl?: number, tr?: number, br?: number, bl?: number): void;

  /**
   * Converts 2D screen coordinates to 3D world coordinates.
   * 
   * This function takes a vector and converts its coordinates from coordinates
   * on the screen to coordinates in the currently drawn object. This can be
   * useful for determining the mouse position relative to a 2D or 3D object.
   * 
   * If given, the Z component of the input coordinates is treated as "depth",
   * or distance from the camera.
   * @param x The x coordinate in screen space. (Or a vector for all three coordinates.)
   * @param y The y coordinate in screen space.
   * @param z The z coordinate in screen space.
   * @returns A vector containing the 3D world space coordinates.
   */
  screenToWorld(x: number | P5.Vector, y: number, z?: number): P5.Vector;

  /**
   * Load a 3d model from an OBJ or STL string.
   * 
   * OBJ and STL files lack a built-in sense of scale, causing models exported from different programs to vary in size.
   * If your model doesn't display correctly, consider using `loadModel()` with `normalize` set to `true` to standardize its size.
   * Further adjustments can be made using the `scale()` function.
   * 
   * Also, the support for colored STL files is not present. STL files with color will be
   * rendered without color properties.
   * 
   * - Options can include:
   * 
   * - `modelString`: Specifies the plain text string of either an stl or obj file to be loaded.
   * 
   * - `fileType`: Defines the file extension of the model.
   * 
   * - `normalize`: Enables standardized size scaling during loading if set to true.
   * 
   * - `successCallback`: Callback for post-loading actions with the 3D model object.
   * 
   * - `failureCallback`: Handles errors if model loading fails, receiving an event error.
   * 
   * - `flipU`: Flips the U texture coordinates of the model.
   * 
   * - `flipV`: Flips the V texture coordinates of the model.
   * @param modelString String of the object to be loaded
   * @param fileType The file extension of the model
   * (<code>.stl</code>, <code>.obj</code>).
   * @param normalize If true, scale the model to a
   * standardized size when loading
   * @param successCallback Function to be called
   * once the model is loaded. Will be passed
   * the 3D model object.
   * @param failureCallback called with event error if
   * the model fails to load.
   * @returns the <a href="#/p5.Geometry">p5.Geometry</a> object
   */
  createModel(modelString: string, fileType?: string, normalize?: boolean, successCallback?: (arg0: P5.Geometry) => void, failureCallback?: (arg0: Event) => void): P5.Geometry;
  createModel(modelString: string, fileType?: string, successCallback?: (arg0: P5.Geometry) => void, failureCallback?: (arg0: Event) => void): P5.Geometry;
  createModel(modelString: string, fileType?: string, options?: { successCallback?: (arg0: P5.Geometry) => void; failureCallback?: (arg0: Event) => void; normalize?: boolean; flipU?: boolean; flipV?: boolean }): P5.Geometry;

  /**
   * 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;

  /**
   * A function that's called once when a mouse button is pressed.
   * 
   * Declaring the function `mousePressed()` sets a code block to run
   * automatically when the user presses a mouse button:
   * 
   * `function mousePressed() {
   * // Code to run.
   * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
   * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
   * value when `mousePressed()` is called by p5.js:
   * 
   * `function mousePressed() {
   * if (mouseX < 50) {
   * // Code to run if the mouse is on the left.
   * }
   * 
   * if (mouseY > 50) {
   * // Code to run if the mouse is near the bottom.
   * }
   * }`The parameter, `event`, is optional. `mousePressed()` 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 press event:
   * 
   * `function mousePressed(event) {
   * // Code to run that uses the event.
   * console.log(event);
   * }`On touchscreen devices, `mousePressed()` will run when a user’s touch
   * begins.
   * 
   * 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.
   * 
   * Note: `mousePressed()`, <a href="#/p5/mouseReleased">mouseReleased()</a>,
   * and <a href="#/p5/mouseClicked">mouseClicked()</a> are all related.
   * `mousePressed()` runs as soon as the user clicks the mouse.
   * <a href="#/p5/mouseReleased">mouseReleased()</a> runs as soon as the user
   * releases the mouse click. <a href="#/p5/mouseClicked">mouseClicked()</a>
   * runs immediately after <a href="#/p5/mouseReleased">mouseReleased()</a>.
   * @param event optional `MouseEvent` argument.
   */
  mousePressed(event?: MouseEvent): void;

  /**
   * Calculates exponential expressions such as <var>2<sup>3</sup></var>.
   * 
   * For example, `pow(2, 3)` evaluates the expression
   * 2 × 2 × 2. `pow(2, -3)` evaluates 1 ÷
   * (2 × 2 × 2).
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Set the base of the exponent.
   * let base = 3;
   * 
   * // Top-left.
   * let d = pow(base, 1);
   * circle(10, 10, d);
   * 
   * // Left-center.
   * d = pow(base, 2);
   * circle(20, 20, d);
   * 
   * // Right-center.
   * d = pow(base, 3);
   * circle(40, 40, d);
   * 
   * // Bottom-right.
   * d = pow(base, 4);
   * circle(80, 80, d);
   * 
   * describe('A series of circles that grow exponentially from top left to bottom right.');
   * }``pow()` can also be used in shaders with p5.strands. The following example
   * uses `pow()` to create a gamma curve effect on colors in a shader.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere with colors that shift with a power curve.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.0005 to slow it.
   * let t = millis() * 0.0005;
   * 
   * // pow(t, 2) squares the time value: it starts slow then accelerates.
   * let value = pow(t, 2);
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let deepBlue = [0, 0.1, 0.5, 1];
   * let gold = [1, 0.8, 0, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between deepBlue (when value = 0) and gold (when value = 1).
   * // Because pow() accelerates, the color transition gets faster over time.
   * finalColor.set(mix(deepBlue, gold, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param n base of the exponential expression.
   * @param e power by which to raise the base.
   * @returns n^e.
   */
  pow(n: number, e: number): number;

  /**
   * Translates the coordinate system.
   * 
   * By default, the origin `(0, 0)` is at the sketch's top-left corner in 2D
   * mode and center in WebGL mode. The `translate()` function shifts the origin
   * to a different position. Everything drawn after `translate()` is called
   * will appear to be shifted. There are two ways to call `translate()` with
   * parameters that set the origin's position.
   * 
   * The first way to call `translate()` uses numbers to set the amount of
   * translation. The first two parameters, `x` and `y`, set the amount to
   * translate along the positive x- and y-axes. For example, calling
   * `translate(20, 30)` translates the origin 20 pixels along the x-axis and 30
   * pixels along the y-axis. The third parameter, `z`, is optional. It sets the
   * amount to translate along the positive z-axis. For example, calling
   * `translate(20, 30, 40)` translates the origin 20 pixels along the x-axis,
   * 30 pixels along the y-axis, and 40 pixels along the z-axis.
   * 
   * The second way to call `translate()` uses a
   * <a href="#/p5.Vector">p5.Vector</a> object to set the amount of
   * translation. For example, calling `translate(myVector)` uses the x-, y-,
   * and z-components of `myVector` to set the amount to translate along the x-,
   * y-, and z-axes. Doing so is the same as calling
   * `translate(myVector.x, myVector.y, myVector.z)`.
   * 
   * By default, transformations accumulate. For example, calling
   * `translate(10, 0)` twice has the same effect as calling
   * `translate(20, 0)` once. The <a href="#/p5/push">push()</a> and
   * <a href="#/p5/pop">pop()</a> functions can be used to isolate
   * transformations within distinct drawing groups.
   * 
   * Note: Transformations are reset at the beginning of the draw loop. Calling
   * `translate(10, 0)` inside the <a href="#/p5/draw">draw()</a> function won't
   * cause shapes to move continuously.
   * @param x amount to translate along the positive x-axis.
   * @param y amount to translate along the positive y-axis.
   * @param z amount to translate along the positive z-axis.
   */
  translate(x: number, y: number, z?: number): void;
  translate(vector: P5.Vector): void;

  /**
   * Tints images using a color.
   * 
   * The version of `tint()` with one parameter interprets it one of four ways.
   * If the parameter is a number, it's interpreted as a grayscale value. If the
   * parameter is a string, it's interpreted as a CSS color string. An array of
   * `[R, G, B, A]` values or a <a href="#/p5.Color">p5.Color</a> object can
   * also be used to set the tint color.
   * 
   * The version of `tint()` with two parameters uses the first one as a
   * grayscale value and the second as an alpha value. For example, calling
   * `tint(255, 128)` will make an image 50% transparent.
   * 
   * The version of `tint()` with three parameters interprets them as RGB or
   * HSB values, depending on the current
   * <a href="#/p5/colorMode">colorMode()</a>. The optional fourth parameter
   * sets the alpha value. For example, `tint(255, 0, 0, 100)` will give images
   * a red tint and make them transparent.
   * 
   * Calling `tint()` without an argument returns the current tint as a
   * <a href="#/p5.Color">p5.Color</a> object.
   * @param v1 red or hue value.
   * @param v2 green or saturation value.
   * @param v3 blue or brightness.
   * @returns the current tint color
   */
  tint(v1: number, v2: number, v3: number, alpha?: number): P5.Color;
  tint(value: string): P5.Color;
  tint(gray: number, alpha?: number): P5.Color;
  tint(values: number[]): P5.Color;
  tint(color: P5.Color): P5.Color;
  tint(): P5.Color;

  /**
   * Creates a new <a href="#/p5.PrintWriter">p5.PrintWriter</a> object.
   * 
   * <a href="#/p5.PrintWriter">p5.PrintWriter</a> objects provide a way to
   * save a sequence of text data, called the print stream, to the user's
   * computer. They're low-level objects that enable precise control of text
   * output. Functions such as
   * <a href="#/p5/saveStrings">saveStrings()</a> and
   * <a href="#/p5/saveJSON">saveJSON()</a> are easier to use for simple file
   * saving.
   * 
   * The first parameter, `filename`, is the name of the file to be written. If
   * a string is passed, as in `createWriter('words.txt')`, a new
   * <a href="#/p5.PrintWriter">p5.PrintWriter</a> object will be created that
   * writes to a file named `words.txt`.
   * 
   * The second parameter, `extension`, is optional. If a string is passed, as
   * in `createWriter('words', 'csv')`, the first parameter will be interpreted
   * as the file name and the second parameter as the extension.
   * @param name name of the file to create.
   * @param extension format to use for the file.
   * @returns stream for writing data.
   */
  createWriter(name: string, extension?: string): P5.PrintWriter;

  /**
   * Creates a light that shines from a point in one direction.
   * 
   * Spot lights are like flashlights that shine in one direction creating a
   * cone of light. The shape of the cone can be controlled using the angle and
   * concentration parameters. A maximum of 5 spot lights can be active at once.
   * 
   * There are eight ways to call `spotLight()` with parameters to set the
   * light’s color, position, direction. For example,
   * `spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0)` creates a red `(255, 0, 0)` light
   * at the origin `(0, 0, 0)` that points to the right `(1, 0, 0)`.
   * 
   * The `angle` parameter is optional. It sets the radius of the light cone.
   * For example, `spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16)` creates a
   * red `(255, 0, 0)` light at the origin `(0, 0, 0)` that points to the right
   * `(1, 0, 0)` with an angle of `PI / 16` radians. By default, `angle` is
   * `PI / 3` radians.
   * 
   * The `concentration` parameter is also optional. It focuses the light
   * towards the center of the light cone. For example,
   * `spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16, 50)` creates a red
   * `(255, 0, 0)` light at the origin `(0, 0, 0)` that points to the right
   * `(1, 0, 0)` with an angle of `PI / 16` radians at concentration of 50. By
   * default, `concentration` is 100.
   * @param v1 red or hue value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   * @param v2 green or saturation value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   * @param v3 blue, brightness, or lightness value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   * @param x x-coordinate of the light.
   * @param y y-coordinate of the light.
   * @param z z-coordinate of the light.
   * @param rx x-component of light direction between -1 and 1.
   * @param ry y-component of light direction between -1 and 1.
   * @param rz z-component of light direction between -1 and 1.
   * @param angle angle of the light cone. Defaults to `PI / 3`.
   * @param concentration concentration of the light. Defaults to 100.
   */
  spotLight(v1: number, v2: number, v3: number, x: number, y: number, z: number, rx: number, ry: number, rz: number, angle?: number, concentration?: number): void;
  spotLight(color: P5.Color | number[] | string, position: P5.Vector, direction: P5.Vector, angle?: number, concentration?: number): void;
  spotLight(v1: number, v2: number, v3: number, position: P5.Vector, direction: P5.Vector, angle?: number, concentration?: number): void;
  spotLight(color: P5.Color | number[] | string, x: number, y: number, z: number, direction: P5.Vector, angle?: number, concentration?: number): void;
  spotLight(color: P5.Color | number[] | string, position: P5.Vector, rx: number, ry: number, rz: number, angle?: number, concentration?: number): void;
  spotLight(v1: number, v2: number, v3: number, x: number, y: number, z: number, direction: P5.Vector, angle?: number, concentration?: number): void;
  spotLight(v1: number, v2: number, v3: number, position: P5.Vector, rx: number, ry: number, rz: number, angle?: number, concentration?: number): void;
  spotLight(color: P5.Color | number[] | string, x: number, y: number, z: number, rx: number, ry: number, rz: number, angle?: number, concentration?: number): void;

  /**
   * Sets the color used to fill shapes.
   * 
   * Calling `fill(255, 165, 0)` or `fill('orange')` means all shapes drawn
   * after the fill command will be filled with the color orange.
   * 
   * The version of `fill()` with one parameter interprets the value one of
   * three ways. If the parameter is a `Number`, it's interpreted as a grayscale
   * value. If the parameter is a `String`, it's interpreted as a CSS color
   * string. A <a href="#/p5.Color">p5.Color</a> object can also be provided to
   * set the fill color.
   * 
   * The version of `fill()` with three parameters interprets them as RGB, HSB,
   * or HSL colors, depending on the current
   * <a href="#/p5/colorMode">colorMode()</a>. The default color space is RGB,
   * with each value in the range from 0 to 255.
   * 
   * The version of `fill()` with four parameters interprets them as `RGBA`, `HSBA`,
   * or `HSLA` colors, depending on the current <a href="#/p5/colorMode">colorMode()</a>. The last parameter
   * sets the alpha (transparency) value.
   * 
   * Calling `fill()` without an argument returns the current fill as a <a href="#/p5.Color">p5.Color</a> object.
   * @param v1 red value if color mode is RGB or hue value if color mode is HSB.
   * @param v2 green value if color mode is RGB or saturation value if color mode is HSB.
   * @param v3 blue value if color mode is RGB or brightness value if color mode is HSB.
   * @param alpha alpha value, controls transparency (0 - transparent, 255 - opaque).
   * @returns the current fill color.
   */
  fill(v1: number, v2: number, v3: number, alpha?: number): P5.Color;
  fill(value: string): P5.Color;
  fill(gray: number, alpha?: number): P5.Color;
  fill(values: number[]): P5.Color;
  fill(color: P5.Color): P5.Color;
  fill(): P5.Color;

  /**
   * Draws a triangle.
   * 
   * A triangle is a three-sided shape defined by three points. The
   * first two parameters specify the triangle's first point `(x1, y1)`. The
   * middle two parameters specify its second point `(x2, y2)`. And the last two
   * parameters specify its third point `(x3, y3)`.
   * @param x1 x-coordinate of the first point.
   * @param y1 y-coordinate of the first point.
   * @param x2 x-coordinate of the second point.
   * @param y2 y-coordinate of the second point.
   * @param x3 x-coordinate of the third point.
   * @param y3 y-coordinate of the third point.
   */
  triangle(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void;

  /**
   * Draws text to the canvas.
   * 
   * The first parameter, `str`, is the text to be drawn. The second and third
   * parameters, `x` and `y`, set the coordinates of the text's bottom-left
   * corner. See <a href="#/p5/textAlign">textAlign()</a> for other ways to
   * align text.
   * 
   * The fourth and fifth parameters, `maxWidth` and `maxHeight`, are optional.
   * They set the dimensions of the invisible rectangle containing the text. By
   * default, they set its  maximum width and height. See
   * <a href="#/p5/rectMode">rectMode()</a> for other ways to define the
   * rectangular text box. Text will wrap to fit within the text box. Text
   * outside of the box won't be drawn.
   * 
   * Text can be styled a few ways. Call the <a href="#/p5/fill">fill()</a>
   * function to set the text's fill color. Call
   * <a href="#/p5/stroke">stroke()</a> and
   * <a href="#/p5/strokeWeight">strokeWeight()</a> to set the text's outline.
   * Call <a href="#/p5/textSize">textSize()</a> and
   * <a href="#/p5/textFont">textFont()</a> to set the text's size and font,
   * respectively.
   * 
   * Note: `WEBGL` mode only supports fonts loaded with
   * <a href="#/p5/loadFont">loadFont()</a>. Calling
   * <a href="#/p5/stroke">stroke()</a> has no effect in `WEBGL` mode.
   * @param str text to be displayed.
   * @param x x-coordinate of the text box.
   * @param y y-coordinate of the text box.
   * @param maxWidth maximum width of the text box. See
   * <a href="#/p5/rectMode">rectMode()</a> for
   * other options.
   * @param maxHeight maximum height of the text box. See
   * <a href="#/p5/rectMode">rectMode()</a> for
   * other options.
   */
  text(str: string | object | any[] | number | boolean, x: number, y: number, maxWidth?: number, maxHeight?: number): void;

  /**
   * Sets the way text is aligned when <a href="#/p5/text">text()</a> is called.
   * 
   * By default, calling `text('hi', 10, 20)` places the bottom-left corner of
   * the text's bounding box at (10, 20).
   * 
   * The first parameter, `horizAlign`, changes the way
   * <a href="#/p5/text">text()</a> interprets x-coordinates. By default, the
   * x-coordinate sets the left edge of the bounding box. `textAlign()` accepts
   * the following values for `horizAlign`: `LEFT`, `CENTER`, or `RIGHT`.
   * 
   * The second parameter, `vertAlign`, is optional. It changes the way
   * <a href="#/p5/text">text()</a> interprets y-coordinates. By default, the
   * y-coordinate sets the bottom edge of the bounding box. `textAlign()`
   * accepts the following values for `vertAlign`: `TOP`, `BOTTOM`, `CENTER`,
   * or `BASELINE`.
   * 
   * Calling `textAlign()` without arguments returns the current alignment settings.
   * @param horizAlign horizontal alignment
   * @param vertAlign vertical alignment
   * @returns If no arguments are provided, returns an object with current horizontal and vertical alignment
   */
  textAlign(horizAlign?: typeof P5.LEFT | typeof P5.CENTER | typeof P5.RIGHT, vertAlign?: typeof P5.TOP | typeof P5.BOTTOM | typeof P5.CENTER | typeof P5.BASELINE): object;

  /**
   * Returns the ascent of the text.
   * 
   * The `textAscent()` function calculates the distance from the baseline to the
   * highest point of the current font. This value represents the ascent, which is essential
   * for determining the overall height of the text along with `textDescent()`. If
   * a text string is provided as an argument, the ascent is calculated based on that specific
   * string; otherwise, the ascent of the current font is returned.
   * @param txt (Optional) The text string for which to calculate the ascent.
   * If omitted, the function returns the ascent for the current font.
   * @returns The ascent value in pixels.
   */
  textAscent(txt?: string): number;

  /**
   * Returns the descent of the text.
   * 
   * The `textDescent()` function calculates the distance from the baseline to the
   * lowest point of the current font. This value represents the descent, which, when combined
   * with the ascent (from `textAscent()`), determines the overall vertical span of the text.
   * If a text string is provided as an argument, the descent is calculated based on that specific string;
   * otherwise, the descent of the current font is returned.
   * @param txt (Optional) The text string for which to calculate the descent.
   * If omitted, the function returns the descent for the current font.
   * @returns The descent value in pixels.
   */
  textDescent(txt?: string): number;

  /**
   * Sets the spacing between lines of text when
   * <a href="#/p5/text">text()</a> is called.
   * 
   * Note: Spacing is measured in pixels.
   * 
   * Calling `textLeading()` without an argument returns the current spacing.
   * @param leading The new text leading to apply, in pixels
   * @returns If no arguments are provided, the current text leading
   */
  textLeading(leading?: number): number;

  /**
   * Sets the font used by the <a href="#/p5/text">text()</a> function.
   * 
   * The first parameter, `font`, sets the font. `textFont()` recognizes either
   * a <a href="#/p5.Font">p5.Font</a> object or a string with the name of a
   * system font. For example, `'Courier New'`.
   * 
   * The second parameter, `size`, is optional. It sets the font size in pixels.
   * This has the same effect as calling <a href="#/p5/textSize">textSize()</a>.
   * 
   * Calling `textFont()` without arguments returns the current font.
   * 
   * Note: `WEBGL` mode only supports fonts loaded with
   * <a href="#/p5/loadFont">loadFont()</a>.
   * @param font The font to apply
   * @param size An optional text size to apply.
   * @returns If no arguments are provided, returns the current font
   */
  textFont(font?: P5.Font | string | object, size?: number): string | P5.Font;

  /**
   * Sets or gets the current text size.
   * 
   * The `textSize()` function is used to specify the size of the text
   * that will be rendered on the canvas. When called with an argument, it sets the
   * text size to the specified value (which can be a number representing pixels or a
   * CSS-style string, e.g., '32px', '2em'). When called without an argument, it
   * returns the current text size in pixels.
   * @param size The size to set for the text.
   * @returns If no arguments are provided, the current text size in pixels.
   */
  textSize(size: number): number;
  textSize(): number;

  /**
   * Sets the style for system fonts when
   * <a href="#/p5/text">text()</a> is called.
   * 
   * The parameter, `style`, can be either `NORMAL`, `ITALIC`, `BOLD`, or
   * `BOLDITALIC`.
   * 
   * `textStyle()` may be overridden by CSS styling. This function doesn't
   * affect fonts loaded with <a href="#/p5/loadFont">loadFont()</a>.
   * @param style The style to use
   * @returns If no arguments are provided, the current style
   */
  textStyle(style: typeof P5.NORMAL | typeof P5.ITALIC | typeof P5.BOLD | typeof P5.BOLDITALIC): typeof P5.NORMAL | typeof P5.ITALIC | typeof P5.BOLD | typeof P5.BOLDITALIC;
  textStyle(): typeof P5.NORMAL | typeof P5.BOLD | typeof P5.ITALIC | typeof P5.BOLDITALIC;

  /**
   * Calculates the width of the given text string in pixels.
   * 
   * The `textWidth()` function processes the provided text string to determine its tight bounding box
   * based on the current text properties such as font, textSize, and textStyle. Internally, it splits
   * the text into individual lines (if line breaks are present) and computes the bounding box for each
   * line using the renderer’s measurement functions. The final width is determined as the maximum width
   * among all these lines.
   * 
   * For example, if the text contains multiple lines due to wrapping or explicit line breaks, textWidth()
   * will return the width of the longest line.
   * 
   * Note: In p5.js 2.0+, leading and trailing spaces are ignored.
   * `textWidth("  Hello  ")` returns the same width as `textWidth("Hello")`.
   * @param text The text to measure
   * @returns The width of the text
   */
  textWidth(text: string): number;

  /**
   * Sets the style for wrapping text when
   * <a href="#/p5/text">text()</a> is called.
   * 
   * The parameter, `style`, can be one of the following values:
   * 
   * `WORD` starts new lines of text at spaces. If a string of text doesn't
   * have spaces, it may overflow the text box and the canvas. This is the
   * default style.
   * 
   * `CHAR` starts new lines as needed to stay within the text box.
   * 
   * `textWrap()` only works when the maximum width is set for a text box. For
   * example, calling `text('Have a wonderful day', 0, 10, 100)` sets the
   * maximum width to 100 pixels.
   * 
   * Calling `textWrap()` without an argument returns the current style.
   * @param style The wrapping style to use
   * @returns If no arguments are provided, the current wrapping style
   */
  textWrap(style: typeof P5.WORD | typeof P5.CHAR): typeof P5.CHAR | typeof P5.WORD;
  textWrap(): typeof P5.CHAR | typeof P5.WORD;

  /**
   * Computes the tight bounding box for a block of text.
   * 
   * The `textBounds()` function calculates the precise pixel boundaries that enclose
   * the rendered text based on the current text properties (such as font, textSize, textStyle, and
   * alignment). If the text spans multiple lines (due to line breaks or wrapping), the function
   * measures each line individually and then aggregates these measurements into a single bounding box.
   * The resulting object contains the x and y coordinates along with the width (w) and height (h)
   * of the text block.
   * @param str The text string to measure.
   * @param x The x-coordinate where the text is drawn.
   * @param y The y-coordinate where the text is drawn.
   * @param width (Optional) The maximum width available for the text block.
   * When specified, the text may be wrapped to fit within this width.
   * @param height (Optional) The maximum height available for the text block.
   * Any lines exceeding this height will be truncated.
   * @returns An object with properties `x`, `y`, `w`, and `h` that represent the tight
   * bounding box of the rendered text.
   */
  textBounds(str: string, x: number, y: number, width?: number, height?: number): object;

  /**
   * Sets or gets the text drawing direction.
   * 
   * The <code>textDirection()</code> function allows you to specify the direction in which text is
   * rendered on the canvas. When provided with a <code>direction</code> parameter (such as "ltr" for
   * left-to-right, "rtl" for right-to-left, or "inherit"), it updates the renderer's state with that
   * value and applies the new setting. When called without any arguments, it returns the current text
   * direction. This function is particularly useful for rendering text in languages with different
   * writing directions.
   * @param direction The text direction to set ("ltr", "rtl", or "inherit").
   * @returns If no arguments are provided, the current text direction, either "ltr", "rtl", or "inherit"
   */
  textDirection(direction: string): string;
  textDirection(): string;

  /**
   * Sets or gets a single text property for the renderer.
   * 
   * The `textProperty()` function allows you to set or retrieve a single text-related property,
   * such as `textAlign`, `textBaseline`, `fontStyle`, or any other property
   * that may be part of the renderer's state, its drawing context, or the canvas style.
   * 
   * When called with a `prop` and a `value`, the function sets the property by checking
   * for its existence in the renderer's state, the drawing context, or the canvas style. If the property is
   * successfully modified, the function applies the updated text properties. If called with only the
   * `prop` parameter, the function returns the current value of that property.
   * @param prop The name of the text property to set or get.
   * @param value The value to set for the specified text property. If omitted, the current
   * value of the property is returned
   * @returns If no arguments are provided, the current value of the specified text property
   */
  textProperty(prop: string, value: any): void;
  textProperty(prop: string): void;

  /**
   * Gets or sets text properties in batch, similar to calling `textProperty()`
   * multiple times.
   * 
   * If an object is passed in, `textProperty(key, value)` will be called for you
   * on every key/value pair in the object.
   * 
   * If no arguments are passed in, an object will be returned with all the current
   * properties.
   * @param properties An object whose keys are properties to set, and whose
   * values are what they should be set to.
   * @returns An object with all the possible properties and their current values.
   */
  textProperties(properties: object): object;
  textProperties(): object;

  /**
   * Computes a generic (non-tight) bounding box for a block of text.
   * 
   * The `fontBounds()` function calculates the bounding box for the text based on the
   * font's intrinsic metrics (such as `fontBoundingBoxAscent` and
   * `fontBoundingBoxDescent`). Unlike `textBounds()`, which measures the exact
   * pixel boundaries of the rendered text, `fontBounds()` provides a looser measurement
   * derived from the font’s default spacing. This measurement is useful for layout purposes where
   * a consistent approximation of the text's dimensions is desired.
   * @param str The text string to measure.
   * @param x The x-coordinate where the text is drawn.
   * @param y The y-coordinate where the text is drawn.
   * @param width (Optional) The maximum width available for the text block.
   * When specified, the text may be wrapped to fit within this width.
   * @param height (Optional) The maximum height available for the text block.
   * Any lines exceeding this height will be truncated.
   * @returns An object with properties `x`, `y`, `w`, and `h` representing the loose
   * bounding box of the text based on the font's intrinsic metrics.
   */
  fontBounds(str: string, x: number, y: number, width?: number, height?: number): object;

  /**
   * Returns the loose width of a text string based on the current font.
   * 
   * The `fontWidth()` function measures the width of the provided text string using
   * the font's default measurement (i.e., the width property from the text metrics returned by
   * the browser). Unlike `textWidth()`, which calculates the tight pixel boundaries
   * of the text glyphs, `fontWidth()` uses the font's intrinsic spacing, which may include
   * additional space for character spacing and kerning. This makes it useful for scenarios where
   * an approximate width is sufficient for layout and positioning.
   * @param theText The text string to measure.
   * @returns The loose width of the text in pixels.
   */
  fontWidth(theText: string): number;

  /**
   * Returns the loose ascent of the text based on the font's intrinsic metrics.
   * 
   * The `fontAscent()` function calculates the ascent of the text using the font's
   * intrinsic metrics (e.g., `fontBoundingBoxAscent`). This value represents the space
   * above the baseline that the font inherently occupies, and is useful for layout purposes when
   * an approximate vertical measurement is required.
   * @returns The loose ascent value in pixels.
   */
  fontAscent(): number;

  /**
   * Returns the loose descent of the text based on the font's intrinsic metrics.
   * 
   * The `fontDescent()` function calculates the descent of the text using the font's
   * intrinsic metrics (e.g., `fontBoundingBoxDescent`). This value represents the space
   * below the baseline that the font inherently occupies, and is useful for layout purposes when
   * an approximate vertical measurement is required.
   * @returns The loose descent value in pixels.
   */
  fontDescent(): number;

  /**
   * Sets or gets the current font weight.
   * 
   * The <code>textWeight()</code> function is used to specify the weight (thickness) of the text.
   * When a numeric value is provided, it sets the font weight to that value and updates the
   * rendering properties accordingly (including the "font-variation-settings" on the canvas style).
   * When called without an argument, it returns the current font weight setting.
   * @param weight The numeric weight value to set for the text.
   * @returns If no arguments are provided, the current font weight
   */
  textWeight(weight: number): number;
  textWeight(): number;

  /**
   * Removes the current tint set by <a href="#/p5/tint">tint()</a>.
   * 
   * `noTint()` restores images to their original colors.
   */
  noTint(): void;

  /**
   * Draws an ellipsoid.
   * 
   * An ellipsoid is a 3D shape with triangular faces that connect to form a
   * round surface. Ellipsoids with few faces look like crystals. Ellipsoids
   * with many faces have smooth surfaces and look like eggs. `ellipsoid()`
   * defines a shape by its radii. This is different from
   * <a href="#/p5/ellipse">ellipse()</a> which uses diameters
   * (width and height).
   * 
   * The first parameter, `radiusX`, is optional. If a `Number` is passed, as in
   * `ellipsoid(20)`, it sets the radius of the ellipsoid along the x-axis. By
   * default, `radiusX` is 50.
   * 
   * The second parameter, `radiusY`, is also optional. If a `Number` is passed,
   * as in `ellipsoid(20, 30)`, it sets the ellipsoid’s radius along the y-axis.
   * By default, `radiusY` is set to the ellipsoid’s `radiusX`.
   * 
   * The third parameter, `radiusZ`, is also optional. If a `Number` is passed,
   * as in `ellipsoid(20, 30, 40)`, it sets the ellipsoid’s radius along the
   * z-axis. By default, `radiusZ` is set to the ellipsoid’s `radiusY`.
   * 
   * The fourth parameter, `detailX`, is also optional. If a `Number` is passed,
   * as in `ellipsoid(20, 30, 40, 5)`, it sets the number of triangle
   * subdivisions to use along the x-axis. All 3D shapes are made by connecting
   * triangles to form their surfaces. By default, `detailX` is 24.
   * 
   * The fifth parameter, `detailY`, is also optional. If a `Number` is passed,
   * as in `ellipsoid(20, 30, 40, 5, 7)`, it sets the number of triangle
   * subdivisions to use along the y-axis. All 3D shapes are made by connecting
   * triangles to form their surfaces. By default, `detailY` is 16.
   * 
   * Note: `ellipsoid()` can only be used in WebGL mode.
   * @param radiusX radius of the ellipsoid along the x-axis. Defaults to 50.
   * @param radiusY radius of the ellipsoid along the y-axis. Defaults to `radiusX`.
   * @param radiusZ radius of the ellipsoid along the z-axis. Defaults to `radiusY`.
   * @param detailX number of triangle subdivisions along the x-axis. Defaults to 24.
   * @param detailY number of triangle subdivisions along the y-axis. Defaults to 16.
   */
  ellipsoid(radiusX?: number, radiusY?: number, radiusZ?: number, detailX?: number, detailY?: number): void;

  /**
   * Calculates the integer closest to a number.
   * 
   * For example, `round(133.8)` returns the value 134.
   * 
   * The second parameter, `decimals`, is optional. It sets the number of
   * decimal places to use when rounding. For example, `round(12.34, 1)` returns
   * 12.3. `decimals` is 0 by default.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Round a number.
   * let x = round(4.2);
   * 
   * // Style the text.
   * textAlign(CENTER);
   * textSize(16);
   * 
   * // Display the rounded number.
   * text(x, 50, 50);
   * 
   * describe('The number 4 written in middle of the canvas.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Round a number to 2 decimal places.
   * let x = round(12.782383, 2);
   * 
   * // Style the text.
   * textAlign(CENTER);
   * textSize(16);
   * 
   * // Display the rounded number.
   * text(x, 50, 50);
   * 
   * describe('The number 12.78 written in middle of canvas.');
   * }``round()` can also be used in shaders with p5.strands. The following example
   * uses `round()` to quantize colors in a shader.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere with posterized quantized colors.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
   * let t = millis() * 0.001;
   * 
   * // sin(t) goes between -1 and 1.
   * // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
   * let sinVal = 0.5 + 0.5 * sin(t);
   * 
   * // Multiply by 4 then round to get 5 distinct levels (0, 0.25, 0.5, 0.75, 1).
   * // Divide by 4 to bring the result back to the 0 to 1 range.
   * let value = round(sinVal * 4) / 4;
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let mutedBlue = [0.3, 0.4, 0.7, 1];
   * let rose = [0.8, 0.3, 0.4, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between mutedBlue (when value = 0) and rose (when value = 1).
   * // The round() creates stepped bands of color like a posterization effect.
   * finalColor.set(mix(mutedBlue, rose, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param n number to round.
   * @param decimals number of decimal places to round to, default is 0.
   * @returns rounded number.
   */
  round(n: number, decimals?: number): number;

  /**
   * Disables setting the fill color for shapes.
   * 
   * Calling `noFill()` is the same as making the fill completely transparent,
   * as in `fill(0, 0)`. If both <a href="#/p5/noStroke">noStroke()</a> and
   * `noFill()` are called, nothing will be drawn to the screen.
   */
  noFill(): void;

  /**
   * Gets the saturation value of a color.
   * 
   * `saturation()` extracts the saturation value from a
   * <a href="/reference/p5/p5.Color/">p5.Color</a> object, an array of color components, or
   * a CSS color string.
   * 
   * Saturation is scaled differently in HSB and HSL. By default, `saturation()`
   * returns a color's HSL saturation in the range 0 to 100. If the
   * <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB or HSL, it returns the
   * saturation value in the given mode.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(50);
   * 
   * // Use HSB color.
   * colorMode(HSB);
   * 
   * // Create a p5.Color object.
   * let c = color(0, 50, 100);
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'satValue' to 50.
   * let satValue = saturation(c);
   * 
   * // Draw the right rectangle.
   * fill(satValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is salmon pink and the right one is dark gray.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(50);
   * 
   * // Use HSB color.
   * colorMode(HSB);
   * 
   * // Create a color array.
   * let c = [0, 50, 100];
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'satValue' to 100.
   * let satValue = saturation(c);
   * 
   * // Draw the right rectangle.
   * fill(satValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(50);
   * 
   * // Use HSB color.
   * colorMode(HSB);
   * 
   * // Create a CSS color string.
   * let c = 'rgb(255, 128, 128)';
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'satValue' to 100.
   * let satValue = saturation(c);
   * 
   * // Draw the right rectangle.
   * fill(satValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(50);
   * 
   * // Use HSL color.
   * colorMode(HSL);
   * 
   * // Create a p5.Color object.
   * let c = color(0, 100, 75);
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'satValue' to 100.
   * let satValue = saturation(c);
   * 
   * // Draw the right rectangle.
   * fill(satValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is salmon pink and the right one is white.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(50);
   * 
   * // Use HSL color with values in the range 0-255.
   * colorMode(HSL, 255);
   * 
   * // Create a p5.Color object.
   * let c = color(0, 255, 191.5);
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'satValue' to 255.
   * let satValue = saturation(c);
   * 
   * // Draw the right rectangle.
   * fill(satValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is salmon pink and the right one is white.');
   * }`In p5.strands shader callbacks, `saturation()` operates on `vec4` values
   * and returns the saturation as a normalized value in the 0–1 range.
   * `colorMode()` has no effect inside shader callbacks.
   * 
   * `let myShader;
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildMaterialShader(myShaderBuilder);
   * }
   * 
   * function myShaderBuilder() {
   * finalColor.begin();
   * let c = color(255, 128, 128);
   * let s = saturation(c);
   * finalColor.set(vec4(s, s, s, 1.0));
   * finalColor.end();
   * }
   * 
   * function draw() {
   * shader(myShader);
   * noStroke();
   * sphere(40);
   * 
   * describe('A sphere shaded in grayscale based on saturation.');
   * }`
   * @param color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
   * color components, or CSS color string.
   * @returns the saturation value
   */
  saturation(color: P5.Color | number[] | string): number;

  /**
   * Removes all lights from the sketch.
   * 
   * Calling `noLights()` removes any lights created with
   * <a href="#/p5/lights">lights()</a>,
   * <a href="#/p5/ambientLight">ambientLight()</a>,
   * <a href="#/p5/directionalLight">directionalLight()</a>,
   * <a href="#/p5/pointLight">pointLight()</a>, or
   * <a href="#/p5/spotLight">spotLight()</a>. These functions may be called
   * after `noLights()` to create a new lighting scheme.
   */
  noLights(): 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;

  /**
   * A function that's called once when a mouse button is released.
   * 
   * Declaring the function `mouseReleased()` sets a code block to run
   * automatically when the user releases a mouse button after having pressed
   * it:
   * 
   * `function mouseReleased() {
   * // Code to run.
   * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
   * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
   * value when `mouseReleased()` is called by p5.js:
   * 
   * `function mouseReleased() {
   * if (mouseX < 50) {
   * // Code to run if the mouse is on the left.
   * }
   * 
   * if (mouseY > 50) {
   * // Code to run if the mouse is near the bottom.
   * }
   * }`The parameter, `event`, is optional. `mouseReleased()` 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 release event:
   * 
   * `function mouseReleased(event) {
   * // Code to run that uses the event.
   * console.log(event);
   * }`On touchscreen devices, `mouseReleased()` will run when a user’s touch
   * ends.
   * 
   * 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.
   * 
   * Note: <a href="#/p5/mousePressed">mousePressed()</a>, `mouseReleased()`,
   * and <a href="#/p5/mouseClicked">mouseClicked()</a> are all related.
   * <a href="#/p5/mousePressed">mousePressed()</a> runs as soon as the user
   * clicks the mouse. `mouseReleased()` runs as soon as the user releases the
   * mouse click. <a href="#/p5/mouseClicked">mouseClicked()</a> runs
   * immediately after `mouseReleased()`.
   * @param event optional `MouseEvent` argument.
   */
  mouseReleased(event?: MouseEvent): void;

  /**
   * Writes data to the print stream without adding new lines.
   * 
   * The parameter, `data`, is the data to write. `data` can be a number or
   * string, as in `myWriter.write('hi')`, or an array of numbers and strings,
   * as in `myWriter.write([1, 2, 3])`. A comma will be inserted between array
   * array elements when they're added to the print stream.
   * @param data data to be written as a string, number,
   * or array of strings and numbers.
   */
  write(data: string | number | any[]): void;

  /**
   * Disables drawing points, lines, and the outlines of shapes.
   * 
   * Calling `noStroke()` is the same as making the stroke completely transparent,
   * as in `stroke(0, 0)`. If both `noStroke()` and
   * <a href="#/p5/noFill">noFill()</a> are called, nothing will be drawn to the
   * screen.
   */
  noStroke(): void;

  /**
   * Creates a radio button element.
   * 
   * The parameter is optional. If a string is passed, as in
   * `let myRadio = createSelect('food')`, then each radio option will
   * have `"food"` as its `name` parameter: `<input name="food"></input>`.
   * If an existing `<div></div>` or `<span></span>`
   * element is passed, as in `let myRadio = createSelect(container)`, it will
   * become the radio button's parent element.
   * 
   * Radio buttons extend the <a href="#/p5.Element">p5.Element</a> class with a few
   * helpful methods for managing options:
   * 
   * - `myRadio.option(value, [label])` adds an option to the menu. The first paremeter, `value`, is a string that sets the option's value and label. The second parameter, `label`, is optional. If provided, it sets the label displayed for the `value`. If an option with `value` already exists, its label is changed and its value is returned.
   * 
   * - `myRadio.value()` returns the currently-selected option's value.
   * 
   * - `myRadio.selected()` returns the currently-selected option.
   * 
   * - `myRadio.selected(value)` selects the given option and returns it as an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement" target="_blank">`HTMLInputElement`</a>.
   * 
   * - `myRadio.disable(shouldDisable)` enables the entire radio button if `true` is passed and disables it if `false` is passed.
   * @param containerElement container HTML Element, either a `<div></div>`
   * or `<span></span>`.
   * @returns new <a href="#/p5.Element">p5.Element</a> object.
   */
  createRadio(containerElement?: object): P5.Element;
  createRadio(name?: string): P5.Element;
  createRadio(): P5.Element;

  /**
   * Calculates the square of a number.
   * 
   * Squaring a number means multiplying the number by itself. For example,
   * `sq(3)` evaluates 3 × 3 which is 9. `sq(-3)` evaluates -3 × -3
   * which is also 9. Multiplying two negative numbers produces a positive
   * number. The value returned by `sq()` is always positive.
   * @param n number to square.
   * @returns squared number.
   */
  sq(n: number): number;

  /**
   * Creates a `<video>` element for simple audio/video playback.
   * 
   * `createVideo()` returns a new
   * <a href="#/p5.MediaElement">p5.MediaElement</a> object. Videos are shown by
   * default. They can be hidden by calling `video.hide()` and drawn to the
   * canvas using <a href="#/p5/image">image()</a>.
   * 
   * The first parameter, `src`, is the path the video. If a single string is
   * passed, as in `'assets/topsecret.mp4'`, a single video is loaded. An array
   * of strings can be used to load the same video in different formats. For
   * example, `['assets/topsecret.mp4', 'assets/topsecret.ogv', 'assets/topsecret.webm']`.
   * This is useful for ensuring that the video can play across different browsers with
   * different capabilities. See
   * <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats'>MDN</a>
   * for more information about supported formats.
   * 
   * The second parameter, `callback`, is optional. It's a function to call once
   * the video is ready to play.
   * @param src path to a video file, or an array of paths for
   * supporting different browsers.
   * @param callback function to call once the video is ready to play.
   * @returns new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
   */
  createVideo(src?: string | string[], callback?: (video: P5.MediaElement<HTMLVideoElement>) => any): P5.MediaElement<HTMLVideoElement>;

  /**
   * Changes the location from which images are drawn when
   * <a href="#/p5/image">image()</a> is called.
   * 
   * By default, the first
   * two parameters of <a href="#/p5/image">image()</a> are the x- and
   * y-coordinates of the image's upper-left corner. The next parameters are
   * its width and height. This is the same as calling `imageMode(CORNER)`.
   * 
   * `imageMode(CORNERS)` also uses the first two parameters of
   * <a href="#/p5/image">image()</a> as the x- and y-coordinates of the image's
   * top-left corner. The third and fourth parameters are the coordinates of its
   * bottom-right corner.
   * 
   * `imageMode(CENTER)` uses the first two parameters of
   * <a href="#/p5/image">image()</a> as the x- and y-coordinates of the image's
   * center. The next parameters are its width and height.
   * 
   * Calling `imageMode()` without an argument returns the current image mode, either `CORNER`, `CORNERS`, or `CENTER`.
   * @param mode either CORNER, CORNERS, or CENTER.
   * @returns the current image mode
   */
  imageMode(mode: typeof P5.CORNER | typeof P5.CORNERS | typeof P5.CENTER): typeof P5.CORNER | typeof P5.CORNERS | typeof P5.CENTER;
  imageMode(): typeof P5.CORNER | typeof P5.CORNERS | typeof P5.CENTER;

  /**
   * Loads a font and creates a <a href="#/p5.Font">p5.Font</a> object.
   * `loadFont()` can load fonts in either .otf or .ttf format. Loaded fonts can
   * be used to style text on the canvas and in HTML elements.
   * 
   * The first parameter, `path`, is the path to a font file.
   * Paths to local files should be relative. For example,
   * `'assets/inconsolata.otf'`. The Inconsolata font used in the following
   * examples can be downloaded for free
   * <a href="https://www.fontsquirrel.com/fonts/inconsolata" target="_blank">here</a>.
   * Paths to remote files should be URLs. For example,
   * `'https://example.com/inconsolata.otf'`. URLs may be blocked due to browser
   * security.
   * 
   * In 2D mode, `path` can take on a few other forms. It could be a path to a CSS file,
   * such as one from <a href="https://fonts.google.com/">Google Fonts.</a> It could also
   * be a string with a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face">CSS `@font-face` declaration.</a>
   * 
   * The second parameter, `successCallback`, is optional. If a function is
   * passed, it will be called once the font has loaded. The callback function
   * may use the new <a href="#/p5.Font">p5.Font</a> object if needed.
   * 
   * The third parameter, `failureCallback`, is also optional. If a function is
   * passed, it will be called if the font fails to load. The callback function
   * may use the error
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank">Event</a>
   * object if needed.
   * 
   * Fonts can take time to load. `await` the result of `loadFont()` in
   * <a href="#/p5/setup">setup()</a> before using the result.
   * @param path path of the font or CSS file to be loaded, or a CSS `@font-face` string.
   * @param name An alias that can be used for this font in `textFont()`. Defaults to the name in the font's metadata.
   * @param options An optional object with extra CSS font face descriptors, or p5.js font settings.
   * @param successCallback function called with the
   * <a href="#/p5.Font">p5.Font</a> object after it
   * loads.
   * @param failureCallback function called with the error
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank">Event</a>
   * object if the font fails to load.
   * @returns <a href="#/p5.Font">p5.Font</a> object.
   */
  loadFont(path: string, name?: string, options?: { sets?: string | string[] }, successCallback?: (font: P5.Font) => any, failureCallback?: Function): Promise<P5.Font>;
  loadFont(path: string, successCallback?: (font: P5.Font) => any, failureCallback?: Function): Promise<P5.Font>;

  /**
   * Creates a hidden `<audio>` element for simple audio playback.
   * 
   * `createAudio()` returns a new
   * <a href="#/p5.MediaElement">p5.MediaElement</a> object.
   * 
   * The first parameter, `src`, is the path the audio. If a single string is
   * passed, as in `'assets/audio.mp3'`, a single audio is loaded. An array
   * of strings can be used to load the same audio in different formats. For
   * example, `['assets/audio.mp3', 'assets/video.wav']`.
   * This is useful for ensuring that the audio can play across different
   * browsers with different capabilities. See
   * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats" target="_blank">MDN</a>
   * for more information about supported formats.
   * 
   * The second parameter, `callback`, is optional. It's a function to call once
   * the audio is ready to play.
   * @param src path to an audio file, or an array of paths
   * for supporting different browsers.
   * @param callback function to call once the audio is ready to play.
   * @returns new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
   */
  createAudio(src?: string | string[], callback?: (video: P5.MediaElement<HTMLAudioElement>) => any): P5.MediaElement<HTMLAudioElement>;

  /**
   * Draws a torus.
   * 
   * A torus is a 3D shape with triangular faces that connect to form a ring.
   * Toruses with few faces look flattened. Toruses with many faces have smooth
   * surfaces.
   * 
   * The first parameter, `radius`, is optional. If a `Number` is passed, as in
   * `torus(30)`, it sets the radius of the ring. By default, `radius` is 50.
   * 
   * The second parameter, `tubeRadius`, is also optional. If a `Number` is
   * passed, as in `torus(30, 15)`, it sets the radius of the tube. By default,
   * `tubeRadius` is 10.
   * 
   * The third parameter, `detailX`, is also optional. If a `Number` is passed,
   * as in `torus(30, 15, 5)`, it sets the number of edges used to draw the hole
   * of the torus. Using more edges makes the hole look more like a circle. By
   * default, `detailX` is 24.
   * 
   * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
   * as in `torus(30, 15, 5, 7)`, it sets the number of triangle subdivisions to
   * use while filling in the torus’ height. By default, `detailY` is 16.
   * 
   * Note: `torus()` can only be used in WebGL mode.
   * @param radius radius of the torus. Defaults to 50.
   * @param tubeRadius radius of the tube. Defaults to 10.
   * @param detailX number of edges that form the hole. Defaults to 24.
   * @param detailY number of triangle subdivisions along the y-axis. Defaults to 16.
   */
  torus(radius?: number, tubeRadius?: number, detailX?: number, detailY?: number): void;

  /**
   * Calculates the square root of a number.
   * 
   * A number's square root can be multiplied by itself to produce the original
   * number. For example, `sqrt(9)` returns 3 because 3 × 3 = 9. `sqrt()`
   * always returns a positive value. `sqrt()` doesn't work with negative arguments
   * such as `sqrt(-9)`.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Top-left.
   * let d = sqrt(16);
   * circle(33, 33, d);
   * 
   * // Bottom-right.
   * d = sqrt(1600);
   * circle(67, 67, d);
   * 
   * describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is ten times larger.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * describe('A series of black dots that get higher slowly from left to right.');
   * }
   * 
   * function draw() {
   * // Invert the y-axis.
   * scale(1, -1);
   * translate(0, -100);
   * 
   * // Calculate the coordinates.
   * let x = frameCount;
   * let y = 5 * sqrt(x);
   * 
   * // Draw the point.
   * point(x, y);
   * }``sqrt()` can also be used in shaders with p5.strands. The following example
   * uses `sqrt()` to create a smooth ease-out curve on color and size.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere that grows and shifts from navy to orange with an ease-out curve.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
   * let t = millis() * 0.001;
   * 
   * // sin(t) goes between -1 and 1.
   * // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
   * let sinVal = 0.5 + 0.5 * sin(t);
   * 
   * // sqrt(sinVal) creates an ease-out curve: fast start, slow finish.
   * // Since sinVal is in [0,1], sqrt() stays in [0,1].
   * let value = sqrt(sinVal);
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let navy = [0, 0.1, 0.4, 1];
   * let brightOrange = [1, 0.6, 0, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between navy (when value = 0) and brightOrange (when value = 1).
   * // The sqrt() ease-out makes the color change fast at first, then slow down.
   * finalColor.set(mix(navy, brightOrange, value));
   * 
   * finalColor.end();
   * }
   * 
   * function drawShape() {
   * let t = millis() * 0.001;
   * let sinVal = 0.5 + 0.5 * sin(t);
   * let size = 10 + sqrt(sinVal) * 30;
   * sphere(size);
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * drawShape();
   * }`
   * @param n non-negative number to square root.
   * @returns square root of number.
   */
  sqrt(n: number): number;

  /**
   * Gets the brightness value of a color.
   * 
   * `brightness()` extracts the HSB brightness value from a
   * <a href="/reference/p5/p5.Color/">p5.Color</a> object, an array of color components, or
   * a CSS color string.
   * 
   * By default, `brightness()` returns a color's HSB brightness in the range 0
   * to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB, it
   * returns the brightness value in the given range.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Use HSB color.
   * colorMode(HSB);
   * 
   * // Create a p5.Color object.
   * let c = color(0, 50, 100);
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'brightValue' to 100.
   * let brightValue = brightness(c);
   * 
   * // Draw the right rectangle.
   * fill(brightValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is salmon pink and the right one is white.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Use HSB color.
   * colorMode(HSB);
   * 
   * // Create a color array.
   * let c = [0, 50, 100];
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'brightValue' to 100.
   * let brightValue = brightness(c);
   * 
   * // Draw the right rectangle.
   * fill(brightValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is salmon pink and the right one is white.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Use HSB color.
   * colorMode(HSB);
   * 
   * // Create a CSS color string.
   * let c = 'rgb(255, 128, 128)';
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'brightValue' to 100.
   * let brightValue = brightness(c);
   * 
   * // Draw the right rectangle.
   * fill(brightValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is salmon pink and the right one is white.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Use HSB color with values in the range 0-255.
   * colorMode(HSB, 255);
   * 
   * // Create a p5.Color object.
   * let c = color(0, 127, 255);
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'brightValue' to 255.
   * let brightValue = brightness(c);
   * 
   * // Draw the right rectangle.
   * fill(brightValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is salmon pink and the right one is white.');
   * }`In p5.strands shader callbacks, `brightness()` operates on `vec4` values
   * and returns the brightness as a normalized value in the 0–1 range.
   * `colorMode()` has no effect inside shader callbacks.
   * 
   * `let myShader;
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildMaterialShader(myShaderBuilder);
   * }
   * 
   * function myShaderBuilder() {
   * finalColor.begin();
   * let c = color(0, 50, 100);
   * let b = brightness(c);
   * finalColor.set(vec4(b, b, b, 1.0));
   * finalColor.end();
   * }
   * 
   * function draw() {
   * shader(myShader);
   * noStroke();
   * sphere(40);
   * 
   * describe('A sphere shaded in grayscale based on brightness.');
   * }`
   * @param color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
   * color components, or CSS color string.
   * @returns the brightness value.
   */
  brightness(color: P5.Color | number[] | string): number;

  /**
   * Saves the file and closes the print stream.
   */
  close(): void;

  /**
   * A function that's called once after a mouse button is pressed and released.
   * 
   * Declaring the function `mouseClicked()` sets a code block to run
   * automatically when the user releases a mouse button after having pressed
   * it:
   * 
   * `function mouseClicked() {
   * // Code to run.
   * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
   * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
   * value when `mouseClicked()` is called by p5.js:
   * 
   * `function mouseClicked() {
   * if (mouseX < 50) {
   * // Code to run if the mouse is on the left.
   * }
   * 
   * if (mouseY > 50) {
   * // Code to run if the mouse is near the bottom.
   * }
   * }`The parameter, `event`, is optional. `mouseClicked()` 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 click event:
   * 
   * `function mouseClicked(event) {
   * // Code to run that uses the event.
   * console.log(event);
   * }`On touchscreen devices, `mouseClicked()` will run when a user’s touch
   * ends.
   * 
   * 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.
   * 
   * Note: <a href="#/p5/mousePressed">mousePressed()</a>,
   * <a href="#/p5/mouseReleased">mouseReleased()</a>,
   * and `mouseClicked()` are all related.
   * <a href="#/p5/mousePressed">mousePressed()</a> runs as soon as the user
   * clicks the mouse. <a href="#/p5/mouseReleased">mouseReleased()</a> runs as
   * soon as the user releases the mouse click. `mouseClicked()` runs
   * immediately after <a href="#/p5/mouseReleased">mouseReleased()</a>.
   * @param event optional `MouseEvent` argument.
   */
  mouseClicked(event?: MouseEvent): void;

  /**
   * Create a new shader 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.
   * 
   * The main way to use `buildMaterialShader` is to pass a function in as a parameter.
   * This will let you create a shader using p5.strands.
   * 
   * In your function, you can call hooks to change part of the shader. In a material
   * shader, these are the hooks available:
   * 
   * - <a href="#/p5/objectInputs">`objectInputs`</a>: Update vertices before any positioning has been applied. Your function gets run on every vertex.
   * 
   * - <a href="#/p5/worldInputs">`worldInputs`</a>: Update vertices after transformations have been applied. Your function gets run on every vertex.
   * 
   * - <a href="#/p5/cameraInputs">`cameraInputs`</a>: Update vertices after transformations have been applied, relative to the camera. Your function gets run on every vertex.
   * 
   * - <a href="#/p5/pixelInputs">`pixelInputs`</a>: Update property values on pixels on the surface of a shape. Your function gets run on every pixel.
   * 
   * - <a href="#/p5/combineColors">`combineColors`</a>: Control how the ambient, diffuse, and specular components of lighting are combined into a single color on the surface of a shape. Your function gets run on every pixel.
   * 
   * - <a href="#/p5/finalColor">`finalColor`</a>: Update or replace the pixel color on the surface of a shape. Your function gets run on every pixel.
   * 
   * Read the linked reference page for each hook for more information about how to use them.
   * 
   * One thing you can do with a material shader is animate the positions of vertices
   * over time:
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(200, 200, WEBGL);
   * myShader = buildMaterialShader(material);
   * }
   * 
   * function material() {
   * let time = millis();
   * worldInputs.begin();
   * worldInputs.position.y +=
   * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
   * worldInputs.end();
   * }
   * 
   * function draw() {
   * background(255);
   * shader(myShader);
   * lights();
   * noStroke();
   * fill('red');
   * sphere(50);
   * }`There are also many uses in updating values per pixel. This can be a good
   * way to give your sketch texture and detail. For example, instead of having a single
   * shininess or metalness value for a whole shape, you could vary it in different spots on its surface:
   * 
   * `let myShader;
   * let environment;
   * 
   * async function setup() {
   * environment = await loadImage('assets/outdoor_spheremap.jpg');
   * 
   * createCanvas(200, 200, WEBGL);
   * myShader = buildMaterialShader(material);
   * }
   * 
   * function material() {
   * pixelInputs.begin();
   * let factor = sin(
   * TWO_PI * (pixelInputs.texCoord.x + pixelInputs.texCoord.y)
   * );
   * pixelInputs.shininess = mix(1, 100, factor);
   * pixelInputs.metalness = factor;
   * pixelInputs.end();
   * }
   * 
   * function draw() {
   * panorama(environment);
   * ambientLight(100);
   * imageLight(environment);
   * rotateY(millis() * 0.001);
   * shader(myShader);
   * noStroke();
   * fill(255);
   * specularMaterial(150);
   * sphere(50);
   * }`A technique seen often in games called bump mapping is to vary the
   * normal, which is the orientation of the surface, per pixel to create texture
   * rather than using many tightly packed vertices. Sometimes this can come from
   * bump images, but it can also be done generatively with math.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(200, 200, WEBGL);
   * myShader = buildMaterialShader(material);
   * }
   * 
   * function material() {
   * pixelInputs.begin();
   * pixelInputs.normal.x += 0.2 * sin(
   * sin(TWO_PI * dot(pixelInputs.texCoord.yx, vec2(10, 25)))
   * );
   * pixelInputs.normal.y += 0.2 * sin(
   * sin(TWO_PI * dot(pixelInputs.texCoord, vec2(10, 25)))
   * );
   * pixelInputs.normal = normalize(pixelInputs.normal);
   * pixelInputs.end();
   * }
   * 
   * 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);
   * }`You can also update the final color directly instead of modifying
   * lighting settings. Sometimes in photographs, a light source is placed
   * behind the subject to create rim lighting, where the edges of the
   * subject are lit up. This can be simulated by adding white to the final
   * color on parts of the shape that are facing away from the camera.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(200, 200, WEBGL);
   * myShader = buildMaterialShader(material);
   * }
   * 
   * function material() {
   * let myNormal = sharedVec3();
   * 
   * pixelInputs.begin();
   * myNormal = pixelInputs.normal;
   * pixelInputs.end();
   * 
   * finalColor.begin();
   * finalColor.set(mix(
   * [1, 1, 1, 1],
   * finalColor.color,
   * abs(dot(myNormal, [0, 0, 1]))
   * ));
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(255);
   * rotateY(millis() * 0.001);
   * shader(myShader);
   * lights();
   * noStroke();
   * fill('red');
   * torus(30);
   * }`Like the `modify()` method on shaders,
   * advanced users can also fill in hooks using <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>
   * instead of JavaScript.
   * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
   * for more info.
   * @param callback A function building a p5.strands shader.
   * @param scope An optional scope object passed to .modify().
   * @returns The material shader.
   */
  buildMaterialShader(callback: Function, scope?: object): P5.Shader;
  buildMaterialShader(hooks: object, scope?: object): P5.Shader;

  /**
   * Calculates the fractional part of a number.
   * 
   * A number's fractional part includes its decimal values. For example,
   * `fract(12.34)` returns 0.34.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Style the text.
   * textAlign(CENTER);
   * textSize(16);
   * 
   * // Original number.
   * let n = 56.78;
   * text(n, 50, 33);
   * 
   * // Fractional part.
   * let f = fract(n);
   * text(f, 50, 67);
   * 
   * describe('The number 56.78 written above the number 0.78.');
   * }``fract()` can also be used in shaders with p5.strands. The following example
   * uses `fract()` to create repeating patterns in a shader.
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildColorShader(shaderCallback);
   * describe('A sphere with a repeating gradient pattern.');
   * }
   * 
   * function shaderCallback() {
   * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
   * let t = millis() * 0.001;
   * 
   * // Multiply by 0.5 to slow the animation to half speed.
   * // fract(t * 0.5) extracts only the decimal part of the number.
   * // This creates a smooth sawtooth wave that repeats every 2 seconds.
   * let value = fract(t * 0.5);
   * 
   * // Each color is [R, G, B, A] with values from 0 to 1.
   * let cyan = [0, 0.5, 1, 1];
   * let orange = [1, 0.5, 0, 1];
   * 
   * finalColor.begin();
   * 
   * // mix() blends between cyan (when value = 0) and orange (when value = 1).
   * // Because fract() resets to 0 each cycle, the color loops smoothly.
   * finalColor.set(mix(cyan, orange, value));
   * 
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * shader(myShader);
   * noStroke();
   * sphere(30);
   * }`
   * @param n number whose fractional part will be found.
   * @returns fractional part of n.
   */
  fract(n: number): number;

  /**
   * Creates a `<video>` element that "captures" the audio/video stream from
   * the webcam and microphone.
   * 
   * `createCapture()` returns a new
   * <a href="#/p5.MediaElement">p5.MediaElement</a> object. Videos are shown by
   * default. They can be hidden by calling `capture.hide()` and drawn to the
   * canvas using <a href="#/p5/image">image()</a>.
   * 
   * The first parameter, `type`, is optional. It sets the type of capture to
   * use. By default, `createCapture()` captures both audio and video. If `VIDEO`
   * is passed, as in `createCapture(VIDEO)`, only video will be captured.
   * If `AUDIO` is passed, as in `createCapture(AUDIO)`, only audio will be
   * captured. A constraints object can also be passed to customize the stream.
   * See the <a href="http://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints" target="_blank">
   * W3C documentation</a> for possible properties. Different browsers support different
   * properties.
   * 
   * The 'flipped' property is an optional property which can be set to `{flipped:true}`
   * to mirror the video output.If it is true then it means that video will be mirrored
   * or flipped and if nothing is mentioned then by default it will be `false`.
   * 
   * The second parameter,`callback`, is optional. It's a function to call once
   * the capture is ready for use. The callback function should have one
   * parameter, `stream`, that's a
   * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream" target="_blank">MediaStream</a> object.
   * 
   * Note: `createCapture()` only works when running a sketch locally or using HTTPS. Learn more
   * <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;

  /**
   * Sets the color used to draw points, lines, and the outlines of shapes.
   * 
   * Calling `stroke(255, 165, 0)` or `stroke('orange')` means all shapes drawn
   * after calling `stroke()` will be outlined with the color orange. The way
   * these parameters are interpreted may be changed with the
   * <a href="#/p5/colorMode">colorMode()</a> function.
   * 
   * The version of `stroke()` with one parameter interprets the value one of
   * three ways. If the parameter is a `Number`, it's interpreted as a grayscale
   * value. If the parameter is a `String`, it's interpreted as a CSS color
   * string. A <a href="#/p5.Color">p5.Color</a> object can also be provided to
   * set the stroke color.
   * 
   * The version of `stroke()` with two parameters interprets the first one as a
   * grayscale value. The second parameter sets the alpha (transparency) value.
   * 
   * The version of `stroke()` with three parameters interprets them as RGB, HSB,
   * or HSL colors, depending on the current `colorMode()`.
   * 
   * The version of `stroke()` with four parameters interprets them as RGBA, HSBA,
   * or HSLA colors, depending on the current `colorMode()`. The last parameter
   * sets the alpha (transparency) value.
   * 
   * Calling `stroke()` without an argument returns the current stroke as a <a href="#/p5.Color">p5.Color</a> object.
   * @param v1 red value if color mode is RGB or hue value if color mode is HSB.
   * @param v2 green value if color mode is RGB or saturation value if color mode is HSB.
   * @param v3 blue value if color mode is RGB or brightness value if color mode is HSB.
   * @param alpha alpha value, controls transparency (0 - transparent, 255 - opaque).
   * @returns the current stroke color.
   */
  stroke(v1: number, v2: number, v3: number, alpha?: number): P5.Color;
  stroke(value: string): P5.Color;
  stroke(gray: number, alpha?: number): P5.Color;
  stroke(values: number[]): P5.Color;
  stroke(color: P5.Color): P5.Color;
  stroke(): P5.Color;

  /**
   * Creates a color picker element.
   * 
   * The parameter, `value`, is optional. If a color string or
   * <a href="#/p5.Color">p5.Color</a> object is passed, it will set the default
   * color.
   * 
   * Color pickers extend the <a href="#/p5.Element">p5.Element</a> class with a
   * couple of helpful methods for managing colors:
   * 
   * - `myPicker.value()` returns the current color as a hex string in the format `'#rrggbb'`.
   * 
   * - `myPicker.color()` returns the current color as a <a href="#/p5.Color">p5.Color</a> object.
   * @param value default color as a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color" target="_blank">CSS color string</a>.
   * @returns new <a href="#/p5.Element">p5.Element</a> object.
   */
  createColorPicker(value?: string | P5.Color): P5.Element;

  /**
   * 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);
   * 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 = millis();
   * worldInputs.begin();
   * worldInputs.position.y +=
   * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
   * worldInputs.end();`Read the reference for <a href="#/p5/buildMaterialShader">`buildMaterialShader`</a>,
   * the version of `loadMaterialShader` that takes in a function instead of a separate file,
   * for a full list of hooks you can use and examples for each.
   * 
   * The second parameter, `successCallback`, is optional. If a function is passed, as in
   * `loadMaterialShader('myShader.js', onLoaded)`, then the `onLoaded()` function will be called
   * once the shader loads. The shader will be passed to `onLoaded()` as its only argument.
   * The return value of `handleData()`, if present, will be used as the final return value of
   * `loadMaterialShader('myShader.js', onLoaded)`.
   * @param url The URL of your p5.strands JavaScript file.
   * @param onSuccess A callback function to run when loading completes.
   * @param onFailure A callback function to run when loading fails.
   * @returns The material shader.
   */
  loadMaterialShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;

  /**
   * Saves a given element(image, text, json, csv, wav, or html) to the client's
   * computer. The first parameter can be a pointer to element we want to save.
   * The element can be one of <a href="#/p5.Element">p5.Element</a>,an Array of
   * Strings, an Array of JSON, a JSON object, a <a href="#/p5.Table">p5.Table
   * </a>, a <a href="#/p5.Image">p5.Image</a>, or a p5.SoundFile (requires
   * p5.sound). The second parameter is a filename (including extension).The
   * third parameter is for options specific to this type of object. This method
   * will save a file that fits the given parameters.
   * If it is called without specifying an element, by default it will save the
   * whole canvas as an image file. You can optionally specify a filename as
   * the first parameter in such a case.
   * Note that it is not recommended to
   * call this method within draw, as it will open a new save dialog on every
   * render.
   * @param objectOrFilename If filename is provided, will
   * save canvas as an image with
   * either png or jpg extension
   * depending on the filename.
   * If object is provided, will
   * save depending on the object
   * and filename (see examples
   * above).
   * @param filename If an object is provided as the first
   * parameter, then the second parameter
   * indicates the filename,
   * and should include an appropriate
   * file extension (see examples above).
   * @param options Additional options depend on
   * filetype. For example, when saving JSON,
   * <code>true</code> indicates that the
   * output will be optimized for filesize,
   * rather than readability.
   */
  save(objectOrFilename?: object | string, filename?: string, options?: boolean | string): void;

  /**
   * 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;

  /**
   * Gets the lightness value of a color.
   * 
   * `lightness()` extracts the HSL lightness 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, `lightness()` returns a color's HSL lightness in the range 0
   * to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSL, it
   * returns the lightness value in the given range.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(50);
   * 
   * // Use HSL color.
   * colorMode(HSL);
   * 
   * // Create a p5.Color object using HSL values.
   * let c = color(0, 100, 75);
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'lightValue' to 75.
   * let lightValue = lightness(c);
   * 
   * // Draw the right rectangle.
   * fill(lightValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(50);
   * 
   * // Use HSL color.
   * colorMode(HSL);
   * 
   * // Create a color array.
   * let c = [0, 100, 75];
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'lightValue' to 75.
   * let lightValue = lightness(c);
   * 
   * // Draw the right rectangle.
   * fill(lightValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(50);
   * 
   * // Use HSL color.
   * colorMode(HSL);
   * 
   * // Create a CSS color string.
   * let c = 'rgb(255, 128, 128)';
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'lightValue' to 75.
   * let lightValue = lightness(c);
   * 
   * // Draw the right rectangle.
   * fill(lightValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
   * }``function setup() {
   * createCanvas(100, 100);
   * 
   * background(50);
   * 
   * // Use HSL color with values in the range 0-255.
   * colorMode(HSL, 255);
   * 
   * // Create a p5.Color object using HSL values.
   * let c = color(0, 255, 191.5);
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(c);
   * rect(15, 15, 35, 70);
   * 
   * // Set 'lightValue' to 191.5.
   * let lightValue = lightness(c);
   * 
   * // Draw the right rectangle.
   * fill(lightValue);
   * rect(50, 15, 35, 70);
   * 
   * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
   * }`In p5.strands shader callbacks, `lightness()` operates on `vec4` values
   * and returns the lightness as a normalized value in the 0–1 range.
   * `colorMode()` has no effect inside shader callbacks.
   * 
   * `let myShader;
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildMaterialShader(myShaderBuilder);
   * }
   * 
   * function myShaderBuilder() {
   * finalColor.begin();
   * let c = color(0, 100, 75);
   * let l = lightness(c);
   * finalColor.set(vec4(l, l, l, 1.0));
   * finalColor.end();
   * }
   * 
   * function draw() {
   * shader(myShader);
   * noStroke();
   * sphere(40);
   * 
   * describe('A sphere shaded in grayscale based on lightness.');
   * }`
   * @param color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
   * color components, or CSS color string.
   * @returns the lightness value.
   */
  lightness(color: P5.Color | number[] | string): number;

  /**
   * A function that's called once when a mouse button is clicked twice quickly.
   * 
   * Declaring the function `doubleClicked()` sets a code block to run
   * automatically when the user presses and releases the mouse button twice
   * quickly:
   * 
   * `function doubleClicked() {
   * // Code to run.
   * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
   * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
   * value when `doubleClicked()` is called by p5.js:
   * 
   * `function doubleClicked() {
   * if (mouseX < 50) {
   * // Code to run if the mouse is on the left.
   * }
   * 
   * if (mouseY > 50) {
   * // Code to run if the mouse is near the bottom.
   * }
   * }`The parameter, `event`, is optional. `doubleClicked()` 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 double-click event:
   * 
   * `function doubleClicked(event) {
   * // Code to run that uses the event.
   * console.log(event);
   * }`On touchscreen devices, code placed in `doubleClicked()` will run after two
   * touches that occur within a short time.
   * 
   * 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.
   */
  doubleClicked(event?: MouseEvent): 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;

  /**
   * Starts using shapes to erase parts of the canvas.
   * 
   * All drawing that follows `erase()` will subtract from the canvas, revealing
   * the web page underneath. The erased areas will become transparent, allowing
   * the content behind the canvas to show through. The
   * <a href="#/p5/fill">fill()</a>, <a href="#/p5/stroke">stroke()</a>, and
   * <a href="#/p5/blendMode">blendMode()</a> have no effect once `erase()` is
   * called.
   * 
   * The `erase()` function has two optional parameters. The first parameter
   * sets the strength of erasing by the shape's interior. A value of 0 means
   * that no erasing will occur. A value of 255 means that the shape's interior
   * will fully erase the content underneath. The default value is 255
   * (full strength).
   * 
   * The second parameter sets the strength of erasing by the shape's edge. A
   * value of 0 means that no erasing will occur. A value of 255 means that the
   * shape's edge will fully erase the content underneath. The default value is
   * 255 (full strength).
   * 
   * To cancel the erasing effect, use the <a href="#/p5/noErase">noErase()</a>
   * function.
   * 
   * `erase()` has no effect on drawing done with the
   * <a href="#/p5/image">image()</a> and
   * <a href="#/p5/background">background()</a> functions.
   * @param strengthFill a number (0-255) for the strength of erasing under a shape's interior.
   * Defaults to 255, which is full strength.
   * @param strengthStroke a number (0-255) for the strength of erasing under a shape's edge.
   * Defaults to 255, which is full strength.
   */
  erase(strengthFill?: number, strengthStroke?: number): void;

  /**
   * Creates a text `<input></input>` element.
   * 
   * Call `myInput.size()` to set the length of the text box.
   * 
   * The first parameter, `value`, is optional. It's a string that sets the
   * input's default value. The input is blank by default.
   * 
   * The second parameter, `type`, is also optional. It's a string that
   * specifies the type of text being input. See MDN for a full
   * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input" target="_blank">list of options</a>.
   * The default is `'text'`.
   * @param value default value of the input box. Defaults to an empty string `''`.
   * @param type type of input. Defaults to `'text'`.
   * @returns new <a href="#/p5.Element">p5.Element</a> object.
   */
  createInput(value?: string, type?: string): P5.Element;
  createInput(value?: string): P5.Element;

  /**
   * Ends erasing that was started with <a href="#/p5/erase">erase()</a>.
   * 
   * The <a href="#/p5/fill">fill()</a>, <a href="#/p5/stroke">stroke()</a>, and
   * <a href="#/p5/blendMode">blendMode()</a> settings will return to what they
   * were prior to calling <a href="#/p5/erase">erase()</a>.
   */
  noErase(): void;

  /**
   * Blends two colors to find a third color between them.
   * 
   * The `amt` parameter specifies the amount to interpolate between the two
   * 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="#/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="#/p5/colorMode">colorMode()</a>.
   * 
   * `function setup() {
   * createCanvas(100, 100);
   * 
   * background(200);
   * 
   * // Create p5.Color objects to interpolate between.
   * let from = color(218, 165, 32);
   * let to = color(72, 61, 139);
   * 
   * // Create intermediate colors.
   * let interA = lerpColor(from, to, 0.33);
   * let interB = lerpColor(from, to, 0.66);
   * 
   * // Draw the left rectangle.
   * noStroke();
   * fill(from);
   * rect(10, 20, 20, 60);
   * 
   * // Draw the left-center rectangle.
   * fill(interA);
   * rect(30, 20, 20, 60);
   * 
   * // Draw the right-center rectangle.
   * fill(interB);
   * rect(50, 20, 20, 60);
   * 
   * // Draw the right rectangle.
   * fill(to);
   * rect(70, 20, 20, 60);
   * 
   * describe(
   * 'Four rectangles. From left to right, the rectangles are tan, brown, brownish purple, and purple.'
   * );
   * }`In p5.strands shader callbacks, `lerpColor()` interpolates between
   * `vec4` colors and returns a normalized `vec4` with RGBA components in
   * the 0–1 range. `colorMode()` has no effect inside shader callbacks.
   * 
   * `let myShader;
   * function setup() {
   * createCanvas(100, 100, WEBGL);
   * myShader = buildMaterialShader(myShaderBuilder);
   * }
   * 
   * function myShaderBuilder() {
   * finalColor.begin();
   * let c1 = color('red');
   * let c2 = color('blue');
   * let mixed = lerpColor(c1, c2, 0.5);
   * finalColor.set(mixed);
   * finalColor.end();
   * }
   * 
   * function draw() {
   * shader(myShader);
   * noStroke();
   * sphere(40);
   * 
   * describe('A purple sphere, a blend of red and blue.');
   * }`
   * @param c1 interpolate from this color.
   * @param c2 interpolate to this color.
   * @param amt number between 0 and 1.
   * @returns interpolated color.
   */
  lerpColor(c1: P5.Color, c2: P5.Color, amt: number): P5.Color;

  /**
   * 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
   * shader into the <a href="#/p5/shader">`shader()`</a> function to apply it to any fills
   * you draw.
   * 
   * The main way to use `buildNormalShader` is to pass a function in as a parameter.
   * This will let you create a shader using p5.strands.
   * 
   * In your function, you can call hooks to change part of the shader. In a material
   * shader, these are the hooks available:
   * 
   * - <a href="#/p5/objectInputs">`objectInputs`</a>: Update vertices before any positioning has been applied. Your function gets run on every vertex.
   * 
   * - <a href="#/p5/worldInputs">`worldInputs`</a>: Update vertices after transformations have been applied. Your function gets run on every vertex.
   * 
   * - <a href="#/p5/cameraInputs">`cameraInputs`</a>: Update vertices after transformations have been applied, relative to the camera. Your function gets run on every vertex.
   * 
   * - <a href="#/p5/finalColor">`finalColor`</a>: Update or replace the pixel color on the surface of a shape. Your function gets run on every pixel.
   * 
   * Read the linked reference page for each hook for more information about how to use them.
   * 
   * One thing you may want to do is update the position of all the vertices in an object over time:
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(200, 200, WEBGL);
   * myShader = buildNormalShader(material);
   * }
   * 
   * function material() {
   * let time = millis();
   * worldInputs.begin();
   * worldInputs.position.y +=
   * 20. * sin(time * 0.001 + worldInputs.position.x * 0.05);
   * worldInputs.end();
   * }
   * 
   * function draw() {
   * background(255);
   * shader(myShader);
   * noStroke();
   * sphere(50);
   * }`You may also want to change the colors used. By default, the x, y, and z values of the orientation
   * of the surface are mapped directly to red, green, and blue. But you can pick different colors:
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(200, 200, WEBGL);
   * myShader = buildNormalShader(material);
   * }
   * 
   * function material() {
   * cameraInputs.begin();
   * cameraInputs.normal = abs(cameraInputs.normal);
   * cameraInputs.end();
   * 
   * finalColor.begin();
   * // Map the r, g, and b values of the old normal to new colors
   * // instead of just red, green, and blue:
   * let newColor =
   * finalColor.color.r * [89, 240, 232] / 255 +
   * finalColor.color.g * [240, 237, 89] / 255 +
   * finalColor.color.b * [205, 55, 222] / 255;
   * newColor = newColor / (finalColor.color.r + finalColor.color.g + finalColor.color.b);
   * finalColor.set([newColor.r, newColor.g, newColor.b, finalColor.color.a]);
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(255);
   * shader(myShader);
   * noStroke();
   * rotateX(frameCount * 0.01);
   * rotateY(frameCount * 0.015);
   * box(100);
   * }`Like the `modify()` method on shaders,
   * advanced users can also fill in hooks using <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>
   * instead of JavaScript.
   * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
   * for more info.
   * @param callback A function building a p5.strands shader.
   * @param scope An optional scope object passed to .modify().
   * @returns The normal shader.
   */
  buildNormalShader(callback: Function, scope?: object): P5.Shader;
  buildNormalShader(hooks: object, scope?: object): P5.Shader;

  /**
   * Blends multiple colors to find a color between them.
   * 
   * The `amt` parameter specifies the amount to interpolate between the color
   * stops which are colors at each `amt` value "location" with `amt` values
   * that are between 2 color stops interpolating between them based on its relative
   * distance to both.
   * 
   * The way that colors are interpolated depends on the current
   * <a href="/reference/p5/colorMode/">colorMode()</a>.
   * @param colors_stops color stops to interpolate from
   * @param amt number to use to interpolate relative to color stops
   * @returns interpolated color.
   */
  paletteLerp(colors_stops: [P5.Color | string | number | number[], number][], amt: number): P5.Color;

  /**
   * Saves an `Object` or `Array` to a JSON file.
   * 
   * JavaScript Object Notation
   * (<a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON" target="_blank">JSON</a>)
   * is a standard format for sending data between applications. The format is
   * based on JavaScript objects which have keys and values. JSON files store
   * data in an object with strings as keys. Values can be strings, numbers,
   * Booleans, arrays, `null`, or other objects.
   * 
   * The first parameter, `json`, is the data to save. The data can be an array,
   * as in `[1, 2, 3]`, or an object, as in
   * `{ x: 50, y: 50, color: 'deeppink' }`.
   * 
   * The second parameter, `filename`, is a string that sets the file's name.
   * For example, calling `saveJSON([1, 2, 3], 'data.json')` saves the array
   * `[1, 2, 3]` to a file called `data.json` on the user's computer.
   * 
   * The third parameter, `optimize`, is optional. If `true` is passed, as in
   * `saveJSON([1, 2, 3], 'data.json', true)`, then all unneeded whitespace will
   * be removed to reduce the file size.
   * 
   * Note: The browser will either save the file immediately or prompt the user
   * with a dialogue window.
   * @param json data to save.
   * @param filename name of the file to be saved.
   * @param optimize whether to trim unneeded whitespace. Defaults
   * to `true`.
   */
  saveJSON(json: any[] | object, filename: string, optimize?: boolean): void;

  /**
   * Ends a drawing group that contains its own styles and transformations.
   * 
   * By default, styles such as <a href="#/p5/fill">fill()</a> and
   * transformations such as <a href="#/p5/rotate">rotate()</a> are applied to
   * all drawing that follows. The <a href="#/p5/push">push()</a> and `pop()`
   * functions can limit the effect of styles and transformations to a specific
   * group of shapes, images, and text. For example, a group of shapes could be
   * translated to follow the mouse without affecting the rest of the sketch:
   * 
   * `// Begin the drawing group.
   * push();
   * 
   * // Translate the origin to the mouse's position.
   * translate(mouseX, mouseY);
   * 
   * // Style the face.
   * noStroke();
   * fill('green');
   * 
   * // Draw the face.
   * circle(0, 0, 60);
   * 
   * // Style the eyes.
   * fill('white');
   * 
   * // Draw the left eye.
   * ellipse(-20, -20, 30, 20);
   * 
   * // Draw the right eye.
   * ellipse(20, -20, 30, 20);
   * 
   * // End the drawing group.
   * pop();
   * 
   * // Draw a bug.
   * let x = random(0, 100);
   * let y = random(0, 100);
   * text('🦟', x, y);`In the code snippet above, the bug's position isn't affected by
   * `translate(mouseX, mouseY)` because that transformation is contained
   * between <a href="#/p5/push">push()</a> and `pop()`. The bug moves around
   * the entire canvas as expected.
   * 
   * Note: <a href="#/p5/push">push()</a> and `pop()` are always called as a
   * pair. Both functions are required to begin and end a drawing group.
   * 
   * <a href="#/p5/push">push()</a> and `pop()` can also be nested to create
   * subgroups. For example, the code snippet above could be changed to give
   * more detail to the frog’s eyes:
   * 
   * `// Begin the drawing group.
   * push();
   * 
   * // Translate the origin to the mouse's position.
   * translate(mouseX, mouseY);
   * 
   * // Style the face.
   * noStroke();
   * fill('green');
   * 
   * // Draw a face.
   * circle(0, 0, 60);
   * 
   * // Style the eyes.
   * fill('white');
   * 
   * // Draw the left eye.
   * push();
   * translate(-20, -20);
   * ellipse(0, 0, 30, 20);
   * fill('black');
   * circle(0, 0, 8);
   * pop();
   * 
   * // Draw the right eye.
   * push();
   * translate(20, -20);
   * ellipse(0, 0, 30, 20);
   * fill('black');
   * circle(0, 0, 8);
   * pop();
   * 
   * // End the drawing group.
   * pop();
   * 
   * // Draw a bug.
   * let x = random(0, 100);
   * let y = random(0, 100);
   * text('🦟', x, y);`In this version, the code to draw each eye is contained between its own
   * <a href="#/p5/push">push()</a> and `pop()` functions. Doing so makes it
   * easier to add details in the correct part of a drawing.
   * 
   * <a href="#/p5/push">push()</a> and `pop()` contain the effects of the
   * following functions:
   * 
   * - <a href="#/p5/fill">fill()</a>
   * 
   * - <a href="#/p5/noFill">noFill()</a>
   * 
   * - <a href="#/p5/noStroke">noStroke()</a>
   * 
   * - <a href="#/p5/stroke">stroke()</a>
   * 
   * - <a href="#/p5/tint">tint()</a>
   * 
   * - <a href="#/p5/noTint">noTint()</a>
   * 
   * - <a href="#/p5/strokeWeight">strokeWeight()</a>
   * 
   * - <a href="#/p5/strokeCap">strokeCap()</a>
   * 
   * - <a href="#/p5/strokeJoin">strokeJoin()</a>
   * 
   * - <a href="#/p5/imageMode">imageMode()</a>
   * 
   * - <a href="#/p5/rectMode">rectMode()</a>
   * 
   * - <a href="#/p5/ellipseMode">ellipseMode()</a>
   * 
   * - <a href="#/p5/colorMode">colorMode()</a>
   * 
   * - <a href="#/p5/textAlign">textAlign()</a>
   * 
   * - <a href="#/p5/textFont">textFont()</a>
   * 
   * - <a href="#/p5/textSize">textSize()</a>
   * 
   * - <a href="#/p5/textLeading">textLeading()</a>
   * 
   * - <a href="#/p5/applyMatrix">applyMatrix()</a>
   * 
   * - <a href="#/p5/resetMatrix">resetMatrix()</a>
   * 
   * - <a href="#/p5/rotate">rotate()</a>
   * 
   * - <a href="#/p5/scale">scale()</a>
   * 
   * - <a href="#/p5/shearX">shearX()</a>
   * 
   * - <a href="#/p5/shearY">shearY()</a>
   * 
   * - <a href="#/p5/translate">translate()</a>
   * 
   * In WebGL mode, <a href="#/p5/push">push()</a> and `pop()` contain the
   * effects of a few additional styles:
   * 
   * - <a href="#/p5/setCamera">setCamera()</a>
   * 
   * - <a href="#/p5/ambientLight">ambientLight()</a>
   * 
   * - <a href="#/p5/directionalLight">directionalLight()</a>
   * 
   * - <a href="#/p5/pointLight">pointLight()</a> <a href="#/p5/texture">texture()</a>
   * 
   * - <a href="#/p5/specularMaterial">specularMaterial()</a>
   * 
   * - <a href="#/p5/shininess">shininess()</a>
   * 
   * - <a href="#/p5/normalMaterial">normalMaterial()</a>
   * 
   * - <a href="#/p5/shader">shader()</a>
   */
  pop(): void;

  /**
   * A function that's called once when the mouse wheel moves.
   * 
   * Declaring the function `mouseWheel()` sets a code block to run
   * automatically when the user scrolls with the mouse wheel:
   * 
   * `function mouseWheel() {
   * // Code to run.
   * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
   * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
   * value when `mouseWheel()` is called by p5.js:
   * 
   * `function mouseWheel() {
   * if (mouseX < 50) {
   * // Code to run if the mouse is on the left.
   * }
   * 
   * if (mouseY > 50) {
   * // Code to run if the mouse is near the bottom.
   * }
   * }`The parameter, `event`, is optional. `mouseWheel()` 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 scroll event:
   * 
   * `function mouseWheel(event) {
   * // Code to run that uses the event.
   * console.log(event);
   * }`The `event` object has many properties including `delta`, a `Number`
   * containing the distance that the user scrolled. For example, `event.delta`
   * might have the value 5 when the user scrolls up. `event.delta` is positive
   * if the user scrolls up and negative if they scroll down. The signs are
   * opposite on macOS with "natural" scrolling enabled.
   * 
   * 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.
   * 
   * Note: On Safari, `mouseWheel()` may only work as expected if
   * `return false;` is added at the end of the function.
   * @param event optional `WheelEvent` argument.
   */
  mouseWheel(event?: WheelEvent): void;

  /**
   * Creates an `<input></input>` element of type `'file'`.
   * 
   * `createFileInput()` allows users to select local files for use in a sketch.
   * It returns a <a href="#/p5.File">p5.File</a> object.
   * 
   * The first parameter, `callback`, is a function that's called when the file
   * loads. The callback function should have one parameter, `file`, that's a
   * <a href="#/p5.File">p5.File</a> object.
   * 
   * The second parameter, `multiple`, is optional. It's a boolean value that
   * allows loading multiple files if set to `true`. If `true`, `callback`
   * will be called once per file.
   * @param callback function to call once the file loads.
   * @param multiple allow multiple files to be selected.
   * @returns The new input element.
   */
  createFileInput(callback: (input: P5.File) => any, multiple?: boolean): P5.Element;

  /**
   * 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);
   * 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 = millis();
   * 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>;

  /**
   * Locks the mouse pointer to its current position and makes it invisible.
   * 
   * `requestPointerLock()` allows the mouse to move forever without leaving the
   * screen. Calling `requestPointerLock()` locks the values of
   * <a href="#/p5/mouseX">mouseX</a>, <a href="#/p5/mouseY">mouseY</a>,
   * <a href="#/p5/pmouseX">pmouseX</a>, and <a href="#/p5/pmouseY">pmouseY</a>.
   * <a href="#/p5/movedX">movedX</a> and <a href="#/p5/movedY">movedY</a>
   * continue updating and can be used to get the distance the mouse moved since
   * the last frame was drawn. Calling
   * <a href="#/p5/exitPointerLock">exitPointerLock()</a> resumes updating the
   * mouse system variables.
   * 
   * Note: Most browsers require an input, such as a click, before calling
   * `requestPointerLock()`. It’s recommended to call `requestPointerLock()` in
   * an event function such as <a href="#/p5/doubleClicked">doubleClicked()</a>.
   */
  requestPointerLock(): void;

  /**
   * Returns the default shader used for fills when
   * <a href="#/p5/normalMaterial">`normalMaterial()`</a> is activated.
   * 
   * Calling <a href="#/p5/buildNormalShader">`buildNormalShader(shaderFunction)`</a>
   * is equivalent to calling `baseNormalShader().modify(shaderFunction)`.
   * 
   * Read <a href="#/p5/buildNormalShader">the `buildNormalShader` reference</a> or
   * call `baseNormalShader().inspectHooks()` for more information on what you can do with
   * the base normal shader.
   * @returns The base material shader.
   */
  baseNormalShader(): P5.Shader;

  /**
   * 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;

  /**
   * 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;

  /**
   * Create a new shader that can change how fills are drawn, based on the default shader
   * used when no lights or textures are applied. Pass the resulting
   * shader into the <a href="#/p5/shader">`shader()`</a> function to apply it
   * to any fills you draw.
   * 
   * The main way to use `buildColorShader` is to pass a function in as a parameter.
   * This will let you create a shader using p5.strands.
   * 
   * In your function, you can call hooks to change part of the shader. In a material
   * shader, these are the hooks available:
   * 
   * - <a href="#/p5/objectInputs">`objectInputs`</a>: Update vertices before any positioning has been applied. Your function gets run on every vertex.
   * 
   * - <a href="#/p5/worldInputs">`worldInputs`</a>: Update vertices after transformations have been applied. Your function gets run on every vertex.
   * 
   * - <a href="#/p5/cameraInputs">`cameraInputs`</a>: Update vertices after transformations have been applied, relative to the camera. Your function gets run on every vertex.
   * 
   * - <a href="#/p5/finalColor">`finalColor`</a>: Update or replace the pixel color on the surface of a shape. Your function gets run on every pixel.
   * 
   * Read the linked reference page for each hook for more information about how to use them.
   * 
   * One thing you might want to do is modify the position of every vertex over time:
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(200, 200, WEBGL);
   * myShader = buildColorShader(material);
   * }
   * 
   * function material() {
   * let time = millis();
   * worldInputs.begin();
   * worldInputs.position.y +=
   * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
   * worldInputs.end();
   * }
   * 
   * function draw() {
   * background(255);
   * shader(myShader);
   * noStroke();
   * fill('red');
   * circle(0, 0, 50);
   * }`Like the `modify()` method on shaders,
   * advanced users can also fill in hooks using <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>
   * instead of JavaScript.
   * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
   * for more info.
   * @param callback A function building a p5.strands shader.
   * @param scope An optional scope object passed to .modify().
   * @returns The color shader.
   */
  buildColorShader(callback: Function, scope?: object): P5.Shader;
  buildColorShader(hooks: object, scope?: object): P5.Shader;

  /**
   * 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
   * 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 loadColorShader('myMaterial.js');
   * }
   * 
   * function draw() {
   * background(255);
   * shader(myShader);
   * lights();
   * noStroke();
   * fill('red');
   * circle(0, 0, 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 = millis();
   * worldInputs.begin();
   * worldInputs.position.y +=
   * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
   * worldInputs.end();`Read the reference for <a href="#/p5/buildColorShader">`buildColorShader`</a>,
   * the version of `loadColorShader` 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
   * `loadColorShader('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
   * `loadColorShader('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 color shader.
   */
  loadColorShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;

  /**
   * Returns the default shader used for fills when no lights or textures are activate.
   * 
   * Calling <a href="#/p5/buildColorShader">`buildColorShader(shaderFunction)`</a>
   * is equivalent to calling `baseColorShader().modify(shaderFunction)`.
   * 
   * Read <a href="#/p5/buildColorShader">the `buildColorShader` reference</a> or
   * call `baseColorShader().inspectHooks()` for more information on what you can do with
   * the base color shader.
   * @returns The base color shader.
   */
  baseColorShader(): P5.Shader;

  /**
   * Set attributes for the WebGL Drawing context.
   * This is a way of adjusting how the WebGL
   * renderer works to fine-tune the display and performance.
   * 
   * Note that this will reinitialize the drawing context
   * if called after the WebGL canvas is made.
   * 
   * If an object is passed as the parameter, all attributes
   * not declared in the object will be set to defaults.
   * 
   * The available attributes are:
   * <br>
   * alpha - indicates if the canvas contains an alpha buffer
   * default is true
   * 
   * depth - indicates whether the drawing buffer has a depth buffer
   * of at least 16 bits - default is true
   * 
   * stencil - indicates whether the drawing buffer has a stencil buffer
   * of at least 8 bits
   * 
   * antialias - indicates whether or not to perform anti-aliasing
   * default is false (true in Safari)
   * 
   * premultipliedAlpha - indicates that the page compositor will assume
   * the drawing buffer contains colors with pre-multiplied alpha
   * default is true
   * 
   * preserveDrawingBuffer - if true the buffers will not be cleared and
   * and will preserve their values until cleared or overwritten by author
   * (note that p5 clears automatically on draw loop)
   * default is true
   * 
   * perPixelLighting - if true, per-pixel lighting will be used in the
   * lighting shader otherwise per-vertex lighting is used.
   * default is true.
   * 
   * version - either 1 or 2, to specify which WebGL version to ask for. By
   * default, WebGL 2 will be requested. If WebGL2 is not available, it will
   * fall back to WebGL 1. You can check what version is used with by looking at
   * the global `webglVersion` property.
   * @param key Name of attribute
   * @param value New value of named attribute
   */
  setAttributes(key: string, value: boolean): void;
  setAttributes(obj: object): void;

  /**
   * Influences the shape of the Bézier curve segment in a custom shape.
   * By default, this is 3; the other possible parameter is 2. This
   * results in quadratic Bézier curves.
   * 
   * `bezierVertex()` adds a curved segment to custom shapes. The Bézier curves
   * it creates are defined like those made by the
   * <a href="#/p5/bezier">bezier()</a> function. `bezierVertex()` must be
   * called between the
   * <a href="#/p5/beginShape">beginShape()</a> and
   * <a href="#/p5/endShape">endShape()</a> functions. There must be at least
   * one call to <a href="#/p5/vertex">bezierVertex()</a>, before
   * a number of `bezierVertex()` calls that is a multiple of the parameter
   * set by <a href="#/p5/bezierOrder">bezierOrder(...)</a> (default 3).
   * 
   * Each curve of order 3 requires three calls to `bezierVertex`, so
   * 2 curves would need 7 calls to `bezierVertex()`:
   * (1 one initial anchor point, two sets of 3 curves describing the curves)
   * With `bezierOrder(2)`, two curves would need 5 calls: 1 + 2 + 2.
   * 
   * Bézier curves can also be drawn in 3D using WebGL mode.
   * 
   * Note: `bezierVertex()` won’t work when an argument is passed to
   * <a href="#/p5/beginShape">beginShape()</a>.
   * 
   * Calling `bezierOrder()` without an argument returns the current Bézier order.
   * @param order The new order to set. Can be either 2 or 3, by default 3
   * @returns The current Bézier order.
   */
  bezierOrder(order: number): number;
  bezierOrder(): number;

  /**
   * Sets the way colors blend when added to the canvas.
   * 
   * By default, drawing with a solid color paints over the current pixel values
   * on the canvas. `blendMode()` offers many options for blending colors.
   * 
   * Shapes, images, and text can be used as sources for drawing to the canvas.
   * A source pixel changes the color of the canvas pixel where it's drawn. The
   * final color results from blending the source pixel's color with the canvas
   * pixel's color. RGB color values from the source and canvas pixels are
   * compared, added, subtracted, multiplied, and divided to create different
   * effects. Red values with red values, greens with greens, and blues with
   * blues.
   * 
   * The parameter, `mode`, sets the blend mode. For example, calling
   * `blendMode(ADD)` sets the blend mode to `ADD`. The following blend modes
   * are available in both 2D and WebGL mode:
   * 
   * - `BLEND`: color values from the source overwrite the canvas. This is the default mode.
   * 
   * - `ADD`: color values from the source are added to values from the canvas.
   * 
   * - `DARKEST`: keeps the darkest color value.
   * 
   * - `LIGHTEST`: keeps the lightest color value.
   * 
   * - `EXCLUSION`: similar to `DIFFERENCE` but with less contrast.
   * 
   * - `MULTIPLY`: color values from the source are multiplied with values from the canvas. The result is always darker.
   * 
   * - `SCREEN`: all color values are inverted, then multiplied, then inverted again. The result is always lighter. (Opposite of `MULTIPLY`)
   * 
   * - `REPLACE`: the last source drawn completely replaces the rest of the canvas.
   * 
   * - `REMOVE`: overlapping pixels are removed by making them completely transparent.
   * 
   * The following blend modes are only available in 2D mode:
   * 
   * - `DIFFERENCE`: color values from the source are subtracted from the values from the canvas. If the difference is a negative number, it's made positive.
   * 
   * - `OVERLAY`: combines `MULTIPLY` and `SCREEN`. Dark values in the canvas get darker and light values get lighter.
   * 
   * - `HARD_LIGHT`: combines `MULTIPLY` and `SCREEN`. Dark values in the source get darker and light values get lighter.
   * 
   * - `SOFT_LIGHT`: a softer version of `HARD_LIGHT`.
   * 
   * - `DODGE`: lightens light tones and increases contrast. Divides the canvas color values by the inverted color values from the source.
   * 
   * - `BURN`: darkens dark tones and increases contrast. Divides the source color values by the inverted color values from the canvas, then inverts the result.
   * 
   * The following blend modes are only available in WebGL mode:
   * 
   * - `SUBTRACT`: RGB values from the source are subtracted from the values from the canvas. If the difference is a negative number, it's made positive. Alpha (transparency) values from the source and canvas are added.
   * @param mode blend mode to set.
   * either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,
   * EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
   * SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT
   * 
   * Calling `blendMode()` without an argument returns the current blendMode.
   * @returns the current blend mode.
   */
  blendMode(mode: typeof P5.BLEND | typeof P5.DARKEST | typeof P5.LIGHTEST | typeof P5.DIFFERENCE | typeof P5.MULTIPLY | typeof P5.EXCLUSION | typeof P5.SCREEN | typeof P5.REPLACE | typeof P5.OVERLAY | typeof P5.HARD_LIGHT | typeof P5.SOFT_LIGHT | typeof P5.DODGE | typeof P5.BURN | typeof P5.ADD | typeof P5.REMOVE | typeof P5.SUBTRACT): typeof P5.BLEND | typeof P5.DARKEST | typeof P5.LIGHTEST | typeof P5.DIFFERENCE | typeof P5.MULTIPLY | typeof P5.EXCLUSION | typeof P5.SCREEN | typeof P5.REPLACE | typeof P5.OVERLAY | typeof P5.HARD_LIGHT | typeof P5.SOFT_LIGHT | typeof P5.DODGE | typeof P5.BURN | typeof P5.ADD | typeof P5.REMOVE | typeof P5.SUBTRACT;
  blendMode(): typeof P5.BLEND | typeof P5.DARKEST | typeof P5.LIGHTEST | typeof P5.DIFFERENCE | typeof P5.MULTIPLY | typeof P5.EXCLUSION | typeof P5.SCREEN | typeof P5.REPLACE | typeof P5.OVERLAY | typeof P5.HARD_LIGHT | typeof P5.SOFT_LIGHT | typeof P5.DODGE | typeof P5.BURN | typeof P5.ADD | typeof P5.REMOVE | typeof P5.SUBTRACT;

  /**
   * Sets the position and orientation of the current camera in a 3D sketch.
   * 
   * `camera()` allows objects to be viewed from different angles. It has nine
   * parameters that are all optional.
   * 
   * The first three parameters, `x`, `y`, and `z`, are the coordinates of the
   * camera’s position. For example, calling `camera(0, 0, 0)` places the camera
   * at the origin `(0, 0, 0)`. By default, the camera is placed at
   * `(0, 0, 800)`.
   * 
   * The next three parameters, `centerX`, `centerY`, and `centerZ` are the
   * coordinates of the point where the camera faces. For example, calling
   * `camera(0, 0, 0, 10, 20, 30)` places the camera at the origin `(0, 0, 0)`
   * and points it at `(10, 20, 30)`. By default, the camera points at the
   * origin `(0, 0, 0)`.
   * 
   * The last three parameters, `upX`, `upY`, and `upZ` are the components of
   * the "up" vector. The "up" vector orients the camera’s y-axis. For example,
   * calling `camera(0, 0, 0, 10, 20, 30, 0, -1, 0)` places the camera at the
   * origin `(0, 0, 0)`, points it at `(10, 20, 30)`, and sets the "up" vector
   * to `(0, -1, 0)` which is like holding it upside-down. By default, the "up"
   * vector is `(0, 1, 0)`.
   * 
   * Note: `camera()` can only be used in WebGL mode.
   * @param x x-coordinate of the camera. Defaults to 0.
   * @param y y-coordinate of the camera. Defaults to 0.
   * @param z z-coordinate of the camera. Defaults to 800.
   * @param centerX x-coordinate of the point the camera faces. Defaults to 0.
   * @param centerY y-coordinate of the point the camera faces. Defaults to 0.
   * @param centerZ z-coordinate of the point the camera faces. Defaults to 0.
   * @param upX x-component of the camera’s "up" vector. Defaults to 0.
   * @param upY y-component of the camera’s "up" vector. Defaults to 1.
   * @param upZ z-component of the camera’s "up" vector. Defaults to 0.
   */
  camera(x?: number, y?: number, z?: number, centerX?: number, centerY?: number, centerZ?: number, upX?: number, upY?: number, upZ?: number): void;

  /**
   * Creates a <a href="#/p5/p5.StorageBuffer">`p5.StorageBuffer`</a>, which is
   * a block of data that shaders can read from, and compute shaders
   * can also write to. This is only available in WebGPU mode.
   * 
   * To read or write the data inside a shader, use
   * <a href="#/p5/uniformStorage">`uniformStorage()`</a>. To update its contents
   * from JavaScript, call <a href="#/p5.StorageBuffer/update">`.update()`</a>
   * on the result with new data.
   * 
   * Pass an array of objects to store a list of items, each with named
   * properties. The properties can be numbers, arrays of numbers, vectors
   * created with <a href="#/p5/createVector">`createVector()`</a>, or colors
   * created with <a href="#/p5/color">`color()`</a>. Inside the shader, each
   * item is accessed by index, and its properties are available by name.
   * 
   * `let instanceData;
   * let instancesShader;
   * let instance;
   * let count = 5;
   * 
   * async function setup() {
   * await createCanvas(200, 200, WEBGPU);
   * 
   * let data = [];
   * for (let i = 0; i < count; i++) {
   * data.push({
   * position: createVector(
   * random(-1, 1) * width / 2,
   * random(-1, 1) * height / 2,
   * 0,
   * ),
   * color: color(
   * random(255),
   * random(255),
   * random(255)
   * )
   * });
   * }
   * instanceData = createStorage(data);
   * instance = buildGeometry(drawInstance);
   * instancesShader = buildMaterialShader(drawInstances);
   * describe('Five spheres at random positions, each a different random color.');
   * }
   * 
   * function drawInstance() {
   * sphere(15);
   * }
   * 
   * function drawInstances() {
   * let data = uniformStorage(instanceData);
   * let itemColor = sharedVec4();
   * 
   * worldInputs.begin();
   * let item = data[instanceID()];
   * itemColor = item.color;
   * worldInputs.position += item.position;
   * worldInputs.end();
   * 
   * finalColor.begin();
   * finalColor.set(itemColor);
   * finalColor.end();
   * }
   * 
   * function draw() {
   * background(220);
   * lights();
   * noStroke();
   * shader(instancesShader);
   * model(instance, count);
   * }`You can also store a plain list of numbers by passing an array of numbers.
   * Inside the shader, each number is accessed by index directly. To create an
   * empty list to be filled in by a compute shader, pass a count instead.
   * 
   * `let cells;
   * let nextCells;
   * let gameShader;
   * let displayShader;
   * const W = 100;
   * const H = 100;
   * 
   * async function setup() {
   * await createCanvas(100, 100, WEBGPU);
   * 
   * let initial = new Float32Array(W * H);
   * for (let i = 0; i < initial.length; i++) {
   * initial[i] = random() > 0.7 ? 1 : 0;
   * }
   * cells = createStorage(initial);
   * nextCells = createStorage(W * H);
   * 
   * gameShader = buildComputeShader(simulate);
   * displayShader = buildFilterShader(display);
   * describe('An animated Game of Life simulation displayed as black and white pixels.');
   * }
   * 
   * function simulate() {
   * let current = uniformStorage(() => cells);
   * let next = uniformStorage(() => nextCells);
   * let w = uniformInt(() => W);
   * let h = uniformInt(() => H);
   * let x = index.x;
   * let y = index.y;
   * 
   * let n = 0;
   * for (let dy = -1; dy <= 1; dy++) {
   * for (let dx = -1; dx <= 1; dx++) {
   * if (dx != 0 || dy != 0) {
   * let nx = (x + dx + w) % w;
   * let ny = (y + dy + h) % h;
   * n += current[ny * w + nx];
   * }
   * }
   * }
   * 
   * let alive = current[y * w + x];
   * let nextOutput = 0;
   * if (alive == 1) {
   * if (abs(n - 2) < 0.1 || abs(n - 3) < 0.1) {
   * nextOutput = 1;
   * }
   * } else {
   * if (abs(n - 3) < 0.1) {
   * nextOutput = 1;
   * }
   * }
   * next[y * w + x] = nextOutput;
   * }
   * 
   * function display() {
   * let data = uniformStorage(() => cells);
   * let w = uniformInt(() => W);
   * let h = uniformInt(() => H);
   * 
   * filterColor.begin();
   * let x = floor(filterColor.texCoord.x * w);
   * let y = floor(filterColor.texCoord.y * h);
   * let alive = data[y * w + x];
   * filterColor.set([alive, alive, alive, 1]);
   * filterColor.end();
   * }
   * 
   * function draw() {
   * compute(gameShader, W, H);
   * [nextCells, cells] = [cells, nextCells];
   * filter(displayShader);
   * }`
   * @param dataOrCount Either a number specifying the count of floats,
   * an array/Float32Array of floats, or an array of objects describing struct elements.
   * @returns A storage buffer.
   */
  createStorage(dataOrCount: number | any[] | Float32Array | object[]): P5.StorageBuffer;

  /**
   * Create a new shader that can change how strokes are drawn, based on the default
   * shader used for strokes. Pass the resulting shader into the
   * <a href="#/p5/strokeShader">`strokeShader()`</a> function to apply it to any
   * strokes you draw.
   * 
   * The main way to use `buildStrokeShader` is to pass a function in as a parameter.
   * This will let you create a shader using p5.strands.
   * 
   * In your function, you can call hooks to change part of the shader. In a material
   * shader, these are the hooks available:
   * 
   * - <a href="#/p5/objectInputs">`objectInputs`</a>: Update vertices before any positioning has been applied. Your function gets run on every vertex.
   * 
   * - <a href="#/p5/worldInputs">`worldInputs`</a>: Update vertices after transformations have been applied. Your function gets run on every vertex.
   * 
   * - <a href="#/p5/cameraInputs">`cameraInputs`</a>: Update vertices after transformations have been applied, relative to the camera. Your function gets run on every vertex.
   * 
   * - <a href="#/p5/pixelInputs">`pixelInputs`</a>: Update property values on pixels on the surface of a shape. Your function gets run on every pixel.
   * 
   * - <a href="#/p5/finalColor">`finalColor`</a>: Update or replace the pixel color on the surface of a shape. Your function gets run on every pixel.
   * 
   * Read the linked reference page for each hook for more information about how to use them.
   * 
   * One thing you might want to do is update the color of a stroke per pixel. Here, it is being used
   * to create a soft texture:
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(200, 200, WEBGL);
   * myShader = buildStrokeShader(material);
   * }
   * 
   * function material() {
   * pixelInputs.begin();
   * let opacity = 1 - smoothstep(
   * 0,
   * 15,
   * length(pixelInputs.position - pixelInputs.center)
   * );
   * pixelInputs.color.a *= opacity;
   * pixelInputs.end();
   * }
   * 
   * 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
   * );
   * }`Rather than using opacity, we could use a form of dithering to get a different
   * texture. This involves using only fully opaque or transparent pixels. Here, we
   * randomly choose which pixels to be transparent:
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(200, 200, WEBGL);
   * myShader = buildStrokeShader(material);
   * }
   * 
   * function material() {
   * pixelInputs.begin();
   * // Replace alpha in the color with dithering by
   * // randomly setting pixel colors to 0 based on opacity
   * let a = 1;
   * if (random() > pixelInputs.color.a) {
   * a = 0;
   * }
   * pixelInputs.color.a = a;
   * pixelInputs.end();
   * }
   * 
   * 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();
   * }`You might also want to update some properties per vertex, such as the stroke
   * thickness. This lets you create a more varied line:
   * 
   * `let myShader;
   * 
   * function setup() {
   * createCanvas(200, 200, WEBGL);
   * myShader = buildStrokeShader(material);
   * }
   * 
   * function material() {
   * let time = millis();
   * worldInputs.begin();
   * // Add a somewhat random offset to the weight
   * // that varies based on position and time
   * let scale = 0.5 + noise(
   * worldInputs.position.x * 0.01,
   * worldInputs.position.y * 0.01,
   * time * 0.0005
   * );
   * worldInputs.weight *= scale;
   * worldInputs.end();
   * }
   * 
   * function draw() {
   * background(255);
   * strokeShader(myShader);
   * 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();
   * }`Like the `modify()` method on shaders,
   * advanced users can also fill in hooks using <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>
   * instead of JavaScript.
   * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
   * for more info.
   * @param callback A function building a p5.strands shader.
   * @param scope An optional scope object passed to .modify().
   * @returns The stroke shader.
   */
  buildStrokeShader(callback: Function, scope?: object): P5.Shader;
  buildStrokeShader(hooks: object, scope?: object): P5.Shader;

  /**
   * Returns the default shader used for compute operations.
   * 
   * Calling <a href="#/p5/buildComputeShader">`buildComputeShader(shaderFunction)`</a>
   * is equivalent to calling `baseComputeShader().modify(shaderFunction)`.
   * 
   * Read <a href="#/p5/buildComputeShader">the `buildComputeShader` reference</a> or
   * call `baseComputeShader().inspectHooks()` for more information on what you can do with
   * the base compute shader.
   * @returns The base compute shader.
   */
  baseComputeShader(): 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>;

  /**
   * Sets a perspective projection for the current camera in a 3D sketch.
   * 
   * In a perspective projection, shapes that are further from the camera appear
   * smaller than shapes that are near the camera. This technique, called
   * foreshortening, creates realistic 3D scenes. It’s applied by default in
   * WebGL mode.
   * 
   * `perspective()` changes the camera’s perspective by changing its viewing
   * frustum. The frustum is the volume of space that’s visible to the camera.
   * Its shape is a pyramid with its top cut off. The camera is placed where
   * the top of the pyramid should be and views everything between the frustum’s
   * top (near) plane and its bottom (far) plane.
   * 
   * The first parameter, `fovy`, is the camera’s vertical field of view. It’s
   * an angle that describes how tall or narrow a view the camera has. For
   * example, calling `perspective(0.5)` sets the camera’s vertical field of
   * view to 0.5 radians. By default, `fovy` is calculated based on the sketch’s
   * height and the camera’s default z-coordinate, which is 800. The formula for
   * the default `fovy` is `2 * atan(height / 2 / 800)`.
   * 
   * The second parameter, `aspect`, is the camera’s aspect ratio. It’s a number
   * that describes the ratio of the top plane’s width to its height. For
   * example, calling `perspective(0.5, 1.5)` sets the camera’s field of view to
   * 0.5 radians and aspect ratio to 1.5, which would make shapes appear thinner
   * on a square canvas. By default, aspect is set to `width / height`.
   * 
   * The third parameter, `near`, is the distance from the camera to the near
   * plane. For example, calling `perspective(0.5, 1.5, 100)` sets the camera’s
   * field of view to 0.5 radians, its aspect ratio to 1.5, and places the near
   * plane 100 pixels from the camera. Any shapes drawn less than 100 pixels
   * from the camera won’t be visible. By default, near is set to `0.1 * 800`,
   * which is 1/10th the default distance between the camera and the origin.
   * 
   * The fourth parameter, `far`, is the distance from the camera to the far
   * plane. For example, calling `perspective(0.5, 1.5, 100, 10000)` sets the
   * camera’s field of view to 0.5 radians, its aspect ratio to 1.5, places the
   * near plane 100 pixels from the camera, and places the far plane 10,000
   * pixels from the camera. Any shapes drawn more than 10,000 pixels from the
   * camera won’t be visible. By default, far is set to `10 * 800`, which is 10
   * times the default distance between the camera and the origin.
   * 
   * Note: `perspective()` can only be used in WebGL mode.
   * @param fovy camera frustum vertical field of view. Defaults to
   * `2 * atan(height / 2 / 800)`.
   * @param aspect camera frustum aspect ratio. Defaults to
   * `width / height`.
   * @param near distance from the camera to the near clipping plane.
   * Defaults to `0.1 * 800`.
   * @param far distance from the camera to the far clipping plane.
   * Defaults to `10 * 800`.
   */
  perspective(fovy?: number, aspect?: number, near?: number, far?: number): void;

  /**
   * Returns the default shader used for strokes.
   * 
   * Calling <a href="#/p5/buildStrokeShader">`buildStrokeShader(shaderFunction)`</a>
   * is equivalent to calling `baseStrokeShader().modify(shaderFunction)`.
   * 
   * Read <a href="#/p5/buildStrokeShader">the `buildStrokeShader` reference</a> or
   * call `baseStrokeShader().inspectHooks()` for more information on what you can do with
   * the base material shader.
   * @returns The base material shader.
   */
  baseStrokeShader(): P5.Shader;

  /**
   * 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;

  /**
   * Create a new compute shader using p5.strands.
   * 
   * A compute shader lets you run many calculations all at once on your GPU. They
   * are similar to a <a href="#/p5/for>`for` loop,</a> but each iteration of the
   * loop happens in parallel on the GPU rather than running one after the other.
   * This makes them ideal for calculations or simulations involving many items.
   * 
   * You create a compute shader by passing a function to `buildComputeShader`.
   * The function represents one iteration of a loop.
   * 
   * The compute shader can be run by calling <a href="#/p5/compute">`compute()`</a>
   * and passing the shader in, along with the number of iterations in up to three
   * dimensions. Use the <a href="#/p5/index">`index`</a> vector inside of your
   * iteration function to refer to the current iteration of the loop. The `x`, `y`,
   * and `z` properties will count up from zero to the count in each dimension passed
   * into `compute`.
   * 
   * A compute shader will read from and write to storage, which is often an array of
   * numbers or objects. Use <a href="#/p5/createStorage">`createStorage`</a> to construct
   * initial data. Connect your iteration function to the storage by passing the storage
   * into <a href="#/p5/uniformStorage">`uniformStorage`</a>.
   * 
   * Often, compute shaders are paired with <a href="#/p5/model">`model(myGeometry, count)`</a>
   * to draw one instance per object in the storage, and a shader that uses
   * <a href="#/p5/instanceID">`instanceID()`</a> to position each instance.
   * 
   * `let particles;
   * let computeShader;
   * let displayShader;
   * let instance;
   * const numParticles = 100;
   * 
   * async function setup() {
   * await createCanvas(100, 100, WEBGPU);
   * particles = createStorage(makeParticles(width / 2, height / 2));
   * computeShader = buildComputeShader(simulate);
   * displayShader = buildMaterialShader(display);
   * instance = buildGeometry(drawParticle);
   * describe('100 orange particles shooting outward.');
   * }
   * 
   * function makeParticles(x, y) {
   * let data = [];
   * for (let i = 0; i < numParticles; i++) {
   * let angle = (i / numParticles) * TWO_PI;
   * let speed = random(0.5, 2);
   * data.push({
   * position: createVector(x, y),
   * velocity: createVector(cos(angle) * speed, sin(angle) * speed),
   * });
   * }
   * return data;
   * }
   * 
   * function drawParticle() {
   * sphere(2);
   * }
   * 
   * function simulate() {
   * let data = uniformStorage(particles);
   * let idx = index.x;
   * data[idx].position = data[idx].position + data[idx].velocity;
   * }
   * 
   * function display() {
   * let data = uniformStorage(particles);
   * worldInputs.begin();
   * let pos = data[instanceID()].position;
   * worldInputs.position.xy += pos - [width / 2, height / 2];
   * worldInputs.end();
   * }
   * 
   * function draw() {
   * background(30);
   * if (frameCount % 60 === 0) {
   * particles.update(makeParticles(random(width), random(height)));
   * }
   * compute(computeShader, numParticles);
   * noStroke();
   * fill(255, 200, 50);
   * shader(displayShader);
   * model(instance, numParticles);
   * }``let particles;
   * let computeShader;
   * let displayShader;
   * let instance;
   * const numParticles = 50;
   * 
   * async function setup() {
   * await createCanvas(100, 100, WEBGPU);
   * 
   * let data = [];
   * for (let i = 0; i < numParticles; i++) {
   * data.push({
   * position: createVector(
   * random(-40, 40),
   * random(-40, 40)
   * ),
   * velocity: createVector(
   * random(-1, 1),
   * random(-1, 1)
   * ),
   * });
   * }
   * particles = createStorage(data);
   * 
   * computeShader = buildComputeShader(simulate);
   * displayShader = buildMaterialShader(display);
   * instance = buildGeometry(drawParticle);
   * describe('50 white spheres bouncing around the canvas.');
   * }
   * 
   * function drawParticle() {
   * sphere(3);
   * }
   * 
   * function simulate() {
   * let r = 3;
   * let data = uniformStorage(particles);
   * let idx = index.x;
   * let pos = data[idx].position;
   * let vel = data[idx].velocity;
   * pos = pos + vel;
   * if (pos.x > width/2 - r || pos.x < -height/2 + r) {
   * vel.x = -vel.x;
   * pos.x = clamp(pos.x, -width/2 + r, width/2 - r);
   * }
   * if (pos.y > height/2 - r || pos.y < -height/2 + r) {
   * vel.y = -vel.y;
   * pos.y = clamp(pos.y, -height/2 + r, height/2 - r);
   * }
   * data[idx].position = pos;
   * data[idx].velocity = vel;
   * }
   * 
   * function display() {
   * let data = uniformStorage(particles);
   * worldInputs.begin();
   * let pos = data[instanceID()].position;
   * worldInputs.position.xy += pos;
   * worldInputs.end();
   * }
   * 
   * function draw() {
   * background(30);
   * compute(computeShader, numParticles);
   * noStroke();
   * fill(255);
   * lights();
   * shader(displayShader);
   * model(instance, numParticles);
   * }`
   * @param callback A function building a p5.strands compute shader.
   * @returns The compute shader.
   */
  buildComputeShader(callback: Function): P5.Shader;

  /**
   * Enables or disables perspective for lines in 3D sketches.
   * 
   * In WebGL mode, lines can be drawn with a thinner stroke when they’re
   * further from the camera. Doing so gives them a more realistic appearance.
   * 
   * By default, lines are drawn differently based on the type of perspective
   * being used:
   * 
   * - `perspective()` and `frustum()` simulate a realistic perspective. In
   * these modes, stroke weight is affected by the line’s distance from the
   * camera. Doing so results in a more natural appearance. `perspective()` is
   * the default mode for 3D sketches.
   * 
   * - `ortho()` doesn’t simulate a realistic perspective. In this mode, stroke
   * weights are consistent regardless of the line’s distance from the camera.
   * Doing so results in a more predictable and consistent appearance.
   * 
   * `linePerspective()` can override the default line drawing mode.
   * 
   * The parameter, `enable`, is optional. It’s a `Boolean` value that sets the
   * way lines are drawn. If `true` is passed, as in `linePerspective(true)`,
   * then lines will appear thinner when they are further from the camera. If
   * `false` is passed, as in `linePerspective(false)`, then lines will have
   * consistent stroke weights regardless of their distance from the camera. By
   * default, `linePerspective()` is enabled.
   * 
   * Calling `linePerspective()` without passing an argument returns `true` if
   * it's enabled and `false` if not.
   * 
   * Note: `linePerspective()` can only be used in WebGL mode.
   * @param enable whether to enable line perspective.
   * @returns whether line perspective is enabled.
   */
  linePerspective(enable: boolean): boolean;
  linePerspective(): boolean;

  /**
   * Connects points with a smooth curve (a spline).
   * 
   * `splineVertex()` adds a curved segment to custom shapes.
   * The curve it creates follows the same rules as the ones
   * made with the <a href="#/p5/spline">spline()</a> function.
   * `splineVertex()` must be called between the
   * <a href="#/p5/beginShape">beginShape()</a> and
   * <a href="#/p5/endShape">endShape()</a> functions.
   * 
   * Spline curves can form shapes and curves that slope gently. They’re like
   * cables that are attached to a set of points. `splineVertex()` draws a smooth
   * curve through the points you give it.
   * <a href="#/p5/beginShape">beginShape()</a> and
   * <a href="#/p5/endShape">endShape()</a> in order to draw a curve:
   * 
   * If you provide three points, the spline will pass through them.
   * It works the same way with any number of points.
   * 
   * `beginShape();
   * 
   * // Add the first point.
   * splineVertex(25, 80);
   * 
   * // Add the second point.
   * splineVertex(20, 30);
   * 
   * // Add the last point.
   * splineVertex(85, 60);
   * 
   * endShape();`<img src="assets/openCurveSpline.png"></img>
   * 
   * Passing in `CLOSE` to `endShape()` closes the spline smoothly.
   * 
   * `beginShape();
   * 
   * // Add the first point.
   * splineVertex(25, 80);
   * 
   * // Add the second point.
   * splineVertex(20, 30);
   * 
   * // Add the second point.
   * splineVertex(85, 60);
   * 
   * endShape(CLOSE);`<img src="assets/closeCurveSpline.png"></img>
   * 
   * By default (`ends: INCLUDE`), the curve passes through
   * all the points you add with `splineVertex()`, similar to
   * the <a href="#/p5/spline">spline()</a> function. To draw only
   * the middle span p1->p2 (skipping p0->p1 and p2->p3), set
   * `splineProperty('ends', EXCLUDE)`. You don’t need to duplicate
   * vertices to draw those spans.
   * 
   * Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
   * `splineVertex()` has three arguments because each point has x-, y-, and
   * z-coordinates. By default, the vertex’s z-coordinate is set to 0.
   * 
   * Note: `splineVertex()` won’t work when an argument is passed to
   * <a href="#/p5/beginShape">beginShape()</a>.
   * @param x x-coordinate of the vertex
   * @param y y-coordinate of the vertex
   */
  splineVertex(x: number, y: number): void;
  splineVertex(x: number, y: number, z?: number): void;
  splineVertex(x: number, y: number, u?: number, v?: number): void;
  splineVertex(x: number, y: number, z: number, u?: number, v?: number): void;

  /**
   * Sets an orthographic projection for the current camera in a 3D sketch.
   * 
   * In an orthographic projection, shapes with the same size always appear the
   * same size, regardless of whether they are near or far from the camera.
   * 
   * `ortho()` changes the camera’s perspective by changing its viewing frustum
   * from a truncated pyramid to a rectangular prism. The camera is placed in
   * front of the frustum and views everything between the frustum’s near plane
   * and its far plane. `ortho()` has six optional parameters to define the
   * frustum.
   * 
   * The first four parameters, `left`, `right`, `bottom`, and `top`, set the
   * coordinates of the frustum’s sides, bottom, and top. For example, calling
   * `ortho(-100, 100, 200, -200)` creates a frustum that’s 200 pixels wide and
   * 400 pixels tall. By default, these coordinates are set based on the
   * sketch’s width and height, as in
   * `ortho(-width / 2, width / 2, -height / 2, height / 2)`.
   * 
   * The last two parameters, `near` and `far`, set the distance of the
   * frustum’s near and far plane from the camera. For example, calling
   * `ortho(-100, 100, 200, 200, 50, 1000)` creates a frustum that’s 200 pixels
   * wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000
   * pixels from the camera. By default, `near` and `far` are set to 0 and
   * `max(width, height) + 800`, respectively.
   * 
   * Note: `ortho()` can only be used in WebGL mode.
   * @param left x-coordinate of the frustum’s left plane. Defaults to `-width / 2`.
   * @param right x-coordinate of the frustum’s right plane. Defaults to `width / 2`.
   * @param bottom y-coordinate of the frustum’s bottom plane. Defaults to `height / 2`.
   * @param top y-coordinate of the frustum’s top plane. Defaults to `-height / 2`.
   * @param near z-coordinate of the frustum’s near plane. Defaults to 0.
   * @param far z-coordinate of the frustum’s far plane. Defaults to `max(width, height) + 800`.
   */
  ortho(left?: number, right?: number, bottom?: number, top?: number, near?: number, far?: number): 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 <a href="#/p5/square">square()</a> and
   * <a href="#/p5/sphere">sphere()</a>, and custom shapes created with
   * functions such as <a href="#/p5/buildGeometry">buildGeometry()</a>. To
   * texture a geometry created with <a href="#/p5/beginShape">beginShape()</a>,
   * uv coordinates must be passed to each
   * <a href="#/p5/vertex">vertex()</a> call.
   * 
   * The parameter, `tex`, is the texture to apply. `texture()` can use a range
   * of sources including images, videos, and offscreen renderers such as
   * <a href="#/p5.Graphics">p5.Graphics</a> and
   * <a href="#/p5.Framebuffer">p5.Framebuffer</a> objects.
   * 
   * To texture a geometry created with <a href="#/p5/beginShape">beginShape()</a>,
   * you will need to specify uv coordinates in <a href="#/p5/vertex">vertex()</a>.
   * 
   * Note: `texture()` can only be used in WebGL mode.
   * @param tex media to use as the texture.
   */
  texture(tex: P5.Image | P5.MediaElement | P5.Graphics | P5.Texture | P5.Framebuffer | P5.FramebufferTexture): void;

  /**
   * Dispatches a compute shader to run on the GPU.
   * 
   * The first parameter, `shader`, is a compute shader created with
   * <a href="#/p5/buildComputeShader">`buildComputeShader`</a>.
   * 
   * Pass a number for `x` to run a simple loop. Inside the shader's iteration
   * function, <a href="#/p5/index">`index.x`</a> will count up from 0 to
   * that number.
   * 
   * `let particles;
   * let computeShader;
   * let displayShader;
   * let instance;
   * const numParticles = 50;
   * 
   * async function setup() {
   * await createCanvas(100, 100, WEBGPU);
   * 
   * let data = [];
   * for (let i = 0; i < numParticles; i++) {
   * data.push({
   * position: createVector(
   * random(-40, 40),
   * random(-40, 40)
   * ),
   * velocity: createVector(
   * random(-1, 1),
   * random(-1, 1)
   * ),
   * });
   * }
   * particles = createStorage(data);
   * 
   * computeShader = buildComputeShader(simulate);
   * displayShader = buildMaterialShader(display);
   * instance = buildGeometry(drawParticle);
   * describe('50 white spheres bouncing around the canvas.');
   * }
   * 
   * function drawParticle() {
   * sphere(3);
   * }
   * 
   * function simulate() {
   * let r = 3;
   * let data = uniformStorage(particles);
   * let idx = index.x;
   * let pos = data[idx].position;
   * let vel = data[idx].velocity;
   * pos = pos + vel;
   * if (pos.x > width/2 - r || pos.x < -height/2 + r) {
   * vel.x = -vel.x;
   * pos.x = clamp(pos.x, -width/2 + r, width/2 - r);
   * }
   * if (pos.y > height/2 - r || pos.y < -height/2 + r) {
   * vel.y = -vel.y;
   * pos.y = clamp(pos.y, -height/2 + r, height/2 - r);
   * }
   * data[idx].position = pos;
   * data[idx].velocity = vel;
   * }
   * 
   * function display() {
   * let data = uniformStorage(particles);
   * worldInputs.begin();
   * let pos = data[instanceID()].position;
   * worldInputs.position.xy += pos;
   * worldInputs.end();
   * }
   * 
   * function draw() {
   * background(30);
   * compute(computeShader, numParticles);
   * noStroke();
   * fill(255);
   * lights();
   * shader(displayShader);
   * model(instance, numParticles);
   * }`You can also pass `y` and `z` to loop in up to three dimensions, using
   * `index.y` and `index.z` to get the position in each. This is useful for
   * working with 2D grids, like in the Game of Life example below.
   * 
   * `let cells;
   * let nextCells;
   * let gameShader;
   * let displayShader;
   * const W = 100;
   * const H = 100;
   * 
   * async function setup() {
   * await createCanvas(100, 100, WEBGPU);
   * 
   * let initial = new Float32Array(W * H);
   * for (let i = 0; i < initial.length; i++) {
   * initial[i] = random() > 0.7 ? 1 : 0;
   * }
   * cells = createStorage(initial);
   * nextCells = createStorage(W * H);
   * 
   * gameShader = buildComputeShader(simulate);
   * displayShader = buildFilterShader(display);
   * describe('An animated Game of Life simulation displayed as black and white pixels.');
   * }
   * 
   * function simulate() {
   * let current = uniformStorage(() => cells);
   * let next = uniformStorage(() => nextCells);
   * let w = uniformInt(() => W);
   * let h = uniformInt(() => H);
   * let x = index.x;
   * let y = index.y;
   * 
   * let n = 0;
   * for (let dy = -1; dy <= 1; dy++) {
   * for (let dx = -1; dx <= 1; dx++) {
   * if (dx != 0 || dy != 0) {
   * let nx = (x + dx + w) % w;
   * let ny = (y + dy + h) % h;
   * n += current[ny * w + nx];
   * }
   * }
   * }
   * 
   * let alive = current[y * w + x];
   * let nextOutput = 0;
   * if (alive == 1) {
   * if (abs(n - 2) < 0.1 || abs(n - 3) < 0.1) {
   * nextOutput = 1;
   * }
   * } else {
   * if (abs(n - 3) < 0.1) {
   * nextOutput = 1;
   * }
   * }
   * next[y * w + x] = nextOutput;
   * }
   * 
   * function display() {
   * let data = uniformStorage(() => cells);
   * let w = uniformInt(() => W);
   * let h = uniformInt(() => H);
   * 
   * filterColor.begin();
   * let x = floor(filterColor.texCoord.x * w);
   * let y = floor(filterColor.texCoord.y * h);
   * let alive = data[y * w + x];
   * filterColor.set([alive, alive, alive, 1]);
   * filterColor.end();
   * }
   * 
   * function draw() {
   * compute(gameShader, W, H);
   * [nextCells, cells] = [cells, nextCells];
   * filter(displayShader);
   * }`
   * @param shader The compute shader to run.
   * @param x Number of invocations in the X dimension.
   * @param y Number of invocations in the Y dimension.
   * @param z Number of invocations in the Z dimension.
   */
  compute(shader: P5.Shader, x: number, y?: number, z?: number): void;

  /**
   * Sets the number of segments used to draw spline curves in WebGL mode.
   * 
   * In WebGL mode, smooth shapes are drawn using many flat segments. Adding
   * more flat segments makes shapes appear smoother.
   * 
   * The parameter, `detail`, is the density of segments to use while drawing a
   * spline curve.
   * 
   * Note: `curveDetail()` has no effect in 2D mode.
   * @param resolution number of segments to use. Default is 1/4
   */
  curveDetail(resolution: number): void;

  /**
   * Sets the frustum of the current camera in a 3D sketch.
   * 
   * In a frustum projection, shapes that are further from the camera appear
   * smaller than shapes that are near the camera. This technique, called
   * foreshortening, creates realistic 3D scenes.
   * 
   * `frustum()` changes the default camera’s perspective by changing its
   * viewing frustum. The frustum is the volume of space that’s visible to the
   * camera. The frustum’s shape is a pyramid with its top cut off. The camera
   * is placed where the top of the pyramid should be and points towards the
   * base of the pyramid. It views everything within the frustum.
   * 
   * The first four parameters, `left`, `right`, `bottom`, and `top`, set the
   * coordinates of the frustum’s sides, bottom, and top. For example, calling
   * `frustum(-100, 100, 200, -200)` creates a frustum that’s 200 pixels wide
   * and 400 pixels tall. By default, these coordinates are set based on the
   * sketch’s width and height, as in
   * `ortho(-width / 20, width / 20, height / 20, -height / 20)`.
   * 
   * The last two parameters, `near` and `far`, set the distance of the
   * frustum’s near and far plane from the camera. For example, calling
   * `ortho(-100, 100, 200, -200, 50, 1000)` creates a frustum that’s 200 pixels
   * wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000
   * pixels from the camera. By default, near is set to `0.1 * 800`, which is
   * 1/10th the default distance between the camera and the origin. `far` is set
   * to `10 * 800`, which is 10 times the default distance between the camera
   * and the origin.
   * 
   * Note: `frustum()` can only be used in WebGL mode.
   * @param left x-coordinate of the frustum’s left plane. Defaults to `-width / 20`.
   * @param right x-coordinate of the frustum’s right plane. Defaults to `width / 20`.
   * @param bottom y-coordinate of the frustum’s bottom plane. Defaults to `height / 20`.
   * @param top y-coordinate of the frustum’s top plane. Defaults to `-height / 20`.
   * @param near z-coordinate of the frustum’s near plane. Defaults to `0.1 * 800`.
   * @param far z-coordinate of the frustum’s far plane. Defaults to `10 * 800`.
   */
  frustum(left?: number, right?: number, bottom?: number, top?: number, near?: number, far?: number): void;

  /**
   * Creates a new <a href="#/p5.Camera">p5.Camera</a> object.
   * 
   * The new camera is initialized with a default position `(0, 0, 800)` and a
   * default perspective projection. Its properties can be controlled with
   * <a href="#/p5.Camera">p5.Camera</a> methods such as
   * `myCamera.lookAt(0, 0, 0)`.
   * 
   * Note: Every 3D sketch starts with a default camera initialized.
   * This camera can be controlled with the functions
   * <a href="#/p5/camera">camera()</a>,
   * <a href="#/p5/perspective">perspective()</a>,
   * <a href="#/p5/ortho">ortho()</a>, and
   * <a href="#/p5/frustum">frustum()</a> if it's the only camera in the scene.
   * 
   * Note: `createCamera()` can only be used in WebGL mode.
   * @returns the new camera.
   */
  createCamera(): P5.Camera;

  /**
   * Gets or sets a given spline property.
   * 
   * Use `splineProperty()` to adjust the behavior of splines
   * created with `splineVertex()` or `spline()`. You can control
   * two key aspects of a spline: its end behavior (`ends`) and
   * its curvature (`tightness`).
   * 
   * By default, the ends property is set to `INCLUDE`, which means
   * the spline passes through every point, including the endpoints.
   * You can also set it to `EXCLUDE` i.e. `splineProperty('ends', EXCLUDE)`,
   * which makes the spline pass through all points except the endpoints.
   * 
   * `INCLUDE` case will have the spline passing through
   * all points, like this:
   * 
   * `splineProperty('ends', INCLUDE); // no need to set this, as it is the default
   * spline(25, 46, 93, 44, 93, 81, 35, 85);
   * 
   * point(25, 46);
   * point(93, 44);
   * point(93, 81);
   * point(35, 85);`<img src="assets/includeSpline.png"></img>
   * 
   * EXCLUDE case will have the spline passing through
   * the middle points, like this:
   * 
   * `splineProperty('ends', EXCLUDE);
   * spline(25, 46, 93, 44, 93, 81, 35, 85);
   * 
   * point(25, 46);
   * point(93, 44);
   * point(93, 81);
   * point(35, 85);`<img src="assets/excludeSpline.png"></img>
   * 
   * By default, the tightness property is set to `0`,
   * producing a smooth curve that passes evenly through
   * the vertices. Negative values make the curve looser,
   * while positive values make it tighter. Common values
   * range between -1 and 1, though values outside this
   * range can also be used for different effects.
   * 
   * For example, To set tightness, use `splineProperty('tightness', t)`,
   * (default: t = 0).
   * 
   * Here's the example showing negetive value of tightness,
   * which creates a rounder bulge:
   * 
   * `splineProperty('tightness', -5)
   * stroke(0);
   * strokeWeight(2);
   * spline(25, 46, 93, 44, 93, 81, 35, 85);`<img src="assets/roundBulge.png"></img>
   * Here's the example showing positive value of tightness,
   * which makes the curve tighter and more angular:
   * 
   * `splineProperty('tightness', 5)
   * stroke(0);
   * strokeWeight(2);
   * spline(25, 46, 93, 44, 93, 81, 35, 85);`<img src="assets/anglurBulge.png"></img>
   * 
   * In all cases, the splines in p5.js are <a href = "https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Cardinal_spline">cardinal splines</a>.
   * When tightness is 0, these splines are often known as
   * <a href="https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Catmull%E2%80%93Rom_spline">Catmull-Rom splines</a>
   * @param value Value to set the given property to.
   * @returns The current value for the given property.
   */
  splineProperty(property: string, value: any): void;
  splineProperty(property: string): void;

  /**
   * Changes the coordinate system used for textures when they’re applied to
   * custom shapes.
   * 
   * In order for <a href="#/p5/texture">texture()</a> 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 <a href="#/p5/rect">rect()</a> and
   * <a href="#/p5/box">box()</a> already have these texture mappings based on
   * their vertices. Custom shapes created with
   * <a href="#/p5/vertex">vertex()</a> require texture mappings to be passed as
   * uv coordinates.
   * 
   * Each call to <a href="#/p5/vertex">vertex()</a> 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();``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:
   * 
   * `// Set the texture mode to use normalized coordinates.
   * textureMode(NORMAL);
   * 
   * // 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.
   * 
   * Calling `textureMode()` with no arguments returns the current texture mode.
   * @param mode either IMAGE or NORMAL.
   * @returns The current texture mode, either IMAGE or NORMAL.
   */
  textureMode(mode: typeof P5.IMAGE | typeof P5.NORMAL): typeof P5.IMAGE | typeof P5.NORMAL;
  textureMode(): typeof P5.IMAGE | typeof P5.NORMAL;

  /**
   * Sets the current (active) camera of a 3D sketch.
   * 
   * `setCamera()` allows for switching between multiple cameras created with
   * <a href="#/p5/createCamera">createCamera()</a>.
   * 
   * Note: `setCamera()` can only be used in WebGL mode.
   * @param cam camera that should be made active.
   */
  setCamera(cam: P5.Camera): void;

  /**
   * Sets multiple properties for spline curves at once.
   * 
   * `splineProperties()` accepts an object with key-value pairs to configure
   * how spline curves are drawn. This is a convenient way to set multiple
   * spline properties with a single function call, rather than calling
   * <a href="#/p5/splineProperty">splineProperty()</a> multiple times.
   * 
   * The properties object can include:
   * 
   * - `tightness`: A number that controls how tightly the curve fits to the
   * vertex points. The default value is 0. Positive values make the curve
   * tighter (straighter), while negative values make it looser. Values
   * between -5 and 5 work best.
   * 
   * - `ends`: Controls whether to draw the end segments of the spline. Set to
   * `EXCLUDE` to skip drawing the segments between the first and second
   * points and between the second-to-last and last points. This is useful
   * when you want to use the first and last points as control points only.
   * 
   * `splineProperties()` affects curves drawn with
   * <a href="#/p5/splineVertex">splineVertex()</a> within
   * <a href="#/p5/beginShape">beginShape()</a> and
   * <a href="#/p5/endShape">endShape()</a>, as well as curves drawn with
   * <a href="#/p5/spline">spline()</a>. The properties remain active until
   * changed by another call to `splineProperties()` or
   * <a href="#/p5/splineProperty">splineProperty()</a>.
   * @param values an object containing spline property key-value pairs
   */
  splineProperties(values: object): object;

  /**
   * Changes the way textures behave when a shape’s uv coordinates go beyond the
   * texture.
   * 
   * In order for <a href="#/p5/texture">texture()</a> 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 <a href="#/p5/rect">rect()</a> and
   * <a href="#/p5/box">box()</a> already have these texture mappings based on
   * their vertices. Custom shapes created with
   * <a href="#/p5/vertex">vertex()</a> require texture mappings to be passed as
   * uv coordinates.
   * 
   * Each call to <a href="#/p5/vertex">vertex()</a> 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.
   * 
   * Calling `textureWrap()` with no arguments returns an object with the current
   * mode for x and y directions, as in `{ wrapX: CLAMP, wrapY: REPEAT }`.
   * @param wrapX either CLAMP, REPEAT, or MIRROR
   * @param wrapY either CLAMP, REPEAT, or MIRROR
   * @returns The current texture wrapping for x and y.
   */
  textureWrap(wrapX: typeof P5.CLAMP | typeof P5.REPEAT | typeof P5.MIRROR, wrapY?: typeof P5.CLAMP | typeof P5.REPEAT | typeof P5.MIRROR): object;
  textureWrap(): object;

  /**
   * Adds a vertex to a custom shape.
   * 
   * `vertex()` sets the coordinates of vertices drawn between the
   * <a href="#/p5/beginShape">beginShape()</a> and
   * <a href="#/p5/endShape">endShape()</a> functions.
   * 
   * The first two parameters, `x` and `y`, set the x- and y-coordinates of the
   * vertex.
   * 
   * The third parameter, `z`, is optional. It sets the z-coordinate of the
   * vertex in WebGL mode. By default, `z` is 0.
   * 
   * The fourth and fifth parameters, `u` and `v`, are also optional. They set
   * the u- and v-coordinates for the vertex’s texture when used with
   * <a href="#/p5/endShape">endShape()</a>. By default, `u` and `v` are both 0.
   * @param x x-coordinate of the vertex.
   * @param y y-coordinate of the vertex.
   */
  vertex(x: number, y: number): void;
  vertex(x: number, y: number, u?: number, v?: number): void;
  vertex(x: number, y: number, z: number, u?: number, v?: number): 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.
   */
  normalMaterial(): void;

  /**
   * Begins creating a hole within a flat shape.
   * 
   * The `beginContour()` and <a href="#/p5/endContour">endContour()</a>
   * functions allow for creating negative space within custom shapes that are
   * flat. `beginContour()` begins adding vertices to a negative space and
   * <a href="#/p5/endContour">endContour()</a> stops adding them.
   * `beginContour()` and <a href="#/p5/endContour">endContour()</a> must be
   * called between <a href="#/p5/beginShape">beginShape()</a> and
   * <a href="#/p5/endShape">endShape()</a>.
   * 
   * Transformations such as <a href="#/p5/translate">translate()</a>,
   * <a href="#/p5/rotate">rotate()</a>, and <a href="#/p5/scale">scale()</a>
   * don't work between `beginContour()` and
   * <a href="#/p5/endContour">endContour()</a>. It's also not possible to use
   * other shapes, such as <a href="#/p5/ellipse">ellipse()</a> or
   * <a href="#/p5/rect">rect()</a>, between `beginContour()` and
   * <a href="#/p5/endContour">endContour()</a>.
   * 
   * Note: The vertices that define a negative space must "wind" in the opposite
   * direction from the outer shape. First, draw vertices for the outer shape
   * clockwise order. Then, draw vertices for the negative space in
   * counter-clockwise order.
   */
  beginContour(): void;

  /**
   * Stops creating a hole within a flat shape.
   * 
   * The <a href="#/p5/beginContour">beginContour()</a> and `endContour()`
   * functions allow for creating negative space within custom shapes that are
   * flat. <a href="#/p5/beginContour">beginContour()</a> begins adding vertices
   * to a negative space and `endContour()` stops adding them.
   * <a href="#/p5/beginContour">beginContour()</a> and `endContour()` must be
   * called between <a href="#/p5/beginShape">beginShape()</a> and
   * <a href="#/p5/endShape">endShape()</a>.
   * 
   * By default,
   * the controur has an `OPEN` end, and to close it,
   * call `endContour(CLOSE)`. The CLOSE contour mode closes splines smoothly.
   * 
   * Transformations such as <a href="#/p5/translate">translate()</a>,
   * <a href="#/p5/rotate">rotate()</a>, and <a href="#/p5/scale">scale()</a>
   * don't work between <a href="#/p5/beginContour">beginContour()</a> and
   * `endContour()`. It's also not possible to use other shapes, such as
   * <a href="#/p5/ellipse">ellipse()</a> or <a href="#/p5/rect">rect()</a>,
   * between <a href="#/p5/beginContour">beginContour()</a> and `endContour()`.
   * 
   * Note: The vertices that define a negative space must "wind" in the opposite
   * direction from the outer shape. First, draw vertices for the outer shape
   * clockwise order. Then, draw vertices for the negative space in
   * counter-clockwise order.
   * @param mode By default, the value is OPEN
   */
  endContour(mode?: typeof P5.OPEN | typeof P5.CLOSE): void;

  /**
   * Sets the ambient color of shapes’ surface material.
   * 
   * The `ambientMaterial()` color sets the components of the
   * <a href="#/p5/ambientLight">ambientLight()</a> 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
   * <a href="#/p5.Color">p5.Color</a> 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 <a href="#/p5/colorMode">colorMode()</a>.
   * 
   * Note: `ambientMaterial()` can only be used in WebGL mode.
   * @param v1 red or hue value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   * @param v2 green or saturation value in the
   * current <a href="#/p5/colorMode">colorMode()</a>.
   * @param v3 blue, brightness, or lightness value in the
   * current <a href="#/p5/colorMode">colorMode()</a>.
   */
  ambientMaterial(v1: number, v2: number, v3: number): void;
  ambientMaterial(gray: number): void;
  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
   * <a href="#/p5.Color">p5.Color</a> 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 <a href="#/p5/colorMode">colorMode()</a>.
   * 
   * Note: `emissiveMaterial()` can only be used in WebGL mode.
   * @param v1 red or hue value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   * @param v2 green or saturation value in the
   * current <a href="#/p5/colorMode">colorMode()</a>.
   * @param v3 blue, brightness, or lightness value in the
   * current <a href="#/p5/colorMode">colorMode()</a>.
   * @param alpha alpha value in the current
   * <a href="#/p5/colorMode">colorMode()</a>.
   */
  emissiveMaterial(v1: number, v2: number, v3: number, alpha?: number): void;
  emissiveMaterial(gray: number): void;
  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 <a href="#/p5/ambientMaterial">ambientMaterial()</a>,
   * `specularMaterial()` will reflect the full color of light sources including
   * <a href="#/p5/directionalLight">directionalLight()</a>,
   * <a href="#/p5/pointLight">pointLight()</a>,
   * and <a href="#/p5/spotLight">spotLight()</a>. This is what gives it shapes
   * their "shiny" appearance. The material’s shininess can be controlled by the
   * <a href="#/p5/shininess">shininess()</a> 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
   * <a href="#/p5.Color">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 <a href="#/p5/colorMode">colorMode()</a>.
   * @param gray grayscale value between 0 (black) and 255 (white).
   * @param alpha alpha value in the current current
   * <a href="#/p5/colorMode">colorMode()</a>.
   */
  specularMaterial(gray: number, alpha?: number): void;
  specularMaterial(v1: number, v2: number, v3: number, alpha?: number): void;
  specularMaterial(color: P5.Color | number[] | string): void;

  /**
   * Sets the amount of gloss ("shininess") of a
   * <a href="#/p5/specularMaterial">specularMaterial()</a>.
   * 
   * Shiny materials focus reflected light more than dull materials.
   * `shininess()` affects the way materials reflect light sources including
   * <a href="#/p5/directionalLight">directionalLight()</a>,
   * <a href="#/p5/pointLight">pointLight()</a>,
   * and <a href="#/p5/spotLight">spotLight()</a>.
   * 
   * The parameter, `shine`, is a number that sets the amount of shininess.
   * `shine` must be greater than 1, which is its default value.
   * @param shine amount of shine.
   */
  shininess(shine: number): void;

  /**
   * Sets the amount of "metalness" of a
   * <a href="#/p5/specularMaterial">specularMaterial()</a>.
   * 
   * `metalness()` can make materials appear more metallic. It affects the way
   * materials reflect light sources including
   * affects the way materials reflect light sources including
   * <a href="#/p5/directionalLight">directionalLight()</a>,
   * <a href="#/p5/pointLight">pointLight()</a>,
   * <a href="#/p5/spotLight">spotLight()</a>, and
   * <a href="#/p5/imageLight">imageLight()</a>.
   * 
   * 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 metallic amount of metalness.
   */
  metalness(metallic: number): void;

  /**
   * Returns the ID when drawing many instances
   */
  instanceID(): any;

  /**
   * Discards the current pixel
   */
  discard(): void;

  getTexture(tex: any, coord: any): any;

  /**
   * GLSL built-in function acos
   */
  acos(param0: any): any;

  /**
   * GLSL built-in function acosh
   */
  acosh(param0: any): any;

  /**
   * GLSL built-in function asin
   */
  asin(param0: any): any;

  /**
   * GLSL built-in function asinh
   */
  asinh(param0: any): any;

  /**
   * GLSL built-in function atan
   */
  atan(param0: any): any;
  atan(param0: any, param1: any): any;

  /**
   * GLSL built-in function atanh
   */
  atanh(param0: any): any;

  /**
   * GLSL built-in function cos
   */
  cos(param0: any): any;

  /**
   * GLSL built-in function cosh
   */
  cosh(param0: any): any;

  /**
   * GLSL built-in function degrees
   */
  degrees(param0: any): any;

  /**
   * GLSL built-in function radians
   */
  radians(param0: any): any;

  /**
   * GLSL built-in function sin
   */
  sin(param0: any): any;

  /**
   * GLSL built-in function sinh
   */
  sinh(param0: any): any;

  /**
   * GLSL built-in function tan
   */
  tan(param0: any): any;

  /**
   * GLSL built-in function tanh
   */
  tanh(param0: any): any;

  /**
   * GLSL built-in function abs
   */
  abs(param0: any): any;
  abs(param0: any): any;

  /**
   * GLSL built-in function ceil
   */
  ceil(param0: any): any;

  /**
   * GLSL built-in function clamp
   */
  clamp(param0: any, param1: any, param2: any): any;
  clamp(param0: any, param1: any, param2: any): any;
  clamp(param0: any, param1: any, param2: any): any;
  clamp(param0: any, param1: any, param2: any): any;

  /**
   * GLSL built-in function dFdx
   */
  dFdx(param0: any): any;

  /**
   * GLSL built-in function dFdy
   */
  dFdy(param0: any): any;

  /**
   * GLSL built-in function exp
   */
  exp(param0: any): any;

  /**
   * GLSL built-in function exp2
   */
  exp2(param0: any): any;

  /**
   * GLSL built-in function floor
   */
  floor(param0: any): any;

  /**
   * GLSL built-in function fma
   */
  fma(param0: any, param1: any, param2: any): any;

  /**
   * GLSL built-in function fract
   */
  fract(param0: any): any;

  /**
   * GLSL built-in function fwidth
   */
  fwidth(param0: any): any;

  /**
   * GLSL built-in function inversesqrt
   */
  inversesqrt(param0: any): any;

  /**
   * GLSL built-in function log
   */
  log(param0: any): any;

  /**
   * GLSL built-in function log2
   */
  log2(param0: any): any;

  /**
   * GLSL built-in function max
   */
  max(param0: any, param1: any): any;
  max(param0: any, param1: any): any;
  max(param0: any, param1: any): any;
  max(param0: any, param1: any): any;

  /**
   * GLSL built-in function min
   */
  min(param0: any, param1: any): any;
  min(param0: any, param1: any): any;
  min(param0: any, param1: any): any;
  min(param0: any, param1: any): any;

  /**
   * GLSL built-in function mix
   */
  mix(param0: any, param1: any, param2: any): any;
  mix(param0: any, param1: any, param2: any): any;
  mix(param0: any, param1: any, param2: any): any;

  /**
   * GLSL built-in function mod
   */
  mod(param0: any, param1: any): any;
  mod(param0: any, param1: any): any;

  /**
   * GLSL built-in function pow
   */
  pow(param0: any, param1: any): any;

  /**
   * GLSL built-in function round
   */
  round(param0: any): any;

  /**
   * GLSL built-in function roundEven
   */
  roundEven(param0: any): any;

  /**
   * GLSL built-in function sign
   */
  sign(param0: any): any;
  sign(param0: any): any;

  /**
   * GLSL built-in function smoothstep
   */
  smoothstep(param0: any, param1: any, param2: any): any;
  smoothstep(param0: any, param1: any, param2: any): any;

  /**
   * GLSL built-in function sqrt
   */
  sqrt(param0: any): any;

  /**
   * GLSL built-in function step
   */
  step(param0: any, param1: any): any;

  /**
   * GLSL built-in function trunc
   */
  trunc(param0: any): any;

  /**
   * GLSL built-in function cross
   */
  cross(param0: any, param1: any): any;

  /**
   * GLSL built-in function distance
   */
  distance(param0: any, param1: any): any;

  /**
   * GLSL built-in function dot
   */
  dot(param0: any, param1: any): any;

  /**
   * GLSL built-in function equal
   */
  equal(param0: any, param1: any): any;
  equal(param0: any, param1: any): any;
  equal(param0: any, param1: any): any;

  /**
   * GLSL built-in function faceforward
   */
  faceforward(param0: any, param1: any, param2: any): any;

  /**
   * GLSL built-in function normalize
   */
  normalize(param0: any): any;

  /**
   * GLSL built-in function notEqual
   */
  notEqual(param0: any, param1: any): any;
  notEqual(param0: any, param1: any): any;
  notEqual(param0: any, param1: any): any;

  /**
   * GLSL built-in function reflect
   */
  reflect(param0: any, param1: any): any;

  /**
   * GLSL built-in function refract
   */
  refract(param0: any, param1: any, param2: any): any;

  /**
   * Create a Float uniform variable
   */
  uniformFloat(defaultValue?: any): any;

  /**
   * Create a shared Float to pass data between hooks
   */
  varyingFloat(): any;

  /**
   * Create a shared Float to pass data between hooks
   */
  sharedFloat(): any;

  /**
   * Create a Vec2 uniform variable
   */
  uniformVec2(defaultValue?: any): any;

  /**
   * Create a shared Vec2 to pass data between hooks
   */
  varyingVec2(): any;

  /**
   * Create a shared Vec2 to pass data between hooks
   */
  sharedVec2(): any;

  /**
   * Create a Vec2 uniform variable
   */
  uniformVector2(defaultValue?: any): any;

  /**
   * Create a shared Vec2 to pass data between hooks
   */
  varyingVector2(): any;

  /**
   * Create a shared Vec2 to pass data between hooks
   */
  sharedVector2(): any;

  /**
   * Create a Vec3 uniform variable
   */
  uniformVec3(defaultValue?: any): any;

  /**
   * Create a shared Vec3 to pass data between hooks
   */
  varyingVec3(): any;

  /**
   * Create a shared Vec3 to pass data between hooks
   */
  sharedVec3(): any;

  /**
   * Create a Vec3 uniform variable
   */
  uniformVector3(defaultValue?: any): any;

  /**
   * Create a shared Vec3 to pass data between hooks
   */
  varyingVector3(): any;

  /**
   * Create a shared Vec3 to pass data between hooks
   */
  sharedVector3(): any;

  /**
   * Create a Vec4 uniform variable
   */
  uniformVec4(defaultValue?: any): any;

  /**
   * Create a shared Vec4 to pass data between hooks
   */
  varyingVec4(): any;

  /**
   * Create a shared Vec4 to pass data between hooks
   */
  sharedVec4(): any;

  /**
   * Create a Vec4 uniform variable
   */
  uniformVector4(defaultValue?: any): any;

  /**
   * Create a shared Vec4 to pass data between hooks
   */
  varyingVector4(): any;

  /**
   * Create a shared Vec4 to pass data between hooks
   */
  sharedVector4(): any;

  /**
   * Create a Int uniform variable
   */
  uniformInt(defaultValue?: any): any;

  /**
   * Create a shared Int to pass data between hooks
   */
  varyingInt(): any;

  /**
   * Create a shared Int to pass data between hooks
   */
  sharedInt(): any;

  /**
   * Create a IVec2 uniform variable
   */
  uniformIVec2(defaultValue?: any): any;

  /**
   * Create a shared IVec2 to pass data between hooks
   */
  varyingIVec2(): any;

  /**
   * Create a shared IVec2 to pass data between hooks
   */
  sharedIVec2(): any;

  /**
   * Create a IVec2 uniform variable
   */
  uniformIVector2(defaultValue?: any): any;

  /**
   * Create a shared IVec2 to pass data between hooks
   */
  varyingIVector2(): any;

  /**
   * Create a shared IVec2 to pass data between hooks
   */
  sharedIVector2(): any;

  /**
   * Create a IVec3 uniform variable
   */
  uniformIVec3(defaultValue?: any): any;

  /**
   * Create a shared IVec3 to pass data between hooks
   */
  varyingIVec3(): any;

  /**
   * Create a shared IVec3 to pass data between hooks
   */
  sharedIVec3(): any;

  /**
   * Create a IVec3 uniform variable
   */
  uniformIVector3(defaultValue?: any): any;

  /**
   * Create a shared IVec3 to pass data between hooks
   */
  varyingIVector3(): any;

  /**
   * Create a shared IVec3 to pass data between hooks
   */
  sharedIVector3(): any;

  /**
   * Create a IVec4 uniform variable
   */
  uniformIVec4(defaultValue?: any): any;

  /**
   * Create a shared IVec4 to pass data between hooks
   */
  varyingIVec4(): any;

  /**
   * Create a shared IVec4 to pass data between hooks
   */
  sharedIVec4(): any;

  /**
   * Create a IVec4 uniform variable
   */
  uniformIVector4(defaultValue?: any): any;

  /**
   * Create a shared IVec4 to pass data between hooks
   */
  varyingIVector4(): any;

  /**
   * Create a shared IVec4 to pass data between hooks
   */
  sharedIVector4(): any;

  /**
   * Create a Bool uniform variable
   */
  uniformBool(defaultValue?: any): any;

  /**
   * Create a shared Bool to pass data between hooks
   */
  varyingBool(): any;

  /**
   * Create a shared Bool to pass data between hooks
   */
  sharedBool(): any;

  /**
   * Create a BVec2 uniform variable
   */
  uniformBVec2(defaultValue?: any): any;

  /**
   * Create a shared BVec2 to pass data between hooks
   */
  varyingBVec2(): any;

  /**
   * Create a shared BVec2 to pass data between hooks
   */
  sharedBVec2(): any;

  /**
   * Create a BVec2 uniform variable
   */
  uniformBVector2(defaultValue?: any): any;

  /**
   * Create a shared BVec2 to pass data between hooks
   */
  varyingBVector2(): any;

  /**
   * Create a shared BVec2 to pass data between hooks
   */
  sharedBVector2(): any;

  /**
   * Create a BVec3 uniform variable
   */
  uniformBVec3(defaultValue?: any): any;

  /**
   * Create a shared BVec3 to pass data between hooks
   */
  varyingBVec3(): any;

  /**
   * Create a shared BVec3 to pass data between hooks
   */
  sharedBVec3(): any;

  /**
   * Create a BVec3 uniform variable
   */
  uniformBVector3(defaultValue?: any): any;

  /**
   * Create a shared BVec3 to pass data between hooks
   */
  varyingBVector3(): any;

  /**
   * Create a shared BVec3 to pass data between hooks
   */
  sharedBVector3(): any;

  /**
   * Create a BVec4 uniform variable
   */
  uniformBVec4(defaultValue?: any): any;

  /**
   * Create a shared BVec4 to pass data between hooks
   */
  varyingBVec4(): any;

  /**
   * Create a shared BVec4 to pass data between hooks
   */
  sharedBVec4(): any;

  /**
   * Create a BVec4 uniform variable
   */
  uniformBVector4(defaultValue?: any): any;

  /**
   * Create a shared BVec4 to pass data between hooks
   */
  varyingBVector4(): any;

  /**
   * Create a shared BVec4 to pass data between hooks
   */
  sharedBVector4(): any;

  /**
   * Create a Mat2x2 uniform variable
   */
  uniformMat2x2(defaultValue?: any): any;

  /**
   * Create a shared Mat2x2 to pass data between hooks
   */
  varyingMat2x2(): any;

  /**
   * Create a shared Mat2x2 to pass data between hooks
   */
  sharedMat2x2(): any;

  /**
   * Create a Mat3x3 uniform variable
   */
  uniformMat3x3(defaultValue?: any): any;

  /**
   * Create a shared Mat3x3 to pass data between hooks
   */
  varyingMat3x3(): any;

  /**
   * Create a shared Mat3x3 to pass data between hooks
   */
  sharedMat3x3(): any;

  /**
   * Create a Mat4x4 uniform variable
   */
  uniformMat4x4(defaultValue?: any): any;

  /**
   * Create a shared Mat4x4 to pass data between hooks
   */
  varyingMat4x4(): any;

  /**
   * Create a shared Mat4x4 to pass data between hooks
   */
  sharedMat4x4(): any;

  /**
   * Create a Sampler2D uniform variable
   */
  uniformSampler2D(defaultValue?: any): any;

  /**
   * Create a shared Sampler2D to pass data between hooks
   */
  varyingSampler2D(): any;

  /**
   * Create a shared Sampler2D to pass data between hooks
   */
  sharedSampler2D(): any;

  /**
   * Create a Sampler2D uniform variable
   */
  uniformTexture(defaultValue?: any): any;

  /**
   * Create a shared Sampler2D to pass data between hooks
   */
  varyingTexture(): any;

  /**
   * Create a shared Sampler2D to pass data between hooks
   */
  sharedTexture(): any;

  /**
   * Create a Sampler uniform variable
   */
  uniformSampler(defaultValue?: any): any;

  /**
   * Create a shared Sampler to pass data between hooks
   */
  varyingSampler(): any;

  /**
   * Create a shared Sampler to pass data between hooks
   */
  sharedSampler(): any;

  /**
   * GLSL type constructor for float
   */
  float(value: any): any;

  /**
   * GLSL type constructor for vec2
   */
  vec2(value: any): any;

  /**
   * GLSL type constructor for vec3
   */
  vec3(value: any): any;

  /**
   * GLSL type constructor for vec4
   */
  vec4(value: any): any;

  /**
   * GLSL type constructor for int
   */
  int(value: any): any;

  /**
   * GLSL type constructor for ivec2
   */
  ivec2(value: any): any;

  /**
   * GLSL type constructor for ivec3
   */
  ivec3(value: any): any;

  /**
   * GLSL type constructor for ivec4
   */
  ivec4(value: any): any;

  /**
   * GLSL type constructor for bool
   */
  bool(value: any): any;

  /**
   * GLSL type constructor for bvec2
   */
  bvec2(value: any): any;

  /**
   * GLSL type constructor for bvec3
   */
  bvec3(value: any): any;

  /**
   * GLSL type constructor for bvec4
   */
  bvec4(value: any): any;

  /**
   * GLSL type constructor for mat2x2
   */
  mat2x2(value: any): any;

  /**
   * GLSL type constructor for mat3x3
   */
  mat3x3(value: any): any;

  /**
   * GLSL type constructor for mat4x4
   */
  mat4x4(value: any): any;

  /**
   * GLSL type constructor for sampler2D
   */
  sampler2D(value: any): any;

  /**
   * GLSL type constructor for sampler
   */
  sampler(value: any): any;

}

namespace p5 {
  const VIDEO: typeof P5.VIDEO;
  const RGB: typeof P5.RGB;
  const VERSION: typeof P5.VERSION;
  const RGBP3: typeof P5.RGBP3;
  const AUDIO: typeof P5.AUDIO;
  const P2D: typeof P5.P2D;
  const HSB: typeof P5.HSB;
  const deviceOrientation: typeof P5.deviceOrientation;
  const accelerationX: typeof P5.accelerationX;
  const movedX: typeof P5.movedX;
  const accelerationY: typeof P5.accelerationY;
  const accelerationZ: typeof P5.accelerationZ;
  const pAccelerationX: typeof P5.pAccelerationX;
  const pAccelerationY: typeof P5.pAccelerationY;
  const movedY: typeof P5.movedY;
  const keyIsPressed: typeof P5.keyIsPressed;
  const pAccelerationZ: typeof P5.pAccelerationZ;
  const frameCount: typeof P5.frameCount;
  const rotationX: typeof P5.rotationX;
  const deltaTime: typeof P5.deltaTime;
  const rotationY: typeof P5.rotationY;
  const key: typeof P5.key;
  const focused: typeof P5.focused;
  const mouseX: typeof P5.mouseX;
  const rotationZ: typeof P5.rotationZ;
  const pRotationX: typeof P5.pRotationX;
  const pRotationY: typeof P5.pRotationY;
  const mouseY: typeof P5.mouseY;
  const pRotationZ: typeof P5.pRotationZ;
  const pmouseX: typeof P5.pmouseX;
  const code: typeof P5.code;
  const turnAxis: typeof P5.turnAxis;
  const pmouseY: typeof P5.pmouseY;
  const winMouseX: typeof P5.winMouseX;
  const keyCode: typeof P5.keyCode;
  const winMouseY: typeof P5.winMouseY;
  const webglVersion: typeof P5.webglVersion;
  const pwinMouseX: typeof P5.pwinMouseX;
  const displayWidth: typeof P5.displayWidth;
  const displayHeight: typeof P5.displayHeight;
  const pwinMouseY: typeof P5.pwinMouseY;
  const windowWidth: typeof P5.windowWidth;
  const windowHeight: typeof P5.windowHeight;
  const mouseButton: typeof P5.mouseButton;
  const touches: typeof P5.touches;
  const mouseIsPressed: typeof P5.mouseIsPressed;
  const HSL: typeof P5.HSL;
  const P2DP3: typeof P5.P2DP3;
  const HWB: typeof P5.HWB;
  const DEGREES: typeof P5.DEGREES;
  const LAB: typeof P5.LAB;
  const LCH: typeof P5.LCH;
  const OKLAB: typeof P5.OKLAB;
  const WEBGL: typeof P5.WEBGL;
  const OKLCH: typeof P5.OKLCH;
  const RGBA: typeof P5.RGBA;
  const WEBGL2: typeof P5.WEBGL2;
  const WEBGPU: typeof P5.WEBGPU;
  const RADIANS: typeof P5.RADIANS;
  const ARROW: typeof P5.ARROW;
  const SIMPLE: typeof P5.SIMPLE;
  const FULL: typeof P5.FULL;
  const CROSS: typeof P5.CROSS;
  const HAND: typeof P5.HAND;
  const MOVE: typeof P5.MOVE;
  const TEXT: typeof P5.TEXT;
  const WAIT: typeof P5.WAIT;
  const HALF_PI: typeof P5.HALF_PI;
  const worldInputs: typeof P5.worldInputs;
  const combineColors: typeof P5.combineColors;
  const instanceIndex: typeof P5.instanceIndex;
  const pixelInputs: typeof P5.pixelInputs;
  const finalColor: typeof P5.finalColor;
  const filterColor: typeof P5.filterColor;
  const objectInputs: typeof P5.objectInputs;
  const cameraInputs: typeof P5.cameraInputs;
  const PI: typeof P5.PI;
  const QUARTER_PI: typeof P5.QUARTER_PI;
  const TAU: typeof P5.TAU;
  const TWO_PI: typeof P5.TWO_PI;
  const DEG_TO_RAD: typeof P5.DEG_TO_RAD;
  const RAD_TO_DEG: typeof P5.RAD_TO_DEG;
  const CORNER: typeof P5.CORNER;
  const CORNERS: typeof P5.CORNERS;
  const RADIUS: typeof P5.RADIUS;
  const RIGHT: typeof P5.RIGHT;
  const LEFT: typeof P5.LEFT;
  const CENTER: typeof P5.CENTER;
  const TOP: typeof P5.TOP;
  const BOTTOM: typeof P5.BOTTOM;
  const BASELINE: typeof P5.BASELINE;
  const POINTS: typeof P5.POINTS;
  const LINES: typeof P5.LINES;
  const drawingContext: typeof P5.drawingContext;
  const LINE_STRIP: typeof P5.LINE_STRIP;
  const LINE_LOOP: typeof P5.LINE_LOOP;
  const TRIANGLES: typeof P5.TRIANGLES;
  const TRIANGLE_FAN: typeof P5.TRIANGLE_FAN;
  const TRIANGLE_STRIP: typeof P5.TRIANGLE_STRIP;
  let disableFriendlyErrors: typeof P5.disableFriendlyErrors;
  const QUADS: typeof P5.QUADS;
  const QUAD_STRIP: typeof P5.QUAD_STRIP;
  const TESS: typeof P5.TESS;
  const EMPTY_PATH: typeof P5.EMPTY_PATH;
  const PATH: typeof P5.PATH;
  const CLOSE: typeof P5.CLOSE;
  const OPEN: typeof P5.OPEN;
  const CHORD: typeof P5.CHORD;
  const PIE: typeof P5.PIE;
  const PROJECT: typeof P5.PROJECT;
  const SQUARE: typeof P5.SQUARE;
  const ROUND: typeof P5.ROUND;
  const BEVEL: typeof P5.BEVEL;
  const MITER: typeof P5.MITER;
  const AUTO: typeof P5.AUTO;
  const ALT: typeof P5.ALT;
  const BACKSPACE: typeof P5.BACKSPACE;
  const CONTROL: typeof P5.CONTROL;
  const DELETE: typeof P5.DELETE;
  const DOWN_ARROW: typeof P5.DOWN_ARROW;
  const ENTER: typeof P5.ENTER;
  const ESCAPE: typeof P5.ESCAPE;
  const LEFT_ARROW: typeof P5.LEFT_ARROW;
  const OPTION: typeof P5.OPTION;
  const RETURN: typeof P5.RETURN;
  const RIGHT_ARROW: typeof P5.RIGHT_ARROW;
  const SHIFT: typeof P5.SHIFT;
  const TAB: typeof P5.TAB;
  const UP_ARROW: typeof P5.UP_ARROW;
  const BLEND: typeof P5.BLEND;
  const REMOVE: typeof P5.REMOVE;
  const ADD: typeof P5.ADD;
  const DARKEST: typeof P5.DARKEST;
  const LIGHTEST: typeof P5.LIGHTEST;
  const DIFFERENCE: typeof P5.DIFFERENCE;
  const SUBTRACT: typeof P5.SUBTRACT;
  const EXCLUSION: typeof P5.EXCLUSION;
  const pixels: typeof P5.pixels;
  const MULTIPLY: typeof P5.MULTIPLY;
  const SCREEN: typeof P5.SCREEN;
  const REPLACE: typeof P5.REPLACE;
  const OVERLAY: typeof P5.OVERLAY;
  const HARD_LIGHT: typeof P5.HARD_LIGHT;
  const SOFT_LIGHT: typeof P5.SOFT_LIGHT;
  const DODGE: typeof P5.DODGE;
  const BURN: typeof P5.BURN;
  const THRESHOLD: typeof P5.THRESHOLD;
  const GRAY: typeof P5.GRAY;
  const OPAQUE: typeof P5.OPAQUE;
  const INVERT: typeof P5.INVERT;
  const POSTERIZE: typeof P5.POSTERIZE;
  const DILATE: typeof P5.DILATE;
  const ERODE: typeof P5.ERODE;
  const BLUR: typeof P5.BLUR;
  const NORMAL: typeof P5.NORMAL;
  const ITALIC: typeof P5.ITALIC;
  const BOLD: typeof P5.BOLD;
  const BOLDITALIC: typeof P5.BOLDITALIC;
  const CHAR: typeof P5.CHAR;
  const WORD: typeof P5.WORD;
  const LINEAR: typeof P5.LINEAR;
  const QUADRATIC: typeof P5.QUADRATIC;
  const BEZIER: typeof P5.BEZIER;
  const CURVE: typeof P5.CURVE;
  const STROKE: typeof P5.STROKE;
  const FILL: typeof P5.FILL;
  const TEXTURE: typeof P5.TEXTURE;
  const IMMEDIATE: typeof P5.IMMEDIATE;
  const IMAGE: typeof P5.IMAGE;
  const NEAREST: typeof P5.NEAREST;
  const REPEAT: typeof P5.REPEAT;
  const CLAMP: typeof P5.CLAMP;
  const MIRROR: typeof P5.MIRROR;
  const FLAT: typeof P5.FLAT;
  const SMOOTH: typeof P5.SMOOTH;
  const LANDSCAPE: typeof P5.LANDSCAPE;
  const PORTRAIT: typeof P5.PORTRAIT;
  const GRID: typeof P5.GRID;
  const AXES: typeof P5.AXES;
  const LABEL: typeof P5.LABEL;
  const FALLBACK: typeof P5.FALLBACK;
  const CONTAIN: typeof P5.CONTAIN;
  const COVER: typeof P5.COVER;
  const width: typeof P5.width;
  const height: typeof P5.height;
  const UNSIGNED_BYTE: typeof P5.UNSIGNED_BYTE;
  const UNSIGNED_INT: typeof P5.UNSIGNED_INT;
  const FLOAT: typeof P5.FLOAT;
  const HALF_FLOAT: typeof P5.HALF_FLOAT;
  const INCLUDE: typeof P5.INCLUDE;
  const EXCLUDE: typeof P5.EXCLUDE;
  const index: typeof P5.index;

  interface WorldInputsHook {
    position: any;
    normal: any;
    texCoord: any;
    color: any;
    begin(): void;
    end(): void;
  }

  interface CombineColorsHook {
    baseColor: any;
    diffuse: any;
    ambientColor: any;
    ambient: any;
    specularColor: any;
    specular: any;
    emissive: any;
    opacity: any;
    begin(): void;
    end(): void;
    set(color: any): any;
  }

  interface PixelInputsHook {
    normal: any;
    texCoord: any;
    ambientLight: any;
    ambientMaterial: any;
    specularMaterial: any;
    emissiveMaterial: any;
    color: any;
    shininess: any;
    metalness: any;
    tangent: any;
    center: any;
    position: any;
    strokeWeight: any;
    begin(): void;
    end(): void;
  }

  interface FinalColorHook {
    color: any;
    texCoord: any;
    begin(): void;
    end(): void;
    set(color: any): any;
  }

  interface FilterColorHook {
    texCoord: any;
    canvasSize: any;
    texelSize: any;
    canvasContent: any;
    begin(): void;
    end(): void;
    set(color: any): any;
  }

  interface ObjectInputsHook {
    position: any;
    normal: any;
    texCoord: any;
    color: any;
    begin(): void;
    end(): void;
  }

  interface CameraInputsHook {
    position: any;
    normal: any;
    texCoord: any;
    color: any;
    begin(): void;
    end(): void;
  }

  type File = P5.File;
  const File: typeof P5.File;
  type TableRow = P5.TableRow;
  const TableRow: typeof P5.TableRow;
  type StorageBuffer = P5.StorageBuffer;
  const StorageBuffer: typeof P5.StorageBuffer;
  type Graphics = P5.Graphics;
  const Graphics: typeof P5.__Graphics;
  type Color = P5.Color;
  const Color: typeof P5.Color;
  type Framebuffer = P5.Framebuffer;
  const Framebuffer: typeof P5.Framebuffer;
  type XML = P5.XML;
  const XML: typeof P5.XML;
  type Table = P5.Table;
  const Table: typeof P5.Table;
  type Font = P5.Font;
  const Font: typeof P5.Font;
  type Shader = P5.Shader;
  const Shader: typeof P5.Shader;
  type PrintWriter = P5.PrintWriter;
  const PrintWriter: typeof P5.PrintWriter;
  type MediaElement = P5.MediaElement;
  const MediaElement: typeof P5.MediaElement;
  type Geometry = P5.Geometry;
  const Geometry: typeof P5.Geometry;
  type Image = P5.Image;
  const Image: typeof P5.Image;
  type Element = P5.Element;
  const Element: typeof P5.Element;
  type Camera = P5.Camera;
  const Camera: typeof P5.Camera;
  type Vector = P5.Vector;
  const Vector: typeof P5.Vector;
  type Renderer = P5.Renderer;
  const Renderer: typeof P5.Renderer;
  type Renderer2D = P5.Renderer2D;
  const Renderer2D: typeof P5.Renderer2D;
  type RendererGL = P5.RendererGL;
  const RendererGL: typeof P5.RendererGL;
  type FramebufferTexture = P5.FramebufferTexture;
  const FramebufferTexture: typeof P5.FramebufferTexture;
  type Texture = P5.Texture;
  const Texture: typeof P5.Texture;
  type Quat = P5.Quat;
  const Quat: typeof P5.Quat;
}

const VIDEO: typeof P5.VIDEO;

const RGB: typeof P5.RGB;

/**
 * Version of this p5.js.
 */
const VERSION: typeof P5.VERSION;

const RGBP3: typeof P5.RGBP3;

const AUDIO: typeof P5.AUDIO;

/**
 * The default, two-dimensional renderer in p5.js.
 * 
 * Use this when calling <a href="#/p5/createCanvas"> (for example,
 * `createCanvas(400, 400, P2D)`) to specify a 2D context.
 */
const P2D: typeof P5.P2D;

/**
 * HSB (hue, saturation, brightness) is a type of color model.
 * You can learn more about it at
 * <a href="https://learnui.design/blog/the-hsb-color-system-practicioners-primer.html">HSB</a>.
 */
const HSB: typeof P5.HSB;

/**
 * The system variable deviceOrientation always contains the orientation of
 * the device. The value of this variable will either be set 'landscape'
 * or 'portrait'. If no data is available it will be set to 'undefined'.
 * either LANDSCAPE or PORTRAIT.
 */
const deviceOrientation: typeof P5.deviceOrientation;

/**
 * The system variable accelerationX always contains the acceleration of the
 * device along the x axis. Value is represented as meters per second squared.
 */
const accelerationX: typeof P5.accelerationX;

/**
 * A `Number` system variable that tracks the mouse's horizontal movement.
 * 
 * `movedX` tracks how many pixels the mouse moves left or right between
 * frames. `movedX` will have a negative value if the mouse moves left between
 * frames and a positive value if it moves right. `movedX` can be calculated
 * as `mouseX - pmouseX`.
 * 
 * Note: `movedX` continues updating even when
 * <a href="#/p5/requestPointerLock">requestPointerLock()</a> is active.
 */
const movedX: typeof P5.movedX;

/**
 * The system variable accelerationY always contains the acceleration of the
 * device along the y axis. Value is represented as meters per second squared.
 */
const accelerationY: typeof P5.accelerationY;

/**
 * The system variable accelerationZ always contains the acceleration of the
 * device along the z axis. Value is represented as meters per second squared.
 */
const accelerationZ: typeof P5.accelerationZ;

/**
 * The system variable pAccelerationX always contains the acceleration of the
 * device along the x axis in the frame previous to the current frame. Value
 * is represented as meters per second squared.
 */
const pAccelerationX: typeof P5.pAccelerationX;

/**
 * The system variable pAccelerationY always contains the acceleration of the
 * device along the y axis in the frame previous to the current frame. Value
 * is represented as meters per second squared.
 */
const pAccelerationY: typeof P5.pAccelerationY;

/**
 * A `Number` system variable that tracks the mouse's vertical movement.
 * 
 * `movedY` tracks how many pixels the mouse moves up or down between
 * frames. `movedY` will have a negative value if the mouse moves up between
 * frames and a positive value if it moves down. `movedY` can be calculated
 * as `mouseY - pmouseY`.
 * 
 * Note: `movedY` continues updating even when
 * <a href="#/p5/requestPointerLock">requestPointerLock()</a> is active.
 */
const movedY: typeof P5.movedY;

/**
 * A `Boolean` system variable that's `true` if any key is currently pressed
 * and `false` if not.
 */
const keyIsPressed: typeof P5.keyIsPressed;

/**
 * The system variable pAccelerationZ always contains the acceleration of the
 * device along the z axis in the frame previous to the current frame. Value
 * is represented as meters per second squared.
 */
const pAccelerationZ: typeof P5.pAccelerationZ;

/**
 * A `Number` variable that tracks the number of frames drawn since the sketch
 * started.
 * 
 * `frameCount`'s value is 0 inside <a href="#/p5/setup">setup()</a>. It
 * increments by 1 each time the code in <a href="#/p5/draw">draw()</a>
 * finishes executing.
 */
const frameCount: typeof P5.frameCount;

/**
 * The system variable rotationX always contains the rotation of the
 * device along the x axis. If the sketch <a href="#/p5/angleMode">
 * angleMode()</a> is set to DEGREES, the value will be -180 to 180. If
 * it is set to RADIANS, the value will be -PI to PI.
 * 
 * Note: The order the rotations are called is important, ie. if used
 * together, it must be called in the order Z-X-Y or there might be
 * unexpected behaviour.
 */
const rotationX: typeof P5.rotationX;

/**
 * A `Number` variable that tracks the number of milliseconds it took to draw
 * the last frame.
 * 
 * `deltaTime` contains the amount of time it took
 * <a href="#/p5/draw">draw()</a> to execute during the previous frame. It's
 * useful for simulating physics.
 */
const deltaTime: typeof P5.deltaTime;

/**
 * The system variable rotationY always contains the rotation of the
 * device along the y axis. If the sketch <a href="#/p5/angleMode">
 * angleMode()</a> is set to DEGREES, the value will be -90 to 90. If
 * it is set to RADIANS, the value will be -PI/2 to PI/2.
 * 
 * Note: The order the rotations are called is important, ie. if used
 * together, it must be called in the order Z-X-Y or there might be
 * unexpected behaviour.
 */
const rotationY: typeof P5.rotationY;

/**
 * A `String` system variable that contains the value of the last key typed.
 * 
 * The key variable is helpful for checking whether an
 * <a href="https://en.wikipedia.org/wiki/ASCII#Printable_characters" target="_blank">ASCII</a>
 * key has been typed. For example, the expression `key === "a"` evaluates to
 * `true` if the `a` key was typed and `false` if not. `key` doesn’t update
 * for special keys such as `LEFT_ARROW` and `ENTER`. Use keyCode instead for
 * special keys. The <a href="#/p5/keyIsDown">keyIsDown()</a> function should
 * be used to check for multiple different key presses at the same time.
 */
const key: typeof P5.key;

/**
 * A `Boolean` variable that's `true` if the browser is focused and `false` if
 * not.
 * 
 * Note: The browser window can only receive input if it's focused.
 */
const focused: typeof P5.focused;

/**
 * A `Number` system variable that tracks the mouse's horizontal position.
 * 
 * `mouseX` keeps track of the mouse's position relative to the
 * top-left corner of the canvas. For example, if the mouse is 50 pixels from
 * the left edge of the canvas, then `mouseX` will be 50.
 * 
 * If touch is used instead of the mouse, then `mouseX` will hold the
 * x-coordinate of the most recent touch point.
 */
const mouseX: typeof P5.mouseX;

/**
 * The system variable rotationZ always contains the rotation of the
 * device along the z axis. If the sketch <a href="#/p5/angleMode">
 * angleMode()</a> is set to DEGREES, the value will be 0 to 360. If
 * it is set to RADIANS, the value will be 0 to 2*PI.
 * 
 * Unlike rotationX and rotationY, this variable is available for devices
 * with a built-in compass only.
 * 
 * Note: The order the rotations are called is important, ie. if used
 * together, it must be called in the order Z-X-Y or there might be
 * unexpected behaviour.
 */
const rotationZ: typeof P5.rotationZ;

/**
 * The system variable pRotationX always contains the rotation of the
 * device along the x axis in the frame previous to the current frame.
 * If the sketch <a href="#/p5/angleMode"> angleMode()</a> is set to DEGREES,
 * the value will be -180 to 180. If it is set to RADIANS, the value will
 * be -PI to PI.
 * 
 * pRotationX can also be used with rotationX to determine the rotate
 * direction of the device along the X-axis.
 */
const pRotationX: typeof P5.pRotationX;

/**
 * The system variable pRotationY always contains the rotation of the
 * device along the y axis in the frame previous to the current frame.
 * If the sketch <a href="#/p5/angleMode"> angleMode()</a> is set to DEGREES,
 * the value will be -90 to 90. If it is set to RADIANS, the value will
 * be -PI/2 to PI/2.
 * 
 * pRotationY can also be used with rotationY to determine the rotate
 * direction of the device along the Y-axis.
 */
const pRotationY: typeof P5.pRotationY;

/**
 * A `Number` system variable that tracks the mouse's vertical position.
 * 
 * `mouseY` keeps track of the mouse's position relative to the
 * top-left corner of the canvas. For example, if the mouse is 50 pixels from
 * the top edge of the canvas, then `mouseY` will be 50.
 * 
 * If touch is used instead of the mouse, then `mouseY` will hold the
 * y-coordinate of the most recent touch point.
 */
const mouseY: typeof P5.mouseY;

/**
 * The system variable pRotationZ always contains the rotation of the
 * device along the z axis in the frame previous to the current frame.
 * If the sketch <a href="#/p5/angleMode"> angleMode()</a> is set to DEGREES,
 * the value will be 0 to 360. If it is set to RADIANS, the value will
 * be 0 to 2*PI.
 * 
 * pRotationZ can also be used with rotationZ to determine the rotate
 * direction of the device along the Z-axis.
 */
const pRotationZ: typeof P5.pRotationZ;

/**
 * A `Number` system variable that tracks the mouse's previous horizontal
 * position.
 * 
 * `pmouseX` keeps track of the mouse's position relative to the
 * top-left corner of the canvas. Its value is
 * <a href="#/p5/mouseX">mouseX</a> from the previous frame. For example, if
 * the mouse was 50 pixels from the left edge of the canvas during the last
 * frame, then `pmouseX` will be 50.
 * 
 * If touch is used instead of the mouse, then `pmouseX` will hold the
 * x-coordinate of the last touch point.
 * 
 * Note: `pmouseX` is reset to the current <a href="#/p5/mouseX">mouseX</a>
 * value at the start of each touch event.
 */
const pmouseX: typeof P5.pmouseX;

/**
 * The `code` property represents a physical key on the keyboard (as opposed
 * to the character generated by pressing the key). In other words, this
 * property returns a value that isn't altered by keyboard layout or the state
 * of the modifier keys.
 * 
 * This property is useful when you want to handle keys based on their
 * physical positions on the input device rather than the characters associated
 * with those keys;
 * 
 * Unlike <a href="#/p5/key">key</a>, the `code` property differentiates between
 * physical keys that generate the same character—for example, `CtrlLeft` and
 * `CtrlRight`—so each can be handled independently.
 * Here's the MDN docs for <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code" target="_blank">KeyboardEvent.code</a>
 * 
 * Pressing the key physically labeled “A” always yields `KeyA`, regardless
 * of the current keyboard layout (QWERTY, Dvorak, AZERTY, etc.) or the character
 * that appears in a text field.
 * 
 * The code property returns a plain string (e.g., 'ArrowRight'). You can
 * compare it directly with string literals:
 * 
 * `if (keyIsDown(RIGHT_ARROW)) {
 * // …
 * }
 * // The line above is equivalent to:
 * if (code === 'ArrowRight') {
 * // …
 * }
 * if (key  === 'ArrowRight') {
 * // …
 * }`The system variables `BACKSPACE`, `DELETE`, `ENTER`, `RETURN`, `TAB`,
 * `ESCAPE`, `SHIFT`, `CONTROL`, `OPTION`, `ALT`, `UP_ARROW`, `DOWN_ARROW`,
 * `LEFT_ARROW`, and `RIGHT_ARROW` are all helpful shorthands the key codes of
 * special keys.
 * These are simply shorthands for the same string values:
 * 
 * `if (code === RIGHT_ARROW) {
 * // ..
 * }`<p>The table below summarizes how the main keyboard-related system variables changed between p5.js 1.x and 2.x.</p>
 * <table>
 * <thead>
 * <tr>
 * <th>Variable</th>
 * <th>p5.js 1.x </th>
 * <th>p5.js 2.x </th>
 * </tr>
 * </thead>
 * <tbody>
 * <tr>
 * <td><code>key</code></td>
 * <td>Text string (e.g., <code>"ArrowUp"</code>).</td>
 * <td>Text string (e.g., <code>"ArrowUp"</code>, <code>"f"</code> or <code>"F"</code>).</td>
 * </tr>
 * <tr>
 * <td><code>code</code></td>
 * <td><em>Not supported.</em></td>
 * <td>Text String (e.g., <code>"ArrowUp"</code>, <code>"KeyF"</code>).</td>
 * </tr>
 * <tr>
 * <td><code>keyCode</code></td>
 * <td>Number (e.g., <code>70</code>).</td>
 * <td>Number (unchanged; e.g., <code>70</code>).</td>
 * </tr>
 * <tr>
 * <td>System variables (<code>BACKSPACE</code>, <code>UP_ARROW</code>, …)</td>
 * <td>Number</td>
 * <td>Text String (e.g., <code>"ArrowUp"</code>).</td>
 * </tr>
 * </tbody>
 * </table>
 */
const code: typeof P5.code;

/**
 * When a device is rotated, the axis that triggers the <a href="#/p5/deviceTurned">deviceTurned()</a>
 * method is stored in the turnAxis variable. The turnAxis variable is only defined within
 * the scope of deviceTurned().
 */
const turnAxis: typeof P5.turnAxis;

/**
 * A `Number` system variable that tracks the mouse's previous vertical
 * position.
 * 
 * `pmouseY` keeps track of the mouse's position relative to the
 * top-left corner of the canvas. Its value is
 * <a href="#/p5/mouseY">mouseY</a> from the previous frame. For example, if
 * the mouse was 50 pixels from the top edge of the canvas during the last
 * frame, then `pmouseY` will be 50.
 * 
 * If touch is used instead of the mouse, then `pmouseY` will hold the
 * y-coordinate of the last touch point.
 * 
 * Note: `pmouseY` is reset to the current <a href="#/p5/mouseY">mouseY</a>
 * value at the start of each touch event.
 */
const pmouseY: typeof P5.pmouseY;

/**
 * A `Number` variable that tracks the mouse's horizontal position within the
 * browser.
 * 
 * `winMouseX` keeps track of the mouse's position relative to the top-left
 * corner of the browser window. For example, if the mouse is 50 pixels from
 * the left edge of the browser, then `winMouseX` will be 50.
 * 
 * On a touchscreen device, `winMouseX` will hold the x-coordinate of the most
 * recent touch point.
 * 
 * Note: Use <a href="#/p5/mouseX">mouseX</a> to track the mouse’s
 * x-coordinate within the canvas.
 */
const winMouseX: typeof P5.winMouseX;

/**
 * A `Number` system variable that contains the code of the last key pressed.
 * 
 * Every key has a numeric key code. For example, the letter `a` key has the key code 65.
 * Use this key code to determine which key was pressed by comparing it to the numeric value
 * of the desired key.
 * 
 * For example, to detect when the Enter key is pressed:
 * 
 * `if (keyCode === 13) { // Enter key
 * // Code to run if the Enter key was pressed.
 * }`Alternatively, you can use the <a href="#/p5/key">key</a> function to directly compare the key value:
 * 
 * `if (key === 'Enter') { // Enter key
 * // Code to run if the Enter key was pressed.
 * }`Use the following numeric codes for the arrow keys:
 * 
 * Up Arrow: 38
 * Down Arrow: 40
 * Left Arrow: 37
 * Right Arrow: 39
 * 
 * More key codes can be found at websites such as
 * <a href="http://keycode.info/">keycode.info</a>.
 */
const keyCode: typeof P5.keyCode;

/**
 * A `Number` variable that tracks the mouse's vertical position within the
 * browser.
 * 
 * `winMouseY` keeps track of the mouse's position relative to the top-left
 * corner of the browser window. For example, if the mouse is 50 pixels from
 * the top edge of the browser, then `winMouseY` will be 50.
 * 
 * On a touchscreen device, `winMouseY` will hold the y-coordinate of the most
 * recent touch point.
 * 
 * Note: Use <a href="#/p5/mouseY">mouseY</a> to track the mouse’s
 * y-coordinate within the canvas.
 */
const winMouseY: typeof P5.winMouseY;

/**
 * A `String` variable with the WebGL version in use.
 * 
 * `webglVersion`'s value equals one of the following string constants:
 * 
 * - `WEBGL2` whose value is `'webgl2'`,
 * 
 * - `WEBGL` whose value is `'webgl'`, or
 * 
 * - `P2D` whose value is `'p2d'`. This is the default for 2D sketches.
 * 
 * - `P2DP3` whose value is `'p2d-p3'` (used for P3 2D sketches, if available).
 * 
 * See <a href="#/p5/setAttributes">setAttributes()</a> for ways to set the
 * WebGL version.
 */
const webglVersion: typeof P5.webglVersion;

/**
 * A `Number` variable that tracks the mouse's previous horizontal position
 * within the browser.
 * 
 * `pwinMouseX` keeps track of the mouse's position relative to the top-left
 * corner of the browser window. Its value is
 * <a href="#/p5/winMouseX">winMouseX</a> from the previous frame. For
 * example, if the mouse was 50 pixels from
 * the left edge of the browser during the last frame, then `pwinMouseX` will
 * be 50.
 * 
 * On a touchscreen device, `pwinMouseX` will hold the x-coordinate of the most
 * recent touch point. `pwinMouseX` is reset to the current
 * <a href="#/p5/winMouseX">winMouseX</a> value at the start of each touch
 * event.
 * 
 * Note: Use <a href="#/p5/pmouseX">pmouseX</a> to track the mouse’s previous
 * x-coordinate within the canvas.
 */
const pwinMouseX: typeof P5.pwinMouseX;

/**
 * A `Number` variable that stores the width of the screen display.
 * 
 * `displayWidth` is useful for running full-screen programs. Its value
 * depends on the current <a href="#/p5/pixelDensity">pixelDensity()</a>.
 * 
 * Note: The actual screen width can be computed as
 * `displayWidth * pixelDensity()`.
 */
const displayWidth: typeof P5.displayWidth;

/**
 * A `Number` variable that stores the height of the screen display.
 * 
 * `displayHeight` is useful for running full-screen programs. Its value
 * depends on the current <a href="#/p5/pixelDensity">pixelDensity()</a>.
 * 
 * Note: The actual screen height can be computed as
 * `displayHeight * pixelDensity()`.
 */
const displayHeight: typeof P5.displayHeight;

/**
 * A `Number` variable that tracks the mouse's previous vertical position
 * within the browser.
 * 
 * `pwinMouseY` keeps track of the mouse's position relative to the top-left
 * corner of the browser window. Its value is
 * <a href="#/p5/winMouseY">winMouseY</a> from the previous frame. For
 * example, if the mouse was 50 pixels from
 * the top edge of the browser during the last frame, then `pwinMouseY` will
 * be 50.
 * 
 * On a touchscreen device, `pwinMouseY` will hold the y-coordinate of the most
 * recent touch point. `pwinMouseY` is reset to the current
 * <a href="#/p5/winMouseY">winMouseY</a> value at the start of each touch
 * event.
 * 
 * Note: Use <a href="#/p5/pmouseY">pmouseY</a> to track the mouse’s previous
 * y-coordinate within the canvas.
 */
const pwinMouseY: typeof P5.pwinMouseY;

/**
 * A `Number` variable that stores the width of the browser's viewport.
 * 
 * The <a href="https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport" target="_blank">layout viewport</a>
 * is the area within the browser that's available for drawing.
 */
const windowWidth: typeof P5.windowWidth;

/**
 * A `Number` variable that stores the height of the browser's viewport.
 * 
 * The <a href="https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport" target="_blank">layout viewport</a>
 * is the area within the browser that's available for drawing.
 */
const windowHeight: typeof P5.windowHeight;

/**
 * An object that tracks the current state of mouse buttons, showing which
 * buttons are pressed at any given moment.
 * 
 * The `mouseButton` object has three properties:
 * 
 * - `left`: A boolean indicating whether the left mouse button is pressed.
 * 
 * - `right`: A boolean indicating whether the right mouse button is pressed.
 * 
 * - `center`: A boolean indicating whether the middle mouse button (scroll wheel button) is pressed.
 * 
 * Note: Different browsers may track `mouseButton` differently. See
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons" target="_blank">MDN</a>
 * for more information.
 */
const mouseButton: typeof P5.mouseButton;

/**
 * An `Array` of all the current touch points on a touchscreen device.
 * 
 * The `touches` array is empty by default. When the user touches their
 * screen, a new touch point is tracked and added to the array. Touch points
 * are `Objects` with the following properties:
 * 
 * `// Iterate over the touches array.
 * for (let touch of touches) {
 * // x-coordinate relative to the top-left
 * // corner of the canvas.
 * console.log(touch.x);
 * 
 * // y-coordinate relative to the top-left
 * // corner of the canvas.
 * console.log(touch.y);
 * 
 * // x-coordinate relative to the top-left
 * // corner of the browser.
 * console.log(touch.winX);
 * 
 * // y-coordinate relative to the top-left
 * // corner of the browser.
 * console.log(touch.winY);
 * 
 * // ID number
 * console.log(touch.id);
 * }`
 */
const touches: typeof P5.touches;

/**
 * A `Boolean` system variable that's `true` if the mouse is pressed and
 * `false` if not.
 */
const mouseIsPressed: typeof P5.mouseIsPressed;

const HSL: typeof P5.HSL;

/**
 * An expanded color space (P3) variant of the default, two-dimensional renderer.
 * 
 * When available, this mode can allow for extended color ranges and more
 * dynamic color representation. Use it similarly to `P2D`:
 * `createCanvas(400, 400, P2DP3)`.
 */
const P2DP3: typeof P5.P2DP3;

const HWB: typeof P5.HWB;

/**
 * A `String` constant that's used to set the
 * <a href="#/p5/angleMode">angleMode()</a>.
 * 
 * By default, functions such as <a href="#/p5/rotate">rotate()</a> and
 * <a href="#/p5/sin">sin()</a> expect angles measured in units of radians.
 * Calling `angleMode(DEGREES)` ensures that angles are measured in units of
 * degrees.
 * 
 * Note: `TWO_PI` radians equals 360˚.
 */
const DEGREES: typeof P5.DEGREES;

const LAB: typeof P5.LAB;

const LCH: typeof P5.LCH;

const OKLAB: typeof P5.OKLAB;

/**
 * One of the two render modes in p5.js, used for computationally intensive tasks like 3D rendering and shaders.
 * 
 * `WEBGL` differs from the default <a href="/reference/p5/P2D">`P2D`</a> renderer in the following ways:
 * 
 * - Coordinate System - When drawing in `WEBGL` mode, the origin point (0,0,0) is located at the center of the screen, not the top-left corner. See <a href="https://p5js.org/tutorials/coordinates-and-transformations/">the tutorial page about coordinates and transformations</a>.
 * 
 * - 3D Shapes - `WEBGL` mode can be used to draw 3-dimensional shapes like <a href="#/p5/box">box()</a>, <a href="#/p5/sphere">sphere()</a>, <a href="#/p5/cone">cone()</a>, and <a href="https://p5js.org/reference/#3D%20Primitives">more</a>. See <a href="https://p5js.org/tutorials/custom-geometry/">the tutorial page about custom geometry</a> to make more complex objects.
 * 
 * - Shape Detail - When drawing in `WEBGL` mode, you can specify how smooth curves should be drawn by using a `detail` parameter. See <a href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#3d-primitives-shapes">the wiki section about shapes</a> for a more information and an example.
 * 
 * - Textures - A texture is like a skin that wraps onto a shape. See <a href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#textures">the wiki section about textures</a> for examples of mapping images onto surfaces with textures.
 * 
 * - Materials and Lighting - `WEBGL` offers different types of lights like <a href="#/p5/ambientLight">ambientLight()</a> to place around a scene. Materials like <a href="#/p5/specularMaterial">specularMaterial()</a> reflect the lighting to convey shape and depth. See <a href="https://p5js.org/tutorials/lights-camera-materials/">the tutorial page for styling and appearance</a> to experiment with different combinations.
 * 
 * - Camera - The viewport of a `WEBGL` sketch can be adjusted by changing camera attributes. See <a href="https://p5js.org/tutorials/lights-camera-materials#camera-and-view">the tutorial page section about cameras</a> for an explanation of camera controls.
 * 
 * - Text - `WEBGL` requires opentype/truetype font files to be preloaded using <a href="#/p5/loadFont">loadFont()</a>. See <a href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5#text">the wiki section about text</a> for details, along with a workaround.
 * 
 * - Shaders - Shaders are hardware accelerated programs that can be used for a variety of effects and graphics. See the <a href="https://p5js.org/tutorials/intro-to-shaders/">introduction to shaders</a> to get started with shaders in p5.js.
 * 
 * - Graphics Acceleration - `WEBGL` mode uses the graphics card instead of the CPU, so it may help boost the performance of your sketch (example: drawing more shapes on the screen at once).
 * 
 * To learn more about WEBGL mode, check out <a href="https://p5js.org/tutorials/#webgl">all the interactive WEBGL tutorials</a> in the "Tutorials" section of this website, or read the wiki article <a href="https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5">"Getting started with WebGL in p5"</a>.
 */
const WEBGL: typeof P5.WEBGL;

const OKLCH: typeof P5.OKLCH;

const RGBA: typeof P5.RGBA;

/**
 * One of the two possible values of a WebGL canvas (either WEBGL or WEBGL2),
 * which can be used to determine what capabilities the rendering environment
 * has.
 */
const WEBGL2: typeof P5.WEBGL2;

/**
 * A constant used for creating a WebGPU rendering context
 */
const WEBGPU: typeof P5.WEBGPU;

/**
 * A `String` constant that's used to set the
 * <a href="#/p5/angleMode">angleMode()</a>.
 * 
 * By default, functions such as <a href="#/p5/rotate">rotate()</a> and
 * <a href="#/p5/sin">sin()</a> expect angles measured in units of radians.
 * Calling `angleMode(RADIANS)` ensures that angles are measured in units of
 * radians. Doing so can be useful if the
 * <a href="#/p5/angleMode">angleMode()</a> has been set to
 * <a href="#/p5/DEGREES">DEGREES</a>.
 * 
 * Note: `TWO_PI` radians equals 360˚.
 */
const RADIANS: typeof P5.RADIANS;

const ARROW: typeof P5.ARROW;

const SIMPLE: typeof P5.SIMPLE;

const FULL: typeof P5.FULL;

const CROSS: typeof P5.CROSS;

const HAND: typeof P5.HAND;

const MOVE: typeof P5.MOVE;

const TEXT: typeof P5.TEXT;

const WAIT: typeof P5.WAIT;

/**
 * A `Number` constant that's approximately 1.5708.
 * 
 * `HALF_PI` is half the value of the mathematical constant π. It's useful for
 * many tasks that involve rotation and oscillation. For example, calling
 * `rotate(HALF_PI)` rotates the coordinate system `HALF_PI` radians, which is
 * a quarter turn (90˚).
 * 
 * Note: `TWO_PI` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI`
 * radians equals 90˚, and `QUARTER_PI` radians equals 45˚.
 */
const HALF_PI: typeof P5.HALF_PI;

/**
 * A shader hook block that modifies the world-space properties of each vertex in a shader. This hook can be used inside <a href="#/p5/buildColorShader">`buildColorShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to customize vertex positions, normals, texture coordinates, and colors before rendering. Modifications happen between the `.begin()` and `.end()` methods of the hook. "World space" refers to the coordinate system of the 3D scene, before any camera or projection transformations are applied.
 * 
 * `worldInputs` has the following properties:
 * 
 * - `position`: a three-component vector representing the original position of the vertex.
 * 
 * - `normal`: a three-component vector representing the direction the surface is facing.
 * 
 * - `texCoord`: a two-component vector representing the texture coordinates.
 * 
 * - `color`: a four-component vector representing the color of the vertex (red, green, blue, alpha).
 * 
 * This hook is available in:
 * 
 * - <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a>
 * 
 * - <a href="#/p5/buildNormalShader">`buildNormalShader()`</a>
 * 
 * - <a href="#/p5/buildColorShader">`buildColorShader()`</a>
 * 
 * - <a href="#/p5/buildStrokeShader">`buildStrokeShader()`</a>
 */
const worldInputs: typeof P5.worldInputs;

/**
 * A shader hook block that modifies how color components are combined in the fragment shader. This hook can be used inside <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to control the final color output of a material. Modifications happen between the `.begin()` and `.end()` methods of the hook.
 * 
 * `combineColors` has the following properties:
 * 
 * - `baseColor`: a three-component vector representing the base color (red, green, blue).
 * 
 * - `diffuse`: a single number representing the diffuse reflection.
 * 
 * - `ambientColor`: a three-component vector representing the ambient color.
 * 
 * - `ambient`: a single number representing the ambient reflection.
 * 
 * - `specularColor`: a three-component vector representing the specular color.
 * 
 * - `specular`: a single number representing the specular reflection.
 * 
 * - `emissive`: a three-component vector representing the emissive color.
 * 
 * - `opacity`: a single number representing the opacity.
 * 
 * Call `.set()` on the hook with a vector with four components (red, green, blue, alpha) for the final color.
 * 
 * This hook is available in:
 * 
 * - <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a>
 */
const combineColors: typeof P5.combineColors;

/**
 * Returns the index of the current instance when drawing multiple copies of a
 * shape with <a href="#/p5/model">`model(count)`</a>. The first instance has an
 * index of `0`, the second has `1`, and so on.
 * 
 * This lets each copy of a shape behave differently. For example, you can use
 * the index to place instances at different positions, give them different colors,
 * or animate them at different speeds.
 * 
 * `instanceIndex` can only be used inside a p5.strands shader callback.
 * 
 * (Note: `instanceID()` is also available as a function for compatibility.)
 * 
 * `let instancesShader;
 * let instance;
 * let count = 5;
 * 
 * function drawInstance() {
 * sphere(15);
 * }
 * 
 * function setup() {
 * createCanvas(200, 200, WEBGL);
 * instance = buildGeometry(drawInstance);
 * instancesShader = buildMaterialShader(drawSpaced);
 * describe('Five red spheres arranged in a horizontal line.');
 * }
 * 
 * function drawSpaced() {
 * worldInputs.begin();
 * // Spread spheres evenly across the canvas based on their index
 * let spacing = width / count;
 * worldInputs.position.x +=
 * (instanceIndex - (count - 1) / 2) * spacing;
 * worldInputs.end();
 * }
 * 
 * function draw() {
 * background(220);
 * lights();
 * noStroke();
 * fill('red');
 * shader(instancesShader);
 * model(instance, count);
 * }`If you are using WebGPU mode, a common pattern is to use `instanceIndex` to look up data made with
 * <a href="#/p5/createStorage">`createStorage()`</a>.
 * This lets you give each instance different properties.
 * 
 * `let instanceData;
 * let instancesShader;
 * let instance;
 * let count = 5;
 * 
 * async function setup() {
 * await createCanvas(200, 200, WEBGPU);
 * 
 * let data = [];
 * for (let i = 0; i < count; i++) {
 * data.push({
 * position: createVector(
 * random(-1, 1) * width / 2,
 * random(-1, 1) * height / 2,
 * 0,
 * ),
 * color: color(
 * random(255),
 * random(255),
 * random(255)
 * )
 * });
 * }
 * instanceData = createStorage(data);
 * instance = buildGeometry(drawInstance);
 * instancesShader = buildMaterialShader(drawInstances);
 * describe('Five spheres at random positions, each a different random color.');
 * }
 * 
 * function drawInstance() {
 * sphere(15);
 * }
 * 
 * function drawInstances() {
 * let data = uniformStorage(instanceData);
 * let itemColor = sharedVec4();
 * 
 * worldInputs.begin();
 * let item = data[instanceIndex];
 * itemColor = item.color;
 * worldInputs.position += item.position;
 * worldInputs.end();
 * 
 * finalColor.begin();
 * finalColor.set(itemColor);
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * lights();
 * noStroke();
 * shader(instancesShader);
 * model(instance, count);
 * }`This can be paired with <a href="#/p5/buildComputeShader">`buildComputeShader`</a>
 * to update the data being read.
 */
const instanceIndex: typeof P5.instanceIndex;

/**
 * A shader hook block that modifies the properties of each pixel before the final color is calculated. This hook can be used inside <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to adjust per-pixel data before lighting is applied. Modifications happen between the `.begin()` and `.end()` methods of the hook.
 * 
 * The properties of `pixelInputs` depend on the shader:
 * 
 * - In <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a>:
 * 
 * - `normal`: a three-component vector representing the surface normal.
 * 
 * - `texCoord`: a two-component vector representing the texture coordinates (u, v).
 * 
 * - `ambientLight`: a three-component vector representing the ambient light color.
 * 
 * - `ambientMaterial`: a three-component vector representing the material's ambient color.
 * 
 * - `specularMaterial`: a three-component vector representing the material's specular color.
 * 
 * - `emissiveMaterial`: a three-component vector representing the material's emissive color.
 * 
 * - `color`: a four-component vector representing the base color (red, green, blue, alpha).
 * 
 * - `shininess`: a number controlling specular highlights.
 * 
 * - `metalness`: a number controlling the metalness factor.
 * 
 * - In <a href="#/p5/buildStrokeShader">`buildStrokeShader()`</a>:
 * 
 * - `color`: a four-component vector representing the stroke color (red, green, blue, alpha).
 * 
 * - `tangent`: a two-component vector representing the stroke tangent.
 * 
 * - `center`: a two-component vector representing the cap/join center.
 * 
 * - `position`: a two-component vector representing the current fragment position.
 * 
 * - `strokeWeight`: a number representing the stroke weight in pixels.
 * 
 * This hook is available in:
 * 
 * - <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a>
 * 
 * - <a href="#/p5/buildStrokeShader">`buildStrokeShader()`</a>
 */
const pixelInputs: typeof P5.pixelInputs;

/**
 * A shader hook block that modifies the final color of each pixel after all lighting is applied. This hook can be used inside <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to adjust the color before it appears on the screen. Modifications happen between the `.begin()` and `.end()` methods of the hook.
 * 
 * `finalColor` has the following properties:
 * 
 * - `color`: a four-component vector representing the pixel color (red, green, blue, alpha).
 * 
 * - `texCoord`: a two-component vector representing the texture coordinates (u, v)
 * 
 * Call `.set()` on the hook with a vector with four components (red, green, blue, alpha) to update the final color.
 * 
 * This hook is available in:
 * 
 * - <a href="#/p5/buildColorShader">`buildColorShader()`</a>
 * 
 * - <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a>
 * 
 * - <a href="#/p5/buildNormalShader">`buildNormalShader()`</a>
 * 
 * - <a href="#/p5/buildStrokeShader">`buildStrokeShader()`</a>
 */
const finalColor: typeof P5.finalColor;

/**
 * A shader hook block that sets the color for each pixel in a filter shader. This hook can be used inside <a href="#/p5/buildFilterShader">`buildFilterShader()`</a> to control the output color for each pixel.
 * 
 * `filterColor` has the following properties:
 * 
 * - `texCoord`: a two-component vector representing the texture coordinates (u, v).
 * 
 * - `canvasSize`: a two-component vector representing the canvas size in pixels (width, height).
 * 
 * - `texelSize`: a two-component vector representing the size of a single texel in texture space.
 * 
 * - `canvasContent`: a texture containing the sketch's contents before the filter is applied.
 * 
 * Call `.set()` on the hook with a vector with four components (red, green, blue, alpha) to update the final color.
 * 
 * This hook is available in:
 * 
 * - <a href="#/p5/buildFilterShader">`buildFilterShader()`</a>
 */
const filterColor: typeof P5.filterColor;

/**
 * A shader hook block to modify the properties of each vertex before any transformations are applied. This hook can be used inside <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to customize vertex positions, normals, texture coordinates, and colors before rendering. Modifications happen between the `.begin()` and `.end()` methods of the hook. "Object space" refers to the coordinate system of the 3D scene before any transformations, cameras, or projection transformations are applied.
 * 
 * `objectInputs` has the following properties:
 * 
 * - `position`: a three-component vector representing the original position of the vertex.
 * 
 * - `normal`: a three-component vector representing the direction the surface is facing.
 * 
 * - `texCoord`: a two-component vector representing the texture coordinates.
 * 
 * - `color`: a four-component vector representing the color of the vertex (red, green, blue, alpha).
 * 
 * This hook is available in:
 * 
 * - <a href="#/p5/buildColorShader">`buildColorShader()`</a>
 * 
 * - <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a>
 * 
 * - <a href="#/p5/buildNormalShader">`buildNormalShader()`</a>
 * 
 * - <a href="#/p5/buildStrokeShader">`buildStrokeShader()`</a>
 */
const objectInputs: typeof P5.objectInputs;

/**
 * A shader hook block that adjusts vertex properties from the perspective of the camera. This hook can be used inside <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a> and similar shader <a href="#/p5.Shader/modify">`modify()`</a> calls to customize vertex positions, normals, texture coordinates, and colors before rendering. "Camera space" refers to the coordinate system of the 3D scene after transformations have been applied, seen relative to the camera.
 * 
 * `cameraInputs`  has the following properties:
 * 
 * - `position`: a three-component vector representing the position after camera transformation.
 * 
 * - `normal`: a three-component vector representing the normal after camera transformation.
 * 
 * - `texCoord`: a two-component vector representing the texture coordinates.
 * 
 * - `color`: a four-component vector representing the color of the vertex (red, green, blue, alpha).
 * 
 * This hook is available in:
 * 
 * - <a href="#/p5/buildColorShader">`buildColorShader()`</a>
 * 
 * - <a href="#/p5/buildMaterialShader">`buildMaterialShader()`</a>
 * 
 * - <a href="#/p5/buildNormalShader">`buildNormalShader()`</a>
 * 
 * - <a href="#/p5/buildStrokeShader">`buildStrokeShader()`</a>
 */
const cameraInputs: typeof P5.cameraInputs;

/**
 * A `Number` constant that's approximately 3.1416.
 * 
 * `PI` is the mathematical constant π. It's useful for many tasks that
 * involve rotation and oscillation. For example, calling `rotate(PI)` rotates
 * the coordinate system `PI` radians, which is a half turn (180˚).
 * 
 * Note: `TWO_PI` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI`
 * radians equals 90˚, and `QUARTER_PI` radians equals 45˚.
 */
const PI: typeof P5.PI;

/**
 * A `Number` constant that's approximately 0.7854.
 * 
 * `QUARTER_PI` is one-fourth the value of the mathematical constant π. It's
 * useful for many tasks that involve rotation and oscillation. For example,
 * calling `rotate(QUARTER_PI)` rotates the coordinate system `QUARTER_PI`
 * radians, which is an eighth of a turn (45˚).
 * 
 * Note: `TWO_PI` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI`
 * radians equals 90˚, and `QUARTER_PI` radians equals 45˚.
 */
const QUARTER_PI: typeof P5.QUARTER_PI;

/**
 * A `Number` constant that's approximately 6.2382.
 * 
 * `TAU` is twice the value of the mathematical constant π. It's useful for
 * many tasks that involve rotation and oscillation. For example, calling
 * `rotate(TAU)` rotates the coordinate system `TAU` radians, which is one
 * full turn (360˚). `TAU` and `TWO_PI` are equal.
 * 
 * Note: `TAU` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI`
 * radians equals 90˚, and `QUARTER_PI` radians equals 45˚.
 */
const TAU: typeof P5.TAU;

/**
 * A `Number` constant that's approximately 6.2382.
 * 
 * `TWO_PI` is twice the value of the mathematical constant π. It's useful for
 * many tasks that involve rotation and oscillation. For example, calling
 * `rotate(TWO_PI)` rotates the coordinate system `TWO_PI` radians, which is
 * one full turn (360˚). `TWO_PI` and `TAU` are equal.
 * 
 * Note: `TWO_PI` radians equals 360˚, `PI` radians equals 180˚, `HALF_PI`
 * radians equals 90˚, and `QUARTER_PI` radians equals 45˚.
 */
const TWO_PI: typeof P5.TWO_PI;

const DEG_TO_RAD: typeof P5.DEG_TO_RAD;

const RAD_TO_DEG: typeof P5.RAD_TO_DEG;

const CORNER: typeof P5.CORNER;

const CORNERS: typeof P5.CORNERS;

const RADIUS: typeof P5.RADIUS;

const RIGHT: typeof P5.RIGHT;

const LEFT: typeof P5.LEFT;

const CENTER: typeof P5.CENTER;

const TOP: typeof P5.TOP;

const BOTTOM: typeof P5.BOTTOM;

const BASELINE: typeof P5.BASELINE;

const POINTS: typeof P5.POINTS;

const LINES: typeof P5.LINES;

/**
 * A system variable that provides direct access to the sketch's
 * `<canvas>` element.
 * 
 * The `<canvas>` element provides many specialized features that aren't
 * included in the p5.js library. The `drawingContext` system variable
 * provides access to these features by exposing the sketch's
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a>
 * object.
 */
const drawingContext: typeof P5.drawingContext;

const LINE_STRIP: typeof P5.LINE_STRIP;

const LINE_LOOP: typeof P5.LINE_LOOP;

const TRIANGLES: typeof P5.TRIANGLES;

const TRIANGLE_FAN: typeof P5.TRIANGLE_FAN;

const TRIANGLE_STRIP: typeof P5.TRIANGLE_STRIP;

/**
 * Turns off the parts of the Friendly Error System (FES) that impact performance.
 * 
 * The <a href="https://github.com/processing/p5.js/blob/main/contributor_docs/friendly_error_system.md" target="_blank">FES</a>
 * can cause sketches to draw slowly because it does extra work behind the
 * scenes. For example, the FES checks the arguments passed to functions,
 * which takes time to process. Disabling the FES can significantly improve
 * performance by turning off these checks.
 */
const disableFriendlyErrors: typeof P5.disableFriendlyErrors;

const QUADS: typeof P5.QUADS;

const QUAD_STRIP: typeof P5.QUAD_STRIP;

const TESS: typeof P5.TESS;

const EMPTY_PATH: typeof P5.EMPTY_PATH;

const PATH: typeof P5.PATH;

const CLOSE: typeof P5.CLOSE;

const OPEN: typeof P5.OPEN;

const CHORD: typeof P5.CHORD;

const PIE: typeof P5.PIE;

const PROJECT: typeof P5.PROJECT;

const SQUARE: typeof P5.SQUARE;

const ROUND: typeof P5.ROUND;

const BEVEL: typeof P5.BEVEL;

const MITER: typeof P5.MITER;

/**
 * AUTO allows us to automatically set the width or height of an element (but not both),
 * based on the current height and width of the element. Only one parameter can
 * be passed to the <a href="/reference/p5.Element/size">size</a> function as AUTO, at a time.
 */
const AUTO: typeof P5.AUTO;

const ALT: typeof P5.ALT;

const BACKSPACE: typeof P5.BACKSPACE;

const CONTROL: typeof P5.CONTROL;

const DELETE: typeof P5.DELETE;

const DOWN_ARROW: typeof P5.DOWN_ARROW;

const ENTER: typeof P5.ENTER;

const ESCAPE: typeof P5.ESCAPE;

const LEFT_ARROW: typeof P5.LEFT_ARROW;

const OPTION: typeof P5.OPTION;

const RETURN: typeof P5.RETURN;

const RIGHT_ARROW: typeof P5.RIGHT_ARROW;

const SHIFT: typeof P5.SHIFT;

const TAB: typeof P5.TAB;

const UP_ARROW: typeof P5.UP_ARROW;

const BLEND: typeof P5.BLEND;

const REMOVE: typeof P5.REMOVE;

const ADD: typeof P5.ADD;

const DARKEST: typeof P5.DARKEST;

const LIGHTEST: typeof P5.LIGHTEST;

const DIFFERENCE: typeof P5.DIFFERENCE;

const SUBTRACT: typeof P5.SUBTRACT;

const EXCLUSION: typeof P5.EXCLUSION;

/**
 * An array containing the color of each pixel on the canvas.
 * 
 * Colors are stored as numbers representing red, green, blue, and alpha
 * (RGBA) values. `pixels` is a one-dimensional array for performance reasons.
 * 
 * Each pixel occupies four elements in the `pixels` array, one for each RGBA
 * value. For example, the pixel at coordinates (0, 0) stores its RGBA values
 * at `pixels[0]`, `pixels[1]`, `pixels[2]`, and `pixels[3]`, respectively.
 * The next pixel at coordinates (1, 0) stores its RGBA values at `pixels[4]`,
 * `pixels[5]`, `pixels[6]`, and `pixels[7]`. And so on. The `pixels` array
 * for a 100×100 canvas has 100 × 100 × 4 = 40,000 elements.
 * 
 * Some displays use several smaller pixels to set the color at a single
 * point. The <a href="#/p5/pixelDensity">pixelDensity()</a> function returns
 * the pixel density of the canvas. High density displays often have a
 * <a href="#/p5/pixelDensity">pixelDensity()</a> of 2. On such a display, the
 * `pixels` array for a 100×100 canvas has 200 × 200 × 4 =
 * 160,000 elements.
 * 
 * Accessing the RGBA values for a point on the canvas requires a little math
 * as shown below. The <a href="#/p5/loadPixels">loadPixels()</a> function
 * must be called before accessing the `pixels` array. The
 * <a href="#/p5/updatePixels">updatePixels()</a> function must be called
 * after any changes are made.
 */
const pixels: typeof P5.pixels;

const MULTIPLY: typeof P5.MULTIPLY;

const SCREEN: typeof P5.SCREEN;

const REPLACE: typeof P5.REPLACE;

const OVERLAY: typeof P5.OVERLAY;

const HARD_LIGHT: typeof P5.HARD_LIGHT;

const SOFT_LIGHT: typeof P5.SOFT_LIGHT;

const DODGE: typeof P5.DODGE;

const BURN: typeof P5.BURN;

const THRESHOLD: typeof P5.THRESHOLD;

const GRAY: typeof P5.GRAY;

const OPAQUE: typeof P5.OPAQUE;

const INVERT: typeof P5.INVERT;

const POSTERIZE: typeof P5.POSTERIZE;

const DILATE: typeof P5.DILATE;

const ERODE: typeof P5.ERODE;

const BLUR: typeof P5.BLUR;

const NORMAL: typeof P5.NORMAL;

const ITALIC: typeof P5.ITALIC;

const BOLD: typeof P5.BOLD;

const BOLDITALIC: typeof P5.BOLDITALIC;

const CHAR: typeof P5.CHAR;

const WORD: typeof P5.WORD;

const LINEAR: typeof P5.LINEAR;

const QUADRATIC: typeof P5.QUADRATIC;

const BEZIER: typeof P5.BEZIER;

const CURVE: typeof P5.CURVE;

const STROKE: typeof P5.STROKE;

const FILL: typeof P5.FILL;

const TEXTURE: typeof P5.TEXTURE;

const IMMEDIATE: typeof P5.IMMEDIATE;

const IMAGE: typeof P5.IMAGE;

const NEAREST: typeof P5.NEAREST;

const REPEAT: typeof P5.REPEAT;

const CLAMP: typeof P5.CLAMP;

const MIRROR: typeof P5.MIRROR;

const FLAT: typeof P5.FLAT;

const SMOOTH: typeof P5.SMOOTH;

const LANDSCAPE: typeof P5.LANDSCAPE;

const PORTRAIT: typeof P5.PORTRAIT;

const GRID: typeof P5.GRID;

const AXES: typeof P5.AXES;

const LABEL: typeof P5.LABEL;

const FALLBACK: typeof P5.FALLBACK;

const CONTAIN: typeof P5.CONTAIN;

const COVER: typeof P5.COVER;

/**
 * A `Number` variable that stores the width of the canvas in pixels.
 * 
 * `width`'s default value is 100. Calling
 * <a href="#/p5/createCanvas">createCanvas()</a> or
 * <a href="#/p5/resizeCanvas">resizeCanvas()</a> changes the value of
 * `width`. Calling <a href="#/p5/noCanvas">noCanvas()</a> sets its value to
 * 0.
 */
const width: typeof P5.width;

/**
 * A `Number` variable that stores the height of the canvas in pixels.
 * 
 * `height`'s default value is 100. Calling
 * <a href="#/p5/createCanvas">createCanvas()</a> or
 * <a href="#/p5/resizeCanvas">resizeCanvas()</a> changes the value of
 * `height`. Calling <a href="#/p5/noCanvas">noCanvas()</a> sets its value to
 * 0.
 */
const height: typeof P5.height;

const UNSIGNED_BYTE: typeof P5.UNSIGNED_BYTE;

const UNSIGNED_INT: typeof P5.UNSIGNED_INT;

const FLOAT: typeof P5.FLOAT;

const HALF_FLOAT: typeof P5.HALF_FLOAT;

/**
 * The `splineProperty('ends')` mode where splines curve through
 * their first and last points.
 */
const INCLUDE: typeof P5.INCLUDE;

/**
 * The `splineProperty('ends')` mode where the first and last points in a spline
 * affect the direction of the curve, but are not rendered.
 */
const EXCLUDE: typeof P5.EXCLUDE;

/**
 * Information about the current iteration of a compute shader.
 * 
 * Use it inside a
 * <a href="#/p5/buildComputeShader">`buildComputeShader()`</a>
 * function to write a loop that runs in parallel on the GPU.
 * 
 * `index` is a three-component vector with the current index
 * across all dimensions passed to
 * <a href="#/p5/compute">`compute()`</a>. For example, use
 * `index.x` to get the index when looping in one dimension.
 */
const index: typeof P5.index;

/**
 * Removes the sketch from the web page.
 * 
 * Calling `remove()` stops the draw loop and removes any HTML elements
 * created by the sketch, including the canvas. A new sketch can be
 * created by using the <a href="#/p5/p5">p5()</a> constructor, as in
 * `new p5()`.
 */
function remove(): void;
function remove(): void;
function remove(): void;
function remove(): void;

/**
 * Creates a loading indicator when the sketch's setup() function is running.
 * It is called and removed automatically using the presetup and postsetup lifecycles hooks.
 * @param p5 The p5 constructor
 * @param fn The p5 prototype object
 * @param lifecycles Lifecycle hooks for the sketch
 */
function loading(p5: any, fn: any, lifecycles: any): void;

/**
 * Returns a Quaternion for the
 * axis angle representation of the rotation
 * @param angle Angle with which the points needs to be rotated
 * @param x x component of the axis vector
 * @param y y component of the axis vector
 * @param z z component of the axis vector
 */
function fromAxisAngle(angle?: number, x?: number, y?: number, z?: number): void;

/**
 * Returns the current day as a number from 1–31.
 * @returns current day between 1 and 31.
 */
function day(): number;

/**
 * Multiplies a quaternion with other quaternion.
 * @param quat quaternion to multiply with the quaternion calling the method.
 */
function mult(quat?: P5.Quat): void;

/**
 * Displays text in the web browser's console.
 * 
 * `print()` is helpful for printing values while debugging. Each call to
 * `print()` creates a new line of text.
 * 
 * Note: Call `print('\n')` to print a blank line. Calling `print()` without
 * an argument opens the browser's dialog for printing documents.
 * @param contents content to print to the console.
 */
function print(contents: any): void;
function print(data: string | number | any[]): void;

/**
 * Returns the current hour as a number from 0–23.
 * @returns current hour between 0 and 23.
 */
function hour(): number;

/**
 * Sets the seed value for the <a href="#/p5/random">random()</a> and
 * <a href="#/p5/randomGaussian">randomGaussian()</a> functions.
 * 
 * By default, <a href="#/p5/random">random()</a> and
 * <a href="#/p5/randomGaussian">randomGaussian()</a> produce different
 * results each time a sketch is run. Calling `randomSeed()` with a constant
 * argument, such as `randomSeed(99)`, makes these functions produce the same
 * results each time a sketch is run.
 * @param seed seed value.
 */
function randomSeed(seed: number): void;

/**
 * Converts a `String` to a floating point (decimal) `Number`.
 * 
 * `float()` converts strings that resemble numbers, such as `'12.34'`, into
 * numbers.
 * 
 * The parameter, `str`, is the string value to convert. For example, calling
 * `float('12.34')` returns the number `12.34`.  If an array of strings is
 * passed, as in `float(['12.34', '56.78'])`, then an array of numbers will be
 * returned.
 * 
 * Note: If a string can't be converted to a number, as in `float('giraffe')`,
 * then the value `NaN` (not a number) will be returned.
 * @param str string to convert.
 * @returns converted number.
 */
function float(str: string): number;
function float(ns: string[]): number[];

/**
 * Rotates the Quaternion by the quaternion passed
 * which contains the axis of roation and angle of rotation
 * @param axesQuat axis quaternion which contains
 * the axis of rotation and angle of rotation
 */
function rotateBy(axesQuat?: P5.Quat): void;

/**
 * Changes where ellipses, circles, and arcs are drawn.
 * 
 * By default, the first two parameters of
 * <a href="#/p5/ellipse">ellipse()</a>, <a href="#/p5/circle">circle()</a>,
 * and <a href="#/p5/arc">arc()</a>
 * are the x- and y-coordinates of the shape's center. The next parameters set
 * the shape's width and height. This is the same as calling
 * `ellipseMode(CENTER)`.
 * 
 * `ellipseMode(RADIUS)` also uses the first two parameters to set the x- and
 * y-coordinates of the shape's center. The next parameters are half of the
 * shapes's width and height. Calling `ellipse(0, 0, 10, 15)` draws a shape
 * with a width of 20 and height of 30.
 * 
 * `ellipseMode(CORNER)` uses the first two parameters as the upper-left
 * corner of the shape. The next parameters are its width and height.
 * 
 * `ellipseMode(CORNERS)` uses the first two parameters as the location of one
 * corner of the ellipse's bounding box. The next parameters are the location
 * of the opposite corner.
 * 
 * The argument passed to `ellipseMode()` must be written in ALL CAPS because
 * the constants `CENTER`, `RADIUS`, `CORNER`, and `CORNERS` are defined this
 * way. JavaScript is a case-sensitive language.
 * 
 * Calling `ellipseMode()` without an argument returns the current ellipseMode, either `CENTER`, `RADIUS`, `CORNER`, or `CORNERS`.
 * @param mode either CENTER, RADIUS, CORNER, or CORNERS
 * @returns the current ellipseMode.
 */
function ellipseMode(mode: typeof P5.CENTER | typeof P5.RADIUS | typeof P5.CORNER | typeof P5.CORNERS): typeof P5.CENTER | typeof P5.RADIUS | typeof P5.CORNER | typeof P5.CORNERS;
function ellipseMode(): typeof P5.CENTER | typeof P5.RADIUS | typeof P5.CORNER | typeof P5.CORNERS;

/**
 * Calculates the absolute value of a number.
 * 
 * A number's absolute value is its distance from zero on the number line.
 * -5 and 5 are both five units away from zero, so calling `abs(-5)` and
 * `abs(5)` both return 5. The absolute value of a number is always positive.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * describe('A gray square with a vertical black line that divides it in half. A white rectangle gets taller when the user moves the mouse away from the line.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Divide the canvas.
 * line(50, 0, 50, 100);
 * 
 * // Calculate the mouse's distance from the middle.
 * let h = abs(mouseX - 50);
 * 
 * // Draw a rectangle based on the mouse's distance
 * // from the middle.
 * rect(0, 100 - h, 100, h);
 * }``abs()` can also be used in shaders with p5.strands. The following example
 * uses `abs()` to create a mirror effect on the color of a shape.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere with colors that fold back like a mirror.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
 * let t = millis() * 0.001;
 * 
 * // sin(t) goes between -1 and 1 over time.
 * let sinVal = sin(t);
 * 
 * // abs() folds the negative values to positive.
 * // Now value goes between 0 and 1, creating a mirror effect.
 * let value = abs(sinVal);
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let navy = [0.2, 0.2, 0.8, 1];
 * let coral = [0.8, 0.2, 0.2, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between navy (when value = 0) and coral (when value = 1).
 * finalColor.set(mix(navy, coral, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param n number to compute.
 * @returns absolute value of given number.
 */
function abs(n: number): number;

/**
 * Converts a `Number` into a `String` with a given number of digits.
 * 
 * `nf()` converts numbers such as `123.45` into strings formatted with a set
 * number of digits, as in `'123.4500'`.
 * 
 * The first parameter, `num`, is the number to convert to a string. For
 * example, calling `nf(123.45)` returns the string `'123.45'`. If an array of
 * numbers is passed, as in `nf([123.45, 67.89])`, an array of formatted
 * strings will be returned.
 * 
 * The second parameter, `left`, is optional. If a number is passed, as in
 * `nf(123.45, 4)`, it sets the minimum number of digits to include to the
 * left of the decimal place. If `left` is larger than the number of digits in
 * `num`, then unused digits will be set to 0. For example, calling
 * `nf(123.45, 4)` returns the string `'0123.45'`.
 * 
 * The third parameter, `right`, is also optional. If a number is passed, as
 * in `nf(123.45, 4, 1)`, it sets the minimum number of digits to include to
 * the right of the decimal place. If `right` is smaller than the number of
 * decimal places in `num`, then `num` will be rounded to the given number of
 * decimal places. For example, calling `nf(123.45, 4, 1)` returns the string
 * `'0123.5'`. If right is larger than the number of decimal places in `num`,
 * then unused decimal places will be set to 0. For example, calling
 * `nf(123.45, 4, 3)` returns the string `'0123.450'`.
 * 
 * When the number is negative, for example, calling `nf(-123.45, 5, 2)`
 * returns the string `'-00123.45'`.
 * @param num number to format.
 * @param left number of digits to include to the left of
 * the decimal point.
 * @param right number of digits to include to the right
 * of the decimal point.
 * @returns formatted string.
 */
function nf(num: number | string, left?: number | string, right?: number | string): string;
function nf(nums: number[], left?: number | string, right?: number | string): string[];

/**
 * Sets the stroke rendering mode to balance performance and visual features when drawing lines.
 * 
 * `strokeMode()` offers two modes:
 * 
 * - `SIMPLE`: Optimizes for speed by disabling caps, joins, and stroke color features.
 * Use this mode for faster line rendering when these visual details are unnecessary.
 * 
 * - `FULL`: Enables caps, joins, and stroke color for lines.
 * This mode provides enhanced visuals but may reduce performance due to additional processing.
 * 
 * Choose the mode that best suits your application's needs to either improve rendering speed or enhance visual quality.
 * @param mode The stroke mode to set. Possible values are:
 * 
 * - `'SIMPLE'`: Fast rendering without caps, joins, or stroke color.
 * 
 * - `'FULL'`: Detailed rendering with caps, joins, and stroke color.
 */
function strokeMode(mode: string): void;

/**
 * Searches the page for the first element that matches the given
 * <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors" target="_blank">CSS selector string</a>.
 * 
 * The selector string can be an ID, class, tag name, or a combination.
 * `select()` returns a <a href="#/p5.Element">p5.Element</a> object if it
 * finds a match and `null` if not.
 * 
 * The second parameter, `container`, is optional. It specifies a container to
 * search within. `container` can be CSS selector string, a
 * <a href="#/p5.Element">p5.Element</a> object, or an
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> object.
 * @param selectors CSS selector string of element to search for.
 * @param container CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.
 * @returns <a href="#/p5.Element">p5.Element</a> containing the element.
 */
function select(selectors: string, container?: string | P5.Element | HTMLElement): P5.Element | null;

/**
 * Loads an image to create a <a href="#/p5.Image">p5.Image</a> object.
 * 
 * `loadImage()` interprets the first parameter one of three ways. If the path
 * to an image file is provided, `loadImage()` will load it. Paths to local
 * files should be relative, such as `'assets/thundercat.jpg'`. URLs such as
 * `'https://example.com/thundercat.jpg'` may be blocked due to browser
 * security. Raw image data can also be passed as a base64 encoded image in
 * the form `'data:image/png;base64,arandomsequenceofcharacters'`. The `path`
 * parameter can also be defined as a `Request`
 * object for more advanced usage.
 * 
 * The second parameter is optional. If a function is passed, it will be
 * called once the image has loaded. The callback function can optionally use
 * the new <a href="#/p5.Image">p5.Image</a> object. The return value of the
 * function will be used as the final return value of `loadImage()`.
 * 
 * The third parameter is also optional. If a function is passed, it will be
 * called if the image fails to load. The callback function can optionally use
 * the event error. The return value of the function will be used as the final
 * return value of `loadImage()`.
 * 
 * This function returns a `Promise` and should be used in an `async` setup with
 * `await`. See the examples for the usage syntax.
 * @param path path of the image to be loaded or base64 encoded image.
 * @param successCallback function called with
 * <a href="#/p5.Image">p5.Image</a> once it
 * loads.
 * @param failureCallback function called with event
 * error if the image fails to load.
 * @returns the <a href="#/p5.Image">p5.Image</a> object.
 */
function loadImage(path: string | Request, successCallback?: (arg0: P5.Image) => void, failureCallback?: (arg0: Event) => void): Promise<P5.Image>;

/**
 * Creates a new <a href="#/p5.Vector">p5.Vector</a> object.
 * 
 * A vector can be thought of in different ways. In one view, a vector is like
 * an arrow pointing in space. Vectors have both magnitude (length) and
 * direction. This view is helpful for programming motion.
 * 
 * A vector's components determine its magnitude and direction. For example,
 * calling `createVector(3, 4)` creates a new
 * <a href="#/p5.Vector">p5.Vector</a> object with an x-component of 3 and a
 * y-component of 4. From the origin, this vector's tip is 3 units to the
 * right and 4 units down.
 * 
 * You can also pass N dimensions to the `createVector` function. For example,
 * calling `createVector(1, 2, 3, 4)` creates a vector with four components.
 * This allows for flexibility in representing vectors in higher-dimensional
 * spaces.
 * 
 * Calling `createVector()` with no arguments is deprecated and will emit
 * a friendly warning. Use `createVector(0)`, `createVector(0, 0)`, or
 * `createVector(0, 0, 0)` instead.
 * 
 * <a href="#/p5.Vector">p5.Vector</a> objects are often used to program
 * motion because they simplify the math. For example, a moving ball has a
 * position and a velocity. Position describes where the ball is in space. The
 * ball's position vector extends from the origin to the ball's center.
 * Velocity describes the ball's speed and the direction it's moving. If the
 * ball is moving straight up, its velocity vector points straight up. Adding
 * the ball's velocity vector to its position vector moves it, as in
 * `pos.add(vel)`. Vector math relies on methods inside the
 * <a href="#/p5.Vector">p5.Vector</a> class.
 * @param x List of numbers representing each component of the vector.
 * @returns new <a href="#/p5.Vector">p5.Vector</a> object.
 */
function createVector(...x: number[]): P5.Vector;

/**
 * Returns the current minute as a number from 0–59.
 * @returns current minute between 0 and 59.
 */
function minute(): number;

/**
 * Stops the code in <a href="#/p5/draw">draw()</a> from running repeatedly.
 * 
 * By default, <a href="#/p5/draw">draw()</a> tries to run 60 times per
 * second. Calling `noLoop()` stops <a href="#/p5/draw">draw()</a> from
 * repeating. The draw loop can be restarted by calling
 * <a href="#/p5/loop">loop()</a>. <a href="#/p5/draw">draw()</a> can be run
 * once by calling <a href="#/p5/redraw">redraw()</a>.
 * 
 * The <a href="#/p5/isLooping">isLooping()</a> function can be used to check
 * whether a sketch is looping, as in `isLooping() === true`.
 */
function noLoop(): void;

/**
 * Creates a screen reader-accessible description of the canvas.
 * 
 * The first parameter, `text`, is the description of the canvas.
 * 
 * The second parameter, `display`, is optional. It determines how the
 * description is displayed. If `LABEL` is passed, as in
 * `describe('A description.', LABEL)`, the description will be visible in
 * a div element next to the canvas. If `FALLBACK` is passed, as in
 * `describe('A description.', FALLBACK)`, the description will only be
 * visible to screen readers. This is the default mode.
 * 
 * Read
 * <a href="/learn/accessible-labels.html">Writing accessible canvas descriptions</a>
 * to learn more about making sketches accessible.
 * @param text description of the canvas.
 * @param display either LABEL or FALLBACK.
 */
function describe(text: string, display?: typeof P5.FALLBACK | typeof P5.LABEL): void;

/**
 * Stores a value in the web browser's local storage.
 * 
 * Web browsers can save small amounts of data using the built-in
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">localStorage object</a>.
 * Data stored in `localStorage` can be retrieved at any point, even after
 * refreshing a page or restarting the browser. Data are stored as key-value
 * pairs.
 * 
 * `storeItem()` makes it easy to store values in `localStorage` and
 * <a href="#/p5/getItem">getItem()</a> makes it easy to retrieve them.
 * 
 * The first parameter, `key`, is the name of the value to be stored as a
 * string.
 * 
 * The second parameter, `value`, is the value to be stored. Values can have
 * any type.
 * 
 * Note: Sensitive data such as passwords or personal information shouldn't be
 * stored in `localStorage`.
 * @param key name of the value.
 * @param value value to be stored.
 */
function storeItem(key: string, value: string | number | boolean | object | any[]): void;

/**
 * Creates a screen reader-accessible description of shapes on the canvas.
 * 
 * `textOutput()` adds a general description, list of shapes, and
 * table of shapes to the web page. The general description includes the
 * canvas size, canvas color, and number of shapes. For example,
 * `Your output is a, 100 by 100 pixels, gray canvas containing the following 2 shapes:`.
 * 
 * A list of shapes follows the general description. The list describes the
 * color, location, and area of each shape. For example,
 * `a red circle at middle covering 3% of the canvas`. Each shape can be
 * selected to get more details.
 * 
 * `textOutput()` uses its table of shapes as a list. The table describes the
 * shape, color, location, coordinates and area. For example,
 * `red circle location = middle area = 3%`. This is different from
 * <a href="#/p5/gridOutput">gridOutput()</a>, which uses its table as a grid.
 * 
 * The `display` parameter is optional. It determines how the description is
 * displayed. If `LABEL` is passed, as in `textOutput(LABEL)`, the description
 * will be visible in a div element next to the canvas. Using `LABEL` creates
 * unhelpful duplicates for screen readers. Only use `LABEL` during
 * development. If `FALLBACK` is passed, as in `textOutput(FALLBACK)`, the
 * description will only be visible to screen readers. This is the default
 * mode.
 * 
 * Read
 * <a href="/learn/accessible-labels.html">Writing accessible canvas descriptions</a>
 * to learn more about making sketches accessible.
 * @param display either FALLBACK or LABEL.
 */
function textOutput(display?: typeof P5.FALLBACK | typeof P5.LABEL): void;

/**
 * Copies a region of pixels from one image to another.
 * 
 * The first parameter, `srcImage`, is the
 * <a href="#/p5.Image">p5.Image</a> object to blend.
 * 
 * The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
 * to blend from the source image. `(sx, sy)` is the top-left corner of the
 * region. `sw` and `sh` are the regions width and height.
 * 
 * The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
 * of the canvas to blend into. `(dx, dy)` is the top-left corner of the
 * region. `dw` and `dh` are the regions width and height.
 * 
 * The tenth parameter, `blendMode`, sets the effect used to blend the images'
 * colors. The options are `BLEND`, `DARKEST`, `LIGHTEST`, `DIFFERENCE`,
 * `MULTIPLY`, `EXCLUSION`, `SCREEN`, `REPLACE`, `OVERLAY`, `HARD_LIGHT`,
 * `SOFT_LIGHT`, `DODGE`, `BURN`, `ADD`, or `NORMAL`
 * @param srcImage source image.
 * @param sx x-coordinate of the source's upper-left corner.
 * @param sy y-coordinate of the source's upper-left corner.
 * @param sw source image width.
 * @param sh source image height.
 * @param dx x-coordinate of the destination's upper-left corner.
 * @param dy y-coordinate of the destination's upper-left corner.
 * @param dw destination image width.
 * @param dh destination image height.
 * @param blendMode the blend mode. either
 * BLEND, DARKEST, LIGHTEST, DIFFERENCE,
 * MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
 * SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
 */
function blend(srcImage: P5.Image, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number, blendMode: typeof P5.BLEND | typeof P5.DARKEST | typeof P5.LIGHTEST | typeof P5.DIFFERENCE | typeof P5.MULTIPLY | typeof P5.EXCLUSION | typeof P5.SCREEN | typeof P5.REPLACE | typeof P5.OVERLAY | typeof P5.HARD_LIGHT | typeof P5.SOFT_LIGHT | typeof P5.DODGE | typeof P5.BURN | typeof P5.ADD | typeof P5.NORMAL): void;
function blend(sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number, blendMode: typeof P5.BLEND | typeof P5.DARKEST | typeof P5.LIGHTEST | typeof P5.DIFFERENCE | typeof P5.MULTIPLY | typeof P5.EXCLUSION | typeof P5.SCREEN | typeof P5.REPLACE | typeof P5.OVERLAY | typeof P5.HARD_LIGHT | typeof P5.SOFT_LIGHT | typeof P5.DODGE | typeof P5.BURN | typeof P5.ADD | typeof P5.NORMAL): void;

/**
 * Creates a canvas element on the web page.
 * 
 * `createCanvas()` creates the main drawing canvas for a sketch. It should
 * only be called once at the beginning of <a href="#/p5/setup">setup()</a>.
 * Calling `createCanvas()` more than once causes unpredictable behavior.
 * 
 * The first two parameters, `width` and `height`, are optional. They set the
 * dimensions of the canvas and the values of the
 * <a href="#/p5/width">width</a> and <a href="#/p5/height">height</a> system
 * variables. For example, calling `createCanvas(900, 500)` creates a canvas
 * that's 900×500 pixels. By default, `width` and `height` are both 100.
 * 
 * The third parameter is also optional. If either of the constants `P2D` or
 * `WEBGL` is passed, as in `createCanvas(900, 500, WEBGL)`, then it will set
 * the sketch's rendering mode. If an existing
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement" target="_blank">HTMLCanvasElement</a>
 * is passed, as in `createCanvas(900, 500, myCanvas)`, then it will be used
 * by the sketch. To use `WEBGPU` mode, make sure you have the WebGPU mode addon included.
 * 
 * The fourth parameter is also optional. If an existing
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement" target="_blank">HTMLCanvasElement</a>
 * is passed, as in `createCanvas(900, 500, WEBGL, myCanvas)`, then it will be
 * used by the sketch.
 * 
 * Note: In WebGL mode, the canvas will use a WebGL2 context if it's supported
 * by the browser. Check the <a href="#/p5/webglVersion">webglVersion</a>
 * system variable to check what version is being used, or call
 * `setAttributes({ version: 1 })` to create a WebGL1 context.
 * 
 * Note: In WebGPU mode, you must `await` this function.
 * @param width width of the canvas. Defaults to 100.
 * @param height height of the canvas. Defaults to 100.
 * @param renderer either P2D or WEBGL. Defaults to `P2D`.
 * @param canvas existing canvas element that should be used for the sketch.
 * @returns new `p5.Renderer` that holds the canvas.
 */
function createCanvas(width?: number, height?: number, renderer?: typeof P5.P2D | typeof P5.WEBGL | typeof P5.P2DP3, canvas?: HTMLCanvasElement): P5.Renderer;
function createCanvas(width: number, height: number, renderer: typeof P5.WEBGPU, canvas?: HTMLCanvasElement): Promise<P5.Renderer>;
function createCanvas(width?: number, height?: number, canvas?: HTMLCanvasElement): P5.Renderer;

/**
 * Loads vertex and fragment shaders to create a
 * <a href="#/p5.Shader">p5.Shader</a> 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
 * <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>
 * and run along with the rest of the code in a sketch.
 * 
 * Once the <a href="#/p5.Shader">p5.Shader</a> object is created, it can be
 * used with the <a href="#/p5/shader">shader()</a> 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 <a href="#/p5.Shader">p5.Shader</a> 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 <a href="#/p5.Shader">p5.Shader</a> 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 vertFilename path of the vertex shader to be loaded.
 * @param fragFilename path of the fragment shader to be loaded.
 * @param successCallback function to call once the shader is loaded. Can be passed the
 * <a href="#/p5.Shader">p5.Shader</a> object.
 * @param failureCallback function to call if the shader fails to load. Can be passed an
 * `Error` event object.
 * @returns new shader created from the vertex and fragment shader files.
 */
function loadShader(vertFilename: string | Request, fragFilename: string | Request, successCallback?: Function, failureCallback?: Function): Promise<P5.Shader>;

/**
 * Creates a new <a href="#/p5.Image">p5.Image</a> object.
 * 
 * `createImage()` uses the `width` and `height` parameters to set the new
 * <a href="#/p5.Image">p5.Image</a> object's dimensions in pixels. The new
 * <a href="#/p5.Image">p5.Image</a> can be modified by updating its
 * <a href="#/p5.Image/pixels">pixels</a> array or by calling its
 * <a href="#/p5.Image/get">get()</a> and
 * <a href="#/p5.Image/set">set()</a> methods. The
 * <a href="#/p5.Image/loadPixels">loadPixels()</a> method must be called
 * before reading or modifying pixel values. The
 * <a href="#/p5.Image/updatePixels">updatePixels()</a> method must be called
 * for updates to take effect.
 * 
 * Note: The new <a href="#/p5.Image">p5.Image</a> object is transparent by
 * default.
 * @param width width in pixels.
 * @param height height in pixels.
 * @returns new <a href="#/p5.Image">p5.Image</a> object.
 */
function createImage(width: number, height: number): P5.Image;

/**
 * Allows the user to orbit around a 3D sketch using a mouse, trackpad, or
 * touchscreen.
 * 
 * 3D sketches are viewed through an imaginary camera. Calling
 * `orbitControl()` within the <a href="#/p5/draw">draw()</a> function allows
 * the user to change the camera’s position:
 * 
 * `function draw() {
 * background(200);
 * 
 * // Enable orbiting with the mouse.
 * orbitControl();
 * 
 * // Rest of sketch.
 * }`Left-clicking and dragging or swipe motion will rotate the camera position
 * about the center of the sketch. Right-clicking and dragging or multi-swipe
 * will pan the camera position without rotation. Using the mouse wheel
 * (scrolling) or pinch in/out will move the camera further or closer from the
 * center of the sketch.
 * 
 * The first three parameters, `sensitivityX`, `sensitivityY`, and
 * `sensitivityZ`, are optional. They’re numbers that set the sketch’s
 * sensitivity to movement along each axis. For example, calling
 * `orbitControl(1, 2, -1)` keeps movement along the x-axis at its default
 * value, makes the sketch twice as sensitive to movement along the y-axis,
 * and reverses motion along the z-axis. By default, all sensitivity values
 * are 1.
 * 
 * The fourth parameter, `options`, is also optional. It’s an object that
 * changes the behavior of orbiting. For example, calling
 * `orbitControl(1, 1, 1, options)` keeps the default sensitivity values while
 * changing the behaviors set with `options`. The object can have the
 * following properties:
 * 
 * `let options = {
 * // Setting this to false makes mobile interactions smoother by
 * // preventing accidental interactions with the page while orbiting.
 * // By default, it's true.
 * disableTouchActions: true,
 * 
 * // Setting this to true makes the camera always rotate in the
 * // direction the mouse/touch is moving.
 * // By default, it's false.
 * freeRotation: false
 * };
 * 
 * orbitControl(1, 1, 1, options);`
 * @param sensitivityX sensitivity to movement along the x-axis. Defaults to 1.
 * @param sensitivityY sensitivity to movement along the y-axis. Defaults to 1.
 * @param sensitivityZ sensitivity to movement along the z-axis. Defaults to 1.
 * @param options Settings for orbitControl:
 */
function orbitControl(sensitivityX?: number, sensitivityY?: number, sensitivityZ?: number, options?: { disableTouchActions?: boolean; freeRotation?: boolean }): void;

/**
 * Draws certain features with jagged (aliased) edges.
 * 
 * <a href="#/p5/smooth">smooth()</a> is active by default. In 2D mode,
 * `noSmooth()` is helpful for scaling up images without blurring. The
 * functions don't affect shapes or fonts.
 * 
 * In WebGL mode, `noSmooth()` causes all shapes to be drawn with jagged
 * (aliased) edges. The functions don't affect images or fonts.
 * 
 * Note: In WebGPU mode, you must `await` this function.
 */
function noSmooth(): void | Promise<void>;

/**
 * Starts defining a shape that will mask any shapes drawn afterward.
 * 
 * Any shapes drawn between `beginClip()` and
 * <a href="#/p5/endClip">endClip()</a> will add to the mask shape. The mask
 * will apply to anything drawn after <a href="#/p5/endClip">endClip()</a>.
 * 
 * The parameter, `options`, is optional. If an object with an `invert`
 * property is passed, as in `beginClip({ invert: true })`, it will be used to
 * set the masking mode. `{ invert: true }` inverts the mask, creating holes
 * in shapes that are masked. `invert` is `false` by default.
 * 
 * Masks can be contained between the
 * <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions.
 * Doing so allows unmasked shapes to be drawn after masked shapes.
 * 
 * Masks can also be defined in a callback function that's passed to
 * <a href="#/p5/clip">clip()</a>.
 * @param options an object containing clip settings.
 */
function beginClip(options?: { invert?: boolean }): void;

/**
 * Calculates the closest integer value that is greater than or equal to a
 * number.
 * 
 * For example, calling `ceil(9.03)` and `ceil(9.97)` both return the value
 * 10.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Use RGB color with values from 0 to 1.
 * colorMode(RGB, 1);
 * 
 * noStroke();
 * 
 * // Draw the left rectangle.
 * let r = 0.3;
 * fill(r, 0, 0);
 * rect(0, 0, 50, 100);
 * 
 * // Round r up to 1.
 * r = ceil(r);
 * 
 * // Draw the right rectangle.
 * fill(r, 0, 0);
 * rect(50, 0, 50, 100);
 * 
 * describe('Two rectangles. The one on the left is dark red and the one on the right is bright red.');
 * }``ceil()` can also be used in shaders with p5.strands. The following example
 * uses `ceil()` to create a stepped color effect on a shape.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere with stepped color bands.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
 * let t = millis() * 0.001;
 * 
 * // sin(t) goes between -1 and 1.
 * // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
 * let sinVal = 0.5 + 0.5 * sin(t);
 * 
 * // Multiply by 4 then ceil to get the next whole number up.
 * // Divide by 4 to bring the result back to the 0 to 1 range.
 * // This creates 4 distinct stepped color levels: 0.25, 0.5, 0.75, 1.
 * let value = ceil(sinVal * 4) / 4;
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let cyan = [0, 0.5, 1, 1];
 * let orange = [1, 0.5, 0, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between cyan (when value = 0) and orange (when value = 1).
 * // ceil() creates sharp steps between color levels.
 * finalColor.set(mix(cyan, orange, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param n number to round up.
 * @returns rounded up number.
 */
function ceil(n: number): number;

/**
 * Creates a light that shines from all directions.
 * 
 * Ambient light does not come from one direction. Instead, 3D shapes are
 * lit evenly from all sides. Ambient lights are almost always used in
 * combination with other types of lights.
 * 
 * There are three ways to call `ambientLight()` with optional parameters to
 * set the light’s color.
 * 
 * The first way to call `ambientLight()` has two parameters, `gray` and
 * `alpha`. `alpha` is optional. Grayscale and alpha values between 0 and 255
 * can be passed to set the ambient light’s color, as in `ambientLight(50)` or
 * `ambientLight(50, 30)`.
 * 
 * The second way to call `ambientLight()` has one parameter, color. A
 * <a href="#/p5.Color">p5.Color</a> object, an array of color values, or a
 * CSS color string, as in `ambientLight('magenta')`, can be passed to set the
 * ambient light’s color.
 * 
 * The third way to call `ambientLight()` has four parameters, `v1`, `v2`,
 * `v3`, and `alpha`. `alpha` is optional. RGBA, HSBA, or HSLA values can be
 * passed to set the ambient light’s colors, as in `ambientLight(255, 0, 0)`
 * or `ambientLight(255, 0, 0, 30)`. Color values will be interpreted using
 * the current <a href="#/p5/colorMode">colorMode()</a>.
 * @param v1 red or hue value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 * @param v2 green or saturation value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 * @param v3 blue, brightness, or lightness value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 * @param alpha alpha (transparency) value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 */
function ambientLight(v1: number, v2: number, v3: number, alpha?: number): void;
function ambientLight(gray: number, alpha?: number): void;
function ambientLight(value: string): void;
function ambientLight(values: number[]): void;
function ambientLight(color: P5.Color): void;

/**
 * Searches the page for all elements that matches the given
 * <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics#different_types_of_selectors" target="_blank">CSS selector string</a>.
 * 
 * The selector string can be an ID, class, tag name, or a combination.
 * `selectAll()` returns an array of <a href="#/p5.Element">p5.Element</a>
 * objects if it finds any matches and an empty array if none are found.
 * 
 * The second parameter, `container`, is optional. It specifies a container to
 * search within. `container` can be CSS selector string, a
 * <a href="#/p5.Element">p5.Element</a> object, or an
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> object.
 * @param selectors CSS selector string of element to search for.
 * @param container CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.
 * @returns array of <a href="#/p5.Element">p5.Element</a>s containing any elements found.
 */
function selectAll(selectors: string, container?: string | P5.Element | HTMLElement): P5.Element[];

/**
 * Draws a Bézier curve.
 * 
 * Bézier curves can form shapes and curves that slope gently. They're defined
 * by two anchor points and two control points. Bézier curves provide more
 * control than the spline curves created with the
 * <a href="#/p5/spline">spline()</a> function.
 * 
 * The first two parameters, `x1` and `y1`, set the first anchor point. The
 * first anchor point is where the curve starts.
 * 
 * The next four parameters, `x2`, `y2`, `x3`, and `y3`, set the two control
 * points. The control points "pull" the curve towards them.
 * 
 * The seventh and eighth parameters, `x4` and `y4`, set the last anchor
 * point. The last anchor point is where the curve ends.
 * 
 * Bézier curves can also be drawn in 3D using WebGL mode. The 3D version of
 * `bezier()` has twelve arguments because each point has x-, y-,
 * and z-coordinates.
 * @param x1 x-coordinate of the first anchor point.
 * @param y1 y-coordinate of the first anchor point.
 * @param x2 x-coordinate of the first control point.
 * @param y2 y-coordinate of the first control point.
 * @param x3 x-coordinate of the second control point.
 * @param y3 y-coordinate of the second control point.
 * @param x4 x-coordinate of the second anchor point.
 * @param y4 y-coordinate of the second anchor point.
 */
function bezier(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): void;
function bezier(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number, x3: number, y3: number, z3: number, x4: number, y4: number, z4: number): void;

/**
 * Calculates the arc cosine of a number.
 * 
 * `acos()` is the inverse of <a href="#/p5/cos">cos()</a>. It expects
 * arguments in the range -1 to 1. By default, `acos()` returns values in the
 * range 0 to π (about 3.14). If the
 * <a href="#/p5/angleMode">angleMode()</a> is `DEGREES`, then values are
 * returned in the range 0 to 180.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Calculate cos() and acos() values.
 * let a = PI;
 * let c = cos(a);
 * let ac = acos(c);
 * 
 * // Display the values.
 * text(`${round(a, 3)}`, 35, 25);
 * text(`${round(c, 3)}`, 35, 50);
 * text(`${round(ac, 3)}`, 35, 75);
 * 
 * describe('The numbers 3.142, -1, and 3.142 written on separate rows.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Calculate cos() and acos() values.
 * let a = PI + QUARTER_PI;
 * let c = cos(a);
 * let ac = acos(c);
 * 
 * // Display the values.
 * text(`${round(a, 3)}`, 35, 25);
 * text(`${round(c, 3)}`, 35, 50);
 * text(`${round(ac, 3)}`, 35, 75);
 * 
 * describe('The numbers 3.927, -0.707, and 2.356 written on separate rows.');
 * }``acos()` can also be used in shaders with p5.strands. The following example
 * uses `acos()` to create a pulsing color transition on a shape.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere that pulses between orange and teal.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
 * let t = millis() * 0.001;
 * 
 * // acos(cos(t)) creates a triangle wave that goes from 0 to PI and back.
 * // Dividing by PI normalizes the result to the 0 to 1 range.
 * let value = acos(cos(t)) / PI;
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let orange = [1, 0.5, 0, 1];
 * let teal = [0, 0.8, 0.8, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between orange (when value = 0) and teal (when value = 1).
 * // acos() creates a pulsing effect by turning smooth oscillation into a triangle wave.
 * finalColor.set(mix(orange, teal, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param value value whose arc cosine is to be returned.
 * @returns arc cosine of the given value.
 */
function acos(value: number): number;

/**
 * Ends defining a mask that was started with
 * <a href="#/p5/beginClip">beginClip()</a>.
 */
function endClip(): void;

/**
 * Converts a `Boolean`, `String`, or decimal `Number` to an integer.
 * 
 * `int()` converts values to integers. Integers are positive or negative
 * numbers without decimals. If the original value has decimals, as in -34.56,
 * they're removed to produce an integer such as -34.
 * 
 * The parameter, `n`, is the value to convert. If `n` is a Boolean, as in
 * `int(false)` or `int(true)`, then the number 0 (`false`) or 1 (`true`) will
 * be returned. If `n` is a string or number, as in `int('45')` or
 * `int(67.89)`, then an integer will be returned. If an array is passed, as
 * in `int([12.34, 56.78])`, then an array of integers will be returned.
 * 
 * Note: If a value can't be converted to a number, as in `int('giraffe')`,
 * then the value `NaN` (not a number) will be returned.
 * @param n value to convert.
 * @returns converted number.
 */
function int(n: string | boolean | number): number;
function int(ns: any[]): number[];

/**
 * Copies pixels from a source image to a region of the canvas.
 * 
 * The first parameter, `srcImage`, is the
 * <a href="#/p5.Image">p5.Image</a> object to blend. The source image can be
 * the canvas itself or a
 * <a href="#/p5.Image">p5.Image</a> object. `copy()` will scale pixels from
 * the source region if it isn't the same size as the destination region.
 * 
 * The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
 * to copy from the source image. `(sx, sy)` is the top-left corner of the
 * region. `sw` and `sh` are the region's width and height.
 * 
 * The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
 * of the canvas to copy into. `(dx, dy)` is the top-left corner of the
 * region. `dw` and `dh` are the region's width and height.
 * @param srcImage source image.
 * @param sx x-coordinate of the source's upper-left corner.
 * @param sy y-coordinate of the source's upper-left corner.
 * @param sw source image width.
 * @param sh source image height.
 * @param dx x-coordinate of the destination's upper-left corner.
 * @param dy y-coordinate of the destination's upper-left corner.
 * @param dw destination image width.
 * @param dh destination image height.
 */
function copy(srcImage: P5.Image | P5.Element, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
function copy(sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;

/**
 * Resumes the draw loop after <a href="#/p5/noLoop">noLoop()</a> has been
 * called.
 * 
 * By default, <a href="#/p5/draw">draw()</a> tries to run 60 times per
 * second. Calling <a href="#/p5/noLoop">noLoop()</a> stops
 * <a href="#/p5/draw">draw()</a> from repeating. The draw loop can be
 * restarted by calling `loop()`.
 * 
 * The <a href="#/p5/isLooping">isLooping()</a> function can be used to check
 * whether a sketch is looping, as in `isLooping() === true`.
 */
function loop(): void;

/**
 * A function alias for <a href="#/p5/instanceIndex">`instanceIndex`</a>, kept for compatibility.
 * Prefer using <a href="#/p5/instanceIndex">`instanceIndex`</a> directly as a value instead.
 * 
 * Returns the index of the current instance when drawing multiple copies of a
 * shape with <a href="#/p5/model">`model(count)`</a>.
 * 
 * `instanceID()` can only be used inside a p5.strands shader callback.
 * @returns The index of the current instance.
 */
function instanceID(): any;

/**
 * A shader function that performs smooth Hermite interpolation between `0.0`
 * and `1.0`.
 * 
 * This function is equivalent to the GLSL built-in
 * `smoothstep(edge0, edge1, x)` and is available inside p5.strands shader
 * callbacks. It is commonly used to create soft transitions, smooth edges,
 * fades, and anti-aliased effects.
 * 
 * Smoothstep is useful when a threshold or cutoff is needed, but with a
 * gradual transition instead of a hard edge.
 * 
 * - Returns `0.0` when `x` is less than or equal to `edge0`
 * 
 * - Returns `1.0` when `x` is greater than or equal to `edge1`
 * 
 * - Smoothly interpolates between `0.0` and `1.0` when `x` is between them
 * @param edge0 Lower edge of the transition
 * @param edge1 Upper edge of the transition
 * @param x Input value to interpolate
 * @returns A value between `0.0` and `1.0`
 */
function smoothstep(edge0: number, edge1: number, x: number): number;

/**
 * Declares a storage buffer uniform inside a <a href="#/p5.Shader/modify">modify()</a> callback,
 * making a <a href="#/p5/createStorage">createStorage()</a> buffer accessible in the shader.
 * 
 * Pass a `p5.StorageBuffer` (or a function returning one) as the second argument
 * to set it as the default value, applied automatically each frame. Pass a plain
 * object with the same field layout as the buffer's struct elements to declare the
 * schema without binding a specific buffer.
 * 
 * When called without a name, p5.strands automatically uses the name of the
 * variable it is assigned to as the uniform name.
 * 
 * Note: `uniformStorage` is only available when using p5.strands.
 * @param name The name of the storage buffer uniform in the shader.
 * @param bufferOrSchema A storage buffer to bind,
 * a function returning a storage buffer (called each frame), or a plain object
 * describing the struct field layout.
 * @returns A strands node representing the storage buffer.
 */
function uniformStorage(name: string, bufferOrSchema?: P5.StorageBuffer | Function | object): any;
function uniformStorage(bufferOrSchema?: P5.StorageBuffer | Function | object): any;

function getTexture(texture: any, coords: any): any;

function getWorldInputs(callback: Function): void;

function getPixelInputs(callback: Function): void;

function getFinalColor(callback: Function): void;

function getColor(callback: Function): void;

function getObjectInputs(callback: Function): void;

function getCameraInputs(callback: Function): void;

/**
 * Performs linear interpolation between two values.
 * 
 * The `mix()` function linearly interpolates between two values based on a third
 * parameter. It's a GLSL built-in function available in p5.strands shaders.
 * 
 * The function computes: `x * (1 - a) + y * a`
 * 
 * When `a` is 0.0, the function returns `x`. When `a` is 1.0, it returns `y`.
 * Values between 0.0 and 1.0 produce a linear blend between the two values.
 * 
 * This function works with scalars, vectors (vec2, vec3, vec4), and can also
 * accept a boolean for the third parameter to select between the two values.
 * 
 * Note: This function is only available inside shader code created with
 * <a href="#/p5/buildMaterialShader">buildMaterialShader()</a>,
 * <a href="#/p5/buildColorShader">buildColorShader()</a>, or similar functions.
 * For regular p5.js code, use <a href="#/p5/lerp">lerp()</a> instead.
 * @param x first value to interpolate from.
 * @param y second value to interpolate to.
 * @param a interpolation amount (0.0-1.0) or boolean selector.
 * @returns interpolated value.
 */
function mix(x: number | P5.Vector, y: number | P5.Vector, a: number | boolean): number | P5.Vector;

/**
 * Applies a transformation matrix to the coordinate system.
 * 
 * Transformations such as
 * <a href="#/p5/translate">translate()</a>,
 * <a href="#/p5/rotate">rotate()</a>, and
 * <a href="#/p5/scale">scale()</a>
 * use matrix-vector multiplication behind the scenes. A table of numbers,
 * called a matrix, encodes each transformation. The values in the matrix
 * then multiply each point on the canvas, which is represented by a vector.
 * 
 * `applyMatrix()` allows for many transformations to be applied at once. See
 * <a href="https://en.wikipedia.org/wiki/Transformation_matrix" target="_blank">Wikipedia</a>
 * and <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web" target="_blank">MDN</a>
 * for more details about transformations.
 * 
 * There are two ways to call `applyMatrix()` in two and three dimensions.
 * 
 * In 2D mode, the parameters `a`, `b`, `c`, `d`, `e`, and `f`, correspond to
 * elements in the following transformation matrix:
 * 
 * <img style="max-width: 150px" src="assets/transformation-matrix.png"
 * alt="The transformation matrix used when applyMatrix is called in 2D mode."/>
 * 
 * The numbers can be passed individually, as in
 * `applyMatrix(2, 0, 0, 0, 2, 0)`. They can also be passed in an array, as in
 * `applyMatrix([2, 0, 0, 0, 2, 0])`.
 * 
 * In 3D mode, the parameters `a`, `b`, `c`, `d`, `e`, `f`, `g`, `h`, `i`,
 * `j`, `k`, `l`, `m`, `n`, `o`, and `p` correspond to elements in the
 * following transformation matrix:
 * 
 * <img style="max-width: 300px" src="assets/transformation-matrix-4-4.png"
 * alt="The transformation matrix used when applyMatrix is called in 3D mode."/>
 * 
 * The numbers can be passed individually, as in
 * `applyMatrix(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)`. They can
 * also be passed in an array, as in
 * `applyMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1])`.
 * 
 * By default, transformations accumulate. The
 * <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions
 * can be used to isolate transformations within distinct drawing groups.
 * 
 * Note: Transformations are reset at the beginning of the draw loop. Calling
 * `applyMatrix()` inside the <a href="#/p5/draw">draw()</a> function won't
 * cause shapes to transform continuously.
 * @param arr an array containing the elements of the transformation matrix. Its length should be either 6 (2D) or 16 (3D).
 */
function applyMatrix(arr: number[]): void;
function applyMatrix(a: number, b: number, c: number, d: number, e: number, f: number): void;
function applyMatrix(a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number, p: number): void;

/**
 * Converts a `Number` into a `String` with commas to mark units of 1,000.
 * 
 * `nfc()` converts numbers such as 12345 into strings formatted with commas
 * to mark the thousands place, as in `'12,345'`.
 * 
 * The first parameter, `num`, is the number to convert to a string. For
 * example, calling `nfc(12345)` returns the string `'12,345'`.
 * 
 * The second parameter, `right`, is optional. If a number is passed, as in
 * `nfc(12345, 1)`, it sets the minimum number of digits to include to the
 * right of the decimal place. If `right` is smaller than the number of
 * decimal places in `num`, then `num` will be rounded to the given number of
 * decimal places. For example, calling `nfc(12345.67, 1)` returns the string
 * `'12,345.7'`. If `right` is larger than the number of decimal places in
 * `num`, then unused decimal places will be set to 0. For example, calling
 * `nfc(12345.67, 3)` returns the string `'12,345.670'`.
 * @param num number to format.
 * @param right number of digits to include to the right
 * of the decimal point.
 * @returns formatted string.
 */
function nfc(num: number | string, right?: number | string): string;
function nfc(nums: number[], right?: number | string): string[];

/**
 * Constrains a number between a minimum and maximum value.
 * @param n number to constrain.
 * @param low minimum limit.
 * @param high maximum limit.
 * @returns constrained number.
 */
function constrain(n: number, low: number, high: number): number;

/**
 * Begins a drawing group that contains its own styles and transformations.
 * 
 * By default, styles such as <a href="#/p5/fill">fill()</a> and
 * transformations such as <a href="#/p5/rotate">rotate()</a> are applied to
 * all drawing that follows. The `push()` and <a href="#/p5/pop">pop()</a>
 * functions can limit the effect of styles and transformations to a specific
 * group of shapes, images, and text. For example, a group of shapes could be
 * translated to follow the mouse without affecting the rest of the sketch:
 * 
 * `// Begin the drawing group.
 * push();
 * 
 * // Translate the origin to the mouse's position.
 * translate(mouseX, mouseY);
 * 
 * // Style the face.
 * noStroke();
 * fill('green');
 * 
 * // Draw the face.
 * circle(0, 0, 60);
 * 
 * // Style the eyes.
 * fill('white');
 * 
 * // Draw the left eye.
 * ellipse(-20, -20, 30, 20);
 * 
 * // Draw the right eye.
 * ellipse(20, -20, 30, 20);
 * 
 * // End the drawing group.
 * pop();
 * 
 * // Draw a bug.
 * let x = random(0, 100);
 * let y = random(0, 100);
 * text('🦟', x, y);`In the code snippet above, the bug's position isn't affected by
 * `translate(mouseX, mouseY)` because that transformation is contained
 * between `push()` and <a href="#/p5/pop">pop()</a>. The bug moves around
 * the entire canvas as expected.
 * 
 * Note: `push()` and <a href="#/p5/pop">pop()</a> are always called as a
 * pair. Both functions are required to begin and end a drawing group.
 * 
 * `push()` and <a href="#/p5/pop">pop()</a> can also be nested to create
 * subgroups. For example, the code snippet above could be changed to give
 * more detail to the frog’s eyes:
 * 
 * `// Begin the drawing group.
 * push();
 * 
 * // Translate the origin to the mouse's position.
 * translate(mouseX, mouseY);
 * 
 * // Style the face.
 * noStroke();
 * fill('green');
 * 
 * // Draw a face.
 * circle(0, 0, 60);
 * 
 * // Style the eyes.
 * fill('white');
 * 
 * // Draw the left eye.
 * push();
 * translate(-20, -20);
 * ellipse(0, 0, 30, 20);
 * fill('black');
 * circle(0, 0, 8);
 * pop();
 * 
 * // Draw the right eye.
 * push();
 * translate(20, -20);
 * ellipse(0, 0, 30, 20);
 * fill('black');
 * circle(0, 0, 8);
 * pop();
 * 
 * // End the drawing group.
 * pop();
 * 
 * // Draw a bug.
 * let x = random(0, 100);
 * let y = random(0, 100);
 * text('🦟', x, y);`In this version, the code to draw each eye is contained between its own
 * `push()` and <a href="#/p5/pop">pop()</a> functions. Doing so makes it
 * easier to add details in the correct part of a drawing.
 * 
 * `push()` and <a href="#/p5/pop">pop()</a> contain the effects of the
 * following functions:
 * 
 * - <a href="#/p5/fill">fill()</a>
 * 
 * - <a href="#/p5/noFill">noFill()</a>
 * 
 * - <a href="#/p5/noStroke">noStroke()</a>
 * 
 * - <a href="#/p5/stroke">stroke()</a>
 * 
 * - <a href="#/p5/tint">tint()</a>
 * 
 * - <a href="#/p5/noTint">noTint()</a>
 * 
 * - <a href="#/p5/strokeWeight">strokeWeight()</a>
 * 
 * - <a href="#/p5/strokeCap">strokeCap()</a>
 * 
 * - <a href="#/p5/strokeJoin">strokeJoin()</a>
 * 
 * - <a href="#/p5/imageMode">imageMode()</a>
 * 
 * - <a href="#/p5/rectMode">rectMode()</a>
 * 
 * - <a href="#/p5/ellipseMode">ellipseMode()</a>
 * 
 * - <a href="#/p5/colorMode">colorMode()</a>
 * 
 * - <a href="#/p5/textAlign">textAlign()</a>
 * 
 * - <a href="#/p5/textFont">textFont()</a>
 * 
 * - <a href="#/p5/textSize">textSize()</a>
 * 
 * - <a href="#/p5/textLeading">textLeading()</a>
 * 
 * - <a href="#/p5/applyMatrix">applyMatrix()</a>
 * 
 * - <a href="#/p5/resetMatrix">resetMatrix()</a>
 * 
 * - <a href="#/p5/rotate">rotate()</a>
 * 
 * - <a href="#/p5/scale">scale()</a>
 * 
 * - <a href="#/p5/shearX">shearX()</a>
 * 
 * - <a href="#/p5/shearY">shearY()</a>
 * 
 * - <a href="#/p5/translate">translate()</a>
 * 
 * In WebGL mode, `push()` and <a href="#/p5/pop">pop()</a> contain the
 * effects of a few additional styles:
 * 
 * - <a href="#/p5/setCamera">setCamera()</a>
 * 
 * - <a href="#/p5/ambientLight">ambientLight()</a>
 * 
 * - <a href="#/p5/directionalLight">directionalLight()</a>
 * 
 * - <a href="#/p5/pointLight">pointLight()</a> <a href="#/p5/texture">texture()</a>
 * 
 * - <a href="#/p5/specularMaterial">specularMaterial()</a>
 * 
 * - <a href="#/p5/shininess">shininess()</a>
 * 
 * - <a href="#/p5/normalMaterial">normalMaterial()</a>
 * 
 * - <a href="#/p5/shader">shader()</a>
 */
function push(): void;

/**
 * Creates a screen reader-accessible description of elements in the canvas.
 * 
 * Elements are shapes or groups of shapes that create meaning together. For
 * example, a few overlapping circles could make an "eye" element.
 * 
 * The first parameter, `name`, is the name of the element.
 * 
 * The second parameter, `text`, is the description of the element.
 * 
 * The third parameter, `display`, is optional. It determines how the
 * description is displayed. If `LABEL` is passed, as in
 * `describe('A description.', LABEL)`, the description will be visible in
 * a div element next to the canvas. Using `LABEL` creates unhelpful
 * duplicates for screen readers. Only use `LABEL` during development. If
 * `FALLBACK` is passed, as in `describe('A description.', FALLBACK)`, the
 * description will only be visible to screen readers. This is the default
 * mode.
 * 
 * Read
 * <a href="/learn/accessible-labels.html">Writing accessible canvas descriptions</a>
 * to learn more about making sketches accessible.
 * @param name name of the element.
 * @param text description of the element.
 * @param display either LABEL or FALLBACK.
 */
function describeElement(name: string, text: string, display?: typeof P5.FALLBACK | typeof P5.LABEL): void;

/**
 * Returns the number of milliseconds since a sketch started running.
 * 
 * `millis()` keeps track of how long a sketch has been running in
 * milliseconds (thousandths of a second). This information is often
 * helpful for timing events and animations.
 * 
 * If a sketch has a
 * <a href="#/p5/setup">setup()</a> function, then `millis()` begins tracking
 * time before the code in <a href="#/p5/setup">setup()</a> runs.  If a
 * sketch includes asynchronous loading using `async`/`await`, then
 * `millis()` begins tracking time as soon as the asynchronous code
 * starts running.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Get the number of milliseconds the sketch has run.
 * let ms = millis();
 * 
 * // Style the text.
 * textAlign(LEFT, CENTER);
 * textSize(10);
 * textFont('Courier New');
 * 
 * // Display how long it took setup() to be called.
 * text(`Startup time: ${round(ms, 2)} ms`, 5, 50, 90);
 * 
 * describe(
 * `The text 'Startup time: ${round(ms, 2)} ms' written in black on a gray background.`
 * );
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * describe('The text "Running time: S sec" written in black on a gray background. The number S increases as the sketch runs.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Get the number of seconds the sketch has run.
 * let s = millis() / 1000;
 * 
 * // Style the text.
 * textAlign(LEFT, CENTER);
 * textSize(10);
 * textFont('Courier New');
 * 
 * // Display how long the sketch has run.
 * text(`Running time: ${nf(s, 1, 1)} sec`, 5, 50, 90);
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * describe('A white circle oscillates left and right on a gray background.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Get the number of seconds the sketch has run.
 * let s = millis() / 1000;
 * 
 * // Calculate an x-coordinate.
 * let x = 30 * sin(s) + 50;
 * 
 * // Draw the circle.
 * circle(x, 50, 30);
 * }``async function setup() {
 * // Load the GeoJSON.
 * await loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson');
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Get the number of milliseconds the sketch has run.
 * let ms = millis();
 * 
 * // Style the text.
 * textAlign(LEFT, CENTER);
 * textFont('Courier New');
 * textSize(11);
 * 
 * // Display how long it took to load the data.
 * text(`It took ${round(ms, 2)} ms to load the data`, 5, 50, 100);
 * 
 * describe(
 * `The text "It took ${round(ms, 2)} ms to load the data" written in black on a gray background.`
 * );
 * }``millis()` can also be used in shaders with p5.strands. The following example
 * uses `millis()` to create time-based color transitions on a shape.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere whose color shifts over time.');
 * }
 * 
 * function shaderCallback() {
 * let t = millis() * 0.001;
 * let value = 0.5 + 0.5 * sin(t);
 * let skyBlue = [0.2, 0.6, 0.8, 1];
 * let magenta = [0.8, 0.2, 0.6, 1];
 * finalColor.begin();
 * finalColor.set(mix(skyBlue, magenta, value));
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @returns number of milliseconds since starting the sketch.
 */
function millis(): number;

/**
 * Returns `true` if the draw loop is running and `false` if not.
 * 
 * By default, <a href="#/p5/draw">draw()</a> tries to run 60 times per
 * second. Calling <a href="#/p5/noLoop">noLoop()</a> stops
 * <a href="#/p5/draw">draw()</a> from repeating. The draw loop can be
 * restarted by calling <a href="#/p5/loop">loop()</a>.
 * 
 * The `isLooping()` function can be used to check whether a sketch is
 * looping, as in `isLooping() === true`.
 */
function isLooping(): boolean;

/**
 * Creates a screen reader-accessible description of shapes on the canvas.
 * 
 * `gridOutput()` adds a general description, table of shapes, and list of
 * shapes to the web page. The general description includes the canvas size,
 * canvas color, and number of shapes. For example,
 * `gray canvas, 100 by 100 pixels, contains 2 shapes:  1 circle 1 square`.
 * 
 * `gridOutput()` uses its table of shapes as a grid. Each shape in the grid
 * is placed in a cell whose row and column correspond to the shape's location
 * on the canvas. The grid cells describe the color and type of shape at that
 * location. For example, `red circle`. These descriptions can be selected
 * individually to get more details. This is different from
 * <a href="#/p5/textOutput">textOutput()</a>, which uses its table as a list.
 * 
 * A list of shapes follows the table. The list describes the color, type,
 * location, and area of each shape. For example,
 * `red circle, location = middle, area = 3 %`.
 * 
 * The `display` parameter is optional. It determines how the description is
 * displayed. If `LABEL` is passed, as in `gridOutput(LABEL)`, the description
 * will be visible in a div element next to the canvas. Using `LABEL` creates
 * unhelpful duplicates for screen readers. Only use `LABEL` during
 * development. If `FALLBACK` is passed, as in `gridOutput(FALLBACK)`, the
 * description will only be visible to screen readers. This is the default
 * mode.
 * 
 * Read
 * <a href="/learn/accessible-labels.html">Writing accessible canvas descriptions</a>
 * to learn more about making sketches accessible.
 * @param display either FALLBACK or LABEL.
 */
function gridOutput(display?: typeof P5.FALLBACK | typeof P5.LABEL): void;

/**
 * Resizes the canvas to a given width and height.
 * 
 * `resizeCanvas()` immediately clears the canvas and calls
 * <a href="#/p5/redraw">redraw()</a>. It's common to call `resizeCanvas()`
 * within the body of <a href="#/p5/windowResized">windowResized()</a> like
 * so:
 * 
 * `function windowResized() {
 * resizeCanvas(windowWidth, windowHeight);
 * }`The first two parameters, `width` and `height`, set the dimensions of the
 * canvas. They also the values of the <a href="#/p5/width">width</a> and
 * <a href="#/p5/height">height</a> system variables. For example, calling
 * `resizeCanvas(300, 500)` resizes the canvas to 300×500 pixels, then sets
 * <a href="#/p5/width">width</a> to 300 and
 * <a href="#/p5/height">height</a> 500.
 * 
 * The third parameter, `noRedraw`, is optional. If `true` is passed, as in
 * `resizeCanvas(300, 500, true)`, then the canvas will be canvas to 300×500
 * pixels but the <a href="#/p5/redraw">redraw()</a> function won't be called
 * immediately. By default, <a href="#/p5/redraw">redraw()</a> is called
 * immediately when `resizeCanvas()` finishes executing.
 * @param width width of the canvas.
 * @param height height of the canvas.
 * @param noRedraw whether to delay calling
 * <a href="#/p5/redraw">redraw()</a>. Defaults
 * to `false`.
 */
function resizeCanvas(width: number, height: number, noRedraw?: boolean): void;

/**
 * Generates a gif from a sketch and saves it to a file.
 * 
 * `saveGif()` may be called in <a href="#/p5/setup">setup()</a> or at any
 * point while a sketch is running.
 * 
 * The first parameter, `fileName`, sets the gif's file name.
 * 
 * The second parameter, `duration`, sets the gif's duration in seconds.
 * 
 * The third parameter, `options`, is optional. If an object is passed,
 * `saveGif()` will use its properties to customize the gif. `saveGif()`
 * recognizes the properties `delay`, `units`, `silent`,
 * `notificationDuration`, and `notificationID`.
 * @param filename file name of gif.
 * @param duration duration in seconds to capture from the sketch.
 * @param options an object that can contain five more properties:
 */
function saveGif(filename: string, duration: number, options?: { delay?: number; units?: 'seconds' | 'frames'; silent?: boolean; notificationDuration?: number; notificationID?: string }): void;

/**
 * Saves the current canvas as an image.
 * 
 * By default, `saveCanvas()` saves the canvas as a PNG image called
 * `untitled.png`.
 * 
 * The first parameter, `filename`, is optional. It's a string that sets the
 * file's name. If a file extension is included, as in
 * `saveCanvas('drawing.png')`, then the image will be saved using that
 * format.
 * 
 * The second parameter, `extension`, is also optional. It sets the files format.
 * Either `'png'`, `'webp'`, or `'jpg'` can be used. For example, `saveCanvas('drawing', 'jpg')`
 * saves the canvas to a file called `drawing.jpg`.
 * 
 * Note: The browser will either save the file immediately or prompt the user
 * with a dialogue window.
 * @param selectedCanvas reference to a
 * specific HTML5 canvas element.
 * @param filename file name. Defaults to 'untitled'.
 * @param extension file extension, either 'png', 'webp', or 'jpg'. Defaults to 'png'.
 */
function saveCanvas(selectedCanvas: P5.Framebuffer | P5.Element | HTMLCanvasElement, filename?: string, extension?: string): void;
function saveCanvas(filename?: string, extension?: string): void;

/**
 * Clears all transformations applied to the coordinate system.
 */
function resetMatrix(): void;

/**
 * Returns a value in the web browser's local storage.
 * 
 * Web browsers can save small amounts of data using the built-in
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">localStorage object</a>.
 * Data stored in `localStorage` can be retrieved at any point, even after
 * refreshing a page or restarting the browser. Data are stored as key-value
 * pairs.
 * 
 * <a href="#/p5/storeItem">storeItem()</a> makes it easy to store values in
 * `localStorage` and `getItem()` makes it easy to retrieve them.
 * 
 * The first parameter, `key`, is the name of the value to be stored as a
 * string.
 * 
 * The second parameter, `value`, is the value to be retrieved a string. For
 * example, calling `getItem('size')` retrieves the value with the key `size`.
 * 
 * Note: Sensitive data such as passwords or personal information shouldn't be
 * stored in `localStorage`.
 * @param key name of the value.
 * @returns stored item.
 */
function getItem(key: string): string | number | boolean | object | any[];

/**
 * Returns random numbers that can be tuned to feel organic.
 * 
 * Values returned by <a href="#/p5/random">random()</a> and
 * <a href="#/p5/randomGaussian">randomGaussian()</a> can change by large
 * amounts between function calls. By contrast, values returned by `noise()`
 * can be made "smooth". Calls to `noise()` with similar inputs will produce
 * similar outputs. `noise()` is used to create textures, motion, shapes,
 * terrains, and so on. Ken Perlin invented `noise()` while animating the
 * original <em>Tron</em> film in the 1980s.
 * 
 * `noise()` always returns values between 0 and 1. It returns the same value
 * for a given input while a sketch is running. `noise()` produces different
 * results each time a sketch runs. The
 * <a href="#/p5/noiseSeed">noiseSeed()</a> function can be used to generate
 * the same sequence of Perlin noise values each time a sketch runs.
 * 
 * The character of the noise can be adjusted in two ways. The first way is to
 * scale the inputs. `noise()` interprets inputs as coordinates. The sequence
 * of noise values will be smoother when the input coordinates are closer. The
 * second way is to use the <a href="#/p5/noiseDetail">noiseDetail()</a>
 * function.
 * 
 * The version of `noise()` with one parameter computes noise values in one
 * dimension. This dimension can be thought of as space, as in `noise(x)`, or
 * time, as in `noise(t)`.
 * 
 * The version of `noise()` with two parameters computes noise values in two
 * dimensions. These dimensions can be thought of as space, as in
 * `noise(x, y)`, or space and time, as in `noise(x, t)`.
 * 
 * The version of `noise()` with three parameters computes noise values in
 * three dimensions. These dimensions can be thought of as space, as in
 * `noise(x, y, z)`, or space and time, as in `noise(x, y, t)`.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * describe('A black dot moves randomly on a gray square.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Calculate the coordinates.
 * let x = 100 * noise(0.005 * frameCount);
 * let y = 100 * noise(0.005 * frameCount + 10000);
 * 
 * // Draw the point.
 * strokeWeight(5);
 * point(x, y);
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * describe('A black dot moves randomly on a gray square.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Set the noise level and scale.
 * let noiseLevel = 100;
 * let noiseScale = 0.005;
 * 
 * // Scale the input coordinate.
 * let nt = noiseScale * frameCount;
 * 
 * // Compute the noise values.
 * let x = noiseLevel * noise(nt);
 * let y = noiseLevel * noise(nt + 10000);
 * 
 * // Draw the point.
 * strokeWeight(5);
 * point(x, y);
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * describe('A hilly terrain drawn in gray against a black sky.');
 * }
 * 
 * function draw() {
 * // Set the noise level and scale.
 * let noiseLevel = 100;
 * let noiseScale = 0.02;
 * 
 * // Scale the input coordinate.
 * let x = frameCount;
 * let nx = noiseScale * x;
 * 
 * // Compute the noise value.
 * let y = noiseLevel * noise(nx);
 * 
 * // Draw the line.
 * line(x, 0, x, y);
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * describe('A calm sea drawn in gray against a black sky.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Set the noise level and scale.
 * let noiseLevel = 100;
 * let noiseScale = 0.002;
 * 
 * // Iterate from left to right.
 * for (let x = 0; x < 100; x += 1) {
 * // Scale the input coordinates.
 * let nx = noiseScale * x;
 * let nt = noiseScale * frameCount;
 * 
 * // Compute the noise value.
 * let y = noiseLevel * noise(nx, nt);
 * 
 * // Draw the line.
 * line(x, 0, x, y);
 * }
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Set the noise level and scale.
 * let noiseLevel = 255;
 * let noiseScale = 0.01;
 * 
 * // Iterate from top to bottom.
 * for (let y = 0; y < 100; y += 1) {
 * // Iterate from left to right.
 * for (let x = 0; x < 100; x += 1) {
 * // Scale the input coordinates.
 * let nx = noiseScale * x;
 * let ny = noiseScale * y;
 * 
 * // Compute the noise value.
 * let c = noiseLevel * noise(nx, ny);
 * 
 * // Draw the point.
 * stroke(c);
 * point(x, y);
 * }
 * }
 * 
 * describe('A gray cloudy pattern.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * describe('A gray cloudy pattern that changes.');
 * }
 * 
 * function draw() {
 * // Set the noise level and scale.
 * let noiseLevel = 255;
 * let noiseScale = 0.009;
 * 
 * // Iterate from top to bottom.
 * for (let y = 0; y < 100; y += 1) {
 * // Iterate from left to right.
 * for (let x = 0; x < width; x += 1) {
 * // Scale the input coordinates.
 * let nx = noiseScale * x;
 * let ny = noiseScale * y;
 * let nt = noiseScale * frameCount;
 * 
 * // Compute the noise value.
 * let c = noiseLevel * noise(nx, ny, nt);
 * 
 * // Draw the point.
 * stroke(c);
 * point(x, y);
 * }
 * }
 * }``noise()` can also be used in shaders with p5.strands, where it returns
 * values in the range 0 to 1. The example below uses `noise()` inside a
 * filter shader to create a cloud-like texture effect:
 * 
 * `let myFilter;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myFilter = buildFilterShader(shaderCallback);
 * describe('A cloud-like noise pattern.');
 * }
 * 
 * function shaderCallback() {
 * filterColor.begin();
 * let coord = filterColor.texCoord;
 * let t = millis() / 2000;
 * // noise() returns values in the range 0 to 1.
 * let mixFraction = noise(coord.x * 5, coord.y * 5, t);
 * let darkBlue = [0.1, 0.1, 0.3, 1];
 * let lightBlue = [0.9, 0.9, 1, 1];
 * filterColor.set(mix(darkBlue, lightBlue, mixFraction));
 * filterColor.end();
 * }
 * 
 * function draw() {
 * filter(myFilter);
 * }`
 * @param x x-coordinate in noise space.
 * @param y y-coordinate in noise space.
 * @param z z-coordinate in noise space.
 * @returns Perlin noise value at specified coordinates.
 */
function noise(x: number, y?: number, z?: number): number;

/**
 * Changes where rectangles and squares are drawn.
 * 
 * By default, the first two parameters of
 * <a href="#/p5/rect">rect()</a> and <a href="#/p5/square">square()</a>,
 * are the x- and y-coordinates of the shape's upper left corner. The next parameters set
 * the shape's width and height. This is the same as calling
 * `rectMode(CORNER)`.
 * 
 * `rectMode(CORNERS)` also uses the first two parameters as the location of
 * one of the corners. The next parameters are the location of the opposite
 * corner. This mode only works for <a href="#/p5/rect">rect()</a>.
 * 
 * `rectMode(CENTER)` uses the first two parameters as the x- and
 * y-coordinates of the shape's center. The next parameters are its width and
 * height.
 * 
 * `rectMode(RADIUS)` also uses the first two parameters as the x- and
 * y-coordinates of the shape's center. The next parameters are
 * half of the shape's width and height.
 * 
 * The argument passed to `rectMode()` must be written in ALL CAPS because the
 * constants `CENTER`, `RADIUS`, `CORNER`, and `CORNERS` are defined this way.
 * JavaScript is a case-sensitive language.
 * 
 * Calling `rectMode()` without an argument returns the current rectMode, either `CORNER`, `CORNERS`, `CENTER`, or `RADIUS`.
 * @param mode either CORNER, CORNERS, CENTER, or RADIUS
 * @returns the current rectMode.
 */
function rectMode(mode: typeof P5.CENTER | typeof P5.RADIUS | typeof P5.CORNER | typeof P5.CORNERS): typeof P5.CENTER | typeof P5.RADIUS | typeof P5.CORNER | typeof P5.CORNERS;
function rectMode(): typeof P5.CENTER | typeof P5.RADIUS | typeof P5.CORNER | typeof P5.CORNERS;

/**
 * Returns the current month as a number from 1–12.
 * @returns current month between 1 and 12.
 */
function month(): number;

/**
 * Returns a random number or a random element from an array.
 * 
 * `random()` follows uniform distribution, which means that all outcomes are
 * equally likely. When `random()` is used to generate numbers, all
 * numbers in the output range are equally likely to be returned. When
 * `random()` is used to select elements from an array, all elements are
 * equally likely to be chosen.
 * 
 * By default, `random()` produces different results each time a sketch runs.
 * The <a href="#/p5/randomSeed">randomSeed()</a> function can be used to
 * generate the same sequence of numbers or choices each time a sketch runs.
 * 
 * The version of `random()` with no parameters returns a random number from 0
 * up to but not including 1.
 * 
 * The version of `random()` with one parameter works one of two ways. If the
 * argument passed is a number, `random()` returns a random number from 0 up
 * to but not including the number. For example, calling `random(5)` returns
 * values between 0 and 5. If the argument passed is an array, `random()`
 * returns a random element from that array. For example, calling
 * `random(['🦁', '🐯', '🐻'])` returns either a lion, tiger, or bear emoji.
 * 
 * The version of `random()` with two parameters returns a random number from
 * a given range. The arguments passed set the range's lower and upper bounds.
 * For example, calling `random(-5, 10.2)` returns values from -5 up to but
 * not including 10.2.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Get random coordinates between 0 and 100.
 * let x = random(0, 100);
 * let y = random(0, 100);
 * 
 * // Draw a point.
 * strokeWeight(5);
 * point(x, y);
 * 
 * describe('A black dot appears in a random position on a gray square.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Get random coordinates between 0 and 100.
 * let x = random(100);
 * let y = random(100);
 * 
 * // Draw the point.
 * strokeWeight(5);
 * point(x, y);
 * 
 * describe('A black dot appears in a random position on a gray square.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create an array of emoji strings.
 * let animals = ['🦁', '🐯', '🐻'];
 * 
 * // Choose a random element from the array.
 * let choice = random(animals);
 * 
 * // Style the text.
 * textAlign(CENTER);
 * textSize(20);
 * 
 * // Display the emoji.
 * text(choice, 50, 50);
 * 
 * describe('An animal face is displayed at random. Either a lion, tiger, or bear.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * // Slow the frame rate.
 * frameRate(5);
 * 
 * describe('A black dot moves around randomly on a gray square.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Get random coordinates between 0 and 100.
 * let x = random(100);
 * let y = random(100);
 * 
 * // Draw the point.
 * strokeWeight(5);
 * point(x, y);
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * // Slow the frame rate.
 * frameRate(5);
 * 
 * describe('A black dot moves around randomly in the middle of a gray square.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Get random coordinates between 45 and 55.
 * let x = random(45, 55);
 * let y = random(45, 55);
 * 
 * // Draw the point.
 * strokeWeight(5);
 * point(x, y);
 * }``let x = 50;
 * let y = 50;
 * 
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * describe('A black dot moves around randomly leaving a trail.');
 * }
 * 
 * function draw() {
 * // Update x and y randomly.
 * x += random(-1, 1);
 * y += random(-1, 1);
 * 
 * // Draw the point.
 * point(x, y);
 * }``random()` can also be used in shaders with p5.strands. The following example
 * uses `random()` to create varying colors on a shape.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere with randomly varying colors.');
 * }
 * 
 * function shaderCallback() {
 * let r = random();
 * let g = random();
 * let b = random();
 * finalColor.begin();
 * finalColor.set([r, g, b, 1]);
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param min lower bound (inclusive).
 * @param max upper bound (exclusive).
 * @returns random number.
 */
function random(min?: number, max?: number): number;
function random<T>(choices: readonly T[]): T;

/**
 * Loads a JSON file to create an `Object`.
 * 
 * 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, `path`, is a string with the path to the file.
 * Paths to local files should be relative, as in
 * `loadJSON('assets/data.json')`. URLs such as
 * `'https://example.com/data.json'` may be blocked due to browser security.
 * The `path` parameter can also be defined as a `Request`
 * object for more advanced usage.
 * 
 * The second parameter, `successCallback`, is optional. If a function is
 * passed, as in `loadJSON('assets/data.json', handleData)`, then the
 * `handleData()` function will be called once the data loads. The object
 * created from the JSON data will be passed to `handleData()` as its only argument.
 * The return value of the `handleData()` function will be used as the final return
 * value of `loadJSON('assets/data.json', handleData)`.
 * 
 * The third parameter, `failureCallback`, is also optional. If a function is
 * passed, as in `loadJSON('assets/data.json', handleData, handleFailure)`,
 * then the `handleFailure()` function will be called if an error occurs while
 * loading. The `Error` object will be passed to `handleFailure()` as its only
 * argument. The return value of the `handleFailure()` function will be used as the
 * final return value of `loadJSON('assets/data.json', handleData, handleFailure)`.
 * 
 * This function returns a `Promise` and should be used in an `async` setup with
 * `await`. See the examples for the usage syntax.
 * @param path path of the JSON file to be loaded.
 * @param successCallback function to call once the data is loaded. Will be passed the object.
 * @param errorCallback function to call if the data fails to load. Will be passed an `Error` event object.
 * @returns object containing the loaded data.
 */
function loadJSON(path: string | Request, successCallback?: Function, errorCallback?: Function): Promise<object>;

/**
 * Draws an arc.
 * 
 * An arc is a section of an ellipse defined by the `x`, `y`, `w`, and
 * `h` parameters. `x` and `y` set the location of the arc's center. `w` and
 * `h` set the arc's width and height. See
 * <a href="#/p5/ellipse">ellipse()</a> and
 * <a href="#/p5/ellipseMode">ellipseMode()</a> for more details.
 * 
 * The fifth and sixth parameters, `start` and `stop`, set the angles
 * between which to draw the arc. Arcs are always drawn clockwise from
 * `start` to `stop`. Angles are always given in radians.
 * 
 * The seventh parameter, `mode`, is optional. It determines the arc's fill
 * style. The fill modes are a semi-circle (`OPEN`), a closed semi-circle
 * (`CHORD`), or a closed pie segment (`PIE`).
 * 
 * The eighth parameter, `detail`, is also optional. It determines how many
 * vertices are used to draw the arc in WebGL mode. The default value is 25.
 * @param x x-coordinate of the arc's ellipse.
 * @param y y-coordinate of the arc's ellipse.
 * @param w width of the arc's ellipse by default.
 * @param h height of the arc's ellipse by default.
 * @param start angle to start the arc, specified in radians.
 * @param stop angle to stop the arc, specified in radians.
 * @param mode optional parameter to determine the way of drawing
 * the arc. either CHORD, PIE, or OPEN.
 * @param detail optional parameter for WebGL mode only. This is to
 * specify the number of vertices that makes up the
 * perimeter of the arc. Default value is 25. Won't
 * draw a stroke for a detail of more than 50.
 */
function arc(x: number, y: number, w: number, h: number, start: number, stop: number, mode?: typeof P5.CHORD | typeof P5.PIE | typeof P5.OPEN, detail?: number): void;

/**
 * Removes the default canvas.
 * 
 * By default, a 100×100 pixels canvas is created without needing to call
 * <a href="#/p5/createCanvas">createCanvas()</a>. `noCanvas()` removes the
 * default canvas for sketches that don't need it.
 */
function noCanvas(): void;

/**
 * Creates a new <a href="#/p5.Element">p5.Element</a> object.
 * 
 * The first parameter, `tag`, is a string an HTML tag such as `'h5'`.
 * 
 * The second parameter, `content`, is optional. It's a string that sets the
 * HTML content to insert into the new element. New elements have no content
 * by default.
 * @param tag tag for the new element.
 * @param content HTML content to insert into the element.
 * @returns new <a href="#/p5.Element">p5.Element</a> object.
 */
function createElement(tag: string, content?: string): P5.Element;

/**
 * Calculates the arc sine of a number.
 * 
 * `asin()` is the inverse of <a href="#/p5/sin">sin()</a>. It expects input
 * values in the range of -1 to 1. By default, `asin()` returns values in the
 * range -π ÷ 2 (about -1.57) to π ÷ 2 (about 1.57). If
 * the <a href="#/p5/angleMode">angleMode()</a> is `DEGREES` then values are
 * returned in the range -90 to 90.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Calculate sin() and asin() values.
 * let a = PI / 3;
 * let s = sin(a);
 * let as = asin(s);
 * 
 * // Display the values.
 * text(`${round(a, 3)}`, 35, 25);
 * text(`${round(s, 3)}`, 35, 50);
 * text(`${round(as, 3)}`, 35, 75);
 * 
 * describe('The numbers 1.047, 0.866, and 1.047 written on separate rows.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Calculate sin() and asin() values.
 * let a = PI + PI / 3;
 * let s = sin(a);
 * let as = asin(s);
 * 
 * // Display the values.
 * text(`${round(a, 3)}`, 35, 25);
 * text(`${round(s, 3)}`, 35, 50);
 * text(`${round(as, 3)}`, 35, 75);
 * 
 * describe('The numbers 4.189, -0.866, and -1.047 written on separate rows.');
 * }``asin()` can also be used in shaders with p5.strands. The following example
 * uses `asin()` to create a smooth color transition on a shape.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere that smoothly shifts between green and purple.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
 * let t = millis() * 0.001;
 * 
 * // asin(sin(t)) returns a value between -PI/2 and PI/2.
 * // Dividing by PI/2 normalizes to -1 to 1, then adding 1 and multiplying by 0.5
 * // remaps to the 0 to 1 range.
 * let value = (asin(sin(t)) / (PI / 2) + 1) * 0.5;
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let green = [0, 1, 0.5, 1];
 * let purple = [0.5, 0, 1, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between green (when value = 0) and purple (when value = 1).
 * finalColor.set(mix(green, purple, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param value value whose arc sine is to be returned.
 * @returns arc sine of the given value.
 */
function asin(value: number): number;

/**
 * Calculates the distance between two points.
 * 
 * The version of `dist()` with four parameters calculates distance in two
 * dimensions.
 * 
 * The version of `dist()` with six parameters calculates distance in three
 * dimensions.
 * 
 * Use <a href="#/p5.Vector/dist">p5.Vector.dist()</a> to calculate the
 * distance between two <a href="#/p5.Vector">p5.Vector</a> objects.
 * @param x1 x-coordinate of the first point.
 * @param y1 y-coordinate of the first point.
 * @param x2 x-coordinate of the second point.
 * @param y2 y-coordinate of the second point.
 * @returns distance between the two points.
 */
function dist(x1: number, y1: number, x2: number, y2: number): number;
function dist(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number): number;

/**
 * Changes the cursor's appearance.
 * 
 * The first parameter, `type`, sets the type of cursor to display. The
 * built-in options are `ARROW`, `CROSS`, `HAND`, `MOVE`, `TEXT`, and `WAIT`.
 * `cursor()` also recognizes standard CSS cursor properties passed as
 * strings: `'help'`, `'wait'`, `'crosshair'`, `'not-allowed'`, `'zoom-in'`,
 * and `'grab'`. If the path to an image is passed, as in
 * `cursor('assets/target.png')`, then the image will be used as the cursor.
 * Images must be in .cur, .gif, .jpg, .jpeg, or .png format and should be <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#icon_size_limits">at most 32 by 32 pixels large.</a>
 * 
 * The parameters `x` and `y` are optional. If an image is used for the
 * cursor, `x` and `y` set the location pointed to within the image. They are
 * both 0 by default, so the cursor points to the image's top-left corner. `x`
 * and `y` must be less than the image's width and height, respectively.
 * 
 * Calling `cursor()` without an argument returns the current cursor type as a string.
 * @param type Built-in: either ARROW, CROSS, HAND, MOVE, TEXT, or WAIT.
 * Native CSS properties: 'grab', 'progress', and so on.
 * Path to cursor image.
 * @param x horizontal active spot of the cursor.
 * @param y vertical active spot of the cursor.
 * @returns the current cursor type
 */
function cursor(type: typeof P5.ARROW | typeof P5.CROSS | typeof P5.HAND | typeof P5.MOVE | typeof P5.TEXT | typeof P5.WAIT | string, x?: number, y?: number): typeof P5.ARROW | typeof P5.CROSS | typeof P5.HAND | typeof P5.MOVE | typeof P5.TEXT | typeof P5.WAIT | string;
function cursor(): typeof P5.ARROW | typeof P5.CROSS | typeof P5.HAND | typeof P5.MOVE | typeof P5.TEXT | typeof P5.WAIT | string;

/**
 * Converts a `Boolean` or `Number` to `String`.
 * 
 * `str()` converts values to strings. See the
 * <a href="#/p5/String">String</a> reference page for guidance on using
 * template literals instead.
 * 
 * The parameter, `n`, is the value to convert. If `n` is a Boolean, as in
 * `str(false)` or `str(true)`, then the value will be returned as a string,
 * as in `'false'` or `'true'`. If `n` is a number, as in `str(123)`, then its
 * value will be returned as a string, as in `'123'`. If an array is passed,
 * as in `str([12.34, 56.78])`, then an array of strings will be returned.
 * @param n value to convert.
 * @returns converted string.
 */
function str(n: string | boolean | number): string;

/**
 * Returns the current second as a number from 0–59.
 * @returns current second between 0 and 59.
 */
function second(): number;

/**
 * Creates a custom <a href="#/p5.Geometry">p5.Geometry</a> object from
 * simpler 3D shapes.
 * 
 * `buildGeometry()` helps with creating complex 3D shapes from simpler ones
 * such as <a href="#/p5/sphere">sphere()</a>. It can help to make sketches
 * more performant. For example, if a complex 3D shape doesn’t change while a
 * sketch runs, then it can be created with `buildGeometry()`. Creating a
 * <a href="#/p5.Geometry">p5.Geometry</a> object once and then drawing it
 * will run faster than repeatedly drawing the individual pieces.
 * 
 * The parameter, `callback`, is a function with the drawing instructions for
 * the new <a href="#/p5.Geometry">p5.Geometry</a> object. It will be called
 * once to create the new 3D shape.
 * Note: `buildGeometry()` can only be used in WebGL mode.
 * @param callback function that draws the shape.
 * @returns new 3D shape.
 */
function buildGeometry(callback: Function): P5.Geometry;

/**
 * Converts a `Boolean`, `String`, or `Number` to its byte value.
 * 
 * `byte()` converts a value to an integer (whole number) between -128 and
 * 127. Values greater than 127 wrap around while negative values are
 * unchanged. For example, 128 becomes -128 and -129 remains the same.
 * 
 * The parameter, `n`, is the value to convert. If `n` is a Boolean, as in
 * `byte(false)` or `byte(true)`, the number 0 (`false`) or 1 (`true`) will be
 * returned. If `n` is a string or number, as in `byte('256')` or `byte(256)`,
 * then the byte value will be returned. Decimal values are ignored. If an
 * array is passed, as in `byte([true, 123, '456'])`, then an array of byte
 * values will be returned.
 * 
 * Note: If a value can't be converted to a number, as in `byte('giraffe')`,
 * then the value `NaN` (not a number) will be returned.
 * @param n value to convert.
 * @returns converted byte value.
 */
function byte(n: string | boolean | number): number;
function byte(ns: any[]): number[];

/**
 * Calculates coordinates along a Bézier curve using interpolation.
 * 
 * `bezierPoint()` calculates coordinates along a Bézier curve using the
 * anchor and control points. It expects points in the same order as the
 * <a href="#/p5/bezier">bezier()</a> function. `bezierPoint()` works one axis
 * at a time. Passing the anchor and control points' x-coordinates will
 * calculate the x-coordinate of a point on the curve. Passing the anchor and
 * control points' y-coordinates will calculate the y-coordinate of a point on
 * the curve.
 * 
 * The first parameter, `a`, is the coordinate of the first anchor point.
 * 
 * The second and third parameters, `b` and `c`, are the coordinates of the
 * control points.
 * 
 * The fourth parameter, `d`, is the coordinate of the last anchor point.
 * 
 * The fifth parameter, `t`, is the amount to interpolate along the curve. 0
 * is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
 * between them.
 * @param a coordinate of first anchor point.
 * @param b coordinate of first control point.
 * @param c coordinate of second control point.
 * @param d coordinate of second anchor point.
 * @param t amount to interpolate between 0 and 1.
 * @returns coordinate of the point on the curve.
 */
function bezierPoint(a: number, b: number, c: number, d: number, t: number): number;

/**
 * Sets the color of a pixel or draws an image to the canvas.
 * 
 * `set()` is easy to use but it's not as fast as
 * <a href="#/p5/pixels">pixels</a>. Use <a href="#/p5/pixels">pixels</a>
 * to set many pixel values.
 * 
 * `set()` interprets the first two parameters as x- and y-coordinates. It
 * interprets the last parameter as a grayscale value, a `[R, G, B, A]` pixel
 * array, a <a href="#/p5.Color">p5.Color</a> object, or a
 * <a href="#/p5.Image">p5.Image</a> object. If an image is passed, the first
 * two parameters set the coordinates for the image's upper-left corner,
 * regardless of the current <a href="#/p5/imageMode">imageMode()</a>.
 * 
 * <a href="#/p5/updatePixels">updatePixels()</a> must be called after using
 * `set()` for changes to appear.
 * @param x x-coordinate of the pixel.
 * @param y y-coordinate of the pixel.
 * @param c grayscale value | pixel array |
 * <a href="#/p5.Color">p5.Color</a> object | <a href="#/p5.Image">p5.Image</a> to copy.
 */
function set(x: number, y: number, c: number | number[] | object): void;

/**
 * Loads a 3D model to create a
 * <a href="#/p5.Geometry">p5.Geometry</a> object.
 * 
 * `loadModel()` can load 3D models from OBJ and STL files. Once the model is
 * loaded, it can be displayed with the
 * <a href="#/p5/model">model()</a> function, as in `model(shape)`.
 * 
 * There are three ways to call `loadModel()` with optional parameters to help
 * process the model.
 * 
 * The first parameter, `path`, is a `String` with the path to the file. Paths
 * to local files should be relative, as in `loadModel('assets/model.obj')`.
 * URLs such as `'https://example.com/model.obj'` may be blocked due to browser
 * security. The `path` parameter can also be defined as a `Request`
 * object for more advanced usage.
 * Note: When loading a `.obj` file that references materials stored in
 * `.mtl` files, p5.js will attempt to load and apply those materials.
 * To ensure that the `.obj` file reads the `.mtl` file correctly include the
 * `.mtl` file alongside it.
 * 
 * The first way to call `loadModel()` has three optional parameters after the
 * file path. The first optional parameter, `successCallback`, is a function
 * to call once the model loads. For example,
 * `loadModel('assets/model.obj', handleModel)` will call the `handleModel()`
 * function once the model loads. The second optional parameter,
 * `failureCallback`, is a function to call if the model fails to load. For
 * example, `loadModel('assets/model.obj', handleModel, handleFailure)` will
 * call the `handleFailure()` function if an error occurs while loading. The
 * third optional parameter, `fileType`, is the model’s file extension as a
 * string. For example,
 * `loadModel('assets/model', handleModel, handleFailure, '.obj')` will try to
 * load the file model as a `.obj` file.
 * 
 * The second way to call `loadModel()` has four optional parameters after the
 * file path. The first optional parameter is a `Boolean` value. If `true` is
 * passed, as in `loadModel('assets/model.obj', true)`, then the model will be
 * resized to ensure it fits the canvas. The next three parameters are
 * `successCallback`, `failureCallback`, and `fileType` as described above.
 * 
 * The third way to call `loadModel()` has one optional parameter after the
 * file path. The optional parameter, `options`, is an `Object` with options,
 * as in `loadModel('assets/model.obj', options)`. The `options` object can
 * have the following properties:
 * 
 * `let options = {
 * // Enables standardized size scaling during loading if set to true.
 * normalize: true,
 * 
 * // Function to call once the model loads.
 * successCallback: handleModel,
 * 
 * // Function to call if an error occurs while loading.
 * failureCallback: handleError,
 * 
 * // Model's file extension.
 * fileType: '.stl',
 * 
 * // Flips the U texture coordinates of the model.
 * flipU: false,
 * 
 * // Flips the V texture coordinates of the model.
 * flipV: false
 * };
 * 
 * // Pass the options object to loadModel().
 * loadModel('assets/model.obj', options);`This function returns a `Promise` and should be used in an `async` setup with
 * `await`. See the examples for the usage syntax.
 * 
 * Note: There’s no support for colored STL files. STL files with color will
 * be rendered without color.
 * @param path path of the model to be loaded.
 * @param fileType model’s file extension. Either `'.obj'` or `'.stl'`.
 * @param normalize if `true`, scale the model to fit the canvas.
 * @param successCallback function to call once the model is loaded. Will be passed
 * the <a href="#/p5.Geometry">p5.Geometry</a> object.
 * @param failureCallback function to call if the model fails to load. Will be passed an `Error` event object.
 * @returns the <a href="#/p5.Geometry">p5.Geometry</a> object
 */
function loadModel(path: string | Request, fileType?: string, normalize?: boolean, successCallback?: (arg0: P5.Geometry) => void, failureCallback?: (arg0: Event) => void): Promise<P5.Geometry>;
function loadModel(path: string | Request, fileType?: string, successCallback?: (arg0: P5.Geometry) => void, failureCallback?: (arg0: Event) => void): Promise<P5.Geometry>;
function loadModel(path: string | Request, options?: { fileType?: string; successCallback?: (arg0: P5.Geometry) => void; failureCallback?: (arg0: Event) => void; normalize?: boolean; flipU?: boolean; flipV?: boolean }): Promise<P5.Geometry>;

/**
 * Runs the code in <a href="#/p5/draw">draw()</a> once.
 * 
 * By default, <a href="#/p5/draw">draw()</a> tries to run 60 times per
 * second. Calling <a href="#/p5/noLoop">noLoop()</a> stops
 * <a href="#/p5/draw">draw()</a> from repeating. Calling `redraw()` will
 * execute the code in the <a href="#/p5/draw">draw()</a> function a set
 * number of times. `await` the result of `redraw` to make sure it has finished.
 * 
 * The parameter, `n`, is optional. If a number is passed, as in `redraw(5)`,
 * then the draw loop will run the given number of times. By default, `n` is
 * 1.
 * @param n number of times to run <a href="#/p5/draw">draw()</a>. Defaults to 1.
 */
function redraw(n?: number): Promise<void>;

/**
 * Returns the current year as a number such as 1999.
 * @returns current year.
 */
function year(): number;

/**
 * Converts a `Number` into a `String` with a plus or minus sign.
 * 
 * `nfp()` converts numbers such as 123 into strings formatted with a `+` or
 * `-` symbol to mark whether they're positive or negative, as in `'+123'`.
 * 
 * The first parameter, `num`, is the number to convert to a string. For
 * example, calling `nfp(123.45)` returns the string `'+123.45'`. If an array
 * of numbers is passed, as in `nfp([123.45, -6.78])`, an array of formatted
 * strings will be returned.
 * 
 * The second parameter, `left`, is optional. If a number is passed, as in
 * `nfp(123.45, 4)`, it sets the minimum number of digits to include to the
 * left of the decimal place. If `left` is larger than the number of digits in
 * `num`, then unused digits will be set to 0. For example, calling
 * `nfp(123.45, 4)` returns the string `'+0123.45'`.
 * 
 * The third parameter, `right`, is also optional. If a number is passed, as
 * in `nfp(123.45, 4, 1)`, it sets the minimum number of digits to include to
 * the right of the decimal place. If `right` is smaller than the number of
 * decimal places in `num`, then `num` will be rounded to the given number of
 * decimal places.  For example, calling `nfp(123.45, 4, 1)` returns the
 * string `'+0123.5'`. If `right` is larger than the number of decimal places
 * in `num`, then unused decimal places will be set to 0.  For example,
 * calling `nfp(123.45, 4, 3)` returns the string `'+0123.450'`.
 * @param num number to format.
 * @param left number of digits to include to the left of the
 * decimal point.
 * @param right number of digits to include to the right of the
 * decimal point.
 * @returns formatted string.
 */
function nfp(num: number, left?: number, right?: number): string;
function nfp(nums: number[], left?: number, right?: number): string[];

/**
 * Draws certain features with smooth (antialiased) edges.
 * 
 * `smooth()` is active by default. In 2D mode,
 * <a href="#/p5/noSmooth">noSmooth()</a> is helpful for scaling up images
 * without blurring. The functions don't affect shapes or fonts.
 * 
 * In WebGL mode, <a href="#/p5/noSmooth">noSmooth()</a> causes all shapes to
 * be drawn with jagged (aliased) edges. The functions don't affect images or
 * fonts.
 */
function smooth(): void;

/**
 * Removes all items in the web browser's local storage.
 * 
 * Web browsers can save small amounts of data using the built-in
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">localStorage object</a>.
 * Data stored in `localStorage` can be retrieved at any point, even after
 * refreshing a page or restarting the browser. Data are stored as key-value
 * pairs. Calling `clearStorage()` removes all data from `localStorage`.
 * 
 * Note: Sensitive data such as passwords or personal information shouldn't be
 * stored in `localStorage`.
 */
function clearStorage(): void;

/**
 * Removes all elements created by p5.js, including any event handlers.
 * 
 * There are two exceptions:
 * canvas elements created by <a href="#/p5/createCanvas">createCanvas()</a>
 * and <a href="#/p5.Renderer">p5.Render</a> objects created by
 * <a href="#/p5/createGraphics">createGraphics()</a>.
 */
function removeElements(): void;

/**
 * Begins adding vertices to a custom shape.
 * 
 * The `beginShape()` and <a href="#/p5/endShape">endShape()</a> functions
 * allow for creating custom shapes in 2D or 3D. `beginShape()` begins adding
 * vertices to a custom shape and <a href="#/p5/endShape">endShape()</a> stops
 * adding them.
 * 
 * The parameter, `kind`, sets the kind of shape to make. The available kinds are:
 * 
 * - `PATH` (the default) to draw shapes by tracing out the path along their edges.
 * 
 * - `POINTS` to draw a series of points.
 * 
 * - `LINES` to draw a series of unconnected line segments.
 * 
 * - `TRIANGLES` to draw a series of separate triangles.
 * 
 * - `TRIANGLE_FAN` to draw a series of connected triangles sharing the first vertex in a fan-like fashion.
 * 
 * - `TRIANGLE_STRIP` to draw a series of connected triangles in strip fashion.
 * 
 * - `QUADS` to draw a series of separate quadrilaterals (quads).
 * 
 * - `QUAD_STRIP` to draw quad strip using adjacent edges to form the next quad.
 * 
 * After calling `beginShape()`, shapes can be built by calling
 * <a href="#/p5/vertex">vertex()</a>,
 * <a href="#/p5/bezierVertex">bezierVertex()</a>, and/or
 * <a href="#/p5/splineVertex">splineVertex()</a>. Calling
 * <a href="#/p5/endShape">endShape()</a> will stop adding vertices to the
 * shape. Each shape will be outlined with the current stroke color and filled
 * with the current fill color.
 * 
 * Transformations such as <a href="#/p5/translate">translate()</a>,
 * <a href="#/p5/rotate">rotate()</a>, and
 * <a href="#/p5/scale">scale()</a> don't work between `beginShape()` and
 * <a href="#/p5/endShape">endShape()</a>. It's also not possible to use
 * other shapes, such as <a href="#/p5/ellipse">ellipse()</a> or
 * <a href="#/p5/rect">rect()</a>, between `beginShape()` and
 * <a href="#/p5/endShape">endShape()</a>.
 * @param kind either POINTS, LINES, TRIANGLES, TRIANGLE_FAN
 * TRIANGLE_STRIP, QUADS, QUAD_STRIP or PATH. Defaults to PATH.
 */
function beginShape(kind?: typeof P5.POINTS | typeof P5.LINES | typeof P5.TRIANGLES | typeof P5.TRIANGLE_FAN | typeof P5.TRIANGLE_STRIP | typeof P5.QUADS | typeof P5.QUAD_STRIP | typeof P5.PATH): void;

/**
 * The `saveObj()` function exports `p5.Geometry` objects as
 * 3D models in the Wavefront .obj file format.
 * This way, you can use the 3D shapes you create in p5.js in other software
 * for rendering, animation, 3D printing, or more.
 * 
 * The exported .obj file will include the faces and vertices of the `p5.Geometry`,
 * as well as its texture coordinates and normals, if it has them.
 * @param fileName The name of the file to save the model as.
 * If not specified, the default file name will be 'model.obj'.
 */
function saveObj(fileName?: string): void;

/**
 * Returns a random number fitting a Gaussian, or normal, distribution.
 * 
 * Normal distributions look like bell curves when plotted. Values from a
 * normal distribution cluster around a central value called the mean. The
 * cluster's standard deviation describes its spread.
 * 
 * By default, `randomGaussian()` produces different results each time a
 * sketch runs. The <a href="#/p5/randomSeed">randomSeed()</a> function can be
 * used to generate the same sequence of numbers each time a sketch runs.
 * 
 * There's no minimum or maximum value that `randomGaussian()` might return.
 * Values far from the mean are very unlikely and values near the mean are
 * very likely.
 * 
 * The version of `randomGaussian()` with no parameters returns values with a
 * mean of 0 and standard deviation of 1.
 * 
 * The version of `randomGaussian()` with one parameter interprets the
 * argument passed as the mean. The standard deviation is 1.
 * 
 * The version of `randomGaussian()` with two parameters interprets the first
 * argument passed as the mean and the second as the standard deviation.
 * @param mean mean.
 * @param sd standard deviation.
 * @returns random number.
 */
function randomGaussian(mean?: number, sd?: number): number;

/**
 * Helpers for create methods.
 */
function addElement(): void;
function addElement(): void;

/**
 * Defines a shape that will mask any shapes drawn afterward.
 * 
 * The first parameter, `callback`, is a function that defines the mask.
 * Any shapes drawn in  `callback` will add to the mask shape. The mask
 * will apply to anything drawn after `clip()` is called.
 * 
 * The second parameter, `options`, is optional. If an object with an `invert`
 * property is passed, as in `beginClip({ invert: true })`, it will be used to
 * set the masking mode. `{ invert: true }` inverts the mask, creating holes
 * in shapes that are masked. `invert` is `false` by default.
 * 
 * Masks can be contained between the
 * <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions.
 * Doing so allows unmasked shapes to be drawn after masked shapes.
 * 
 * Masks can also be defined with <a href="#/p5/beginClip">beginClip()</a>
 * and <a href="#/p5/endClip">endClip()</a>.
 * @param callback a function that draws the mask shape.
 * @param options an object containing clip settings.
 */
function clip(callback: Function, options?: { invert?: boolean }): void;

/**
 * Calculates the arc tangent of a number.
 * 
 * `atan()` is the inverse of <a href="#/p5/tan">tan()</a>. It expects input
 * values in the range of -Infinity to Infinity. By default, `atan()` returns
 * values in the range -π ÷ 2 (about -1.57) to π ÷ 2
 * (about 1.57). If the <a href="#/p5/angleMode">angleMode()</a> is `DEGREES`
 * then values are returned in the range -90 to 90.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Calculate tan() and atan() values.
 * let a = PI / 3;
 * let t = tan(a);
 * let at = atan(t);
 * 
 * // Display the values.
 * text(`${round(a, 3)}`, 35, 25);
 * text(`${round(t, 3)}`, 35, 50);
 * text(`${round(at, 3)}`, 35, 75);
 * 
 * describe('The numbers 1.047, 1.732, and 1.047 written on separate rows.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Calculate tan() and atan() values.
 * let a = PI + PI / 3;
 * let t = tan(a);
 * let at = atan(t);
 * 
 * // Display the values.
 * text(`${round(a, 3)}`, 35, 25);
 * text(`${round(t, 3)}`, 35, 50);
 * text(`${round(at, 3)}`, 35, 75);
 * 
 * describe('The numbers 4.189, 1.732, and 1.047 written on separate rows.');
 * }``atan()` can also be used in shaders with p5.strands. The following example
 * uses `atan()` to create a soft color transition on a shape.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere that softly shifts between pink and lime.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
 * // sin() oscillates the input between -5 and 5, so atan() gets both positive and negative values.
 * let t = sin(millis() * 0.001) * 5;
 * 
 * // atan(t) returns values between -PI/2 and PI/2.
 * // Dividing by PI/2 normalizes to -1 to 1, then adding 1 and multiplying by 0.5
 * // remaps to the 0 to 1 range.
 * // atan() compresses the wide range of t into a smooth S-curve (soft clipping).
 * let value = (atan(t) / (PI / 2) + 1) * 0.5;
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let pink = [1, 0, 0.5, 1];
 * let lime = [0.5, 1, 0, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between pink (when value = 0) and lime (when value = 1).
 * // atan() creates a soft, eased transition instead of a linear blend.
 * finalColor.set(mix(pink, lime, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param value value whose arc tangent is to be returned.
 * @returns arc tangent of the given value.
 */
function atan(value: number): number;

/**
 * Creates a <a href="#/p5.Graphics">p5.Graphics</a> object.
 * 
 * `createGraphics()` creates an offscreen drawing canvas (graphics buffer)
 * and returns it as a <a href="#/p5.Graphics">p5.Graphics</a> object. Drawing
 * to a separate graphics buffer can be helpful for performance and for
 * organizing code.
 * 
 * The first two parameters, `width` and `height`, are optional. They set the
 * dimensions of the <a href="#/p5.Graphics">p5.Graphics</a> object. For
 * example, calling `createGraphics(900, 500)` creates a graphics buffer
 * that's 900×500 pixels.
 * 
 * The third parameter is also optional. If either of the constants `P2D` or
 * `WEBGL` is passed, as in `createGraphics(900, 500, WEBGL)`, then it will set
 * the <a href="#/p5.Graphics">p5.Graphics</a> object's rendering mode. If an
 * existing
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement" target="_blank">HTMLCanvasElement</a>
 * is passed, as in `createGraphics(900, 500, myCanvas)`, then it will be used
 * by the graphics buffer.
 * 
 * The fourth parameter is also optional. If an existing
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement" target="_blank">HTMLCanvasElement</a>
 * is passed, as in `createGraphics(900, 500, WEBGL, myCanvas)`, then it will be
 * used by the graphics buffer.
 * 
 * Note: In WebGL mode, the <a href="#/p5.Graphics">p5.Graphics</a> object
 * will use a WebGL2 context if it's supported by the browser. Check the
 * <a href="#/p5/webglVersion">webglVersion</a> system variable to check what
 * version is being used, or call `setAttributes({ version: 1 })` to create a
 * WebGL1 context.
 * @param width width of the graphics buffer.
 * @param height height of the graphics buffer.
 * @param renderer either P2D or WEBGL. Defaults to P2D.
 * @param canvas existing canvas element that should be
 * used for the graphics buffer..
 * @returns new graphics buffer.
 */
function createGraphics(width: number, height: number, renderer?: typeof P5.P2D | typeof P5.WEBGL, canvas?: HTMLCanvasElement): P5.Graphics;
function createGraphics(width: number, height: number, canvas?: HTMLCanvasElement): P5.Graphics;

/**
 * Clears a <a href="#/p5.Geometry">p5.Geometry</a> object from the graphics
 * processing unit (GPU) memory.
 * 
 * <a href="#/p5.Geometry">p5.Geometry</a> objects can contain lots of data
 * about their vertices, surface normals, colors, and so on. Complex 3D shapes
 * can use lots of memory which is a limited resource in many GPUs. Calling
 * `freeGeometry()` works with <a href="#/p5.Geometry">p5.Geometry</a> objects
 * created with <a href="#/p5/buildGeometry">buildGeometry()</a> and
 * <a href="#/p5/loadModel">loadModel()</a>.
 * 
 * The parameter, `geometry`, is the <a href="#/p5.Geometry">p5.Geometry</a>
 * object to be freed.
 * 
 * Note: A <a href="#/p5.Geometry">p5.Geometry</a> object can still be drawn
 * after its resources are cleared from GPU memory. It may take longer to draw
 * the first time it’s redrawn.
 * 
 * Note: `freeGeometry()` can only be used in WebGL mode.
 * @param geometry 3D shape whose resources should be freed.
 */
function freeGeometry(geometry: P5.Geometry): void;

/**
 * Sets the number of frames to draw per second.
 * 
 * Calling `frameRate()` with one numeric argument, as in `frameRate(30)`,
 * attempts to draw 30 frames per second (FPS). The target frame rate may not
 * be achieved depending on the sketch's processing needs. Most computers
 * default to a frame rate of 60 FPS. Frame rates of 24 FPS and above are
 * fast enough for smooth animations.
 * 
 * Calling `frameRate()` without an argument returns the current frame rate.
 * The value returned is an approximation.
 * @param fps number of frames to draw per second.
 * @returns current frame rate.
 */
function frameRate(fps: number): number;
function frameRate(): number;

/**
 * Sets the style for rendering the ends of lines.
 * 
 * The caps for line endings are either rounded (`ROUND`), squared
 * (`SQUARE`), or extended (`PROJECT`). The default cap is `ROUND`.
 * 
 * The argument passed to `strokeCap()` must be written in ALL CAPS because
 * the constants `ROUND`, `SQUARE`, and `PROJECT` are defined this way.
 * JavaScript is a case-sensitive language.
 * @param cap either ROUND, SQUARE, or PROJECT
 */
function strokeCap(cap: typeof P5.ROUND | typeof P5.SQUARE | typeof P5.PROJECT): void;

/**
 * Calculates the value of Euler's number e (2.71828...) raised to the power
 * of a number.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Top-left.
 * let d = exp(1);
 * circle(10, 10, d);
 * 
 * // Left-center.
 * d = exp(2);
 * circle(20, 20, d);
 * 
 * // Right-center.
 * d = exp(3);
 * circle(40, 40, d);
 * 
 * // Bottom-right.
 * d = exp(4);
 * circle(80, 80, d);
 * 
 * describe('A series of circles that grow exponentially from top left to bottom right.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * describe('A series of black dots that grow exponentially from left to right.');
 * }
 * 
 * function draw() {
 * // Invert the y-axis.
 * scale(1, -1);
 * translate(0, -100);
 * 
 * // Calculate the coordinates.
 * let x = frameCount;
 * let y = 0.005 * exp(x * 0.1);
 * 
 * // Draw a point.
 * point(x, y);
 * }``exp()` can also be used in shaders with p5.strands. The following example
 * uses `exp()` to create an accelerating color transition on a shape.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere that brightens with accelerating speed.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.0005 to slow it.
 * let t = millis() * 0.0005;
 * 
 * // exp(t) grows slowly at first, then accelerates (exponential growth).
 * // Multiply by 0.01 to keep it from growing too fast.
 * // min(..., 1) caps the value at 1 so it doesn't go past white.
 * let value = min(exp(t) * 0.01, 1);
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let darkBlue = [0.1, 0.1, 0.3, 1];
 * let lightYellow = [1, 1, 0.5, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between darkBlue (when value = 0) and lightYellow (when value = 1).
 * // Because exp() accelerates, the color transition gets faster over time.
 * finalColor.set(mix(darkBlue, lightYellow, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param n exponent to raise.
 * @returns e^n
 */
function exp(n: number): number;

/**
 * Adjusts the character of the noise produced by the
 * <a href="#/p5/noise">noise()</a> function.
 * 
 * Perlin noise values are created by adding layers of noise together. The
 * noise layers, called octaves, are similar to harmonics in music. Lower
 * octaves contribute more to the output signal. They define the overall
 * intensity of the noise. Higher octaves create finer-grained details.
 * 
 * By default, noise values are created by combining four octaves. Each higher
 * octave contributes half as much (50% less) compared to its predecessor.
 * `noiseDetail()` changes the number of octaves and the falloff amount. For
 * example, calling `noiseDetail(6, 0.25)` ensures that
 * <a href="#/p5/noise">noise()</a> will use six octaves. Each higher octave
 * will contribute 25% as much (75% less) compared to its predecessor. Falloff
 * values between 0 and 1 are valid. However, falloff values greater than 0.5
 * might result in noise values greater than 1.
 * @param lod number of octaves to be used by the noise.
 * @param falloff falloff factor for each octave.
 */
function noiseDetail(lod: number, falloff?: number): void;

/**
 * Sets the specular color for lights.
 * 
 * `specularColor()` affects lights that bounce off a surface in a preferred
 * direction. These lights include
 * <a href="#/p5/directionalLight">directionalLight()</a>,
 * <a href="#/p5/pointLight">pointLight()</a>, and
 * <a href="#/p5/spotLight">spotLight()</a>. The function helps to create
 * highlights on <a href="#/p5.Geometry">p5.Geometry</a> objects that are
 * styled with <a href="#/p5/specularMaterial">specularMaterial()</a>. If a
 * geometry does not use
 * <a href="#/p5/specularMaterial">specularMaterial()</a>, then
 * `specularColor()` will have no effect.
 * 
 * Note: `specularColor()` doesn’t affect lights that bounce in all
 * directions, including <a href="#/p5/ambientLight">ambientLight()</a> and
 * <a href="#/p5/imageLight">imageLight()</a>.
 * 
 * There are three ways to call `specularColor()` with optional parameters to
 * set the specular highlight color.
 * 
 * The first way to call `specularColor()` has two optional parameters, `gray`
 * and `alpha`. Grayscale and alpha values between 0 and 255, as in
 * `specularColor(50)` or `specularColor(50, 80)`, can be passed to set the
 * specular highlight color.
 * 
 * The second way to call `specularColor()` has one optional parameter,
 * `color`. A <a href="#/p5.Color">p5.Color</a> object, an array of color
 * values, or a CSS color string can be passed to set the specular highlight
 * color.
 * 
 * The third way to call `specularColor()` has four optional parameters, `v1`,
 * `v2`, `v3`, and `alpha`. RGBA, HSBA, or HSLA values, as in
 * `specularColor(255, 0, 0, 80)`, can be passed to set the specular highlight
 * color. Color values will be interpreted using the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 * @param v1 red or hue value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 * @param v2 green or saturation value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 * @param v3 blue, brightness, or lightness value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 */
function specularColor(v1: number, v2: number, v3: number): void;
function specularColor(gray: number): void;
function specularColor(value: string): void;
function specularColor(values: number[]): void;
function specularColor(color: P5.Color): void;

/**
 * Creates a <a href="#/p5/p5.Color">p5.Color</a> object.
 * 
 * By default, the parameters are interpreted as RGB values. Calling
 * `color(255, 204, 0)` will return a bright yellow color. The way these
 * parameters are interpreted may be changed with the
 * <a href="#/p5/colorMode">colorMode()</a> function.
 * 
 * The version of `color()` with one parameter interprets the value one of two
 * ways. If the parameter is a number, it's interpreted as a grayscale value.
 * If the parameter is a string, it's interpreted as a CSS color string.
 * 
 * The version of `color()` with two parameters interprets the first one as a
 * grayscale value. The second parameter sets the alpha (transparency) value.
 * 
 * The version of `color()` with three parameters interprets them as RGB, HSB,
 * or HSL colors, depending on the current `colorMode()`.
 * 
 * The version of `color()` with four parameters interprets them as RGBA, HSBA,
 * or HSLA colors, depending on the current `colorMode()`. The last parameter
 * sets the alpha (transparency) value.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a p5.Color object using RGB values.
 * let c = color(255, 204, 0);
 * 
 * // Draw the square.
 * fill(c);
 * noStroke();
 * square(30, 20, 55);
 * 
 * describe('A yellow square on a gray canvas.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a p5.Color object using RGB values.
 * let c1 = color(255, 204, 0);
 * 
 * // Draw the left circle.
 * fill(c1);
 * noStroke();
 * circle(25, 25, 80);
 * 
 * // Create a p5.Color object using a grayscale value.
 * let c2 = color(65);
 * 
 * // Draw the right circle.
 * fill(c2);
 * circle(75, 75, 80);
 * 
 * describe(
 * 'Two circles on a gray canvas. The circle in the top-left corner is yellow and the one at the bottom-right is gray.'
 * );
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a p5.Color object using a named color.
 * let c = color('magenta');
 * 
 * // Draw the square.
 * fill(c);
 * noStroke();
 * square(20, 20, 60);
 * 
 * describe('A magenta square on a gray canvas.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a p5.Color object using a hex color code.
 * let c1 = color('#0f0');
 * 
 * // Draw the left rectangle.
 * fill(c1);
 * noStroke();
 * rect(0, 10, 45, 80);
 * 
 * // Create a p5.Color object using a hex color code.
 * let c2 = color('#00ff00');
 * 
 * // Draw the right rectangle.
 * fill(c2);
 * rect(55, 10, 45, 80);
 * 
 * describe('Two bright green rectangles on a gray canvas.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a p5.Color object using a RGB color string.
 * let c1 = color('rgb(0, 0, 255)');
 * 
 * // Draw the top-left square.
 * fill(c1);
 * square(10, 10, 35);
 * 
 * // Create a p5.Color object using a RGB color string.
 * let c2 = color('rgb(0%, 0%, 100%)');
 * 
 * // Draw the top-right square.
 * fill(c2);
 * square(55, 10, 35);
 * 
 * // Create a p5.Color object using a RGBA color string.
 * let c3 = color('rgba(0, 0, 255, 1)');
 * 
 * // Draw the bottom-left square.
 * fill(c3);
 * square(10, 55, 35);
 * 
 * // Create a p5.Color object using a RGBA color string.
 * let c4 = color('rgba(0%, 0%, 100%, 1)');
 * 
 * // Draw the bottom-right square.
 * fill(c4);
 * square(55, 55, 35);
 * 
 * describe('Four blue squares in the corners of a gray canvas.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a p5.Color object using a HSL color string.
 * let c1 = color('hsl(160, 100%, 50%)');
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c1);
 * rect(0, 10, 45, 80);
 * 
 * // Create a p5.Color object using a HSLA color string.
 * let c2 = color('hsla(160, 100%, 50%, 0.5)');
 * 
 * // Draw the right rectangle.
 * fill(c2);
 * rect(55, 10, 45, 80);
 * 
 * describe('Two sea green rectangles. A darker rectangle on the left and a brighter one on the right.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a p5.Color object using a HSB color string.
 * let c1 = color('hsb(160, 100%, 50%)');
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c1);
 * rect(0, 10, 45, 80);
 * 
 * // Create a p5.Color object using a HSBA color string.
 * let c2 = color('hsba(160, 100%, 50%, 0.5)');
 * 
 * // Draw the right rectangle.
 * fill(c2);
 * rect(55, 10, 45, 80);
 * 
 * describe('Two green rectangles. A darker rectangle on the left and a brighter one on the right.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a p5.Color object using RGB values.
 * let c1 = color(50, 55, 100);
 * 
 * // Draw the left rectangle.
 * fill(c1);
 * rect(0, 10, 45, 80);
 * 
 * // Switch the color mode to HSB.
 * colorMode(HSB, 100);
 * 
 * // Create a p5.Color object using HSB values.
 * let c2 = color(50, 55, 100);
 * 
 * // Draw the right rectangle.
 * fill(c2);
 * rect(55, 10, 45, 80);
 * 
 * describe('Two blue rectangles. A darker rectangle on the left and a brighter one on the right.');
 * }`p5.strands is an experimental mode for writing shader code with p5.js-like
 * syntax instead of GLSL. In p5.strands shader callbacks, `color()` accepts
 * the same input formats but returns a `vec4` instead of a `p5.Color`
 * object, with RGBA components normalized to the 0–1 range. All colors in
 * strands are RGB-based; `colorMode()` has no effect inside shader
 * callbacks. Color utility functions such as `red()`, `green()`, `blue()`,
 * `alpha()`, `hue()`, `saturation()`, `brightness()`, and `lightness()`
 * also return values in the 0–1 range when used in strands.
 * 
 * `let myShader;
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildMaterialShader(myShaderBuilder);
 * }
 * 
 * function myShaderBuilder() {
 * finalColor.begin();
 * // Same syntax as regular sketch code...
 * let c = color(255, 0, 0);
 * // ...but c is a vec4 with normalized RGBA (0-1), not a p5.Color.
 * finalColor.set(c);
 * finalColor.end();
 * }
 * 
 * function draw() {
 * shader(myShader);
 * noStroke();
 * sphere(40);
 * 
 * describe('A red sphere on a gray background.');
 * }`
 * @param gray number specifying value between white and black.
 * @param alpha alpha value relative to current color range
 * (default is 0-255).
 * @returns resulting color.
 */
function color(gray: number, alpha?: number): P5.Color;
function color(v1: number, v2: number, v3: number, alpha?: number): P5.Color;
function color(value: string): P5.Color;
function color(values: number[]): P5.Color;
function color(color: P5.Color): P5.Color;

/**
 * Creates a `<div></div>` element.
 * 
 * `<div></div>` elements are commonly used as containers for
 * other elements.
 * 
 * The parameter `html` is optional. It accepts a string that sets the
 * inner HTML of the new `<div></div>`.
 * @param html inner HTML for the new `<div></div>` element.
 * @returns new <a href="#/p5.Element">p5.Element</a> object.
 */
function createDiv(html?: string): P5.Element;

/**
 * Loads a text file to create an `Array`.
 * 
 * The first parameter, `path`, is always a string with the path to the file.
 * Paths to local files should be relative, as in
 * `loadStrings('assets/data.txt')`. URLs such as
 * `'https://example.com/data.txt'` may be blocked due to browser security.
 * The `path` parameter can also be defined as a `Request`
 * object for more advanced usage.
 * 
 * The second parameter, `successCallback`, is optional. If a function is
 * passed, as in `loadStrings('assets/data.txt', handleData)`, then the
 * `handleData()` function will be called once the data loads. The array
 * created from the text data will be passed to `handleData()` as its only
 * argument. The return value of the `handleData()` function will be used as
 * the final return value of `loadStrings('assets/data.txt', handleData)`.
 * 
 * The third parameter, `failureCallback`, is also optional. If a function is
 * passed, as in `loadStrings('assets/data.txt', handleData, handleFailure)`,
 * then the `handleFailure()` function will be called if an error occurs while
 * loading. The `Error` object will be passed to `handleFailure()` as its only
 * argument. The return value of the `handleFailure()` function will be used as
 * the final return value of `loadStrings('assets/data.txt', handleData, handleFailure)`.
 * 
 * This function returns a `Promise` and should be used in an `async` setup with
 * `await`. See the examples for the usage syntax.
 * @param path path of the text file to be loaded.
 * @param successCallback function to call once the data is
 * loaded. Will be passed the array.
 * @param errorCallback function to call if the data fails to
 * load. Will be passed an `Error` event
 * object.
 * @returns new array containing the loaded text.
 */
function loadStrings(path: string | Request, successCallback?: Function, errorCallback?: Function): Promise<string[]>;

/**
 * Converts a `String` or `Number` to a `Boolean`.
 * 
 * `boolean()` converts values to `true` or `false`.
 * 
 * The parameter, `n`, is the value to convert. If `n` is a string, then
 * `boolean('true')` will return `true` and every other string value will
 * return `false`. If `n` is a number, then `boolean(0)` will return `false`
 * and every other numeric value will return `true`. If an array is passed, as
 * `in boolean([0, 1, 'true', 'blue'])`, then an array of Boolean values will
 * be returned.
 * @param n value to convert.
 * @returns converted Boolean value.
 */
function boolean(n: string | boolean | number): boolean;
function boolean(ns: any[]): boolean[];

/**
 * Rotates the coordinate system.
 * 
 * By default, the positive x-axis points to the right and the positive y-axis
 * points downward. The `rotate()` function changes this orientation by
 * rotating the coordinate system about the origin. Everything drawn after
 * `rotate()` is called will appear to be rotated.
 * 
 * The first parameter, `angle`, is the amount to rotate. For example, calling
 * `rotate(1)` rotates the coordinate system clockwise 1 radian which is
 * nearly 57˚. `rotate()` interprets angle values using the current
 * <a href="#/p5/angleMode">angleMode()</a>.
 * 
 * The second parameter, `axis`, is optional. It's used to orient 3D rotations
 * in WebGL mode. If a <a href="#/p5.Vector">p5.Vector</a> is passed, as in
 * `rotate(QUARTER_PI, myVector)`, then the coordinate system will rotate
 * `QUARTER_PI` radians about `myVector`. If an array of vector components is
 * passed, as in `rotate(QUARTER_PI, [1, 0, 0])`, then the coordinate system
 * will rotate `QUARTER_PI` radians about a vector with the components
 * `[1, 0, 0]`.
 * 
 * By default, transformations accumulate. For example, calling `rotate(1)`
 * twice has the same effect as calling `rotate(2)` once. The
 * <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions
 * can be used to isolate transformations within distinct drawing groups.
 * 
 * Note: Transformations are reset at the beginning of the draw loop. Calling
 * `rotate(1)` inside the <a href="#/p5/draw">draw()</a> function won't cause
 * shapes to spin.
 * @param angle angle of rotation in the current <a href="#/p5/angleMode">angleMode()</a>.
 * @param axis axis to rotate about in 3D.
 */
function rotate(angle: number, axis?: P5.Vector | number[]): void;

/**
 * Removes an item from the web browser's local storage.
 * 
 * Web browsers can save small amounts of data using the built-in
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage" target="_blank">localStorage object</a>.
 * Data stored in `localStorage` can be retrieved at any point, even after
 * refreshing a page or restarting the browser. Data are stored as key-value
 * pairs.
 * 
 * <a href="#/p5/storeItem">storeItem()</a> makes it easy to store values in
 * `localStorage` and `removeItem()` makes it easy to delete them.
 * 
 * The parameter, `key`, is the name of the value to remove as a string. For
 * example, calling `removeItem('size')` removes the item with the key `size`.
 * 
 * Note: Sensitive data such as passwords or personal information shouldn't be
 * stored in `localStorage`.
 * @param key name of the value to remove.
 */
function removeItem(key: string): void;

/**
 * Calculates coordinates along a line that's tangent to a Bézier curve.
 * 
 * Tangent lines skim the surface of a curve. A tangent line's slope equals
 * the curve's slope at the point where it intersects.
 * 
 * `bezierTangent()` calculates coordinates along a tangent line using the
 * Bézier curve's anchor and control points. It expects points in the same
 * order as the <a href="#/p5/bezier">bezier()</a> function. `bezierTangent()`
 * works one axis at a time. Passing the anchor and control points'
 * x-coordinates will calculate the x-coordinate of a point on the tangent
 * line. Passing the anchor and control points' y-coordinates will calculate
 * the y-coordinate of a point on the tangent line.
 * 
 * The first parameter, `a`, is the coordinate of the first anchor point.
 * 
 * The second and third parameters, `b` and `c`, are the coordinates of the
 * control points.
 * 
 * The fourth parameter, `d`, is the coordinate of the last anchor point.
 * 
 * The fifth parameter, `t`, is the amount to interpolate along the curve. 0
 * is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
 * between them.
 * @param a coordinate of first anchor point.
 * @param b coordinate of first control point.
 * @param c coordinate of second control point.
 * @param d coordinate of second anchor point.
 * @param t amount to interpolate between 0 and 1.
 * @returns coordinate of a point on the tangent line.
 */
function bezierTangent(a: number, b: number, c: number, d: number, t: number): number;

/**
 * The <a href="#/p5/setMoveThreshold">setMoveThreshold()</a> function is used to set the movement threshold for
 * the <a href="#/p5/deviceMoved">deviceMoved()</a> function. The default threshold is set to 0.5.
 * @param value The threshold value
 */
function setMoveThreshold(value: number): void;

/**
 * Draws an ellipse (oval).
 * 
 * An ellipse is a round shape defined by the `x`, `y`, `w`, and
 * `h` parameters. `x` and `y` set the location of its center. `w` and
 * `h` set its width and height. See
 * <a href="#/p5/ellipseMode">ellipseMode()</a> for other ways to set
 * its position.
 * 
 * If no height is set, the value of width is used for both the width and
 * height. If a negative height or width is specified, the absolute value is
 * taken.
 * 
 * The fifth parameter, `detail`, is also optional. It determines how many
 * vertices are used to draw the ellipse in WebGL mode. The default value is
 * 25.
 * @param x x-coordinate of the center of the ellipse.
 * @param y y-coordinate of the center of the ellipse.
 * @param w width of the ellipse.
 * @param h height of the ellipse.
 */
function ellipse(x: number, y: number, w: number, h?: number): void;
function ellipse(x: number, y: number, w: number, h: number, detail?: number): void;

/**
 * Creates a paragraph element.
 * 
 * `<p></p>` elements are commonly used for paragraph-length text.
 * 
 * The parameter `html` is optional. It accepts a string that sets the
 * inner HTML of the new `<p></p>`.
 * @param html inner HTML for the new `<p></p>` element.
 * @returns new <a href="#/p5.Element">p5.Element</a> object.
 */
function createP(html?: string): P5.Element;

/**
 * Creates a new <a href="#/p5.Shader">p5.Shader</a> object using GLSL.
 * 
 * If you are interested in writing shaders, consider using p5.strands shaders using
 * <a href="#/p5/buildMaterialShader">`buildMaterialShader`<a>,
 * <a href="#/p5/buildStrokeShader">`buildStrokeShader`</a>, or
 * <a href="#/p5/buildFilterShader">`buildFilterShader`</a>.
 * With p5.strands, you can modify existing shaders using JavaScript. With
 * `createShader`, shaders are made from scratch, and are written in GLSL. This
 * will be most useful for advanced cases, and for authors of add-on libraries.
 * 
 * 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.
 * 
 * Once the <a href="#/p5.Shader">p5.Shader</a> object is created, it can be
 * used with the <a href="#/p5/shader">shader()</a> function, as in
 * `shader(myShader)`. A GLSL 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.
 * 
 * Here is a simple example with a simple vertex shader that applies whatevre
 * transformations have been set, and a simple fragment shader that ignores
 * all material settings and just outputs yellow:
 * 
 * `// 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.');
 * }`Fragment shaders are often the fastest way to dynamically create per-pixel textures.
 * Here is an example of a fractal being drawn in the fragment shader. It also creates custom
 * uniform variables in the shader, which can be set from your main sketch code. By passing
 * the time in as a uniform, we can animate the fractal in the shader.
 * 
 * `// 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);
 * 
 * // Add a plane as a drawing surface.
 * noStroke();
 * plane(100, 100);
 * }`A shader can optionally describe hooks, which are functions in GLSL that
 * users may choose to provide to customize the behavior of the shader using the
 * <a href="#/p5.Shader/modify">`modify()`</a> method of `p5.Shader`. Users can
 * write their modifications using p5.strands, without needing to learn GLSL.
 * 
 * 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!
 * }`Then, a user of your shader can modify it with p5.strands. Here is what
 * that looks like when we put everything together:
 * 
 * `// 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(100, 100, WEBGL);
 * 
 * // Create a shader with hooks. By default, this hook returns
 * // the initial value.
 * myShader = createShader(vertSrc, fragSrc, {
 * fragment: {
 * 'vec4 getColor': '(vec4 color) { return color; }'
 * }
 * });
 * 
 * // Make a version of the shader with a hook overridden
 * modifiedShader = myShader.modify(() => {
 * // Create new uniforms and override the getColor hook
 * let t = millis() / 1000;
 * getColor(() => {
 * return [0, 0.5 + 0.5 * sin(t), 1, 1];
 * });
 * });
 * }
 * 
 * function draw() {
 * noStroke();
 * 
 * push();
 * shader(myShader);
 * translate(-width/3, 0);
 * sphere(20);
 * pop();
 * 
 * push();
 * shader(modifiedShader);
 * translate(width/3, 0);
 * sphere(20);
 * pop();
 * }`Note: Only filter shaders can be used in 2D mode. All shaders can be used
 * in WebGL mode.
 * @param vertSrc source code for the vertex shader.
 * @param fragSrc source code for the fragment shader.
 * @param options An optional object describing how this shader can
 * be augmented with hooks. It can include:
 * @returns new shader object created from the
 * vertex and fragment shaders.
 */
function createShader(vertSrc: string, fragSrc: string, options?: { vertex?: object; fragment?: object }): P5.Shader;

/**
 * Calculates the angle formed by a point, the origin, and the positive
 * x-axis.
 * 
 * `atan2()` is most often used for orienting geometry to the mouse's
 * position, as in `atan2(mouseY, mouseX)`. The first parameter is the point's
 * y-coordinate and the second parameter is its x-coordinate.
 * 
 * By default, `atan2()` returns values in the range
 * -π (about -3.14) to π (3.14). If the
 * <a href="#/p5/angleMode">angleMode()</a> is `DEGREES`, then values are
 * returned in the range -180 to 180.
 * @param y y-coordinate of the point.
 * @param x x-coordinate of the point.
 * @returns arc tangent of the given point.
 */
function atan2(y: number, x: number): number;

/**
 * Converts a positive `Number` into a `String` with an extra space in front.
 * 
 * `nfs()` converts positive numbers such as 123.45 into strings formatted
 * with an extra space in front, as in ' 123.45'. Doing so can be helpful for
 * aligning positive and negative numbers.
 * 
 * The first parameter, `num`, is the number to convert to a string. For
 * example, calling `nfs(123.45)` returns the string `' 123.45'`.
 * 
 * The second parameter, `left`, is optional. If a number is passed, as in
 * `nfs(123.45, 4)`, it sets the minimum number of digits to include to the
 * left of the decimal place. If `left` is larger than the number of digits in
 * `num`, then unused digits will be set to 0. For example, calling
 * `nfs(123.45, 4)` returns the string `' 0123.45'`.
 * 
 * The third parameter, `right`, is also optional. If a number is passed, as
 * in `nfs(123.45, 4, 1)`, it sets the minimum number of digits to include to
 * the right of the decimal place. If `right` is smaller than the number of
 * decimal places in `num`, then `num` will be rounded to the given number of
 * decimal places.  For example, calling `nfs(123.45, 4, 1)` returns the
 * string `' 0123.5'`. If `right` is larger than the number of decimal places
 * in `num`, then unused decimal places will be set to 0.  For example,
 * calling `nfs(123.45, 4, 3)` returns the string `' 0123.450'`.
 * @param num number to format.
 * @param left number of digits to include to the left of the
 * decimal point.
 * @param right number of digits to include to the right of the
 * decimal point.
 * @returns formatted string.
 */
function nfs(num: number, left?: number, right?: number): string;
function nfs(nums: any[], left?: number, right?: number): string[];

/**
 * Returns the target frame rate.
 * 
 * The value is either the system frame rate or the last value passed to
 * <a href="#/p5/frameRate">frameRate()</a>.
 * @returns _targetFrameRate
 */
function getTargetFrameRate(): number;

/**
 * The <a href="#/p5/setShakeThreshold">setShakeThreshold()</a> function is used to set the movement threshold for
 * the <a href="#/p5/deviceShaken">deviceShaken()</a> function. The default threshold is set to 30.
 * @param value The threshold value
 */
function setShakeThreshold(value: number): void;

/**
 * Sets the seed value for the <a href="#/p5/noise">noise()</a> function.
 * 
 * By default, <a href="#/p5/noise">noise()</a> produces different results
 * each time a sketch is run. Calling `noiseSeed()` with a constant argument,
 * such as `noiseSeed(99)`, makes <a href="#/p5/noise">noise()</a> produce the
 * same results each time a sketch is run.
 * @param seed seed value.
 */
function noiseSeed(seed: number): void;

/**
 * The `saveStl()` function exports `p5.Geometry` objects as
 * 3D models in the STL stereolithography file format.
 * This way, you can use the 3D shapes you create in p5.js in other software
 * for rendering, animation, 3D printing, or more.
 * 
 * The exported .stl file will include the faces, vertices, and normals of the `p5.Geometry`.
 * 
 * By default, this method saves a text-based .stl file. Alternatively, you can save a more compact
 * but less human-readable binary .stl file by passing `{ binary: true }` as a second parameter.
 * @param fileName The name of the file to save the model as.
 * If not specified, the default file name will be 'model.stl'.
 * @param options Optional settings.
 */
function saveStl(fileName?: string, options?: { binary?: boolean }): void;

/**
 * Draws a circle.
 * 
 * A circle is a round shape defined by the `x`, `y`, and `d` parameters.
 * `x` and `y` set the location of its center. `d` sets its width and height (diameter).
 * Every point on the circle's edge is the same distance, `0.5 * d`, from its center.
 * `0.5 * d` (half the diameter) is the circle's radius.
 * See <a href="#/p5/ellipseMode">ellipseMode()</a> for other ways to set its position.
 * @param x x-coordinate of the center of the circle.
 * @param y y-coordinate of the center of the circle.
 * @param d diameter of the circle.
 */
function circle(x: number, y: number, d: number): void;

/**
 * Calculates the closest integer value that is less than or equal to the
 * value of a number.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * // Use RGB color with values from 0 to 1.
 * colorMode(RGB, 1);
 * 
 * noStroke();
 * 
 * // Draw the left rectangle.
 * let r = 0.8;
 * fill(r, 0, 0);
 * rect(0, 0, 50, 100);
 * 
 * // Round r down to 0.
 * r = floor(r);
 * 
 * // Draw the right rectangle.
 * fill(r, 0, 0);
 * rect(50, 0, 50, 100);
 * 
 * describe('Two rectangles. The one on the left is bright red and the one on the right is black.');
 * }``floor()` can also be used in shaders with p5.strands. The following example
 * uses `floor()` to create banding effects on a shape.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere with posterized color bands.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
 * let t = millis() * 0.001;
 * 
 * // sin(t) goes between -1 and 1.
 * // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
 * let sinVal = 0.5 + 0.5 * sin(t);
 * 
 * // Multiply by 4 then floor to get the next whole number down.
 * // Divide by 4 to bring the result back to the 0 to 1 range.
 * // This creates 5 distinct stepped color levels: 0, 0.25, 0.5, 0.75, 1.
 * let value = floor(sinVal * 4) / 4;
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let darkPurple = [0.2, 0, 0.8, 1];
 * let brightTeal = [0.2, 1, 0.8, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between darkPurple (when value = 0) and brightTeal (when value = 1).
 * // The floor() creates visible banding/posterization in the color.
 * finalColor.set(mix(darkPurple, brightTeal, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param n number to round down.
 * @returns rounded down number.
 */
function floor(n: number): number;

/**
 * Hides the cursor from view.
 */
function noCursor(): void;

/**
 * Reads the contents of a file or URL and creates a <a href="#/p5.Table">p5.Table</a> object with
 * its values. If a file is specified, it must be located in the sketch's
 * "data" folder. The filename parameter can also be a URL to a file found
 * online. By default, the file is assumed to be comma-separated (in CSV
 * format). Table only looks for a header row if the 'header' option is
 * included.
 * 
 * This function returns a `Promise` and should be used in an `async` setup with
 * `await`. See the examples for the usage syntax.
 * 
 * All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB.
 * @param filename name of the file or URL to load
 * @param separator the separator character used by the file, defaults to `','`
 * @param header "header" to indicate table has header row
 * @param callback function to be executed after
 * <a href="#/p5/loadTable">loadTable()</a> completes. On success, the
 * <a href="#/p5.Table">Table</a> object is passed in as the
 * first argument.
 * @param errorCallback function to be executed if
 * there is an error, response is passed
 * in as first argument
 * @returns <a href="#/p5.Table">Table</a> object containing data
 */
function loadTable(filename: string | Request, separator?: string, header?: string, callback?: Function, errorCallback?: Function): Promise<object>;

/**
 * Draws a plane.
 * 
 * A plane is a four-sided, flat shape with every angle measuring 90˚. It’s
 * similar to a rectangle and offers advanced drawing features in WebGL mode.
 * 
 * The first parameter, `width`, is optional. If a `Number` is passed, as in
 * `plane(20)`, it sets the plane’s width and height. By default, `width` is
 * 50.
 * 
 * The second parameter, `height`, is also optional. If a `Number` is passed,
 * as in `plane(20, 30)`, it sets the plane’s height. By default, `height` is
 * set to the plane’s `width`.
 * 
 * The third parameter, `detailX`, is also optional. If a `Number` is passed,
 * as in `plane(20, 30, 5)` it sets the number of triangle subdivisions to use
 * along the x-axis. All 3D shapes are made by connecting triangles to form
 * their surfaces. By default, `detailX` is 1.
 * 
 * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
 * as in `plane(20, 30, 5, 7)` it sets the number of triangle subdivisions to
 * use along the y-axis. All 3D shapes are made by connecting triangles to
 * form their surfaces. By default, `detailY` is 1.
 * 
 * Note: `plane()` can only be used in WebGL mode.
 * @param width width of the plane.
 * @param height height of the plane.
 * @param detailX number of triangle subdivisions along the x-axis.
 * @param detailY number of triangle subdivisions along the y-axis.
 */
function plane(width?: number, height?: number, detailX?: number, detailY?: number): void;

/**
 * Sets the style of the joints that connect line segments.
 * 
 * Joints are either mitered (`MITER`), beveled (`BEVEL`), or rounded
 * (`ROUND`). The default joint is `MITER` in 2D mode and `ROUND` in WebGL
 * mode.
 * 
 * The argument passed to `strokeJoin()` must be written in ALL CAPS because
 * the constants `MITER`, `BEVEL`, and `ROUND` are defined this way.
 * JavaScript is a case-sensitive language.
 * 
 * Calling `strokeJoin()` without an argument returns the current stroke join style, either `MITER`, `BEVEL`, or `ROUND`.
 * @param join either MITER, BEVEL, or ROUND
 * @returns the current stroke join style.
 */
function strokeJoin(join: typeof P5.MITER | typeof P5.BEVEL | typeof P5.ROUND): typeof P5.MITER | typeof P5.BEVEL | typeof P5.ROUND;
function strokeJoin(): typeof P5.MITER | typeof P5.BEVEL | typeof P5.ROUND;

/**
 * Applies an image filter to the canvas.
 * 
 * The preset options are:
 * 
 * `INVERT`
 * Inverts the colors in the image. No parameter is used.
 * 
 * `GRAY`
 * Converts the image to grayscale. No parameter is used.
 * 
 * `THRESHOLD`
 * Converts the image to black and white. Pixels with a grayscale value
 * above a given threshold are converted to white. The rest are converted to
 * black. The threshold must be between 0.0 (black) and 1.0 (white). If no
 * value is specified, 0.5 is used.
 * 
 * `OPAQUE`
 * Sets the alpha channel to entirely opaque. No parameter is used.
 * 
 * `POSTERIZE`
 * Limits the number of colors in the image. Each color channel is limited to
 * the number of colors specified. Values between 2 and 255 are valid, but
 * results are most noticeable with lower values. The default value is 4.
 * 
 * `BLUR`
 * Blurs the image. The level of blurring is specified by a blur radius. Larger
 * values increase the blur. The default value is 4. A gaussian blur is used
 * in `P2D` mode. A box blur is used in `WEBGL` mode.
 * 
 * `ERODE`
 * Reduces the light areas. No parameter is used.
 * 
 * `DILATE`
 * Increases the light areas. No parameter is used.
 * 
 * `filter()` uses WebGL in the background by default because it's faster.
 * This can be disabled in `P2D` mode by adding a `false` argument, as in
 * `filter(BLUR, false)`. This may be useful to keep computation off the GPU
 * or to work around a lack of WebGL support.
 * 
 * In WebgL mode, `filter()` can also use custom shaders. See
 * <a href="#/p5/createFilterShader">createFilterShader()</a> for more
 * information.
 * @param filterType either THRESHOLD, GRAY, OPAQUE, INVERT,
 * POSTERIZE, BLUR, ERODE, DILATE or BLUR.
 * @param filterParam parameter unique to each filter.
 * @param useWebGL flag to control whether to use fast
 * WebGL filters (GPU) or original image
 * filters (CPU); defaults to `true`.
 */
function filter(filterType: typeof P5.THRESHOLD | typeof P5.GRAY | typeof P5.OPAQUE | typeof P5.INVERT | typeof P5.POSTERIZE | typeof P5.BLUR | typeof P5.ERODE | typeof P5.DILATE | typeof P5.BLUR, filterParam?: number, useWebGL?: boolean): void;
function filter(filterType: typeof P5.THRESHOLD | typeof P5.GRAY | typeof P5.OPAQUE | typeof P5.INVERT | typeof P5.POSTERIZE | typeof P5.BLUR | typeof P5.ERODE | typeof P5.DILATE | typeof P5.BLUR, filterParam?: number, useWebGL?: boolean): void;
function filter(shaderFilter: P5.Shader): void;

/**
 * Creates a `<span></span>` element.
 * 
 * `<span></span>` elements are commonly used as containers
 * for inline elements. For example, a `<span></span>`
 * can hold part of a sentence that's a
 * <span style="color: deeppink;">different</span> style.
 * 
 * The parameter `html` is optional. It accepts a string that sets the
 * inner HTML of the new `<span></span>`.
 * @param html inner HTML for the new `<span></span>` element.
 * @returns new <a href="#/p5.Element">p5.Element</a> object.
 */
function createSpan(html?: string): P5.Element;

/**
 * Loads a new shader from a file that can be applied to the contents of the canvas with
 * <a href="#/p5/filter">`filter()`</a>. Pass the resulting shader into `filter()` to apply it.
 * 
 * Since this function loads data from another file, it returns a `Promise`.
 * Use it in an `async function setup`, and `await` its result.
 * 
 * `async function setup() {
 * createCanvas(50, 50, WEBGL);
 * let img = await loadImage('assets/bricks.jpg');
 * let myFilter = await loadFilterShader('myFilter.js');
 * 
 * image(img, -50, -50);
 * filter(myFilter);
 * describe('Bricks tinted red');
 * }`Inside your shader file, you can use p5.strands hooks to change parts of the shader. For
 * a filter shader, use `filterColor` to change each pixel on the canvas.
 * 
 * `// myFilter.js
 * filterColor.begin();
 * let result = getTexture(
 * filterColor.canvasContent,
 * filterColor.texCoord
 * );
 * // Zero out the green and blue channels, leaving red
 * result.g = 0;
 * result.b = 0;
 * filterColor.set(result);
 * filterColor.end();`Read the reference for <a href="#/p5/buildFilterShader">`buildFilterShader`</a>,
 * the version of `loadFilterShader` that takes in a function instead of a separate file,
 * for more examples.
 * 
 * The second parameter, `successCallback`, is optional. If a function is passed, as in
 * `loadFilterShader('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
 * `loadFilterShader('myShader.js', onLoaded)`.
 * @param filename path to a p5.strands JavaScript file or a GLSL fragment shader file
 * @param successCallback callback to be called once the shader is
 * loaded. Will be passed the
 * <a href="#/p5.Shader">p5.Shader</a> object.
 * @param failureCallback callback to be called if there is an error
 * loading the shader. Will be passed the
 * error event.
 * @returns a promise that resolves with a shader object
 */
function loadFilterShader(filename: string, successCallback?: Function, failureCallback?: Function): Promise<P5.Shader>;

/**
 * Rotates the coordinate system about the x-axis in WebGL mode.
 * 
 * The parameter, `angle`, is the amount to rotate. For example, calling
 * `rotateX(1)` rotates the coordinate system about the x-axis by 1 radian.
 * `rotateX()` interprets angle values using the current
 * <a href="#/p5/angleMode">angleMode()</a>.
 * 
 * By default, transformations accumulate. For example, calling `rotateX(1)`
 * twice has the same effect as calling `rotateX(2)` once. The
 * <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions
 * can be used to isolate transformations within distinct drawing groups.
 * 
 * Note: Transformations are reset at the beginning of the draw loop. Calling
 * `rotateX(1)` inside the <a href="#/p5/draw">draw()</a> function won't cause
 * shapes to spin.
 * @param angle angle of rotation in the current <a href="#/p5/angleMode">angleMode()</a>.
 */
function rotateX(angle: number): void;

/**
 * Creates and a new <a href="#/p5.Framebuffer">p5.Framebuffer</a> object.
 * 
 * <a href="#/p5.Framebuffer">p5.Framebuffer</a> objects are separate drawing
 * surfaces that can be used as textures in WebGL mode. They're similar to
 * <a href="#/p5.Graphics">p5.Graphics</a> objects and generally run much
 * faster when used as textures.
 * 
 * The parameter, `options`, is optional. An object can be passed to configure
 * the <a href="#/p5.Framebuffer">p5.Framebuffer</a> object. The available
 * properties are:
 * 
 * - `format`: data format of the texture, either `UNSIGNED_BYTE`, `FLOAT`, or `HALF_FLOAT`. Default is `UNSIGNED_BYTE`.
 * 
 * - `channels`: whether to store `RGB` or `RGBA` color channels. Default is to match the main canvas which is `RGBA`.
 * 
 * - `depth`: whether to include a depth buffer. Default is `true`.
 * 
 * - `depthFormat`: data format of depth information, either `UNSIGNED_INT` or `FLOAT`. Default is `FLOAT`.
 * 
 * - `stencil`: whether to include a stencil buffer for masking. `depth` must be `true` for this feature to work. Defaults to the value of `depth` which is `true`.
 * 
 * - `antialias`: whether to perform anti-aliasing. If set to `true`, as in `{ antialias: true }`, 2 samples will be used by default. The number of samples can also be set, as in `{ antialias: 4 }`. Default is to match <a href="#/p5/setAttributes">setAttributes()</a> which is `false` (`true` in Safari).
 * 
 * - `width`: width of the <a href="#/p5.Framebuffer">p5.Framebuffer</a> object. Default is to always match the main canvas width.
 * 
 * - `height`: height of the <a href="#/p5.Framebuffer">p5.Framebuffer</a> object. Default is to always match the main canvas height.
 * 
 * - `density`: pixel density of the <a href="#/p5.Framebuffer">p5.Framebuffer</a> object. Default is to always match the main canvas pixel density.
 * 
 * - `textureFiltering`: how to read values from the <a href="#/p5.Framebuffer">p5.Framebuffer</a> object. Either `LINEAR` (nearby pixels will be interpolated) or `NEAREST` (no interpolation). Generally, use `LINEAR` when using the texture as an image and `NEAREST` if reading the texture as data. Default is `LINEAR`.
 * 
 * If the `width`, `height`, or `density` attributes are set, they won't automatically match the main canvas and must be changed manually.
 * 
 * Note: `createFramebuffer()` can only be used in WebGL mode.
 * @param options configuration options.
 * @returns new framebuffer.
 */
function createFramebuffer(options?: { format?: typeof P5.UNSIGNED_BYTE | typeof P5.FLOAT | typeof P5.HALF_FLOAT; channels?: typeof P5.RGB | typeof P5.RGBA; depth?: boolean; depthFormat?: typeof P5.UNSIGNED_INT | typeof P5.FLOAT; stencil?: boolean; antialias?: boolean | number; width?: number; height?: number; density?: number; textureFiltering?: typeof P5.LINEAR | typeof P5.NEAREST }): P5.Framebuffer;

/**
 * Creates an `<img>` element that can appear outside of the canvas.
 * 
 * The first parameter, `src`, is a string with the path to the image file.
 * `src` should be a relative path, as in `'assets/image.png'`, or a URL, as
 * in `'https://example.com/image.png'`.
 * 
 * The second parameter, `alt`, is a string with the
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#usage_notes" target="_blank">alternate text</a>
 * for the image. An empty string `''` can be used for images that aren't displayed.
 * 
 * The third parameter, `crossOrigin`, is optional. It's a string that sets the
 * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes" target="_blank">crossOrigin property</a>
 * of the image. Use `'anonymous'` or `'use-credentials'` to fetch the image
 * with cross-origin access.
 * 
 * The fourth parameter, `callback`, is also optional. It sets a function to
 * call after the image loads. The new image is passed to the callback
 * function as a <a href="#/p5.Element">p5.Element</a> object.
 * @param src relative path or URL for the image.
 * @param alt alternate text for the image.
 * @returns new <a href="#/p5.Element">p5.Element</a> object.
 */
function createImg(src: string, alt: string): P5.Element;
function createImg(src: string, alt: string, crossOrigin?: string, successCallback?: Function): P5.Element;

/**
 * Sets the width of the stroke used for points, lines, and the outlines of
 * shapes.
 * 
 * Note: In 2D mode, `strokeWeight()` is affected by transformations,
 * especially calls to <a href="#/p5/scale">scale()</a>. It isn't affected by
 * transformations in WebGL and WebGPU modes.
 * 
 * Calling `strokeWeight()` without an argument returns the current stroke weight as a number.
 * @param weight the weight of the stroke (in pixels).
 * @returns the current stroke weight.
 */
function strokeWeight(weight: number): number;
function strokeWeight(): number;

/**
 * Gets the red value of a color.
 * 
 * `red()` extracts the red 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, `red()` returns a color's red value in the range 0
 * to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to RGB, it
 * returns the red value in the given range.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a p5.Color object.
 * let c = color(175, 100, 220);
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'redValue' to 175.
 * let redValue = red(c);
 * 
 * // Draw the right rectangle.
 * fill(redValue, 0, 0);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is light purple and the right one is red.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a color array.
 * let c = [175, 100, 220];
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'redValue' to 175.
 * let redValue = red(c);
 * 
 * // Draw the right rectangle.
 * fill(redValue, 0, 0);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is light purple and the right one is red.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a CSS color string.
 * let c = 'rgb(175, 100, 220)';
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'redValue' to 175.
 * let redValue = red(c);
 * 
 * // Draw the right rectangle.
 * fill(redValue, 0, 0);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is light purple and the right one is red.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Use RGB color with values in the range 0-100.
 * colorMode(RGB, 100);
 * 
 * // Create a p5.Color object.
 * let c = color(69, 39, 86);
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'redValue' to 69.
 * let redValue = red(c);
 * 
 * // Draw the right rectangle.
 * fill(redValue, 0, 0);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is light purple and the right one is red.');
 * }`In p5.strands shader callbacks, `red()` operates on `vec4` values and
 * returns the red channel as a normalized value in the 0–1 range.
 * `colorMode()` has no effect inside shader callbacks.
 * 
 * `let myShader;
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildMaterialShader(myShaderBuilder);
 * }
 * 
 * function myShaderBuilder() {
 * finalColor.begin();
 * let c = color(200, 100, 50);
 * let r = red(c);
 * finalColor.set(vec4(r, 0, 0, 1.0));
 * finalColor.end();
 * }
 * 
 * function draw() {
 * shader(myShader);
 * noStroke();
 * sphere(40);
 * 
 * describe('A sphere colored using only its red channel.');
 * }`
 * @param color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
 * color components, or CSS color string.
 * @returns the red value.
 */
function red(color: P5.Color | number[] | string): number;

/**
 * Calculates the cosine of an angle.
 * 
 * `cos()` is useful for many geometric tasks in creative coding. The values
 * returned oscillate between -1 and 1 as the input angle increases. `cos()`
 * calculates the cosine of an angle, using radians by default, or according
 * to if <a href="#/p5/angleMode">angleMode()</a> setting (RADIANS or DEGREES).
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * describe('A white ball on a string oscillates left and right.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Calculate the coordinates.
 * let x = 30 * cos(frameCount * 0.05) + 50;
 * let y = 50;
 * 
 * // Draw the oscillator.
 * line(50, y, x, y);
 * circle(x, y, 20);
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * describe('A series of black dots form a wave pattern.');
 * }
 * 
 * function draw() {
 * // Calculate the coordinates.
 * let x = frameCount;
 * let y = 30 * cos(x * 0.1) + 50;
 * 
 * // Draw the point.
 * point(x, y);
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * describe('A series of black dots form an infinity symbol.');
 * }
 * 
 * function draw() {
 * // Calculate the coordinates.
 * let x = 30 * cos(frameCount * 0.1) + 50;
 * let y = 10 * sin(frameCount * 0.2) + 50;
 * 
 * // Draw the point.
 * point(x, y);
 * }``cos()` can also be used in shaders with p5.strands. The following example
 * uses `cos()` to smoothly oscillate the color of a shape over time.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere that fades between yellow and blue.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
 * let t = millis() * 0.001;
 * 
 * // cos(t) oscillates between -1 and 1.
 * // 0.5 + 0.5 * cos(t) remaps this to the 0 to 1 range.
 * let value = 0.5 + 0.5 * cos(t);
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let yellow = [1, 1, 0, 1];
 * let blue = [0, 0, 1, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between yellow (when value = 0) and blue (when value = 1).
 * finalColor.set(mix(yellow, blue, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param angle the angle, in radians by default, or according to if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or DEGREES).
 * @returns cosine of the angle.
 */
function cos(angle: number): number;

/**
 * The <a href="#/p5/deviceMoved">deviceMoved()</a> function is called when the device is moved by more than
 * the threshold value along X, Y or Z axis. The default threshold is set to 0.5.
 * The threshold value can be changed using <a href="https://p5js.org/reference/p5/setMoveThreshold">setMoveThreshold()</a>.
 */
function deviceMoved(): void;

/**
 * The <a href="#/p5/deviceTurned">deviceTurned()</a> function is called when the device rotates by
 * more than 90 degrees continuously.
 * 
 * The axis that triggers the <a href="#/p5/deviceTurned">deviceTurned()</a> method is stored in the turnAxis
 * variable. The <a href="#/p5/deviceTurned">deviceTurned()</a> method can be locked to trigger on any axis:
 * X, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.
 */
function deviceTurned(): void;

/**
 * The <a href="#/p5/deviceShaken">deviceShaken()</a> function is called when the device total acceleration
 * changes of accelerationX and accelerationY values is more than
 * the threshold value. The default threshold is set to 30.
 * The threshold value can be changed using <a href="https://p5js.org/reference/p5/setShakeThreshold">setShakeThreshold()</a>.
 */
function deviceShaken(): void;

/**
 * Sets the color used for the background of the canvas.
 * 
 * By default, the background is transparent. `background()` is typically used
 * within <a href="#/p5/draw">draw()</a> to clear the display window at the
 * beginning of each frame. It can also be used inside
 * <a href="#/p5/setup">setup()</a> to set the background on the first frame
 * of animation.
 * 
 * The version of `background()` with one parameter interprets the value one
 * of four ways. If the parameter is a `Number`, it's interpreted as a grayscale
 * value. If the parameter is a `String`, it's interpreted as a CSS color string.
 * RGB, RGBA, HSL, HSLA, hex, and named color strings are supported. If the
 * parameter is a <a href="#/p5.Color">p5.Color</a> object, it will be used as
 * the background color. If the parameter is a
 * <a href="#/p5.Image">p5.Image</a> object, it will be used as the background
 * image.
 * 
 * The version of `background()` with two parameters interprets the first one
 * as a grayscale value. The second parameter sets the alpha (transparency)
 * value.
 * 
 * The version of `background()` with three parameters interprets them as RGB,
 * HSB, or HSL colors, depending on the current
 * <a href="#/p5/colorMode">colorMode()</a>. By default, colors are specified
 * in RGB values. Calling `background(255, 204, 0)` sets the background a bright
 * yellow color.
 * 
 * The version of `background()` with four parameters interprets them as RGBA,
 * HSBA, or HSLA colors, depending on the current
 * <a href="#/p5/colorMode">colorMode()</a>. The last parameter sets the alpha
 * (transparency) value.
 * @param color any value created by the <a href="#/p5/color">color()</a> function
 */
function background(color: P5.Color): void;
function background(colorstring: string, a?: number): void;
function background(gray: number, a?: number): void;
function background(v1: number, v2: number, v3: number, a?: number): void;
function background(values: number[]): void;
function background(image: P5.Image, a?: number): void;

/**
 * Creates a light that shines in one direction.
 * 
 * Directional lights don’t shine from a specific point. They’re like a sun
 * that shines from somewhere offscreen. The light’s direction is set using
 * three `(x, y, z)` values between -1 and 1. For example, setting a light’s
 * direction as `(1, 0, 0)` will light <a href="#/p5.Geometry">p5.Geometry</a>
 * objects from the left since the light faces directly to the right. A
 * maximum of 5 directional lights can be active at once.
 * 
 * There are four ways to call `directionalLight()` with parameters to set the
 * light’s color and direction.
 * 
 * The first way to call `directionalLight()` has six parameters. The first
 * three parameters, `v1`, `v2`, and `v3`, set the light’s color using the
 * current <a href="#/p5/colorMode">colorMode()</a>. The last three
 * parameters, `x`, `y`, and `z`, set the light’s direction. For example,
 * `directionalLight(255, 0, 0, 1, 0, 0)` creates a red `(255, 0, 0)` light
 * that shines to the right `(1, 0, 0)`.
 * 
 * The second way to call `directionalLight()` has four parameters. The first
 * three parameters, `v1`, `v2`, and `v3`, set the light’s color using the
 * current <a href="#/p5/colorMode">colorMode()</a>. The last parameter,
 * `direction` sets the light’s direction using a
 * <a href="#/p5.Vector">p5.Vector</a> object. For example,
 * `directionalLight(255, 0, 0, lightDir)` creates a red `(255, 0, 0)` light
 * that shines in the direction the `lightDir` vector points.
 * 
 * The third way to call `directionalLight()` has four parameters. The first
 * parameter, `color`, sets the light’s color using a
 * <a href="#/p5.Color">p5.Color</a> object or an array of color values. The
 * last three parameters, `x`, `y`, and `z`, set the light’s direction. For
 * example, `directionalLight(myColor, 1, 0, 0)` creates a light that shines
 * to the right `(1, 0, 0)` with the color value of `myColor`.
 * 
 * The fourth way to call `directionalLight()` has two parameters. The first
 * parameter, `color`, sets the light’s color using a
 * <a href="#/p5.Color">p5.Color</a> object or an array of color values. The
 * second parameter, `direction`, sets the light’s direction using a
 * <a href="#/p5.Vector">p5.Vector</a> object. For example,
 * `directionalLight(myColor, lightDir)` creates a light that shines in the
 * direction the `lightDir` vector points with the color value of `myColor`.
 * @param v1 red or hue value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 * @param v2 green or saturation value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 * @param v3 blue, brightness, or lightness value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 * @param x x-component of the light's direction between -1 and 1.
 * @param y y-component of the light's direction between -1 and 1.
 * @param z z-component of the light's direction between -1 and 1.
 */
function directionalLight(v1: number, v2: number, v3: number, x: number, y: number, z: number): void;
function directionalLight(v1: number, v2: number, v3: number, direction: P5.Vector): void;
function directionalLight(color: P5.Color | number[] | string, x: number, y: number, z: number): void;
function directionalLight(color: P5.Color | number[] | string, direction: P5.Vector): void;

/**
 * Splits a `String` into pieces and returns an array containing the pieces.
 * 
 * `splitTokens()` is an enhanced version of
 * <a href="#/p5/split">split()</a>. It can split a string when any characters
 * from a list are detected.
 * 
 * The first parameter, `value`, is the string to split.
 * 
 * The second parameter, `delim`, is optional. It sets the character(s) that
 * should be used to split the string. `delim` can be a single string, as in
 * `splitTokens('rock...paper...scissors...shoot', '...')`, or an array of
 * strings, as in
 * `splitTokens('rock;paper,scissors...shoot, [';', ',', '...'])`. By default,
 * if no `delim` characters are specified, then any whitespace character is
 * used to split. Whitespace characters include tab (`\t`), line feed (`\n`),
 * carriage return (`\r`), form feed (`\f`), and space.
 * @param value string to split.
 * @param delim character(s) to use for splitting the string.
 * @returns separated strings.
 */
function splitTokens(value: string, delim?: string): string[];

/**
 * Calculates a number between two numbers at a specific increment.
 * 
 * The `amt` parameter is the amount to interpolate between the two numbers.
 * 0.0 is equal to the first number, 0.1 is very near the first number, 0.5 is
 * half-way in between, and 1.0 is equal to the second number. The `lerp()`
 * function is convenient for creating motion along a straight path and for
 * drawing dotted lines.
 * 
 * If the value of `amt` is less than 0 or more than 1, `lerp()` will return a
 * number outside of the original interval. For example, calling
 * `lerp(0, 10, 1.5)` will return 15.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Declare variables for coordinates.
 * let a = 20;
 * let b = 80;
 * let c = lerp(a, b, 0.2);
 * let d = lerp(a, b, 0.5);
 * let e = lerp(a, b, 0.8);
 * 
 * strokeWeight(5);
 * 
 * // Draw the original points in black.
 * stroke(0);
 * point(a, 50);
 * point(b, 50);
 * 
 * // Draw the lerped points in gray.
 * stroke(100);
 * point(c, 50);
 * point(d, 50);
 * point(e, 50);
 * 
 * describe('Five points in a horizontal line. The outer points are black and the inner points are gray.');
 * }``let x = 50;
 * let y = 50;
 * let targetX = 50;
 * let targetY = 50;
 * 
 * function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * describe('A white circle at the center of a gray canvas. The circle moves to where the user clicks, then moves smoothly back to the center.');
 * }
 * 
 * function draw() {
 * background(220);
 * 
 * // Move x and y toward the target.
 * x = lerp(x, targetX, 0.05);
 * y = lerp(y, targetY, 0.05);
 * 
 * // Draw the circle.
 * circle(x, y, 20);
 * }
 * 
 * // Set x and y when the user clicks the mouse.
 * function mouseClicked() {
 * x = mouseX;
 * y = mouseY;
 * }``lerp()` can also be used in shaders with p5.strands, where it maps to the
 * <a href="#/p5/mix">mix()</a> function in GLSL. The following example
 * uses `lerp()` to blend colors on a shape over time.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere that blends between teal and coral.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
 * let t = millis() * 0.001;
 * 
 * // sin(t) goes between -1 and 1 over time.
 * // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
 * let value = 0.5 + 0.5 * sin(t);
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let teal = [0, 0.8, 0.8, 1];
 * let coral = [1, 0.5, 0.3, 1];
 * 
 * finalColor.begin();
 * 
 * // lerp() blends teal (when value = 0) and coral (when value = 1).
 * finalColor.set(lerp(teal, coral, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param start first value.
 * @param stop second value.
 * @param amt number.
 * @returns lerped value.
 */
function lerp(start: number, stop: number, amt: number): number;

/**
 * A function that's called once when any key is pressed.
 * 
 * Declaring the function `keyPressed()` sets a code block to run once
 * automatically when the user presses any key:
 * 
 * `function keyPressed() {
 * // Code to run.
 * }`The <a href="#/p5/key">key</a> and <a href="#/p5/keyCode">keyCode</a>
 * variables will be updated with the most recently typed value when
 * `keyPressed()` is called by p5.js:
 * 
 * `function keyPressed() {
 * if (key === 'c') {
 * // Code to run.
 * }
 * 
 * if (keyCode === 13) { // Enter key
 * // Code to run.
 * }
 * }`The parameter, `event`, is optional. `keyPressed()` is always passed a
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent" target="_blank">KeyboardEvent</a>
 * object with properties that describe the key press event:
 * 
 * `function keyPressed(event) {
 * // Code to run that uses the event.
 * console.log(event);
 * }`Browsers may have default behaviors attached to various key events. For
 * example, some browsers may jump to the bottom of a web page when the
 * `SPACE` key is pressed. To prevent any default behavior for this event, add
 * `return false;` to the end of the function.
 * @param event optional `KeyboardEvent` callback argument.
 */
function keyPressed(event?: KeyboardEvent): void;

/**
 * Draws a box (rectangular prism).
 * 
 * A box is a 3D shape with six faces. Each face makes a 90˚ with four
 * neighboring faces.
 * 
 * The first parameter, `width`, is optional. If a `Number` is passed, as in
 * `box(20)`, it sets the box’s width and height. By default, `width` is 50.
 * 
 * The second parameter, `height`, is also optional. If a `Number` is passed,
 * as in `box(20, 30)`, it sets the box’s height. By default, `height` is set
 * to the box’s `width`.
 * 
 * The third parameter, `depth`, is also optional. If a `Number` is passed, as
 * in `box(20, 30, 40)`, it sets the box’s depth. By default, `depth` is set
 * to the box’s `height`.
 * 
 * The fourth parameter, `detailX`, is also optional. If a `Number` is passed,
 * as in `box(20, 30, 40, 5)`, it sets the number of triangle subdivisions to
 * use along the x-axis. All 3D shapes are made by connecting triangles to
 * form their surfaces. By default, `detailX` is 1.
 * 
 * The fifth parameter, `detailY`, is also optional. If a number is passed, as
 * in `box(20, 30, 40, 5, 7)`, it sets the number of triangle subdivisions to
 * use along the y-axis. All 3D shapes are made by connecting triangles to
 * form their surfaces. By default, `detailY` is 1.
 * 
 * Note: `box()` can only be used in WebGL mode.
 * @param width width of the box.
 * @param height height of the box.
 * @param depth depth of the box.
 * @param detailX number of triangle subdivisions along the x-axis.
 * @param detailY number of triangle subdivisions along the y-axis.
 */
function box(width?: number, height?: number, depth?: number, detailX?: number, detailY?: number): void;

/**
 * Clears the depth buffer in WebGL mode.
 * 
 * `clearDepth()` clears information about how far objects are from the camera
 * in 3D space. This information is stored in an object called the
 * depth buffer. Clearing the depth buffer ensures new objects aren't drawn
 * behind old ones. Doing so can be useful for feedback effects in which the
 * previous frame serves as the background for the current frame.
 * 
 * The parameter, `depth`, is optional. If a number is passed, as in
 * `clearDepth(0.5)`, it determines the range of objects to clear from the
 * depth buffer. 0 doesn't clear any depth information, 0.5 clears depth
 * information halfway between the near and far clipping planes, and 1 clears
 * depth information all the way to the far clipping plane. By default,
 * `depth` is 1.
 * 
 * Note: `clearDepth()` can only be used in WebGL mode.
 * @param depth amount of the depth buffer to clear between 0
 * (none) and 1 (far clipping plane). Defaults to 1.
 */
function clearDepth(depth?: number): void;

/**
 * Adds a Bézier curve segment to a custom shape.
 * 
 * `bezierVertex()` adds a curved segment to custom shapes. The Bézier curves
 * it creates are defined like those made by the
 * <a href="#/p5/bezier">bezier()</a> function. `bezierVertex()` must be
 * called between the
 * <a href="#/p5/beginShape">beginShape()</a> and
 * <a href="#/p5/endShape">endShape()</a> functions.
 * Bézier need a starting point. Building a shape
 * only with Bézier curves needs one initial
 * call to <a href="#/p5/vertex">bezierVertex()</a>, before
 * a number of `bezierVertex()` calls that is a multiple of the parameter
 * set by <a href="#/p5/bezierOrder">bezierOrder(...)</a> (default 3).
 * But shapes can mix different types of vertices, so if there
 * are some previous vertices, then the initial anchor is not needed,
 * only the multiples of 3 (or the Bézier order) calls to
 * `bezierVertex` for each curve.
 * 
 * Each curve of order 3 requires three calls to `bezierVertex`, so
 * 2 curves would need 7 calls to `bezierVertex()`:
 * (1 one initial anchor point, two sets of 3 curves describing the curves)
 * With `bezierOrder(2)`, two curves would need 5 calls: 1 + 2 + 2.
 * 
 * Bézier curves can also be drawn in 3D using WebGL mode.
 * 
 * Note: `bezierVertex()` won’t work when an argument is passed to
 * <a href="#/p5/beginShape">beginShape()</a>.
 * @param x x-coordinate of the first control point.
 * @param y y-coordinate of the first control point.
 */
function bezierVertex(x: number, y: number, u?: number, v?: number): void;
function bezierVertex(x: number, y: number, z: number, u?: number, v?: number): void;

/**
 * Creates an `<a></a>` element that links to another web page.
 * 
 * The first parmeter, `href`, is a string that sets the URL of the linked
 * page.
 * 
 * The second parameter, `html`, is a string that sets the inner HTML of the
 * link. It's common to use text, images, or buttons as links.
 * 
 * The third parameter, `target`, is optional. It's a string that tells the
 * web browser where to open the link. By default, links open in the current
 * browser tab. Passing `'_blank'` will cause the link to open in a new
 * browser tab. MDN describes a few
 * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target" target="_blank">other options</a>.
 * @param href URL of linked page.
 * @param html inner HTML of link element to display.
 * @param target target where the new link should open,
 * either `'_blank'`, `'_self'`, `'_parent'`, or `'_top'`.
 * @returns new <a href="#/p5.Element">p5.Element</a> object.
 */
function createA(href: string, html: string, target?: string): P5.Element;

/**
 * Captures a sequence of frames from the canvas that can be saved as images.
 * 
 * `saveFrames()` creates an array of frame objects. Each frame is stored as
 * an object with its file type, file name, and image data as a string. For
 * example, the first saved frame might have the following properties:
 * 
 * `{ ext: 'png', filenmame: 'frame0', imageData: 'data:image/octet-stream;base64, abc123' }`.
 * 
 * The first parameter, `filename`, sets the prefix for the file names. For
 * example, setting the prefix to `'frame'` would generate the image files
 * `frame0.png`, `frame1.png`, and so on.
 * 
 * The second parameter, `extension`, sets the file type to either `'png'` or
 * `'jpg'`.
 * 
 * The third parameter, `duration`, sets the duration to record in seconds.
 * The maximum duration is 15 seconds.
 * 
 * The fourth parameter, `framerate`, sets the number of frames to record per
 * second. The maximum frame rate value is 22. Limits are placed on `duration`
 * and `framerate` to avoid using too much memory. Recording large canvases
 * can easily crash sketches or even web browsers.
 * 
 * The fifth parameter, `callback`, is optional. If a function is passed,
 * image files won't be saved by default. The callback function can be used
 * to process an array containing the data for each captured frame. The array
 * of image data contains a sequence of objects with three properties for each
 * frame: `imageData`, `filename`, and `extension`.
 * 
 * Note: Frames are downloaded as individual image files by default.
 * @param filename prefix of file name.
 * @param extension file extension, either 'jpg' or 'png'.
 * @param duration duration in seconds to record. This parameter will be constrained to be less or equal to 15.
 * @param framerate number of frames to save per second. This parameter will be constrained to be less or equal to 22.
 * @param callback callback function that will be executed
 * to handle the image data. This function
 * should accept an array as argument. The
 * array will contain the specified number of
 * frames of objects. Each object has three
 * properties: `imageData`, `filename`, and `extension`.
 */
function saveFrames(filename: string, extension: string, duration: number, framerate: number, callback?: (arg0: any[]) => void): void;

/**
 * Draws a straight line between two points.
 * 
 * A line's default width is one pixel. The version of `line()` with four
 * parameters draws the line in 2D. To color a line, use the
 * <a href="#/p5/stroke">stroke()</a> function. To change its width, use the
 * <a href="#/p5/strokeWeight">strokeWeight()</a> function. A line
 * can't be filled, so the <a href="#/p5/fill">fill()</a> function won't
 * affect the line's color.
 * 
 * The version of `line()` with six parameters allows the line to be drawn in
 * 3D space. Doing so requires adding the `WEBGL` argument to
 * <a href="#/p5/createCanvas">createCanvas()</a>.
 * @param x1 the x-coordinate of the first point.
 * @param y1 the y-coordinate of the first point.
 * @param x2 the x-coordinate of the second point.
 * @param y2 the y-coordinate of the second point.
 */
function line(x1: number, y1: number, x2: number, y2: number): void;
function line(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number): void;

/**
 * Clears the pixels on the canvas.
 * 
 * `clear()` makes every pixel 100% transparent. Calling `clear()` doesn't
 * clear objects created by `createX()` functions such as
 * <a href="#/p5/createGraphics">createGraphics()</a>,
 * <a href="#/p5/createVideo">createVideo()</a>, and
 * <a href="#/p5/createImg">createImg()</a>. These objects will remain
 * unchanged after calling `clear()` and can be redrawn.
 * 
 * In WebGL mode, this function can clear the screen to a specific color. It
 * interprets four numeric parameters as normalized RGBA color values. It also
 * clears the depth buffer. If you are not using the WebGL renderer, these
 * parameters will have no effect.
 * @param r normalized red value.
 * @param g normalized green value.
 * @param b normalized blue value.
 * @param a normalized alpha value.
 */
function clear(r?: number, g?: number, b?: number, a?: number): void;
function clear(): void;

/**
 * A function that's called once when the sketch begins running.
 * 
 * Declaring the function `setup()` sets a code block to run once
 * automatically when the sketch starts running. It's used to perform
 * setup tasks such as creating the canvas and initializing variables:
 * 
 * `function setup() {
 * // Code to run once at the start of the sketch.
 * }`Code placed in `setup()` will run once before code placed in
 * <a href="#/p5/draw">draw()</a> begins looping.
 * If `setup()` is declared `async` (e.g. `async function setup()`),
 * execution pauses at each `await` until its promise resolves.
 * For example, `font = await loadFont(...)` waits for the font asset
 * to load because `loadFont()` function returns a promise, and the await
 * keyword means the program will wait for the promise to resolve.
 * This ensures that all assets are fully loaded before the sketch continues.
 * 
 * loading assets.
 * 
 * Note: `setup()` doesn’t have to be declared, but it’s common practice to do so.
 */
function setup(): void | Promise<void>;

/**
 * A function that's called repeatedly while the sketch runs.
 * 
 * Declaring the function `draw()` sets a code block to run repeatedly
 * once the sketch starts. It’s used to create animations and respond to
 * user inputs:
 * 
 * `function draw() {
 * // Code to run repeatedly.
 * }`This is often called the "draw loop" because p5.js calls the code in
 * `draw()` in a loop behind the scenes. By default, `draw()` tries to run
 * 60 times per second. The actual rate depends on many factors. The
 * drawing rate, called the "frame rate", can be controlled by calling
 * <a href="#/p5/frameRate">frameRate()</a>. The number of times `draw()`
 * has run is stored in the system variable
 * <a href="#/p5/frameCount">frameCount()</a>.
 * 
 * Code placed within `draw()` begins looping after
 * <a href="#/p5/setup">setup()</a> runs. `draw()` will run until the user
 * closes the sketch. `draw()` can be stopped by calling the
 * <a href="#/p5/noLoop">noLoop()</a> function. `draw()` can be resumed by
 * calling the <a href="#/p5/loop">loop()</a> function.
 */
function draw(): void;

/**
 * Converts a `Number` or `String` to a single-character `String`.
 * 
 * `char()` converts numbers to their single-character string representations.
 * 
 * The parameter, `n`, is the value to convert. If a number is passed, as in
 * `char(65)`, the corresponding single-character string is returned. If a
 * string is passed, as in `char('65')`, the string is converted to an integer
 * (whole number) and the corresponding single-character string is returned.
 * If an array is passed, as in `char([65, 66, 67])`, an array of
 * single-character strings is returned.
 * 
 * See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode" target="_blank">MDN</a>
 * for more information about conversions.
 * @param n value to convert.
 * @returns converted single-character string.
 */
function char(n: string | number): string;
function char(ns: any[]): string[];

/**
 * Rotates the coordinate system about the y-axis in WebGL mode.
 * 
 * The parameter, `angle`, is the amount to rotate. For example, calling
 * `rotateY(1)` rotates the coordinate system about the y-axis by 1 radian.
 * `rotateY()` interprets angle values using the current
 * <a href="#/p5/angleMode">angleMode()</a>.
 * 
 * By default, transformations accumulate. For example, calling `rotateY(1)`
 * twice has the same effect as calling `rotateY(2)` once. The
 * <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions
 * can be used to isolate transformations within distinct drawing groups.
 * 
 * Note: Transformations are reset at the beginning of the draw loop. Calling
 * `rotateY(1)` inside the <a href="#/p5/draw">draw()</a> function won't cause
 * shapes to spin.
 * @param angle angle of rotation in the current <a href="#/p5/angleMode">angleMode()</a>.
 */
function rotateY(angle: number): void;

/**
 * Adds a grid and an axes icon to clarify orientation in 3D sketches.
 * 
 * `debugMode()` adds a grid that shows where the “ground” is in a sketch. By
 * default, the grid will run through the origin `(0, 0, 0)` of the sketch
 * along the XZ plane. `debugMode()` also adds an axes icon that points along
 * the positive x-, y-, and z-axes. Calling `debugMode()` displays the grid
 * and axes icon with their default size and position.
 * 
 * There are four ways to call `debugMode()` with optional parameters to
 * customize the debugging environment.
 * 
 * The first way to call `debugMode()` has one parameter, `mode`. If the
 * system constant `GRID` is passed, as in `debugMode(GRID)`, then the grid
 * will be displayed and the axes icon will be hidden. If the constant `AXES`
 * is passed, as in `debugMode(AXES)`, then the axes icon will be displayed
 * and the grid will be hidden.
 * 
 * The second way to call `debugMode()` has six parameters. The first
 * parameter, `mode`, selects either `GRID` or `AXES` to be displayed. The
 * next five parameters, `gridSize`, `gridDivisions`, `xOff`, `yOff`, and
 * `zOff` are optional. They’re numbers that set the appearance of the grid
 * (`gridSize` and `gridDivisions`) and the placement of the axes icon
 * (`xOff`, `yOff`, and `zOff`). For example, calling
 * `debugMode(20, 5, 10, 10, 10)` sets the `gridSize` to 20 pixels, the number
 * of `gridDivisions` to 5, and offsets the axes icon by 10 pixels along the
 * x-, y-, and z-axes.
 * 
 * The third way to call `debugMode()` has five parameters. The first
 * parameter, `mode`, selects either `GRID` or `AXES` to be displayed. The
 * next four parameters, `axesSize`, `xOff`, `yOff`, and `zOff` are optional.
 * They’re numbers that set the appearance of the size of the axes icon
 * (`axesSize`) and its placement (`xOff`, `yOff`, and `zOff`).
 * 
 * The fourth way to call `debugMode()` has nine optional parameters. The
 * first five parameters, `gridSize`, `gridDivisions`, `gridXOff`, `gridYOff`,
 * and `gridZOff` are numbers that set the appearance of the grid. For
 * example, calling `debugMode(100, 5, 0, 0, 0)` sets the `gridSize` to 100,
 * the number of `gridDivisions` to 5, and sets all the offsets to 0 so that
 * the grid is centered at the origin. The next four parameters, `axesSize`,
 * `xOff`, `yOff`, and `zOff` are numbers that set the appearance of the size
 * of the axes icon (`axesSize`) and its placement (`axesXOff`, `axesYOff`,
 * and `axesZOff`). For example, calling
 * `debugMode(100, 5, 0, 0, 0, 50, 10, 10, 10)` sets the `gridSize` to 100,
 * the number of `gridDivisions` to 5, and sets all the offsets to 0 so that
 * the grid is centered at the origin. It then sets the `axesSize` to 50 and
 * offsets the icon 10 pixels along each axis.
 */
function debugMode(): void;
function debugMode(mode: typeof P5.GRID | typeof P5.AXES): void;
function debugMode(mode: typeof P5.GRID | typeof P5.AXES, gridSize?: number, gridDivisions?: number, xOff?: number, yOff?: number, zOff?: number): void;
function debugMode(mode: typeof P5.GRID | typeof P5.AXES, axesSize?: number, xOff?: number, yOff?: number, zOff?: number): void;
function debugMode(gridSize?: number, gridDivisions?: number, gridXOff?: number, gridYOff?: number, gridZOff?: number, axesSize?: number, axesXOff?: number, axesYOff?: number, axesZOff?: number): void;

/**
 * Rotates the camera in a clockwise/counter-clockwise direction.
 * 
 * Rolling rotates the camera without changing its orientation. The rotation
 * happens in the camera’s "local" space.
 * 
 * The parameter, `angle`, is the angle the camera should rotate. Passing a
 * positive angle, as in `myCamera.roll(0.001)`, rotates the camera in counter-clockwise direction.
 * Passing a negative angle, as in `myCamera.roll(-0.001)`, rotates the
 * camera in clockwise direction.
 * 
 * Note: Angles are interpreted based on the current
 * <a href="#/p5/angleMode">angleMode()</a>.
 * @param angle amount to rotate camera in current
 * <a href="#/p5/angleMode">angleMode</a> units.
 */
function roll(angle: number): void;

/**
 * Draws a curve using a Catmull-Rom spline.
 * 
 * Spline curves can form shapes and curves that slope gently. They’re like
 * cables that are attached to a set of points. By default (`ends: INCLUDE`),
 * the curve passes through all four points you provide, in order
 * `p0(x1,y1)` -> `p1(x2,y2)` -> `p2(x3,y3)` -> `p3(x4,y4)`. Think of them as
 * points on a curve. If you switch to `ends: EXCLUDE`, p0 and p3 act
 * like control points and only the middle span `p1->p2` is drawn.
 * 
 * Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
 * `spline()` has twelve arguments because each point has x-, y-, and
 * z-coordinates.
 * @param x1 x-coordinate of point p0.
 * @param y1 y-coordinate of point p0.
 * @param x2 x-coordinate of point p1.
 * @param y2 y-coordinate of point p1.
 * @param x3 x-coordinate of point p2.
 * @param y3 y-coordinate of point p2.
 * @param x4 x-coordinate of point p3.
 * @param y4 y-coordinate of point p3.
 */
function spline(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): void;
function spline(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number, x3: number, y3: number, z3: number, x4: number, y4: number, z4: number): void;

/**
 * Calculates the sine of an angle.
 * 
 * `sin()` is useful for many geometric tasks in creative coding. The values
 * returned oscillate between -1 and 1 as the input angle increases. `sin()`
 * calculates the sine of an angle, using radians by default, or according to
 * if <a href="#/p5/angleMode">angleMode()</a> setting (RADIANS or DEGREES).
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * describe('A white ball on a string oscillates up and down.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Calculate the coordinates.
 * let x = 50;
 * let y = 30 * sin(frameCount * 0.05) + 50;
 * 
 * // Draw the oscillator.
 * line(50, y, x, y);
 * circle(x, y, 20);
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * describe('A series of black dots form a wave pattern.');
 * }
 * 
 * function draw() {
 * // Calculate the coordinates.
 * let x = frameCount;
 * let y = 30 * sin(x * 0.1) + 50;
 * 
 * // Draw the point.
 * point(x, y);
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * describe('A series of black dots form an infinity symbol.');
 * }
 * 
 * function draw() {
 * // Calculate the coordinates.
 * let x = 30 * cos(frameCount * 0.1) + 50;
 * let y = 10 * sin(frameCount * 0.2) + 50;
 * 
 * // Draw the point.
 * point(x, y);
 * }``sin()` can also be used in shaders with p5.strands. The following example
 * uses `sin()` to oscillate the color of a shape over time.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere that pulses between cyan and magenta.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
 * let t = millis() * 0.001;
 * 
 * // sin(t) oscillates between -1 and 1.
 * // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
 * let value = 0.5 + 0.5 * sin(t);
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let cyan = [0, 1, 1, 1];
 * let magenta = [1, 0, 1, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between cyan (when value = 0) and magenta (when value = 1).
 * finalColor.set(mix(cyan, magenta, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param angle the angle, in radians by default, or according to if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or DEGREES).
 * @returns sine of the angle.
 */
function sin(angle: number): number;

/**
 * Loads an XML file to create a <a href="#/p5.XML">p5.XML</a> object.
 * 
 * Extensible Markup Language
 * (<a href="https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction" target="_blank">XML</a>)
 * is a standard format for sending data between applications. Like HTML, the
 * XML format is based on tags and attributes, as in
 * `<time units="s">1234</time>`.
 * 
 * The first parameter, `path`, is always a string with the path to the file.
 * Paths to local files should be relative, as in
 * `loadXML('assets/data.xml')`. URLs such as `'https://example.com/data.xml'`
 * may be blocked due to browser security. The `path` parameter can also be defined
 * as a `Request`
 * object for more advanced usage.
 * 
 * The second parameter, `successCallback`, is optional. If a function is
 * passed, as in `loadXML('assets/data.xml', handleData)`, then the
 * `handleData()` function will be called once the data loads. The
 * <a href="#/p5.XML">p5.XML</a> object created from the data will be passed
 * to `handleData()` as its only argument. The return value of the `handleData()`
 * function will be used as the final return value of `loadXML('assets/data.xml', handleData)`.
 * 
 * The third parameter, `failureCallback`, is also optional. If a function is
 * passed, as in `loadXML('assets/data.xml', handleData, handleFailure)`, then
 * the `handleFailure()` function will be called if an error occurs while
 * loading. The `Error` object will be passed to `handleFailure()` as its only
 * argument. The return value of the `handleFailure()` function will be used as the
 * final return value of `loadXML('assets/data.xml', handleData, handleFailure)`.
 * 
 * This function returns a `Promise` and should be used in an `async` setup with
 * `await`. See the examples for the usage syntax.
 * @param path path of the XML file to be loaded.
 * @param successCallback function to call once the data is
 * loaded. Will be passed the
 * <a href="#/p5.XML">p5.XML</a> object.
 * @param errorCallback function to call if the data fails to
 * load. Will be passed an `Error` event
 * object.
 * @returns XML data loaded into a <a href="#/p5.XML">p5.XML</a>
 * object.
 */
function loadXML(path: string | Request, successCallback?: Function, errorCallback?: Function): Promise<P5.XML>;

/**
 * Gets a pixel or a region of pixels from the canvas.
 * 
 * `get()` is easy to use but it's not as fast as
 * <a href="#/p5/pixels">pixels</a>. Use <a href="#/p5/pixels">pixels</a>
 * to read many pixel values.
 * 
 * The version of `get()` with no parameters returns the entire canvas.
 * 
 * The version of `get()` with two parameters interprets them as
 * coordinates. It returns an array with the `[R, G, B, A]` values of the
 * pixel at the given point.
 * 
 * The version of `get()` with four parameters interprets them as coordinates
 * and dimensions. It returns a subsection of the canvas as a
 * <a href="#/p5.Image">p5.Image</a> object. The first two parameters are the
 * coordinates for the upper-left corner of the subsection. The last two
 * parameters are the width and height of the subsection.
 * 
 * Use <a href="#/p5.Image/get">p5.Image.get()</a> to work directly with
 * <a href="#/p5.Image">p5.Image</a> objects.
 * @param x x-coordinate of the pixel.
 * @param y y-coordinate of the pixel.
 * @param w width of the subsection to be returned.
 * @param h height of the subsection to be returned.
 * @returns subsection as a <a href="#/p5.Image">p5.Image</a> object.
 */
function get(x: number, y: number, w: number, h: number): P5.Image;
function get(): P5.Image;
function get(x: number, y: number): number[];

/**
 * Calculates the natural logarithm (the base-e logarithm) of a number.
 * 
 * `log()` expects the `n` parameter to be a value greater than 0 because
 * the natural logarithm is defined that way.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Top-left.
 * let d = log(50);
 * circle(33, 33, d);
 * 
 * // Bottom-right.
 * d = log(500000000);
 * circle(67, 67, d);
 * 
 * describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is about five times larger.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * describe('A series of black dots that get higher slowly from left to right.');
 * }
 * 
 * function draw() {
 * // Invert the y-axis.
 * scale(1, -1);
 * translate(0, -100);
 * 
 * // Calculate coordinates.
 * let x = frameCount;
 * let y = 15 * log(x);
 * 
 * // Draw a point.
 * point(x, y);
 * }``log()` can also be used in shaders with p5.strands. The following example
 * uses `log()` to create a decelerating color transition on a shape.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere that slowly shifts from purple to yellow.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
 * let t = millis() * 0.001;
 * 
 * // log(1 + t * 2) grows at a moderate pace over time.
 * // Multiply by 0.4 to bring it into the 0 to 1 range.
 * // min(..., 1) caps the value at 1.
 * let value = min(log(1 + t * 2) * 0.4, 1);
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let purple = [0.5, 0, 0.5, 1];
 * let yellow = [1, 1, 0, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between purple (when value = 0) and yellow (when value = 1).
 * // Because log() slows down over time, the color transition decelerates.
 * finalColor.set(mix(purple, yellow, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param n number greater than 0.
 * @returns natural logarithm of n.
 */
function log(n: number): number;

/**
 * Shuffles the elements of an array.
 * 
 * The first parameter, `array`, is the array to be shuffled. For example,
 * calling `shuffle(myArray)` will shuffle the elements of `myArray`. By
 * default, the original array won’t be modified. Instead, a copy will be
 * created, shuffled, and returned.
 * 
 * The second parameter, `modify`, is optional. If `true` is passed, as in
 * `shuffle(myArray, true)`, then the array will be shuffled in place without
 * making a copy.
 * @param array array to shuffle.
 * @param modify if `true`, shuffle the original array in place. Defaults to `false`.
 * @returns shuffled array.
 */
function shuffle<T>(array: T[], modify?: boolean): T[];

/**
 * Gets the green value of a color.
 * 
 * `green()` extracts the green 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, `green()` returns a color's green value in the range 0
 * to 255. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to RGB, it
 * returns the green value in the given range.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a p5.Color object.
 * let c = color(175, 100, 220);
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'greenValue' to 100.
 * let greenValue = green(c);
 * 
 * // Draw the right rectangle.
 * fill(0, greenValue, 0);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is light purple and the right one is dark green.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a color array.
 * let c = [175, 100, 220];
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'greenValue' to 100.
 * let greenValue = green(c);
 * 
 * // Draw the right rectangle.
 * fill(0, greenValue, 0);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is light purple and the right one is dark green.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a CSS color string.
 * let c = 'rgb(175, 100, 220)';
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'greenValue' to 100.
 * let greenValue = green(c);
 * 
 * // Draw the right rectangle.
 * fill(0, greenValue, 0);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is light purple and the right one is dark green.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Use RGB color with values in the range 0-100.
 * colorMode(RGB, 100);
 * 
 * // Create a p5.Color object using RGB values.
 * let c = color(69, 39, 86);
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'greenValue' to 39.
 * let greenValue = green(c);
 * 
 * // Draw the right rectangle.
 * fill(0, greenValue, 0);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is light purple and the right one is dark green.');
 * }`In p5.strands shader callbacks, `green()` operates on `vec4` values and
 * returns the green channel as a normalized value in the 0–1 range.
 * `colorMode()` has no effect inside shader callbacks.
 * 
 * `let myShader;
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildMaterialShader(myShaderBuilder);
 * }
 * 
 * function myShaderBuilder() {
 * finalColor.begin();
 * let c = color(50, 200, 100);
 * let g = green(c);
 * finalColor.set(vec4(0, g, 0, 1.0));
 * finalColor.end();
 * }
 * 
 * function draw() {
 * shader(myShader);
 * noStroke();
 * sphere(40);
 * 
 * describe('A sphere colored using only its green channel.');
 * }`
 * @param color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
 * color components, or CSS color string.
 * @returns the green value.
 */
function green(color: P5.Color | number[] | string): number;

/**
 * A function that's called when the browser window is resized.
 * 
 * Code placed in the body of `windowResized()` will run when the
 * browser window's size changes. It's a good place to call
 * <a href="#/p5/resizeCanvas">resizeCanvas()</a> or make other
 * adjustments to accommodate the new window size.
 * 
 * The `event` parameter is optional. If added to the function declaration, it
 * can be used for debugging or other purposes.
 * @param event optional resize Event.
 */
function windowResized(event?: Event): void;

/**
 * Converts a single-character `String` to a `Number`.
 * 
 * `unchar()` converts single-character strings to their corresponding
 * integer (whole number).
 * 
 * The parameter, `n`, is the character to convert. For example,
 * `unchar('A')`, returns the number 65. If an array is passed, as in
 * `unchar(['A', 'B', 'C'])`, an array of integers is returned.
 * @param n value to convert.
 * @returns converted number.
 */
function unchar(n: string): number;
function unchar(ns: string[]): number[];

/**
 * Turns off <a href="#/p5/debugMode">debugMode()</a> in a 3D sketch.
 */
function noDebugMode(): void;

/**
 * Draws a sphere.
 * 
 * A sphere is a 3D shape with triangular faces that connect to form a round
 * surface. Spheres with few faces look like crystals. Spheres with many faces
 * have smooth surfaces and look like balls.
 * 
 * The first parameter, `radius`, is optional. If a `Number` is passed, as in
 * `sphere(20)`, it sets the radius of the sphere. By default, `radius` is 50.
 * 
 * The second parameter, `detailX`, is also optional. If a `Number` is passed,
 * as in `sphere(20, 5)`, it sets the number of triangle subdivisions to use
 * along the x-axis. All 3D shapes are made by connecting triangles to form
 * their surfaces. By default, `detailX` is 24.
 * 
 * The third parameter, `detailY`, is also optional. If a `Number` is passed,
 * as in `sphere(20, 5, 2)`, it sets the number of triangle subdivisions to
 * use along the y-axis. All 3D shapes are made by connecting triangles to
 * form their surfaces. By default, `detailY` is 16.
 * 
 * Note: `sphere()` can only be used in WebGL mode.
 * @param radius radius of the sphere. Defaults to 50.
 * @param detailX number of triangle subdivisions along the x-axis. Defaults to 24.
 * @param detailY number of triangle subdivisions along the y-axis. Defaults to 16.
 */
function sphere(radius?: number, detailX?: number, detailY?: number): void;

/**
 * Loads the current value of each pixel on the canvas into the
 * <a href="#/p5/pixels">pixels</a> array.
 * 
 * `loadPixels()` must be called before reading from or writing to
 * <a href="#/p5/pixels">pixels</a>.
 */
function loadPixels(): void;

/**
 * This method is suitable for fetching files up to size of 64MB.
 * @param file name of the file or URL to load
 * @param callback function to be executed after <a href="#/p5/loadBytes">loadBytes()</a>
 * completes
 * @param errorCallback function to be executed if there
 * is an error
 * @returns a Uint8Array containing the loaded buffer
 */
function loadBytes(file: string | Request, callback?: Function, errorCallback?: Function): Promise<Uint8Array>;

/**
 * Creates a <a href="#/p5.Shader">p5.Shader</a> object to be used with the
 * <a href="#/p5/filter">filter()</a> function.
 * 
 * The main way to use `buildFilterShader` is to pass a function in as a parameter.
 * This will let you create a shader using p5.strands.
 * 
 * In your function, you can use <a href="#/p5/filterColor">`filterColor`</a> with a function
 * that will be called for each pixel on the image to determine its final color. You can
 * read the color of the current pixel with `getTexture(canvasContent, coord)`.
 * See <a href="#/p5/getTexture">getTexture()</a>.
 * 
 * `async function setup() {
 * createCanvas(50, 50, WEBGL);
 * let img = await loadImage('assets/bricks.jpg');
 * let myFilter = buildFilterShader(tintShader);
 * 
 * image(img, -50, -50);
 * filter(myFilter);
 * describe('Bricks tinted red');
 * }
 * 
 * function tintShader() {
 * filterColor.begin();
 * let result = getTexture(
 * filterColor.canvasContent,
 * filterColor.texCoord
 * );
 * // Zero out the green and blue channels, leaving red
 * result.g = 0;
 * result.b = 0;
 * filterColor.set(result);
 * filterColor.end();
 * }`You can create uniforms if you want to pass data into your filter from the rest of your sketch.
 * For example, you could pass in the mouse cursor position and use that to control how much
 * you warp the content. If you create a uniform inside the shader using a function like `uniformFloat()`, with
 * `uniform` + the type of the data, you can set its value using `setUniform` right before applying the filter.
 * In the example below, move your mouse across the image to see it update the `warpAmount` uniform:
 * 
 * `let img;
 * let myFilter;
 * async function setup() {
 * createCanvas(50, 50, WEBGL);
 * img = await loadImage('assets/bricks.jpg');
 * myFilter = buildFilterShader(warpShader);
 * describe('Warped bricks');
 * }
 * 
 * function warpShader() {
 * let warpAmount = uniformFloat();
 * filterColor.begin();
 * let coord = filterColor.texCoord;
 * coord.y += sin(coord.x * 10) * warpAmount;
 * filterColor.set(
 * getTexture(filterColor.canvasContent, coord)
 * );
 * filterColor.end();
 * }
 * 
 * function draw() {
 * image(img, -50, -50);
 * myFilter.setUniform(
 * 'warpAmount',
 * map(mouseX, 0, width, 0, 1, true)
 * );
 * filter(myFilter);
 * }`You can also make filters that do not need any content to be drawn first!
 * There is a lot you can draw just using, for example, the position of the pixel.
 * `inputs.texCoord` has an `x` and a `y` property, each with a number between 0 and 1.
 * 
 * `function setup() {
 * createCanvas(50, 50, WEBGL);
 * let myFilter = buildFilterShader(gradient);
 * describe('A gradient with red, green, yellow, and black');
 * filter(myFilter);
 * }
 * 
 * function gradient() {
 * filterColor.begin();
 * filterColor.set([filterColor.texCoord.x, filterColor.texCoord.y, 0, 1]);
 * filterColor.end();
 * }``function setup() {
 * createCanvas(50, 50, WEBGL);
 * let myFilter = buildFilterShader(gradient);
 * describe('A gradient from red to blue');
 * filter(myFilter);
 * }
 * 
 * function gradient() {
 * filterColor.begin();
 * filterColor.set(mix(
 * [1, 0, 0, 1], // Red
 * [0, 0, 1, 1], // Blue
 * filterColor.texCoord.x // x coordinate, from 0 to 1
 * ));
 * filterColor.end();
 * }`You can also animate your filters over time using the `millis()` function.
 * 
 * `let myFilter;
 * function setup() {
 * createCanvas(50, 50, WEBGL);
 * myFilter = buildFilterShader(gradient);
 * describe('A moving, repeating gradient from red to blue');
 * }
 * 
 * function gradient() {
 * let time = millis();
 * filterColor.begin();
 * filterColor.set(mix(
 * [1, 0, 0, 1], // Red
 * [0, 0, 1, 1], // Blue
 * sin(filterColor.texCoord.x*15 + time*0.004)/2+0.5
 * ));
 * filterColor.end();
 * }
 * 
 * function draw() {
 * 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 using the millis() function to get an up-to-date time value.
 * 
 * `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 = millis();
 * 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() {
 * 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.
 * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
 * for more info. Alternatively, `buildFilterShader()` can also be used like
 * <a href="#/p5/createShader">createShader()</a>, but where you only specify a fragment shader.
 * 
 * For more info about filters and shaders, see Adam Ferriss' <a href="https://github.com/aferriss/p5jsShaderExamples">repo of shader examples</a>
 * or the <a href="https://p5js.org/learn/getting-started-in-webgl-shaders.html">Introduction to Shaders</a> tutorial.
 * @param callback A function building a p5.strands shader.
 * @param scope An optional scope object passed to .modify().
 * @returns The material shader
 */
function buildFilterShader(callback: Function, scope?: object): P5.Shader;
function buildFilterShader(hooks: object, scope?: object): P5.Shader;

/**
 * Creates a slider `<input></input>` element.
 * 
 * Range sliders are useful for quickly selecting numbers from a given range.
 * 
 * The first two parameters, `min` and `max`, are numbers that set the
 * slider's minimum and maximum.
 * 
 * The third parameter, `value`, is optional. It's a number that sets the
 * slider's default value.
 * 
 * The fourth parameter, `step`, is also optional. It's a number that sets the
 * spacing between each value in the slider's range. Setting `step` to 0
 * allows the slider to move smoothly from `min` to `max`.
 * @param min minimum value of the slider.
 * @param max maximum value of the slider.
 * @param value default value of the slider.
 * @param step size for each step in the slider's range.
 * @returns new <a href="#/p5.Element">p5.Element</a> object.
 */
function createSlider(min: number, max: number, value?: number, step?: number): P5.Element;

/**
 * Calculates the magnitude, or length, of a vector.
 * 
 * A vector can be thought of in different ways. In one view, a vector is a
 * point in space. The vector's components, `x` and `y`, are the point's
 * coordinates `(x, y)`. A vector's magnitude is the distance from the origin
 * `(0, 0)` to `(x, y)`. `mag(x, y)` is a shortcut for calling
 * `dist(0, 0, x, y)`.
 * 
 * A vector can also be thought of as an arrow pointing in space. This view is
 * helpful for programming motion. See <a href="#/p5.Vector">p5.Vector</a> for
 * more details.
 * 
 * Use <a href="#/p5.Vector/mag">p5.Vector.mag()</a> to calculate the
 * magnitude of a <a href="#/p5.Vector">p5.Vector</a> object.
 * @param x first component.
 * @param y second component.
 * @returns magnitude of vector.
 */
function mag(x: number, y: number): number;

/**
 * Calculates the tangent of an angle.
 * 
 * `tan()` is useful for many geometric tasks in creative coding. The values
 * returned range from -Infinity to Infinity and repeat periodically as the
 * input angle increases. `tan()` calculates the tan of an angle, using radians
 * by default, or according to
 * if <a href="#/p5/angleMode">angleMode()</a> setting (RADIANS or DEGREES).
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * describe('A series of identical curves drawn with black dots. Each curve starts from the top of the canvas, continues down at a slight angle, flattens out at the middle of the canvas, then continues to the bottom.');
 * }
 * 
 * function draw() {
 * // Calculate the coordinates.
 * let x = frameCount;
 * let y = 5 * tan(x * 0.1) + 50;
 * 
 * // Draw the point.
 * point(x, y);
 * }``tan()` can also be used in shaders with p5.strands. The following example
 * uses `tan()` to create rapid color transitions on a shape.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere with rapidly shifting colors.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.0005 to slow it down.
 * let t = millis() * 0.0005;
 * 
 * // tan(t) can grow to very large values (even infinity) at certain angles.
 * // 0.5 + 0.5 * tan(t) shifts the range but can still go way past 0 or 1.
 * // min(max(..., 0), 1) clamps the result to the 0 to 1 range.
 * let value = min(max(0.5 + 0.5 * tan(t), 0), 1);
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let orange = [1, 0.5, 0, 1];
 * let blue = [0, 0.5, 1, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between orange (when value = 0) and blue (when value = 1).
 * // tan() creates rapid, dramatic color shifts as it spikes and resets.
 * finalColor.set(mix(orange, blue, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param angle the angle, in radians by default, or according to if <a href="/reference/p5/angleMode/">angleMode()</a> setting (RADIANS or DEGREES).
 * @returns tangent of the angle.
 */
function tan(angle: number): number;

/**
 * A function that's called once when any key is released.
 * 
 * Declaring the function `keyReleased()` sets a code block to run once
 * automatically when the user releases any key:
 * 
 * `function keyReleased() {
 * // Code to run.
 * }`The <a href="#/p5/key">key</a> and <a href="#/p5/keyCode">keyCode</a>
 * variables will be updated with the most recently released value when
 * `keyReleased()` is called by p5.js:
 * 
 * `function keyReleased() {
 * if (key === 'c') {
 * // Code to run.
 * }
 * 
 * if (keyCode === 13) { // Enter key
 * // Code to run.
 * }
 * }`The parameter, `event`, is optional. `keyReleased()` is always passed a
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent" target="_blank">KeyboardEvent</a>
 * object with properties that describe the key press event:
 * 
 * `function keyReleased(event) {
 * // Code to run that uses the event.
 * console.log(event);
 * }`Browsers may have default behaviors attached to various key events. To
 * prevent any default behavior for this event, add `return false;` to the end
 * of the function.
 * @param event optional `KeyboardEvent` callback argument.
 */
function keyReleased(event?: KeyboardEvent): void;

/**
 * Rotates the coordinate system about the z-axis in WebGL mode.
 * 
 * The parameter, `angle`, is the amount to rotate. For example, calling
 * `rotateZ(1)` rotates the coordinate system about the z-axis by 1 radian.
 * `rotateZ()` interprets angle values using the current
 * <a href="#/p5/angleMode">angleMode()</a>.
 * 
 * By default, transformations accumulate. For example, calling `rotateZ(1)`
 * twice has the same effect as calling `rotateZ(2)` once. The
 * <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions
 * can be used to isolate transformations within distinct drawing groups.
 * 
 * Note: Transformations are reset at the beginning of the draw loop. Calling
 * `rotateZ(1)` inside the <a href="#/p5/draw">draw()</a> function won't cause
 * shapes to spin.
 * @param angle angle of rotation in the current <a href="#/p5/angleMode">angleMode()</a>.
 */
function rotateZ(angle: number): void;

/**
 * Loads a file at the given path as a Blob, then returns the resulting data or
 * passes it to a success callback function, if provided. On load, this function
 * returns a `Promise` that resolves to a Blob containing the file data.
 * @param path The path or Request object pointing to the file
 * you want to load.
 * @param successCallback Optional. A function to be called if the
 * file successfully loads, receiving the
 * resulting Blob as its only argument.
 * @param errorCallback Optional. A function to be called if an
 * error occurs during loading; receives the
 * error object as its only argument.
 * @returns A promise that resolves with the loaded Blob.
 */
function loadBlob(path: string | Request, successCallback?: Function, errorCallback?: Function): Promise<Blob>;

/**
 * Toggles full-screen mode or returns the current mode.
 * 
 * Calling `fullscreen(true)` makes the sketch full-screen. Calling
 * `fullscreen(false)` makes the sketch its original size.
 * 
 * Calling `fullscreen()` without an argument returns `true` if the sketch
 * is in full-screen mode and `false` if not.
 * 
 * Note: Due to browser restrictions, `fullscreen()` can only be called with
 * user input such as a mouse press.
 * @param val whether the sketch should be in fullscreen mode.
 * @returns current fullscreen state.
 */
function fullscreen(val?: boolean): boolean;

/**
 * Draws a single point in space.
 * 
 * A point's default width is one pixel. To color a point, use the
 * <a href="#/p5/stroke">stroke()</a> function. To change its width, use the
 * <a href="#/p5/strokeWeight">strokeWeight()</a> function. A point
 * can't be filled, so the <a href="#/p5/fill">fill()</a> function won't
 * affect the point's color.
 * 
 * The version of `point()` with two parameters allows the point's location to
 * be set with its x- and y-coordinates, as in `point(10, 20)`.
 * 
 * The version of `point()` with three parameters allows the point to be drawn
 * in 3D space with x-, y-, and z-coordinates, as in `point(10, 20, 30)`.
 * Doing so requires adding the `WEBGL` argument to
 * <a href="#/p5/createCanvas">createCanvas()</a>.
 * 
 * The version of `point()` with one parameter allows the point's location to
 * be set with a <a href="#/p5/p5.Vector">p5.Vector</a> object.
 * @param x the x-coordinate.
 * @param y the y-coordinate.
 * @param z the z-coordinate (for WebGL mode).
 */
function point(x: number, y: number, z?: number): void;
function point(coordinateVector: P5.Vector): void;

/**
 * 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.
 * 
 * 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
 * <a href="#/p5/colorMode">colorMode()</a>. The last three parameters, `x`,
 * `y`, and `z`, set the light’s position. For example,
 * `pointLight(255, 0, 0, 50, 0, 0)` creates a red `(255, 0, 0)` light that
 * shines from the coordinates `(50, 0, 0)`.
 * 
 * The second way to call `pointLight()` has four parameters. The first three
 * parameters, `v1`, `v2`, and `v3`, set the light’s color using the current
 * <a href="#/p5/colorMode">colorMode()</a>. The last parameter, position sets
 * the light’s position using a <a href="#/p5.Vector">p5.Vector</a> object.
 * For example, `pointLight(255, 0, 0, lightPos)` creates a red `(255, 0, 0)`
 * light that shines from the position set by the `lightPos` vector.
 * 
 * The third way to call `pointLight()` has four parameters. The first
 * parameter, `color`, sets the light’s color using a
 * <a href="#/p5.Color">p5.Color</a> object or an array of color values. The
 * last three parameters, `x`, `y`, and `z`, set the light’s position. For
 * example, `directionalLight(myColor, 50, 0, 0)` creates a light that shines
 * from the coordinates `(50, 0, 0)` with the color value of `myColor`.
 * 
 * The fourth way to call `pointLight()` has two parameters. The first
 * parameter, `color`, sets the light’s color using a
 * <a href="#/p5.Color">p5.Color</a> object or an array of color values. The
 * second parameter, `position`, sets the light’s position using a
 * <a href="#/p5.Vector">p5.Vector</a> object. For example,
 * `directionalLight(myColor, lightPos)` creates a light that shines from the
 * position set by the `lightPos` vector with the color value of `myColor`.
 * @param v1 red or hue value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 * @param v2 green or saturation value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 * @param v3 blue, brightness, or lightness value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 * @param x x-coordinate of the light.
 * @param y y-coordinate of the light.
 * @param z z-coordinate of the light.
 */
function pointLight(v1: number, v2: number, v3: number, x: number, y: number, z: number): void;
function pointLight(v1: number, v2: number, v3: number, position: P5.Vector): void;
function pointLight(color: P5.Color | number[] | string, x: number, y: number, z: number): void;
function pointLight(color: P5.Color | number[] | string, position: P5.Vector): void;

/**
 * Creates a `<button></button>` element.
 * 
 * The first parameter, `label`, is a string that sets the label displayed on
 * the button.
 * 
 * The second parameter, `value`, is optional. It's a string that sets the
 * button's value. See
 * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value" target="_blank">MDN</a>
 * for more details.
 * @param label label displayed on the button.
 * @param value value of the button.
 * @returns new <a href="#/p5.Element">p5.Element</a> object.
 */
function createButton(label: string, value?: string): P5.Element;

/**
 * Creates a <a href="#/p5.Shader">p5.Shader</a> object to be used with the
 * <a href="#/p5/filter">filter()</a> function using GLSL.
 * 
 * Since this method requires you to write your shaders in GLSL, it is most suitable
 * for advanced use cases. Consider using <a href="#/p5/buildFilterShader">`buildFilterShader`</a>
 * first, as a way to create filters in JavaScript using p5.strands.
 * 
 * `createFilterShader()` works like
 * <a href="#/p5/createShader">createShader()</a> but has a default vertex
 * shader included. `createFilterShader()` is intended to be used along with
 * <a href="#/p5/filter">filter()</a> for filtering the contents of a canvas.
 * A filter shader will be applied to the whole canvas instead of just
 * <a href="#/p5.Geometry">p5.Geometry</a> objects.
 * 
 * The parameter, `fragSrc`, sets the fragment shader. It’s a string that
 * contains the fragment shader program written in
 * <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>.
 * 
 * The <a href="#/p5.Shader">p5.Shader</a> object that's created has some
 * uniforms that can be set:
 * 
 * - `sampler2D tex0`, which contains the canvas contents as a texture.
 * 
 * - `vec2 canvasSize`, which is the width and height of the canvas, not including pixel density.
 * 
 * - `vec2 texelSize`, which is the size of a physical pixel including pixel density. This is calculated as `1.0 / (width * density)` for the pixel width and `1.0 / (height * density)` for the pixel height.
 * 
 * The <a href="#/p5.Shader">p5.Shader</a> that's created also provides
 * `varying vec2 vTexCoord`, a coordinate with values between 0 and 1.
 * `vTexCoord` describes where on the canvas the pixel will be drawn.
 * 
 * For more info about filters and shaders, see Adam Ferriss' <a href="https://github.com/aferriss/p5jsShaderExamples">repo of shader examples</a>
 * or the <a href="https://p5js.org/learn/getting-started-in-webgl-shaders.html">Introduction to Shaders</a> tutorial.
 * @param fragSrc source code for the fragment shader.
 * @returns new shader object created from the fragment shader.
 */
function createFilterShader(fragSrc: string): P5.Shader;

/**
 * Concludes the vertices of a custom shape.
 * 
 * The <a href="#/p5/beginShape">beginShape()</a> and `endShape()` functions
 * allow for creating custom shapes in 2D or 3D.
 * <a href="#/p5/beginShape">beginShape()</a> begins adding vertices to a
 * custom shape and `endShape()` stops adding them.
 * 
 * The first parameter, `mode`, is optional. By default, the first and last
 * vertices of a shape aren't connected. If the constant `CLOSE` is passed, as
 * in `endShape(CLOSE)`, then the first and last vertices will be connected.
 * When CLOSE mode is used for splines (with `splineVeertex()`), the shape is ended smoothly.
 * 
 * The second parameter, `count`, is also optional. In WebGL mode, it’s more
 * efficient to draw many copies of the same shape using a technique called
 * <a href="https://webglfundamentals.org/webgl/lessons/webgl-instanced-drawing.html" target="_blank">instancing</a>.
 * The `count` parameter tells WebGL mode how many copies to draw. For
 * example, calling `endShape(CLOSE, 400)` after drawing a custom shape will
 * make it efficient to draw 400 copies. This feature requires
 * <a href="https://p5js.org/tutorials/intro-to-shaders/" target="_blank">writing a custom shader</a>.
 * 
 * After calling <a href="#/p5/beginShape">beginShape()</a>, shapes can be
 * built by calling <a href="#/p5/vertex">vertex()</a>,
 * <a href="#/p5/bezierVertex">bezierVertex()</a> and/or
 * <a href="#/p5/splineVertex">splineVertex()</a>. Calling
 * `endShape()` will stop adding vertices to the
 * shape. Each shape will be outlined with the current stroke color and filled
 * with the current fill color.
 * 
 * Transformations such as <a href="#/p5/translate">translate()</a>,
 * <a href="#/p5/rotate">rotate()</a>, and
 * <a href="#/p5/scale">scale()</a> don't work between
 * <a href="#/p5/beginShape">beginShape()</a> and `endShape()`. It's also not
 * possible to use other shapes, such as <a href="#/p5/ellipse">ellipse()</a> or
 * <a href="#/p5/rect">rect()</a>, between
 * <a href="#/p5/beginShape">beginShape()</a> and `endShape()`.
 * @param mode use CLOSE to close the shape
 * @param count number of times you want to draw/instance the shape (for WebGL mode).
 */
function endShape(mode?: typeof P5.CLOSE, count?: number): void;

/**
 * Converts an angle measured in radians to its value in degrees.
 * 
 * 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.
 * 
 * The same angle can be expressed in with either unit. For example, 90° is a
 * quarter of a full rotation. The same angle is 2 × �� ÷ 4
 * (about 1.57) radians.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Calculate the angle conversion.
 * let rad = QUARTER_PI;
 * let deg = degrees(rad);
 * 
 * // Display the conversion.
 * text(`${round(rad, 2)} rad = ${deg}˚`, 10, 50);
 * 
 * describe('The text "0.79 rad = 45˚".');
 * }``degrees()` can also be used in shaders with p5.strands. The following example
 * uses `degrees()` to convert a radian value to degrees inside a shader.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere that cycles through warm colors.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
 * let t = millis() * 0.001;
 * 
 * // degrees() converts the radian value t to degrees.
 * // (deg % 360) wraps the degrees into a 0-360 range.
 * // Dividing by 360 normalizes to the 0 to 1 range.
 * let deg = degrees(t);
 * let value = (deg % 360) / 360;
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let red = [1, 0, 0, 1];
 * let yellow = [1, 1, 0, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between red (when value = 0) and yellow (when value = 1).
 * // degrees() creates a cycling sawtooth pattern as time increases.
 * finalColor.set(mix(red, yellow, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param radians radians value to convert to degrees.
 * @returns converted angle.
 */
function degrees(radians: number): number;

/**
 * Converts a `Number` to a `String` with its hexadecimal value.
 * 
 * `hex()` converts a number to a string with its hexadecimal number value.
 * Hexadecimal (hex) numbers are base-16, which means there are 16 unique
 * digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
 * number `11` (eleven) in base-10 is written as the letter `B` in hex.
 * 
 * The first parameter, `n`, is the number to convert. For example, `hex(20)`,
 * returns the string `'00000014'`. If an array is passed, as in
 * `hex([1, 10, 100])`, an array of hexadecimal strings is returned.
 * 
 * The second parameter, `digits`, is optional. If a number is passed, as in
 * `hex(20, 2)`, it sets the number of hexadecimal digits to display. For
 * example, calling `hex(20, 2)` returns the string `'14'`.
 * @param n value to convert.
 * @param digits number of digits to include.
 * @returns converted hexadecimal value.
 */
function hex(n: number, digits?: number): string;
function hex(ns: number[], digits?: number): string[];

/**
 * Calculates coordinates along a spline curve using interpolation.
 * 
 * `splinePoint()` calculates coordinates along a spline curve using four
 * points p0, p1, p2, p3. It expects points in the same order as the
 * <a href="#/p5/spline">spline()</a> function. `splinePoint()` works one axis
 * at a time. Passing the points' x-coordinates will
 * calculate the x-coordinate of a point on the curve. Passing the
 * points' y-coordinates will calculate the y-coordinate of a point on
 * the curve.
 * 
 * The first parameter, `a`, is the coordinate of point p0.
 * 
 * The second and third parameters, `b` and `c`, are the coordinates of
 * points p1 and p2.
 * 
 * The fourth parameter, `d`, is the coordinate of point p3.
 * 
 * The fifth parameter, `t`, is the amount to interpolate along the span
 * from p1 to p2. `t = 0` is p1, `t = 1` is p2, and `t = 0.5` is halfway
 * between them.
 * @param a coordinate of point p0.
 * @param b coordinate of point p1.
 * @param c coordinate of point p2.
 * @param d coordinate of point p3.
 * @param t amount to interpolate between 0 and 1.
 * @returns coordinate of a point on the curve.
 */
function splinePoint(a: number, b: number, c: number, d: number, t: number): number;

/**
 * Re-maps a number from one range to another.
 * 
 * For example, calling `map(2, 0, 10, 0, 100)` returns 20. The first three
 * arguments set the original value to 2 and the original range from 0 to 10.
 * The last two arguments set the target range from 0 to 100. 20's position
 * in the target range [0, 100] is proportional to 2's position in the
 * original range [0, 10].
 * 
 * The sixth parameter, `withinBounds`, is optional. By default, `map()` can
 * return values outside of the target range. For example,
 * `map(11, 0, 10, 0, 100)` returns 110. Passing `true` as the sixth parameter
 * constrains the remapped value to the target range. For example,
 * `map(11, 0, 10, 0, 100, true)` returns 100.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * describe('Two horizontal lines. The top line grows horizontally as the mouse moves to the right. The bottom line also grows horizontally but is scaled to stay on the left half of the canvas.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Draw the top line.
 * line(0, 25, mouseX, 25);
 * 
 * // Remap mouseX from [0, 100] to [0, 50].
 * let x = map(mouseX, 0, 100, 0, 50);
 * 
 * // Draw the bottom line.
 * line(0, 75, 0, x);
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * describe('A circle changes color from black to white as the mouse moves from left to right.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Remap mouseX from [0, 100] to [0, 255]
 * let c = map(mouseX, 0, 100, 0, 255);
 * 
 * // Style the circle.
 * fill(c);
 * 
 * // Draw the circle.
 * circle(50, 50, 20);
 * }``map()` can also be used in shaders with p5.strands. The following example
 * uses `map()` to remap time values to color in a shader.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere that shifts between cyan and orange over time.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
 * let t = millis() * 0.001;
 * 
 * // sin(t) goes between -1 and 1 over time.
 * let sinVal = sin(t);
 * 
 * // map() remaps this from the range [-1, 1] to the range [0, 1].
 * let value = map(sinVal, -1, 1, 0, 1);
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let cyan = [0, 0.5, 1, 1];
 * let orange = [1, 0.5, 0, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between cyan (when value = 0) and orange (when value = 1).
 * finalColor.set(mix(cyan, orange, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param value the value to be remapped.
 * @param start1 lower bound of the value's current range.
 * @param stop1 upper bound of the value's current range.
 * @param start2 lower bound of the value's target range.
 * @param stop2 upper bound of the value's target range.
 * @param withinBounds constrain the value to the newly mapped range.
 * @returns remapped number.
 */
function map(value: number, start1: number, stop1: number, start2: number, stop2: number, withinBounds?: boolean): number;

/**
 * Sets the pixel density or returns the current density.
 * 
 * Computer displays are grids of little lights called <em>pixels</em>. A
 * display's <em>pixel density</em> describes how many pixels it packs into an
 * area. Displays with smaller pixels have a higher pixel density and create
 * sharper images.
 * 
 * `pixelDensity()` sets the pixel scaling for high pixel density displays.
 * By default, the pixel density is set to match the display's density.
 * Calling `pixelDensity(1)` turn this off.
 * 
 * Calling `pixelDensity()` without an argument returns the current pixel
 * density.
 * @param val desired pixel density.
 * @returns current pixel density of the sketch.
 */
function pixelDensity(val?: number): number;
function pixelDensity(): number;

/**
 * Method for executing an HTTP GET request. If data type is not specified,
 * it will default to `'text'`. This is equivalent to
 * calling <code>httpDo(path, 'GET')</code>. The 'binary' datatype will return
 * a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer
 * which can be used to initialize typed arrays (such as Uint8Array).
 * @param path name of the file or url to load
 * @param datatype "json", "jsonp", "binary", "arrayBuffer",
 * "xml", or "text"
 * @param callback function to be executed after
 * <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
 * as first argument
 * @param errorCallback function to be executed if
 * there is an error, response is passed
 * in as first argument
 * @returns A promise that resolves with the data when the operation
 * completes successfully or rejects with the error after
 * one occurs.
 */
function httpGet(path: string | Request, datatype?: string, callback?: Function, errorCallback?: Function): Promise<any>;
function httpGet(path: string | Request, callback: Function, errorCallback?: Function): Promise<any>;

/**
 * Creates an ambient light from an image.
 * 
 * `imageLight()` simulates a light shining from all directions. The effect is
 * like placing the sketch at the center of a giant sphere that uses the image
 * as its texture. The image's diffuse light will be affected by
 * <a href="#/p5/fill">fill()</a> and the specular reflections will be
 * affected by <a href="#/p5/specularMaterial">specularMaterial()</a> and
 * <a href="#/p5/shininess">shininess()</a>.
 * 
 * The parameter, `img`, is the <a href="#/p5.Image">p5.Image</a> object to
 * use as the light source.
 * @param img image to use as the light source.
 */
function imageLight(img: P5.Image): 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.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a p5.Color object using RGB values.
 * let c = color(175, 100, 220);
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'blueValue' to 220.
 * let blueValue = blue(c);
 * 
 * // Draw the right rectangle.
 * fill(0, 0, blueValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is light purple and the right one is royal blue.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a color array.
 * let c = [175, 100, 220];
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'blueValue' to 220.
 * let blueValue = blue(c);
 * 
 * // Draw the right rectangle.
 * fill(0, 0, blueValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is light purple and the right one is royal blue.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a CSS color string.
 * let c = 'rgb(175, 100, 220)';
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'blueValue' to 220.
 * let blueValue = blue(c);
 * 
 * // Draw the right rectangle.
 * fill(0, 0, blueValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is light purple and the right one is royal blue.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Use RGB color with values in the range 0-100.
 * colorMode(RGB, 100);
 * 
 * // Create a p5.Color object using RGB values.
 * let c = color(69, 39, 86);
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'blueValue' to 86.
 * let blueValue = blue(c);
 * 
 * // Draw the right rectangle.
 * fill(0, 0, blueValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is light purple and the right one is royal blue.');
 * }`In p5.strands shader callbacks, `blue()` operates on `vec4` values and
 * returns the blue channel as a normalized value in the 0–1 range.
 * `colorMode()` has no effect inside shader callbacks.
 * 
 * `let myShader;
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildMaterialShader(myShaderBuilder);
 * }
 * 
 * function myShaderBuilder() {
 * finalColor.begin();
 * let c = color(50, 100, 200);
 * let b = blue(c);
 * finalColor.set(vec4(0, 0, b, 1.0));
 * finalColor.end();
 * }
 * 
 * function draw() {
 * shader(myShader);
 * noStroke();
 * sphere(40);
 * 
 * describe('A sphere colored using only its blue channel.');
 * }`
 * @param color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
 * color components, or CSS color string.
 * @returns the blue value.
 */
function blue(color: P5.Color | number[] | string): number;

/**
 * Updates the canvas with the RGBA values in the
 * <a href="#/p5/pixels">pixels</a> array.
 * 
 * `updatePixels()` only needs to be called after changing values in the
 * <a href="#/p5/pixels">pixels</a> array. Such changes can be made directly
 * after calling <a href="#/p5/loadPixels">loadPixels()</a> or by calling
 * <a href="#/p5/set">set()</a>.
 * @param x x-coordinate of the upper-left corner of region
 * to update.
 * @param y y-coordinate of the upper-left corner of region
 * to update.
 * @param w width of region to update.
 * @param h height of region to update.
 */
function updatePixels(x?: number, y?: number, w?: number, h?: number): void;
function updatePixels(): void;

/**
 * Returns the display's current pixel density.
 * @returns current pixel density of the display.
 */
function displayDensity(): number;

/**
 * Converts an angle measured in degrees to its value in radians.
 * 
 * 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.
 * 
 * The same angle can be expressed in with either unit. For example, 90° is a
 * quarter of a full rotation. The same angle is 2 × π ÷ 4
 * (about 1.57) radians.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Caclulate the angle conversion.
 * let deg = 45;
 * let rad = radians(deg);
 * 
 * // Display the angle conversion.
 * text(`${deg}˚ = ${round(rad, 3)} rad`, 10, 50);
 * 
 * describe('The text "45˚ = 0.785 rad".');
 * }``radians()` can also be used in shaders with p5.strands. The following example
 * uses `radians()` to convert degrees to radians inside a shader.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere that fades between red and white.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start.
 * // Multiply by 0.05 and mod 360 to cycle through 0-360 degrees over time.
 * let deg = (millis() * 0.05) % 360;
 * 
 * // radians() converts degrees to radians so sin() can use them.
 * let rad = radians(deg);
 * 
 * // sin(rad) oscillates between -1 and 1.
 * // 0.5 + 0.5 * sin(rad) remaps this to the 0 to 1 range.
 * let value = 0.5 + 0.5 * sin(rad);
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let red = [1, 0, 0, 1];
 * let white = [1, 1, 1, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between red (when value = 0) and white (when value = 1).
 * // radians() converts the degree input so sin() can produce smooth oscillation.
 * finalColor.set(mix(red, white, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param degrees degree value to convert to radians.
 * @returns converted angle.
 */
function radians(degrees: number): number;

/**
 * Creates an immersive 3D background.
 * 
 * `panorama()` transforms images containing 360˚ content, such as maps or
 * HDRIs, into immersive 3D backgrounds that surround a sketch. Exploring the
 * space requires changing the camera's perspective with functions such as
 * <a href="#/p5/orbitControl">orbitControl()</a> or
 * <a href="#/p5/camera">camera()</a>.
 * @param img 360˚ image to use as the background.
 */
function panorama(img: P5.Image): void;

/**
 * Creates a checkbox `<input></input>` element.
 * 
 * Checkboxes extend the <a href="#/p5.Element">p5.Element</a> class with a
 * `checked()` method. Calling `myBox.checked()` returns `true` if it the box
 * is checked and `false` if not.
 * 
 * The first parameter, `label`, is optional. It's a string that sets the label
 * to display next to the checkbox.
 * 
 * The second parameter, `value`, is also optional. It's a boolean that sets the
 * checkbox's value.
 * @param label label displayed after the checkbox.
 * @param value value of the checkbox. Checked is `true` and unchecked is `false`.
 * @returns new <a href="#/p5.Element">p5.Element</a> object.
 */
function createCheckbox(label?: string, value?: boolean): P5.Element;

/**
 * A function that's called once when keys with printable characters are pressed.
 * 
 * Declaring the function `keyTyped()` sets a code block to run once
 * automatically when the user presses any key with a printable character such
 * as `a` or 1. Modifier keys such as `SHIFT`, `CONTROL`, and the arrow keys
 * will be ignored:
 * 
 * `function keyTyped() {
 * // Code to run.
 * }`The <a href="#/p5/key">key</a> and <a href="#/p5/keyCode">keyCode</a>
 * variables will be updated with the most recently released value when
 * `keyTyped()` is called by p5.js:
 * 
 * `function keyTyped() {
 * // Check for the "c" character using key.
 * if (key === 'c') {
 * // Code to run.
 * }
 * 
 * // Check for "c" using keyCode.
 * if (keyCode === 67) { // 67 is the ASCII code for 'c'
 * // Code to run.
 * }
 * }`The parameter, `event`, is optional. `keyTyped()` is always passed a
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent" target="_blank">KeyboardEvent</a>
 * object with properties that describe the key press event:
 * 
 * `function keyReleased(event) {
 * // Code to run that uses the event.
 * console.log(event);
 * }`Note: Use the <a href="#/p5/keyPressed">keyPressed()</a> function and
 * <a href="#/p5/keyCode">keyCode</a> system variable to respond to modifier
 * keys such as `ALT`.
 * 
 * Browsers may have default behaviors attached to various key events. To
 * prevent any default behavior for this event, add `return false;` to the end
 * of the function.
 * @param event optional `KeyboardEvent` callback argument.
 */
function keyTyped(event?: KeyboardEvent): void;

/**
 * Draws a cylinder.
 * 
 * A cylinder is a 3D shape with triangular faces that connect a flat bottom
 * to a flat top. Cylinders with few faces look like boxes. Cylinders with
 * many faces have smooth surfaces.
 * 
 * The first parameter, `radius`, is optional. If a `Number` is passed, as in
 * `cylinder(20)`, it sets the radius of the cylinder’s base. By default,
 * `radius` is 50.
 * 
 * The second parameter, `height`, is also optional. If a `Number` is passed,
 * as in `cylinder(20, 30)`, it sets the cylinder’s height. By default,
 * `height` is set to the cylinder’s `radius`.
 * 
 * The third parameter, `detailX`, is also optional. If a `Number` is passed,
 * as in `cylinder(20, 30, 5)`, it sets the number of edges used to form the
 * cylinder's top and bottom. Using more edges makes the top and bottom look
 * more like circles. By default, `detailX` is 24.
 * 
 * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
 * as in `cylinder(20, 30, 5, 2)`, it sets the number of triangle subdivisions
 * to use along the y-axis, between cylinder's the top and bottom. All 3D
 * shapes are made by connecting triangles to form their surfaces. By default,
 * `detailY` is 1.
 * 
 * The fifth parameter, `bottomCap`, is also optional. If a `false` is passed,
 * as in `cylinder(20, 30, 5, 2, false)` the cylinder’s bottom won’t be drawn.
 * By default, `bottomCap` is `true`.
 * 
 * The sixth parameter, `topCap`, is also optional. If a `false` is passed, as
 * in `cylinder(20, 30, 5, 2, false, false)` the cylinder’s top won’t be
 * drawn. By default, `topCap` is `true`.
 * 
 * Note: `cylinder()` can only be used in WebGL mode.
 * @param radius radius of the cylinder. Defaults to 50.
 * @param height height of the cylinder. Defaults to the value of `radius`.
 * @param detailX number of edges along the top and bottom. Defaults to 24.
 * @param detailY number of triangle subdivisions along the y-axis. Defaults to 1.
 * @param bottomCap whether to draw the cylinder's bottom. Defaults to `true`.
 * @param topCap whether to draw the cylinder's top. Defaults to `true`.
 */
function cylinder(radius?: number, height?: number, detailX?: number, detailY?: number, bottomCap?: boolean, topCap?: boolean): void;

/**
 * Scales the coordinate system.
 * 
 * By default, shapes are drawn at their original scale. A rectangle that's 50
 * pixels wide appears to take up half the width of a 100 pixel-wide canvas.
 * The `scale()` function can shrink or stretch the coordinate system so that
 * shapes appear at different sizes. There are two ways to call `scale()` with
 * parameters that set the scale factor(s).
 * 
 * The first way to call `scale()` uses numbers to set the amount of scaling.
 * The first parameter, `s`, sets the amount to scale each axis. For example,
 * calling `scale(2)` stretches the x-, y-, and z-axes by a factor of 2. The
 * next two parameters, `y` and `z`, are optional. They set the amount to
 * scale the y- and z-axes. For example, calling `scale(2, 0.5, 1)` stretches
 * the x-axis by a factor of 2, shrinks the y-axis by a factor of 0.5, and
 * leaves the z-axis unchanged.
 * 
 * The second way to call `scale()` uses a <a href="#/p5.Vector">p5.Vector</a>
 * object to set the scale factors. For example, calling `scale(myVector)`
 * uses the x-, y-, and z-components of `myVector` to set the amount of
 * scaling along the x-, y-, and z-axes. Doing so is the same as calling
 * `scale(myVector.x, myVector.y, myVector.z)`.
 * 
 * By default, transformations accumulate. For example, calling `scale(1)`
 * twice has the same effect as calling `scale(2)` once. The
 * <a href="#/p5/push">push()</a> and <a href="#/p5/pop">pop()</a> functions
 * can be used to isolate transformations within distinct drawing groups.
 * 
 * Note: Transformations are reset at the beginning of the draw loop. Calling
 * `scale(2)` inside the <a href="#/p5/draw">draw()</a> function won't cause
 * shapes to grow continuously.
 * @param s amount to scale along the positive x-axis.
 * @param y amount to scale along the positive y-axis. Defaults to `s`.
 * @param z amount to scale along the positive z-axis. Defaults to `y`.
 */
function scale(s: number | P5.Vector | number[], y?: number, z?: number): void;
function scale(scales: P5.Vector | number[]): void;

/**
 * Converts a `String` with a hexadecimal value to a  `Number`.
 * 
 * `unhex()` converts a string with its hexadecimal number value to a number.
 * Hexadecimal (hex) numbers are base-16, which means there are 16 unique
 * digits. Hex extends the numbers 0–9 with the letters A–F. For example, the
 * number `11` (eleven) in base-10 is written as the letter `B` in hex.
 * 
 * The first parameter, `n`, is the hex string to convert. For example,
 * `unhex('FF')`, returns the number 255. If an array is passed, as in
 * `unhex(['00', '80', 'FF'])`, an array of numbers is returned.
 * @param n value to convert.
 * @returns converted number.
 */
function unhex(n: string): number;
function unhex(ns: string[]): number[];

/**
 * Draws a quadrilateral (four-sided shape).
 * 
 * Quadrilaterals include rectangles, squares, rhombuses, and trapezoids. The
 * first pair of parameters `(x1, y1)` sets the quad's first point. The next
 * three pairs of parameters set the coordinates for its next three points
 * `(x2, y2)`, `(x3, y3)`, and `(x4, y4)`. Points should be added in either
 * clockwise or counter-clockwise order.
 * 
 * The version of `quad()` with twelve parameters allows the quad to be drawn
 * in 3D space. Doing so requires adding the `WEBGL` argument to
 * <a href="#/p5/createCanvas">createCanvas()</a>.
 * 
 * The thirteenth and fourteenth parameters are optional. In WebGL mode, they
 * set the number of segments used to draw the quadrilateral in the x- and
 * y-directions. They're both 2 by default.
 * @param x1 the x-coordinate of the first point.
 * @param y1 the y-coordinate of the first point.
 * @param x2 the x-coordinate of the second point.
 * @param y2 the y-coordinate of the second point.
 * @param x3 the x-coordinate of the third point.
 * @param y3 the y-coordinate of the third point.
 * @param x4 the x-coordinate of the fourth point.
 * @param y4 the y-coordinate of the fourth point.
 * @param detailX number of segments in the x-direction.
 * @param detailY number of segments in the y-direction.
 */
function quad(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number, detailX?: number, detailY?: number): void;
function quad(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number, x3: number, y3: number, z3: number, x4: number, y4: number, z4: number, detailX?: number, detailY?: number): void;

/**
 * Method for executing an HTTP POST request. If data type is not specified,
 * it will default to `'text'`. This is equivalent to
 * calling <code>httpDo(path, 'POST')</code>.
 * @param path name of the file or url to load
 * @param data param data passed sent with request
 * @param datatype "json", "jsonp", "xml", or "text".
 * If omitted, <a href="#/p5/httpPost">httpPost()</a> will guess.
 * @param callback function to be executed after
 * <a href="#/p5/httpPost">httpPost()</a> completes, data is passed in
 * as first argument
 * @param errorCallback function to be executed if
 * there is an error, response is passed
 * in as first argument
 * @returns A promise that resolves with the data when the operation
 * completes successfully or rejects with the error after
 * one occurs.
 */
function httpPost(path: string | Request, data?: object | boolean, datatype?: string, callback?: Function, errorCallback?: Function): Promise<any>;
function httpPost(path: string | Request, data: object | boolean, callback?: Function, errorCallback?: Function): Promise<any>;
function httpPost(path: string | Request, callback?: Function, errorCallback?: Function): Promise<any>;

/**
 * Returns the sketch's current
 * <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL" target="_blank">URL</a>
 * as a `String`.
 * @returns url
 */
function getURL(): string;

/**
 * Returns the largest value in a sequence of numbers.
 * 
 * The version of `max()` with one parameter interprets it as an array of
 * numbers and returns the largest number.
 * 
 * The version of `max()` with two or more parameters interprets them as
 * individual numbers and returns the largest number.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Calculate the maximum of 10, 5, and 20.
 * let m = max(10, 5, 20);
 * 
 * // Style the text.
 * textAlign(CENTER);
 * textSize(16);
 * 
 * // Display the max.
 * text(m, 50, 50);
 * 
 * describe('The number 20 written in the middle of a gray square.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create an array of numbers.
 * let numbers = [10, 5, 20];
 * 
 * // Calculate the maximum of the array.
 * let m = max(numbers);
 * 
 * // Style the text.
 * textAlign(CENTER);
 * textSize(16);
 * 
 * // Display the max.
 * text(m, 50, 50);
 * 
 * describe('The number 20 written in the middle of a gray square.');
 * }``max()` can also be used in shaders with p5.strands. The following example
 * uses `max()` to clamp values in a shader.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere that shifts from rose to steelBlue and stops.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
 * let t = millis() * 0.001;
 * 
 * // 1 - t * 0.2 decreases steadily over time.
 * // max(..., 0) ensures the value never goes below 0.
 * let value = max(1 - t * 0.2, 0);
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let steelBlue = [0, 0.3, 0.8, 1];
 * let rose = [1, 0.3, 0.8, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between steelBlue (when value = 0) and rose (when value = 1).
 * // max() clamps the blend so the color stops changing once it reaches steelBlue.
 * finalColor.set(mix(steelBlue, rose, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param n0 first number to compare.
 * @param n1 second number to compare.
 * @returns maximum number.
 */
function max(n0: number, n1: number): number;
function max(nums: number[]): number;

/**
 * Places an ambient and directional light in the scene.
 * The lights are set to ambientLight(128, 128, 128) and
 * directionalLight(128, 128, 128, 0, 0, -1).
 * 
 * Note: lights need to be called (whether directly or indirectly)
 * within draw() to remain persistent in a looping program.
 * Placing them in setup() will cause them to only have an effect
 * the first time through the loop.
 */
function lights(): void;

/**
 * Gets the alpha (transparency) value of a color.
 * 
 * `alpha()` extracts the alpha value from a
 * <a href="#/p5.Color">p5.Color</a> object, an array of color components, or
 * a CSS color string.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a p5.Color object.
 * let c = color(0, 126, 255, 102);
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'alphaValue' to 102.
 * let alphaValue = alpha(c);
 * 
 * // Draw the right rectangle.
 * fill(alphaValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a color array.
 * let c = [0, 126, 255, 102];
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'alphaValue' to 102.
 * let alphaValue = alpha(c);
 * 
 * // Draw the left rectangle.
 * fill(alphaValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create a CSS color string.
 * let c = 'rgba(0, 126, 255, 0.4)';
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'alphaValue' to 102.
 * let alphaValue = alpha(c);
 * 
 * // Draw the right rectangle.
 * fill(alphaValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is light blue and the right one is charcoal gray.');
 * }`In p5.strands shader callbacks, `alpha()` operates on `vec4` values and
 * returns the alpha channel as a normalized value in the 0–1 range.
 * `colorMode()` has no effect inside shader callbacks.
 * 
 * `let myShader;
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildMaterialShader(myShaderBuilder);
 * }
 * 
 * function myShaderBuilder() {
 * finalColor.begin();
 * let c = color(255, 0, 0, 128);
 * let a = alpha(c);
 * finalColor.set(vec4(1.0, 0, 0, a * 0.5));
 * finalColor.end();
 * }
 * 
 * function draw() {
 * shader(myShader);
 * noStroke();
 * sphere(40);
 * 
 * describe('A semi-transparent sphere.');
 * }`
 * @param color <a href="#/p5.Color">p5.Color</a> object, array of
 * color components, or CSS color string.
 * @returns the alpha value.
 */
function alpha(color: P5.Color | number[] | string): number;

/**
 * Returns the current
 * <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#path_to_resource" target="_blank">URL</a>
 * path as an `Array` of `String`s.
 * 
 * For example, consider a sketch hosted at the URL
 * `https://example.com/sketchbook`. Calling `getURLPath()` returns
 * `['sketchbook']`. For a sketch hosted at the URL
 * `https://example.com/sketchbook/monday`, `getURLPath()` returns
 * `['sketchbook', 'monday']`.
 * @returns path components.
 */
function getURLPath(): string[];

/**
 * Calculates coordinates along a line that's tangent to a spline curve.
 * 
 * Tangent lines skim the surface of a curve. A tangent line's slope equals
 * the curve's slope at the point where it intersects.
 * 
 * `splineTangent()` calculates coordinates along a tangent line using four
 * points p0, p1, p2, p3. It expects points in the same order as the
 * <a href="#/p5/spline">spline()</a> function. `splineTangent()` works one
 * axis at a time. Passing the points' x-coordinates returns the x-component of
 * the tangent vector; passing the points' y-coordinates returns the y-component.
 * The first parameter, `a`, is the coordinate of point p0.
 * 
 * The second and third parameters, `b` and `c`, are the coordinates of
 * points p1 and p2.
 * 
 * The fourth parameter, `d`, is the coordinate of point p3.
 * 
 * The fifth parameter, `t`, is the amount to interpolate along the span
 * from p1 to p2. `t = 0` is p1, `t = 1` is p2, and `t = 0.5` is halfway
 * between them.
 * @param a coordinate of point p0.
 * @param b coordinate of point p1.
 * @param c coordinate of point p2.
 * @param d coordinate of point p3.
 * @param t amount to interpolate between 0 and 1.
 * @returns coordinate of a point on the tangent line.
 */
function splineTangent(a: number, b: number, c: number, d: number, t: number): number;

/**
 * Sets the normal vector for vertices in a custom 3D shape.
 * 
 * 3D shapes created with <a href="#/p5/beginShape">beginShape()</a> and
 * <a href="#/p5/endShape">endShape()</a> are made by connecting sets of
 * points called vertices. Each vertex added with
 * <a href="#/p5/vertex">vertex()</a> has a normal vector that points away
 * from it. The normal vector controls how light reflects off the shape.
 * 
 * `normal()` can be called two ways with different parameters to define the
 * normal vector's components.
 * 
 * The first way to call `normal()` has three parameters, `x`, `y`, and `z`.
 * If `Number`s are passed, as in `normal(1, 2, 3)`, they set the x-, y-, and
 * z-components of the normal vector.
 * 
 * The second way to call `normal()` has one parameter, `vector`. If a
 * <a href="#/p5.Vector">p5.Vector</a> object is passed, as in
 * `normal(myVector)`, its components will be used to set the normal vector.
 * 
 * `normal()` changes the normal vector of vertices added to a custom shape
 * with <a href="#/p5/vertex">vertex()</a>. `normal()` must be called between
 * the <a href="#/p5/beginShape">beginShape()</a> and
 * <a href="#/p5/endShape">endShape()</a> functions, just like
 * <a href="#/p5/vertex">vertex()</a>. The normal vector set by calling
 * `normal()` will affect all following vertices until `normal()` is called
 * again:
 * 
 * `beginShape();
 * 
 * // Set the vertex normal.
 * normal(-0.4, -0.4, 0.8);
 * 
 * // Add a vertex.
 * vertex(-30, -30, 0);
 * 
 * // Set the vertex normal.
 * normal(0, 0, 1);
 * 
 * // Add vertices.
 * vertex(30, -30, 0);
 * vertex(30, 30, 0);
 * 
 * // Set the vertex normal.
 * normal(0.4, -0.4, 0.8);
 * 
 * // Add a vertex.
 * vertex(-30, 30, 0);
 * 
 * endShape();`
 * @param vector vertex normal as a <a href="#/p5.Vector">p5.Vector</a> object.
 */
function normal(vector: P5.Vector): void;
function normal(x: number, y: number, z: number): void;

/**
 * Shears the x-axis so that shapes appear skewed.
 * 
 * By default, the x- and y-axes are perpendicular. The `shearX()` function
 * transforms the coordinate system so that x-coordinates are translated while
 * y-coordinates are fixed.
 * 
 * The first parameter, `angle`, is the amount to shear. For example, calling
 * `shearX(1)` transforms all x-coordinates using the formula
 * `x = x + y * tan(angle)`. `shearX()` interprets angle values using the
 * current <a href="#/p5/angleMode">angleMode()</a>.
 * 
 * By default, transformations accumulate. For example, calling
 * `shearX(1)` twice has the same effect as calling `shearX(2)` once. The
 * <a href="#/p5/push">push()</a> and
 * <a href="#/p5/pop">pop()</a> functions can be used to isolate
 * transformations within distinct drawing groups.
 * 
 * Note: Transformations are reset at the beginning of the draw loop. Calling
 * `shearX(1)` inside the <a href="#/p5/draw">draw()</a> function won't
 * cause shapes to shear continuously.
 * @param angle angle to shear by in the current <a href="#/p5/angleMode">angleMode()</a>.
 */
function shearX(angle: number): void;

/**
 * Changes the way color values are interpreted.
 * 
 * By default, the `Number` parameters for <a href="#/p5/fill">fill()</a>,
 * <a href="#/p5/stroke">stroke()</a>,
 * <a href="#/p5/background">background()</a>, and
 * <a href="#/p5/color">color()</a> are defined by values between 0 and 255
 * using the RGB color model. This is equivalent to calling
 * `colorMode(RGB, 255)`. Pure red is `color(255, 0, 0)` in this model.
 * 
 * Calling `colorMode(RGB, 100)` sets colors to use RGB color values
 * between 0 and 100. Pure red is `color(100, 0, 0)` in this model.
 * 
 * Calling `colorMode(HSB)` or `colorMode(HSL)` changes to HSB or HSL systems instead of RGB.
 * Pure red is `color(0, 100, 100)` in HSB and `color(0, 100, 50)` in HSL.
 * 
 * Some additional color modes that p5.js supports are:
 * 
 * `RGBP3` - High Dynamic Range RGB defined within the Display P3 color space.
 * Colors are expressed with an extended dynamic range. To render these colors
 * accurately, you must use the P3 canvas.
 * 
 * `HWB`    - Hue, Whiteness, Blackness.
 * Similar to HSB and HSL, this mode uses a hue angle.
 * Instead of saturation and lightness, HWB defines colors based on the percentage
 * of whiteness and blackness. This is the color model used by Chrome's GUI color picker.
 * Pure red in HWB is represented as `color(0, 0, 0)` (i.e., hue 0 with 0% whiteness and 0% blackness).
 * 
 * `     <img src="assets/hwb.png"></img>``LAB`    - Also known as CIE Lab, this color mode defines colors with Lightness, Alpha, and Beta.
 * It is widely used in professional color measurement contexts due to its perceptual uniformity.
 * 
 * `LCH`    - A more intuitive representation of the CIE Lab color space using Lightness, Chroma, and Hue.
 * This mode separates the color's chromatic intensity (chroma) from its lightness,
 * simplifying color selection and manipulation.
 * 
 * `OKLAB`  - A variant of the CIE Lab color space that corrects for non-uniformities inherent in LAB.
 * The adjustment provides a more perceptually accurate and uniform representation,
 * which is particularly beneficial for smooth color transitions.
 * 
 * `OKLCH`  - An easier-to-use representation of OKLAB, expressing colors in terms of Lightness, Chroma, and Hue.
 * This mode retains the perceptual benefits of OKLAB while offering a more intuitive format for color manipulation.
 * 
 * <a href="#/p5.Color">p5.Color</a> objects remember the mode that they were
 * created in. Changing modes doesn't affect their appearance.
 * 
 * `Single-value (Grayscale) Colors`:
 * When a color is specified with only one parameter (e.g., `color(g)`), p5.js will interpret it
 * as a grayscale color. However, how that single parameter translates into a grayscale value
 * depends on the color mode:
 * 
 * - `RGB, HSB, and HSL`: In RGB, the single value is interpreted using the “blue” maximum
 * (i.e., the single parameter is mapped to the blue channel's max).
 * In HSB and HSL, the single value is mapped to Brightness and Lightness max respectively with hue=0 .
 * and saturation=0.
 * 
 * - `LAB, LCH, OKLAB, and OKLCH`: The single value is taken to be the `lightness (L)` component,
 * with the specified max range for that channel.
 * 
 * - `HWB`: Grayscale relies on both the `whiteness (W)` and `blackness (B)` channels. Since
 * a single value cannot directly account for two distinct channels, the library uses an
 * average of their max values to interpret the single grayscale parameter. For instance,
 * if W has a max of 50 and B has a max of 100, then the single grayscale parameter
 * is mapped using (50 + 100) / 2 = 75 as its effective maximum. More complex or negative
 * ranges are currently not handled, so results in those cases may be ambiguous.
 * @param mode either RGB, HSB, HSL,
 * or one of the extended modes described above.
 * @param max range for all values.
 * @returns The current color mode.
 */
function colorMode(mode: typeof P5.RGB | typeof P5.HSB | typeof P5.HSL | typeof P5.RGBP3 | typeof P5.HWB | typeof P5.LAB | typeof P5.LCH | typeof P5.OKLAB | typeof P5.OKLCH, max?: number): typeof P5.RGB | typeof P5.HSB | typeof P5.HSL | typeof P5.RGBP3 | typeof P5.HWB | typeof P5.LAB | typeof P5.LCH | typeof P5.OKLAB | typeof P5.OKLCH;
function colorMode(mode: typeof P5.RGB | typeof P5.HSB | typeof P5.HSL | typeof P5.RGBP3 | typeof P5.HWB | typeof P5.LAB | typeof P5.LCH | typeof P5.OKLAB | typeof P5.OKLCH, max1: number, max2: number, max3: number, maxA?: number): typeof P5.RGB | typeof P5.HSB | typeof P5.HSL | typeof P5.RGBP3 | typeof P5.HWB | typeof P5.LAB | typeof P5.LCH | typeof P5.OKLAB | typeof P5.OKLCH;
function colorMode(): typeof P5.RGB | typeof P5.HSB | typeof P5.HSL | typeof P5.RGBP3 | typeof P5.HWB | typeof P5.LAB | typeof P5.LCH | typeof P5.OKLAB | typeof P5.OKLCH;

/**
 * Returns the current
 * <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL#parameters" target="_blank">URL parameters</a>
 * in an `Object`.
 * 
 * For example, calling `getURLParams()` in a sketch hosted at the URL
 * `https://p5js.org?year=2014&month=May&day=15` returns
 * `{ year: 2014, month: 'May', day: 15 }`.
 * @returns URL params
 */
function getURLParams(): object;

/**
 * Draws an image to the canvas.
 * 
 * The first parameter, `img`, is the source image to be drawn. `img` can be
 * any of the following objects:
 * 
 * - <a href="#/p5.Image">p5.Image</a>
 * 
 * - <a href="#/p5.Element">p5.Element</a>
 * 
 * - <a href="#/p5.Texture">p5.Texture</a>
 * 
 * - <a href="#/p5.Framebuffer">p5.Framebuffer</a>
 * 
 * - <a href="#/p5.FramebufferTexture">p5.FramebufferTexture</a>
 * 
 * The second and third parameters, `dx` and `dy`, set the coordinates of the
 * destination image's top left corner. See
 * <a href="#/p5/imageMode">imageMode()</a> for other ways to position images.
 * 
 * `let img;
 * 
 * async function setup() {
 * // Load the image.
 * img = await loadImage('assets/laDefense.jpg');
 * 
 * createCanvas(100, 100);
 * 
 * background(50);
 * 
 * // Draw the image.
 * image(img, 0, 0);
 * 
 * describe('An image of the underside of a white umbrella with a gridded ceiling above.');
 * }`Here's a diagram that explains how optional parameters work in `image()`:
 * 
 * <img src="assets/drawImage.png"></img>
 * 
 * The fourth and fifth parameters, `dw` and `dh`, are optional. They set the
 * the width and height to draw the destination image. By default, `image()`
 * draws the full source image at its original size.
 * 
 * The sixth and seventh parameters, `sx` and `sy`, are also optional.
 * These coordinates define the top left corner of a subsection to draw from
 * the source image.
 * 
 * The eighth and ninth parameters, `sw` and `sh`, are also optional.
 * They define the width and height of a subsection to draw from the source
 * image. By default, `image()` draws the full subsection that begins at
 * `(sx, sy)` and extends to the edges of the source image.
 * 
 * The ninth parameter, `fit`, is also optional. It enables a subsection of
 * the source image to be drawn without affecting its aspect ratio. If
 * `CONTAIN` is passed, the full subsection will appear within the destination
 * rectangle. If `COVER` is passed, the subsection will completely cover the
 * destination rectangle. This may have the effect of zooming into the
 * subsection.
 * 
 * The tenth and eleventh paremeters, `xAlign` and `yAlign`, are also
 * optional. They determine how to align the fitted subsection. `xAlign` can
 * be set to either `LEFT`, `RIGHT`, or `CENTER`. `yAlign` can be set to
 * either `TOP`, `BOTTOM`, or `CENTER`. By default, both `xAlign` and `yAlign`
 * are set to `CENTER`.
 * @param img image to display.
 * @param x x-coordinate of the top-left corner of the image.
 * @param y y-coordinate of the top-left corner of the image.
 * @param width width to draw the image.
 * @param height height to draw the image.
 */
function image(img: P5.Image | P5.Element | P5.Texture | P5.Framebuffer | P5.FramebufferTexture | P5.Renderer | P5.Graphics, x: number, y: number, width?: number, height?: number): void;
function image(img: P5.Image | P5.Element | P5.Texture | P5.Framebuffer | P5.FramebufferTexture, dx: number, dy: number, dWidth: number, dHeight: number, sx: number, sy: number, sWidth?: number, sHeight?: number, fit?: typeof P5.CONTAIN | typeof P5.COVER, xAlign?: typeof P5.LEFT | typeof P5.RIGHT | typeof P5.CENTER, yAlign?: typeof P5.TOP | typeof P5.BOTTOM | typeof P5.CENTER): void;

/**
 * Sets the falloff rate for <a href="#/p5/pointLight">pointLight()</a>
 * and <a href="#/p5/spotLight">spotLight()</a>.
 * 
 * A light’s falloff describes the intensity of its beam at a distance. For
 * example, a lantern has a slow falloff, a flashlight has a medium falloff,
 * and a laser pointer has a sharp falloff.
 * 
 * `lightFalloff()` has three parameters, `constant`, `linear`, and
 * `quadratic`. They’re numbers used to calculate falloff at a distance, `d`,
 * as follows:
 * 
 * `falloff = 1 / (constant + d * linear + (d * d) * quadratic)`
 * 
 * Note: `constant`, `linear`, and `quadratic` should always be set to values
 * greater than 0.
 * @param constant constant value for calculating falloff.
 * @param linear linear value for calculating falloff.
 * @param quadratic quadratic value for calculating falloff.
 */
function lightFalloff(constant: number, linear: number, quadratic: number): 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 = millis() / 1000;
 * 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);
 * shader(myShader);
 * 
 * rectMode(CENTER);
 * rect(0, 0, 50, 50);
 * }`For advanced usage, shaders can be written in a language called
 * <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>.
 * <a href="#/p5.Shader">p5.Shader</a> objects can be created in this way using the
 * <a href="#/p5/createShader">createShader()</a> and
 * <a href="#/p5/loadShader">loadShader()</a> functions.
 * 
 * `let fillShader;
 * 
 * let vertSrc = `
 * precision highp float;
 * attribute vec3 aPosition;
 * uniform mat4 uModelViewMatrix;
 * uniform mat4 uProjectionMatrix;
 * varying vec3 vPosition;
 * 
 * void main() {
 * vPosition = aPosition;
 * gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
 * }
 * `;
 * 
 * let fragSrc = `
 * precision highp float;
 * uniform vec3 uLightDir;
 * varying vec3 vPosition;
 * 
 * void main() {
 * vec3 lightDir = normalize(uLightDir);
 * float brightness = dot(lightDir, normalize(vPosition));
 * brightness = clamp(brightness, 0.4, 1.0);
 * vec3 color = vec3(0.3, 0.5, 1.0);
 * color = color * brightness * 3.0;
 * gl_FragColor = vec4(color, 1.0);
 * }
 * `;
 * 
 * function setup() {
 * createCanvas(200, 200, WEBGL);
 * fillShader = createShader(vertSrc, fragSrc);
 * noStroke();
 * describe('A rotating torus with simulated directional lighting.');
 * }
 * 
 * function draw() {
 * background(20, 20, 40);
 * let lightDir = [0.5, 0.5, 1.0];
 * fillShader.setUniform('uLightDir', lightDir);
 * shader(fillShader);
 * rotateY(frameCount * 0.02);
 * rotateX(frameCount * 0.02);
 * torus(25, 10, 30, 30);
 * }``let fillShader;
 * 
 * let vertSrc = `
 * precision highp float;
 * attribute vec3 aPosition;
 * uniform mat4 uProjectionMatrix;
 * uniform mat4 uModelViewMatrix;
 * varying vec3 vPosition;
 * void main() {
 * vPosition = aPosition;
 * gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
 * }
 * `;
 * 
 * let fragSrc = `
 * precision highp float;
 * uniform vec3 uLightPos;
 * uniform vec3 uFillColor;
 * varying vec3 vPosition;
 * void main() {
 * float brightness = dot(normalize(uLightPos), normalize(vPosition));
 * brightness = clamp(brightness, 0.0, 1.0);
 * vec3 color = uFillColor * brightness;
 * gl_FragColor = vec4(color, 1.0);
 * }
 * `;
 * 
 * function setup() {
 * createCanvas(200, 200, WEBGL);
 * fillShader = createShader(vertSrc, fragSrc);
 * shader(fillShader);
 * noStroke();
 * describe('A square affected by both fill color and lighting, with lights controlled by mouse.');
 * }
 * 
 * function draw() {
 * let lightPos = [(mouseX - width / 2) / width,
 * (mouseY - height / 2) / height, 1.0];
 * fillShader.setUniform('uLightPos', lightPos);
 * let fillColor = [map(mouseX, 0, width, 0, 1),
 * map(mouseY, 0, height, 0, 1), 0.5];
 * fillShader.setUniform('uFillColor', fillColor);
 * plane(width, height);
 * }`<div>
 * <p>If you want to apply shaders to strokes or images, use the following methods:
 * 
 * - <a href="#/p5/strokeShader">strokeShader()</a> : Applies a shader to the stroke (outline) of shapes, allowing independent control over the stroke rendering using shaders.
 * 
 * - <a href="#/p5/imageShader">imageShader()</a> : Applies a shader to images or textures, controlling how the shader modifies their appearance during rendering.
 * 
 * </p>
 * </div>
 * @param s <a href="#/p5.Shader">p5.Shader</a> object
 * to apply.
 */
function shader(s: P5.Shader): void;

/**
 * A function that's called when the mouse moves.
 * 
 * Declaring the function `mouseMoved()` sets a code block to run
 * automatically when the user moves the mouse without clicking any mouse
 * buttons:
 * 
 * `function mouseMoved() {
 * // Code to run.
 * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
 * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
 * value when `mouseMoved()` is called by p5.js:
 * 
 * `function mouseMoved() {
 * if (mouseX < 50) {
 * // Code to run if the mouse is on the left.
 * }
 * 
 * if (mouseY > 50) {
 * // Code to run if the mouse is near the bottom.
 * }
 * }`The parameter, `event`, is optional. `mouseMoved()` is always passed a
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank">MouseEvent</a>
 * object with properties that describe the mouse move event:
 * 
 * `function mouseMoved(event) {
 * // Code to run that uses the event.
 * console.log(event);
 * }`Browsers may have default behaviors attached to various mouse events. For
 * example, some browsers highlight text when the user moves the mouse while
 * pressing a mouse button. To prevent any default behavior for this event,
 * add `return false;` to the end of the function.
 * @param event optional `MouseEvent` argument.
 */
function mouseMoved(event?: MouseEvent): void;

/**
 * A function that's called when the mouse moves while a button is pressed.
 * 
 * Declaring the function `mouseDragged()` sets a code block to run
 * automatically when the user clicks and drags the mouse:
 * 
 * `function mouseDragged() {
 * // Code to run.
 * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
 * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
 * value when `mouseDragged()` is called by p5.js:
 * 
 * `function mouseDragged() {
 * if (mouseX < 50) {
 * // Code to run if the mouse is on the left.
 * }
 * 
 * if (mouseY > 50) {
 * // Code to run if the mouse is near the bottom.
 * }
 * }`The parameter, `event`, is optional. `mouseDragged()` is always passed a
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" target="_blank">MouseEvent</a>
 * object with properties that describe the mouse drag event:
 * 
 * `function mouseDragged(event) {
 * // Code to run that uses the event.
 * console.log(event);
 * }`On touchscreen devices, `mouseDragged()` will run when a user moves a touch
 * point.
 * 
 * Browsers may have default behaviors attached to various mouse events. For
 * example, some browsers highlight text when the user moves the mouse while
 * pressing a mouse button. To prevent any default behavior for this event,
 * add `return false;` to the end of the function.
 * @param event optional `MouseEvent` argument.
 */
function mouseDragged(event?: MouseEvent): void;

/**
 * Returns `true` if the key it’s checking is pressed and `false` if not.
 * 
 * `keyIsDown()` is helpful when checking for multiple different key presses.
 * For example, `keyIsDown()` can be used to check if both `LEFT_ARROW` and
 * `UP_ARROW` are pressed:
 * 
 * `if (keyIsDown(LEFT_ARROW) && keyIsDown(UP_ARROW)) {
 * // Move diagonally.
 * }``keyIsDown()` can check for key presses using strings based on
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key" target="_blank">KeyboardEvent.key</a>
 * or <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code" target="_blank">KeyboardEvent.code</a> values,
 * such as `keyIsDown('x')` or `keyIsDown('ArrowLeft')`.
 * 
 * Note: In p5.js 2.0 and newer, numeric keycodes (such as 88 for 'X') are no longer supported.
 * This is a breaking change from previous versions.
 * 
 * You can still use the p5 constants like `LEFT_ARROW` which now map to string values
 * internally rather than numeric codes.
 * @param code key to check.
 * @returns whether the key is down or not.
 */
function keyIsDown(code: number | string): boolean;

/**
 * Sets the element's content.
 * 
 * An element's content is the text between its tags. For example, the element
 * `<language>JavaScript</language>` has the content `JavaScript`.
 * 
 * The parameter, `content`, is a string with the element's new content.
 * @param content new content for the element.
 */
function setContent(content: string): void;

/**
 * Changes the unit system used to measure angles.
 * 
 * Degrees and radians are both units for measuring angles. There are 360˚ in
 * one full rotation. A full rotation is 2 × π (about 6.28) radians.
 * 
 * Functions such as <a href="#/p5/rotate">rotate()</a> and
 * <a href="#/p5/sin">sin()</a> expect angles measured radians by default.
 * Calling `angleMode(DEGREES)` switches to degrees. Calling
 * `angleMode(RADIANS)` switches back to radians.
 * 
 * Calling `angleMode()` with no arguments returns current angle mode, which
 * is either `RADIANS` or `DEGREES`.
 * @param mode either RADIANS or DEGREES.
 * @returns mode either RADIANS or DEGREES
 */
function angleMode(mode: typeof P5.RADIANS | typeof P5.DEGREES): typeof P5.RADIANS | typeof P5.DEGREES;
function angleMode(): typeof P5.RADIANS | typeof P5.DEGREES;

/**
 * Draws a rectangle.
 * 
 * A rectangle is a four-sided shape defined by the `x`, `y`, `w`, and `h`
 * parameters. `x` and `y` set the location of its top-left corner. `w` sets
 * its width and `h` sets its height. Every angle in the rectangle measures
 * 90˚. See <a href="#/p5/rectMode">rectMode()</a> for other ways to define
 * rectangles.
 * 
 * The version of `rect()` with five parameters creates a rounded rectangle. The
 * fifth parameter sets the radius for all four corners.
 * 
 * The version of `rect()` with eight parameters also creates a rounded
 * rectangle. Each of the last four parameters set the radius of a corner. The
 * radii start with the top-left corner and move clockwise around the
 * rectangle. If any of these parameters are omitted, they are set to the
 * value of the last radius that was set.
 * @param x x-coordinate of the rectangle.
 * @param y y-coordinate of the rectangle.
 * @param w width of the rectangle.
 * @param h height of the rectangle.
 * @param tl optional radius of top-left corner.
 * @param tr optional radius of top-right corner.
 * @param br optional radius of bottom-right corner.
 * @param bl optional radius of bottom-left corner.
 */
function rect(x: number, y: number, w: number, h?: number, tl?: number, tr?: number, br?: number, bl?: number): void;
function rect(x: number, y: number, w: number, h: number, detailX?: number, detailY?: number): void;

/**
 * Shears the y-axis so that shapes appear skewed.
 * 
 * By default, the x- and y-axes are perpendicular. The `shearY()` function
 * transforms the coordinate system so that y-coordinates are translated while
 * x-coordinates are fixed.
 * 
 * The first parameter, `angle`, is the amount to shear. For example, calling
 * `shearY(1)` transforms all y-coordinates using the formula
 * `y = y + x * tan(angle)`. `shearY()` interprets angle values using the
 * current <a href="#/p5/angleMode">angleMode()</a>.
 * 
 * By default, transformations accumulate. For example, calling
 * `shearY(1)` twice has the same effect as calling `shearY(2)` once. The
 * <a href="#/p5/push">push()</a> and
 * <a href="#/p5/pop">pop()</a> functions can be used to isolate
 * transformations within distinct drawing groups.
 * 
 * Note: Transformations are reset at the beginning of the draw loop. Calling
 * `shearY(1)` inside the <a href="#/p5/draw">draw()</a> function won't
 * cause shapes to shear continuously.
 * @param angle angle to shear by in the current <a href="#/p5/angleMode">angleMode()</a>.
 */
function shearY(angle: number): void;

/**
 * Returns the smallest value in a sequence of numbers.
 * 
 * The version of `min()` with one parameter interprets it as an array of
 * numbers and returns the smallest number.
 * 
 * The version of `min()` with two or more parameters interprets them as
 * individual numbers and returns the smallest number.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Calculate the minimum of 10, 5, and 20.
 * let m = min(10, 5, 20);
 * 
 * // Style the text.
 * textAlign(CENTER);
 * textSize(16);
 * 
 * // Display the min.
 * text(m, 50, 50);
 * 
 * describe('The number 5 written in the middle of a gray square.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create an array of numbers.
 * let numbers = [10, 5, 20];
 * 
 * // Calculate the minimum of the array.
 * let m = min(numbers);
 * 
 * // Style the text.
 * textAlign(CENTER);
 * textSize(16);
 * 
 * // Display the min.
 * text(m, 50, 50);
 * 
 * describe('The number 5 written in the middle of a gray square.');
 * }``min()` can also be used in shaders with p5.strands. The following example
 * uses `min()` to clamp values in a shader.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere that shifts from red to green and stops.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
 * let t = millis() * 0.001;
 * 
 * // t * 0.2 grows steadily over time.
 * // min(..., 1) caps the value at 1 so it doesn't go past the target color.
 * let value = min(t * 0.2, 1);
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let deepRed = [0.8, 0, 0.2, 1];
 * let yellowGreen = [0.8, 1, 0.2, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between deepRed (when value = 0) and yellowGreen (when value = 1).
 * // min() clamps the blend so the color stops changing once it reaches yellowGreen.
 * finalColor.set(mix(deepRed, yellowGreen, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param n0 first number to compare.
 * @param n1 second number to compare.
 * @returns minimum number.
 */
function min(n0: number, n1: number): number;
function min(nums: number[]): number;

/**
 * Method for executing an HTTP request. If data type is not specified,
 * it will default to `'text'`.
 * 
 * This function is meant for more advanced usage of HTTP requests in p5.js. It is
 * best used when a `Request`
 * object is passed to the `path` parameter.
 * 
 * This method is suitable for fetching files up to size of 64MB when "GET" is used.
 * @param path name of the file or url to load
 * @param method either "GET", "POST", "PUT", "DELETE",
 * or other HTTP request methods
 * @param datatype "json", "jsonp", "xml", or "text"
 * @param data param data passed sent with request
 * @param callback function to be executed after
 * <a href="#/p5/httpGet">httpGet()</a> completes, data is passed in
 * as first argument
 * @param errorCallback function to be executed if
 * there is an error, response is passed
 * in as first argument
 * @returns A promise that resolves with the data when the operation
 * completes successfully or rejects with the error after
 * one occurs.
 */
function httpDo(path: string | Request, method?: string, datatype?: string, data?: object, callback?: Function, errorCallback?: Function): Promise<any>;
function httpDo(path: string | Request, callback?: Function, errorCallback?: Function): Promise<any>;

/**
 * Draws a <a href="#/p5.Geometry">p5.Geometry</a> object to the canvas.
 * 
 * The first parameter, `model`, is the
 * <a href="#/p5.Geometry">p5.Geometry</a> object to draw.
 * <a href="#/p5.Geometry">p5.Geometry</a> objects can be built with
 * <a href="#/p5/buildGeometry">buildGeometry()</a>. They can also be loaded from
 * a file with <a href="#/p5/loadGeometry">loadGeometry()</a>.
 * 
 * Note: `model()` can only be used in WebGL mode.
 * 
 * `// Click and drag the mouse to view the scene from different angles.
 * 
 * let shape;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * // Create the p5.Geometry object.
 * shape = buildGeometry(createShape);
 * 
 * describe('A white cone drawn on a gray background.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Enable orbiting with the mouse.
 * orbitControl();
 * 
 * // Draw the p5.Geometry object.
 * model(shape);
 * }
 * 
 * // Create p5.Geometry object from a single cone.
 * function createShape() {
 * cone();
 * }``// Click and drag the mouse to view the scene from different angles.
 * 
 * let shape;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * 
 * // Create the p5.Geometry object.
 * shape = buildGeometry(createArrow);
 * 
 * describe('Two white arrows drawn on a gray background. The arrow on the right rotates slowly.');
 * }
 * 
 * function draw() {
 * background(50);
 * 
 * // Enable orbiting with the mouse.
 * orbitControl();
 * 
 * // Turn on the lights.
 * lights();
 * 
 * // Style the arrows.
 * noStroke();
 * 
 * // Draw the p5.Geometry object.
 * model(shape);
 * 
 * // Translate and rotate the coordinate system.
 * translate(30, 0, 0);
 * rotateZ(frameCount * 0.01);
 * 
 * // Draw the p5.Geometry object again.
 * model(shape);
 * }
 * 
 * function createArrow() {
 * // Add shapes to the p5.Geometry object.
 * push();
 * rotateX(PI);
 * cone(10);
 * translate(0, -10, 0);
 * cylinder(3, 20);
 * pop();
 * }``// Click and drag the mouse to view the scene from different angles.
 * 
 * let shape;
 * 
 * async function setup() {
 * shape = await loadModel('assets/octahedron.obj');
 * 
 * createCanvas(100, 100, WEBGL);
 * 
 * describe('A white octahedron drawn against a gray background.');
 * }
 * 
 * function draw() {
 * background(200);
 * 
 * // Enable orbiting with the mouse.
 * orbitControl();
 * 
 * // Draw the shape.
 * model(shape);
 * }`Multiple instances can be drawn at once with `model(geometry, count)`. On its own,
 * all the instances get drawn to the same spot, but you can use
 * <a href="#/p5/instanceID">`instanceID()`</a> inside of a shader to handle each instance.
 * At large counts, this often runs faster than using a `for` loop.
 * 
 * `let instancesShader;
 * let instance;
 * let count = 5;
 * 
 * function drawInstance() {
 * sphere(15);
 * }
 * 
 * function setup() {
 * createCanvas(200, 200, WEBGL);
 * instance = buildGeometry(drawInstance);
 * instancesShader = buildMaterialShader(drawSpaced);
 * }
 * 
 * function drawSpaced() {
 * worldInputs.begin();
 * // Spread spheres evenly across the canvas based on their index
 * let spacing = width / count;
 * worldInputs.position.x +=
 * (instanceID() - (count - 1) / 2) * spacing;
 * worldInputs.end();
 * }
 * 
 * function draw() {
 * background(220);
 * lights();
 * noStroke();
 * fill('red');
 * shader(instancesShader);
 * model(instance, count);
 * }`
 * @param model 3D shape to be drawn.
 * @param count number of instances to draw.
 */
function model(model: P5.Geometry, count?: number): void;

/**
 * Gets the hue value of a color.
 * 
 * `hue()` extracts the hue value from a
 * <a href="/reference/p5/p5.Color/">p5.Color</a> object, an array of color components, or
 * a CSS color string.
 * 
 * Hue describes a color's position on the color wheel. By default, `hue()`
 * returns a color's HSL hue in the range 0 to 360. If the
 * <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB or HSL, it returns the hue
 * value in the given mode.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Use HSL color.
 * colorMode(HSL);
 * 
 * // Create a p5.Color object.
 * let c = color(0, 50, 100);
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 20, 35, 60);
 * 
 * // Set 'hueValue' to 0.
 * let hueValue = hue(c);
 * 
 * // Draw the right rectangle.
 * fill(hueValue);
 * rect(50, 20, 35, 60);
 * 
 * describe(
 * 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
 * );
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Use HSL color.
 * colorMode(HSL);
 * 
 * // Create a color array.
 * let c = [0, 50, 100];
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 20, 35, 60);
 * 
 * // Set 'hueValue' to 0.
 * let hueValue = hue(c);
 * 
 * // Draw the right rectangle.
 * fill(hueValue);
 * rect(50, 20, 35, 60);
 * 
 * describe(
 * 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
 * );
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Use HSL color.
 * colorMode(HSL);
 * 
 * // Create a CSS color string.
 * let c = 'rgb(255, 128, 128)';
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 20, 35, 60);
 * 
 * // Set 'hueValue' to 0.
 * let hueValue = hue(c);
 * 
 * // Draw the right rectangle.
 * fill(hueValue);
 * rect(50, 20, 35, 60);
 * 
 * describe(
 * 'Two rectangles. The rectangle on the left is salmon pink and the one on the right is black.'
 * );
 * }`In p5.strands shader callbacks, `hue()` operates on `vec4` values and
 * returns the hue as a normalized value in the 0–1 range.
 * `colorMode()` has no effect inside shader callbacks.
 * 
 * `let myShader;
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildMaterialShader(myShaderBuilder);
 * }
 * 
 * function myShaderBuilder() {
 * finalColor.begin();
 * let c = color(0, 255, 128);
 * let h = hue(c);
 * finalColor.set(vec4(h, h, h, 1.0));
 * finalColor.end();
 * }
 * 
 * function draw() {
 * shader(myShader);
 * noStroke();
 * sphere(40);
 * 
 * describe('A sphere shaded in grayscale based on hue.');
 * }`
 * @param color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
 * color components, or CSS color string.
 * @returns the hue value.
 */
function hue(color: P5.Color | number[] | string): number;

/**
 * Creates a dropdown menu `<select></select>` element.
 * 
 * The parameter is optional. If `true` is passed, as in
 * `let mySelect = createSelect(true)`, then the dropdown will support
 * multiple selections. If an existing `<select></select>` element
 * is passed, as in `let mySelect = createSelect(otherSelect)`, the existing
 * element will be wrapped in a new <a href="#/p5.Element">p5.Element</a>
 * object.
 * 
 * Dropdowns extend the <a href="#/p5.Element">p5.Element</a> class with a few
 * helpful methods for managing options:
 * 
 * - `mySelect.option(name, [value])` adds an option to the menu. The first paremeter, `name`, is a string that sets the option's name and value. The second parameter, `value`, is optional. If provided, it sets the value that corresponds to the key `name`. If an option with `name` already exists, its value is changed to `value`.
 * 
 * - `mySelect.value()` returns the currently-selected option's value.
 * 
 * - `mySelect.selected()` returns the currently-selected option.
 * 
 * - `mySelect.selected(option)` selects the given option by default.
 * 
 * - `mySelect.disable()` marks the whole dropdown element as disabled.
 * 
 * - `mySelect.disable(option)` marks a given option as disabled.
 * 
 * - `mySelect.enable()` marks the whole dropdown element as enabled.
 * 
 * - `mySelect.enable(option)` marks a given option as enabled.
 * @param multiple support multiple selections.
 * @returns new <a href="#/p5.Element">p5.Element</a> object.
 */
function createSelect(multiple?: boolean): P5.Element;
function createSelect(existing: object): P5.Element;

/**
 * Draws a cone.
 * 
 * A cone is a 3D shape with triangular faces that connect a flat bottom to a
 * single point. Cones with few faces look like pyramids. Cones with many
 * faces have smooth surfaces.
 * 
 * The first parameter, `radius`, is optional. If a `Number` is passed, as in
 * `cone(20)`, it sets the radius of the cone’s base. By default, `radius` is
 * 50.
 * 
 * The second parameter, `height`, is also optional. If a `Number` is passed,
 * as in `cone(20, 30)`, it sets the cone’s height. By default, `height` is
 * set to the cone’s `radius`.
 * 
 * The third parameter, `detailX`, is also optional. If a `Number` is passed,
 * as in `cone(20, 30, 5)`, it sets the number of edges used to form the
 * cone's base. Using more edges makes the base look more like a circle. By
 * default, `detailX` is 24.
 * 
 * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
 * as in `cone(20, 30, 5, 7)`, it sets the number of triangle subdivisions to
 * use along the y-axis connecting the base to the tip. All 3D shapes are made
 * by connecting triangles to form their surfaces. By default, `detailY` is 1.
 * 
 * The fifth parameter, `cap`, is also optional. If a `false` is passed, as
 * in `cone(20, 30, 5, 7, false)` the cone’s base won’t be drawn. By default,
 * `cap` is `true`.
 * 
 * Note: `cone()` can only be used in WebGL mode.
 * @param radius radius of the cone's base. Defaults to 50.
 * @param height height of the cone. Defaults to the value of `radius`.
 * @param detailX number of edges used to draw the base. Defaults to 24.
 * @param detailY number of triangle subdivisions along the y-axis. Defaults to 1.
 * @param cap whether to draw the cone's base.  Defaults to `true`.
 */
function cone(radius?: number, height?: number, detailX?: number, detailY?: number, cap?: boolean): void;

/**
 * Maps a number from one range to a value between 0 and 1.
 * 
 * For example, `norm(2, 0, 10)` returns 0.2. 2's position in the original
 * range [0, 10] is proportional to 0.2's position in the range [0, 1]. This
 * is the same as calling `map(2, 0, 10, 0, 1)`.
 * 
 * Numbers outside of the original range are not constrained between 0 and 1.
 * Out-of-range values are often intentional and useful.
 * @param value incoming value to be normalized.
 * @param start lower bound of the value's current range.
 * @param stop upper bound of the value's current range.
 * @returns normalized number.
 */
function norm(value: number, start: number, stop: number): number;

/**
 * Converts 3D world coordinates to 2D screen coordinates.
 * 
 * This function takes a 3D vector and converts its coordinates
 * from the world space to screen space. This can be useful for placing
 * 2D elements in a 3D scene or for determining the screen position
 * of 3D objects.
 * @param x The x coordinate in world space. (Or a vector for all three coordinates.)
 * @param y The y coordinate in world space.
 * @param z The z coordinate in world space.
 * @returns A vector containing the 2D screen coordinates.
 */
function worldToScreen(x: number | P5.Vector, y: number, z?: number): P5.Vector;

/**
 * Sets the shader's vertex property or attribute variables.
 * 
 * A vertex property, or vertex attribute, is a variable belonging to a vertex in a shader. p5.js provides some
 * default properties, such as `aPosition`, `aNormal`, `aVertexColor`, etc. These are
 * set using <a href="#/p5/vertex">vertex()</a>, <a href="#/p5/normal">normal()</a>
 * and <a href="#/p5/fill">fill()</a> respectively. Custom properties can also
 * be defined within <a href="#/p5/beginShape">beginShape()</a> and
 * <a href="#/p5/endShape">endShape()</a>.
 * 
 * The first parameter, `propertyName`, is a string with the property's name.
 * This is the same variable name which should be declared in the shader, such as
 * `in vec3 aProperty`, similar to .`setUniform()`.
 * 
 * The second parameter, `data`, is the value assigned to the shader variable. This
 * value will be applied to subsequent vertices created with
 * <a href="#/p5/vertex">vertex()</a>. It can be a Number or an array of numbers,
 * and in the shader program the type can be declared according to the WebGL
 * specification. Common types include `float`, `vec2`, `vec3`, `vec4` or matrices.
 * 
 * See also the <a href="#/p5/vertexProperty">vertexProperty()</a> method on
 * <a href="#/p5/Geometry">Geometry</a> objects.
 * @param attributeName the name of the vertex attribute.
 * @param data the data tied to the vertex attribute.
 */
function vertexProperty(attributeName: string, data: number | number[]): void;

/**
 * Draws a square.
 * 
 * A square is a four-sided shape defined by the `x`, `y`, and `s`
 * parameters. `x` and `y` set the location of its top-left corner. `s` sets
 * its width and height. Every angle in the square measures 90˚ and all its
 * sides are the same length. See <a href="#/p5/rectMode">rectMode()</a> for
 * other ways to define squares.
 * 
 * The version of `square()` with four parameters creates a rounded square.
 * The fourth parameter sets the radius for all four corners.
 * 
 * The version of `square()` with seven parameters also creates a rounded
 * square. Each of the last four parameters set the radius of a corner. The
 * radii start with the top-left corner and move clockwise around the
 * square. If any of these parameters are omitted, they are set to the
 * value of the last radius that was set.
 * @param x x-coordinate of the square.
 * @param y y-coordinate of the square.
 * @param s side size of the square.
 * @param tl optional radius of top-left corner.
 * @param tr optional radius of top-right corner.
 * @param br optional radius of bottom-right corner.
 * @param bl optional radius of bottom-left corner.
 */
function square(x: number, y: number, s: number, tl?: number, tr?: number, br?: number, bl?: number): void;

/**
 * Converts 2D screen coordinates to 3D world coordinates.
 * 
 * This function takes a vector and converts its coordinates from coordinates
 * on the screen to coordinates in the currently drawn object. This can be
 * useful for determining the mouse position relative to a 2D or 3D object.
 * 
 * If given, the Z component of the input coordinates is treated as "depth",
 * or distance from the camera.
 * @param x The x coordinate in screen space. (Or a vector for all three coordinates.)
 * @param y The y coordinate in screen space.
 * @param z The z coordinate in screen space.
 * @returns A vector containing the 3D world space coordinates.
 */
function screenToWorld(x: number | P5.Vector, y: number, z?: number): P5.Vector;

/**
 * Load a 3d model from an OBJ or STL string.
 * 
 * OBJ and STL files lack a built-in sense of scale, causing models exported from different programs to vary in size.
 * If your model doesn't display correctly, consider using `loadModel()` with `normalize` set to `true` to standardize its size.
 * Further adjustments can be made using the `scale()` function.
 * 
 * Also, the support for colored STL files is not present. STL files with color will be
 * rendered without color properties.
 * 
 * - Options can include:
 * 
 * - `modelString`: Specifies the plain text string of either an stl or obj file to be loaded.
 * 
 * - `fileType`: Defines the file extension of the model.
 * 
 * - `normalize`: Enables standardized size scaling during loading if set to true.
 * 
 * - `successCallback`: Callback for post-loading actions with the 3D model object.
 * 
 * - `failureCallback`: Handles errors if model loading fails, receiving an event error.
 * 
 * - `flipU`: Flips the U texture coordinates of the model.
 * 
 * - `flipV`: Flips the V texture coordinates of the model.
 * @param modelString String of the object to be loaded
 * @param fileType The file extension of the model
 * (<code>.stl</code>, <code>.obj</code>).
 * @param normalize If true, scale the model to a
 * standardized size when loading
 * @param successCallback Function to be called
 * once the model is loaded. Will be passed
 * the 3D model object.
 * @param failureCallback called with event error if
 * the model fails to load.
 * @returns the <a href="#/p5.Geometry">p5.Geometry</a> object
 */
function createModel(modelString: string, fileType?: string, normalize?: boolean, successCallback?: (arg0: P5.Geometry) => void, failureCallback?: (arg0: Event) => void): P5.Geometry;
function createModel(modelString: string, fileType?: string, successCallback?: (arg0: P5.Geometry) => void, failureCallback?: (arg0: Event) => void): P5.Geometry;
function createModel(modelString: string, fileType?: string, options?: { successCallback?: (arg0: P5.Geometry) => void; failureCallback?: (arg0: Event) => void; normalize?: boolean; flipU?: boolean; flipV?: boolean }): P5.Geometry;

/**
 * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply for strokes.
 * 
 * This method applies the given shader to strokes, allowing customization of
 * how lines and outlines are drawn in 3D space. The shader will be used for
 * strokes until <a href="#/p5/resetShader">resetShader()</a> is called or another
 * strokeShader is applied.
 * 
 * The shader will be used for:
 * 
 * - Strokes only, regardless of whether the uniform `uStrokeWeight` is present.
 * 
 * To further customize its behavior, refer to the various hooks provided by
 * the <a href="#/p5/baseStrokeShader">baseStrokeShader()</a> method, which allow
 * control over stroke weight, vertex positions, colors, and more.
 * @param s <a href="#/p5.Shader">p5.Shader</a> object
 * to apply for strokes.
 */
function strokeShader(s: P5.Shader): void;

/**
 * A function that's called once when a mouse button is pressed.
 * 
 * Declaring the function `mousePressed()` sets a code block to run
 * automatically when the user presses a mouse button:
 * 
 * `function mousePressed() {
 * // Code to run.
 * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
 * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
 * value when `mousePressed()` is called by p5.js:
 * 
 * `function mousePressed() {
 * if (mouseX < 50) {
 * // Code to run if the mouse is on the left.
 * }
 * 
 * if (mouseY > 50) {
 * // Code to run if the mouse is near the bottom.
 * }
 * }`The parameter, `event`, is optional. `mousePressed()` 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 press event:
 * 
 * `function mousePressed(event) {
 * // Code to run that uses the event.
 * console.log(event);
 * }`On touchscreen devices, `mousePressed()` will run when a user’s touch
 * begins.
 * 
 * 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.
 * 
 * Note: `mousePressed()`, <a href="#/p5/mouseReleased">mouseReleased()</a>,
 * and <a href="#/p5/mouseClicked">mouseClicked()</a> are all related.
 * `mousePressed()` runs as soon as the user clicks the mouse.
 * <a href="#/p5/mouseReleased">mouseReleased()</a> runs as soon as the user
 * releases the mouse click. <a href="#/p5/mouseClicked">mouseClicked()</a>
 * runs immediately after <a href="#/p5/mouseReleased">mouseReleased()</a>.
 * @param event optional `MouseEvent` argument.
 */
function mousePressed(event?: MouseEvent): void;

/**
 * Calculates exponential expressions such as <var>2<sup>3</sup></var>.
 * 
 * For example, `pow(2, 3)` evaluates the expression
 * 2 × 2 × 2. `pow(2, -3)` evaluates 1 ÷
 * (2 × 2 × 2).
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Set the base of the exponent.
 * let base = 3;
 * 
 * // Top-left.
 * let d = pow(base, 1);
 * circle(10, 10, d);
 * 
 * // Left-center.
 * d = pow(base, 2);
 * circle(20, 20, d);
 * 
 * // Right-center.
 * d = pow(base, 3);
 * circle(40, 40, d);
 * 
 * // Bottom-right.
 * d = pow(base, 4);
 * circle(80, 80, d);
 * 
 * describe('A series of circles that grow exponentially from top left to bottom right.');
 * }``pow()` can also be used in shaders with p5.strands. The following example
 * uses `pow()` to create a gamma curve effect on colors in a shader.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere with colors that shift with a power curve.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.0005 to slow it.
 * let t = millis() * 0.0005;
 * 
 * // pow(t, 2) squares the time value: it starts slow then accelerates.
 * let value = pow(t, 2);
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let deepBlue = [0, 0.1, 0.5, 1];
 * let gold = [1, 0.8, 0, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between deepBlue (when value = 0) and gold (when value = 1).
 * // Because pow() accelerates, the color transition gets faster over time.
 * finalColor.set(mix(deepBlue, gold, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param n base of the exponential expression.
 * @param e power by which to raise the base.
 * @returns n^e.
 */
function pow(n: number, e: number): number;

/**
 * Translates the coordinate system.
 * 
 * By default, the origin `(0, 0)` is at the sketch's top-left corner in 2D
 * mode and center in WebGL mode. The `translate()` function shifts the origin
 * to a different position. Everything drawn after `translate()` is called
 * will appear to be shifted. There are two ways to call `translate()` with
 * parameters that set the origin's position.
 * 
 * The first way to call `translate()` uses numbers to set the amount of
 * translation. The first two parameters, `x` and `y`, set the amount to
 * translate along the positive x- and y-axes. For example, calling
 * `translate(20, 30)` translates the origin 20 pixels along the x-axis and 30
 * pixels along the y-axis. The third parameter, `z`, is optional. It sets the
 * amount to translate along the positive z-axis. For example, calling
 * `translate(20, 30, 40)` translates the origin 20 pixels along the x-axis,
 * 30 pixels along the y-axis, and 40 pixels along the z-axis.
 * 
 * The second way to call `translate()` uses a
 * <a href="#/p5.Vector">p5.Vector</a> object to set the amount of
 * translation. For example, calling `translate(myVector)` uses the x-, y-,
 * and z-components of `myVector` to set the amount to translate along the x-,
 * y-, and z-axes. Doing so is the same as calling
 * `translate(myVector.x, myVector.y, myVector.z)`.
 * 
 * By default, transformations accumulate. For example, calling
 * `translate(10, 0)` twice has the same effect as calling
 * `translate(20, 0)` once. The <a href="#/p5/push">push()</a> and
 * <a href="#/p5/pop">pop()</a> functions can be used to isolate
 * transformations within distinct drawing groups.
 * 
 * Note: Transformations are reset at the beginning of the draw loop. Calling
 * `translate(10, 0)` inside the <a href="#/p5/draw">draw()</a> function won't
 * cause shapes to move continuously.
 * @param x amount to translate along the positive x-axis.
 * @param y amount to translate along the positive y-axis.
 * @param z amount to translate along the positive z-axis.
 */
function translate(x: number, y: number, z?: number): void;
function translate(vector: P5.Vector): void;

/**
 * Tints images using a color.
 * 
 * The version of `tint()` with one parameter interprets it one of four ways.
 * If the parameter is a number, it's interpreted as a grayscale value. If the
 * parameter is a string, it's interpreted as a CSS color string. An array of
 * `[R, G, B, A]` values or a <a href="#/p5.Color">p5.Color</a> object can
 * also be used to set the tint color.
 * 
 * The version of `tint()` with two parameters uses the first one as a
 * grayscale value and the second as an alpha value. For example, calling
 * `tint(255, 128)` will make an image 50% transparent.
 * 
 * The version of `tint()` with three parameters interprets them as RGB or
 * HSB values, depending on the current
 * <a href="#/p5/colorMode">colorMode()</a>. The optional fourth parameter
 * sets the alpha value. For example, `tint(255, 0, 0, 100)` will give images
 * a red tint and make them transparent.
 * 
 * Calling `tint()` without an argument returns the current tint as a
 * <a href="#/p5.Color">p5.Color</a> object.
 * @param v1 red or hue value.
 * @param v2 green or saturation value.
 * @param v3 blue or brightness.
 * @returns the current tint color
 */
function tint(v1: number, v2: number, v3: number, alpha?: number): P5.Color;
function tint(value: string): P5.Color;
function tint(gray: number, alpha?: number): P5.Color;
function tint(values: number[]): P5.Color;
function tint(color: P5.Color): P5.Color;
function tint(): P5.Color;

/**
 * Creates a new <a href="#/p5.PrintWriter">p5.PrintWriter</a> object.
 * 
 * <a href="#/p5.PrintWriter">p5.PrintWriter</a> objects provide a way to
 * save a sequence of text data, called the print stream, to the user's
 * computer. They're low-level objects that enable precise control of text
 * output. Functions such as
 * <a href="#/p5/saveStrings">saveStrings()</a> and
 * <a href="#/p5/saveJSON">saveJSON()</a> are easier to use for simple file
 * saving.
 * 
 * The first parameter, `filename`, is the name of the file to be written. If
 * a string is passed, as in `createWriter('words.txt')`, a new
 * <a href="#/p5.PrintWriter">p5.PrintWriter</a> object will be created that
 * writes to a file named `words.txt`.
 * 
 * The second parameter, `extension`, is optional. If a string is passed, as
 * in `createWriter('words', 'csv')`, the first parameter will be interpreted
 * as the file name and the second parameter as the extension.
 * @param name name of the file to create.
 * @param extension format to use for the file.
 * @returns stream for writing data.
 */
function createWriter(name: string, extension?: string): P5.PrintWriter;

/**
 * Creates a light that shines from a point in one direction.
 * 
 * Spot lights are like flashlights that shine in one direction creating a
 * cone of light. The shape of the cone can be controlled using the angle and
 * concentration parameters. A maximum of 5 spot lights can be active at once.
 * 
 * There are eight ways to call `spotLight()` with parameters to set the
 * light’s color, position, direction. For example,
 * `spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0)` creates a red `(255, 0, 0)` light
 * at the origin `(0, 0, 0)` that points to the right `(1, 0, 0)`.
 * 
 * The `angle` parameter is optional. It sets the radius of the light cone.
 * For example, `spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16)` creates a
 * red `(255, 0, 0)` light at the origin `(0, 0, 0)` that points to the right
 * `(1, 0, 0)` with an angle of `PI / 16` radians. By default, `angle` is
 * `PI / 3` radians.
 * 
 * The `concentration` parameter is also optional. It focuses the light
 * towards the center of the light cone. For example,
 * `spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16, 50)` creates a red
 * `(255, 0, 0)` light at the origin `(0, 0, 0)` that points to the right
 * `(1, 0, 0)` with an angle of `PI / 16` radians at concentration of 50. By
 * default, `concentration` is 100.
 * @param v1 red or hue value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 * @param v2 green or saturation value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 * @param v3 blue, brightness, or lightness value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 * @param x x-coordinate of the light.
 * @param y y-coordinate of the light.
 * @param z z-coordinate of the light.
 * @param rx x-component of light direction between -1 and 1.
 * @param ry y-component of light direction between -1 and 1.
 * @param rz z-component of light direction between -1 and 1.
 * @param angle angle of the light cone. Defaults to `PI / 3`.
 * @param concentration concentration of the light. Defaults to 100.
 */
function spotLight(v1: number, v2: number, v3: number, x: number, y: number, z: number, rx: number, ry: number, rz: number, angle?: number, concentration?: number): void;
function spotLight(color: P5.Color | number[] | string, position: P5.Vector, direction: P5.Vector, angle?: number, concentration?: number): void;
function spotLight(v1: number, v2: number, v3: number, position: P5.Vector, direction: P5.Vector, angle?: number, concentration?: number): void;
function spotLight(color: P5.Color | number[] | string, x: number, y: number, z: number, direction: P5.Vector, angle?: number, concentration?: number): void;
function spotLight(color: P5.Color | number[] | string, position: P5.Vector, rx: number, ry: number, rz: number, angle?: number, concentration?: number): void;
function spotLight(v1: number, v2: number, v3: number, x: number, y: number, z: number, direction: P5.Vector, angle?: number, concentration?: number): void;
function spotLight(v1: number, v2: number, v3: number, position: P5.Vector, rx: number, ry: number, rz: number, angle?: number, concentration?: number): void;
function spotLight(color: P5.Color | number[] | string, x: number, y: number, z: number, rx: number, ry: number, rz: number, angle?: number, concentration?: number): void;

/**
 * Sets the color used to fill shapes.
 * 
 * Calling `fill(255, 165, 0)` or `fill('orange')` means all shapes drawn
 * after the fill command will be filled with the color orange.
 * 
 * The version of `fill()` with one parameter interprets the value one of
 * three ways. If the parameter is a `Number`, it's interpreted as a grayscale
 * value. If the parameter is a `String`, it's interpreted as a CSS color
 * string. A <a href="#/p5.Color">p5.Color</a> object can also be provided to
 * set the fill color.
 * 
 * The version of `fill()` with three parameters interprets them as RGB, HSB,
 * or HSL colors, depending on the current
 * <a href="#/p5/colorMode">colorMode()</a>. The default color space is RGB,
 * with each value in the range from 0 to 255.
 * 
 * The version of `fill()` with four parameters interprets them as `RGBA`, `HSBA`,
 * or `HSLA` colors, depending on the current <a href="#/p5/colorMode">colorMode()</a>. The last parameter
 * sets the alpha (transparency) value.
 * 
 * Calling `fill()` without an argument returns the current fill as a <a href="#/p5.Color">p5.Color</a> object.
 * @param v1 red value if color mode is RGB or hue value if color mode is HSB.
 * @param v2 green value if color mode is RGB or saturation value if color mode is HSB.
 * @param v3 blue value if color mode is RGB or brightness value if color mode is HSB.
 * @param alpha alpha value, controls transparency (0 - transparent, 255 - opaque).
 * @returns the current fill color.
 */
function fill(v1: number, v2: number, v3: number, alpha?: number): P5.Color;
function fill(value: string): P5.Color;
function fill(gray: number, alpha?: number): P5.Color;
function fill(values: number[]): P5.Color;
function fill(color: P5.Color): P5.Color;
function fill(): P5.Color;

/**
 * Draws a triangle.
 * 
 * A triangle is a three-sided shape defined by three points. The
 * first two parameters specify the triangle's first point `(x1, y1)`. The
 * middle two parameters specify its second point `(x2, y2)`. And the last two
 * parameters specify its third point `(x3, y3)`.
 * @param x1 x-coordinate of the first point.
 * @param y1 y-coordinate of the first point.
 * @param x2 x-coordinate of the second point.
 * @param y2 y-coordinate of the second point.
 * @param x3 x-coordinate of the third point.
 * @param y3 y-coordinate of the third point.
 */
function triangle(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void;

/**
 * Draws text to the canvas.
 * 
 * The first parameter, `str`, is the text to be drawn. The second and third
 * parameters, `x` and `y`, set the coordinates of the text's bottom-left
 * corner. See <a href="#/p5/textAlign">textAlign()</a> for other ways to
 * align text.
 * 
 * The fourth and fifth parameters, `maxWidth` and `maxHeight`, are optional.
 * They set the dimensions of the invisible rectangle containing the text. By
 * default, they set its  maximum width and height. See
 * <a href="#/p5/rectMode">rectMode()</a> for other ways to define the
 * rectangular text box. Text will wrap to fit within the text box. Text
 * outside of the box won't be drawn.
 * 
 * Text can be styled a few ways. Call the <a href="#/p5/fill">fill()</a>
 * function to set the text's fill color. Call
 * <a href="#/p5/stroke">stroke()</a> and
 * <a href="#/p5/strokeWeight">strokeWeight()</a> to set the text's outline.
 * Call <a href="#/p5/textSize">textSize()</a> and
 * <a href="#/p5/textFont">textFont()</a> to set the text's size and font,
 * respectively.
 * 
 * Note: `WEBGL` mode only supports fonts loaded with
 * <a href="#/p5/loadFont">loadFont()</a>. Calling
 * <a href="#/p5/stroke">stroke()</a> has no effect in `WEBGL` mode.
 * @param str text to be displayed.
 * @param x x-coordinate of the text box.
 * @param y y-coordinate of the text box.
 * @param maxWidth maximum width of the text box. See
 * <a href="#/p5/rectMode">rectMode()</a> for
 * other options.
 * @param maxHeight maximum height of the text box. See
 * <a href="#/p5/rectMode">rectMode()</a> for
 * other options.
 */
function text(str: string | object | any[] | number | boolean, x: number, y: number, maxWidth?: number, maxHeight?: number): void;

/**
 * Sets the way text is aligned when <a href="#/p5/text">text()</a> is called.
 * 
 * By default, calling `text('hi', 10, 20)` places the bottom-left corner of
 * the text's bounding box at (10, 20).
 * 
 * The first parameter, `horizAlign`, changes the way
 * <a href="#/p5/text">text()</a> interprets x-coordinates. By default, the
 * x-coordinate sets the left edge of the bounding box. `textAlign()` accepts
 * the following values for `horizAlign`: `LEFT`, `CENTER`, or `RIGHT`.
 * 
 * The second parameter, `vertAlign`, is optional. It changes the way
 * <a href="#/p5/text">text()</a> interprets y-coordinates. By default, the
 * y-coordinate sets the bottom edge of the bounding box. `textAlign()`
 * accepts the following values for `vertAlign`: `TOP`, `BOTTOM`, `CENTER`,
 * or `BASELINE`.
 * 
 * Calling `textAlign()` without arguments returns the current alignment settings.
 * @param horizAlign horizontal alignment
 * @param vertAlign vertical alignment
 * @returns If no arguments are provided, returns an object with current horizontal and vertical alignment
 */
function textAlign(horizAlign?: typeof P5.LEFT | typeof P5.CENTER | typeof P5.RIGHT, vertAlign?: typeof P5.TOP | typeof P5.BOTTOM | typeof P5.CENTER | typeof P5.BASELINE): object;

/**
 * Returns the ascent of the text.
 * 
 * The `textAscent()` function calculates the distance from the baseline to the
 * highest point of the current font. This value represents the ascent, which is essential
 * for determining the overall height of the text along with `textDescent()`. If
 * a text string is provided as an argument, the ascent is calculated based on that specific
 * string; otherwise, the ascent of the current font is returned.
 * @param txt (Optional) The text string for which to calculate the ascent.
 * If omitted, the function returns the ascent for the current font.
 * @returns The ascent value in pixels.
 */
function textAscent(txt?: string): number;

/**
 * Returns the descent of the text.
 * 
 * The `textDescent()` function calculates the distance from the baseline to the
 * lowest point of the current font. This value represents the descent, which, when combined
 * with the ascent (from `textAscent()`), determines the overall vertical span of the text.
 * If a text string is provided as an argument, the descent is calculated based on that specific string;
 * otherwise, the descent of the current font is returned.
 * @param txt (Optional) The text string for which to calculate the descent.
 * If omitted, the function returns the descent for the current font.
 * @returns The descent value in pixels.
 */
function textDescent(txt?: string): number;

/**
 * Sets the spacing between lines of text when
 * <a href="#/p5/text">text()</a> is called.
 * 
 * Note: Spacing is measured in pixels.
 * 
 * Calling `textLeading()` without an argument returns the current spacing.
 * @param leading The new text leading to apply, in pixels
 * @returns If no arguments are provided, the current text leading
 */
function textLeading(leading?: number): number;

/**
 * Sets the font used by the <a href="#/p5/text">text()</a> function.
 * 
 * The first parameter, `font`, sets the font. `textFont()` recognizes either
 * a <a href="#/p5.Font">p5.Font</a> object or a string with the name of a
 * system font. For example, `'Courier New'`.
 * 
 * The second parameter, `size`, is optional. It sets the font size in pixels.
 * This has the same effect as calling <a href="#/p5/textSize">textSize()</a>.
 * 
 * Calling `textFont()` without arguments returns the current font.
 * 
 * Note: `WEBGL` mode only supports fonts loaded with
 * <a href="#/p5/loadFont">loadFont()</a>.
 * @param font The font to apply
 * @param size An optional text size to apply.
 * @returns If no arguments are provided, returns the current font
 */
function textFont(font?: P5.Font | string | object, size?: number): string | P5.Font;

/**
 * Sets or gets the current text size.
 * 
 * The `textSize()` function is used to specify the size of the text
 * that will be rendered on the canvas. When called with an argument, it sets the
 * text size to the specified value (which can be a number representing pixels or a
 * CSS-style string, e.g., '32px', '2em'). When called without an argument, it
 * returns the current text size in pixels.
 * @param size The size to set for the text.
 * @returns If no arguments are provided, the current text size in pixels.
 */
function textSize(size: number): number;
function textSize(): number;

/**
 * Sets the style for system fonts when
 * <a href="#/p5/text">text()</a> is called.
 * 
 * The parameter, `style`, can be either `NORMAL`, `ITALIC`, `BOLD`, or
 * `BOLDITALIC`.
 * 
 * `textStyle()` may be overridden by CSS styling. This function doesn't
 * affect fonts loaded with <a href="#/p5/loadFont">loadFont()</a>.
 * @param style The style to use
 * @returns If no arguments are provided, the current style
 */
function textStyle(style: typeof P5.NORMAL | typeof P5.ITALIC | typeof P5.BOLD | typeof P5.BOLDITALIC): typeof P5.NORMAL | typeof P5.ITALIC | typeof P5.BOLD | typeof P5.BOLDITALIC;
function textStyle(): typeof P5.NORMAL | typeof P5.BOLD | typeof P5.ITALIC | typeof P5.BOLDITALIC;

/**
 * Calculates the width of the given text string in pixels.
 * 
 * The `textWidth()` function processes the provided text string to determine its tight bounding box
 * based on the current text properties such as font, textSize, and textStyle. Internally, it splits
 * the text into individual lines (if line breaks are present) and computes the bounding box for each
 * line using the renderer’s measurement functions. The final width is determined as the maximum width
 * among all these lines.
 * 
 * For example, if the text contains multiple lines due to wrapping or explicit line breaks, textWidth()
 * will return the width of the longest line.
 * 
 * Note: In p5.js 2.0+, leading and trailing spaces are ignored.
 * `textWidth("  Hello  ")` returns the same width as `textWidth("Hello")`.
 * @param text The text to measure
 * @returns The width of the text
 */
function textWidth(text: string): number;

/**
 * Sets the style for wrapping text when
 * <a href="#/p5/text">text()</a> is called.
 * 
 * The parameter, `style`, can be one of the following values:
 * 
 * `WORD` starts new lines of text at spaces. If a string of text doesn't
 * have spaces, it may overflow the text box and the canvas. This is the
 * default style.
 * 
 * `CHAR` starts new lines as needed to stay within the text box.
 * 
 * `textWrap()` only works when the maximum width is set for a text box. For
 * example, calling `text('Have a wonderful day', 0, 10, 100)` sets the
 * maximum width to 100 pixels.
 * 
 * Calling `textWrap()` without an argument returns the current style.
 * @param style The wrapping style to use
 * @returns If no arguments are provided, the current wrapping style
 */
function textWrap(style: typeof P5.WORD | typeof P5.CHAR): typeof P5.CHAR | typeof P5.WORD;
function textWrap(): typeof P5.CHAR | typeof P5.WORD;

/**
 * Computes the tight bounding box for a block of text.
 * 
 * The `textBounds()` function calculates the precise pixel boundaries that enclose
 * the rendered text based on the current text properties (such as font, textSize, textStyle, and
 * alignment). If the text spans multiple lines (due to line breaks or wrapping), the function
 * measures each line individually and then aggregates these measurements into a single bounding box.
 * The resulting object contains the x and y coordinates along with the width (w) and height (h)
 * of the text block.
 * @param str The text string to measure.
 * @param x The x-coordinate where the text is drawn.
 * @param y The y-coordinate where the text is drawn.
 * @param width (Optional) The maximum width available for the text block.
 * When specified, the text may be wrapped to fit within this width.
 * @param height (Optional) The maximum height available for the text block.
 * Any lines exceeding this height will be truncated.
 * @returns An object with properties `x`, `y`, `w`, and `h` that represent the tight
 * bounding box of the rendered text.
 */
function textBounds(str: string, x: number, y: number, width?: number, height?: number): object;

/**
 * Sets or gets the text drawing direction.
 * 
 * The <code>textDirection()</code> function allows you to specify the direction in which text is
 * rendered on the canvas. When provided with a <code>direction</code> parameter (such as "ltr" for
 * left-to-right, "rtl" for right-to-left, or "inherit"), it updates the renderer's state with that
 * value and applies the new setting. When called without any arguments, it returns the current text
 * direction. This function is particularly useful for rendering text in languages with different
 * writing directions.
 * @param direction The text direction to set ("ltr", "rtl", or "inherit").
 * @returns If no arguments are provided, the current text direction, either "ltr", "rtl", or "inherit"
 */
function textDirection(direction: string): string;
function textDirection(): string;

/**
 * Sets or gets a single text property for the renderer.
 * 
 * The `textProperty()` function allows you to set or retrieve a single text-related property,
 * such as `textAlign`, `textBaseline`, `fontStyle`, or any other property
 * that may be part of the renderer's state, its drawing context, or the canvas style.
 * 
 * When called with a `prop` and a `value`, the function sets the property by checking
 * for its existence in the renderer's state, the drawing context, or the canvas style. If the property is
 * successfully modified, the function applies the updated text properties. If called with only the
 * `prop` parameter, the function returns the current value of that property.
 * @param prop The name of the text property to set or get.
 * @param value The value to set for the specified text property. If omitted, the current
 * value of the property is returned
 * @returns If no arguments are provided, the current value of the specified text property
 */
function textProperty(prop: string, value: any): void;
function textProperty(prop: string): void;

/**
 * Gets or sets text properties in batch, similar to calling `textProperty()`
 * multiple times.
 * 
 * If an object is passed in, `textProperty(key, value)` will be called for you
 * on every key/value pair in the object.
 * 
 * If no arguments are passed in, an object will be returned with all the current
 * properties.
 * @param properties An object whose keys are properties to set, and whose
 * values are what they should be set to.
 * @returns An object with all the possible properties and their current values.
 */
function textProperties(properties: object): object;
function textProperties(): object;

/**
 * Computes a generic (non-tight) bounding box for a block of text.
 * 
 * The `fontBounds()` function calculates the bounding box for the text based on the
 * font's intrinsic metrics (such as `fontBoundingBoxAscent` and
 * `fontBoundingBoxDescent`). Unlike `textBounds()`, which measures the exact
 * pixel boundaries of the rendered text, `fontBounds()` provides a looser measurement
 * derived from the font’s default spacing. This measurement is useful for layout purposes where
 * a consistent approximation of the text's dimensions is desired.
 * @param str The text string to measure.
 * @param x The x-coordinate where the text is drawn.
 * @param y The y-coordinate where the text is drawn.
 * @param width (Optional) The maximum width available for the text block.
 * When specified, the text may be wrapped to fit within this width.
 * @param height (Optional) The maximum height available for the text block.
 * Any lines exceeding this height will be truncated.
 * @returns An object with properties `x`, `y`, `w`, and `h` representing the loose
 * bounding box of the text based on the font's intrinsic metrics.
 */
function fontBounds(str: string, x: number, y: number, width?: number, height?: number): object;

/**
 * Returns the loose width of a text string based on the current font.
 * 
 * The `fontWidth()` function measures the width of the provided text string using
 * the font's default measurement (i.e., the width property from the text metrics returned by
 * the browser). Unlike `textWidth()`, which calculates the tight pixel boundaries
 * of the text glyphs, `fontWidth()` uses the font's intrinsic spacing, which may include
 * additional space for character spacing and kerning. This makes it useful for scenarios where
 * an approximate width is sufficient for layout and positioning.
 * @param theText The text string to measure.
 * @returns The loose width of the text in pixels.
 */
function fontWidth(theText: string): number;

/**
 * Returns the loose ascent of the text based on the font's intrinsic metrics.
 * 
 * The `fontAscent()` function calculates the ascent of the text using the font's
 * intrinsic metrics (e.g., `fontBoundingBoxAscent`). This value represents the space
 * above the baseline that the font inherently occupies, and is useful for layout purposes when
 * an approximate vertical measurement is required.
 * @returns The loose ascent value in pixels.
 */
function fontAscent(): number;

/**
 * Returns the loose descent of the text based on the font's intrinsic metrics.
 * 
 * The `fontDescent()` function calculates the descent of the text using the font's
 * intrinsic metrics (e.g., `fontBoundingBoxDescent`). This value represents the space
 * below the baseline that the font inherently occupies, and is useful for layout purposes when
 * an approximate vertical measurement is required.
 * @returns The loose descent value in pixels.
 */
function fontDescent(): number;

/**
 * Sets or gets the current font weight.
 * 
 * The <code>textWeight()</code> function is used to specify the weight (thickness) of the text.
 * When a numeric value is provided, it sets the font weight to that value and updates the
 * rendering properties accordingly (including the "font-variation-settings" on the canvas style).
 * When called without an argument, it returns the current font weight setting.
 * @param weight The numeric weight value to set for the text.
 * @returns If no arguments are provided, the current font weight
 */
function textWeight(weight: number): number;
function textWeight(): number;

/**
 * Removes the current tint set by <a href="#/p5/tint">tint()</a>.
 * 
 * `noTint()` restores images to their original colors.
 */
function noTint(): void;

/**
 * Draws an ellipsoid.
 * 
 * An ellipsoid is a 3D shape with triangular faces that connect to form a
 * round surface. Ellipsoids with few faces look like crystals. Ellipsoids
 * with many faces have smooth surfaces and look like eggs. `ellipsoid()`
 * defines a shape by its radii. This is different from
 * <a href="#/p5/ellipse">ellipse()</a> which uses diameters
 * (width and height).
 * 
 * The first parameter, `radiusX`, is optional. If a `Number` is passed, as in
 * `ellipsoid(20)`, it sets the radius of the ellipsoid along the x-axis. By
 * default, `radiusX` is 50.
 * 
 * The second parameter, `radiusY`, is also optional. If a `Number` is passed,
 * as in `ellipsoid(20, 30)`, it sets the ellipsoid’s radius along the y-axis.
 * By default, `radiusY` is set to the ellipsoid’s `radiusX`.
 * 
 * The third parameter, `radiusZ`, is also optional. If a `Number` is passed,
 * as in `ellipsoid(20, 30, 40)`, it sets the ellipsoid’s radius along the
 * z-axis. By default, `radiusZ` is set to the ellipsoid’s `radiusY`.
 * 
 * The fourth parameter, `detailX`, is also optional. If a `Number` is passed,
 * as in `ellipsoid(20, 30, 40, 5)`, it sets the number of triangle
 * subdivisions to use along the x-axis. All 3D shapes are made by connecting
 * triangles to form their surfaces. By default, `detailX` is 24.
 * 
 * The fifth parameter, `detailY`, is also optional. If a `Number` is passed,
 * as in `ellipsoid(20, 30, 40, 5, 7)`, it sets the number of triangle
 * subdivisions to use along the y-axis. All 3D shapes are made by connecting
 * triangles to form their surfaces. By default, `detailY` is 16.
 * 
 * Note: `ellipsoid()` can only be used in WebGL mode.
 * @param radiusX radius of the ellipsoid along the x-axis. Defaults to 50.
 * @param radiusY radius of the ellipsoid along the y-axis. Defaults to `radiusX`.
 * @param radiusZ radius of the ellipsoid along the z-axis. Defaults to `radiusY`.
 * @param detailX number of triangle subdivisions along the x-axis. Defaults to 24.
 * @param detailY number of triangle subdivisions along the y-axis. Defaults to 16.
 */
function ellipsoid(radiusX?: number, radiusY?: number, radiusZ?: number, detailX?: number, detailY?: number): void;

/**
 * Calculates the integer closest to a number.
 * 
 * For example, `round(133.8)` returns the value 134.
 * 
 * The second parameter, `decimals`, is optional. It sets the number of
 * decimal places to use when rounding. For example, `round(12.34, 1)` returns
 * 12.3. `decimals` is 0 by default.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Round a number.
 * let x = round(4.2);
 * 
 * // Style the text.
 * textAlign(CENTER);
 * textSize(16);
 * 
 * // Display the rounded number.
 * text(x, 50, 50);
 * 
 * describe('The number 4 written in middle of the canvas.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Round a number to 2 decimal places.
 * let x = round(12.782383, 2);
 * 
 * // Style the text.
 * textAlign(CENTER);
 * textSize(16);
 * 
 * // Display the rounded number.
 * text(x, 50, 50);
 * 
 * describe('The number 12.78 written in middle of canvas.');
 * }``round()` can also be used in shaders with p5.strands. The following example
 * uses `round()` to quantize colors in a shader.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere with posterized quantized colors.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
 * let t = millis() * 0.001;
 * 
 * // sin(t) goes between -1 and 1.
 * // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
 * let sinVal = 0.5 + 0.5 * sin(t);
 * 
 * // Multiply by 4 then round to get 5 distinct levels (0, 0.25, 0.5, 0.75, 1).
 * // Divide by 4 to bring the result back to the 0 to 1 range.
 * let value = round(sinVal * 4) / 4;
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let mutedBlue = [0.3, 0.4, 0.7, 1];
 * let rose = [0.8, 0.3, 0.4, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between mutedBlue (when value = 0) and rose (when value = 1).
 * // The round() creates stepped bands of color like a posterization effect.
 * finalColor.set(mix(mutedBlue, rose, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param n number to round.
 * @param decimals number of decimal places to round to, default is 0.
 * @returns rounded number.
 */
function round(n: number, decimals?: number): number;

/**
 * Disables setting the fill color for shapes.
 * 
 * Calling `noFill()` is the same as making the fill completely transparent,
 * as in `fill(0, 0)`. If both <a href="#/p5/noStroke">noStroke()</a> and
 * `noFill()` are called, nothing will be drawn to the screen.
 */
function noFill(): void;

/**
 * Gets the saturation value of a color.
 * 
 * `saturation()` extracts the saturation value from a
 * <a href="/reference/p5/p5.Color/">p5.Color</a> object, an array of color components, or
 * a CSS color string.
 * 
 * Saturation is scaled differently in HSB and HSL. By default, `saturation()`
 * returns a color's HSL saturation in the range 0 to 100. If the
 * <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB or HSL, it returns the
 * saturation value in the given mode.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(50);
 * 
 * // Use HSB color.
 * colorMode(HSB);
 * 
 * // Create a p5.Color object.
 * let c = color(0, 50, 100);
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'satValue' to 50.
 * let satValue = saturation(c);
 * 
 * // Draw the right rectangle.
 * fill(satValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is salmon pink and the right one is dark gray.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(50);
 * 
 * // Use HSB color.
 * colorMode(HSB);
 * 
 * // Create a color array.
 * let c = [0, 50, 100];
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'satValue' to 100.
 * let satValue = saturation(c);
 * 
 * // Draw the right rectangle.
 * fill(satValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(50);
 * 
 * // Use HSB color.
 * colorMode(HSB);
 * 
 * // Create a CSS color string.
 * let c = 'rgb(255, 128, 128)';
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'satValue' to 100.
 * let satValue = saturation(c);
 * 
 * // Draw the right rectangle.
 * fill(satValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(50);
 * 
 * // Use HSL color.
 * colorMode(HSL);
 * 
 * // Create a p5.Color object.
 * let c = color(0, 100, 75);
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'satValue' to 100.
 * let satValue = saturation(c);
 * 
 * // Draw the right rectangle.
 * fill(satValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is salmon pink and the right one is white.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(50);
 * 
 * // Use HSL color with values in the range 0-255.
 * colorMode(HSL, 255);
 * 
 * // Create a p5.Color object.
 * let c = color(0, 255, 191.5);
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'satValue' to 255.
 * let satValue = saturation(c);
 * 
 * // Draw the right rectangle.
 * fill(satValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is salmon pink and the right one is white.');
 * }`In p5.strands shader callbacks, `saturation()` operates on `vec4` values
 * and returns the saturation as a normalized value in the 0–1 range.
 * `colorMode()` has no effect inside shader callbacks.
 * 
 * `let myShader;
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildMaterialShader(myShaderBuilder);
 * }
 * 
 * function myShaderBuilder() {
 * finalColor.begin();
 * let c = color(255, 128, 128);
 * let s = saturation(c);
 * finalColor.set(vec4(s, s, s, 1.0));
 * finalColor.end();
 * }
 * 
 * function draw() {
 * shader(myShader);
 * noStroke();
 * sphere(40);
 * 
 * describe('A sphere shaded in grayscale based on saturation.');
 * }`
 * @param color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
 * color components, or CSS color string.
 * @returns the saturation value
 */
function saturation(color: P5.Color | number[] | string): number;

/**
 * Removes all lights from the sketch.
 * 
 * Calling `noLights()` removes any lights created with
 * <a href="#/p5/lights">lights()</a>,
 * <a href="#/p5/ambientLight">ambientLight()</a>,
 * <a href="#/p5/directionalLight">directionalLight()</a>,
 * <a href="#/p5/pointLight">pointLight()</a>, or
 * <a href="#/p5/spotLight">spotLight()</a>. These functions may be called
 * after `noLights()` to create a new lighting scheme.
 */
function noLights(): void;

/**
 * Sets the <a href="#/p5.Shader">p5.Shader</a> object to apply for images.
 * 
 * This method allows the user to apply a custom shader to images, enabling
 * advanced visual effects such as pixel manipulation, color adjustments,
 * or dynamic behavior. The shader will be applied to the image drawn using
 * the <a href="#/p5/image">image()</a> function.
 * 
 * The shader will be used exclusively for:
 * 
 * - `image()` calls, applying only when drawing 2D images.
 * 
 * - This shader will NOT apply to images used in <a href="#/p5/texture">texture()</a> or other 3D contexts.
 * Any attempts to use the imageShader in these cases will be ignored.
 * @param s <a href="#/p5.Shader">p5.Shader</a> object
 * to apply for images.
 */
function imageShader(s: P5.Shader): void;

/**
 * A function that's called once when a mouse button is released.
 * 
 * Declaring the function `mouseReleased()` sets a code block to run
 * automatically when the user releases a mouse button after having pressed
 * it:
 * 
 * `function mouseReleased() {
 * // Code to run.
 * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
 * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
 * value when `mouseReleased()` is called by p5.js:
 * 
 * `function mouseReleased() {
 * if (mouseX < 50) {
 * // Code to run if the mouse is on the left.
 * }
 * 
 * if (mouseY > 50) {
 * // Code to run if the mouse is near the bottom.
 * }
 * }`The parameter, `event`, is optional. `mouseReleased()` 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 release event:
 * 
 * `function mouseReleased(event) {
 * // Code to run that uses the event.
 * console.log(event);
 * }`On touchscreen devices, `mouseReleased()` will run when a user’s touch
 * ends.
 * 
 * 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.
 * 
 * Note: <a href="#/p5/mousePressed">mousePressed()</a>, `mouseReleased()`,
 * and <a href="#/p5/mouseClicked">mouseClicked()</a> are all related.
 * <a href="#/p5/mousePressed">mousePressed()</a> runs as soon as the user
 * clicks the mouse. `mouseReleased()` runs as soon as the user releases the
 * mouse click. <a href="#/p5/mouseClicked">mouseClicked()</a> runs
 * immediately after `mouseReleased()`.
 * @param event optional `MouseEvent` argument.
 */
function mouseReleased(event?: MouseEvent): void;

/**
 * Writes data to the print stream without adding new lines.
 * 
 * The parameter, `data`, is the data to write. `data` can be a number or
 * string, as in `myWriter.write('hi')`, or an array of numbers and strings,
 * as in `myWriter.write([1, 2, 3])`. A comma will be inserted between array
 * array elements when they're added to the print stream.
 * @param data data to be written as a string, number,
 * or array of strings and numbers.
 */
function write(data: string | number | any[]): void;

/**
 * Disables drawing points, lines, and the outlines of shapes.
 * 
 * Calling `noStroke()` is the same as making the stroke completely transparent,
 * as in `stroke(0, 0)`. If both `noStroke()` and
 * <a href="#/p5/noFill">noFill()</a> are called, nothing will be drawn to the
 * screen.
 */
function noStroke(): void;

/**
 * Creates a radio button element.
 * 
 * The parameter is optional. If a string is passed, as in
 * `let myRadio = createSelect('food')`, then each radio option will
 * have `"food"` as its `name` parameter: `<input name="food"></input>`.
 * If an existing `<div></div>` or `<span></span>`
 * element is passed, as in `let myRadio = createSelect(container)`, it will
 * become the radio button's parent element.
 * 
 * Radio buttons extend the <a href="#/p5.Element">p5.Element</a> class with a few
 * helpful methods for managing options:
 * 
 * - `myRadio.option(value, [label])` adds an option to the menu. The first paremeter, `value`, is a string that sets the option's value and label. The second parameter, `label`, is optional. If provided, it sets the label displayed for the `value`. If an option with `value` already exists, its label is changed and its value is returned.
 * 
 * - `myRadio.value()` returns the currently-selected option's value.
 * 
 * - `myRadio.selected()` returns the currently-selected option.
 * 
 * - `myRadio.selected(value)` selects the given option and returns it as an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement" target="_blank">`HTMLInputElement`</a>.
 * 
 * - `myRadio.disable(shouldDisable)` enables the entire radio button if `true` is passed and disables it if `false` is passed.
 * @param containerElement container HTML Element, either a `<div></div>`
 * or `<span></span>`.
 * @returns new <a href="#/p5.Element">p5.Element</a> object.
 */
function createRadio(containerElement?: object): P5.Element;
function createRadio(name?: string): P5.Element;
function createRadio(): P5.Element;

/**
 * Calculates the square of a number.
 * 
 * Squaring a number means multiplying the number by itself. For example,
 * `sq(3)` evaluates 3 × 3 which is 9. `sq(-3)` evaluates -3 × -3
 * which is also 9. Multiplying two negative numbers produces a positive
 * number. The value returned by `sq()` is always positive.
 * @param n number to square.
 * @returns squared number.
 */
function sq(n: number): number;

/**
 * Creates a `<video>` element for simple audio/video playback.
 * 
 * `createVideo()` returns a new
 * <a href="#/p5.MediaElement">p5.MediaElement</a> object. Videos are shown by
 * default. They can be hidden by calling `video.hide()` and drawn to the
 * canvas using <a href="#/p5/image">image()</a>.
 * 
 * The first parameter, `src`, is the path the video. If a single string is
 * passed, as in `'assets/topsecret.mp4'`, a single video is loaded. An array
 * of strings can be used to load the same video in different formats. For
 * example, `['assets/topsecret.mp4', 'assets/topsecret.ogv', 'assets/topsecret.webm']`.
 * This is useful for ensuring that the video can play across different browsers with
 * different capabilities. See
 * <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats'>MDN</a>
 * for more information about supported formats.
 * 
 * The second parameter, `callback`, is optional. It's a function to call once
 * the video is ready to play.
 * @param src path to a video file, or an array of paths for
 * supporting different browsers.
 * @param callback function to call once the video is ready to play.
 * @returns new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
 */
function createVideo(src?: string | string[], callback?: (video: P5.MediaElement<HTMLVideoElement>) => any): P5.MediaElement<HTMLVideoElement>;

/**
 * Changes the location from which images are drawn when
 * <a href="#/p5/image">image()</a> is called.
 * 
 * By default, the first
 * two parameters of <a href="#/p5/image">image()</a> are the x- and
 * y-coordinates of the image's upper-left corner. The next parameters are
 * its width and height. This is the same as calling `imageMode(CORNER)`.
 * 
 * `imageMode(CORNERS)` also uses the first two parameters of
 * <a href="#/p5/image">image()</a> as the x- and y-coordinates of the image's
 * top-left corner. The third and fourth parameters are the coordinates of its
 * bottom-right corner.
 * 
 * `imageMode(CENTER)` uses the first two parameters of
 * <a href="#/p5/image">image()</a> as the x- and y-coordinates of the image's
 * center. The next parameters are its width and height.
 * 
 * Calling `imageMode()` without an argument returns the current image mode, either `CORNER`, `CORNERS`, or `CENTER`.
 * @param mode either CORNER, CORNERS, or CENTER.
 * @returns the current image mode
 */
function imageMode(mode: typeof P5.CORNER | typeof P5.CORNERS | typeof P5.CENTER): typeof P5.CORNER | typeof P5.CORNERS | typeof P5.CENTER;
function imageMode(): typeof P5.CORNER | typeof P5.CORNERS | typeof P5.CENTER;

/**
 * Loads a font and creates a <a href="#/p5.Font">p5.Font</a> object.
 * `loadFont()` can load fonts in either .otf or .ttf format. Loaded fonts can
 * be used to style text on the canvas and in HTML elements.
 * 
 * The first parameter, `path`, is the path to a font file.
 * Paths to local files should be relative. For example,
 * `'assets/inconsolata.otf'`. The Inconsolata font used in the following
 * examples can be downloaded for free
 * <a href="https://www.fontsquirrel.com/fonts/inconsolata" target="_blank">here</a>.
 * Paths to remote files should be URLs. For example,
 * `'https://example.com/inconsolata.otf'`. URLs may be blocked due to browser
 * security.
 * 
 * In 2D mode, `path` can take on a few other forms. It could be a path to a CSS file,
 * such as one from <a href="https://fonts.google.com/">Google Fonts.</a> It could also
 * be a string with a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face">CSS `@font-face` declaration.</a>
 * 
 * The second parameter, `successCallback`, is optional. If a function is
 * passed, it will be called once the font has loaded. The callback function
 * may use the new <a href="#/p5.Font">p5.Font</a> object if needed.
 * 
 * The third parameter, `failureCallback`, is also optional. If a function is
 * passed, it will be called if the font fails to load. The callback function
 * may use the error
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank">Event</a>
 * object if needed.
 * 
 * Fonts can take time to load. `await` the result of `loadFont()` in
 * <a href="#/p5/setup">setup()</a> before using the result.
 * @param path path of the font or CSS file to be loaded, or a CSS `@font-face` string.
 * @param name An alias that can be used for this font in `textFont()`. Defaults to the name in the font's metadata.
 * @param options An optional object with extra CSS font face descriptors, or p5.js font settings.
 * @param successCallback function called with the
 * <a href="#/p5.Font">p5.Font</a> object after it
 * loads.
 * @param failureCallback function called with the error
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_blank">Event</a>
 * object if the font fails to load.
 * @returns <a href="#/p5.Font">p5.Font</a> object.
 */
function loadFont(path: string, name?: string, options?: { sets?: string | string[] }, successCallback?: (font: P5.Font) => any, failureCallback?: Function): Promise<P5.Font>;
function loadFont(path: string, successCallback?: (font: P5.Font) => any, failureCallback?: Function): Promise<P5.Font>;

/**
 * Creates a hidden `<audio>` element for simple audio playback.
 * 
 * `createAudio()` returns a new
 * <a href="#/p5.MediaElement">p5.MediaElement</a> object.
 * 
 * The first parameter, `src`, is the path the audio. If a single string is
 * passed, as in `'assets/audio.mp3'`, a single audio is loaded. An array
 * of strings can be used to load the same audio in different formats. For
 * example, `['assets/audio.mp3', 'assets/video.wav']`.
 * This is useful for ensuring that the audio can play across different
 * browsers with different capabilities. See
 * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats" target="_blank">MDN</a>
 * for more information about supported formats.
 * 
 * The second parameter, `callback`, is optional. It's a function to call once
 * the audio is ready to play.
 * @param src path to an audio file, or an array of paths
 * for supporting different browsers.
 * @param callback function to call once the audio is ready to play.
 * @returns new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
 */
function createAudio(src?: string | string[], callback?: (video: P5.MediaElement<HTMLAudioElement>) => any): P5.MediaElement<HTMLAudioElement>;

/**
 * Draws a torus.
 * 
 * A torus is a 3D shape with triangular faces that connect to form a ring.
 * Toruses with few faces look flattened. Toruses with many faces have smooth
 * surfaces.
 * 
 * The first parameter, `radius`, is optional. If a `Number` is passed, as in
 * `torus(30)`, it sets the radius of the ring. By default, `radius` is 50.
 * 
 * The second parameter, `tubeRadius`, is also optional. If a `Number` is
 * passed, as in `torus(30, 15)`, it sets the radius of the tube. By default,
 * `tubeRadius` is 10.
 * 
 * The third parameter, `detailX`, is also optional. If a `Number` is passed,
 * as in `torus(30, 15, 5)`, it sets the number of edges used to draw the hole
 * of the torus. Using more edges makes the hole look more like a circle. By
 * default, `detailX` is 24.
 * 
 * The fourth parameter, `detailY`, is also optional. If a `Number` is passed,
 * as in `torus(30, 15, 5, 7)`, it sets the number of triangle subdivisions to
 * use while filling in the torus’ height. By default, `detailY` is 16.
 * 
 * Note: `torus()` can only be used in WebGL mode.
 * @param radius radius of the torus. Defaults to 50.
 * @param tubeRadius radius of the tube. Defaults to 10.
 * @param detailX number of edges that form the hole. Defaults to 24.
 * @param detailY number of triangle subdivisions along the y-axis. Defaults to 16.
 */
function torus(radius?: number, tubeRadius?: number, detailX?: number, detailY?: number): void;

/**
 * Calculates the square root of a number.
 * 
 * A number's square root can be multiplied by itself to produce the original
 * number. For example, `sqrt(9)` returns 3 because 3 × 3 = 9. `sqrt()`
 * always returns a positive value. `sqrt()` doesn't work with negative arguments
 * such as `sqrt(-9)`.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Top-left.
 * let d = sqrt(16);
 * circle(33, 33, d);
 * 
 * // Bottom-right.
 * d = sqrt(1600);
 * circle(67, 67, d);
 * 
 * describe('Two white circles. The circle at the top-left is small. The circle at the bottom-right is ten times larger.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * describe('A series of black dots that get higher slowly from left to right.');
 * }
 * 
 * function draw() {
 * // Invert the y-axis.
 * scale(1, -1);
 * translate(0, -100);
 * 
 * // Calculate the coordinates.
 * let x = frameCount;
 * let y = 5 * sqrt(x);
 * 
 * // Draw the point.
 * point(x, y);
 * }``sqrt()` can also be used in shaders with p5.strands. The following example
 * uses `sqrt()` to create a smooth ease-out curve on color and size.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere that grows and shifts from navy to orange with an ease-out curve.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
 * let t = millis() * 0.001;
 * 
 * // sin(t) goes between -1 and 1.
 * // 0.5 + 0.5 * sin(t) remaps this to the 0 to 1 range.
 * let sinVal = 0.5 + 0.5 * sin(t);
 * 
 * // sqrt(sinVal) creates an ease-out curve: fast start, slow finish.
 * // Since sinVal is in [0,1], sqrt() stays in [0,1].
 * let value = sqrt(sinVal);
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let navy = [0, 0.1, 0.4, 1];
 * let brightOrange = [1, 0.6, 0, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between navy (when value = 0) and brightOrange (when value = 1).
 * // The sqrt() ease-out makes the color change fast at first, then slow down.
 * finalColor.set(mix(navy, brightOrange, value));
 * 
 * finalColor.end();
 * }
 * 
 * function drawShape() {
 * let t = millis() * 0.001;
 * let sinVal = 0.5 + 0.5 * sin(t);
 * let size = 10 + sqrt(sinVal) * 30;
 * sphere(size);
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * drawShape();
 * }`
 * @param n non-negative number to square root.
 * @returns square root of number.
 */
function sqrt(n: number): number;

/**
 * Gets the brightness value of a color.
 * 
 * `brightness()` extracts the HSB brightness value from a
 * <a href="/reference/p5/p5.Color/">p5.Color</a> object, an array of color components, or
 * a CSS color string.
 * 
 * By default, `brightness()` returns a color's HSB brightness in the range 0
 * to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSB, it
 * returns the brightness value in the given range.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Use HSB color.
 * colorMode(HSB);
 * 
 * // Create a p5.Color object.
 * let c = color(0, 50, 100);
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'brightValue' to 100.
 * let brightValue = brightness(c);
 * 
 * // Draw the right rectangle.
 * fill(brightValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is salmon pink and the right one is white.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Use HSB color.
 * colorMode(HSB);
 * 
 * // Create a color array.
 * let c = [0, 50, 100];
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'brightValue' to 100.
 * let brightValue = brightness(c);
 * 
 * // Draw the right rectangle.
 * fill(brightValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is salmon pink and the right one is white.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Use HSB color.
 * colorMode(HSB);
 * 
 * // Create a CSS color string.
 * let c = 'rgb(255, 128, 128)';
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'brightValue' to 100.
 * let brightValue = brightness(c);
 * 
 * // Draw the right rectangle.
 * fill(brightValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is salmon pink and the right one is white.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Use HSB color with values in the range 0-255.
 * colorMode(HSB, 255);
 * 
 * // Create a p5.Color object.
 * let c = color(0, 127, 255);
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'brightValue' to 255.
 * let brightValue = brightness(c);
 * 
 * // Draw the right rectangle.
 * fill(brightValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is salmon pink and the right one is white.');
 * }`In p5.strands shader callbacks, `brightness()` operates on `vec4` values
 * and returns the brightness as a normalized value in the 0–1 range.
 * `colorMode()` has no effect inside shader callbacks.
 * 
 * `let myShader;
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildMaterialShader(myShaderBuilder);
 * }
 * 
 * function myShaderBuilder() {
 * finalColor.begin();
 * let c = color(0, 50, 100);
 * let b = brightness(c);
 * finalColor.set(vec4(b, b, b, 1.0));
 * finalColor.end();
 * }
 * 
 * function draw() {
 * shader(myShader);
 * noStroke();
 * sphere(40);
 * 
 * describe('A sphere shaded in grayscale based on brightness.');
 * }`
 * @param color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
 * color components, or CSS color string.
 * @returns the brightness value.
 */
function brightness(color: P5.Color | number[] | string): number;

/**
 * Saves the file and closes the print stream.
 */
function close(): void;

/**
 * A function that's called once after a mouse button is pressed and released.
 * 
 * Declaring the function `mouseClicked()` sets a code block to run
 * automatically when the user releases a mouse button after having pressed
 * it:
 * 
 * `function mouseClicked() {
 * // Code to run.
 * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
 * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
 * value when `mouseClicked()` is called by p5.js:
 * 
 * `function mouseClicked() {
 * if (mouseX < 50) {
 * // Code to run if the mouse is on the left.
 * }
 * 
 * if (mouseY > 50) {
 * // Code to run if the mouse is near the bottom.
 * }
 * }`The parameter, `event`, is optional. `mouseClicked()` 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 click event:
 * 
 * `function mouseClicked(event) {
 * // Code to run that uses the event.
 * console.log(event);
 * }`On touchscreen devices, `mouseClicked()` will run when a user’s touch
 * ends.
 * 
 * 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.
 * 
 * Note: <a href="#/p5/mousePressed">mousePressed()</a>,
 * <a href="#/p5/mouseReleased">mouseReleased()</a>,
 * and `mouseClicked()` are all related.
 * <a href="#/p5/mousePressed">mousePressed()</a> runs as soon as the user
 * clicks the mouse. <a href="#/p5/mouseReleased">mouseReleased()</a> runs as
 * soon as the user releases the mouse click. `mouseClicked()` runs
 * immediately after <a href="#/p5/mouseReleased">mouseReleased()</a>.
 * @param event optional `MouseEvent` argument.
 */
function mouseClicked(event?: MouseEvent): void;

/**
 * Create a new shader 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.
 * 
 * The main way to use `buildMaterialShader` is to pass a function in as a parameter.
 * This will let you create a shader using p5.strands.
 * 
 * In your function, you can call hooks to change part of the shader. In a material
 * shader, these are the hooks available:
 * 
 * - <a href="#/p5/objectInputs">`objectInputs`</a>: Update vertices before any positioning has been applied. Your function gets run on every vertex.
 * 
 * - <a href="#/p5/worldInputs">`worldInputs`</a>: Update vertices after transformations have been applied. Your function gets run on every vertex.
 * 
 * - <a href="#/p5/cameraInputs">`cameraInputs`</a>: Update vertices after transformations have been applied, relative to the camera. Your function gets run on every vertex.
 * 
 * - <a href="#/p5/pixelInputs">`pixelInputs`</a>: Update property values on pixels on the surface of a shape. Your function gets run on every pixel.
 * 
 * - <a href="#/p5/combineColors">`combineColors`</a>: Control how the ambient, diffuse, and specular components of lighting are combined into a single color on the surface of a shape. Your function gets run on every pixel.
 * 
 * - <a href="#/p5/finalColor">`finalColor`</a>: Update or replace the pixel color on the surface of a shape. Your function gets run on every pixel.
 * 
 * Read the linked reference page for each hook for more information about how to use them.
 * 
 * One thing you can do with a material shader is animate the positions of vertices
 * over time:
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(200, 200, WEBGL);
 * myShader = buildMaterialShader(material);
 * }
 * 
 * function material() {
 * let time = millis();
 * worldInputs.begin();
 * worldInputs.position.y +=
 * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
 * worldInputs.end();
 * }
 * 
 * function draw() {
 * background(255);
 * shader(myShader);
 * lights();
 * noStroke();
 * fill('red');
 * sphere(50);
 * }`There are also many uses in updating values per pixel. This can be a good
 * way to give your sketch texture and detail. For example, instead of having a single
 * shininess or metalness value for a whole shape, you could vary it in different spots on its surface:
 * 
 * `let myShader;
 * let environment;
 * 
 * async function setup() {
 * environment = await loadImage('assets/outdoor_spheremap.jpg');
 * 
 * createCanvas(200, 200, WEBGL);
 * myShader = buildMaterialShader(material);
 * }
 * 
 * function material() {
 * pixelInputs.begin();
 * let factor = sin(
 * TWO_PI * (pixelInputs.texCoord.x + pixelInputs.texCoord.y)
 * );
 * pixelInputs.shininess = mix(1, 100, factor);
 * pixelInputs.metalness = factor;
 * pixelInputs.end();
 * }
 * 
 * function draw() {
 * panorama(environment);
 * ambientLight(100);
 * imageLight(environment);
 * rotateY(millis() * 0.001);
 * shader(myShader);
 * noStroke();
 * fill(255);
 * specularMaterial(150);
 * sphere(50);
 * }`A technique seen often in games called bump mapping is to vary the
 * normal, which is the orientation of the surface, per pixel to create texture
 * rather than using many tightly packed vertices. Sometimes this can come from
 * bump images, but it can also be done generatively with math.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(200, 200, WEBGL);
 * myShader = buildMaterialShader(material);
 * }
 * 
 * function material() {
 * pixelInputs.begin();
 * pixelInputs.normal.x += 0.2 * sin(
 * sin(TWO_PI * dot(pixelInputs.texCoord.yx, vec2(10, 25)))
 * );
 * pixelInputs.normal.y += 0.2 * sin(
 * sin(TWO_PI * dot(pixelInputs.texCoord, vec2(10, 25)))
 * );
 * pixelInputs.normal = normalize(pixelInputs.normal);
 * pixelInputs.end();
 * }
 * 
 * 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);
 * }`You can also update the final color directly instead of modifying
 * lighting settings. Sometimes in photographs, a light source is placed
 * behind the subject to create rim lighting, where the edges of the
 * subject are lit up. This can be simulated by adding white to the final
 * color on parts of the shape that are facing away from the camera.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(200, 200, WEBGL);
 * myShader = buildMaterialShader(material);
 * }
 * 
 * function material() {
 * let myNormal = sharedVec3();
 * 
 * pixelInputs.begin();
 * myNormal = pixelInputs.normal;
 * pixelInputs.end();
 * 
 * finalColor.begin();
 * finalColor.set(mix(
 * [1, 1, 1, 1],
 * finalColor.color,
 * abs(dot(myNormal, [0, 0, 1]))
 * ));
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(255);
 * rotateY(millis() * 0.001);
 * shader(myShader);
 * lights();
 * noStroke();
 * fill('red');
 * torus(30);
 * }`Like the `modify()` method on shaders,
 * advanced users can also fill in hooks using <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>
 * instead of JavaScript.
 * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
 * for more info.
 * @param callback A function building a p5.strands shader.
 * @param scope An optional scope object passed to .modify().
 * @returns The material shader.
 */
function buildMaterialShader(callback: Function, scope?: object): P5.Shader;
function buildMaterialShader(hooks: object, scope?: object): P5.Shader;

/**
 * Calculates the fractional part of a number.
 * 
 * A number's fractional part includes its decimal values. For example,
 * `fract(12.34)` returns 0.34.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Style the text.
 * textAlign(CENTER);
 * textSize(16);
 * 
 * // Original number.
 * let n = 56.78;
 * text(n, 50, 33);
 * 
 * // Fractional part.
 * let f = fract(n);
 * text(f, 50, 67);
 * 
 * describe('The number 56.78 written above the number 0.78.');
 * }``fract()` can also be used in shaders with p5.strands. The following example
 * uses `fract()` to create repeating patterns in a shader.
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildColorShader(shaderCallback);
 * describe('A sphere with a repeating gradient pattern.');
 * }
 * 
 * function shaderCallback() {
 * // shaderCallback runs on the GPU. millis() gives ms since start; multiply by 0.001 for seconds.
 * let t = millis() * 0.001;
 * 
 * // Multiply by 0.5 to slow the animation to half speed.
 * // fract(t * 0.5) extracts only the decimal part of the number.
 * // This creates a smooth sawtooth wave that repeats every 2 seconds.
 * let value = fract(t * 0.5);
 * 
 * // Each color is [R, G, B, A] with values from 0 to 1.
 * let cyan = [0, 0.5, 1, 1];
 * let orange = [1, 0.5, 0, 1];
 * 
 * finalColor.begin();
 * 
 * // mix() blends between cyan (when value = 0) and orange (when value = 1).
 * // Because fract() resets to 0 each cycle, the color loops smoothly.
 * finalColor.set(mix(cyan, orange, value));
 * 
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * shader(myShader);
 * noStroke();
 * sphere(30);
 * }`
 * @param n number whose fractional part will be found.
 * @returns fractional part of n.
 */
function fract(n: number): number;

/**
 * Creates a `<video>` element that "captures" the audio/video stream from
 * the webcam and microphone.
 * 
 * `createCapture()` returns a new
 * <a href="#/p5.MediaElement">p5.MediaElement</a> object. Videos are shown by
 * default. They can be hidden by calling `capture.hide()` and drawn to the
 * canvas using <a href="#/p5/image">image()</a>.
 * 
 * The first parameter, `type`, is optional. It sets the type of capture to
 * use. By default, `createCapture()` captures both audio and video. If `VIDEO`
 * is passed, as in `createCapture(VIDEO)`, only video will be captured.
 * If `AUDIO` is passed, as in `createCapture(AUDIO)`, only audio will be
 * captured. A constraints object can also be passed to customize the stream.
 * See the <a href="http://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints" target="_blank">
 * W3C documentation</a> for possible properties. Different browsers support different
 * properties.
 * 
 * The 'flipped' property is an optional property which can be set to `{flipped:true}`
 * to mirror the video output.If it is true then it means that video will be mirrored
 * or flipped and if nothing is mentioned then by default it will be `false`.
 * 
 * The second parameter,`callback`, is optional. It's a function to call once
 * the capture is ready for use. The callback function should have one
 * parameter, `stream`, that's a
 * <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream" target="_blank">MediaStream</a> object.
 * 
 * Note: `createCapture()` only works when running a sketch locally or using HTTPS. Learn more
 * <a href="http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https" target="_blank">here</a>
 * and <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" target="_blank">here</a>.
 * @param type type of capture, either AUDIO or VIDEO,
 * or a constraints object. Both video and audio
 * audio streams are captured by default.
 * @param flipped flip the capturing video and mirror the output with `{flipped:true}`. By
 * default it is false.
 * @param callback function to call once the stream
 * has loaded.
 * @returns new <a href="#/p5.MediaElement">p5.MediaElement</a> object.
 */
function createCapture(type?: typeof P5.AUDIO | typeof P5.VIDEO | object, flipped?: object, callback?: Function): P5.MediaElement;

/**
 * Sets the color used to draw points, lines, and the outlines of shapes.
 * 
 * Calling `stroke(255, 165, 0)` or `stroke('orange')` means all shapes drawn
 * after calling `stroke()` will be outlined with the color orange. The way
 * these parameters are interpreted may be changed with the
 * <a href="#/p5/colorMode">colorMode()</a> function.
 * 
 * The version of `stroke()` with one parameter interprets the value one of
 * three ways. If the parameter is a `Number`, it's interpreted as a grayscale
 * value. If the parameter is a `String`, it's interpreted as a CSS color
 * string. A <a href="#/p5.Color">p5.Color</a> object can also be provided to
 * set the stroke color.
 * 
 * The version of `stroke()` with two parameters interprets the first one as a
 * grayscale value. The second parameter sets the alpha (transparency) value.
 * 
 * The version of `stroke()` with three parameters interprets them as RGB, HSB,
 * or HSL colors, depending on the current `colorMode()`.
 * 
 * The version of `stroke()` with four parameters interprets them as RGBA, HSBA,
 * or HSLA colors, depending on the current `colorMode()`. The last parameter
 * sets the alpha (transparency) value.
 * 
 * Calling `stroke()` without an argument returns the current stroke as a <a href="#/p5.Color">p5.Color</a> object.
 * @param v1 red value if color mode is RGB or hue value if color mode is HSB.
 * @param v2 green value if color mode is RGB or saturation value if color mode is HSB.
 * @param v3 blue value if color mode is RGB or brightness value if color mode is HSB.
 * @param alpha alpha value, controls transparency (0 - transparent, 255 - opaque).
 * @returns the current stroke color.
 */
function stroke(v1: number, v2: number, v3: number, alpha?: number): P5.Color;
function stroke(value: string): P5.Color;
function stroke(gray: number, alpha?: number): P5.Color;
function stroke(values: number[]): P5.Color;
function stroke(color: P5.Color): P5.Color;
function stroke(): P5.Color;

/**
 * Creates a color picker element.
 * 
 * The parameter, `value`, is optional. If a color string or
 * <a href="#/p5.Color">p5.Color</a> object is passed, it will set the default
 * color.
 * 
 * Color pickers extend the <a href="#/p5.Element">p5.Element</a> class with a
 * couple of helpful methods for managing colors:
 * 
 * - `myPicker.value()` returns the current color as a hex string in the format `'#rrggbb'`.
 * 
 * - `myPicker.color()` returns the current color as a <a href="#/p5.Color">p5.Color</a> object.
 * @param value default color as a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color" target="_blank">CSS color string</a>.
 * @returns new <a href="#/p5.Element">p5.Element</a> object.
 */
function createColorPicker(value?: string | P5.Color): P5.Element;

/**
 * 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);
 * 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 = millis();
 * worldInputs.begin();
 * worldInputs.position.y +=
 * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
 * worldInputs.end();`Read the reference for <a href="#/p5/buildMaterialShader">`buildMaterialShader`</a>,
 * the version of `loadMaterialShader` that takes in a function instead of a separate file,
 * for a full list of hooks you can use and examples for each.
 * 
 * The second parameter, `successCallback`, is optional. If a function is passed, as in
 * `loadMaterialShader('myShader.js', onLoaded)`, then the `onLoaded()` function will be called
 * once the shader loads. The shader will be passed to `onLoaded()` as its only argument.
 * The return value of `handleData()`, if present, will be used as the final return value of
 * `loadMaterialShader('myShader.js', onLoaded)`.
 * @param url The URL of your p5.strands JavaScript file.
 * @param onSuccess A callback function to run when loading completes.
 * @param onFailure A callback function to run when loading fails.
 * @returns The material shader.
 */
function loadMaterialShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;

/**
 * Saves a given element(image, text, json, csv, wav, or html) to the client's
 * computer. The first parameter can be a pointer to element we want to save.
 * The element can be one of <a href="#/p5.Element">p5.Element</a>,an Array of
 * Strings, an Array of JSON, a JSON object, a <a href="#/p5.Table">p5.Table
 * </a>, a <a href="#/p5.Image">p5.Image</a>, or a p5.SoundFile (requires
 * p5.sound). The second parameter is a filename (including extension).The
 * third parameter is for options specific to this type of object. This method
 * will save a file that fits the given parameters.
 * If it is called without specifying an element, by default it will save the
 * whole canvas as an image file. You can optionally specify a filename as
 * the first parameter in such a case.
 * Note that it is not recommended to
 * call this method within draw, as it will open a new save dialog on every
 * render.
 * @param objectOrFilename If filename is provided, will
 * save canvas as an image with
 * either png or jpg extension
 * depending on the filename.
 * If object is provided, will
 * save depending on the object
 * and filename (see examples
 * above).
 * @param filename If an object is provided as the first
 * parameter, then the second parameter
 * indicates the filename,
 * and should include an appropriate
 * file extension (see examples above).
 * @param options Additional options depend on
 * filetype. For example, when saving JSON,
 * <code>true</code> indicates that the
 * output will be optimized for filesize,
 * rather than readability.
 */
function save(objectOrFilename?: object | string, filename?: string, options?: boolean | string): void;

/**
 * Returns the default shader used for fills when lights or textures are used.
 * 
 * Calling <a href="#/p5/buildMaterialShader">`buildMaterialShader(shaderFunction)`</a>
 * is equivalent to calling `baseMaterialShader().modify(shaderFunction)`.
 * 
 * Read <a href="#/p5/buildMaterialShader">the `buildMaterialShader` reference</a> or
 * call `baseMaterialShader().inspectHooks()` for more information on what you can do with
 * the base material shader.
 * @returns The base material shader.
 */
function baseMaterialShader(): P5.Shader;

/**
 * Gets the lightness value of a color.
 * 
 * `lightness()` extracts the HSL lightness 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, `lightness()` returns a color's HSL lightness in the range 0
 * to 100. If the <a href="/reference/p5/colorMode/">colorMode()</a> is set to HSL, it
 * returns the lightness value in the given range.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(50);
 * 
 * // Use HSL color.
 * colorMode(HSL);
 * 
 * // Create a p5.Color object using HSL values.
 * let c = color(0, 100, 75);
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'lightValue' to 75.
 * let lightValue = lightness(c);
 * 
 * // Draw the right rectangle.
 * fill(lightValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(50);
 * 
 * // Use HSL color.
 * colorMode(HSL);
 * 
 * // Create a color array.
 * let c = [0, 100, 75];
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'lightValue' to 75.
 * let lightValue = lightness(c);
 * 
 * // Draw the right rectangle.
 * fill(lightValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(50);
 * 
 * // Use HSL color.
 * colorMode(HSL);
 * 
 * // Create a CSS color string.
 * let c = 'rgb(255, 128, 128)';
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'lightValue' to 75.
 * let lightValue = lightness(c);
 * 
 * // Draw the right rectangle.
 * fill(lightValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
 * }``function setup() {
 * createCanvas(100, 100);
 * 
 * background(50);
 * 
 * // Use HSL color with values in the range 0-255.
 * colorMode(HSL, 255);
 * 
 * // Create a p5.Color object using HSL values.
 * let c = color(0, 255, 191.5);
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(c);
 * rect(15, 15, 35, 70);
 * 
 * // Set 'lightValue' to 191.5.
 * let lightValue = lightness(c);
 * 
 * // Draw the right rectangle.
 * fill(lightValue);
 * rect(50, 15, 35, 70);
 * 
 * describe('Two rectangles. The left one is salmon pink and the right one is gray.');
 * }`In p5.strands shader callbacks, `lightness()` operates on `vec4` values
 * and returns the lightness as a normalized value in the 0–1 range.
 * `colorMode()` has no effect inside shader callbacks.
 * 
 * `let myShader;
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildMaterialShader(myShaderBuilder);
 * }
 * 
 * function myShaderBuilder() {
 * finalColor.begin();
 * let c = color(0, 100, 75);
 * let l = lightness(c);
 * finalColor.set(vec4(l, l, l, 1.0));
 * finalColor.end();
 * }
 * 
 * function draw() {
 * shader(myShader);
 * noStroke();
 * sphere(40);
 * 
 * describe('A sphere shaded in grayscale based on lightness.');
 * }`
 * @param color <a href="/reference/p5/p5.Color/">p5.Color</a> object, array of
 * color components, or CSS color string.
 * @returns the lightness value.
 */
function lightness(color: P5.Color | number[] | string): number;

/**
 * A function that's called once when a mouse button is clicked twice quickly.
 * 
 * Declaring the function `doubleClicked()` sets a code block to run
 * automatically when the user presses and releases the mouse button twice
 * quickly:
 * 
 * `function doubleClicked() {
 * // Code to run.
 * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
 * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
 * value when `doubleClicked()` is called by p5.js:
 * 
 * `function doubleClicked() {
 * if (mouseX < 50) {
 * // Code to run if the mouse is on the left.
 * }
 * 
 * if (mouseY > 50) {
 * // Code to run if the mouse is near the bottom.
 * }
 * }`The parameter, `event`, is optional. `doubleClicked()` 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 double-click event:
 * 
 * `function doubleClicked(event) {
 * // Code to run that uses the event.
 * console.log(event);
 * }`On touchscreen devices, code placed in `doubleClicked()` will run after two
 * touches that occur within a short time.
 * 
 * Browsers may have default behaviors attached to various mouse events. For
 * example, some browsers highlight text when the user moves the mouse while
 * pressing a mouse button. To prevent any default behavior for this event,
 * add `return false;` to the end of the function.
 * @param event optional `MouseEvent` argument.
 */
function doubleClicked(event?: MouseEvent): void;

/**
 * Returns the base shader used for filters.
 * 
 * Calling <a href="#/p5/buildFilterShader">`buildFilterShader(shaderFunction)`</a>
 * is equivalent to calling `baseFilterShader().modify(shaderFunction)`.
 * 
 * Read <a href="#/p5/buildFilterShader">the `buildFilterShader` reference</a> or
 * call `baseFilterShader().inspectHooks()` for more information on what you can do with
 * the base filter shader.
 * @returns The base filter shader.
 */
function baseFilterShader(): P5.Shader;

/**
 * Starts using shapes to erase parts of the canvas.
 * 
 * All drawing that follows `erase()` will subtract from the canvas, revealing
 * the web page underneath. The erased areas will become transparent, allowing
 * the content behind the canvas to show through. The
 * <a href="#/p5/fill">fill()</a>, <a href="#/p5/stroke">stroke()</a>, and
 * <a href="#/p5/blendMode">blendMode()</a> have no effect once `erase()` is
 * called.
 * 
 * The `erase()` function has two optional parameters. The first parameter
 * sets the strength of erasing by the shape's interior. A value of 0 means
 * that no erasing will occur. A value of 255 means that the shape's interior
 * will fully erase the content underneath. The default value is 255
 * (full strength).
 * 
 * The second parameter sets the strength of erasing by the shape's edge. A
 * value of 0 means that no erasing will occur. A value of 255 means that the
 * shape's edge will fully erase the content underneath. The default value is
 * 255 (full strength).
 * 
 * To cancel the erasing effect, use the <a href="#/p5/noErase">noErase()</a>
 * function.
 * 
 * `erase()` has no effect on drawing done with the
 * <a href="#/p5/image">image()</a> and
 * <a href="#/p5/background">background()</a> functions.
 * @param strengthFill a number (0-255) for the strength of erasing under a shape's interior.
 * Defaults to 255, which is full strength.
 * @param strengthStroke a number (0-255) for the strength of erasing under a shape's edge.
 * Defaults to 255, which is full strength.
 */
function erase(strengthFill?: number, strengthStroke?: number): void;

/**
 * Creates a text `<input></input>` element.
 * 
 * Call `myInput.size()` to set the length of the text box.
 * 
 * The first parameter, `value`, is optional. It's a string that sets the
 * input's default value. The input is blank by default.
 * 
 * The second parameter, `type`, is also optional. It's a string that
 * specifies the type of text being input. See MDN for a full
 * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input" target="_blank">list of options</a>.
 * The default is `'text'`.
 * @param value default value of the input box. Defaults to an empty string `''`.
 * @param type type of input. Defaults to `'text'`.
 * @returns new <a href="#/p5.Element">p5.Element</a> object.
 */
function createInput(value?: string, type?: string): P5.Element;
function createInput(value?: string): P5.Element;

/**
 * Ends erasing that was started with <a href="#/p5/erase">erase()</a>.
 * 
 * The <a href="#/p5/fill">fill()</a>, <a href="#/p5/stroke">stroke()</a>, and
 * <a href="#/p5/blendMode">blendMode()</a> settings will return to what they
 * were prior to calling <a href="#/p5/erase">erase()</a>.
 */
function noErase(): void;

/**
 * Blends two colors to find a third color between them.
 * 
 * The `amt` parameter specifies the amount to interpolate between the two
 * 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="#/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="#/p5/colorMode">colorMode()</a>.
 * 
 * `function setup() {
 * createCanvas(100, 100);
 * 
 * background(200);
 * 
 * // Create p5.Color objects to interpolate between.
 * let from = color(218, 165, 32);
 * let to = color(72, 61, 139);
 * 
 * // Create intermediate colors.
 * let interA = lerpColor(from, to, 0.33);
 * let interB = lerpColor(from, to, 0.66);
 * 
 * // Draw the left rectangle.
 * noStroke();
 * fill(from);
 * rect(10, 20, 20, 60);
 * 
 * // Draw the left-center rectangle.
 * fill(interA);
 * rect(30, 20, 20, 60);
 * 
 * // Draw the right-center rectangle.
 * fill(interB);
 * rect(50, 20, 20, 60);
 * 
 * // Draw the right rectangle.
 * fill(to);
 * rect(70, 20, 20, 60);
 * 
 * describe(
 * 'Four rectangles. From left to right, the rectangles are tan, brown, brownish purple, and purple.'
 * );
 * }`In p5.strands shader callbacks, `lerpColor()` interpolates between
 * `vec4` colors and returns a normalized `vec4` with RGBA components in
 * the 0–1 range. `colorMode()` has no effect inside shader callbacks.
 * 
 * `let myShader;
 * function setup() {
 * createCanvas(100, 100, WEBGL);
 * myShader = buildMaterialShader(myShaderBuilder);
 * }
 * 
 * function myShaderBuilder() {
 * finalColor.begin();
 * let c1 = color('red');
 * let c2 = color('blue');
 * let mixed = lerpColor(c1, c2, 0.5);
 * finalColor.set(mixed);
 * finalColor.end();
 * }
 * 
 * function draw() {
 * shader(myShader);
 * noStroke();
 * sphere(40);
 * 
 * describe('A purple sphere, a blend of red and blue.');
 * }`
 * @param c1 interpolate from this color.
 * @param c2 interpolate to this color.
 * @param amt number between 0 and 1.
 * @returns interpolated color.
 */
function lerpColor(c1: P5.Color, c2: P5.Color, amt: number): P5.Color;

/**
 * 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
 * shader into the <a href="#/p5/shader">`shader()`</a> function to apply it to any fills
 * you draw.
 * 
 * The main way to use `buildNormalShader` is to pass a function in as a parameter.
 * This will let you create a shader using p5.strands.
 * 
 * In your function, you can call hooks to change part of the shader. In a material
 * shader, these are the hooks available:
 * 
 * - <a href="#/p5/objectInputs">`objectInputs`</a>: Update vertices before any positioning has been applied. Your function gets run on every vertex.
 * 
 * - <a href="#/p5/worldInputs">`worldInputs`</a>: Update vertices after transformations have been applied. Your function gets run on every vertex.
 * 
 * - <a href="#/p5/cameraInputs">`cameraInputs`</a>: Update vertices after transformations have been applied, relative to the camera. Your function gets run on every vertex.
 * 
 * - <a href="#/p5/finalColor">`finalColor`</a>: Update or replace the pixel color on the surface of a shape. Your function gets run on every pixel.
 * 
 * Read the linked reference page for each hook for more information about how to use them.
 * 
 * One thing you may want to do is update the position of all the vertices in an object over time:
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(200, 200, WEBGL);
 * myShader = buildNormalShader(material);
 * }
 * 
 * function material() {
 * let time = millis();
 * worldInputs.begin();
 * worldInputs.position.y +=
 * 20. * sin(time * 0.001 + worldInputs.position.x * 0.05);
 * worldInputs.end();
 * }
 * 
 * function draw() {
 * background(255);
 * shader(myShader);
 * noStroke();
 * sphere(50);
 * }`You may also want to change the colors used. By default, the x, y, and z values of the orientation
 * of the surface are mapped directly to red, green, and blue. But you can pick different colors:
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(200, 200, WEBGL);
 * myShader = buildNormalShader(material);
 * }
 * 
 * function material() {
 * cameraInputs.begin();
 * cameraInputs.normal = abs(cameraInputs.normal);
 * cameraInputs.end();
 * 
 * finalColor.begin();
 * // Map the r, g, and b values of the old normal to new colors
 * // instead of just red, green, and blue:
 * let newColor =
 * finalColor.color.r * [89, 240, 232] / 255 +
 * finalColor.color.g * [240, 237, 89] / 255 +
 * finalColor.color.b * [205, 55, 222] / 255;
 * newColor = newColor / (finalColor.color.r + finalColor.color.g + finalColor.color.b);
 * finalColor.set([newColor.r, newColor.g, newColor.b, finalColor.color.a]);
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(255);
 * shader(myShader);
 * noStroke();
 * rotateX(frameCount * 0.01);
 * rotateY(frameCount * 0.015);
 * box(100);
 * }`Like the `modify()` method on shaders,
 * advanced users can also fill in hooks using <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>
 * instead of JavaScript.
 * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
 * for more info.
 * @param callback A function building a p5.strands shader.
 * @param scope An optional scope object passed to .modify().
 * @returns The normal shader.
 */
function buildNormalShader(callback: Function, scope?: object): P5.Shader;
function buildNormalShader(hooks: object, scope?: object): P5.Shader;

/**
 * Blends multiple colors to find a color between them.
 * 
 * The `amt` parameter specifies the amount to interpolate between the color
 * stops which are colors at each `amt` value "location" with `amt` values
 * that are between 2 color stops interpolating between them based on its relative
 * distance to both.
 * 
 * The way that colors are interpolated depends on the current
 * <a href="/reference/p5/colorMode/">colorMode()</a>.
 * @param colors_stops color stops to interpolate from
 * @param amt number to use to interpolate relative to color stops
 * @returns interpolated color.
 */
function paletteLerp(colors_stops: [P5.Color | string | number | number[], number][], amt: number): P5.Color;

/**
 * Saves an `Object` or `Array` to a JSON file.
 * 
 * JavaScript Object Notation
 * (<a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON" target="_blank">JSON</a>)
 * is a standard format for sending data between applications. The format is
 * based on JavaScript objects which have keys and values. JSON files store
 * data in an object with strings as keys. Values can be strings, numbers,
 * Booleans, arrays, `null`, or other objects.
 * 
 * The first parameter, `json`, is the data to save. The data can be an array,
 * as in `[1, 2, 3]`, or an object, as in
 * `{ x: 50, y: 50, color: 'deeppink' }`.
 * 
 * The second parameter, `filename`, is a string that sets the file's name.
 * For example, calling `saveJSON([1, 2, 3], 'data.json')` saves the array
 * `[1, 2, 3]` to a file called `data.json` on the user's computer.
 * 
 * The third parameter, `optimize`, is optional. If `true` is passed, as in
 * `saveJSON([1, 2, 3], 'data.json', true)`, then all unneeded whitespace will
 * be removed to reduce the file size.
 * 
 * Note: The browser will either save the file immediately or prompt the user
 * with a dialogue window.
 * @param json data to save.
 * @param filename name of the file to be saved.
 * @param optimize whether to trim unneeded whitespace. Defaults
 * to `true`.
 */
function saveJSON(json: any[] | object, filename: string, optimize?: boolean): void;

/**
 * Ends a drawing group that contains its own styles and transformations.
 * 
 * By default, styles such as <a href="#/p5/fill">fill()</a> and
 * transformations such as <a href="#/p5/rotate">rotate()</a> are applied to
 * all drawing that follows. The <a href="#/p5/push">push()</a> and `pop()`
 * functions can limit the effect of styles and transformations to a specific
 * group of shapes, images, and text. For example, a group of shapes could be
 * translated to follow the mouse without affecting the rest of the sketch:
 * 
 * `// Begin the drawing group.
 * push();
 * 
 * // Translate the origin to the mouse's position.
 * translate(mouseX, mouseY);
 * 
 * // Style the face.
 * noStroke();
 * fill('green');
 * 
 * // Draw the face.
 * circle(0, 0, 60);
 * 
 * // Style the eyes.
 * fill('white');
 * 
 * // Draw the left eye.
 * ellipse(-20, -20, 30, 20);
 * 
 * // Draw the right eye.
 * ellipse(20, -20, 30, 20);
 * 
 * // End the drawing group.
 * pop();
 * 
 * // Draw a bug.
 * let x = random(0, 100);
 * let y = random(0, 100);
 * text('🦟', x, y);`In the code snippet above, the bug's position isn't affected by
 * `translate(mouseX, mouseY)` because that transformation is contained
 * between <a href="#/p5/push">push()</a> and `pop()`. The bug moves around
 * the entire canvas as expected.
 * 
 * Note: <a href="#/p5/push">push()</a> and `pop()` are always called as a
 * pair. Both functions are required to begin and end a drawing group.
 * 
 * <a href="#/p5/push">push()</a> and `pop()` can also be nested to create
 * subgroups. For example, the code snippet above could be changed to give
 * more detail to the frog’s eyes:
 * 
 * `// Begin the drawing group.
 * push();
 * 
 * // Translate the origin to the mouse's position.
 * translate(mouseX, mouseY);
 * 
 * // Style the face.
 * noStroke();
 * fill('green');
 * 
 * // Draw a face.
 * circle(0, 0, 60);
 * 
 * // Style the eyes.
 * fill('white');
 * 
 * // Draw the left eye.
 * push();
 * translate(-20, -20);
 * ellipse(0, 0, 30, 20);
 * fill('black');
 * circle(0, 0, 8);
 * pop();
 * 
 * // Draw the right eye.
 * push();
 * translate(20, -20);
 * ellipse(0, 0, 30, 20);
 * fill('black');
 * circle(0, 0, 8);
 * pop();
 * 
 * // End the drawing group.
 * pop();
 * 
 * // Draw a bug.
 * let x = random(0, 100);
 * let y = random(0, 100);
 * text('🦟', x, y);`In this version, the code to draw each eye is contained between its own
 * <a href="#/p5/push">push()</a> and `pop()` functions. Doing so makes it
 * easier to add details in the correct part of a drawing.
 * 
 * <a href="#/p5/push">push()</a> and `pop()` contain the effects of the
 * following functions:
 * 
 * - <a href="#/p5/fill">fill()</a>
 * 
 * - <a href="#/p5/noFill">noFill()</a>
 * 
 * - <a href="#/p5/noStroke">noStroke()</a>
 * 
 * - <a href="#/p5/stroke">stroke()</a>
 * 
 * - <a href="#/p5/tint">tint()</a>
 * 
 * - <a href="#/p5/noTint">noTint()</a>
 * 
 * - <a href="#/p5/strokeWeight">strokeWeight()</a>
 * 
 * - <a href="#/p5/strokeCap">strokeCap()</a>
 * 
 * - <a href="#/p5/strokeJoin">strokeJoin()</a>
 * 
 * - <a href="#/p5/imageMode">imageMode()</a>
 * 
 * - <a href="#/p5/rectMode">rectMode()</a>
 * 
 * - <a href="#/p5/ellipseMode">ellipseMode()</a>
 * 
 * - <a href="#/p5/colorMode">colorMode()</a>
 * 
 * - <a href="#/p5/textAlign">textAlign()</a>
 * 
 * - <a href="#/p5/textFont">textFont()</a>
 * 
 * - <a href="#/p5/textSize">textSize()</a>
 * 
 * - <a href="#/p5/textLeading">textLeading()</a>
 * 
 * - <a href="#/p5/applyMatrix">applyMatrix()</a>
 * 
 * - <a href="#/p5/resetMatrix">resetMatrix()</a>
 * 
 * - <a href="#/p5/rotate">rotate()</a>
 * 
 * - <a href="#/p5/scale">scale()</a>
 * 
 * - <a href="#/p5/shearX">shearX()</a>
 * 
 * - <a href="#/p5/shearY">shearY()</a>
 * 
 * - <a href="#/p5/translate">translate()</a>
 * 
 * In WebGL mode, <a href="#/p5/push">push()</a> and `pop()` contain the
 * effects of a few additional styles:
 * 
 * - <a href="#/p5/setCamera">setCamera()</a>
 * 
 * - <a href="#/p5/ambientLight">ambientLight()</a>
 * 
 * - <a href="#/p5/directionalLight">directionalLight()</a>
 * 
 * - <a href="#/p5/pointLight">pointLight()</a> <a href="#/p5/texture">texture()</a>
 * 
 * - <a href="#/p5/specularMaterial">specularMaterial()</a>
 * 
 * - <a href="#/p5/shininess">shininess()</a>
 * 
 * - <a href="#/p5/normalMaterial">normalMaterial()</a>
 * 
 * - <a href="#/p5/shader">shader()</a>
 */
function pop(): void;

/**
 * A function that's called once when the mouse wheel moves.
 * 
 * Declaring the function `mouseWheel()` sets a code block to run
 * automatically when the user scrolls with the mouse wheel:
 * 
 * `function mouseWheel() {
 * // Code to run.
 * }`The mouse system variables, such as <a href="#/p5/mouseX">mouseX</a> and
 * <a href="#/p5/mouseY">mouseY</a>, will be updated with their most recent
 * value when `mouseWheel()` is called by p5.js:
 * 
 * `function mouseWheel() {
 * if (mouseX < 50) {
 * // Code to run if the mouse is on the left.
 * }
 * 
 * if (mouseY > 50) {
 * // Code to run if the mouse is near the bottom.
 * }
 * }`The parameter, `event`, is optional. `mouseWheel()` 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 scroll event:
 * 
 * `function mouseWheel(event) {
 * // Code to run that uses the event.
 * console.log(event);
 * }`The `event` object has many properties including `delta`, a `Number`
 * containing the distance that the user scrolled. For example, `event.delta`
 * might have the value 5 when the user scrolls up. `event.delta` is positive
 * if the user scrolls up and negative if they scroll down. The signs are
 * opposite on macOS with "natural" scrolling enabled.
 * 
 * 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.
 * 
 * Note: On Safari, `mouseWheel()` may only work as expected if
 * `return false;` is added at the end of the function.
 * @param event optional `WheelEvent` argument.
 */
function mouseWheel(event?: WheelEvent): void;

/**
 * Creates an `<input></input>` element of type `'file'`.
 * 
 * `createFileInput()` allows users to select local files for use in a sketch.
 * It returns a <a href="#/p5.File">p5.File</a> object.
 * 
 * The first parameter, `callback`, is a function that's called when the file
 * loads. The callback function should have one parameter, `file`, that's a
 * <a href="#/p5.File">p5.File</a> object.
 * 
 * The second parameter, `multiple`, is optional. It's a boolean value that
 * allows loading multiple files if set to `true`. If `true`, `callback`
 * will be called once per file.
 * @param callback function to call once the file loads.
 * @param multiple allow multiple files to be selected.
 * @returns The new input element.
 */
function createFileInput(callback: (input: P5.File) => any, multiple?: boolean): P5.Element;

/**
 * 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);
 * 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 = millis();
 * worldInputs.begin();
 * worldInputs.position.y +=
 * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
 * worldInputs.end();`Read the reference for <a href="#/p5/buildNormalShader">`buildNormalShader`</a>,
 * the version of `loadNormalShader` that takes in a function instead of a separate file,
 * for a full list of hooks you can use and examples for each.
 * 
 * The second parameter, `successCallback`, is optional. If a function is passed, as in
 * `loadNormalShader('myShader.js', onLoaded)`, then the `onLoaded()` function will be called
 * once the shader loads. The shader will be passed to `onLoaded()` as its only argument.
 * The return value of `handleData()`, if present, will be used as the final return value of
 * `loadNormalShader('myShader.js', onLoaded)`.
 * @param url The URL of your p5.strands JavaScript file.
 * @param onSuccess A callback function to run when loading completes.
 * @param onFailure A callback function to run when loading fails.
 * @returns The normal shader.
 */
function loadNormalShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;

/**
 * Locks the mouse pointer to its current position and makes it invisible.
 * 
 * `requestPointerLock()` allows the mouse to move forever without leaving the
 * screen. Calling `requestPointerLock()` locks the values of
 * <a href="#/p5/mouseX">mouseX</a>, <a href="#/p5/mouseY">mouseY</a>,
 * <a href="#/p5/pmouseX">pmouseX</a>, and <a href="#/p5/pmouseY">pmouseY</a>.
 * <a href="#/p5/movedX">movedX</a> and <a href="#/p5/movedY">movedY</a>
 * continue updating and can be used to get the distance the mouse moved since
 * the last frame was drawn. Calling
 * <a href="#/p5/exitPointerLock">exitPointerLock()</a> resumes updating the
 * mouse system variables.
 * 
 * Note: Most browsers require an input, such as a click, before calling
 * `requestPointerLock()`. It’s recommended to call `requestPointerLock()` in
 * an event function such as <a href="#/p5/doubleClicked">doubleClicked()</a>.
 */
function requestPointerLock(): void;

/**
 * Returns the default shader used for fills when
 * <a href="#/p5/normalMaterial">`normalMaterial()`</a> is activated.
 * 
 * Calling <a href="#/p5/buildNormalShader">`buildNormalShader(shaderFunction)`</a>
 * is equivalent to calling `baseNormalShader().modify(shaderFunction)`.
 * 
 * Read <a href="#/p5/buildNormalShader">the `buildNormalShader` reference</a> or
 * call `baseNormalShader().inspectHooks()` for more information on what you can do with
 * the base normal shader.
 * @returns The base material shader.
 */
function baseNormalShader(): P5.Shader;

/**
 * Saves an `Array` of `String`s to a file, one per line.
 * 
 * The first parameter, `list`, is an array with the strings to save.
 * 
 * The second parameter, `filename`, is a string that sets the file's name.
 * For example, calling `saveStrings(['0', '01', '011'], 'data.txt')` saves
 * the array `['0', '01', '011']` to a file called `data.txt` on the user's
 * computer.
 * 
 * The third parameter, `extension`, is optional. If a string is passed, as in
 * `saveStrings(['0', '01', '0`1'], 'data', 'txt')`, the second parameter will
 * be interpreted as the file name and the third parameter as the extension.
 * 
 * The fourth parameter, `isCRLF`, is also optional, If `true` is passed, as
 * in `saveStrings(['0', '01', '011'], 'data', 'txt', true)`, then two
 * characters, `\r\n` , will be added to the end of each string to create new
 * lines in the saved file. `\r` is a carriage return (CR) and `\n` is a line
 * feed (LF). By default, only `\n` (line feed) is added to each string in
 * order to create new lines.
 * 
 * Note: The browser will either save the file immediately or prompt the user
 * with a dialogue window.
 * @param list data to save.
 * @param filename name of file to be saved.
 * @param extension format to use for the file.
 * @param isCRLF whether to add `\r\n` to the end of each
 * string. Defaults to `false`.
 */
function saveStrings(list: string[], filename: string, extension?: string, isCRLF?: boolean): void;

/**
 * Exits a pointer lock started with
 * <a href="#/p5/requestPointerLock">requestPointerLock</a>.
 * 
 * Calling `requestPointerLock()` locks the values of
 * <a href="#/p5/mouseX">mouseX</a>, <a href="#/p5/mouseY">mouseY</a>,
 * <a href="#/p5/pmouseX">pmouseX</a>, and <a href="#/p5/pmouseY">pmouseY</a>.
 * Calling `exitPointerLock()` resumes updating the mouse system variables.
 * 
 * Note: Most browsers require an input, such as a click, before calling
 * `requestPointerLock()`. It’s recommended to call `requestPointerLock()` in
 * an event function such as <a href="#/p5/doubleClicked">doubleClicked()</a>.
 */
function exitPointerLock(): void;

/**
 * Create a new shader that can change how fills are drawn, based on the default shader
 * used when no lights or textures are applied. Pass the resulting
 * shader into the <a href="#/p5/shader">`shader()`</a> function to apply it
 * to any fills you draw.
 * 
 * The main way to use `buildColorShader` is to pass a function in as a parameter.
 * This will let you create a shader using p5.strands.
 * 
 * In your function, you can call hooks to change part of the shader. In a material
 * shader, these are the hooks available:
 * 
 * - <a href="#/p5/objectInputs">`objectInputs`</a>: Update vertices before any positioning has been applied. Your function gets run on every vertex.
 * 
 * - <a href="#/p5/worldInputs">`worldInputs`</a>: Update vertices after transformations have been applied. Your function gets run on every vertex.
 * 
 * - <a href="#/p5/cameraInputs">`cameraInputs`</a>: Update vertices after transformations have been applied, relative to the camera. Your function gets run on every vertex.
 * 
 * - <a href="#/p5/finalColor">`finalColor`</a>: Update or replace the pixel color on the surface of a shape. Your function gets run on every pixel.
 * 
 * Read the linked reference page for each hook for more information about how to use them.
 * 
 * One thing you might want to do is modify the position of every vertex over time:
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(200, 200, WEBGL);
 * myShader = buildColorShader(material);
 * }
 * 
 * function material() {
 * let time = millis();
 * worldInputs.begin();
 * worldInputs.position.y +=
 * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
 * worldInputs.end();
 * }
 * 
 * function draw() {
 * background(255);
 * shader(myShader);
 * noStroke();
 * fill('red');
 * circle(0, 0, 50);
 * }`Like the `modify()` method on shaders,
 * advanced users can also fill in hooks using <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>
 * instead of JavaScript.
 * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
 * for more info.
 * @param callback A function building a p5.strands shader.
 * @param scope An optional scope object passed to .modify().
 * @returns The color shader.
 */
function buildColorShader(callback: Function, scope?: object): P5.Shader;
function buildColorShader(hooks: object, scope?: object): P5.Shader;

/**
 * Writes the contents of a <a href="#/p5.Table">Table</a> object to a file. Defaults to a
 * text file with comma-separated-values ('csv') but can also
 * use tab separation ('tsv'), or generate an HTML table ('html').
 * The file saving process and location of the saved file will
 * vary between web browsers.
 * @param Table the <a href="#/p5.Table">Table</a> object to save to a file
 * @param filename the filename to which the Table should be saved
 * @param options can be one of "tsv", "csv", or "html"
 */
function saveTable(Table: P5.Table, filename: string, options?: string): void;

/**
 * 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
 * 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 loadColorShader('myMaterial.js');
 * }
 * 
 * function draw() {
 * background(255);
 * shader(myShader);
 * lights();
 * noStroke();
 * fill('red');
 * circle(0, 0, 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 = millis();
 * worldInputs.begin();
 * worldInputs.position.y +=
 * 20 * sin(time * 0.001 + worldInputs.position.x * 0.05);
 * worldInputs.end();`Read the reference for <a href="#/p5/buildColorShader">`buildColorShader`</a>,
 * the version of `loadColorShader` 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
 * `loadColorShader('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
 * `loadColorShader('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 color shader.
 */
function loadColorShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;

/**
 * Returns the default shader used for fills when no lights or textures are activate.
 * 
 * Calling <a href="#/p5/buildColorShader">`buildColorShader(shaderFunction)`</a>
 * is equivalent to calling `baseColorShader().modify(shaderFunction)`.
 * 
 * Read <a href="#/p5/buildColorShader">the `buildColorShader` reference</a> or
 * call `baseColorShader().inspectHooks()` for more information on what you can do with
 * the base color shader.
 * @returns The base color shader.
 */
function baseColorShader(): P5.Shader;

/**
 * Set attributes for the WebGL Drawing context.
 * This is a way of adjusting how the WebGL
 * renderer works to fine-tune the display and performance.
 * 
 * Note that this will reinitialize the drawing context
 * if called after the WebGL canvas is made.
 * 
 * If an object is passed as the parameter, all attributes
 * not declared in the object will be set to defaults.
 * 
 * The available attributes are:
 * <br>
 * alpha - indicates if the canvas contains an alpha buffer
 * default is true
 * 
 * depth - indicates whether the drawing buffer has a depth buffer
 * of at least 16 bits - default is true
 * 
 * stencil - indicates whether the drawing buffer has a stencil buffer
 * of at least 8 bits
 * 
 * antialias - indicates whether or not to perform anti-aliasing
 * default is false (true in Safari)
 * 
 * premultipliedAlpha - indicates that the page compositor will assume
 * the drawing buffer contains colors with pre-multiplied alpha
 * default is true
 * 
 * preserveDrawingBuffer - if true the buffers will not be cleared and
 * and will preserve their values until cleared or overwritten by author
 * (note that p5 clears automatically on draw loop)
 * default is true
 * 
 * perPixelLighting - if true, per-pixel lighting will be used in the
 * lighting shader otherwise per-vertex lighting is used.
 * default is true.
 * 
 * version - either 1 or 2, to specify which WebGL version to ask for. By
 * default, WebGL 2 will be requested. If WebGL2 is not available, it will
 * fall back to WebGL 1. You can check what version is used with by looking at
 * the global `webglVersion` property.
 * @param key Name of attribute
 * @param value New value of named attribute
 */
function setAttributes(key: string, value: boolean): void;
function setAttributes(obj: object): void;

/**
 * Influences the shape of the Bézier curve segment in a custom shape.
 * By default, this is 3; the other possible parameter is 2. This
 * results in quadratic Bézier curves.
 * 
 * `bezierVertex()` adds a curved segment to custom shapes. The Bézier curves
 * it creates are defined like those made by the
 * <a href="#/p5/bezier">bezier()</a> function. `bezierVertex()` must be
 * called between the
 * <a href="#/p5/beginShape">beginShape()</a> and
 * <a href="#/p5/endShape">endShape()</a> functions. There must be at least
 * one call to <a href="#/p5/vertex">bezierVertex()</a>, before
 * a number of `bezierVertex()` calls that is a multiple of the parameter
 * set by <a href="#/p5/bezierOrder">bezierOrder(...)</a> (default 3).
 * 
 * Each curve of order 3 requires three calls to `bezierVertex`, so
 * 2 curves would need 7 calls to `bezierVertex()`:
 * (1 one initial anchor point, two sets of 3 curves describing the curves)
 * With `bezierOrder(2)`, two curves would need 5 calls: 1 + 2 + 2.
 * 
 * Bézier curves can also be drawn in 3D using WebGL mode.
 * 
 * Note: `bezierVertex()` won’t work when an argument is passed to
 * <a href="#/p5/beginShape">beginShape()</a>.
 * 
 * Calling `bezierOrder()` without an argument returns the current Bézier order.
 * @param order The new order to set. Can be either 2 or 3, by default 3
 * @returns The current Bézier order.
 */
function bezierOrder(order: number): number;
function bezierOrder(): number;

/**
 * Sets the way colors blend when added to the canvas.
 * 
 * By default, drawing with a solid color paints over the current pixel values
 * on the canvas. `blendMode()` offers many options for blending colors.
 * 
 * Shapes, images, and text can be used as sources for drawing to the canvas.
 * A source pixel changes the color of the canvas pixel where it's drawn. The
 * final color results from blending the source pixel's color with the canvas
 * pixel's color. RGB color values from the source and canvas pixels are
 * compared, added, subtracted, multiplied, and divided to create different
 * effects. Red values with red values, greens with greens, and blues with
 * blues.
 * 
 * The parameter, `mode`, sets the blend mode. For example, calling
 * `blendMode(ADD)` sets the blend mode to `ADD`. The following blend modes
 * are available in both 2D and WebGL mode:
 * 
 * - `BLEND`: color values from the source overwrite the canvas. This is the default mode.
 * 
 * - `ADD`: color values from the source are added to values from the canvas.
 * 
 * - `DARKEST`: keeps the darkest color value.
 * 
 * - `LIGHTEST`: keeps the lightest color value.
 * 
 * - `EXCLUSION`: similar to `DIFFERENCE` but with less contrast.
 * 
 * - `MULTIPLY`: color values from the source are multiplied with values from the canvas. The result is always darker.
 * 
 * - `SCREEN`: all color values are inverted, then multiplied, then inverted again. The result is always lighter. (Opposite of `MULTIPLY`)
 * 
 * - `REPLACE`: the last source drawn completely replaces the rest of the canvas.
 * 
 * - `REMOVE`: overlapping pixels are removed by making them completely transparent.
 * 
 * The following blend modes are only available in 2D mode:
 * 
 * - `DIFFERENCE`: color values from the source are subtracted from the values from the canvas. If the difference is a negative number, it's made positive.
 * 
 * - `OVERLAY`: combines `MULTIPLY` and `SCREEN`. Dark values in the canvas get darker and light values get lighter.
 * 
 * - `HARD_LIGHT`: combines `MULTIPLY` and `SCREEN`. Dark values in the source get darker and light values get lighter.
 * 
 * - `SOFT_LIGHT`: a softer version of `HARD_LIGHT`.
 * 
 * - `DODGE`: lightens light tones and increases contrast. Divides the canvas color values by the inverted color values from the source.
 * 
 * - `BURN`: darkens dark tones and increases contrast. Divides the source color values by the inverted color values from the canvas, then inverts the result.
 * 
 * The following blend modes are only available in WebGL mode:
 * 
 * - `SUBTRACT`: RGB values from the source are subtracted from the values from the canvas. If the difference is a negative number, it's made positive. Alpha (transparency) values from the source and canvas are added.
 * @param mode blend mode to set.
 * either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,
 * EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
 * SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT
 * 
 * Calling `blendMode()` without an argument returns the current blendMode.
 * @returns the current blend mode.
 */
function blendMode(mode: typeof P5.BLEND | typeof P5.DARKEST | typeof P5.LIGHTEST | typeof P5.DIFFERENCE | typeof P5.MULTIPLY | typeof P5.EXCLUSION | typeof P5.SCREEN | typeof P5.REPLACE | typeof P5.OVERLAY | typeof P5.HARD_LIGHT | typeof P5.SOFT_LIGHT | typeof P5.DODGE | typeof P5.BURN | typeof P5.ADD | typeof P5.REMOVE | typeof P5.SUBTRACT): typeof P5.BLEND | typeof P5.DARKEST | typeof P5.LIGHTEST | typeof P5.DIFFERENCE | typeof P5.MULTIPLY | typeof P5.EXCLUSION | typeof P5.SCREEN | typeof P5.REPLACE | typeof P5.OVERLAY | typeof P5.HARD_LIGHT | typeof P5.SOFT_LIGHT | typeof P5.DODGE | typeof P5.BURN | typeof P5.ADD | typeof P5.REMOVE | typeof P5.SUBTRACT;
function blendMode(): typeof P5.BLEND | typeof P5.DARKEST | typeof P5.LIGHTEST | typeof P5.DIFFERENCE | typeof P5.MULTIPLY | typeof P5.EXCLUSION | typeof P5.SCREEN | typeof P5.REPLACE | typeof P5.OVERLAY | typeof P5.HARD_LIGHT | typeof P5.SOFT_LIGHT | typeof P5.DODGE | typeof P5.BURN | typeof P5.ADD | typeof P5.REMOVE | typeof P5.SUBTRACT;

/**
 * Sets the position and orientation of the current camera in a 3D sketch.
 * 
 * `camera()` allows objects to be viewed from different angles. It has nine
 * parameters that are all optional.
 * 
 * The first three parameters, `x`, `y`, and `z`, are the coordinates of the
 * camera’s position. For example, calling `camera(0, 0, 0)` places the camera
 * at the origin `(0, 0, 0)`. By default, the camera is placed at
 * `(0, 0, 800)`.
 * 
 * The next three parameters, `centerX`, `centerY`, and `centerZ` are the
 * coordinates of the point where the camera faces. For example, calling
 * `camera(0, 0, 0, 10, 20, 30)` places the camera at the origin `(0, 0, 0)`
 * and points it at `(10, 20, 30)`. By default, the camera points at the
 * origin `(0, 0, 0)`.
 * 
 * The last three parameters, `upX`, `upY`, and `upZ` are the components of
 * the "up" vector. The "up" vector orients the camera’s y-axis. For example,
 * calling `camera(0, 0, 0, 10, 20, 30, 0, -1, 0)` places the camera at the
 * origin `(0, 0, 0)`, points it at `(10, 20, 30)`, and sets the "up" vector
 * to `(0, -1, 0)` which is like holding it upside-down. By default, the "up"
 * vector is `(0, 1, 0)`.
 * 
 * Note: `camera()` can only be used in WebGL mode.
 * @param x x-coordinate of the camera. Defaults to 0.
 * @param y y-coordinate of the camera. Defaults to 0.
 * @param z z-coordinate of the camera. Defaults to 800.
 * @param centerX x-coordinate of the point the camera faces. Defaults to 0.
 * @param centerY y-coordinate of the point the camera faces. Defaults to 0.
 * @param centerZ z-coordinate of the point the camera faces. Defaults to 0.
 * @param upX x-component of the camera’s "up" vector. Defaults to 0.
 * @param upY y-component of the camera’s "up" vector. Defaults to 1.
 * @param upZ z-component of the camera’s "up" vector. Defaults to 0.
 */
function camera(x?: number, y?: number, z?: number, centerX?: number, centerY?: number, centerZ?: number, upX?: number, upY?: number, upZ?: number): void;

/**
 * Creates a <a href="#/p5/p5.StorageBuffer">`p5.StorageBuffer`</a>, which is
 * a block of data that shaders can read from, and compute shaders
 * can also write to. This is only available in WebGPU mode.
 * 
 * To read or write the data inside a shader, use
 * <a href="#/p5/uniformStorage">`uniformStorage()`</a>. To update its contents
 * from JavaScript, call <a href="#/p5.StorageBuffer/update">`.update()`</a>
 * on the result with new data.
 * 
 * Pass an array of objects to store a list of items, each with named
 * properties. The properties can be numbers, arrays of numbers, vectors
 * created with <a href="#/p5/createVector">`createVector()`</a>, or colors
 * created with <a href="#/p5/color">`color()`</a>. Inside the shader, each
 * item is accessed by index, and its properties are available by name.
 * 
 * `let instanceData;
 * let instancesShader;
 * let instance;
 * let count = 5;
 * 
 * async function setup() {
 * await createCanvas(200, 200, WEBGPU);
 * 
 * let data = [];
 * for (let i = 0; i < count; i++) {
 * data.push({
 * position: createVector(
 * random(-1, 1) * width / 2,
 * random(-1, 1) * height / 2,
 * 0,
 * ),
 * color: color(
 * random(255),
 * random(255),
 * random(255)
 * )
 * });
 * }
 * instanceData = createStorage(data);
 * instance = buildGeometry(drawInstance);
 * instancesShader = buildMaterialShader(drawInstances);
 * describe('Five spheres at random positions, each a different random color.');
 * }
 * 
 * function drawInstance() {
 * sphere(15);
 * }
 * 
 * function drawInstances() {
 * let data = uniformStorage(instanceData);
 * let itemColor = sharedVec4();
 * 
 * worldInputs.begin();
 * let item = data[instanceID()];
 * itemColor = item.color;
 * worldInputs.position += item.position;
 * worldInputs.end();
 * 
 * finalColor.begin();
 * finalColor.set(itemColor);
 * finalColor.end();
 * }
 * 
 * function draw() {
 * background(220);
 * lights();
 * noStroke();
 * shader(instancesShader);
 * model(instance, count);
 * }`You can also store a plain list of numbers by passing an array of numbers.
 * Inside the shader, each number is accessed by index directly. To create an
 * empty list to be filled in by a compute shader, pass a count instead.
 * 
 * `let cells;
 * let nextCells;
 * let gameShader;
 * let displayShader;
 * const W = 100;
 * const H = 100;
 * 
 * async function setup() {
 * await createCanvas(100, 100, WEBGPU);
 * 
 * let initial = new Float32Array(W * H);
 * for (let i = 0; i < initial.length; i++) {
 * initial[i] = random() > 0.7 ? 1 : 0;
 * }
 * cells = createStorage(initial);
 * nextCells = createStorage(W * H);
 * 
 * gameShader = buildComputeShader(simulate);
 * displayShader = buildFilterShader(display);
 * describe('An animated Game of Life simulation displayed as black and white pixels.');
 * }
 * 
 * function simulate() {
 * let current = uniformStorage(() => cells);
 * let next = uniformStorage(() => nextCells);
 * let w = uniformInt(() => W);
 * let h = uniformInt(() => H);
 * let x = index.x;
 * let y = index.y;
 * 
 * let n = 0;
 * for (let dy = -1; dy <= 1; dy++) {
 * for (let dx = -1; dx <= 1; dx++) {
 * if (dx != 0 || dy != 0) {
 * let nx = (x + dx + w) % w;
 * let ny = (y + dy + h) % h;
 * n += current[ny * w + nx];
 * }
 * }
 * }
 * 
 * let alive = current[y * w + x];
 * let nextOutput = 0;
 * if (alive == 1) {
 * if (abs(n - 2) < 0.1 || abs(n - 3) < 0.1) {
 * nextOutput = 1;
 * }
 * } else {
 * if (abs(n - 3) < 0.1) {
 * nextOutput = 1;
 * }
 * }
 * next[y * w + x] = nextOutput;
 * }
 * 
 * function display() {
 * let data = uniformStorage(() => cells);
 * let w = uniformInt(() => W);
 * let h = uniformInt(() => H);
 * 
 * filterColor.begin();
 * let x = floor(filterColor.texCoord.x * w);
 * let y = floor(filterColor.texCoord.y * h);
 * let alive = data[y * w + x];
 * filterColor.set([alive, alive, alive, 1]);
 * filterColor.end();
 * }
 * 
 * function draw() {
 * compute(gameShader, W, H);
 * [nextCells, cells] = [cells, nextCells];
 * filter(displayShader);
 * }`
 * @param dataOrCount Either a number specifying the count of floats,
 * an array/Float32Array of floats, or an array of objects describing struct elements.
 * @returns A storage buffer.
 */
function createStorage(dataOrCount: number | any[] | Float32Array | object[]): P5.StorageBuffer;

/**
 * Create a new shader that can change how strokes are drawn, based on the default
 * shader used for strokes. Pass the resulting shader into the
 * <a href="#/p5/strokeShader">`strokeShader()`</a> function to apply it to any
 * strokes you draw.
 * 
 * The main way to use `buildStrokeShader` is to pass a function in as a parameter.
 * This will let you create a shader using p5.strands.
 * 
 * In your function, you can call hooks to change part of the shader. In a material
 * shader, these are the hooks available:
 * 
 * - <a href="#/p5/objectInputs">`objectInputs`</a>: Update vertices before any positioning has been applied. Your function gets run on every vertex.
 * 
 * - <a href="#/p5/worldInputs">`worldInputs`</a>: Update vertices after transformations have been applied. Your function gets run on every vertex.
 * 
 * - <a href="#/p5/cameraInputs">`cameraInputs`</a>: Update vertices after transformations have been applied, relative to the camera. Your function gets run on every vertex.
 * 
 * - <a href="#/p5/pixelInputs">`pixelInputs`</a>: Update property values on pixels on the surface of a shape. Your function gets run on every pixel.
 * 
 * - <a href="#/p5/finalColor">`finalColor`</a>: Update or replace the pixel color on the surface of a shape. Your function gets run on every pixel.
 * 
 * Read the linked reference page for each hook for more information about how to use them.
 * 
 * One thing you might want to do is update the color of a stroke per pixel. Here, it is being used
 * to create a soft texture:
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(200, 200, WEBGL);
 * myShader = buildStrokeShader(material);
 * }
 * 
 * function material() {
 * pixelInputs.begin();
 * let opacity = 1 - smoothstep(
 * 0,
 * 15,
 * length(pixelInputs.position - pixelInputs.center)
 * );
 * pixelInputs.color.a *= opacity;
 * pixelInputs.end();
 * }
 * 
 * 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
 * );
 * }`Rather than using opacity, we could use a form of dithering to get a different
 * texture. This involves using only fully opaque or transparent pixels. Here, we
 * randomly choose which pixels to be transparent:
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(200, 200, WEBGL);
 * myShader = buildStrokeShader(material);
 * }
 * 
 * function material() {
 * pixelInputs.begin();
 * // Replace alpha in the color with dithering by
 * // randomly setting pixel colors to 0 based on opacity
 * let a = 1;
 * if (random() > pixelInputs.color.a) {
 * a = 0;
 * }
 * pixelInputs.color.a = a;
 * pixelInputs.end();
 * }
 * 
 * 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();
 * }`You might also want to update some properties per vertex, such as the stroke
 * thickness. This lets you create a more varied line:
 * 
 * `let myShader;
 * 
 * function setup() {
 * createCanvas(200, 200, WEBGL);
 * myShader = buildStrokeShader(material);
 * }
 * 
 * function material() {
 * let time = millis();
 * worldInputs.begin();
 * // Add a somewhat random offset to the weight
 * // that varies based on position and time
 * let scale = 0.5 + noise(
 * worldInputs.position.x * 0.01,
 * worldInputs.position.y * 0.01,
 * time * 0.0005
 * );
 * worldInputs.weight *= scale;
 * worldInputs.end();
 * }
 * 
 * function draw() {
 * background(255);
 * strokeShader(myShader);
 * 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();
 * }`Like the `modify()` method on shaders,
 * advanced users can also fill in hooks using <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders" target="_blank">GLSL</a>
 * instead of JavaScript.
 * Read the <a href="#/p5.Shader/modify">reference entry for `modify()`</a>
 * for more info.
 * @param callback A function building a p5.strands shader.
 * @param scope An optional scope object passed to .modify().
 * @returns The stroke shader.
 */
function buildStrokeShader(callback: Function, scope?: object): P5.Shader;
function buildStrokeShader(hooks: object, scope?: object): P5.Shader;

/**
 * Returns the default shader used for compute operations.
 * 
 * Calling <a href="#/p5/buildComputeShader">`buildComputeShader(shaderFunction)`</a>
 * is equivalent to calling `baseComputeShader().modify(shaderFunction)`.
 * 
 * Read <a href="#/p5/buildComputeShader">the `buildComputeShader` reference</a> or
 * call `baseComputeShader().inspectHooks()` for more information on what you can do with
 * the base compute shader.
 * @returns The base compute shader.
 */
function baseComputeShader(): P5.Shader;

/**
 * Loads a new shader from a file that can change how strokes are drawn. Pass the resulting
 * shader into the <a href="#/p5/strokeShader">`strokeShader()`</a> function to apply it
 * to any strokes you draw.
 * 
 * Since this function loads data from another file, it returns a `Promise`.
 * Use it in an `async function setup`, and `await` its result.
 * 
 * `let myShader;
 * async function setup() {
 * createCanvas(200, 200, WEBGL);
 * myShader = await loadStrokeShader('myMaterial.js');
 * }
 * 
 * function draw() {
 * background(255);
 * strokeShader(myShader);
 * strokeWeight(30);
 * line(
 * -width/3,
 * sin(millis()*0.001) * height/4,
 * width/3,
 * sin(millis()*0.001 + 1) * height/4
 * );
 * }`Inside your shader file, you can call p5.strands hooks to change parts of the shader. For
 * example, you might use the `worldInputs` hook to change each vertex, or you
 * might use the `pixelInputs` hook to change each pixel on the surface of a stroke.
 * 
 * `// myMaterial.js
 * pixelInputs.begin();
 * let opacity = 1 - smoothstep(
 * 0,
 * 15,
 * length(pixelInputs.position - pixelInputs.center)
 * );
 * pixelInputs.color.a *= opacity;
 * pixelInputs.end();`Read the reference for <a href="#/p5/buildStrokeShader">`buildStrokeShader`</a>,
 * the version of `loadStrokeShader` that takes in a function instead of a separate file,
 * for a full list of hooks you can use and examples for each.
 * 
 * The second parameter, `successCallback`, is optional. If a function is passed, as in
 * `loadStrokeShader('myShader.js', onLoaded)`, then the `onLoaded()` function will be called
 * once the shader loads. The shader will be passed to `onLoaded()` as its only argument.
 * The return value of `handleData()`, if present, will be used as the final return value of
 * `loadStrokeShader('myShader.js', onLoaded)`.
 * @param url The URL of your p5.strands JavaScript file.
 * @param onSuccess A callback function to run when loading completes.
 * @param onFailure A callback function to run when loading fails.
 * @returns The stroke shader.
 */
function loadStrokeShader(url: string, onSuccess?: Function, onFailure?: Function): Promise<P5.Shader>;

/**
 * Sets a perspective projection for the current camera in a 3D sketch.
 * 
 * In a perspective projection, shapes that are further from the camera appear
 * smaller than shapes that are near the camera. This technique, called
 * foreshortening, creates realistic 3D scenes. It’s applied by default in
 * WebGL mode.
 * 
 * `perspective()` changes the camera’s perspective by changing its viewing
 * frustum. The frustum is the volume of space that’s visible to the camera.
 * Its shape is a pyramid with its top cut off. The camera is placed where
 * the top of the pyramid should be and views everything between the frustum’s
 * top (near) plane and its bottom (far) plane.
 * 
 * The first parameter, `fovy`, is the camera’s vertical field of view. It’s
 * an angle that describes how tall or narrow a view the camera has. For
 * example, calling `perspective(0.5)` sets the camera’s vertical field of
 * view to 0.5 radians. By default, `fovy` is calculated based on the sketch’s
 * height and the camera’s default z-coordinate, which is 800. The formula for
 * the default `fovy` is `2 * atan(height / 2 / 800)`.
 * 
 * The second parameter, `aspect`, is the camera’s aspect ratio. It’s a number
 * that describes the ratio of the top plane’s width to its height. For
 * example, calling `perspective(0.5, 1.5)` sets the camera’s field of view to
 * 0.5 radians and aspect ratio to 1.5, which would make shapes appear thinner
 * on a square canvas. By default, aspect is set to `width / height`.
 * 
 * The third parameter, `near`, is the distance from the camera to the near
 * plane. For example, calling `perspective(0.5, 1.5, 100)` sets the camera’s
 * field of view to 0.5 radians, its aspect ratio to 1.5, and places the near
 * plane 100 pixels from the camera. Any shapes drawn less than 100 pixels
 * from the camera won’t be visible. By default, near is set to `0.1 * 800`,
 * which is 1/10th the default distance between the camera and the origin.
 * 
 * The fourth parameter, `far`, is the distance from the camera to the far
 * plane. For example, calling `perspective(0.5, 1.5, 100, 10000)` sets the
 * camera’s field of view to 0.5 radians, its aspect ratio to 1.5, places the
 * near plane 100 pixels from the camera, and places the far plane 10,000
 * pixels from the camera. Any shapes drawn more than 10,000 pixels from the
 * camera won’t be visible. By default, far is set to `10 * 800`, which is 10
 * times the default distance between the camera and the origin.
 * 
 * Note: `perspective()` can only be used in WebGL mode.
 * @param fovy camera frustum vertical field of view. Defaults to
 * `2 * atan(height / 2 / 800)`.
 * @param aspect camera frustum aspect ratio. Defaults to
 * `width / height`.
 * @param near distance from the camera to the near clipping plane.
 * Defaults to `0.1 * 800`.
 * @param far distance from the camera to the far clipping plane.
 * Defaults to `10 * 800`.
 */
function perspective(fovy?: number, aspect?: number, near?: number, far?: number): void;

/**
 * Returns the default shader used for strokes.
 * 
 * Calling <a href="#/p5/buildStrokeShader">`buildStrokeShader(shaderFunction)`</a>
 * is equivalent to calling `baseStrokeShader().modify(shaderFunction)`.
 * 
 * Read <a href="#/p5/buildStrokeShader">the `buildStrokeShader` reference</a> or
 * call `baseStrokeShader().inspectHooks()` for more information on what you can do with
 * the base material shader.
 * @returns The base material shader.
 */
function baseStrokeShader(): P5.Shader;

/**
 * Restores the default shaders.
 * 
 * `resetShader()` deactivates any shaders previously applied by
 * <a href="#/p5/shader">shader()</a>, <a href="#/p5/strokeShader">strokeShader()</a>,
 * or <a href="#/p5/imageShader">imageShader()</a>.
 * 
 * Note: Shaders can only be used in WebGL mode.
 */
function resetShader(): void;

/**
 * Create a new compute shader using p5.strands.
 * 
 * A compute shader lets you run many calculations all at once on your GPU. They
 * are similar to a <a href="#/p5/for>`for` loop,</a> but each iteration of the
 * loop happens in parallel on the GPU rather than running one after the other.
 * This makes them ideal for calculations or simulations involving many items.
 * 
 * You create a compute shader by passing a function to `buildComputeShader`.
 * The function represents one iteration of a loop.
 * 
 * The compute shader can be run by calling <a href="#/p5/compute">`compute()`</a>
 * and passing the shader in, along with the number of iterations in up to three
 * dimensions. Use the <a href="#/p5/index">`index`</a> vector inside of your
 * iteration function to refer to the current iteration of the loop. The `x`, `y`,
 * and `z` properties will count up from zero to the count in each dimension passed
 * into `compute`.
 * 
 * A compute shader will read from and write to storage, which is often an array of
 * numbers or objects. Use <a href="#/p5/createStorage">`createStorage`</a> to construct
 * initial data. Connect your iteration function to the storage by passing the storage
 * into <a href="#/p5/uniformStorage">`uniformStorage`</a>.
 * 
 * Often, compute shaders are paired with <a href="#/p5/model">`model(myGeometry, count)`</a>
 * to draw one instance per object in the storage, and a shader that uses
 * <a href="#/p5/instanceID">`instanceID()`</a> to position each instance.
 * 
 * `let particles;
 * let computeShader;
 * let displayShader;
 * let instance;
 * const numParticles = 100;
 * 
 * async function setup() {
 * await createCanvas(100, 100, WEBGPU);
 * particles = createStorage(makeParticles(width / 2, height / 2));
 * computeShader = buildComputeShader(simulate);
 * displayShader = buildMaterialShader(display);
 * instance = buildGeometry(drawParticle);
 * describe('100 orange particles shooting outward.');
 * }
 * 
 * function makeParticles(x, y) {
 * let data = [];
 * for (let i = 0; i < numParticles; i++) {
 * let angle = (i / numParticles) * TWO_PI;
 * let speed = random(0.5, 2);
 * data.push({
 * position: createVector(x, y),
 * velocity: createVector(cos(angle) * speed, sin(angle) * speed),
 * });
 * }
 * return data;
 * }
 * 
 * function drawParticle() {
 * sphere(2);
 * }
 * 
 * function simulate() {
 * let data = uniformStorage(particles);
 * let idx = index.x;
 * data[idx].position = data[idx].position + data[idx].velocity;
 * }
 * 
 * function display() {
 * let data = uniformStorage(particles);
 * worldInputs.begin();
 * let pos = data[instanceID()].position;
 * worldInputs.position.xy += pos - [width / 2, height / 2];
 * worldInputs.end();
 * }
 * 
 * function draw() {
 * background(30);
 * if (frameCount % 60 === 0) {
 * particles.update(makeParticles(random(width), random(height)));
 * }
 * compute(computeShader, numParticles);
 * noStroke();
 * fill(255, 200, 50);
 * shader(displayShader);
 * model(instance, numParticles);
 * }``let particles;
 * let computeShader;
 * let displayShader;
 * let instance;
 * const numParticles = 50;
 * 
 * async function setup() {
 * await createCanvas(100, 100, WEBGPU);
 * 
 * let data = [];
 * for (let i = 0; i < numParticles; i++) {
 * data.push({
 * position: createVector(
 * random(-40, 40),
 * random(-40, 40)
 * ),
 * velocity: createVector(
 * random(-1, 1),
 * random(-1, 1)
 * ),
 * });
 * }
 * particles = createStorage(data);
 * 
 * computeShader = buildComputeShader(simulate);
 * displayShader = buildMaterialShader(display);
 * instance = buildGeometry(drawParticle);
 * describe('50 white spheres bouncing around the canvas.');
 * }
 * 
 * function drawParticle() {
 * sphere(3);
 * }
 * 
 * function simulate() {
 * let r = 3;
 * let data = uniformStorage(particles);
 * let idx = index.x;
 * let pos = data[idx].position;
 * let vel = data[idx].velocity;
 * pos = pos + vel;
 * if (pos.x > width/2 - r || pos.x < -height/2 + r) {
 * vel.x = -vel.x;
 * pos.x = clamp(pos.x, -width/2 + r, width/2 - r);
 * }
 * if (pos.y > height/2 - r || pos.y < -height/2 + r) {
 * vel.y = -vel.y;
 * pos.y = clamp(pos.y, -height/2 + r, height/2 - r);
 * }
 * data[idx].position = pos;
 * data[idx].velocity = vel;
 * }
 * 
 * function display() {
 * let data = uniformStorage(particles);
 * worldInputs.begin();
 * let pos = data[instanceID()].position;
 * worldInputs.position.xy += pos;
 * worldInputs.end();
 * }
 * 
 * function draw() {
 * background(30);
 * compute(computeShader, numParticles);
 * noStroke();
 * fill(255);
 * lights();
 * shader(displayShader);
 * model(instance, numParticles);
 * }`
 * @param callback A function building a p5.strands compute shader.
 * @returns The compute shader.
 */
function buildComputeShader(callback: Function): P5.Shader;

/**
 * Enables or disables perspective for lines in 3D sketches.
 * 
 * In WebGL mode, lines can be drawn with a thinner stroke when they’re
 * further from the camera. Doing so gives them a more realistic appearance.
 * 
 * By default, lines are drawn differently based on the type of perspective
 * being used:
 * 
 * - `perspective()` and `frustum()` simulate a realistic perspective. In
 * these modes, stroke weight is affected by the line’s distance from the
 * camera. Doing so results in a more natural appearance. `perspective()` is
 * the default mode for 3D sketches.
 * 
 * - `ortho()` doesn’t simulate a realistic perspective. In this mode, stroke
 * weights are consistent regardless of the line’s distance from the camera.
 * Doing so results in a more predictable and consistent appearance.
 * 
 * `linePerspective()` can override the default line drawing mode.
 * 
 * The parameter, `enable`, is optional. It’s a `Boolean` value that sets the
 * way lines are drawn. If `true` is passed, as in `linePerspective(true)`,
 * then lines will appear thinner when they are further from the camera. If
 * `false` is passed, as in `linePerspective(false)`, then lines will have
 * consistent stroke weights regardless of their distance from the camera. By
 * default, `linePerspective()` is enabled.
 * 
 * Calling `linePerspective()` without passing an argument returns `true` if
 * it's enabled and `false` if not.
 * 
 * Note: `linePerspective()` can only be used in WebGL mode.
 * @param enable whether to enable line perspective.
 * @returns whether line perspective is enabled.
 */
function linePerspective(enable: boolean): boolean;
function linePerspective(): boolean;

/**
 * Connects points with a smooth curve (a spline).
 * 
 * `splineVertex()` adds a curved segment to custom shapes.
 * The curve it creates follows the same rules as the ones
 * made with the <a href="#/p5/spline">spline()</a> function.
 * `splineVertex()` must be called between the
 * <a href="#/p5/beginShape">beginShape()</a> and
 * <a href="#/p5/endShape">endShape()</a> functions.
 * 
 * Spline curves can form shapes and curves that slope gently. They’re like
 * cables that are attached to a set of points. `splineVertex()` draws a smooth
 * curve through the points you give it.
 * <a href="#/p5/beginShape">beginShape()</a> and
 * <a href="#/p5/endShape">endShape()</a> in order to draw a curve:
 * 
 * If you provide three points, the spline will pass through them.
 * It works the same way with any number of points.
 * 
 * `beginShape();
 * 
 * // Add the first point.
 * splineVertex(25, 80);
 * 
 * // Add the second point.
 * splineVertex(20, 30);
 * 
 * // Add the last point.
 * splineVertex(85, 60);
 * 
 * endShape();`<img src="assets/openCurveSpline.png"></img>
 * 
 * Passing in `CLOSE` to `endShape()` closes the spline smoothly.
 * 
 * `beginShape();
 * 
 * // Add the first point.
 * splineVertex(25, 80);
 * 
 * // Add the second point.
 * splineVertex(20, 30);
 * 
 * // Add the second point.
 * splineVertex(85, 60);
 * 
 * endShape(CLOSE);`<img src="assets/closeCurveSpline.png"></img>
 * 
 * By default (`ends: INCLUDE`), the curve passes through
 * all the points you add with `splineVertex()`, similar to
 * the <a href="#/p5/spline">spline()</a> function. To draw only
 * the middle span p1->p2 (skipping p0->p1 and p2->p3), set
 * `splineProperty('ends', EXCLUDE)`. You don’t need to duplicate
 * vertices to draw those spans.
 * 
 * Spline curves can also be drawn in 3D using WebGL mode. The 3D version of
 * `splineVertex()` has three arguments because each point has x-, y-, and
 * z-coordinates. By default, the vertex’s z-coordinate is set to 0.
 * 
 * Note: `splineVertex()` won’t work when an argument is passed to
 * <a href="#/p5/beginShape">beginShape()</a>.
 * @param x x-coordinate of the vertex
 * @param y y-coordinate of the vertex
 */
function splineVertex(x: number, y: number): void;
function splineVertex(x: number, y: number, z?: number): void;
function splineVertex(x: number, y: number, u?: number, v?: number): void;
function splineVertex(x: number, y: number, z: number, u?: number, v?: number): void;

/**
 * Sets an orthographic projection for the current camera in a 3D sketch.
 * 
 * In an orthographic projection, shapes with the same size always appear the
 * same size, regardless of whether they are near or far from the camera.
 * 
 * `ortho()` changes the camera’s perspective by changing its viewing frustum
 * from a truncated pyramid to a rectangular prism. The camera is placed in
 * front of the frustum and views everything between the frustum’s near plane
 * and its far plane. `ortho()` has six optional parameters to define the
 * frustum.
 * 
 * The first four parameters, `left`, `right`, `bottom`, and `top`, set the
 * coordinates of the frustum’s sides, bottom, and top. For example, calling
 * `ortho(-100, 100, 200, -200)` creates a frustum that’s 200 pixels wide and
 * 400 pixels tall. By default, these coordinates are set based on the
 * sketch’s width and height, as in
 * `ortho(-width / 2, width / 2, -height / 2, height / 2)`.
 * 
 * The last two parameters, `near` and `far`, set the distance of the
 * frustum’s near and far plane from the camera. For example, calling
 * `ortho(-100, 100, 200, 200, 50, 1000)` creates a frustum that’s 200 pixels
 * wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000
 * pixels from the camera. By default, `near` and `far` are set to 0 and
 * `max(width, height) + 800`, respectively.
 * 
 * Note: `ortho()` can only be used in WebGL mode.
 * @param left x-coordinate of the frustum’s left plane. Defaults to `-width / 2`.
 * @param right x-coordinate of the frustum’s right plane. Defaults to `width / 2`.
 * @param bottom y-coordinate of the frustum’s bottom plane. Defaults to `height / 2`.
 * @param top y-coordinate of the frustum’s top plane. Defaults to `-height / 2`.
 * @param near z-coordinate of the frustum’s near plane. Defaults to 0.
 * @param far z-coordinate of the frustum’s far plane. Defaults to `max(width, height) + 800`.
 */
function ortho(left?: number, right?: number, bottom?: number, top?: number, near?: number, far?: number): 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 <a href="#/p5/square">square()</a> and
 * <a href="#/p5/sphere">sphere()</a>, and custom shapes created with
 * functions such as <a href="#/p5/buildGeometry">buildGeometry()</a>. To
 * texture a geometry created with <a href="#/p5/beginShape">beginShape()</a>,
 * uv coordinates must be passed to each
 * <a href="#/p5/vertex">vertex()</a> call.
 * 
 * The parameter, `tex`, is the texture to apply. `texture()` can use a range
 * of sources including images, videos, and offscreen renderers such as
 * <a href="#/p5.Graphics">p5.Graphics</a> and
 * <a href="#/p5.Framebuffer">p5.Framebuffer</a> objects.
 * 
 * To texture a geometry created with <a href="#/p5/beginShape">beginShape()</a>,
 * you will need to specify uv coordinates in <a href="#/p5/vertex">vertex()</a>.
 * 
 * Note: `texture()` can only be used in WebGL mode.
 * @param tex media to use as the texture.
 */
function texture(tex: P5.Image | P5.MediaElement | P5.Graphics | P5.Texture | P5.Framebuffer | P5.FramebufferTexture): void;

/**
 * Dispatches a compute shader to run on the GPU.
 * 
 * The first parameter, `shader`, is a compute shader created with
 * <a href="#/p5/buildComputeShader">`buildComputeShader`</a>.
 * 
 * Pass a number for `x` to run a simple loop. Inside the shader's iteration
 * function, <a href="#/p5/index">`index.x`</a> will count up from 0 to
 * that number.
 * 
 * `let particles;
 * let computeShader;
 * let displayShader;
 * let instance;
 * const numParticles = 50;
 * 
 * async function setup() {
 * await createCanvas(100, 100, WEBGPU);
 * 
 * let data = [];
 * for (let i = 0; i < numParticles; i++) {
 * data.push({
 * position: createVector(
 * random(-40, 40),
 * random(-40, 40)
 * ),
 * velocity: createVector(
 * random(-1, 1),
 * random(-1, 1)
 * ),
 * });
 * }
 * particles = createStorage(data);
 * 
 * computeShader = buildComputeShader(simulate);
 * displayShader = buildMaterialShader(display);
 * instance = buildGeometry(drawParticle);
 * describe('50 white spheres bouncing around the canvas.');
 * }
 * 
 * function drawParticle() {
 * sphere(3);
 * }
 * 
 * function simulate() {
 * let r = 3;
 * let data = uniformStorage(particles);
 * let idx = index.x;
 * let pos = data[idx].position;
 * let vel = data[idx].velocity;
 * pos = pos + vel;
 * if (pos.x > width/2 - r || pos.x < -height/2 + r) {
 * vel.x = -vel.x;
 * pos.x = clamp(pos.x, -width/2 + r, width/2 - r);
 * }
 * if (pos.y > height/2 - r || pos.y < -height/2 + r) {
 * vel.y = -vel.y;
 * pos.y = clamp(pos.y, -height/2 + r, height/2 - r);
 * }
 * data[idx].position = pos;
 * data[idx].velocity = vel;
 * }
 * 
 * function display() {
 * let data = uniformStorage(particles);
 * worldInputs.begin();
 * let pos = data[instanceID()].position;
 * worldInputs.position.xy += pos;
 * worldInputs.end();
 * }
 * 
 * function draw() {
 * background(30);
 * compute(computeShader, numParticles);
 * noStroke();
 * fill(255);
 * lights();
 * shader(displayShader);
 * model(instance, numParticles);
 * }`You can also pass `y` and `z` to loop in up to three dimensions, using
 * `index.y` and `index.z` to get the position in each. This is useful for
 * working with 2D grids, like in the Game of Life example below.
 * 
 * `let cells;
 * let nextCells;
 * let gameShader;
 * let displayShader;
 * const W = 100;
 * const H = 100;
 * 
 * async function setup() {
 * await createCanvas(100, 100, WEBGPU);
 * 
 * let initial = new Float32Array(W * H);
 * for (let i = 0; i < initial.length; i++) {
 * initial[i] = random() > 0.7 ? 1 : 0;
 * }
 * cells = createStorage(initial);
 * nextCells = createStorage(W * H);
 * 
 * gameShader = buildComputeShader(simulate);
 * displayShader = buildFilterShader(display);
 * describe('An animated Game of Life simulation displayed as black and white pixels.');
 * }
 * 
 * function simulate() {
 * let current = uniformStorage(() => cells);
 * let next = uniformStorage(() => nextCells);
 * let w = uniformInt(() => W);
 * let h = uniformInt(() => H);
 * let x = index.x;
 * let y = index.y;
 * 
 * let n = 0;
 * for (let dy = -1; dy <= 1; dy++) {
 * for (let dx = -1; dx <= 1; dx++) {
 * if (dx != 0 || dy != 0) {
 * let nx = (x + dx + w) % w;
 * let ny = (y + dy + h) % h;
 * n += current[ny * w + nx];
 * }
 * }
 * }
 * 
 * let alive = current[y * w + x];
 * let nextOutput = 0;
 * if (alive == 1) {
 * if (abs(n - 2) < 0.1 || abs(n - 3) < 0.1) {
 * nextOutput = 1;
 * }
 * } else {
 * if (abs(n - 3) < 0.1) {
 * nextOutput = 1;
 * }
 * }
 * next[y * w + x] = nextOutput;
 * }
 * 
 * function display() {
 * let data = uniformStorage(() => cells);
 * let w = uniformInt(() => W);
 * let h = uniformInt(() => H);
 * 
 * filterColor.begin();
 * let x = floor(filterColor.texCoord.x * w);
 * let y = floor(filterColor.texCoord.y * h);
 * let alive = data[y * w + x];
 * filterColor.set([alive, alive, alive, 1]);
 * filterColor.end();
 * }
 * 
 * function draw() {
 * compute(gameShader, W, H);
 * [nextCells, cells] = [cells, nextCells];
 * filter(displayShader);
 * }`
 * @param shader The compute shader to run.
 * @param x Number of invocations in the X dimension.
 * @param y Number of invocations in the Y dimension.
 * @param z Number of invocations in the Z dimension.
 */
function compute(shader: P5.Shader, x: number, y?: number, z?: number): void;

/**
 * Sets the number of segments used to draw spline curves in WebGL mode.
 * 
 * In WebGL mode, smooth shapes are drawn using many flat segments. Adding
 * more flat segments makes shapes appear smoother.
 * 
 * The parameter, `detail`, is the density of segments to use while drawing a
 * spline curve.
 * 
 * Note: `curveDetail()` has no effect in 2D mode.
 * @param resolution number of segments to use. Default is 1/4
 */
function curveDetail(resolution: number): void;

/**
 * Sets the frustum of the current camera in a 3D sketch.
 * 
 * In a frustum projection, shapes that are further from the camera appear
 * smaller than shapes that are near the camera. This technique, called
 * foreshortening, creates realistic 3D scenes.
 * 
 * `frustum()` changes the default camera’s perspective by changing its
 * viewing frustum. The frustum is the volume of space that’s visible to the
 * camera. The frustum’s shape is a pyramid with its top cut off. The camera
 * is placed where the top of the pyramid should be and points towards the
 * base of the pyramid. It views everything within the frustum.
 * 
 * The first four parameters, `left`, `right`, `bottom`, and `top`, set the
 * coordinates of the frustum’s sides, bottom, and top. For example, calling
 * `frustum(-100, 100, 200, -200)` creates a frustum that’s 200 pixels wide
 * and 400 pixels tall. By default, these coordinates are set based on the
 * sketch’s width and height, as in
 * `ortho(-width / 20, width / 20, height / 20, -height / 20)`.
 * 
 * The last two parameters, `near` and `far`, set the distance of the
 * frustum’s near and far plane from the camera. For example, calling
 * `ortho(-100, 100, 200, -200, 50, 1000)` creates a frustum that’s 200 pixels
 * wide, 400 pixels tall, starts 50 pixels from the camera, and ends 1,000
 * pixels from the camera. By default, near is set to `0.1 * 800`, which is
 * 1/10th the default distance between the camera and the origin. `far` is set
 * to `10 * 800`, which is 10 times the default distance between the camera
 * and the origin.
 * 
 * Note: `frustum()` can only be used in WebGL mode.
 * @param left x-coordinate of the frustum’s left plane. Defaults to `-width / 20`.
 * @param right x-coordinate of the frustum’s right plane. Defaults to `width / 20`.
 * @param bottom y-coordinate of the frustum’s bottom plane. Defaults to `height / 20`.
 * @param top y-coordinate of the frustum’s top plane. Defaults to `-height / 20`.
 * @param near z-coordinate of the frustum’s near plane. Defaults to `0.1 * 800`.
 * @param far z-coordinate of the frustum’s far plane. Defaults to `10 * 800`.
 */
function frustum(left?: number, right?: number, bottom?: number, top?: number, near?: number, far?: number): void;

/**
 * Creates a new <a href="#/p5.Camera">p5.Camera</a> object.
 * 
 * The new camera is initialized with a default position `(0, 0, 800)` and a
 * default perspective projection. Its properties can be controlled with
 * <a href="#/p5.Camera">p5.Camera</a> methods such as
 * `myCamera.lookAt(0, 0, 0)`.
 * 
 * Note: Every 3D sketch starts with a default camera initialized.
 * This camera can be controlled with the functions
 * <a href="#/p5/camera">camera()</a>,
 * <a href="#/p5/perspective">perspective()</a>,
 * <a href="#/p5/ortho">ortho()</a>, and
 * <a href="#/p5/frustum">frustum()</a> if it's the only camera in the scene.
 * 
 * Note: `createCamera()` can only be used in WebGL mode.
 * @returns the new camera.
 */
function createCamera(): P5.Camera;

/**
 * Gets or sets a given spline property.
 * 
 * Use `splineProperty()` to adjust the behavior of splines
 * created with `splineVertex()` or `spline()`. You can control
 * two key aspects of a spline: its end behavior (`ends`) and
 * its curvature (`tightness`).
 * 
 * By default, the ends property is set to `INCLUDE`, which means
 * the spline passes through every point, including the endpoints.
 * You can also set it to `EXCLUDE` i.e. `splineProperty('ends', EXCLUDE)`,
 * which makes the spline pass through all points except the endpoints.
 * 
 * `INCLUDE` case will have the spline passing through
 * all points, like this:
 * 
 * `splineProperty('ends', INCLUDE); // no need to set this, as it is the default
 * spline(25, 46, 93, 44, 93, 81, 35, 85);
 * 
 * point(25, 46);
 * point(93, 44);
 * point(93, 81);
 * point(35, 85);`<img src="assets/includeSpline.png"></img>
 * 
 * EXCLUDE case will have the spline passing through
 * the middle points, like this:
 * 
 * `splineProperty('ends', EXCLUDE);
 * spline(25, 46, 93, 44, 93, 81, 35, 85);
 * 
 * point(25, 46);
 * point(93, 44);
 * point(93, 81);
 * point(35, 85);`<img src="assets/excludeSpline.png"></img>
 * 
 * By default, the tightness property is set to `0`,
 * producing a smooth curve that passes evenly through
 * the vertices. Negative values make the curve looser,
 * while positive values make it tighter. Common values
 * range between -1 and 1, though values outside this
 * range can also be used for different effects.
 * 
 * For example, To set tightness, use `splineProperty('tightness', t)`,
 * (default: t = 0).
 * 
 * Here's the example showing negetive value of tightness,
 * which creates a rounder bulge:
 * 
 * `splineProperty('tightness', -5)
 * stroke(0);
 * strokeWeight(2);
 * spline(25, 46, 93, 44, 93, 81, 35, 85);`<img src="assets/roundBulge.png"></img>
 * Here's the example showing positive value of tightness,
 * which makes the curve tighter and more angular:
 * 
 * `splineProperty('tightness', 5)
 * stroke(0);
 * strokeWeight(2);
 * spline(25, 46, 93, 44, 93, 81, 35, 85);`<img src="assets/anglurBulge.png"></img>
 * 
 * In all cases, the splines in p5.js are <a href = "https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Cardinal_spline">cardinal splines</a>.
 * When tightness is 0, these splines are often known as
 * <a href="https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Catmull%E2%80%93Rom_spline">Catmull-Rom splines</a>
 * @param value Value to set the given property to.
 * @returns The current value for the given property.
 */
function splineProperty(property: string, value: any): void;
function splineProperty(property: string): void;

/**
 * Changes the coordinate system used for textures when they’re applied to
 * custom shapes.
 * 
 * In order for <a href="#/p5/texture">texture()</a> 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 <a href="#/p5/rect">rect()</a> and
 * <a href="#/p5/box">box()</a> already have these texture mappings based on
 * their vertices. Custom shapes created with
 * <a href="#/p5/vertex">vertex()</a> require texture mappings to be passed as
 * uv coordinates.
 * 
 * Each call to <a href="#/p5/vertex">vertex()</a> 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();``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:
 * 
 * `// Set the texture mode to use normalized coordinates.
 * textureMode(NORMAL);
 * 
 * // 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.
 * 
 * Calling `textureMode()` with no arguments returns the current texture mode.
 * @param mode either IMAGE or NORMAL.
 * @returns The current texture mode, either IMAGE or NORMAL.
 */
function textureMode(mode: typeof P5.IMAGE | typeof P5.NORMAL): typeof P5.IMAGE | typeof P5.NORMAL;
function textureMode(): typeof P5.IMAGE | typeof P5.NORMAL;

/**
 * Sets the current (active) camera of a 3D sketch.
 * 
 * `setCamera()` allows for switching between multiple cameras created with
 * <a href="#/p5/createCamera">createCamera()</a>.
 * 
 * Note: `setCamera()` can only be used in WebGL mode.
 * @param cam camera that should be made active.
 */
function setCamera(cam: P5.Camera): void;

/**
 * Sets multiple properties for spline curves at once.
 * 
 * `splineProperties()` accepts an object with key-value pairs to configure
 * how spline curves are drawn. This is a convenient way to set multiple
 * spline properties with a single function call, rather than calling
 * <a href="#/p5/splineProperty">splineProperty()</a> multiple times.
 * 
 * The properties object can include:
 * 
 * - `tightness`: A number that controls how tightly the curve fits to the
 * vertex points. The default value is 0. Positive values make the curve
 * tighter (straighter), while negative values make it looser. Values
 * between -5 and 5 work best.
 * 
 * - `ends`: Controls whether to draw the end segments of the spline. Set to
 * `EXCLUDE` to skip drawing the segments between the first and second
 * points and between the second-to-last and last points. This is useful
 * when you want to use the first and last points as control points only.
 * 
 * `splineProperties()` affects curves drawn with
 * <a href="#/p5/splineVertex">splineVertex()</a> within
 * <a href="#/p5/beginShape">beginShape()</a> and
 * <a href="#/p5/endShape">endShape()</a>, as well as curves drawn with
 * <a href="#/p5/spline">spline()</a>. The properties remain active until
 * changed by another call to `splineProperties()` or
 * <a href="#/p5/splineProperty">splineProperty()</a>.
 * @param values an object containing spline property key-value pairs
 */
function splineProperties(values: object): object;

/**
 * Changes the way textures behave when a shape’s uv coordinates go beyond the
 * texture.
 * 
 * In order for <a href="#/p5/texture">texture()</a> 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 <a href="#/p5/rect">rect()</a> and
 * <a href="#/p5/box">box()</a> already have these texture mappings based on
 * their vertices. Custom shapes created with
 * <a href="#/p5/vertex">vertex()</a> require texture mappings to be passed as
 * uv coordinates.
 * 
 * Each call to <a href="#/p5/vertex">vertex()</a> 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.
 * 
 * Calling `textureWrap()` with no arguments returns an object with the current
 * mode for x and y directions, as in `{ wrapX: CLAMP, wrapY: REPEAT }`.
 * @param wrapX either CLAMP, REPEAT, or MIRROR
 * @param wrapY either CLAMP, REPEAT, or MIRROR
 * @returns The current texture wrapping for x and y.
 */
function textureWrap(wrapX: typeof P5.CLAMP | typeof P5.REPEAT | typeof P5.MIRROR, wrapY?: typeof P5.CLAMP | typeof P5.REPEAT | typeof P5.MIRROR): object;
function textureWrap(): object;

/**
 * Adds a vertex to a custom shape.
 * 
 * `vertex()` sets the coordinates of vertices drawn between the
 * <a href="#/p5/beginShape">beginShape()</a> and
 * <a href="#/p5/endShape">endShape()</a> functions.
 * 
 * The first two parameters, `x` and `y`, set the x- and y-coordinates of the
 * vertex.
 * 
 * The third parameter, `z`, is optional. It sets the z-coordinate of the
 * vertex in WebGL mode. By default, `z` is 0.
 * 
 * The fourth and fifth parameters, `u` and `v`, are also optional. They set
 * the u- and v-coordinates for the vertex’s texture when used with
 * <a href="#/p5/endShape">endShape()</a>. By default, `u` and `v` are both 0.
 * @param x x-coordinate of the vertex.
 * @param y y-coordinate of the vertex.
 */
function vertex(x: number, y: number): void;
function vertex(x: number, y: number, u?: number, v?: number): void;
function vertex(x: number, y: number, z: number, u?: number, v?: number): 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.
 */
function normalMaterial(): void;

/**
 * Begins creating a hole within a flat shape.
 * 
 * The `beginContour()` and <a href="#/p5/endContour">endContour()</a>
 * functions allow for creating negative space within custom shapes that are
 * flat. `beginContour()` begins adding vertices to a negative space and
 * <a href="#/p5/endContour">endContour()</a> stops adding them.
 * `beginContour()` and <a href="#/p5/endContour">endContour()</a> must be
 * called between <a href="#/p5/beginShape">beginShape()</a> and
 * <a href="#/p5/endShape">endShape()</a>.
 * 
 * Transformations such as <a href="#/p5/translate">translate()</a>,
 * <a href="#/p5/rotate">rotate()</a>, and <a href="#/p5/scale">scale()</a>
 * don't work between `beginContour()` and
 * <a href="#/p5/endContour">endContour()</a>. It's also not possible to use
 * other shapes, such as <a href="#/p5/ellipse">ellipse()</a> or
 * <a href="#/p5/rect">rect()</a>, between `beginContour()` and
 * <a href="#/p5/endContour">endContour()</a>.
 * 
 * Note: The vertices that define a negative space must "wind" in the opposite
 * direction from the outer shape. First, draw vertices for the outer shape
 * clockwise order. Then, draw vertices for the negative space in
 * counter-clockwise order.
 */
function beginContour(): void;

/**
 * Stops creating a hole within a flat shape.
 * 
 * The <a href="#/p5/beginContour">beginContour()</a> and `endContour()`
 * functions allow for creating negative space within custom shapes that are
 * flat. <a href="#/p5/beginContour">beginContour()</a> begins adding vertices
 * to a negative space and `endContour()` stops adding them.
 * <a href="#/p5/beginContour">beginContour()</a> and `endContour()` must be
 * called between <a href="#/p5/beginShape">beginShape()</a> and
 * <a href="#/p5/endShape">endShape()</a>.
 * 
 * By default,
 * the controur has an `OPEN` end, and to close it,
 * call `endContour(CLOSE)`. The CLOSE contour mode closes splines smoothly.
 * 
 * Transformations such as <a href="#/p5/translate">translate()</a>,
 * <a href="#/p5/rotate">rotate()</a>, and <a href="#/p5/scale">scale()</a>
 * don't work between <a href="#/p5/beginContour">beginContour()</a> and
 * `endContour()`. It's also not possible to use other shapes, such as
 * <a href="#/p5/ellipse">ellipse()</a> or <a href="#/p5/rect">rect()</a>,
 * between <a href="#/p5/beginContour">beginContour()</a> and `endContour()`.
 * 
 * Note: The vertices that define a negative space must "wind" in the opposite
 * direction from the outer shape. First, draw vertices for the outer shape
 * clockwise order. Then, draw vertices for the negative space in
 * counter-clockwise order.
 * @param mode By default, the value is OPEN
 */
function endContour(mode?: typeof P5.OPEN | typeof P5.CLOSE): void;

/**
 * Sets the ambient color of shapes’ surface material.
 * 
 * The `ambientMaterial()` color sets the components of the
 * <a href="#/p5/ambientLight">ambientLight()</a> 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
 * <a href="#/p5.Color">p5.Color</a> 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 <a href="#/p5/colorMode">colorMode()</a>.
 * 
 * Note: `ambientMaterial()` can only be used in WebGL mode.
 * @param v1 red or hue value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 * @param v2 green or saturation value in the
 * current <a href="#/p5/colorMode">colorMode()</a>.
 * @param v3 blue, brightness, or lightness value in the
 * current <a href="#/p5/colorMode">colorMode()</a>.
 */
function ambientMaterial(v1: number, v2: number, v3: number): void;
function ambientMaterial(gray: number): void;
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
 * <a href="#/p5.Color">p5.Color</a> 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 <a href="#/p5/colorMode">colorMode()</a>.
 * 
 * Note: `emissiveMaterial()` can only be used in WebGL mode.
 * @param v1 red or hue value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 * @param v2 green or saturation value in the
 * current <a href="#/p5/colorMode">colorMode()</a>.
 * @param v3 blue, brightness, or lightness value in the
 * current <a href="#/p5/colorMode">colorMode()</a>.
 * @param alpha alpha value in the current
 * <a href="#/p5/colorMode">colorMode()</a>.
 */
function emissiveMaterial(v1: number, v2: number, v3: number, alpha?: number): void;
function emissiveMaterial(gray: number): void;
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 <a href="#/p5/ambientMaterial">ambientMaterial()</a>,
 * `specularMaterial()` will reflect the full color of light sources including
 * <a href="#/p5/directionalLight">directionalLight()</a>,
 * <a href="#/p5/pointLight">pointLight()</a>,
 * and <a href="#/p5/spotLight">spotLight()</a>. This is what gives it shapes
 * their "shiny" appearance. The material’s shininess can be controlled by the
 * <a href="#/p5/shininess">shininess()</a> 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
 * <a href="#/p5.Color">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 <a href="#/p5/colorMode">colorMode()</a>.
 * @param gray grayscale value between 0 (black) and 255 (white).
 * @param alpha alpha value in the current current
 * <a href="#/p5/colorMode">colorMode()</a>.
 */
function specularMaterial(gray: number, alpha?: number): void;
function specularMaterial(v1: number, v2: number, v3: number, alpha?: number): void;
function specularMaterial(color: P5.Color | number[] | string): void;

/**
 * Sets the amount of gloss ("shininess") of a
 * <a href="#/p5/specularMaterial">specularMaterial()</a>.
 * 
 * Shiny materials focus reflected light more than dull materials.
 * `shininess()` affects the way materials reflect light sources including
 * <a href="#/p5/directionalLight">directionalLight()</a>,
 * <a href="#/p5/pointLight">pointLight()</a>,
 * and <a href="#/p5/spotLight">spotLight()</a>.
 * 
 * The parameter, `shine`, is a number that sets the amount of shininess.
 * `shine` must be greater than 1, which is its default value.
 * @param shine amount of shine.
 */
function shininess(shine: number): void;

/**
 * Sets the amount of "metalness" of a
 * <a href="#/p5/specularMaterial">specularMaterial()</a>.
 * 
 * `metalness()` can make materials appear more metallic. It affects the way
 * materials reflect light sources including
 * affects the way materials reflect light sources including
 * <a href="#/p5/directionalLight">directionalLight()</a>,
 * <a href="#/p5/pointLight">pointLight()</a>,
 * <a href="#/p5/spotLight">spotLight()</a>, and
 * <a href="#/p5/imageLight">imageLight()</a>.
 * 
 * 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 metallic amount of metalness.
 */
function metalness(metallic: number): void;

/**
 * Returns the ID when drawing many instances
 */
function instanceID(): any;

/**
 * Discards the current pixel
 */
function discard(): void;

function getTexture(tex: any, coord: any): any;

/**
 * GLSL built-in function acos
 */
function acos(param0: any): any;

/**
 * GLSL built-in function acosh
 */
function acosh(param0: any): any;

/**
 * GLSL built-in function asin
 */
function asin(param0: any): any;

/**
 * GLSL built-in function asinh
 */
function asinh(param0: any): any;

/**
 * GLSL built-in function atan
 */
function atan(param0: any): any;
function atan(param0: any, param1: any): any;

/**
 * GLSL built-in function atanh
 */
function atanh(param0: any): any;

/**
 * GLSL built-in function cos
 */
function cos(param0: any): any;

/**
 * GLSL built-in function cosh
 */
function cosh(param0: any): any;

/**
 * GLSL built-in function degrees
 */
function degrees(param0: any): any;

/**
 * GLSL built-in function radians
 */
function radians(param0: any): any;

/**
 * GLSL built-in function sin
 */
function sin(param0: any): any;

/**
 * GLSL built-in function sinh
 */
function sinh(param0: any): any;

/**
 * GLSL built-in function tan
 */
function tan(param0: any): any;

/**
 * GLSL built-in function tanh
 */
function tanh(param0: any): any;

/**
 * GLSL built-in function abs
 */
function abs(param0: any): any;
function abs(param0: any): any;

/**
 * GLSL built-in function ceil
 */
function ceil(param0: any): any;

/**
 * GLSL built-in function clamp
 */
function clamp(param0: any, param1: any, param2: any): any;
function clamp(param0: any, param1: any, param2: any): any;
function clamp(param0: any, param1: any, param2: any): any;
function clamp(param0: any, param1: any, param2: any): any;

/**
 * GLSL built-in function dFdx
 */
function dFdx(param0: any): any;

/**
 * GLSL built-in function dFdy
 */
function dFdy(param0: any): any;

/**
 * GLSL built-in function exp
 */
function exp(param0: any): any;

/**
 * GLSL built-in function exp2
 */
function exp2(param0: any): any;

/**
 * GLSL built-in function floor
 */
function floor(param0: any): any;

/**
 * GLSL built-in function fma
 */
function fma(param0: any, param1: any, param2: any): any;

/**
 * GLSL built-in function fract
 */
function fract(param0: any): any;

/**
 * GLSL built-in function fwidth
 */
function fwidth(param0: any): any;

/**
 * GLSL built-in function inversesqrt
 */
function inversesqrt(param0: any): any;

/**
 * GLSL built-in function log
 */
function log(param0: any): any;

/**
 * GLSL built-in function log2
 */
function log2(param0: any): any;

/**
 * GLSL built-in function max
 */
function max(param0: any, param1: any): any;
function max(param0: any, param1: any): any;
function max(param0: any, param1: any): any;
function max(param0: any, param1: any): any;

/**
 * GLSL built-in function min
 */
function min(param0: any, param1: any): any;
function min(param0: any, param1: any): any;
function min(param0: any, param1: any): any;
function min(param0: any, param1: any): any;

/**
 * GLSL built-in function mix
 */
function mix(param0: any, param1: any, param2: any): any;
function mix(param0: any, param1: any, param2: any): any;
function mix(param0: any, param1: any, param2: any): any;

/**
 * GLSL built-in function mod
 */
function mod(param0: any, param1: any): any;
function mod(param0: any, param1: any): any;

/**
 * GLSL built-in function pow
 */
function pow(param0: any, param1: any): any;

/**
 * GLSL built-in function round
 */
function round(param0: any): any;

/**
 * GLSL built-in function roundEven
 */
function roundEven(param0: any): any;

/**
 * GLSL built-in function sign
 */
function sign(param0: any): any;
function sign(param0: any): any;

/**
 * GLSL built-in function smoothstep
 */
function smoothstep(param0: any, param1: any, param2: any): any;
function smoothstep(param0: any, param1: any, param2: any): any;

/**
 * GLSL built-in function sqrt
 */
function sqrt(param0: any): any;

/**
 * GLSL built-in function step
 */
function step(param0: any, param1: any): any;

/**
 * GLSL built-in function trunc
 */
function trunc(param0: any): any;

/**
 * GLSL built-in function cross
 */
function cross(param0: any, param1: any): any;

/**
 * GLSL built-in function distance
 */
function distance(param0: any, param1: any): any;

/**
 * GLSL built-in function dot
 */
function dot(param0: any, param1: any): any;

/**
 * GLSL built-in function equal
 */
function equal(param0: any, param1: any): any;
function equal(param0: any, param1: any): any;
function equal(param0: any, param1: any): any;

/**
 * GLSL built-in function faceforward
 */
function faceforward(param0: any, param1: any, param2: any): any;

/**
 * GLSL built-in function normalize
 */
function normalize(param0: any): any;

/**
 * GLSL built-in function notEqual
 */
function notEqual(param0: any, param1: any): any;
function notEqual(param0: any, param1: any): any;
function notEqual(param0: any, param1: any): any;

/**
 * GLSL built-in function reflect
 */
function reflect(param0: any, param1: any): any;

/**
 * GLSL built-in function refract
 */
function refract(param0: any, param1: any, param2: any): any;

/**
 * Create a Float uniform variable
 */
function uniformFloat(defaultValue?: any): any;

/**
 * Create a shared Float to pass data between hooks
 */
function varyingFloat(): any;

/**
 * Create a shared Float to pass data between hooks
 */
function sharedFloat(): any;

/**
 * Create a Vec2 uniform variable
 */
function uniformVec2(defaultValue?: any): any;

/**
 * Create a shared Vec2 to pass data between hooks
 */
function varyingVec2(): any;

/**
 * Create a shared Vec2 to pass data between hooks
 */
function sharedVec2(): any;

/**
 * Create a Vec2 uniform variable
 */
function uniformVector2(defaultValue?: any): any;

/**
 * Create a shared Vec2 to pass data between hooks
 */
function varyingVector2(): any;

/**
 * Create a shared Vec2 to pass data between hooks
 */
function sharedVector2(): any;

/**
 * Create a Vec3 uniform variable
 */
function uniformVec3(defaultValue?: any): any;

/**
 * Create a shared Vec3 to pass data between hooks
 */
function varyingVec3(): any;

/**
 * Create a shared Vec3 to pass data between hooks
 */
function sharedVec3(): any;

/**
 * Create a Vec3 uniform variable
 */
function uniformVector3(defaultValue?: any): any;

/**
 * Create a shared Vec3 to pass data between hooks
 */
function varyingVector3(): any;

/**
 * Create a shared Vec3 to pass data between hooks
 */
function sharedVector3(): any;

/**
 * Create a Vec4 uniform variable
 */
function uniformVec4(defaultValue?: any): any;

/**
 * Create a shared Vec4 to pass data between hooks
 */
function varyingVec4(): any;

/**
 * Create a shared Vec4 to pass data between hooks
 */
function sharedVec4(): any;

/**
 * Create a Vec4 uniform variable
 */
function uniformVector4(defaultValue?: any): any;

/**
 * Create a shared Vec4 to pass data between hooks
 */
function varyingVector4(): any;

/**
 * Create a shared Vec4 to pass data between hooks
 */
function sharedVector4(): any;

/**
 * Create a Int uniform variable
 */
function uniformInt(defaultValue?: any): any;

/**
 * Create a shared Int to pass data between hooks
 */
function varyingInt(): any;

/**
 * Create a shared Int to pass data between hooks
 */
function sharedInt(): any;

/**
 * Create a IVec2 uniform variable
 */
function uniformIVec2(defaultValue?: any): any;

/**
 * Create a shared IVec2 to pass data between hooks
 */
function varyingIVec2(): any;

/**
 * Create a shared IVec2 to pass data between hooks
 */
function sharedIVec2(): any;

/**
 * Create a IVec2 uniform variable
 */
function uniformIVector2(defaultValue?: any): any;

/**
 * Create a shared IVec2 to pass data between hooks
 */
function varyingIVector2(): any;

/**
 * Create a shared IVec2 to pass data between hooks
 */
function sharedIVector2(): any;

/**
 * Create a IVec3 uniform variable
 */
function uniformIVec3(defaultValue?: any): any;

/**
 * Create a shared IVec3 to pass data between hooks
 */
function varyingIVec3(): any;

/**
 * Create a shared IVec3 to pass data between hooks
 */
function sharedIVec3(): any;

/**
 * Create a IVec3 uniform variable
 */
function uniformIVector3(defaultValue?: any): any;

/**
 * Create a shared IVec3 to pass data between hooks
 */
function varyingIVector3(): any;

/**
 * Create a shared IVec3 to pass data between hooks
 */
function sharedIVector3(): any;

/**
 * Create a IVec4 uniform variable
 */
function uniformIVec4(defaultValue?: any): any;

/**
 * Create a shared IVec4 to pass data between hooks
 */
function varyingIVec4(): any;

/**
 * Create a shared IVec4 to pass data between hooks
 */
function sharedIVec4(): any;

/**
 * Create a IVec4 uniform variable
 */
function uniformIVector4(defaultValue?: any): any;

/**
 * Create a shared IVec4 to pass data between hooks
 */
function varyingIVector4(): any;

/**
 * Create a shared IVec4 to pass data between hooks
 */
function sharedIVector4(): any;

/**
 * Create a Bool uniform variable
 */
function uniformBool(defaultValue?: any): any;

/**
 * Create a shared Bool to pass data between hooks
 */
function varyingBool(): any;

/**
 * Create a shared Bool to pass data between hooks
 */
function sharedBool(): any;

/**
 * Create a BVec2 uniform variable
 */
function uniformBVec2(defaultValue?: any): any;

/**
 * Create a shared BVec2 to pass data between hooks
 */
function varyingBVec2(): any;

/**
 * Create a shared BVec2 to pass data between hooks
 */
function sharedBVec2(): any;

/**
 * Create a BVec2 uniform variable
 */
function uniformBVector2(defaultValue?: any): any;

/**
 * Create a shared BVec2 to pass data between hooks
 */
function varyingBVector2(): any;

/**
 * Create a shared BVec2 to pass data between hooks
 */
function sharedBVector2(): any;

/**
 * Create a BVec3 uniform variable
 */
function uniformBVec3(defaultValue?: any): any;

/**
 * Create a shared BVec3 to pass data between hooks
 */
function varyingBVec3(): any;

/**
 * Create a shared BVec3 to pass data between hooks
 */
function sharedBVec3(): any;

/**
 * Create a BVec3 uniform variable
 */
function uniformBVector3(defaultValue?: any): any;

/**
 * Create a shared BVec3 to pass data between hooks
 */
function varyingBVector3(): any;

/**
 * Create a shared BVec3 to pass data between hooks
 */
function sharedBVector3(): any;

/**
 * Create a BVec4 uniform variable
 */
function uniformBVec4(defaultValue?: any): any;

/**
 * Create a shared BVec4 to pass data between hooks
 */
function varyingBVec4(): any;

/**
 * Create a shared BVec4 to pass data between hooks
 */
function sharedBVec4(): any;

/**
 * Create a BVec4 uniform variable
 */
function uniformBVector4(defaultValue?: any): any;

/**
 * Create a shared BVec4 to pass data between hooks
 */
function varyingBVector4(): any;

/**
 * Create a shared BVec4 to pass data between hooks
 */
function sharedBVector4(): any;

/**
 * Create a Mat2x2 uniform variable
 */
function uniformMat2x2(defaultValue?: any): any;

/**
 * Create a shared Mat2x2 to pass data between hooks
 */
function varyingMat2x2(): any;

/**
 * Create a shared Mat2x2 to pass data between hooks
 */
function sharedMat2x2(): any;

/**
 * Create a Mat3x3 uniform variable
 */
function uniformMat3x3(defaultValue?: any): any;

/**
 * Create a shared Mat3x3 to pass data between hooks
 */
function varyingMat3x3(): any;

/**
 * Create a shared Mat3x3 to pass data between hooks
 */
function sharedMat3x3(): any;

/**
 * Create a Mat4x4 uniform variable
 */
function uniformMat4x4(defaultValue?: any): any;

/**
 * Create a shared Mat4x4 to pass data between hooks
 */
function varyingMat4x4(): any;

/**
 * Create a shared Mat4x4 to pass data between hooks
 */
function sharedMat4x4(): any;

/**
 * Create a Sampler2D uniform variable
 */
function uniformSampler2D(defaultValue?: any): any;

/**
 * Create a shared Sampler2D to pass data between hooks
 */
function varyingSampler2D(): any;

/**
 * Create a shared Sampler2D to pass data between hooks
 */
function sharedSampler2D(): any;

/**
 * Create a Sampler2D uniform variable
 */
function uniformTexture(defaultValue?: any): any;

/**
 * Create a shared Sampler2D to pass data between hooks
 */
function varyingTexture(): any;

/**
 * Create a shared Sampler2D to pass data between hooks
 */
function sharedTexture(): any;

/**
 * Create a Sampler uniform variable
 */
function uniformSampler(defaultValue?: any): any;

/**
 * Create a shared Sampler to pass data between hooks
 */
function varyingSampler(): any;

/**
 * Create a shared Sampler to pass data between hooks
 */
function sharedSampler(): any;

/**
 * GLSL type constructor for float
 */
function float(value: any): any;

/**
 * GLSL type constructor for vec2
 */
function vec2(value: any): any;

/**
 * GLSL type constructor for vec3
 */
function vec3(value: any): any;

/**
 * GLSL type constructor for vec4
 */
function vec4(value: any): any;

/**
 * GLSL type constructor for int
 */
function int(value: any): any;

/**
 * GLSL type constructor for ivec2
 */
function ivec2(value: any): any;

/**
 * GLSL type constructor for ivec3
 */
function ivec3(value: any): any;

/**
 * GLSL type constructor for ivec4
 */
function ivec4(value: any): any;

/**
 * GLSL type constructor for bool
 */
function bool(value: any): any;

/**
 * GLSL type constructor for bvec2
 */
function bvec2(value: any): any;

/**
 * GLSL type constructor for bvec3
 */
function bvec3(value: any): any;

/**
 * GLSL type constructor for bvec4
 */
function bvec4(value: any): any;

/**
 * GLSL type constructor for mat2x2
 */
function mat2x2(value: any): any;

/**
 * GLSL type constructor for mat3x3
 */
function mat3x3(value: any): any;

/**
 * GLSL type constructor for mat4x4
 */
function mat4x4(value: any): any;

/**
 * GLSL type constructor for sampler2D
 */
function sampler2D(value: any): any;

/**
 * GLSL type constructor for sampler
 */
function sampler(value: any): any;

}

export default p5;

