// This file is auto-generated from JSDoc documentation declare const VIDEO: 'video'; declare const __VIDEO: typeof VIDEO; /** * Version of this p5.js. */ declare const VERSION: string; declare const __VERSION: typeof VERSION; declare const RGB: 'rgb'; declare const __RGB: typeof RGB; declare const AUDIO: 'audio'; declare const __AUDIO: typeof AUDIO; declare const RGBHDR: 'rgbhdr'; declare const __RGBHDR: typeof RGBHDR; /** * The default, two-dimensional renderer in p5.js. * * Use this when calling (for example, * `createCanvas(400, 400, P2D)`) to specify a 2D context. */ declare const P2D: 'p2d'; declare const __P2D: typeof P2D; /** * HSB (hue, saturation, brightness) is a type of color model. * You can learn more about it at * HSB. */ declare const HSB: 'hsb'; declare const __HSB: typeof 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. */ declare const deviceOrientation: 'landscape' | 'portrait'; declare const __deviceOrientation: typeof deviceOrientation; /** * The system variable accelerationX always contains the acceleration of the * device along the x axis. Value is represented as meters per second squared. */ declare const accelerationX: number; declare const __accelerationX: typeof accelerationX; /** * The system variable accelerationY always contains the acceleration of the * device along the y axis. Value is represented as meters per second squared. */ declare const accelerationY: number; declare const __accelerationY: typeof accelerationY; /** * A `Number` system variable that tracks the mouse's horizontal movement. * * `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 * requestPointerLock() is active. */ declare const movedX: number; declare const __movedX: typeof movedX; /** * The system variable accelerationZ always contains the acceleration of the * device along the z axis. Value is represented as meters per second squared. */ declare const accelerationZ: number; declare const __accelerationZ: typeof 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. */ declare const pAccelerationX: number; declare const __pAccelerationX: typeof 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. */ declare const pAccelerationY: number; declare const __pAccelerationY: typeof 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 * requestPointerLock() is active. */ declare const movedY: number; declare const __movedY: typeof movedY; /** * 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. */ declare const pAccelerationZ: number; declare const __pAccelerationZ: typeof pAccelerationZ; /** * A `Boolean` system variable that's `true` if any key is currently pressed * and `false` if not. */ declare const keyIsPressed: boolean; declare const __keyIsPressed: typeof keyIsPressed; /** * A `Number` variable that tracks the number of frames drawn since the sketch * started. * * `frameCount`'s value is 0 inside setup(). It * increments by 1 each time the code in draw() * finishes executing. */ declare const frameCount: number; declare const __frameCount: typeof frameCount; /** * The system variable rotationX always contains the rotation of the * device along the x axis. If the sketch * angleMode() 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. */ declare const rotationX: number; declare const __rotationX: typeof 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 * draw() to execute during the previous frame. It's * useful for simulating physics. */ declare const deltaTime: number; declare const __deltaTime: typeof deltaTime; /** * The system variable rotationY always contains the rotation of the * device along the y axis. If the sketch * angleMode() 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. */ declare const rotationY: number; declare const __rotationY: typeof rotationY; /** * A `String` system variable that contains the value of the last key typed. * * The key variable is helpful for checking whether an * ASCII * 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 keyIsDown() function should * be used to check for multiple different key presses at the same time. */ declare const key: string; declare const __key: typeof 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. */ declare const focused: boolean; declare const __focused: typeof 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. */ declare const mouseX: number; declare const __mouseX: typeof mouseX; /** * The system variable rotationZ always contains the rotation of the * device along the z axis. If the sketch * angleMode() 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. */ declare const rotationZ: number; declare const __rotationZ: typeof 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 angleMode() 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. */ declare const pRotationX: number; declare const __pRotationX: typeof 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 angleMode() 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. */ declare const pRotationY: number; declare const __pRotationY: typeof pRotationY; /** * A `Number` system variable that tracks the mouse's vertical position. * * `mouseY` keeps track of the mouse's position relative to the * top-left corner of the canvas. For example, if the mouse is 50 pixels from * the top edge of the canvas, then `mouseY` will be 50. * * If touch is used instead of the mouse, then `mouseY` will hold the * y-coordinate of the most recent touch point. */ declare const mouseY: number; declare const __mouseY: typeof mouseY; /** * The system variable pRotationZ always contains the rotation of the * device along the z axis in the frame previous to the current frame. * If the sketch angleMode() 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. */ declare const pRotationZ: number; declare const __pRotationZ: typeof 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 * mouseX 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 mouseX * value at the start of each touch event. */ declare const pmouseX: number; declare const __pmouseX: typeof 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 key, 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 KeyboardEvent.code * * 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) { * // .. * }`

