p5

// This file is auto-generated from JSDoc documentation /// <reference types="./global.d.ts" /> /// <reference path="./accessibility/color_namer.d.ts" /> /// <reference path="./accessibility/describe.d.ts" /> /// <reference path="./accessibility/gridOutput.d.ts" /> /// <reference path="./accessibility/outputs.d.ts" /> /// <reference path="./accessibility/textOutput.d.ts" /> /// <reference path="./color/color_conversion.d.ts" /> /// <reference path="./color/creating_reading.d.ts" /> /// <reference path="./color/p5.Color.d.ts" /> /// <reference path="./color/setting.d.ts" /> /// <reference path="./core/constants.d.ts" /> /// <reference path="./core/environment.d.ts" /> /// <reference path="./core/friendly_errors/fes_core.d.ts" /> /// <reference path="./core/friendly_errors/file_errors.d.ts" /> /// <reference path="./core/friendly_errors/param_validator.d.ts" /> /// <reference path="./core/friendly_errors/sketch_reader.d.ts" /> /// <reference path="./core/friendly_errors/stacktrace.d.ts" /> /// <reference path="./core/friendly_errors/validate_params.d.ts" /> /// <reference path="./core/helpers.d.ts" /> /// <reference path="./core/legacy.d.ts" /> /// <reference path="./core/main.d.ts" /> /// <reference path="./core/p5.Graphics.d.ts" /> /// <reference path="./core/p5.Renderer.d.ts" /> /// <reference path="./core/reference.d.ts" /> /// <reference path="./core/rendering.d.ts" /> /// <reference path="./core/structure.d.ts" /> /// <reference path="./core/transform.d.ts" /> /// <reference path="./data/local_storage.d.ts" /> /// <reference path="./dom/dom.d.ts" /> /// <reference path="./dom/p5.Element.d.ts" /> /// <reference path="./dom/p5.File.d.ts" /> /// <reference path="./dom/p5.MediaElement.d.ts" /> /// <reference path="./events/acceleration.d.ts" /> /// <reference path="./events/keyboard.d.ts" /> /// <reference path="./events/pointer.d.ts" /> /// <reference path="./image/filterRenderer2D.d.ts" /> /// <reference path="./image/image.d.ts" /> /// <reference path="./image/loading_displaying.d.ts" /> /// <reference path="./image/p5.Image.d.ts" /> /// <reference path="./image/pixels.d.ts" /> /// <reference path="./io/files.d.ts" /> /// <reference path="./io/p5.Table.d.ts" /> /// <reference path="./io/p5.TableRow.d.ts" /> /// <reference path="./io/p5.XML.d.ts" /> /// <reference path="./math/Matrices/Matrix.d.ts" /> /// <reference path="./math/Matrices/MatrixNumjs.d.ts" /> /// <reference path="./math/calculation.d.ts" /> /// <reference path="./math/math.d.ts" /> /// <reference path="./math/noise.d.ts" /> /// <reference path="./math/p5.Matrix.d.ts" /> /// <reference path="./math/p5.Vector.d.ts" /> /// <reference path="./math/random.d.ts" /> /// <reference path="./math/trigonometry.d.ts" /> /// <reference path="./shape/2d_primitives.d.ts" /> /// <reference path="./shape/attributes.d.ts" /> /// <reference path="./shape/curves.d.ts" /> /// <reference path="./shape/custom_shapes.d.ts" /> /// <reference path="./shape/vertex.d.ts" /> /// <reference path="./type/p5.Font.d.ts" /> /// <reference path="./type/textCore.d.ts" /> /// <reference path="./utilities/conversion.d.ts" /> /// <reference path="./utilities/time_date.d.ts" /> /// <reference path="./utilities/utility_functions.d.ts" /> /// <reference path="./webgl/3d_primitives.d.ts" /> /// <reference path="./webgl/ShaderGenerator.d.ts" /> /// <reference path="./webgl/interaction.d.ts" /> /// <reference path="./webgl/light.d.ts" /> /// <reference path="./webgl/loading.d.ts" /> /// <reference path="./webgl/material.d.ts" /> /// <reference path="./webgl/p5.Camera.d.ts" /> /// <reference path="./webgl/p5.DataArray.d.ts" /> /// <reference path="./webgl/p5.Framebuffer.d.ts" /> /// <reference path="./webgl/p5.Geometry.d.ts" /> /// <reference path="./webgl/p5.Quat.d.ts" /> /// <reference path="./webgl/p5.RendererGL.d.ts" /> /// <reference path="./webgl/p5.Shader.d.ts" /> /// <reference path="./webgl/p5.Texture.d.ts" /> /// <reference path="./webgl/text.d.ts" /> // This file is auto-generated from JSDoc documentation declare class p5 { constructor(sketch?: (p: p5) => void, node?: HTMLElement, sync?: boolean); /** * 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 * @param */ describe(text: string, display: FALLBACK | LABEL): void; /** * Creates a screen reader-accessible description of elements in the canvas.Elements are shapes or groups of shapes that create meaning together. For * example, a few overlapping circles could make an "eye" element.The first parameter, `name`, is the name of the element.The second parameter, `text`, is the description of the element.The third parameter, `display`, is optional. It determines how the * description is displayed. If `LABEL` is passed, as in * `describe('A description.', LABEL)`, the description will be visible in * a div element next to the canvas. Using `LABEL` creates unhelpful * duplicates for screen readers. Only use `LABEL` during development. If * `FALLBACK` is passed, as in `describe('A description.', FALLBACK)`, the * description will only be visible to screen readers. This is the default * mode.Read * Writing accessible canvas descriptions * to learn more about making sketches accessible. * * @param * @param * @param */ describeElement(name: string, text: string, display: FALLBACK | LABEL): void; /** * Creates a screen reader-accessible description of shapes on the canvas.`textOutput()` adds a general description, list of shapes, and * table of shapes to the web page. The general description includes the * canvas size, canvas color, and number of shapes. For example, * `Your output is a, 100 by 100 pixels, gray canvas containing the following 2 shapes:`.A list of shapes follows the general description. The list describes the * color, location, and area of each shape. For example, * `a red circle at middle covering 3% of the canvas`. Each shape can be * selected to get more details.`textOutput()` uses its table of shapes as a list. The table describes the * shape, color, location, coordinates and area. For example, * `red circle location = middle area = 3%`. This is different from * 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 */ textOutput(display: FALLBACK | LABEL): void; /** * 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 */ gridOutput(display: FALLBACK | LABEL): 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; /** * 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; /** * 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; /** * 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; /** * 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; /** * 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 * @param */ p5(sketch: object, node: string | HTMLElement): 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; /** * 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 * @param */ 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; /** * 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 */ red(color: p5.Color | number[] | string): number; /** * 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 */ green(color: p5.Color | number[] | string): number; /** * 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 */ blue(color: p5.Color | number[] | string): number; /** * 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 */ alpha(color: p5.Color | number[] | string): number; /** * 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 */ hue(color: p5.Color | number[] | string): number; /** * 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 */ saturation(color: p5.Color | number[] | string): number; /** * 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 */ brightness(color: p5.Color | number[] | string): number; /** * 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 */ lightness(color: p5.Color | number[] | string): number; /** * Blends two colors to find a third color between them.The `amt` parameter specifies the amount to interpolate between the two * values. 0 is equal to the first color, 0.1 is very near the first color, * 0.5 is halfway between the two colors, and so on. Negative numbers are set * to 0. Numbers greater than 1 are set to 1. This differs from the behavior of * lerp. It's necessary because numbers outside of the * interval [0, 1] will produce strange and unexpected colors.The way that colors are interpolated depends on the current * colorMode(). * * @param * @param * @param */ lerpColor(c1: p5.Color, c2: p5.Color, amt: number): p5.Color; /** * Blends multiple colors to find a color between them.The `amt` parameter specifies the amount to interpolate between the color * stops which are colors at each `amt` value "location" with `amt` values * that are between 2 color stops interpolating between them based on its relative * distance to both.The way that colors are interpolated depends on the current * colorMode(). * * @param * @param */ paletteLerp(colors_stops: [p5.Color | string | number | number[], number][], amt: number): p5.Color; /** * 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 */ beginClip(options: object): void; /** * Ends defining a mask that was started with * beginClip(). */ endClip(): void; /** * Defines a shape that will mask any shapes drawn afterward.The first parameter, `callback`, is a function that defines the mask. * Any shapes drawn in `callback` will add to the mask shape. The mask * will apply to anything drawn after `clip()` is called.The second parameter, `options`, is optional. If an object with an `invert` * property is passed, as in `beginClip({ invert: true })`, it will be used to * set the masking mode. `{ invert: true }` inverts the mask, creating holes * in shapes that are masked. `invert` is `false` by default.Masks can be contained between the * 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 * @param */ clip(callback: Function, options: object): 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. * * @param */ 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 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 * @param * @param * @param */ clear(r: number, g: number, b: number, a: number): void; /** * Clears all data from the print stream. */ clear(): 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).` <img src="assets/hwb.png"></img>``LAB` - Also known as CIE Lab, this color mode defines colors with Lightness, Alpha, and Beta. * It is widely used in professional color measurement contexts due to its perceptual uniformity.`LCH` - A more intuitive representation of the CIE Lab color space using Lightness, Chroma, and Hue. * This mode separates the color's chromatic intensity (chroma) from its lightness, * simplifying color selection and manipulation.`OKLAB` - A variant of the CIE Lab color space that corrects for non-uniformities inherent in LAB. * The adjustment provides a more perceptually accurate and uniform representation, * which is particularly beneficial for smooth color transitions.`OKLCH` - An easier-to-use representation of OKLAB, expressing colors in terms of Lightness, Chroma, and Hue. * This mode retains the perceptual benefits of OKLAB while offering a more intuitive format for color manipulation.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: * * @param * @param */ colorMode(mode: RGB | HSB | HSL | RGBHDR | HWB | LAB | LCH | OKLAB | OKLCH, max: number): void; colorMode(mode: RGB | HSB | HSL | RGBHDR | HWB | LAB | LCH | OKLAB | OKLCH, max1: number, max2: number, max3: number, maxA: number): string; /** * 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. * * @param * @param * @param * @param */ 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; /** * 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; /** * 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; /** * Sets the color used to draw points, lines, and the outlines of shapes.Calling `stroke(255, 165, 0)` or `stroke('orange')` means all shapes drawn * after calling `stroke()` will be filled with the color orange. The way * these parameters are interpreted may be changed with the * colorMode() function.The version of `stroke()` with one parameter interprets the value one of * three ways. If the parameter is a `Number`, it's interpreted as a grayscale * value. If the parameter is a `String`, it's interpreted as a CSS color * string. A p5.Color object can also be provided to * set the stroke color.The version of `stroke()` with two parameters interprets the first one as a * grayscale value. The second parameter sets the alpha (transparency) value.The version of `stroke()` with three parameters interprets them as RGB, HSB, * or HSL colors, depending on the current `colorMode()`.The version of `stroke()` with four parameters interprets them as RGBA, HSBA, * or HSLA colors, depending on the current `colorMode()`. The last parameter * sets the alpha (transparency) value. * * @param * @param * @param * @param */ stroke(v1: number, v2: number, v3: number, alpha: number): void; stroke(value: string): void; stroke(gray: number, alpha: number): void; stroke(values: number[]): void; stroke(color: p5.Color): void; /** * Starts using shapes to erase parts of the canvas.All drawing that follows `erase()` will subtract from the canvas, revealing * the web page underneath. The erased areas will become transparent, allowing * the content behind the canvas to show through. The * fill(), stroke(), and * blendMode() have no effect once `erase()` is * called.The `erase()` function has two optional parameters. The first parameter * sets the strength of erasing by the shape's interior. A value of 0 means * that no erasing will occur. A value of 255 means that the shape's interior * will fully erase the content underneath. The default value is 255 * (full strength).The second parameter sets the strength of erasing by the shape's edge. A * value of 0 means that no erasing will occur. A value of 255 means that the * shape's edge will fully erase the content underneath. The default value is * 255 (full strength).To cancel the erasing effect, use the noErase() * function.`erase()` has no effect on drawing done with the * image() and * background() functions. * * @param * @param */ erase(strengthFill: number, strengthStroke: number): void; /** * Ends erasing that was started with erase().The fill(), stroke(), and * blendMode() settings will return to what they * were prior to calling erase(). */ noErase(): void; /** * Sets the way colors blend when added to the canvas.By default, drawing with a solid color paints over the current pixel values * on the canvas. `blendMode()` offers many options for blending colors.Shapes, images, and text can be used as sources for drawing to the canvas. * A source pixel changes the color of the canvas pixel where it's drawn. The * final color results from blending the source pixel's color with the canvas * pixel's color. RGB color values from the source and canvas pixels are * compared, added, subtracted, multiplied, and divided to create different * effects. Red values with red values, greens with greens, and blues with * blues.The parameter, `mode`, sets the blend mode. For example, calling * `blendMode(ADD)` sets the blend mode to `ADD`. The following blend modes * are available in both 2D and WebGL mode:The following blend modes are only available in 2D mode:The following blend modes are only available in WebGL mode: * * @param */ blendMode(mode: BLEND | DARKEST | LIGHTEST | DIFFERENCE | MULTIPLY | EXCLUSION | SCREEN | REPLACE | OVERLAY | HARD_LIGHT | SOFT_LIGHT | DODGE | BURN | ADD | REMOVE | SUBTRACT): 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 */ print(contents: Any): void; /** * Writes data to the print stream with new lines added.The parameter, `data`, is the data to write. `data` can be a number or * string, as in `myWriter.print('hi')`, or an array of numbers and strings, * as in `myWriter.print([1, 2, 3])`. A comma will be inserted between array * array elements when they're added to the print stream. * * @param */ print(data: string | number | Array): 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 * @param * @param */ cursor(type: ARROW | CROSS | HAND | MOVE | TEXT | WAIT | string, x: number, y: number): void; /** * Sets the number of frames to draw per second.Calling `frameRate()` with one numeric argument, as in `frameRate(30)`, * attempts to draw 30 frames per second (FPS). The target frame rate may not * be achieved depending on the sketch's processing needs. Most computers * default to a frame rate of 60 FPS. Frame rates of 24 FPS and above are * fast enough for smooth animations.Calling `frameRate()` without an argument returns the current frame rate. * The value returned is an approximation. * * @param */ frameRate(fps: number): void; frameRate(): number; /** * Returns the target frame rate.The value is either the system frame rate or the last value passed to * frameRate(). */ getTargetFrameRate(): number; /** * Hides the cursor from view. */ noCursor(): void; /** * 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 */ windowResized(event: UIEvent): void; /** * 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 */ fullscreen(val: boolean): boolean; /** * 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 */ pixelDensity(val: number): void; pixelDensity(): number; /** * Returns the display's current pixel density. */ displayDensity(): number; /** * Returns the sketch's current * URL * as a `String`. */ getURL(): string; /** * 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']`. */ getURLPath(): string[]; /** * 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 }`. */ getURLParams(): object; /** * 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 * @param * @param */ worldToScreen(x: number | p5.Vector, y: number, z: number): p5.Vector; /** * 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 * @param * @param */ screenToWorld(x: number | p5.Vector, y: number, z: number): p5.Vector; /** * This is a helper function that generates Zod schemas for a function based on * the parameter data from `docs/parameterData.json`.Example parameter data for function `background`: * "background": { * "overloads": [ * ["p5.Color"], * ["String", "Number?"], * ["Number", "Number?"], * ["Number", "Number", "Number", "Number?"], * ["Number[]"], * ["p5.Image", "Number?"] * ] * } * Where each array in `overloads` represents a set of valid overloaded * parameters, and `?` is a shorthand for `Optional`. * * @param */ generateZodSchemasForFunc(func: string): z.ZodSchema; /** * 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; /** * 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.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 * @param * @param * @param */ createCanvas(width: number, height: number, renderer: P2D | WEBGL | P2DHDR, canvas: HTMLCanvasElement): p5.Renderer; createCanvas(width: number, height: number, canvas: HTMLCanvasElement): p5.Renderer; /** * 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 * @param * @param */ resizeCanvas(width: number, height: number, noRedraw: boolean): void; /** * 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; /** * 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 * @param * @param * @param */ createGraphics(width: number, height: number, renderer: P2D | WEBGL, canvas: HTMLCanvasElement): p5.Graphics; createGraphics(width: number, height: number, canvas: HTMLCanvasElement): p5.Graphics; /** * 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: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 */ createFramebuffer(options: object): p5.Framebuffer; /** * 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 * . 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 */ clearDepth(depth: number): void; /** * 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; /** * 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; /** * 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; /** * 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.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 */ redraw(n: number): void; /** * 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 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 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 */ applyMatrix(arr: Array): 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; /** * Clears all transformations applied to the coordinate system. */ resetMatrix(): void; /** * 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 rota