@types/p5/global.d.ts

TypeScript definitions for p5

// Global mode type definitions for p5

// This file was auto-generated. Please do not edit it.

/// <reference path="./lib/addons/p5.sound.d.ts" />
import * as p5 from './index';
declare global {
    /**
     *   Creates a screen reader accessible description for
     *   the canvas. The first parameter should be a string
     *   with a description of the canvas. The second
     *   parameter is optional. If specified, it determines
     *   how the description is displayed. describe(text,
     *   LABEL) displays the description to all users as a
     *   tombstone or exhibit label/caption in a div
     *   adjacent to the canvas. You can style it as you
     *   wish in your CSS.
     *
     *   describe(text, FALLBACK) makes the description
     *   accessible to screen-reader users only, in  a sub
     *   DOM inside the canvas element. If a second
     *   parameter is not specified, by default, the
     *   description will only be available to
     *   screen-reader users.
     *   @param text description of the canvas
     *   @param [display] either LABEL or FALLBACK
     */
    function describe(text: string, display?: p5.DESCRIBE_DISPLAY): void;

    /**
     *   This function creates a screen-reader accessible
     *   description for elements —shapes or groups of
     *   shapes that create meaning together— in the
     *   canvas. The first paramater should be the name of
     *   the element. The second parameter should be a
     *   string with a description of the element. The
     *   third parameter is optional. If specified, it
     *   determines how the element description is
     *   displayed. describeElement(name, text, LABEL)
     *   displays the element description to all users as a
     *   tombstone or exhibit label/caption in a div
     *   adjacent to the canvas. You can style it as you
     *   wish in your CSS.
     *
     *   describeElement(name, text, FALLBACK) makes the
     *   element description accessible to screen-reader
     *   users only, in  a sub DOM inside the canvas
     *   element. If a second parameter is not specified,
     *   by default, the element description will only be
     *   available to screen-reader users.
     *   @param name name of the element
     *   @param text description of the element
     *   @param [display] either LABEL or FALLBACK
     */
    function describeElement(name: string, text: string, display?: p5.DESCRIBE_DISPLAY): void;

    /**
     *   textOutput() creates a screenreader accessible
     *   output that describes the shapes present on the
     *   canvas. The general description of the canvas
     *   includes canvas size, canvas color, and number of
     *   elements in the canvas (example: 'Your output is
     *   a, 400 by 400 pixels, lavender blue canvas
     *   containing the following 4 shapes:'). This
     *   description is followed by a list of shapes where
     *   the color, position, and area of each shape are
     *   described (example: "orange ellipse at top left
     *   covering 1% of the canvas"). Each element can be
     *   selected to get more details. A table of elements
     *   is also provided. In this table, shape, color,
     *   location, coordinates and area are described
     *   (example: "orange ellipse location=top left
     *   area=2"). textOutput() and textOutput(FALLBACK)
     *   make the output available in  a sub DOM inside the
     *   canvas element which is accessible to screen
     *   readers. textOutput(LABEL) creates an additional
     *   div with the output adjacent to the canvas, this
     *   is useful for non-screen reader users that might
     *   want to display the output outside of the canvas'
     *   sub DOM as they code. However, using LABEL will
     *   create unnecessary redundancy for screen reader
     *   users. We recommend using LABEL only as part of
     *   the development process of a sketch and removing
     *   it before publishing or sharing with screen reader
     *   users.
     *   @param [display] either FALLBACK or LABEL
     */
    function textOutput(display?: p5.TEXT_DISPLAY): void;

    /**
     *   gridOutput() lays out the content of the canvas in
     *   the form of a grid (html table) based on the
     *   spatial location of each shape. A brief
     *   description of the canvas is available before the
     *   table output. This description includes: color of
     *   the background, size of the canvas, number of
     *   objects, and object types (example: "lavender blue
     *   canvas is 200 by 200 and contains 4 objects - 3
     *   ellipses 1 rectangle"). The grid describes the
     *   content spatially, each element is placed on a
     *   cell of the table depending on its position.
     *   Within each cell an element the color and type of
     *   shape of that element are available (example:
     *   "orange ellipse"). These descriptions can be
     *   selected individually to get more details. A list
     *   of elements where shape, color, location, and area
     *   are described (example: "orange ellipse
     *   location=top left area=1%") is also available.
     *   gridOutput() and gridOutput(FALLBACK) make the
     *   output available in  a sub DOM inside the canvas
     *   element which is accessible to screen readers.
     *   gridOutput(LABEL) creates an additional div with
     *   the output adjacent to the canvas, this is useful
     *   for non-screen reader users that might want to
     *   display the output outside of the canvas' sub DOM
     *   as they code. However, using LABEL will create
     *   unnecessary redundancy for screen reader users. We
     *   recommend using LABEL only as part of the
     *   development process of a sketch and removing it
     *   before publishing or sharing with screen reader
     *   users.
     *   @param [display] either FALLBACK or LABEL
     */
    function gridOutput(display?: p5.GRID_DISPLAY): void;

    /**
     *   Extracts the alpha (transparency) value from a
     *   p5.Color object, array of color components, or CSS
     *   color string.
     *   @param color p5.Color object, array of color
     *   components, or CSS color string.
     *   @return the alpha value.
     */
    function alpha(color: p5.Color | number[] | string): number;

    /**
     *   Extracts the blue value from a p5.Color object,
     *   array of color components, or CSS color string.
     *   @param color p5.Color object, array of color
     *   components, or CSS color string.
     *   @return the blue value.
     */
    function blue(color: p5.Color | number[] | string): number;

    /**
     *   Extracts the HSB brightness value from a p5.Color
     *   object, array of color components, or CSS color
     *   string.
     *   @param color p5.Color object, array of color
     *   components, or CSS color string.
     *   @return the brightness value.
     */
    function brightness(color: p5.Color | number[] | string): number;

    /**
     *   Creates a p5.Color object. By default, the
     *   parameters are interpreted as RGB values. Calling
     *   color(255, 204, 0) will return a bright yellow
     *   color. The way these parameters are interpreted
     *   may be changed with the colorMode() function. The
     *   version of color() with one parameter interprets
     *   the value one of two ways. If the parameter is a
     *   number, it's interpreted as a grayscale value. If
     *   the parameter is a string, it's interpreted as a
     *   CSS color string.
     *
     *   The version of color() with two parameters
     *   interprets the first one as a grayscale value. The
     *   second parameter sets the alpha (transparency)
     *   value.
     *
     *   The version of color() with three parameters
     *   interprets them as RGB, HSB, or HSL colors,
     *   depending on the current colorMode().
     *
     *   The version of color() with four parameters
     *   interprets them as RGBA, HSBA, or HSLA colors,
     *   depending on the current colorMode(). The last
     *   parameter sets the alpha (transparency) value.
     *   @param gray number specifying value between white
     *   and black.
     *   @param [alpha] alpha value relative to current
     *   color range (default is 0-255).
     *   @return resulting color.
     */
    function color(gray: number, alpha?: number): p5.Color;

    /**
     *   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 v1 red or hue value relative to the current
     *   color range.
     *   @param v2 green or saturation value relative to
     *   the current color range.
     *   @param v3 blue or brightness value relative to the
     *   current color range.
     *   @param [alpha] alpha value relative to current
     *   color range (default is 0-255).
     */
    function color(v1: number, v2: number, v3: number, alpha?: number): p5.Color;

    /**
     *   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 value a color string.
     */
    function color(value: string): p5.Color;

    /**
     *   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 values an array containing the red, green,
     *   blue, and alpha components of the color.
     */
    function color(values: number[]): p5.Color;

    /**
     *   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.
     */
    function color(color: p5.Color): p5.Color;

    /**
     *   Extracts the green value from a p5.Color object,
     *   array of color components, or CSS color string.
     *   @param color p5.Color object, array of color
     *   components, or CSS color string.
     *   @return the green value.
     */
    function green(color: p5.Color | number[] | string): number;

    /**
     *   Extracts the hue value from a p5.Color object,
     *   array of color components, or CSS color string.
     *   Hue exists in both HSB and HSL. It describes a
     *   color's position on the color wheel. By default,
     *   this function returns the HSL-normalized hue. If
     *   the colorMode() is set to HSB, it returns the
     *   HSB-normalized hue.
     *   @param color p5.Color object, array of color
     *   components, or CSS color string.
     *   @return the hue
     */
    function hue(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 c1 interpolate from this color.
     *   @param c2 interpolate to this color.
     *   @param amt number between 0 and 1.
     *   @return interpolated color.
     */
    function lerpColor(c1: p5.Color, c2: p5.Color, amt: number): p5.Color;

    /**
     *   Extracts the HSL lightness value from a p5.Color
     *   object, array of color components, or CSS color
     *   string.
     *   @param color p5.Color object, array of color
     *   components, or CSS color string.
     *   @return the lightness
     */
    function lightness(color: p5.Color | number[] | string): number;

    /**
     *   Extracts the red value from a p5.Color object,
     *   array of color components, or CSS color string.
     *   @param color p5.Color object, array of color
     *   components, or CSS color string.
     *   @return the red value.
     */
    function red(color: p5.Color | number[] | string): number;

    /**
     *   Extracts the saturation value from a p5.Color
     *   object, array of color components, or CSS color
     *   string. Saturation is scaled differently in HSB
     *   and HSL. By default, this function returns the HSL
     *   saturation. If the colorMode() is set to HSB, it
     *   returns the HSB saturation.
     *   @param color p5.Color object, array of color
     *   components, or CSS color string.
     *   @return the saturation value
     */
    function saturation(color: p5.Color | number[] | string): number;

    /**
     *   Sets the color used for the background of the
     *   canvas. By default, the background is transparent.
     *   This function 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 color any value created by the color()
     *   function
     *   @chainable
     */
    function background(color: p5.Color): p5;

    /**
     *   Sets the color used for the background of the
     *   canvas. By default, the background is transparent.
     *   This function 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 colorstring color string, possible formats
     *   include: integer rgb() or rgba(), percentage rgb()
     *   or rgba(), 3-digit hex, 6-digit hex.
     *   @param [a] opacity of the background relative to
     *   current color range (default is 0-255).
     *   @chainable
     */
    function background(colorstring: string, a?: number): p5;

    /**
     *   Sets the color used for the background of the
     *   canvas. By default, the background is transparent.
     *   This function 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 gray specifies a value between white and
     *   black.
     *   @param [a] opacity of the background relative to
     *   current color range (default is 0-255).
     *   @chainable
     */
    function background(gray: number, a?: number): p5;

    /**
     *   Sets the color used for the background of the
     *   canvas. By default, the background is transparent.
     *   This function 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 v1 red value if color mode is RGB, or hue
     *   value if color mode is HSB.
     *   @param v2 green value if color mode is RGB, or
     *   saturation value if color mode is HSB.
     *   @param v3 blue value if color mode is RGB, or
     *   brightness value if color mode is HSB.
     *   @param [a] opacity of the background relative to
     *   current color range (default is 0-255).
     *   @chainable
     */
    function background(v1: number, v2: number, v3: number, a?: number): p5;

    /**
     *   Sets the color used for the background of the
     *   canvas. By default, the background is transparent.
     *   This function 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 values an array containing the red, green,
     *   blue and alpha components of the color.
     *   @chainable
     */
    function background(values: number[]): p5;

    /**
     *   Sets the color used for the background of the
     *   canvas. By default, the background is transparent.
     *   This function 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 image image created with loadImage() or
     *   createImage(), to set as background. (must be same
     *   size as the sketch window).
     *   @param [a] opacity of the background relative to
     *   current color range (default is 0-255).
     *   @chainable
     */
    function background(image: p5.Image, a?: number): p5;

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

    /**
     *   Clears the pixels on the canvas. This function
     *   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.
     *   @chainable
     */
    function clear(): p5;

    /**
     *   Changes the way p5.js interprets color data. By
     *   default, the numeric 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 be interpreted as 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 system instead of RGB.
     *
     *   p5.Color objects remember the mode that they were
     *   created in. Changing modes doesn't affect their
     *   appearance.
     *   @param mode either RGB, HSB or HSL, corresponding
     *   to Red/Green/Blue and Hue/Saturation/Brightness
     *   (or Lightness).
     *   @param [max] range for all values.
     *   @chainable
     */
    function colorMode(mode: p5.COLOR_MODE, max?: number): p5;

    /**
     *   Changes the way p5.js interprets color data. By
     *   default, the numeric 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 be interpreted as 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 system instead of RGB.
     *
     *   p5.Color objects remember the mode that they were
     *   created in. Changing modes doesn't affect their
     *   appearance.
     *   @param mode either RGB, HSB or HSL, corresponding
     *   to Red/Green/Blue and Hue/Saturation/Brightness
     *   (or Lightness).
     *   @param max1 range for the red or hue depending on
     *   the current color mode.
     *   @param max2 range for the green or saturation
     *   depending on the current color mode.
     *   @param max3 range for the blue or
     *   brightness/lightness depending on the current
     *   color mode.
     *   @param [maxA] range for the alpha.
     *   @chainable
     */
    function colorMode(mode: p5.UNKNOWN_P5_CONSTANT, max1: number, max2: number, max3: number, maxA?: number): p5;

    /**
     *   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 v1 red value if color mode is RGB or hue
     *   value if color mode is HSB.
     *   @param v2 green value if color mode is RGB or
     *   saturation value if color mode is HSB.
     *   @param v3 blue value if color mode is RGB or
     *   brightness value if color mode is HSB.
     *   @chainable
     */
    function fill(v1: number, v2: number, v3: number, alpha?: number): p5;

    /**
     *   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 value a color string.
     *   @chainable
     */
    function fill(value: string): p5;

    /**
     *   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 gray a grayscale value.
     *   @chainable
     */
    function fill(gray: number, alpha?: number): p5;

    /**
     *   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 values an array containing the red, green,
     *   blue & and alpha components of the color.
     *   @chainable
     */
    function fill(values: number[]): p5;

    /**
     *   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 color the fill color.
     *   @chainable
     */
    function fill(color: p5.Color): p5;

    /**
     *   Disables setting the interior color of shapes.
     *   This is the same as making the fill completely
     *   transparent. If both noStroke() and noFill() are
     *   called, nothing will be drawn to the screen.
     *   @chainable
     */
    function noFill(): p5;

    /**
     *   Disables drawing the stroke (outline). If both
     *   noStroke() and noFill() are called, nothing will
     *   be drawn to the screen.
     *   @chainable
     */
    function noStroke(): p5;

    /**
     *   Sets the color used to draw lines and borders
     *   around shapes. Calling stroke(255, 165, 0) or
     *   stroke('orange') means all shapes drawn after the
     *   stroke() command 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 v1 red value if color mode is RGB or hue
     *   value if color mode is HSB.
     *   @param v2 green value if color mode is RGB or
     *   saturation value if color mode is HSB.
     *   @param v3 blue value if color mode is RGB or
     *   brightness value if color mode is HSB.
     *   @chainable
     */
    function stroke(v1: number, v2: number, v3: number, alpha?: number): p5;

    /**
     *   Sets the color used to draw lines and borders
     *   around shapes. Calling stroke(255, 165, 0) or
     *   stroke('orange') means all shapes drawn after the
     *   stroke() command 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 value a color string.
     *   @chainable
     */
    function stroke(value: string): p5;

    /**
     *   Sets the color used to draw lines and borders
     *   around shapes. Calling stroke(255, 165, 0) or
     *   stroke('orange') means all shapes drawn after the
     *   stroke() command 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 gray a grayscale value.
     *   @chainable
     */
    function stroke(gray: number, alpha?: number): p5;

    /**
     *   Sets the color used to draw lines and borders
     *   around shapes. Calling stroke(255, 165, 0) or
     *   stroke('orange') means all shapes drawn after the
     *   stroke() command 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 values an array containing the red, green,
     *   blue, and alpha components of the color.
     *   @chainable
     */
    function stroke(values: number[]): p5;

    /**
     *   Sets the color used to draw lines and borders
     *   around shapes. Calling stroke(255, 165, 0) or
     *   stroke('orange') means all shapes drawn after the
     *   stroke() command 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 color the stroke color.
     *   @chainable
     */
    function stroke(color: p5.Color): p5;

    /**
     *   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 [strengthFill] a number (0-255) for the
     *   strength of erasing under a shape's interior.
     *   Defaults to 255, which is full strength.
     *   @param [strengthStroke] a number (0-255) for the
     *   strength of erasing under a shape's edge. Defaults
     *   to 255, which is full strength.
     *   @chainable
     */
    function erase(strengthFill?: number, strengthStroke?: number): p5;

    /**
     *   Ends erasing that was started with erase(). The
     *   fill(), stroke(), and blendMode() settings will
     *   return to what they were prior to calling erase().
     *   @chainable
     */
    function noErase(): p5;

    /**
     *   Draws an arc to the canvas. Arcs are drawn along
     *   the outer edge of an ellipse (oval) defined by the
     *   x, y, w, and h parameters. Use the start and stop
     *   parameters to specify the angles (in radians) at
     *   which to draw the arc. Arcs are always drawn
     *   clockwise from start to stop. The origin of the
     *   arc's ellipse may be changed with the
     *   ellipseMode() function. The optional mode
     *   parameter determines the arc's fill style. The
     *   fill modes are a semi-circle (OPEN), a closed
     *   semi-circle (CHORD), or a closed pie segment
     *   (PIE).
     *   @param x x-coordinate of the arc's ellipse.
     *   @param y y-coordinate of the arc's ellipse.
     *   @param w width of the arc's ellipse by default.
     *   @param h height of the arc's ellipse by default.
     *   @param start angle to start the arc, specified in
     *   radians.
     *   @param stop angle to stop the arc, specified in
     *   radians.
     *   @param [mode] optional parameter to determine the
     *   way of drawing the arc. either CHORD, PIE, or
     *   OPEN.
     *   @param [detail] optional parameter for WebGL mode
     *   only. This is to specify the number of vertices
     *   that makes up the perimeter of the arc. Default
     *   value is 25. Won't draw a stroke for a detail of
     *   more than 50.
     *   @chainable
     */
    function arc(
        x: number,
        y: number,
        w: number,
        h: number,
        start: number,
        stop: number,
        mode?: p5.ARC_MODE,
        detail?: number
    ): p5;

    /**
     *   Draws an ellipse (oval) to the canvas. An ellipse
     *   with equal width and height is a circle. By
     *   default, the first two parameters set the location
     *   of the center of the ellipse. The third and fourth
     *   parameters set the shape's width and height,
     *   respectively. The origin may be changed with the
     *   ellipseMode() function. If no height is specified,
     *   the value of width is used for both the width and
     *   height. If a negative height or width is
     *   specified, the absolute value is taken.
     *   @param x x-coordinate of the center of the
     *   ellipse.
     *   @param y y-coordinate of the center of the
     *   ellipse.
     *   @param w width of the ellipse.
     *   @param [h] height of the ellipse.
     *   @chainable
     */
    function ellipse(x: number, y: number, w: number, h?: number): p5;

    /**
     *   Draws an ellipse (oval) to the canvas. An ellipse
     *   with equal width and height is a circle. By
     *   default, the first two parameters set the location
     *   of the center of the ellipse. The third and fourth
     *   parameters set the shape's width and height,
     *   respectively. The origin may be changed with the
     *   ellipseMode() function. If no height is specified,
     *   the value of width is used for both the width and
     *   height. If a negative height or width is
     *   specified, the absolute value is taken.
     *   @param x x-coordinate of the center of the
     *   ellipse.
     *   @param y y-coordinate of the center of the
     *   ellipse.
     *   @param w width of the ellipse.
     *   @param h height of the ellipse.
     *   @param [detail] optional parameter for WebGL mode
     *   only. This is to specify the number of vertices
     *   that makes up the perimeter of the ellipse.
     *   Default value is 25. Won't draw a stroke for a
     *   detail of more than 50.
     */
    function ellipse(x: number, y: number, w: number, h: number, detail?: number): void;

    /**
     *   Draws a circle to the canvas. A circle is a round
     *   shape. Every point on the edge of a circle is the
     *   same distance from its center. By default, the
     *   first two parameters set the location of the
     *   center of the circle. The third parameter sets the
     *   shape's width and height (diameter). The origin
     *   may be changed with the ellipseMode() function.
     *   @param x x-coordinate of the center of the circle.
     *   @param y y-coordinate of the center of the circle.
     *   @param d diameter of the circle.
     *   @chainable
     */
    function circle(x: number, y: number, d: number): p5;

    /**
     *   Draws a line, a straight