p5/types/core/main.d.ts

[](https://www.npmjs.com/package/p5)

// This file is auto-generated from JSDoc documentation

import p5 from 'p5';

declare module 'p5' {
  class p5 {
    constructor(sketch: any, node?: HTMLElement);

  /**
   * 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 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
   * @param
   */
  rotate(angle: number, axis: p5.Vector | number[]): void;

  /**
   * 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
   */
  rotateX(angle: number): void;

  /**
   * 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
   */
  rotateY(angle: number): 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
   */
  rotateZ(angle: number): 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
   * obje