The table below summarizes how the main keyboard-related system variables changed between p5.js 1.x and 2.x.

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Variablep5.js 1.x p5.js 2.x
keyText string (e.g., "ArrowUp").Text string (e.g., "ArrowUp", "f" or "F").
codeNot supported.Text String (e.g., "ArrowUp", "KeyF").
keyCodeNumber (e.g., 70).Number (unchanged; e.g., 70).
System variables (BACKSPACE, UP_ARROW, …)NumberText String (e.g., "ArrowUp").
*/ declare const code: string; declare const __code: typeof code; /** * When a device is rotated, the axis that triggers the deviceTurned() * method is stored in the turnAxis variable. The turnAxis variable is only defined within * the scope of deviceTurned(). */ declare const turnAxis: string; declare const __turnAxis: typeof 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 * mouseY 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 mouseY * value at the start of each touch event. */ declare const pmouseY: number; declare const __pmouseY: typeof 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 mouseX to track the mouse’s * x-coordinate within the canvas. */ declare const winMouseX: number; declare const __winMouseX: typeof 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 key 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 * keycode.info. */ declare const keyCode: number; declare const __keyCode: typeof 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 mouseY to track the mouse’s * y-coordinate within the canvas. */ declare const winMouseY: number; declare const __winMouseY: typeof 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. * * - `P2DHDR` whose value is `'p2d-hdr'` (used for HDR 2D sketches, if available). * * See setAttributes() for ways to set the * WebGL version. */ declare const webglVersion: 'webgl' | 'webgl2'; declare const __webglVersion: typeof 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 * winMouseX 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 * winMouseX value at the start of each touch * event. * * Note: Use pmouseX to track the mouse’s previous * x-coordinate within the canvas. */ declare const pwinMouseX: number; declare const __pwinMouseX: typeof 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 pixelDensity(). * * Note: The actual screen width can be computed as * `displayWidth * pixelDensity()`. */ declare const displayWidth: number; declare const __displayWidth: typeof 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 pixelDensity(). * * Note: The actual screen height can be computed as * `displayHeight * pixelDensity()`. */ declare const displayHeight: number; declare const __displayHeight: typeof 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 * winMouseY 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 * winMouseY value at the start of each touch * event. * * Note: Use pmouseY to track the mouse’s previous * y-coordinate within the canvas. */ declare const pwinMouseY: number; declare const __pwinMouseY: typeof pwinMouseY; /** * A `Number` variable that stores the width of the browser's viewport. * * The layout viewport * is the area within the browser that's available for drawing. */ declare const windowWidth: number; declare const __windowWidth: typeof windowWidth; /** * A `Number` variable that stores the height of the browser's viewport. * * The layout viewport * is the area within the browser that's available for drawing. */ declare const windowHeight: number; declare const __windowHeight: typeof 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 * MDN * for more information. */ declare const mouseButton: { left: boolean; center: boolean; right: boolean }; declare const __mouseButton: typeof 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); * }` */ declare const touches: object[]; declare const __touches: typeof touches; /** * A `Boolean` system variable that's `true` if the mouse is pressed and * `false` if not. */ declare const mouseIsPressed: boolean; declare const __mouseIsPressed: typeof mouseIsPressed; declare const HSL: 'hsl'; declare const __HSL: typeof HSL; /** * A high-dynamic-range (HDR) 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, P2DHDR)`. */ declare const P2DHDR: 'p2d-hdr'; declare const __P2DHDR: typeof P2DHDR; declare const HWB: 'hwb'; declare const __HWB: typeof HWB; /** * A `String` constant that's used to set the * angleMode(). * * By default, functions such as rotate() and * sin() 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˚. */ declare const DEGREES: 'degrees'; declare const __DEGREES: typeof DEGREES; declare const LAB: 'lab'; declare const __LAB: typeof LAB; declare const LCH: 'lch'; declare const __LCH: typeof LCH; declare const OKLAB: 'oklab'; declare const __OKLAB: typeof 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 `P2D` 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 the tutorial page about coordinates and transformations. * * - 3D Shapes - `WEBGL` mode can be used to draw 3-dimensional shapes like box(), sphere(), cone(), and more. See the tutorial page about custom geometry 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 the wiki section about shapes for a more information and an example. * * - Textures - A texture is like a skin that wraps onto a shape. See the wiki section about textures for examples of mapping images onto surfaces with textures. * * - Materials and Lighting - `WEBGL` offers different types of lights like ambientLight() to place around a scene. Materials like specularMaterial() reflect the lighting to convey shape and depth. See the tutorial page for styling and appearance to experiment with different combinations. * * - Camera - The viewport of a `WEBGL` sketch can be adjusted by changing camera attributes. See the tutorial page section about cameras for an explanation of camera controls. * * - Text - `WEBGL` requires opentype/truetype font files to be preloaded using loadFont(). See the wiki section about text 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 introduction to shaders 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 all the interactive WEBGL tutorials in the "Tutorials" section of this website, or read the wiki article "Getting started with WebGL in p5". */ declare const WEBGL: 'webgl'; declare const __WEBGL: typeof WEBGL; declare const OKLCH: 'oklch'; declare const __OKLCH: typeof OKLCH; /** * 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. */ declare const WEBGL2: 'webgl2'; declare const __WEBGL2: typeof WEBGL2; declare const RGBA: 'rgba'; declare const __RGBA: typeof RGBA; /** * A constant used for creating a WebGPU rendering context */ declare const WEBGPU: 'webgpu'; declare const __WEBGPU: typeof WEBGPU; declare const ARROW: 'default'; declare const __ARROW: typeof ARROW; /** * A `String` constant that's used to set the * angleMode(). * * By default, functions such as rotate() and * sin() 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 * angleMode() has been set to * DEGREES. * * Note: `TWO_PI` radians equals 360˚. */ declare const RADIANS: 'radians'; declare const __RADIANS: typeof RADIANS; declare const SIMPLE: string; declare const __SIMPLE: typeof SIMPLE; declare const FULL: string; declare const __FULL: typeof FULL; declare const CROSS: 'crosshair'; declare const __CROSS: typeof CROSS; declare const HAND: 'pointer'; declare const __HAND: typeof HAND; declare const MOVE: 'move'; declare const __MOVE: typeof MOVE; declare const TEXT: 'text'; declare const __TEXT: typeof TEXT; declare const WAIT: 'wait'; declare const __WAIT: typeof WAIT; /** * A shader hook block that modifies the world-space properties of each vertex in a shader. This hook can be used inside `buildColorShader()` and similar shader `modify()` 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: * * - `buildMaterialShader()` * * - `buildNormalShader()` * * - `buildColorShader()` * * - `buildStrokeShader()` */ declare const worldInputs: object; declare const __worldInputs: typeof worldInputs; /** * A shader hook block that modifies how color components are combined in the fragment shader. This hook can be used inside `buildMaterialShader()` and similar shader `modify()` 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: * * - `buildMaterialShader()` */ declare const combineColors: object; declare const __combineColors: typeof combineColors; /** * A shader hook block that modifies the properties of each pixel before the final color is calculated. This hook can be used inside `buildMaterialShader()` and similar shader `modify()` 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 `buildMaterialShader()`: * * - `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 `buildStrokeShader()`: * * - `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: * * - `buildMaterialShader()` * * - `buildStrokeShader()` */ declare const pixelInputs: object; declare const __pixelInputs: typeof pixelInputs; /** * A shader hook block that modifies the final color of each pixel after all lighting is applied. This hook can be used inside `buildMaterialShader()` and similar shader `modify()` 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). * * 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: * * - `buildColorShader()` * * - `buildMaterialShader()` * * - `buildNormalShader()` * * - `buildStrokeShader()` */ declare const finalColor: any; declare const __finalColor: typeof finalColor; /** * A shader hook block that sets the color for each pixel in a filter shader. This hook can be used inside `buildFilterShader()` 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: * * - `buildFilterShader()` */ declare const filterColor: object; declare const __filterColor: typeof filterColor; /** * A shader hook block to modify the properties of each vertex before any transformations are applied. This hook can be used inside `buildMaterialShader()` and similar shader `modify()` 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: * * - `buildColorShader()` * * - `buildMaterialShader()` * * - `buildNormalShader()` * * - `buildStrokeShader()` */ declare const objectInputs: object; declare const __objectInputs: typeof objectInputs; /** * A shader hook block that adjusts vertex properties from the perspective of the camera. This hook can be used inside `buildMaterialShader()` and similar shader `modify()` 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: * * - `buildColorShader()` * * - `buildMaterialShader()` * * - `buildNormalShader()` * * - `buildStrokeShader()` */ declare const cameraInputs: object; declare const __cameraInputs: typeof cameraInputs; /** * 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˚. */ declare const HALF_PI: number; declare const __HALF_PI: typeof HALF_PI; /** * 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˚. */ declare const PI: number; declare const __PI: typeof 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˚. */ declare const QUARTER_PI: number; declare const __QUARTER_PI: typeof 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˚. */ declare const TAU: number; declare const __TAU: typeof 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˚. */ declare const TWO_PI: number; declare const __TWO_PI: typeof TWO_PI; declare const DEG_TO_RAD: number; declare const __DEG_TO_RAD: typeof DEG_TO_RAD; declare const RAD_TO_DEG: number; declare const __RAD_TO_DEG: typeof RAD_TO_DEG; declare const CORNER: 'corner'; declare const __CORNER: typeof CORNER; declare const CORNERS: 'corners'; declare const __CORNERS: typeof CORNERS; declare const RADIUS: 'radius'; declare const __RADIUS: typeof RADIUS; declare const RIGHT: 'right'; declare const __RIGHT: typeof RIGHT; declare const LEFT: 'left'; declare const __LEFT: typeof LEFT; declare const CENTER: 'center'; declare const __CENTER: typeof CENTER; declare const TOP: 'top'; declare const __TOP: typeof TOP; declare const BOTTOM: 'bottom'; declare const __BOTTOM: typeof BOTTOM; /** * A system variable that provides direct access to the sketch's * `` element. * * The `` 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 * CanvasRenderingContext2D * object. */ declare const drawingContext: CanvasRenderingContext2D | WebGLRenderingContext | WebGL2RenderingContext; declare const __drawingContext: typeof drawingContext; declare const BASELINE: 'alphabetic'; declare const __BASELINE: typeof BASELINE; declare const POINTS: 0; declare const __POINTS: typeof POINTS; declare const LINES: 1; declare const __LINES: typeof LINES; declare const LINE_STRIP: 3; declare const __LINE_STRIP: typeof LINE_STRIP; declare const LINE_LOOP: 2; declare const __LINE_LOOP: typeof LINE_LOOP; declare const TRIANGLES: 4; declare const __TRIANGLES: typeof TRIANGLES; /** * Turns off the parts of the Friendly Error System (FES) that impact performance. * * The FES * can cause sketches to draw slowly because it does extra work behind the * scenes. For example, the FES checks the arguments passed to functions, * which takes time to process. Disabling the FES can significantly improve * performance by turning off these checks. */ declare let disableFriendlyErrors: boolean; declare let __disableFriendlyErrors: typeof disableFriendlyErrors; declare const TRIANGLE_FAN: 6; declare const __TRIANGLE_FAN: typeof TRIANGLE_FAN; declare const TRIANGLE_STRIP: 5; declare const __TRIANGLE_STRIP: typeof TRIANGLE_STRIP; declare const QUADS: 'quads'; declare const __QUADS: typeof QUADS; declare const QUAD_STRIP: 'quad_strip'; declare const __QUAD_STRIP: typeof QUAD_STRIP; declare const TESS: 'tess'; declare const __TESS: typeof TESS; declare const EMPTY_PATH: 7; declare const __EMPTY_PATH: typeof EMPTY_PATH; declare const PATH: 8; declare const __PATH: typeof PATH; declare const CLOSE: 'close'; declare const __CLOSE: typeof CLOSE; declare const OPEN: 'open'; declare const __OPEN: typeof OPEN; declare const CHORD: 'chord'; declare const __CHORD: typeof CHORD; declare const PIE: 'pie'; declare const __PIE: typeof PIE; declare const PROJECT: 'square'; declare const __PROJECT: typeof PROJECT; declare const SQUARE: 'butt'; declare const __SQUARE: typeof SQUARE; declare const ROUND: 'round'; declare const __ROUND: typeof ROUND; declare const BEVEL: 'bevel'; declare const __BEVEL: typeof BEVEL; declare const MITER: 'miter'; declare const __MITER: typeof 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 size function as AUTO, at a time. */ declare const AUTO: 'auto'; declare const __AUTO: typeof AUTO; declare const ALT: 'Alt'; declare const __ALT: typeof ALT; declare const BACKSPACE: 'Backspace'; declare const __BACKSPACE: typeof BACKSPACE; declare const CONTROL: 'Control' | 'Control'; declare const __CONTROL: typeof CONTROL; declare const DELETE: 'Delete'; declare const __DELETE: typeof DELETE; declare const DOWN_ARROW: 'ArrowDown'; declare const __DOWN_ARROW: typeof DOWN_ARROW; declare const ENTER: 'Enter'; declare const __ENTER: typeof ENTER; declare const ESCAPE: 'Escape'; declare const __ESCAPE: typeof ESCAPE; declare const LEFT_ARROW: 'ArrowLeft'; declare const __LEFT_ARROW: typeof LEFT_ARROW; declare const OPTION: 'Alt'; declare const __OPTION: typeof OPTION; declare const RETURN: 'Enter'; declare const __RETURN: typeof RETURN; declare const RIGHT_ARROW: 'ArrowRight'; declare const __RIGHT_ARROW: typeof RIGHT_ARROW; declare const SHIFT: 'Shift'; declare const __SHIFT: typeof SHIFT; declare const TAB: 'Tab'; declare const __TAB: typeof TAB; declare const UP_ARROW: 'ArrowUp'; declare const __UP_ARROW: typeof UP_ARROW; declare const BLEND: 'source-over'; declare const __BLEND: typeof BLEND; declare const REMOVE: 'destination-out'; declare const __REMOVE: typeof REMOVE; declare const ADD: 'lighter'; declare const __ADD: typeof ADD; declare const DARKEST: 'darken'; declare const __DARKEST: typeof DARKEST; declare const LIGHTEST: 'lighten'; declare const __LIGHTEST: typeof LIGHTEST; declare const DIFFERENCE: 'difference'; declare const __DIFFERENCE: typeof DIFFERENCE; declare const SUBTRACT: 'subtract'; declare const __SUBTRACT: typeof SUBTRACT; declare const EXCLUSION: 'exclusion'; declare const __EXCLUSION: typeof EXCLUSION; declare const MULTIPLY: 'multiply'; declare const __MULTIPLY: typeof MULTIPLY; /** * 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 pixelDensity() function returns * the pixel density of the canvas. High density displays often have a * pixelDensity() 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 loadPixels() function * must be called before accessing the `pixels` array. The * updatePixels() function must be called * after any changes are made. */ declare const pixels: number[]; declare const __pixels: typeof pixels; declare const SCREEN: 'screen'; declare const __SCREEN: typeof SCREEN; declare const REPLACE: 'copy'; declare const __REPLACE: typeof REPLACE; declare const OVERLAY: 'overlay'; declare const __OVERLAY: typeof OVERLAY; declare const HARD_LIGHT: 'hard-light'; declare const __HARD_LIGHT: typeof HARD_LIGHT; declare const SOFT_LIGHT: 'soft-light'; declare const __SOFT_LIGHT: typeof SOFT_LIGHT; declare const DODGE: 'color-dodge'; declare const __DODGE: typeof DODGE; declare const BURN: 'color-burn'; declare const __BURN: typeof BURN; declare const THRESHOLD: 'threshold'; declare const __THRESHOLD: typeof THRESHOLD; declare const GRAY: 'gray'; declare const __GRAY: typeof GRAY; declare const OPAQUE: 'opaque'; declare const __OPAQUE: typeof OPAQUE; declare const INVERT: 'invert'; declare const __INVERT: typeof INVERT; declare const POSTERIZE: 'posterize'; declare const __POSTERIZE: typeof POSTERIZE; declare const DILATE: 'dilate'; declare const __DILATE: typeof DILATE; declare const ERODE: 'erode'; declare const __ERODE: typeof ERODE; declare const BLUR: 'blur'; declare const __BLUR: typeof BLUR; declare const NORMAL: 'normal'; declare const __NORMAL: typeof NORMAL; declare const ITALIC: 'italic'; declare const __ITALIC: typeof ITALIC; declare const BOLD: 'bold'; declare const __BOLD: typeof BOLD; declare const BOLDITALIC: 'bold italic'; declare const __BOLDITALIC: typeof BOLDITALIC; declare const CHAR: 'CHAR'; declare const __CHAR: typeof CHAR; declare const WORD: 'WORD'; declare const __WORD: typeof WORD; declare const LINEAR: 'linear'; declare const __LINEAR: typeof LINEAR; declare const QUADRATIC: 'quadratic'; declare const __QUADRATIC: typeof QUADRATIC; declare const BEZIER: 'bezier'; declare const __BEZIER: typeof BEZIER; declare const CURVE: 'curve'; declare const __CURVE: typeof CURVE; declare const STROKE: 'stroke'; declare const __STROKE: typeof STROKE; declare const FILL: 'fill'; declare const __FILL: typeof FILL; declare const TEXTURE: 'texture'; declare const __TEXTURE: typeof TEXTURE; declare const IMMEDIATE: 'immediate'; declare const __IMMEDIATE: typeof IMMEDIATE; declare const IMAGE: 'image'; declare const __IMAGE: typeof IMAGE; declare const NEAREST: 'nearest'; declare const __NEAREST: typeof NEAREST; declare const REPEAT: 'repeat'; declare const __REPEAT: typeof REPEAT; declare const CLAMP: 'clamp'; declare const __CLAMP: typeof CLAMP; declare const MIRROR: 'mirror'; declare const __MIRROR: typeof MIRROR; declare const FLAT: 'flat'; declare const __FLAT: typeof FLAT; declare const SMOOTH: 'smooth'; declare const __SMOOTH: typeof SMOOTH; declare const LANDSCAPE: 'landscape'; declare const __LANDSCAPE: typeof LANDSCAPE; declare const PORTRAIT: 'portrait'; declare const __PORTRAIT: typeof PORTRAIT; declare const GRID: 'grid'; declare const __GRID: typeof GRID; declare const AXES: 'axes'; declare const __AXES: typeof AXES; declare const LABEL: 'label'; declare const __LABEL: typeof LABEL; declare const FALLBACK: 'fallback'; declare const __FALLBACK: typeof FALLBACK; declare const CONTAIN: 'contain'; declare const __CONTAIN: typeof CONTAIN; declare const COVER: 'cover'; declare const __COVER: typeof COVER; /** * A `Number` variable that stores the width of the canvas in pixels. * * `width`'s default value is 100. Calling * createCanvas() or * resizeCanvas() changes the value of * `width`. Calling noCanvas() sets its value to * 0. */ declare const width: number; declare const __width: typeof width; /** * A `Number` variable that stores the height of the canvas in pixels. * * `height`'s default value is 100. Calling * createCanvas() or * resizeCanvas() changes the value of * `height`. Calling noCanvas() sets its value to * 0. */ declare const height: number; declare const __height: typeof height; declare const UNSIGNED_BYTE: 'unsigned-byte'; declare const __UNSIGNED_BYTE: typeof UNSIGNED_BYTE; declare const UNSIGNED_INT: 'unsigned-int'; declare const __UNSIGNED_INT: typeof UNSIGNED_INT; declare const FLOAT: 'float'; declare const __FLOAT: typeof FLOAT; declare const HALF_FLOAT: 'half-float'; declare const __HALF_FLOAT: typeof HALF_FLOAT; /** * The `splineProperty('ends')` mode where splines curve through * their first and last points. */ declare const INCLUDE: Symbol; declare const __INCLUDE: typeof INCLUDE; /** * The `splineProperty('ends')` mode where the first and last points in a spline * affect the direction of the curve, but are not rendered. */ declare const EXCLUDE: Symbol; declare const __EXCLUDE: typeof EXCLUDE; declare class p5 { constructor(sketch?: (p: p5) => void, node?: HTMLElement, sync?: boolean); /** * Loads a p5.js library. * * A library is a function that adds functionality to p5.js by adding methods * and properties for sketches to use, or for automatically running code at * different stages of the p5.js lifecycle. Take a look at the * contributor docs for creating libraries * to learn more about creating libraries. * @param library The library function to register */ static registerAddon(library: Function): void; /** * 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 p5() constructor, as in * `new p5()`. */ remove(): void; remove(): void; remove(): void; remove(): void; /** * Creates a new sketch in "instance" mode. * * All p5.js sketches are instances of the `p5` class. Put another way, all * p5.js sketches are objects with methods including `pInst.setup()`, * `pInst.draw()`, `pInst.circle()`, and `pInst.fill()`. By default, sketches * run in "global mode" to hide some of this complexity. * * In global mode, a default instance of the `p5` class is created * automatically. The default `p5` instance searches the web page's source * code for declarations of system functions such as `setup()`, `draw()`, * and `mousePressed()`, then attaches those functions to itself as methods. * Calling a function such as `circle()` in global mode actually calls the * default `p5` object's `pInst.circle()` method. * * It's often helpful to isolate the code within sketches from the rest of the * code on a web page. Two common use cases are web pages that use other * JavaScript libraries and web pages with multiple sketches. "Instance mode" * makes it easy to support both of these scenarios. * * Instance mode sketches support the same API as global mode sketches. They * use a function to bundle, or encapsulate, an entire sketch. The function * containing the sketch is then passed to the `p5()` constructor. * * The first parameter, `sketch`, is a function that contains the sketch. For * example, the statement `new p5(mySketch)` would create a new instance mode * sketch from a function named `mySketch`. The function should have one * parameter, `p`, that's a `p5` object. * * The second parameter, `node`, is optional. If a string is passed, as in * `new p5(mySketch, 'sketch-one')` the new instance mode sketch will become a * child of the HTML element with the id `sketch-one`. If an HTML element is * passed, as in `new p5(mySketch, myElement)`, then the new instance mode * sketch will become a child of the `Element` object called `myElement`. * @param sketch function containing the sketch. * @param node ID or reference to the HTML element that will contain the sketch. */ p5(sketch: object, node: string | HTMLElement): 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; /** * 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. * @param n number to compute. * @returns absolute value of given number. */ abs(n: number): 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 random() and * randomGaussian() functions. * * By default, random() and * randomGaussian() 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; /** * 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. * @param n number to round up. * @returns rounded up number. */ ceil(n: number): number; /** * Changes where ellipses, circles, and arcs are drawn. * * By default, the first two parameters of * ellipse(), circle(), * and arc() * 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. * @param mode either CENTER, RADIUS, CORNER, or CORNERS */ ellipseMode(mode: typeof p5.CENTER | typeof p5.RADIUS | typeof p5.CORNER | typeof p5.CORNERS): void; /** * 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 * CSS selector string. * * The selector string can be an ID, class, tag name, or a combination. * `select()` returns a p5.Element 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 * p5.Element object, or an * HTMLElement object. * @param selectors CSS selector string of element to search for. * @param container CSS selector string, p5.Element, or * HTMLElement to search within. * @returns p5.Element containing the element. */ select(selectors: string, container?: string | p5.Element | HTMLElement): p5.Element | null; /** * Loads an image to create a p5.Image 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 p5.Image 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 * p5.Image once it * loads. * @param failureCallback function called with event * error if the image fails to load. * @returns the p5.Image object. */ loadImage(path: string | Request, successCallback?: (arg0: p5.Image) => void, failureCallback?: (arg0: Event) => void): Promise; /** * Creates a new p5.Vector 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 * p5.Vector 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. * * p5.Vector 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 * p5.Vector class. * @param x Zero or more numbers, representing each component of the vector. * @returns new p5.Vector 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 draw() from running repeatedly. * * By default, draw() tries to run 60 times per * second. Calling `noLoop()` stops draw() from * repeating. The draw loop can be restarted by calling * loop(). draw() can be run * once by calling redraw(). * * The isLooping() 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 * Writing accessible canvas descriptions * 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 * localStorage object. * 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 * 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 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 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 setup(). * 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 * width and height 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 * HTMLCanvasElement * 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 * HTMLCanvasElement * 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 webglVersion * system variable to check what version is being used, or call * `setAttributes({ version: 1 })` to create a WebGL1 context. * @param width width of the canvas. Defaults to 100. * @param height height of the canvas. Defaults to 100. * @param renderer either P2D, WEBGL, or WEBGPU. 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.P2DHDR | Symbol, canvas?: HTMLCanvasElement): p5.Renderer; createCanvas(width?: number, height?: number, canvas?: HTMLCanvasElement): p5.Renderer; /** * 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 * gridOutput(), 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 * Writing accessible canvas descriptions * 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 * p5.Image 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; /** * Loads vertex and fragment shaders to create a * p5.Shader object. * * Shaders are programs that run on the graphics processing unit (GPU). They * can process many pixels at the same time, making them fast for many * graphics tasks. They’re written in a language called * GLSL * and run along with the rest of the code in a sketch. * * Once the p5.Shader object is created, it can be * used with the shader() function, as in * `shader(myShader)`. A shader program consists of two files, a vertex shader * and a fragment shader. The vertex shader affects where 3D geometry is drawn * on the screen and the fragment shader affects color. * * `loadShader()` loads the vertex and fragment shaders from their `.vert` and * `.frag` files. For example, calling * `loadShader('assets/shader.vert', 'assets/shader.frag')` loads both * required shaders and returns a p5.Shader object. * * The third parameter, `successCallback`, is optional. If a function is * passed, it will be called once the shader has loaded. The callback function * can use the new p5.Shader object as its * parameter. The return value of the `successCallback()` function will be used * as the final return value of `loadShader()`. * * The fourth parameter, `failureCallback`, is also optional. If a function is * passed, it will be called if the shader fails to load. The callback * function can use the event error as its parameter. The return value of the ` * failureCallback()` function will be used as the final return value of `loadShader()`. * * This function returns a `Promise` and should be used in an `async` setup with * `await`. See the examples for the usage syntax. * * Note: Shaders can only be used in WebGL mode. * @param 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 * p5.Shader 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; /** * 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; /** * Creates a new p5.Image object. * * `createImage()` uses the `width` and `height` parameters to set the new * p5.Image object's dimensions in pixels. The new * p5.Image can be modified by updating its * pixels array or by calling its * get() and * set() methods. The * loadPixels() method must be called * before reading or modifying pixel values. The * updatePixels() method must be called * for updates to take effect. * * Note: The new p5.Image object is transparent by * default. * @param width width in pixels. * @param height height in pixels. * @returns new p5.Image object. */ createImage(width: number, height: number): p5.Image; /** * Calculates the arc cosine of a number. * * `acos()` is the inverse of cos(). It expects * arguments in the range -1 to 1. By default, `acos()` returns values in the * range 0 to π (about 3.14). If the * angleMode() is `DEGREES`, then values are * returned in the range 0 to 180. * @param value value whose arc cosine is to be returned. * @returns arc cosine of the given value. */ acos(value: number): number; /** * Draws certain features with jagged (aliased) edges. * * smooth() 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. */ noSmooth(): void; /** * 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 draw() 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; /** * Starts defining a shape that will mask any shapes drawn afterward. * * Any shapes drawn between `beginClip()` and * endClip() will add to the mask shape. The mask * will apply to anything drawn after endClip(). * * 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 * push() and pop() 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 * clip(). * @param options an object containing clip settings. */ beginClip(options?: { invert?: boolean }): void; /** * Creates a light that shines from all directions. * * Ambient light does not come from one direction. Instead, 3D shapes are * lit evenly from all sides. Ambient lights are almost always used in * combination with other types of lights. * * There are three ways to call `ambientLight()` with optional parameters to * set the light’s color. * * The first way to call `ambientLight()` has two parameters, `gray` and * `alpha`. `alpha` is optional. Grayscale and alpha values between 0 and 255 * can be passed to set the ambient light’s color, as in `ambientLight(50)` or * `ambientLight(50, 30)`. * * The second way to call `ambientLight()` has one parameter, color. A * p5.Color 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 colorMode(). * @param v1 red or hue value in the current * colorMode(). * @param v2 green or saturation value in the current * colorMode(). * @param v3 blue, brightness, or lightness value in the current * colorMode(). * @param alpha alpha (transparency) value in the current * colorMode(). */ 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 * CSS selector string. * * The selector string can be an ID, class, tag name, or a combination. * `selectAll()` returns an array of p5.Element * 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 * p5.Element object, or an * HTMLElement object. * @param selectors CSS selector string of element to search for. * @param container CSS selector string, p5.Element, or * HTMLElement to search within. * @returns array of p5.Elements containing any elements found. */ selectAll(selectors: string, container?: string | p5.Element | HTMLElement): p5.Element[]; /** * A shader function that performs smooth Hermite interpolation between `0.0` * and `1.0`. * * 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; /** * Retrieves the current color of a given texture at given coordinates. * * The given coordinates should be between [0, 0] representing the top-left of * the texture, and [1, 1] representing the bottom-right of the texture. * * The given texture could be, for example: * * - p5.Image, * * - a p5.Graphics, or * * - a p5.Framebuffer. * * The retrieved color that is returned will behave like a vec4, with components * for red, green, blue, and alpha, each between 0.0 and 1.0. * * Linear interpolation is used by default. For Framebuffer sources, you can * prevent this by creating the buffer with: * * `createFramebuffer({ * textureFiltering: NEAREST * })`This can be useful if you are using your texture to store data other than color. * See createFramebuffer. * * Note: The `getTexture` function is only available when using p5.strands. * @param texture The texture to sample from. * (e.g. a p5.Image, p5.Graphics, or p5.Framebuffer). * @param coords The 2D coordinates to sample from. * This should be between [0,0] (the top-left) and [1,1] (the bottom-right) * of the texture. It should be compatible with a vec2. * @returns The color of the given texture at the given coordinates. This * will behave as a vec4 holding components r, g, b, and a (alpha), with each component being in the range 0.0 to 1.0. */ 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; /** * 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 * spline() 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; /** * 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[]; /** * Ends defining a mask that was started with * beginClip(). */ endClip(): void; /** * Copies pixels from a source image to a region of the canvas. * * The first parameter, `srcImage`, is the * p5.Image object to blend. The source image can be * the canvas itself or a * p5.Image 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 noLoop() has been * called. * * By default, draw() tries to run 60 times per * second. Calling noLoop() stops * draw() from repeating. The draw loop can be * restarted by calling `loop()`. * * The isLooping() function can be used to check * whether a sketch is looping, as in `isLooping() === true`. */ loop(): void; /** * 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 p5.Vector.dist() to calculate the * distance between two p5.Vector 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; /** * Calculates the arc sine of a number. * * `asin()` is the inverse of sin(). 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 angleMode() is `DEGREES` then values are * returned in the range -90 to 90. * @param value value whose arc sine is to be returned. * @returns arc sine of the given value. */ asin(value: number): number; /** * 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 * setup() function, then `millis()` begins tracking * time before the code in setup() runs. If a * sketch includes asynchronous loading using `async`/`await`, then * `millis()` begins tracking time as soon as the asynchronous code * starts running. * @returns number of milliseconds since starting the sketch. */ millis(): number; /** * 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[]; /** * Applies a transformation matrix to the coordinate system. * * Transformations such as * translate(), * rotate(), and * scale() * 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 * Wikipedia * and MDN * 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: * * 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: * * 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 * push() and pop() 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 draw() 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; /** * Resizes the canvas to a given width and height. * * `resizeCanvas()` immediately clears the canvas and calls * redraw(). It's common to call `resizeCanvas()` * within the body of windowResized() 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 width and * height system variables. For example, calling * `resizeCanvas(300, 500)` resizes the canvas to 300×500 pixels, then sets * width to 300 and * height 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 redraw() function won't be called * immediately. By default, redraw() 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 * redraw(). Defaults * to `false`. */ resizeCanvas(width: number, height: number, noRedraw?: boolean): void; /** * Begins a drawing group that contains its own styles and transformations. * * By default, styles such as fill() and * transformations such as rotate() are applied to * all drawing that follows. The `push()` 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 `push()` and pop(). The bug moves around * the entire canvas as expected. * * Note: `push()` and pop() are always called as a * pair. Both functions are required to begin and end a drawing group. * * `push()` 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 * `push()` and pop() functions. Doing so makes it * easier to add details in the correct part of a drawing. * * `push()` and pop() contain the effects of the * following functions: * * - fill() * * - noFill() * * - noStroke() * * - stroke() * * - tint() * * - noTint() * * - strokeWeight() * * - strokeCap() * * - strokeJoin() * * - imageMode() * * - rectMode() * * - ellipseMode() * * - colorMode() * * - textAlign() * * - textFont() * * - textSize() * * - textLeading() * * - applyMatrix() * * - resetMatrix() * * - rotate() * * - scale() * * - shearX() * * - shearY() * * - translate() * * In WebGL mode, `push()` and pop() contain the * effects of a few additional styles: * * - setCamera() * * - ambientLight() * * - directionalLight() * * - pointLight() texture() * * - specularMaterial() * * - shininess() * * - normalMaterial() * * - shader() */ push(): void; /** * Returns random numbers that can be tuned to feel organic. * * Values returned by random() and * randomGaussian() 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 Tron 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 * noiseSeed() 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 noiseDetail() * 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)`. * @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; /** * 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 * Writing accessible canvas descriptions * 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; /** * Generates a gif from a sketch and saves it to a file. * * `saveGif()` may be called in setup() 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; /** * 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 randomSeed() 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. * @param min lower bound (inclusive). * @param max upper bound (exclusive). * @returns random number. */ random(min?: number, max?: number): number; random(choices: readonly T[]): T; /** * Returns `true` if the draw loop is running and `false` if not. * * By default, draw() tries to run 60 times per * second. Calling noLoop() stops * draw() from repeating. The draw loop can be * restarted by calling loop(). * * 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 * textOutput(), 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 * Writing accessible canvas descriptions * to learn more about making sketches accessible. * @param display either FALLBACK or LABEL. */ gridOutput(display?: typeof p5.FALLBACK | typeof p5.LABEL): 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; /** * Changes where rectangles and squares are drawn. * * By default, the first two parameters of * rect() and square(), * 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 rect(). * * `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. * @param mode either CORNER, CORNERS, CENTER, or RADIUS */ rectMode(mode: typeof p5.CENTER | typeof p5.RADIUS | typeof p5.CORNER | typeof p5.CORNERS): void; /** * Calculates the arc tangent of a number. * * `atan()` is the inverse of tan(). 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 angleMode() is `DEGREES` * then values are returned in the range -90 to 90. * @param value value whose arc tangent is to be returned. * @returns arc tangent of the given value. */ atan(value: number): number; /** * Removes the default canvas. * * By default, a 100×100 pixels canvas is created without needing to call * createCanvas(). `noCanvas()` removes the * default canvas for sketches that don't need it. */ noCanvas(): 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 * localStorage object. * 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 `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[]; /** * Calculates the value of Euler's number e (2.71828...) raised to the power * of a number. * @param n exponent to raise. * @returns e^n */ exp(n: number): number; /** * Returns the current second as a number from 0–59. * @returns current second between 0 and 59. */ second(): number; /** * Loads a JSON file to create an `Object`. * * JavaScript Object Notation * (JSON) * 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; /** * 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 * ellipse() and * ellipseMode() 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; /** * 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 at most 32 by 32 pixels large. * * 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. * @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. */ 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): void; /** * Creates a new p5.Element 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 p5.Element object. */ createElement(tag: string, content?: string): p5.Element; /** * Returns the current year as a number such as 1999. * @returns current year. */ year(): number; /** * Calculates the closest integer value that is less than or equal to the * value of a number. * @param n number to round down. * @returns rounded down number. */ floor(n: number): number; /** * Converts a `Boolean` or `Number` to `String`. * * `str()` converts values to strings. See the * String 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; /** * 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[]; /** * Creates a custom p5.Geometry object from * simpler 3D shapes. * * `buildGeometry()` helps with creating complex 3D shapes from simpler ones * such as sphere(). 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 * p5.Geometry 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 p5.Geometry 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; /** * 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 * bezier() 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; /** * Loads a 3D model to create a * p5.Geometry object. * * `loadModel()` can load 3D models from OBJ and STL files. Once the model is * loaded, it can be displayed with the * model() 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 p5.Geometry object. * @param failureCallback function to call if the model fails to load. Will be passed an `Error` event object. * @returns the p5.Geometry object */ loadModel(path: string | Request, fileType?: string, normalize?: boolean, successCallback?: (arg0: p5.Geometry) => void, failureCallback?: (arg0: Event) => void): Promise; loadModel(path: string | Request, fileType?: string, successCallback?: (arg0: p5.Geometry) => void, failureCallback?: (arg0: Event) => void): Promise; loadModel(path: string | Request, options?: { fileType?: string; successCallback?: (arg0: p5.Geometry) => void; failureCallback?: (arg0: Event) => void; normalize?: boolean; flipU?: boolean; flipV?: boolean }): Promise; /** * 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 randomSeed() 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; /** * Runs the code in draw() once. * * By default, draw() tries to run 60 times per * second. Calling noLoop() stops * draw() from repeating. Calling `redraw()` will * execute the code in the draw() 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 draw(). Defaults to 1. */ redraw(n?: number): Promise; /** * 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 * angleMode() 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; /** * Draws certain features with smooth (antialiased) edges. * * `smooth()` 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. */ smooth(): void; /** * 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[]; /** * Removes all items in the web browser's local storage. * * Web browsers can save small amounts of data using the built-in * localStorage object. * 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 createCanvas() * and p5.Render objects created by * createGraphics(). */ removeElements(): void; /** * Begins adding vertices to a custom shape. * * The `beginShape()` and endShape() functions * allow for creating custom shapes in 2D or 3D. `beginShape()` begins adding * vertices to a custom shape and endShape() 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 * vertex(), * bezierVertex(), and/or * splineVertex(). 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 translate(), * rotate(), and * scale() don't work between `beginShape()` and * endShape(). It's also not possible to use * other shapes, such as ellipse() or * rect(), between `beginShape()` and * endShape(). * @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; /** * Helpers for create methods. */ addElement(): void; addElement(): void; /** * Creates a p5.Color 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 * colorMode() 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. * @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; /** * 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 * push() and pop() functions. * Doing so allows unmasked shapes to be drawn after masked shapes. * * Masks can also be defined with beginClip() * and endClip(). * @param callback a function that draws the mask shape. * @param options an object containing clip settings. */ clip(callback: Function, options?: { invert?: boolean }): void; /** * Adjusts the character of the noise produced by the * noise() 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 * noise() 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; /** * Creates a p5.Graphics object. * * `createGraphics()` creates an offscreen drawing canvas (graphics buffer) * and returns it as a p5.Graphics 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 p5.Graphics 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 p5.Graphics object's rendering mode. If an * existing * HTMLCanvasElement * 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 * HTMLCanvasElement * is passed, as in `createGraphics(900, 500, WEBGL, myCanvas)`, then it will be * used by the graphics buffer. * * Note: In WebGL mode, the p5.Graphics object * will use a WebGL2 context if it's supported by the browser. Check the * webglVersion 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; /** * 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 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. * @param start first value. * @param stop second value. * @param amt number. * @returns lerped value. */ lerp(start: number, stop: number, amt: number): number; /** * 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; /** * Clears a p5.Geometry object from the graphics * processing unit (GPU) memory. * * p5.Geometry 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 p5.Geometry objects * created with buildGeometry() and * loadModel(). * * The parameter, `geometry`, is the p5.Geometry * object to be freed. * * Note: A p5.Geometry 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; /** * 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 angleMode() setting (RADIANS or DEGREES). * @param angle the angle, in radians by default, or according to if angleMode() setting (RADIANS or DEGREES). * @returns cosine of the angle. */ cos(angle: number): number; /** * Sets the specular color for lights. * * `specularColor()` affects lights that bounce off a surface in a preferred * direction. These lights include * directionalLight(), * pointLight(), and * spotLight(). The function helps to create * highlights on p5.Geometry objects that are * styled with specularMaterial(). If a * geometry does not use * specularMaterial(), then * `specularColor()` will have no effect. * * Note: `specularColor()` doesn’t affect lights that bounce in all * directions, including ambientLight() and * imageLight(). * * 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 p5.Color 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 * colorMode(). * @param v1 red or hue value in the current * colorMode(). * @param v2 green or saturation value in the current * colorMode(). * @param v3 blue, brightness, or lightness value in the current * colorMode(). */ 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 `
` element. * * `
` 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 `
`. * @param html inner HTML for the new `
` element. * @returns new p5.Element 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; /** * 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 * angleMode(). * * The second parameter, `axis`, is optional. It's used to orient 3D rotations * in WebGL mode. If a p5.Vector 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 * push() and pop() 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 draw() function won't cause * shapes to spin. * @param angle angle of rotation in the current angleMode(). * @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 * localStorage object. * 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 `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; /** * The setMoveThreshold() function is used to set the movement threshold for * the deviceMoved() function. The default threshold is set to 0.5. * @param value The threshold value */ setMoveThreshold(value: number): 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 bezier() 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; /** * Sets the seed value for the noise() function. * * By default, noise() produces different results * each time a sketch is run. Calling `noiseSeed()` with a constant argument, * such as `noiseSeed(99)`, makes noise() produce the * same results each time a sketch is run. * @param seed seed value. */ noiseSeed(seed: 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 * ellipseMode() 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; /** * 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. * @param n number greater than 0. * @returns natural logarithm of n. */ log(n: number): number; /** * Creates a paragraph element. * * `

` 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 `

`. * @param html inner HTML for the new `

` element. * @returns new p5.Element object. */ createP(html?: string): p5.Element; /** * Creates a new p5.Shader object using GLSL. * * If you are interested in writing shaders, consider using p5.strands shaders using * `buildMaterialShader`, * `buildStrokeShader`, or * `buildFilterShader`. * 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 p5.Shader object is created, it can be * used with the shader() 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 * `modify()` 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; /** * Returns the target frame rate. * * The value is either the system frame rate or the last value passed to * frameRate(). * @returns _targetFrameRate */ getTargetFrameRate(): 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[]; /** * The setShakeThreshold() function is used to set the movement threshold for * the deviceShaken() function. The default threshold is set to 30. * @param value The threshold value */ setShakeThreshold(value: 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; /** * 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 angleMode() setting (RADIANS or DEGREES). * @param angle the angle, in radians by default, or according to if angleMode() setting (RADIANS or DEGREES). * @returns sine of the angle. */ sin(angle: number): number; /** * 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. * @param join either MITER, BEVEL, or ROUND */ strokeJoin(join: typeof p5.MITER | typeof p5.BEVEL | typeof p5.ROUND): void; /** * Hides the cursor from view. */ noCursor(): 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 ellipseMode() 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 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 p5.Vector for * more details. * * Use p5.Vector.mag() to calculate the * magnitude of a p5.Vector object. * @param x first component. * @param y second component. * @returns magnitude of vector. */ mag(x: number, y: number): number; /** * Reads the contents of a file or URL and creates a p5.Table 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 * loadTable() completes. On success, the * Table 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 Table object containing data */ loadTable(filename: string | Request, separator?: string, header?: string, callback?: Function, errorCallback?: Function): Promise; /** * 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; /** * Gets the red value of a color. * * `red()` extracts the red value from a * p5.Color 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 colorMode() is set to RGB, it * returns the red value in the given range. * @param color p5.Color object, array of * color components, or CSS color string. * @returns the red value. */ red(color: p5.Color | number[] | string): number; /** * 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 * createFilterShader() 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; /** * 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 angleMode() setting (RADIANS or DEGREES). * @param angle the angle, in radians by default, or according to if angleMode() setting (RADIANS or DEGREES). * @returns tangent of the angle. */ tan(angle: number): number; /** * Creates a `` element. * * `` elements are commonly used as containers * for inline elements. For example, a `` * can hold part of a sentence that's a * different style. * * The parameter `html` is optional. It accepts a string that sets the * inner HTML of the new ``. * @param html inner HTML for the new `` element. * @returns new p5.Element object. */ createSpan(html?: string): p5.Element; /** * Loads a new shader from a file that can be applied to the contents of the canvas with * `filter()`. 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 `buildFilterShader`, * 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 * p5.Shader 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; /** * Creates and a new p5.Framebuffer object. * * p5.Framebuffer objects are separate drawing * surfaces that can be used as textures in WebGL mode. They're similar to * p5.Graphics objects and generally run much * faster when used as textures. * * The parameter, `options`, is optional. An object can be passed to configure * the p5.Framebuffer 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 setAttributes() which is `false` (`true` in Safari). * * - `width`: width of the p5.Framebuffer object. Default is to always match the main canvas width. * * - `height`: height of the p5.Framebuffer object. Default is to always match the main canvas height. * * - `density`: pixel density of the p5.Framebuffer object. Default is to always match the main canvas pixel density. * * - `textureFiltering`: how to read values from the p5.Framebuffer 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; /** * Sets the width of the stroke used for points, lines, and the outlines of * shapes. * * Note: `strokeWeight()` is affected by transformations, especially calls to * scale(). * @param weight the weight of the stroke (in pixels). */ strokeWeight(weight: 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. * @param radians radians value to convert to degrees. * @returns converted angle. */ degrees(radians: number): number; /** * 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 * angleMode(). * * By default, transformations accumulate. For example, calling `rotateX(1)` * twice has the same effect as calling `rotateX(2)` once. The * push() and pop() 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 draw() function won't cause * shapes to spin. * @param angle angle of rotation in the current angleMode(). */ rotateX(angle: number): void; /** * 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. * @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; /** * Creates an `` 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 * alternate text * 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 * crossOrigin property * 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 p5.Element object. * @param src relative path or URL for the image. * @param alt alternate text for the image. * @returns new p5.Element object. */ createImg(src: string, alt: string): p5.Element; createImg(src: string, alt: string, crossOrigin?: string, successCallback?: Function): p5.Element; /** * 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. * @param degrees degree value to convert to radians. * @returns converted angle. */ radians(degrees: number): number; /** * The deviceMoved() 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 setMoveThreshold(). */ deviceMoved(): void; /** * The deviceTurned() function is called when the device rotates by * more than 90 degrees continuously. * * The axis that triggers the deviceTurned() method is stored in the turnAxis * variable. The deviceTurned() 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 deviceShaken() 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 setShakeThreshold(). */ deviceShaken(): 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 p5.Geometry * 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 colorMode(). 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 colorMode(). The last parameter, * `direction` sets the light’s direction using a * p5.Vector 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 * p5.Color 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 * p5.Color object or an array of color values. The * second parameter, `direction`, sets the light’s direction using a * p5.Vector 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 * colorMode(). * @param v2 green or saturation value in the current * colorMode(). * @param v3 blue, brightness, or lightness value in the current * colorMode(). * @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; /** * Sets the color used for the background of the canvas. * * By default, the background is transparent. `background()` is typically used * within draw() to clear the display window at the * beginning of each frame. It can also be used inside * setup() 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 p5.Color object, it will be used as * the background color. If the parameter is a * p5.Image 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 * colorMode(). 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 * colorMode(). The last parameter sets the alpha * (transparency) value. * @param color any value created by the color() 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; /** * 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; /** * Splits a `String` into pieces and returns an array containing the pieces. * * `splitTokens()` is an enhanced version of * split(). 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[]; /** * 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 key and keyCode * 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 * KeyboardEvent * 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; /** * Gets the green value of a color. * * `green()` extracts the green value from a * p5.Color 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 colorMode() is set to RGB, it * returns the green value in the given range. * @param color p5.Color object, array of * color components, or CSS color string. * @returns the green value. */ green(color: p5.Color | number[] | string): number; /** * 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; /** * 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. * @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; /** * 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 * bezier() function. `bezierVertex()` must be * called between the * beginShape() and * endShape() functions. * Bézier need a starting point. Building a shape * only with Bézier curves needs one initial * call to bezierVertex(), before * a number of `bezierVertex()` calls that is a multiple of the parameter * set by bezierOrder(...) (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 * beginShape(). * @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 `` 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 * other options. * @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 p5.Element 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 * stroke() function. To change its width, use the * strokeWeight() function. A line * can't be filled, so the fill() 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 * createCanvas(). * @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; /** * 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 * draw() begins looping. * If `setup()` is declared `async` (e.g. `async function setup()`), * execution pauses at each `await` until its promise resolves. * For example, `font = await loadFont(...)` waits for the font asset * to load because `loadFont()` function returns a promise, and the await * keyword means the program will wait for the promise to resolve. * This ensures that all assets are fully loaded before the sketch continues. * * loading assets. * * Note: `setup()` doesn’t have to be declared, but it’s common practice to do so. */ setup(): void; /** * A function that's called repeatedly while the sketch runs. * * Declaring the function `draw()` sets a code block to run repeatedly * once the sketch starts. It’s used to create animations and respond to * user inputs: * * `function draw() { * // Code to run repeatedly. * }`This is often called the "draw loop" because p5.js calls the code in * `draw()` in a loop behind the scenes. By default, `draw()` tries to run * 60 times per second. The actual rate depends on many factors. The * drawing rate, called the "frame rate", can be controlled by calling * frameRate(). The number of times `draw()` * has run is stored in the system variable * frameCount(). * * Code placed within `draw()` begins looping after * setup() runs. `draw()` will run until the user * closes the sketch. `draw()` can be stopped by calling the * noLoop() function. `draw()` can be resumed by * calling the loop() function. */ draw(): void; /** * Clears the pixels on the canvas. * * `clear()` makes every pixel 100% transparent. Calling `clear()` doesn't * clear objects created by `createX()` functions such as * createGraphics(), * createVideo(), and * createImg(). 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; /** * 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 MDN * 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 * angleMode(). * * By default, transformations accumulate. For example, calling `rotateY(1)` * twice has the same effect as calling `rotateY(2)` once. The * push() and pop() 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 draw() function won't cause * shapes to spin. * @param angle angle of rotation in the current angleMode(). */ 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 * angleMode(). * @param angle amount to rotate camera in current * angleMode 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; /** * Loads an XML file to create a p5.XML object. * * Extensible Markup Language * (XML) * is a standard format for sending data between applications. Like HTML, the * XML format is based on tags and attributes, as in * ``. * * 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 * p5.XML 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 * p5.XML 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 p5.XML * object. */ loadXML(path: string | Request, successCallback?: Function, errorCallback?: Function): Promise; /** * Gets a pixel or a region of pixels from the canvas. * * `get()` is easy to use but it's not as fast as * pixels. Use pixels * 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 * p5.Image 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 p5.Image.get() to work directly with * p5.Image 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 p5.Image object. */ get(x: number, y: number, w: number, h: number): p5.Image; get(): p5.Image; get(x: number, y: number): number[]; /** * 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. * @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; /** * 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 * resizeCanvas() or make other * adjustments to accommodate the new window size. * * The `event` parameter is optional. If added to the function declaration, it * can be used for debugging or other purposes. * @param event optional resize Event. */ windowResized(event?: Event): void; /** * Shuffles the elements of an array. * * The first parameter, `array`, is the array to be shuffled. For example, * calling `shuffle(myArray)` will shuffle the elements of `myArray`. By * default, the original array won’t be modified. Instead, a copy will be * created, shuffled, and returned. * * The second parameter, `modify`, is optional. If `true` is passed, as in * `shuffle(myArray, true)`, then the array will be shuffled in place without * making a copy. * @param array array to shuffle. * @param modify if `true`, shuffle the original array in place. Defaults to `false`. * @returns shuffled array. */ shuffle(array: T[], modify?: boolean): T[]; /** * Turns off debugMode() in a 3D sketch. */ noDebugMode(): void; /** * Gets the blue value of a color. * * `blue()` extracts the blue value from a * p5.Color 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 colorMode() is set to RGB, it * returns the blue value in the given range. * @param color p5.Color object, array of * color components, or CSS color string. * @returns the blue value. */ blue(color: p5.Color | number[] | string): number; /** * Converts a single-character `String` to a `Number`. * * `unchar()` converts single-character strings to their corresponding * integer (whole number). * * The parameter, `n`, is the character to convert. For example, * `unchar('A')`, returns the number 65. If an array is passed, as in * `unchar(['A', 'B', 'C'])`, an array of integers is returned. * @param n value to convert. * @returns converted number. */ unchar(n: string): number; unchar(ns: string[]): number[]; /** * Changes the unit system used to measure angles. * * Degrees and radians are both units for measuring angles. There are 360˚ in * one full rotation. A full rotation is 2 × π (about 6.28) radians. * * Functions such as rotate() and * sin() 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 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 * pixels array. * * `loadPixels()` must be called before reading from or writing to * pixels. */ loadPixels(): void; /** * Creates a p5.Shader object to be used with the * filter() 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 `filterColor` 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 getTexture(). * * `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 GLSL * instead of JavaScript. * Read the reference entry for `modify()` * for more info. Alternatively, `buildFilterShader()` can also be used like * createShader(), but where you only specify a fragment shader. * * For more info about filters and shaders, see Adam Ferriss' repo of shader examples * or the Introduction to Shaders 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; /** * 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 loadBytes() * 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; /** * Creates a slider `` 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 p5.Element object. */ createSlider(min: number, max: number, value?: number, step?: number): p5.Element; /** * Maps a number from one range to a value between 0 and 1. * * For example, `norm(2, 0, 10)` returns 0.2. 2's position in the original * range [0, 10] is proportional to 0.2's position in the range [0, 1]. This * is the same as calling `map(2, 0, 10, 0, 1)`. * * Numbers outside of the original range are not constrained between 0 and 1. * Out-of-range values are often intentional and useful. * @param value incoming value to be normalized. * @param start lower bound of the value's current range. * @param stop upper bound of the value's current range. * @returns normalized number. */ norm(value: number, start: number, stop: 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 key and keyCode * 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 * KeyboardEvent * 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 * angleMode(). * * By default, transformations accumulate. For example, calling `rotateZ(1)` * twice has the same effect as calling `rotateZ(2)` once. The * push() and pop() 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 draw() function won't cause * shapes to spin. * @param angle angle of rotation in the current angleMode(). */ rotateZ(angle: number): void; /** * Calculates exponential expressions such as 23. * * For example, `pow(2, 3)` evaluates the expression * 2 × 2 × 2. `pow(2, -3)` evaluates 1 ÷ * (2 × 2 × 2). * @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; /** * 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; /** * 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; /** * 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 * colorMode(). 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 * colorMode(). The last parameter, position sets * the light’s position using a p5.Vector 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 * p5.Color 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 * p5.Color object or an array of color values. The * second parameter, `position`, sets the light’s position using a * p5.Vector 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 * colorMode(). * @param v2 green or saturation value in the current * colorMode(). * @param v3 blue, brightness, or lightness value in the current * colorMode(). * @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; /** * Draws a single point in space. * * A point's default width is one pixel. To color a point, use the * stroke() function. To change its width, use the * strokeWeight() function. A point * can't be filled, so the fill() 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 * createCanvas(). * * The version of `point()` with one parameter allows the point's location to * be set with a p5.Vector 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; /** * Gets the alpha (transparency) value of a color. * * `alpha()` extracts the alpha value from a * p5.Color object, an array of color components, or * a CSS color string. * @param color p5.Color object, array of * color components, or CSS color string. * @returns the alpha value. */ alpha(color: p5.Color | number[] | string): number; /** * Creates a `` 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 * MDN * for more details. * @param label label displayed on the button. * @param value value of the button. * @returns new p5.Element object. */ createButton(label: string, value?: string): p5.Element; /** * Creates a p5.Shader object to be used with the * filter() function using GLSL. * * Since this method requires you to write your shaders in GLSL, it is most suitable * for advanced use cases. Consider using `buildFilterShader` * first, as a way to create filters in JavaScript using p5.strands. * * `createFilterShader()` works like * createShader() but has a default vertex * shader included. `createFilterShader()` is intended to be used along with * filter() for filtering the contents of a canvas. * A filter shader will be applied to the whole canvas instead of just * p5.Geometry objects. * * The parameter, `fragSrc`, sets the fragment shader. It’s a string that * contains the fragment shader program written in * GLSL. * * The p5.Shader object that's created has some * uniforms that can be set: * * - `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 p5.Shader that's created also provides * `varying vec2 vTexCoord`, a coordinate with values between 0 and 1. * `vTexCoord` describes where on the canvas the pixel will be drawn. * * For more info about filters and shaders, see Adam Ferriss' repo of shader examples * or the Introduction to Shaders tutorial. * @param 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 beginShape() and `endShape()` functions * allow for creating custom shapes in 2D or 3D. * beginShape() 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 * instancing. * 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 * writing a custom shader. * * After calling beginShape(), shapes can be * built by calling vertex(), * bezierVertex() and/or * splineVertex(). 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 translate(), * rotate(), and * scale() don't work between * beginShape() and `endShape()`. It's also not * possible to use other shapes, such as ellipse() or * rect(), between * beginShape() 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; /** * 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 * pixels. Use pixels * 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 p5.Color object, or a * p5.Image object. If an image is passed, the first * two parameters set the coordinates for the image's upper-left corner, * regardless of the current imageMode(). * * updatePixels() 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 | * p5.Color object | p5.Image to copy. */ set(x: number, y: number, c: number | number[] | object): 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. * @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; /** * 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 * spline() 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; /** * 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 * fill() and the specular reflections will be * affected by specularMaterial() and * shininess(). * * The parameter, `img`, is the p5.Image object to * use as the light source. * @param img image to use as the light source. */ imageLight(img: p5.Image): void; /** * Sets the pixel density or returns the current density. * * Computer displays are grids of little lights called pixels. A * display's pixel density 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 httpDo(path, 'GET'). 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 * httpGet() 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; httpGet(path: string | Request, callback: Function, errorCallback?: Function): Promise; /** * Updates the canvas with the RGBA values in the * pixels array. * * `updatePixels()` only needs to be called after changing values in the * pixels array. Such changes can be made directly * after calling loadPixels() or by calling * set(). * @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; /** * 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; /** * Returns the display's current pixel density. * @returns current pixel density of the display. */ displayDensity(): 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 * orbitControl() or * camera(). * @param img 360˚ image to use as the background. */ panorama(img: p5.Image): void; /** * Creates a checkbox `` element. * * Checkboxes extend the p5.Element 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 p5.Element 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 key and keyCode * 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 * KeyboardEvent * 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 keyPressed() function and * keyCode 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; /** * Gets the hue value of a color. * * `hue()` extracts the hue value from a * p5.Color 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 * colorMode() is set to HSB or HSL, it returns the hue * value in the given mode. * @param color p5.Color object, array of * color components, or CSS color string. * @returns the hue value. */ hue(color: p5.Color | number[] | string): number; /** * 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 p5.Vector * 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 * push() and pop() 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 draw() 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 * createCanvas(). * * 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; /** * 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)`. * @param n non-negative number to square root. * @returns square root of number. */ sqrt(n: number): number; /** * Method for executing an HTTP POST request. If data type is not specified, * it will default to `'text'`. This is equivalent to * calling httpDo(path, 'POST'). * @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, httpPost() will guess. * @param callback function to be executed after * httpPost() 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; httpPost(path: string | Request, data: object | boolean, callback?: Function, errorCallback?: Function): Promise; httpPost(path: string | Request, callback?: Function, errorCallback?: Function): Promise; /** * Returns the sketch's current * URL * as a `String`. * @returns url */ getURL(): string; /** * 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; /** * Calculates the fractional part of a number. * * A number's fractional part includes its decimal values. For example, * `fract(12.34)` returns 0.34. * @param n number whose fractional part will be found. * @returns fractional part of n. */ fract(n: number): number; /** * Returns the current * URL * 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 * spline() 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 beginShape() and * endShape() are made by connecting sets of * points called vertices. Each vertex added with * vertex() 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 * p5.Vector 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 vertex(). `normal()` must be called between * the beginShape() and * endShape() functions, just like * vertex(). 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 p5.Vector object. */ normal(vector: p5.Vector): void; normal(x: number, y: number, z: number): void; /** * 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: * * - p5.Image * * - p5.Element * * - p5.Texture * * - p5.Framebuffer * * - p5.FramebufferTexture * * The second and third parameters, `dx` and `dy`, set the coordinates of the * destination image's top left corner. See * imageMode() 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()`: * * * * 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; /** * Changes the way color values are interpreted. * * By default, the `Number` parameters for fill(), * stroke(), * background(), and * color() 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: * * `RGBHDR` - 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 HDR 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). * * ` ``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. * * p5.Color 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.RGBHDR | 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.RGBHDR | 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.RGBHDR | typeof p5.HWB | typeof p5.LAB | typeof p5.LCH | typeof p5.OKLAB | typeof p5.OKLCH, max1: number, max2: number, max3: number, maxA?: number): typeof p5.RGB | typeof p5.HSB | typeof p5.HSL | typeof p5.RGBHDR | typeof p5.HWB | typeof p5.LAB | typeof p5.LCH | typeof p5.OKLAB | typeof p5.OKLCH; colorMode(): typeof p5.RGB | typeof p5.HSB | typeof p5.HSL | typeof p5.RGBHDR | typeof p5.HWB | typeof p5.LAB | typeof p5.LCH | typeof p5.OKLAB | typeof p5.OKLCH; /** * Returns the current * URL parameters * in an `Object`. * * For example, calling `getURLParams()` in a sketch hosted at the URL * `https://p5js.org?year=2014&month=May&day=15` returns * `{ year: 2014, month: 'May', day: 15 }`. * @returns URL params */ getURLParams(): object; /** * Shears the x-axis so that shapes appear skewed. * * 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 angleMode(). * * By default, transformations accumulate. For example, calling * `shearX(1)` twice has the same effect as calling `shearX(2)` once. The * push() and * pop() 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 draw() function won't * cause shapes to shear continuously. * @param angle angle to shear by in the current angleMode(). */ shearX(angle: number): void; /** * Sets the falloff rate for pointLight() * and spotLight(). * * 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 p5.Shader object to apply while drawing. * * Shaders are programs that run on the graphics processing unit (GPU). They * can process many pixels or vertices at the same time, making them fast for * many graphics tasks. * * You can make new shaders using p5.strands with the * `buildMaterialShader`, * `buildColorShader`, and * `buildNormalShader` functions. You can also use * `buildFilterShader` alongside * `filter`, and * `buildStrokeShader` alongside * `stroke`. * * The parameter, `s`, is the p5.Shader object to * apply. For example, calling `shader(myShader)` applies `myShader` to * process each pixel on the canvas. This only changes the fill (the inner part of shapes), * but does not affect the outlines (strokes) or any images drawn using the `image()` function. * The source code from a p5.Shader object's * fragment and vertex shaders will be compiled the first time it's passed to * `shader()`. * * Calling resetShader() 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 * GLSL. * p5.Shader objects can be created in this way using the * createShader() and * loadShader() 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); * }`
*

If you want to apply shaders to strokes or images, use the following methods: * * - strokeShader() : Applies a shader to the stroke (outline) of shapes, allowing independent control over the stroke rendering using shaders. * * - imageShader() : Applies a shader to images or textures, controlling how the shader modifies their appearance during rendering. * *

*
* @param s p5.Shader 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 mouseX and * mouseY, 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 * MouseEvent * 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 mouseX and * mouseY, 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 * MouseEvent * 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 * KeyboardEvent.key * or KeyboardEvent.code 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 * `JavaScript` 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; /** * Draws a p5.Geometry object to the canvas. * * The parameter, `model`, is the * p5.Geometry object to draw. * p5.Geometry objects can be built with * buildGeometry(). They can also be loaded from * a file with loadGeometry(). * * Note: `model()` can only be used in WebGL mode. * @param model 3D shape to be drawn. * @param count number of instances to draw. */ model(model: p5.Geometry, count?: number): void; /** * 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 rectMode() 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; /** * 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 * httpGet() 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; httpDo(path: string | Request, callback?: Function, errorCallback?: Function): Promise; /** * 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 angleMode(). * * By default, transformations accumulate. For example, calling * `shearY(1)` twice has the same effect as calling `shearY(2)` once. The * push() and * pop() 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 draw() function won't * cause shapes to shear continuously. * @param angle angle to shear by in the current angleMode(). */ shearY(angle: number): void; /** * Gets the saturation value of a color. * * `saturation()` extracts the saturation value from a * p5.Color 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 * colorMode() is set to HSB or HSL, it returns the * saturation value in the given mode. * @param color p5.Color object, array of * color components, or CSS color string. * @returns the saturation value */ saturation(color: p5.Color | number[] | string): number; /** * Creates a dropdown menu `` 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 `` element * is passed, as in `let mySelect = createSelect(otherSelect)`, the existing * element will be wrapped in a new p5.Element * object. * * Dropdowns extend the p5.Element 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 p5.Element 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; /** * 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; /** * 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 * (.stl, .obj). * @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 p5.Geometry 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 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 vertex(), normal() * and fill() respectively. Custom properties can also * be defined within beginShape() and * endShape(). * * 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 * vertex(). 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 vertexProperty() method on * Geometry 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 rectMode() 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; /** * 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 mouseX and * mouseY, 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 * MouseEvent * 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()`, mouseReleased(), * and mouseClicked() are all related. * `mousePressed()` runs as soon as the user clicks the mouse. * mouseReleased() runs as soon as the user * releases the mouse click. mouseClicked() * runs immediately after mouseReleased(). * @param event optional `MouseEvent` argument. */ mousePressed(event?: MouseEvent): void; /** * Sets the p5.Shader object to apply for strokes. * * This method applies the given shader to strokes, allowing customization of * how lines and outlines are drawn in 3D space. The shader will be used for * strokes until resetShader() is called or another * strokeShader is applied. * * The shader will be used for: * * - Strokes only, regardless of whether the uniform `uStrokeWeight` is present. * * To further customize its behavior, refer to the various hooks provided by * the baseStrokeShader() method, which allow * control over stroke weight, vertex positions, colors, and more. * @param s p5.Shader object * to apply for strokes. */ strokeShader(s: p5.Shader): void; /** * Gets the brightness value of a color. * * `brightness()` extracts the HSB brightness value from a * p5.Color 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 colorMode() is set to HSB, it * returns the brightness value in the given range. * @param color p5.Color object, array of * color components, or CSS color string. * @returns the brightness value. */ brightness(color: p5.Color | number[] | string): number; /** * Tints images using a color. * * 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 p5.Color 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 * colorMode(). 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. * @param v1 red or hue value. * @param v2 green or saturation value. * @param v3 blue or brightness. */ tint(v1: number, v2: number, v3: number, alpha?: number): void; tint(value: string): void; tint(gray: number, alpha?: number): void; tint(values: number[]): void; tint(color: p5.Color): void; /** * 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 * colorMode(). * @param v2 green or saturation value in the current * colorMode(). * @param v3 blue, brightness, or lightness value in the current * colorMode(). * @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; /** * Creates a new p5.PrintWriter object. * * p5.PrintWriter 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 * saveStrings() and * saveJSON() 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 * p5.PrintWriter object will be created that * writes to a file named `words.txt`. * * The second parameter, `extension`, is optional. If a string is passed, as * in `createWriter('words', 'csv')`, the first parameter will be interpreted * as the file name and the second parameter as the extension. * @param name name of the file to create. * @param extension format to use for the file. * @returns stream for writing data. */ createWriter(name: string, extension?: string): p5.PrintWriter; /** * Translates the coordinate system. * * 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 * p5.Vector 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 push() and * pop() 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 draw() 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; /** * Removes the current tint set by tint(). * * `noTint()` restores images to their original colors. */ noTint(): 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 p5.Color 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 * colorMode(). 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 colorMode(). The last parameter * sets the alpha (transparency) value. * @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). */ fill(v1: number, v2: number, v3: number, alpha?: number): void; fill(value: string): void; fill(gray: number, alpha?: number): void; fill(values: number[]): void; fill(color: p5.Color): void; /** * 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 textAlign() 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 * rectMode() 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 fill() * function to set the text's fill color. Call * stroke() and * strokeWeight() to set the text's outline. * Call textSize() and * textFont() to set the text's size and font, * respectively. * * Note: `WEBGL` mode only supports fonts loaded with * loadFont(). Calling * stroke() 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 * rectMode() for * other options. * @param maxHeight maximum height of the text box. See * rectMode() 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 text() 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 * text() 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 * text() 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 * text() 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 text() function. * * The first parameter, `font`, sets the font. `textFont()` recognizes either * a p5.Font 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 textSize(). * * Calling `textFont()` without arguments returns the current font. * * Note: `WEBGL` mode only supports fonts loaded with * loadFont(). * @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 * text() 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 loadFont(). * @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 * text() 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): { x: number; y: number; w: number; h: number }; /** * Sets or gets the text drawing direction. * * The textDirection() function allows you to specify the direction in which text is * rendered on the canvas. When provided with a direction 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): { x: number; y: number; w: number; h: number }; /** * 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 textWeight() 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; /** * 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 * ellipse() 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; /** * 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 noStroke() and * `noFill()` are called, nothing will be drawn to the screen. */ noFill(): void; /** * Removes all lights from the sketch. * * Calling `noLights()` removes any lights created with * lights(), * ambientLight(), * directionalLight(), * pointLight(), or * spotLight(). These functions may be called * after `noLights()` to create a new lighting scheme. */ noLights(): void; /** * Gets the lightness value of a color. * * `lightness()` extracts the HSL lightness value from a * p5.Color 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 colorMode() is set to HSL, it * returns the lightness value in the given range. * @param color p5.Color object, array of * color components, or CSS color string. * @returns the lightness value. */ lightness(color: p5.Color | number[] | string): number; /** * Sets the p5.Shader object to apply for images. * * This method allows the user to apply a custom shader to images, enabling * advanced visual effects such as pixel manipulation, color adjustments, * or dynamic behavior. The shader will be applied to the image drawn using * the image() function. * * The shader will be used exclusively for: * * - `image()` calls, applying only when drawing 2D images. * * - This shader will NOT apply to images used in texture() or other 3D contexts. * Any attempts to use the imageShader in these cases will be ignored. * @param s p5.Shader object * to apply for images. */ imageShader(s: p5.Shader): void; /** * Changes the location from which images are drawn when * image() is called. * * By default, the first * two parameters of image() 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 * image() 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 * image() as the x- and y-coordinates of the image's * center. The next parameters are its width and height. * @param mode either CORNER, CORNERS, or CENTER. */ imageMode(mode: typeof p5.CORNER | typeof p5.CORNERS | typeof p5.CENTER): 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 mouseX and * mouseY, 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 * MouseEvent * 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: mousePressed(), `mouseReleased()`, * and mouseClicked() are all related. * mousePressed() runs as soon as the user * clicks the mouse. `mouseReleased()` runs as soon as the user releases the * mouse click. mouseClicked() 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 * noFill() 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: ``. * If an existing `
` or `` * element is passed, as in `let myRadio = createSelect(container)`, it will * become the radio button's parent element. * * Radio buttons extend the p5.Element 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 `HTMLInputElement`. * * - `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 `
` * or ``. * @returns new p5.Element object. */ createRadio(containerElement?: object): p5.Element; createRadio(name?: string): p5.Element; createRadio(): p5.Element; /** * Creates a `