// Global mode type definitions for p5
// This file was auto-generated. Please do not edit it.
///
import p5 = require("./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 path between two points.
* Its default width is one pixel. The version of
* line() with four parameters draws the line in 2D.
* To color a line, use the stroke() function. To
* change its width, use the strokeWeight() function.
* A line can't be filled, so the fill() function
* won't affect the color of a line. The version of
* line() with six parameters allows the line to be
* drawn in 3D space. Doing so requires adding the
* WEBGL argument to createCanvas().
* @param x1 the x-coordinate of the first point.
* @param y1 the y-coordinate of the first point.
* @param x2 the x-coordinate of the second point.
* @param y2 the y-coordinate of the second point.
* @chainable
*/
function line(x1: number, y1: number, x2: number, y2: number): p5;
/**
* Draws a line, a straight path between two points.
* Its default width is one pixel. The version of
* line() with four parameters draws the line in 2D.
* To color a line, use the stroke() function. To
* change its width, use the strokeWeight() function.
* A line can't be filled, so the fill() function
* won't affect the color of a line. The version of
* line() with six parameters allows the line to be
* drawn in 3D space. Doing so requires adding the
* WEBGL argument to createCanvas().
* @param x1 the x-coordinate of the first point.
* @param y1 the y-coordinate of the first point.
* @param z1 the z-coordinate of the first point.
* @param x2 the x-coordinate of the second point.
* @param y2 the y-coordinate of the second point.
* @param z2 the z-coordinate of the second point.
* @chainable
*/
function line(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number): p5;
/**
* Draws a point, a single coordinate in space. Its
* default size is one pixel. The first two
* parameters are the point's x- and y-coordinates,
* respectively. To color a point, use the stroke()
* function. To change its size, use the
* strokeWeight() function. The version of point()
* with three parameters allows the point to be drawn
* in 3D space. Doing so requires adding the WEBGL
* argument to createCanvas().
*
* The version of point() with one parameter allows
* the point's location to be set with a p5.Vector
* object.
* @param x the x-coordinate.
* @param y the y-coordinate.
* @param [z] the z-coordinate (for WebGL mode).
* @chainable
*/
function point(x: number, y: number, z?: number): p5;
/**
* Draws a point, a single coordinate in space. Its
* default size is one pixel. The first two
* parameters are the point's x- and y-coordinates,
* respectively. To color a point, use the stroke()
* function. To change its size, use the
* strokeWeight() function. The version of point()
* with three parameters allows the point to be drawn
* in 3D space. Doing so requires adding the WEBGL
* argument to createCanvas().
*
* The version of point() with one parameter allows
* the point's location to be set with a p5.Vector
* object.
* @param coordinateVector the coordinate vector.
* @chainable
*/
function point(coordinateVector: p5.Vector): p5;
/**
* Draws a quad to the canvas. A quad is a
* quadrilateral, a four-sided polygon. Some examples
* of quads include rectangles, squares, rhombuses,
* and trapezoids. The first pair of parameters
* (x1,y1) sets the quad's first point. The following
* pairs of parameters set the coordinates for its
* next three points. Parameters should proceed
* clockwise or counter-clockwise around the shape.
* The version of quad() with twelve parameters
* allows the quad to be drawn in 3D space. Doing so
* requires adding the WEBGL argument to
* createCanvas().
* @param x1 the x-coordinate of the first point.
* @param y1 the y-coordinate of the first point.
* @param x2 the x-coordinate of the second point.
* @param y2 the y-coordinate of the second point.
* @param x3 the x-coordinate of the third point.
* @param y3 the y-coordinate of the third point.
* @param x4 the x-coordinate of the fourth point.
* @param y4 the y-coordinate of the fourth point.
* @param [detailX] number of segments in the
* x-direction.
* @param [detailY] number of segments in the
* y-direction.
* @chainable
*/
function quad(
x1: number,
y1: number,
x2: number,
y2: number,
x3: number,
y3: number,
x4: number,
y4: number,
detailX?: number,
detailY?: number
): p5;
/**
* Draws a quad to the canvas. A quad is a
* quadrilateral, a four-sided polygon. Some examples
* of quads include rectangles, squares, rhombuses,
* and trapezoids. The first pair of parameters
* (x1,y1) sets the quad's first point. The following
* pairs of parameters set the coordinates for its
* next three points. Parameters should proceed
* clockwise or counter-clockwise around the shape.
* The version of quad() with twelve parameters
* allows the quad to be drawn in 3D space. Doing so
* requires adding the WEBGL argument to
* createCanvas().
* @param x1 the x-coordinate of the first point.
* @param y1 the y-coordinate of the first point.
* @param z1 the z-coordinate of the first point.
* @param x2 the x-coordinate of the second point.
* @param y2 the y-coordinate of the second point.
* @param z2 the z-coordinate of the second point.
* @param x3 the x-coordinate of the third point.
* @param y3 the y-coordinate of the third point.
* @param z3 the z-coordinate of the third point.
* @param x4 the x-coordinate of the fourth point.
* @param y4 the y-coordinate of the fourth point.
* @param z4 the z-coordinate of the fourth point.
* @param [detailX] number of segments in the
* x-direction.
* @param [detailY] number of segments in the
* y-direction.
* @chainable
*/
function quad(
x1: number,
y1: number,
z1: number,
x2: number,
y2: number,
z2: number,
x3: number,
y3: number,
z3: number,
x4: number,
y4: number,
z4: number,
detailX?: number,
detailY?: number
): p5;
/**
* Draws a rectangle to the canvas. A rectangle is a
* four-sided polygon with every angle at ninety
* degrees. By default, the first two parameters set
* the location of the rectangle's upper-left corner.
* The third and fourth set the shape's the width and
* height, respectively. The way these parameters are
* interpreted may be changed with the rectMode()
* function. The version of rect() with five
* parameters creates a rounded rectangle. The fifth
* parameter is used as the radius value for all four
* corners.
*
* The version of rect() with eight parameters also
* creates a rounded rectangle. When using eight
* parameters, the latter four set the radius of the
* arc at each corner separately. The radii start
* with the top-left corner and move clockwise around
* the rectangle. If any of these parameters are
* omitted, they are set to the value of the last
* specified corner radius.
* @param x x-coordinate of the rectangle.
* @param y y-coordinate of the rectangle.
* @param w width of the rectangle.
* @param [h] height of the rectangle.
* @param [tl] optional radius of top-left corner.
* @param [tr] optional radius of top-right corner.
* @param [br] optional radius of bottom-right
* corner.
* @param [bl] optional radius of bottom-left corner.
* @chainable
*/
function rect(x: number, y: number, w: number, h?: number, tl?: number, tr?: number, br?: number, bl?: number): p5;
/**
* Draws a rectangle to the canvas. A rectangle is a
* four-sided polygon with every angle at ninety
* degrees. By default, the first two parameters set
* the location of the rectangle's upper-left corner.
* The third and fourth set the shape's the width and
* height, respectively. The way these parameters are
* interpreted may be changed with the rectMode()
* function. The version of rect() with five
* parameters creates a rounded rectangle. The fifth
* parameter is used as the radius value for all four
* corners.
*
* The version of rect() with eight parameters also
* creates a rounded rectangle. When using eight
* parameters, the latter four set the radius of the
* arc at each corner separately. The radii start
* with the top-left corner and move clockwise around
* the rectangle. If any of these parameters are
* omitted, they are set to the value of the last
* specified corner radius.
* @param x x-coordinate of the rectangle.
* @param y y-coordinate of the rectangle.
* @param w width of the rectangle.
* @param h height of the rectangle.
* @param [detailX] number of segments in the
* x-direction (for WebGL mode).
* @param [detailY] number of segments in the
* y-direction (for WebGL mode).
* @chainable
*/
function rect(x: number, y: number, w: number, h: number, detailX?: number, detailY?: number): p5;
/**
* Draws a square to the canvas. A square is a
* four-sided polygon with every angle at ninety
* degrees and equal side lengths. By default, the
* first two parameters set the location of the
* square's upper-left corner. The third parameter
* sets its side size. The way these parameters are
* interpreted may be changed with the rectMode()
* function. The version of square() with four
* parameters creates a rounded square. The fourth
* parameter is used as the radius value for all four
* corners.
*
* The version of square() with seven parameters also
* creates a rounded square. When using seven
* parameters, the latter four set the radius of the
* arc at each corner separately. The radii start
* with the top-left corner and move clockwise around
* the square. If any of these parameters are
* omitted, they are set to the value of the last
* specified corner radius.
* @param x x-coordinate of the square.
* @param y y-coordinate of the square.
* @param s side size of the square.
* @param [tl] optional radius of top-left corner.
* @param [tr] optional radius of top-right corner.
* @param [br] optional radius of bottom-right
* corner.
* @param [bl] optional radius of bottom-left corner.
* @chainable
*/
function square(x: number, y: number, s: number, tl?: number, tr?: number, br?: number, bl?: number): p5;
/**
* Draws a triangle to the canvas. A triangle is a
* three-sided polygon. The first two parameters
* specify the triangle's first point (x1,y1). The
* middle two parameters specify its second point
* (x2,y2). And the last two parameters specify its
* third point (x3, y3).
* @param x1 x-coordinate of the first point.
* @param y1 y-coordinate of the first point.
* @param x2 x-coordinate of the second point.
* @param y2 y-coordinate of the second point.
* @param x3 x-coordinate of the third point.
* @param y3 y-coordinate of the third point.
* @chainable
*/
function triangle(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): p5;
/**
* Modifies the location from which ellipses,
* circles, and arcs are drawn. By default, the first
* two parameters are the x- and y-coordinates of the
* shape's center. The next parameters are its width
* and height. This is equivalent to calling
* ellipseMode(CENTER). ellipseMode(RADIUS) also uses
* the first two parameters to set the x- and
* y-coordinates of the shape's center. The next
* parameters are half of the shapes's width and
* height. Calling ellipse(0, 0, 10, 15) draws a
* shape with a width of 20 and height of 30.
*
* ellipseMode(CORNER) uses the first two parameters
* as the upper-left corner of the shape. The next
* parameters are its width and height.
*
* ellipseMode(CORNERS) uses the first two parameters
* as the location of one corner of the ellipse's
* bounding box. The third and fourth parameters are
* the location of the opposite corner.
*
* The argument passed to ellipseMode() must be
* written in ALL CAPS because the constants CENTER,
* RADIUS, CORNER, and CORNERS are defined this way.
* JavaScript is a case-sensitive language.
* @param mode either CENTER, RADIUS, CORNER, or
* CORNERS
* @chainable
*/
function ellipseMode(mode: p5.ELLIPSE_MODE): p5;
/**
* Draws all geometry with jagged (aliased) edges.
* smooth() is active by default in 2D mode. It's
* necessary to call noSmooth() to disable smoothing
* of geometry, images, and fonts.
*
* In WebGL mode, noSmooth() is active by default.
* It's necessary to call smooth() to draw smooth
* (antialiased) edges.
* @chainable
*/
function noSmooth(): p5;
/**
* Modifies the location from which rectangles and
* squares are drawn. By default, the first two
* parameters are the x- and y-coordinates of the
* shape's upper-left corner. The next parameters are
* its width and height. This is equivalent to
* calling rectMode(CORNER). rectMode(CORNERS) also
* uses the first two parameters as the location of
* one of the corners. The third and fourth
* parameters are the location of the opposite
* corner.
*
* rectMode(CENTER) uses the first two parameters as
* the x- and y-coordinates of the shape's center.
* The next parameters are its width and height.
*
* rectMode(RADIUS) also uses the first two
* parameters as the x- and y-coordinates of the
* shape's center. The next parameters are half of
* the shape's width and height.
*
* The argument passed to rectMode() must be written
* in ALL CAPS because the constants CENTER, RADIUS,
* CORNER, and CORNERS are defined this way.
* JavaScript is a case-sensitive language.
* @param mode either CORNER, CORNERS, CENTER, or
* RADIUS
* @chainable
*/
function rectMode(mode: p5.RECT_MODE): p5;
/**
* Draws all geometry with smooth (anti-aliased)
* edges. smooth() will also improve image quality of
* resized images. smooth() is active by default in
* 2D mode. It's necessary to call noSmooth() to
* disable smoothing of geometry, images, and fonts.
*
* In WebGL mode, noSmooth() is active by default.
* It's necessary to call smooth() to draw smooth
* (antialiased) edges.
* @chainable
*/
function smooth(): p5;
/**
* Sets the style for rendering line endings. These
* ends are either rounded (ROUND), squared (SQUARE),
* or extended (PROJECT). The default cap is ROUND.
* The argument passed to strokeCap() must be written
* in ALL CAPS because the constants ROUND, SQUARE,
* and PROJECT are defined this way. JavaScript is a
* case-sensitive language.
* @param cap either ROUND, SQUARE, or PROJECT
* @chainable
*/
function strokeCap(cap: p5.STROKE_CAP): p5;
/**
* Sets the style of the joints which connect line
* segments. These joints are either mitered (MITER),
* beveled (BEVEL), or rounded (ROUND). The default
* joint is MITER in 2D mode and ROUND in WebGL mode.
* The argument passed to strokeJoin() must be
* written in ALL CAPS because the constants MITER,
* BEVEL, and ROUND are defined this way. JavaScript
* is a case-sensitive language.
* @param join either MITER, BEVEL, or ROUND
* @chainable
*/
function strokeJoin(join: p5.STROKE_JOIN): p5;
/**
* Sets the width of the stroke used for lines,
* points, and the border around shapes. All widths
* are set in units of pixels. Note that
* strokeWeight() is affected by any transformation
* or scaling that has been applied previously.
* @param weight the weight of the stroke (in
* pixels).
* @chainable
*/
function strokeWeight(weight: number): p5;
/**
* Draws a cubic Bezier curve on the screen. These
* curves are defined by a series of anchor and
* control points. The first two parameters specify
* the first anchor point and the last two parameters
* specify the other anchor point, which become the
* first and last points on the curve. The middle
* parameters specify the two control points which
* define the shape of the curve. Approximately
* speaking, control points "pull" the curve towards
* them. Bezier curves were developed by French
* automotive engineer Pierre Bezier, and are
* commonly used in computer graphics to define
* gently sloping curves. See also curve().
* @param x1 x-coordinate for the first anchor point
* @param y1 y-coordinate for the first anchor point
* @param x2 x-coordinate for the first control point
* @param y2 y-coordinate for the first control point
* @param x3 x-coordinate for the second control
* point
* @param y3 y-coordinate for the second control
* point
* @param x4 x-coordinate for the second anchor point
* @param y4 y-coordinate for the second anchor point
* @chainable
*/
function bezier(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): p5;
/**
* Draws a cubic Bezier curve on the screen. These
* curves are defined by a series of anchor and
* control points. The first two parameters specify
* the first anchor point and the last two parameters
* specify the other anchor point, which become the
* first and last points on the curve. The middle
* parameters specify the two control points which
* define the shape of the curve. Approximately
* speaking, control points "pull" the curve towards
* them. Bezier curves were developed by French
* automotive engineer Pierre Bezier, and are
* commonly used in computer graphics to define
* gently sloping curves. See also curve().
* @param x1 x-coordinate for the first anchor point
* @param y1 y-coordinate for the first anchor point
* @param z1 z-coordinate for the first anchor point
* @param x2 x-coordinate for the first control point
* @param y2 y-coordinate for the first control point
* @param z2 z-coordinate for the first control point
* @param x3 x-coordinate for the second control
* point
* @param y3 y-coordinate for the second control
* point
* @param z3 z-coordinate for the second control
* point
* @param x4 x-coordinate for the second anchor point
* @param y4 y-coordinate for the second anchor point
* @param z4 z-coordinate for the second anchor point
* @chainable
*/
function bezier(
x1: number,
y1: number,
z1: number,
x2: number,
y2: number,
z2: number,
x3: number,
y3: number,
z3: number,
x4: number,
y4: number,
z4: number
): p5;
/**
* Sets the resolution at which Bezier's curve is
* displayed. The default value is 20. Note, This
* function is only useful when using the WEBGL
* renderer as the default canvas renderer does not
* use this information.
* @param detail resolution of the curves
* @chainable
*/
function bezierDetail(detail: number): p5;
/**
* Given the x or y co-ordinate values of control and
* anchor points of a bezier curve, it evaluates the
* x or y coordinate of the bezier at position t. The
* parameters a and d are the x or y coordinates of
* first and last points on the curve while b and c
* are of the control points.The final parameter t is
* the position of the resultant point which is given
* between 0 and 1. This can be done once with the x
* coordinates and a second time with the y
* coordinates to get the location of a bezier curve
* at t.
* @param a coordinate of first point on the curve
* @param b coordinate of first control point
* @param c coordinate of second control point
* @param d coordinate of second point on the curve
* @param t value between 0 and 1
* @return the value of the Bezier at position t
*/
function bezierPoint(a: number, b: number, c: number, d: number, t: number): number;
/**
* Evaluates the tangent to the Bezier at position t
* for points a, b, c, d. The parameters a and d are
* the first and last points on the curve, and b and
* c are the control points. The final parameter t
* varies between 0 and 1.
* @param a coordinate of first point on the curve
* @param b coordinate of first control point
* @param c coordinate of second control point
* @param d coordinate of second point on the curve
* @param t value between 0 and 1
* @return the tangent at position t
*/
function bezierTangent(a: number, b: number, c: number, d: number, t: number): number;
/**
* Draws a curved line on the screen between two
* points, given as the middle four parameters. The
* first two parameters are a control point, as if
* the curve came from this point even though it's
* not drawn. The last two parameters similarly
* describe the other control point. Longer curves
* can be created by putting a series of curve()
* functions together or using curveVertex(). An
* additional function called curveTightness()
* provides control for the visual quality of the
* curve. The curve() function is an implementation
* of Catmull-Rom splines.
* @param x1 x-coordinate for the beginning control
* point
* @param y1 y-coordinate for the beginning control
* point
* @param x2 x-coordinate for the first point
* @param y2 y-coordinate for the first point
* @param x3 x-coordinate for the second point
* @param y3 y-coordinate for the second point
* @param x4 x-coordinate for the ending control
* point
* @param y4 y-coordinate for the ending control
* point
* @chainable
*/
function curve(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): p5;
/**
* Draws a curved line on the screen between two
* points, given as the middle four parameters. The
* first two parameters are a control point, as if
* the curve came from this point even though it's
* not drawn. The last two parameters similarly
* describe the other control point. Longer curves
* can be created by putting a series of curve()
* functions together or using curveVertex(). An
* additional function called curveTightness()
* provides control for the visual quality of the
* curve. The curve() function is an implementation
* of Catmull-Rom splines.
* @param x1 x-coordinate for the beginning control
* point
* @param y1 y-coordinate for the beginning control
* point
* @param z1 z-coordinate for the beginning control
* point
* @param x2 x-coordinate for the first point
* @param y2 y-coordinate for the first point
* @param z2 z-coordinate for the first point
* @param x3 x-coordinate for the second point
* @param y3 y-coordinate for the second point
* @param z3 z-coordinate for the second point
* @param x4 x-coordinate for the ending control
* point
* @param y4 y-coordinate for the ending control
* point
* @param z4 z-coordinate for the ending control
* point
* @chainable
*/
function curve(
x1: number,
y1: number,
z1: number,
x2: number,
y2: number,
z2: number,
x3: number,
y3: number,
z3: number,
x4: number,
y4: number,
z4: number
): p5;
/**
* Sets the resolution at which curves display. The
* default value is 20 while the minimum value is 3.
* This function is only useful when using the WEBGL
* renderer as the default canvas renderer does not
* use this information.
* @param resolution resolution of the curves
* @chainable
*/
function curveDetail(resolution: number): p5;
/**
* Modifies the quality of forms created with curve()
* and curveVertex().The parameter tightness
* determines how the curve fits to the vertex
* points. The value 0.0 is the default value for
* tightness (this value defines the curves to be
* Catmull-Rom splines) and the value 1.0 connects
* all the points with straight lines. Values within
* the range -5.0 and 5.0 will deform the curves but
* will leave them recognizable and as values
* increase in magnitude, they will continue to
* deform.
* @param amount amount of deformation from the
* original vertices
* @chainable
*/
function curveTightness(amount: number): p5;
/**
* Evaluates the curve at position t for points a, b,
* c, d. The parameter t varies between 0 and 1, a
* and d are control points of the curve, and b and c
* are the start and end points of the curve. This
* can be done once with the x coordinates and a
* second time with the y coordinates to get the
* location of a curve at t.
* @param a coordinate of first control point of the
* curve
* @param b coordinate of first point
* @param c coordinate of second point
* @param d coordinate of second control point
* @param t value between 0 and 1
* @return Curve value at position t
*/
function curvePoint(a: number, b: number, c: number, d: number, t: number): number;
/**
* Evaluates the tangent to the curve at position t
* for points a, b, c, d. The parameter t varies
* between 0 and 1, a and d are points on the curve,
* and b and c are the control points.
* @param a coordinate of first control point
* @param b coordinate of first point on the curve
* @param c coordinate of second point on the curve
* @param d coordinate of second conrol point
* @param t value between 0 and 1
* @return the tangent at position t
*/
function curveTangent(a: number, b: number, c: number, d: number, t: number): number;
/**
* Use the beginContour() and endContour() functions
* to create negative shapes within shapes such as
* the center of the letter 'O'. beginContour()
* begins recording vertices for the shape and
* endContour() stops recording. The vertices that
* define a negative shape must "wind" in the
* opposite direction from the exterior shape. First
* draw vertices for the exterior clockwise order,
* then for internal shapes, draw vertices shape in
* counter-clockwise. These functions can only be
* used within a beginShape()/endShape() pair and
* transformations such as translate(), rotate(), and
* scale() do not work within a
* beginContour()/endContour() pair. It is also not
* possible to use other shapes, such as ellipse() or
* rect() within.
* @chainable
*/
function beginContour(): p5;
/**
* Using the beginShape() and endShape() functions
* allow creating more complex forms. beginShape()
* begins recording vertices for a shape and
* endShape() stops recording. The value of the kind
* parameter tells it which types of shapes to create
* from the provided vertices. With no mode
* specified, the shape can be any irregular polygon.
* The parameters available for beginShape() are:
*
* POINTS Draw a series of points
*
* LINES Draw a series of unconnected line segments
* (individual lines)
*
* TRIANGLES Draw a series of separate triangles
*
* TRIANGLE_FAN Draw a series of connected triangles
* sharing the first vertex in a fan-like fashion
*
* TRIANGLE_STRIP Draw a series of connected
* triangles in strip fashion
*
* QUADS Draw a series of separate quads
*
* QUAD_STRIP Draw quad strip using adjacent edges to
* form the next quad
*
* TESS (WEBGL only) Handle irregular polygon for
* filling curve by explicit tessellation
*
* After calling the beginShape() function, a series
* of vertex() commands must follow. To stop drawing
* the shape, call endShape(). Each shape will be
* outlined with the current stroke color and filled
* with the fill color.
*
* Transformations such as translate(), rotate(), and
* scale() do not work within beginShape(). It is
* also not possible to use other shapes, such as
* ellipse() or rect() within beginShape().
* @param [kind] either POINTS, LINES, TRIANGLES,
* TRIANGLE_FAN TRIANGLE_STRIP, QUADS, QUAD_STRIP or
* TESS
* @chainable
*/
function beginShape(kind?: p5.BEGIN_KIND): p5;
/**
* Specifies vertex coordinates for Bezier curves.
* Each call to bezierVertex() defines the position
* of two control points and one anchor point of a
* Bezier curve, adding a new segment to a line or
* shape. For WebGL mode bezierVertex() can be used
* in 2D as well as 3D mode. 2D mode expects 6
* parameters, while 3D mode expects 9 parameters
* (including z coordinates). The first time
* bezierVertex() is used within a beginShape() call,
* it must be prefaced with a call to vertex() to set
* the first anchor point. This function must be used
* between beginShape() and endShape() and only when
* there is no MODE or POINTS parameter specified to
* beginShape().
* @param x2 x-coordinate for the first control point
* @param y2 y-coordinate for the first control point
* @param x3 x-coordinate for the second control
* point
* @param y3 y-coordinate for the second control
* point
* @param x4 x-coordinate for the anchor point
* @param y4 y-coordinate for the anchor point
* @chainable
*/
function bezierVertex(x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): p5;
/**
* Specifies vertex coordinates for Bezier curves.
* Each call to bezierVertex() defines the position
* of two control points and one anchor point of a
* Bezier curve, adding a new segment to a line or
* shape. For WebGL mode bezierVertex() can be used
* in 2D as well as 3D mode. 2D mode expects 6
* parameters, while 3D mode expects 9 parameters
* (including z coordinates). The first time
* bezierVertex() is used within a beginShape() call,
* it must be prefaced with a call to vertex() to set
* the first anchor point. This function must be used
* between beginShape() and endShape() and only when
* there is no MODE or POINTS parameter specified to
* beginShape().
* @param x2 x-coordinate for the first control point
* @param y2 y-coordinate for the first control point
* @param z2 z-coordinate for the first control point
* (for WebGL mode)
* @param x3 x-coordinate for the second control
* point
* @param y3 y-coordinate for the second control
* point
* @param z3 z-coordinate for the second control
* point (for WebGL mode)
* @param x4 x-coordinate for the anchor point
* @param y4 y-coordinate for the anchor point
* @param z4 z-coordinate for the anchor point (for
* WebGL mode)
* @chainable
*/
function bezierVertex(
x2: number,
y2: number,
z2: number,
x3: number,
y3: number,
z3: number,
x4: number,
y4: number,
z4: number
): p5;
/**
* Specifies vertex coordinates for curves. This
* function may only be used between beginShape() and
* endShape() and only when there is no MODE
* parameter specified to beginShape(). For WebGL
* mode curveVertex() can be used in 2D as well as 3D
* mode. 2D mode expects 2 parameters, while 3D mode
* expects 3 parameters. The first and last points in
* a series of curveVertex() lines will be used to
* guide the beginning and end of the curve. A
* minimum of four points is required to draw a tiny
* curve between the second and third points. Adding
* a fifth point with curveVertex() will draw the
* curve between the second, third, and fourth
* points. The curveVertex() function is an
* implementation of Catmull-Rom splines.
* @param x x-coordinate of the vertex
* @param y y-coordinate of the vertex
* @chainable
*/
function curveVertex(x: number, y: number): p5;
/**
* Specifies vertex coordinates for curves. This
* function may only be used between beginShape() and
* endShape() and only when there is no MODE
* parameter specified to beginShape(). For WebGL
* mode curveVertex() can be used in 2D as well as 3D
* mode. 2D mode expects 2 parameters, while 3D mode
* expects 3 parameters. The first and last points in
* a series of curveVertex() lines will be used to
* guide the beginning and end of the curve. A
* minimum of four points is required to draw a tiny
* curve between the second and third points. Adding
* a fifth point with curveVertex() will draw the
* curve between the second, third, and fourth
* points. The curveVertex() function is an
* implementation of Catmull-Rom splines.
* @param x x-coordinate of the vertex
* @param y y-coordinate of the vertex
* @param [z] z-coordinate of the vertex (for WebGL
* mode)
* @chainable
*/
function curveVertex(x: number, y: number, z?: number): p5;
/**
* Use the beginContour() and endContour() functions
* to create negative shapes within shapes such as
* the center of the letter 'O'. beginContour()
* begins recording vertices for the shape and
* endContour() stops recording. The vertices that
* define a negative shape must "wind" in the
* opposite direction from the exterior shape. First
* draw vertices for the exterior clockwise order,
* then for internal shapes, draw vertices shape in
* counter-clockwise. These functions can only be
* used within a beginShape()/endShape() pair and
* transformations such as translate(), rotate(), and
* scale() do not work within a
* beginContour()/endContour() pair. It is also not
* possible to use other shapes, such as ellipse() or
* rect() within.
* @chainable
*/
function endContour(): p5;
/**
* The endShape() function is the companion to
* beginShape() and may only be called after
* beginShape(). When endShape() is called, all of
* the image data defined since the previous call to
* beginShape() is written into the image buffer. The
* constant CLOSE as the value for the mode parameter
* to close the shape (to connect the beginning and
* the end).
* @param [mode] use CLOSE to close the shape
* @chainable
*/
function endShape(mode?: p5.END_MODE): p5;
/**
* Specifies vertex coordinates for quadratic Bezier
* curves. Each call to quadraticVertex() defines the
* position of one control points and one anchor
* point of a Bezier curve, adding a new segment to a
* line or shape. The first time quadraticVertex() is
* used within a beginShape() call, it must be
* prefaced with a call to vertex() to set the first
* anchor point. For WebGL mode quadraticVertex() can
* be used in 2D as well as 3D mode. 2D mode expects
* 4 parameters, while 3D mode expects 6 parameters
* (including z coordinates). This function must be
* used between beginShape() and endShape() and only
* when there is no MODE or POINTS parameter
* specified to beginShape().
* @param cx x-coordinate for the control point
* @param cy y-coordinate for the control point
* @param x3 x-coordinate for the anchor point
* @param y3 y-coordinate for the anchor point
* @chainable
*/
function quadraticVertex(cx: number, cy: number, x3: number, y3: number): p5;
/**
* Specifies vertex coordinates for quadratic Bezier
* curves. Each call to quadraticVertex() defines the
* position of one control points and one anchor
* point of a Bezier curve, adding a new segment to a
* line or shape. The first time quadraticVertex() is
* used within a beginShape() call, it must be
* prefaced with a call to vertex() to set the first
* anchor point. For WebGL mode quadraticVertex() can
* be used in 2D as well as 3D mode. 2D mode expects
* 4 parameters, while 3D mode expects 6 parameters
* (including z coordinates). This function must be
* used between beginShape() and endShape() and only
* when there is no MODE or POINTS parameter
* specified to beginShape().
* @param cx x-coordinate for the control point
* @param cy y-coordinate for the control point
* @param cz z-coordinate for the control point (for
* WebGL mode)
* @param x3 x-coordinate for the anchor point
* @param y3 y-coordinate for the anchor point
* @param z3 z-coordinate for the anchor point (for
* WebGL mode)
* @chainable
*/
function quadraticVertex(cx: number, cy: number, cz: number, x3: number, y3: number, z3: number): p5;
/**
* All shapes are constructed by connecting a series
* of vertices. vertex() is used to specify the
* vertex coordinates for points, lines, triangles,
* quads, and polygons. It is used exclusively within
* the beginShape() and endShape() functions.
* @param x x-coordinate of the vertex
* @param y y-coordinate of the vertex
* @chainable
*/
function vertex(x: number, y: number): p5;
/**
* All shapes are constructed by connecting a series
* of vertices. vertex() is used to specify the
* vertex coordinates for points, lines, triangles,
* quads, and polygons. It is used exclusively within
* the beginShape() and endShape() functions.
* @param x x-coordinate of the vertex
* @param y y-coordinate of the vertex
* @param [z] z-coordinate of the vertex. Defaults to
* 0 if not specified.
* @chainable
*/
function vertex(x: number, y: number, z?: number): p5;
/**
* All shapes are constructed by connecting a series
* of vertices. vertex() is used to specify the
* vertex coordinates for points, lines, triangles,
* quads, and polygons. It is used exclusively within
* the beginShape() and endShape() functions.
* @param x x-coordinate of the vertex
* @param y y-coordinate of the vertex
* @param [z] z-coordinate of the vertex. Defaults to
* 0 if not specified.
* @param [u] the vertex's texture u-coordinate
* @param [v] the vertex's texture v-coordinate
* @chainable
*/
function vertex(x: number, y: number, z?: number, u?: number, v?: number): p5;
/**
* Sets the 3d vertex normal to use for subsequent
* vertices drawn with vertex(). A normal is a vector
* that is generally nearly perpendicular to a
* shape's surface which controls how much light will
* be reflected from that part of the surface.
* @param vector A p5.Vector representing the vertex
* normal.
* @chainable
*/
function normal(vector: p5.Vector): p5;
/**
* Sets the 3d vertex normal to use for subsequent
* vertices drawn with vertex(). A normal is a vector
* that is generally nearly perpendicular to a
* shape's surface which controls how much light will
* be reflected from that part of the surface.
* @param x The x component of the vertex normal.
* @param y The y component of the vertex normal.
* @param z The z component of the vertex normal.
* @chainable
*/
function normal(x: number, y: number, z: number): p5;
/**
* Version of this p5.js.
*/
const VERSION: p5.VERSION;
/**
* The default, two-dimensional renderer.
*/
const P2D: p5.P2D;
/**
* One of the two render modes in p5.js, used for
* computationally intensive tasks like 3D rendering
* and shaders. WEBGL differs from the default P2D
* renderer in the following ways:
*
* - Coordinate System - When drawing in WEBGL mode,
* the origin point (0,0,0) is located at the center
* of the screen, not the top-left corner. See the
* learn page about coordinates and transformations.
* - 3D Shapes - WEBGL mode can be used to draw
* 3-dimensional shapes like box(), sphere(), cone(),
* and more. See the learn page about custom geometry
* to make more complex objects.
* - Shape Detail - When drawing in WEBGL mode, you
* can specify how smooth curves should be drawn by
* using a detail parameter. See the wiki section
* about shapes for a more information and an
* example.
* - Textures - A texture is like a skin that wraps
* onto a shape. See the wiki section about textures
* for examples of mapping images onto surfaces with
* textures.
* - Materials and Lighting - WEBGL offers different
* types of lights like ambientLight() to place
* around a scene. Materials like specularMaterial()
* reflect the lighting to convey shape and depth.
* See the learn page for styling and appearance to
* experiment with different combinations.
* - Camera - The viewport of a WEBGL sketch can be
* adjusted by changing camera attributes. See the
* learn page section about cameras for an
* explanation of camera controls.
* - Text - WEBGL requires opentype/truetype font
* files to be preloaded using loadFont(). See the
* wiki section about text for details, along with a
* workaround.
* - Shaders - Shaders are hardware accelerated
* programs that can be used for a variety of effects
* and graphics. See the introduction to shaders to
* get started with shaders in p5.js.
* - Graphics Acceleration - WEBGL mode uses the
* graphics card instead of the CPU, so it may help
* boost the performance of your sketch (example:
* drawing more shapes on the screen at once).
*
* To learn more about WEBGL mode, check out all the
* interactive WEBGL tutorials in the "Learn" section
* of this website, or read the wiki article "Getting
* started with WebGL in p5".
*/
const WEBGL: p5.WEBGL;
/**
* One of the two possible values of a WebGL canvas
* (either WEBGL or WEBGL2), which can be used to
* determine what capabilities the rendering
* environment has.
*/
const WEBGL2: p5.WEBGL2;
const ARROW: p5.ARROW;
const CROSS: p5.CROSS;
const HAND: p5.HAND;
const MOVE: p5.MOVE;
const TEXT: p5.TEXT;
const WAIT: p5.WAIT;
/**
* HALF_PI is a mathematical constant with the value
* 1.57079632679489661923. It is half the ratio of
* the circumference of a circle to its diameter. It
* is useful in combination with the trigonometric
* functions sin() and cos().
*/
const HALF_PI: number;
/**
* PI is a mathematical constant with the value
* 3.14159265358979323846. It is the ratio of the
* circumference of a circle to its diameter. It is
* useful in combination with the trigonometric
* functions sin() and cos().
*/
const PI: number;
/**
* QUARTER_PI is a mathematical constant with the
* value 0.7853982. It is one quarter the ratio of
* the circumference of a circle to its diameter. It
* is useful in combination with the trigonometric
* functions sin() and cos().
*/
const QUARTER_PI: number;
/**
* TAU is an alias for TWO_PI, a mathematical
* constant with the value 6.28318530717958647693. It
* is twice the ratio of the circumference of a
* circle to its diameter. It is useful in
* combination with the trigonometric functions sin()
* and cos().
*/
const TAU: number;
/**
* TWO_PI is a mathematical constant with the value
* 6.28318530717958647693. It is twice the ratio of
* the circumference of a circle to its diameter. It
* is useful in combination with the trigonometric
* functions sin() and cos().
*/
const TWO_PI: number;
/**
* Constant to be used with the angleMode() function,
* to set the mode in which p5.js interprets and
* calculates angles (either DEGREES or RADIANS).
*/
const DEGREES: p5.DEGREES;
/**
* Constant to be used with the angleMode() function,
* to set the mode in which p5.js interprets and
* calculates angles (either RADIANS or DEGREES).
*/
const RADIANS: p5.RADIANS;
const CORNER: p5.CORNER;
const CORNERS: p5.CORNERS;
const RADIUS: p5.RADIUS;
const RIGHT: p5.RIGHT;
const LEFT: p5.LEFT;
const CENTER: p5.CENTER;
const TOP: p5.TOP;
const BOTTOM: p5.BOTTOM;
const BASELINE: p5.BASELINE;
const POINTS: p5.POINTS;
const LINES: p5.LINES;
const LINE_STRIP: p5.LINE_STRIP;
const LINE_LOOP: p5.LINE_LOOP;
const TRIANGLES: p5.TRIANGLES;
const TRIANGLE_FAN: p5.TRIANGLE_FAN;
const TRIANGLE_STRIP: p5.TRIANGLE_STRIP;
const QUADS: p5.QUADS;
const QUAD_STRIP: p5.QUAD_STRIP;
const TESS: p5.TESS;
const CLOSE: p5.CLOSE;
const OPEN: p5.OPEN;
const CHORD: p5.CHORD;
const PIE: p5.PIE;
const PROJECT: p5.PROJECT;
const SQUARE: p5.SQUARE;
const ROUND: p5.ROUND;
const BEVEL: p5.BEVEL;
const MITER: p5.MITER;
const RGB: p5.RGB;
/**
* HSB (hue, saturation, brightness) is a type of
* color model. You can learn more about it at HSB.
*/
const HSB: p5.HSB;
const HSL: p5.HSL;
/**
* AUTO allows us to automatically set the width or
* height of an element (but not both), based on the
* current height and width of the element. Only one
* parameter can be passed to the size function as
* AUTO, at a time.
*/
const AUTO: p5.AUTO;
const ALT: number;
const BACKSPACE: number;
const CONTROL: number;
const DELETE: number;
const DOWN_ARROW: number;
const ENTER: number;
const ESCAPE: number;
const LEFT_ARROW: number;
const OPTION: number;
const RETURN: number;
const RIGHT_ARROW: number;
const SHIFT: number;
const TAB: number;
const UP_ARROW: number;
const BLEND: p5.BLEND;
const REMOVE: p5.REMOVE;
const ADD: p5.ADD;
const DARKEST: p5.DARKEST;
const LIGHTEST: p5.LIGHTEST;
const DIFFERENCE: p5.DIFFERENCE;
const SUBTRACT: p5.SUBTRACT;
const EXCLUSION: p5.EXCLUSION;
const MULTIPLY: p5.MULTIPLY;
const SCREEN: p5.SCREEN;
const REPLACE: p5.REPLACE;
const OVERLAY: p5.OVERLAY;
const HARD_LIGHT: p5.HARD_LIGHT;
const SOFT_LIGHT: p5.SOFT_LIGHT;
const DODGE: p5.DODGE;
const BURN: p5.BURN;
const THRESHOLD: p5.THRESHOLD;
const GRAY: p5.GRAY;
const OPAQUE: p5.OPAQUE;
const INVERT: p5.INVERT;
const POSTERIZE: p5.POSTERIZE;
const DILATE: p5.DILATE;
const ERODE: p5.ERODE;
const BLUR: p5.BLUR;
const NORMAL: p5.NORMAL;
const ITALIC: p5.ITALIC;
const BOLD: p5.BOLD;
const BOLDITALIC: p5.BOLDITALIC;
const CHAR: p5.CHAR;
const WORD: p5.WORD;
const LINEAR: p5.LINEAR;
const QUADRATIC: p5.QUADRATIC;
const BEZIER: p5.BEZIER;
const CURVE: p5.CURVE;
const STROKE: p5.STROKE;
const FILL: p5.FILL;
const TEXTURE: p5.TEXTURE;
const IMMEDIATE: p5.IMMEDIATE;
const IMAGE: p5.IMAGE;
const NEAREST: p5.NEAREST;
const REPEAT: p5.REPEAT;
const CLAMP: p5.CLAMP;
const MIRROR: p5.MIRROR;
const LANDSCAPE: p5.LANDSCAPE;
const PORTRAIT: p5.PORTRAIT;
const GRID: p5.GRID;
const AXES: p5.AXES;
const LABEL: p5.LABEL;
const FALLBACK: p5.FALLBACK;
const CONTAIN: p5.CONTAIN;
const COVER: p5.COVER;
const UNSIGNED_BYTE: p5.UNSIGNED_BYTE;
const UNSIGNED_INT: p5.UNSIGNED_INT;
const FLOAT: p5.FLOAT;
const HALF_FLOAT: p5.HALF_FLOAT;
const RGBA: p5.RGBA;
/**
* The print() function writes to the console area of
* your browser. This function is often helpful for
* looking at the data a program is producing. This
* function creates a new line of text for each call
* to the function. Individual elements can be
* separated with quotes ("") and joined with the
* addition operator (+). Note that calling print()
* without any arguments invokes the window.print()
* function which opens the browser's print dialog.
* To print a blank line to console you can write
* print('\n').
* @param contents any combination of Number, String,
* Object, Boolean, Array to print
*/
function print(contents: any): void;
/**
* Sets the cursor to a predefined symbol or an
* image, or makes it visible if already hidden. If
* you are trying to set an image as the cursor, the
* recommended size is 16×16 or 32×32 pixels. The
* values for parameters x and y must be less than
* the dimensions of the image.
* @param type Built-In: either ARROW, CROSS, HAND,
* MOVE, TEXT and WAIT Native CSS properties: 'grab',
* 'progress', 'cell' etc. External: path for
* cursor's images (Allowed File extensions: .cur,
* .gif, .jpg, .jpeg, .png) For more information on
* Native CSS cursors and url visit:
* https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
* @param [x] the horizontal active spot of the
* cursor (must be less than 32)
* @param [y] the vertical active spot of the cursor
* (must be less than 32)
*/
function cursor(type: string | p5.CURSOR_TYPE, x?: number, y?: number): void;
/**
* Specifies the number of frames to be displayed
* every second. For example, the function call
* frameRate(30) will attempt to refresh 30 times a
* second. If the processor is not fast enough to
* maintain the specified rate, the frame rate will
* not be achieved. Setting the frame rate within
* setup() is recommended. The default frame rate is
* based on the frame rate of the display (here also
* called "refresh rate"), which is set to 60 frames
* per second on most computers. A frame rate of 24
* frames per second (usual for movies) or above will
* be enough for smooth animations. This is the same
* as setFrameRate(val). Calling frameRate() with no
* arguments returns the current framerate. The draw
* function must run at least once before it will
* return a value. This is the same as
* getFrameRate().
*
* Calling frameRate() with arguments that are not of
* the type Number or are non-positive also returns
* current framerate.
* @param fps number of frames to be displayed every
* second
* @chainable
*/
function frameRate(fps: number): p5;
/**
* Specifies the number of frames to be displayed
* every second. For example, the function call
* frameRate(30) will attempt to refresh 30 times a
* second. If the processor is not fast enough to
* maintain the specified rate, the frame rate will
* not be achieved. Setting the frame rate within
* setup() is recommended. The default frame rate is
* based on the frame rate of the display (here also
* called "refresh rate"), which is set to 60 frames
* per second on most computers. A frame rate of 24
* frames per second (usual for movies) or above will
* be enough for smooth animations. This is the same
* as setFrameRate(val). Calling frameRate() with no
* arguments returns the current framerate. The draw
* function must run at least once before it will
* return a value. This is the same as
* getFrameRate().
*
* Calling frameRate() with arguments that are not of
* the type Number or are non-positive also returns
* current framerate.
* @return current frameRate
*/
function frameRate(): number;
/**
* Returns _targetFrameRate variable. The default
* _targetFrameRate is set to 60. This could be
* changed by calling frameRate() and setting it to
* the desired value. When getTargetFrameRate() is
* called, it should return the value that was set.
* @return _targetFrameRate
*/
function getTargetFrameRate(): number;
/**
* Hides the cursor from view.
*/
function noCursor(): void;
/**
* The windowResized() function is called once every
* time the browser window is resized. This is a good
* place to resize the canvas or do any other
* adjustments to accommodate the new window size.
* @param [event] optional Event callback argument.
*/
function windowResized(event?: object): void;
/**
* If argument is given, sets the sketch to
* fullscreen or not based on the value of the
* argument. If no argument is given, returns the
* current fullscreen state. Note that due to browser
* restrictions this can only be called on user
* input, for example, on mouse press like the
* example below.
* @param [val] whether the sketch should be in
* fullscreen mode or not
* @return current fullscreen state
*/
function fullscreen(val?: boolean): boolean;
/**
* Sets the pixel scaling for high pixel density
* displays. By default pixel density is set to match
* display density, call pixelDensity(1) to turn this
* off. Calling pixelDensity() with no arguments
* returns the current pixel density of the sketch.
* @param val whether or how much the sketch should
* scale
* @chainable
*/
function pixelDensity(val: number): p5;
/**
* Sets the pixel scaling for high pixel density
* displays. By default pixel density is set to match
* display density, call pixelDensity(1) to turn this
* off. Calling pixelDensity() with no arguments
* returns the current pixel density of the sketch.
* @return current pixel density of the sketch
*/
function pixelDensity(): number;
/**
* Returns the pixel density of the current display
* the sketch is running on.
* @return current pixel density of the display
*/
function displayDensity(): number;
/**
* Gets the current URL. Note: when using the p5
* Editor, this will return an empty object because
* the sketch is embedded in an iframe. It will work
* correctly if you view the sketch using the
* editor's present or share URLs.
* @return url
*/
function getURL(): string;
/**
* Gets the current URL path as an array. Note: when
* using the p5 Editor, this will return an empty
* object because the sketch is embedded in an
* iframe. It will work correctly if you view the
* sketch using the editor's present or share URLs.
* @return path components
*/
function getURLPath(): string[];
/**
* Gets the current URL params as an Object. Note:
* when using the p5 Editor, this will return an
* empty object because the sketch is embedded in an
* iframe. It will work correctly if you view the
* sketch using the editor's present or share URLs.
* @return URL params
*/
function getURLParams(): object;
/**
* The system variable frameCount contains the number
* of frames that have been displayed since the
* program started. Inside setup() the value is 0,
* after the first iteration of draw() it is 1, etc.
*/
let frameCount: number;
/**
* The system variable deltaTime contains the time
* difference between the beginning of the previous
* frame and the beginning of the current frame in
* milliseconds. This variable is useful for creating
* time sensitive animation or physics calculation
* that should stay constant regardless of frame
* rate.
*/
let deltaTime: number;
/**
* Confirms if the window a p5.js program is in is
* "focused," meaning that the sketch will accept
* mouse or keyboard input. This variable is "true"
* if the window is focused and "false" if not.
*/
let focused: boolean;
/**
* If the sketch was created in WebGL mode, then
* weglVersion will indicate which version of WebGL
* it is using. It will try to create a WebGL2 canvas
* unless you have requested WebGL1 via
* setAttributes({ version: 1 }), and will fall back
* to WebGL1 if WebGL2 is not available. webglVersion
* will always be either WEBGL2, WEBGL, or P2D if not
* in WebGL mode.
*/
let webglVersion: string;
/**
* System variable that stores the width of the
* screen display according to The default
* pixelDensity. This is used to run a full-screen
* program on any display size. To return actual
* screen size, multiply this by pixelDensity.
*/
let displayWidth: number;
/**
* System variable that stores the height of the
* screen display according to The default
* pixelDensity. This is used to run a full-screen
* program on any display size. To return actual
* screen size, multiply this by pixelDensity.
*/
let displayHeight: number;
/**
* System variable that stores the width of the inner
* window, it maps to window.innerWidth.
*/
let windowWidth: number;
/**
* System variable that stores the height of the
* inner window, it maps to window.innerHeight.
*/
let windowHeight: number;
/**
* System variable that stores the width of the
* drawing canvas. This value is set by the first
* parameter of the createCanvas() function. For
* example, the function call createCanvas(320, 240)
* sets the width variable to the value 320. The
* value of width defaults to 100 if createCanvas()
* is not used in a program.
*/
let width: number;
/**
* System variable that stores the height of the
* drawing canvas. This value is set by the second
* parameter of the createCanvas() function. For
* example, the function call createCanvas(320, 240)
* sets the height variable to the value 240. The
* value of height defaults to 100 if createCanvas()
* is not used in a program.
*/
let height: number;
/**
* Creates a canvas element in the document and sets
* its dimensions in pixels. This method should be
* called only once at the start of setup(). Calling
* createCanvas more than once in a sketch will
* result in very unpredictable behavior. If you want
* more than one drawing canvas you could use
* createGraphics() (hidden by default but it can be
* shown). Important note: in 2D mode (i.e. when
* p5.Renderer is not set) the origin (0,0) is
* positioned at the top left of the screen. In 3D
* mode (i.e. when p5.Renderer is set to WEBGL), the
* origin is positioned at the center of the canvas.
* See this issue for more information.
*
* A WebGL canvas will use a WebGL2 context if it is
* supported by the browser. Check the webglVersion
* property to check what version is being used, or
* call setAttributes({ version: 1 }) to create a
* WebGL1 context.
*
* The system variables width and height are set by
* the parameters passed to this function. If
* createCanvas() is not used, the window will be
* given a default size of 100×100 pixels.
*
* Optionally, an existing canvas can be passed using
* a selector, ie. document.getElementById(''). If
* specified, avoid using setAttributes() afterwards,
* as this will remove and recreate the existing
* canvas.
*
* For more ways to position the canvas, see the
* positioning the canvas wiki page.
* @param w width of the canvas
* @param h height of the canvas
* @param [renderer] either P2D or WEBGL
* @param [canvas] existing html canvas element
* @return pointer to p5.Renderer holding canvas
*/
function createCanvas(w: number, h: number, renderer?: p5.RENDERER, canvas?: object): p5.Renderer;
/**
* Creates a canvas element in the document and sets
* its dimensions in pixels. This method should be
* called only once at the start of setup(). Calling
* createCanvas more than once in a sketch will
* result in very unpredictable behavior. If you want
* more than one drawing canvas you could use
* createGraphics() (hidden by default but it can be
* shown). Important note: in 2D mode (i.e. when
* p5.Renderer is not set) the origin (0,0) is
* positioned at the top left of the screen. In 3D
* mode (i.e. when p5.Renderer is set to WEBGL), the
* origin is positioned at the center of the canvas.
* See this issue for more information.
*
* A WebGL canvas will use a WebGL2 context if it is
* supported by the browser. Check the webglVersion
* property to check what version is being used, or
* call setAttributes({ version: 1 }) to create a
* WebGL1 context.
*
* The system variables width and height are set by
* the parameters passed to this function. If
* createCanvas() is not used, the window will be
* given a default size of 100×100 pixels.
*
* Optionally, an existing canvas can be passed using
* a selector, ie. document.getElementById(''). If
* specified, avoid using setAttributes() afterwards,
* as this will remove and recreate the existing
* canvas.
*
* For more ways to position the canvas, see the
* positioning the canvas wiki page.
* @param w width of the canvas
* @param h height of the canvas
* @param [canvas] existing html canvas element
* @return pointer to p5.Renderer holding canvas
*/
function createCanvas(w: number, h: number, canvas?: object): p5.Renderer;
/**
* Resizes the canvas to given width and height. The
* canvas will be cleared and draw will be called
* immediately, allowing the sketch to re-render
* itself in the resized canvas.
* @param w width of the canvas
* @param h height of the canvas
* @param [noRedraw] don't redraw the canvas
* immediately
*/
function resizeCanvas(w: number, h: number, noRedraw?: boolean): void;
/**
* Removes the default canvas for a p5 sketch that
* doesn't require a canvas
*/
function noCanvas(): void;
/**
* Creates and returns a new p5.Graphics object. Use
* this class if you need to draw into an off-screen
* graphics buffer. The two parameters define the
* width and height in pixels. A WebGL p5.Graphics
* will use a WebGL2 context if it is supported by
* the browser. Check the pg.webglVersion property of
* the renderer to check what version is being used,
* or call pg.setAttributes({ version: 1 }) to create
* a WebGL1 context.
*
* Optionally, an existing canvas can be passed using
* a selector, ie. document.getElementById(''). By
* default this canvas will be hidden (offscreen
* buffer), to make visible, set element's style to
* display:block;
* @param w width of the offscreen graphics buffer
* @param h height of the offscreen graphics buffer
* @param [renderer] either P2D or WEBGL undefined
* defaults to p2d
* @param [canvas] existing html canvas element
* @return offscreen graphics buffer
*/
function createGraphics(w: number, h: number, renderer?: p5.RENDERER, canvas?: object): p5.Graphics;
/**
* Creates and returns a new p5.Graphics object. Use
* this class if you need to draw into an off-screen
* graphics buffer. The two parameters define the
* width and height in pixels. A WebGL p5.Graphics
* will use a WebGL2 context if it is supported by
* the browser. Check the pg.webglVersion property of
* the renderer to check what version is being used,
* or call pg.setAttributes({ version: 1 }) to create
* a WebGL1 context.
*
* Optionally, an existing canvas can be passed using
* a selector, ie. document.getElementById(''). By
* default this canvas will be hidden (offscreen
* buffer), to make visible, set element's style to
* display:block;
* @param w width of the offscreen graphics buffer
* @param h height of the offscreen graphics buffer
* @param [canvas] existing html canvas element
* @return offscreen graphics buffer
*/
function createGraphics(w: number, h: number, canvas?: object): p5.Graphics;
/**
* Creates and returns a new p5.Framebuffer, a
* high-performance WebGL object that you can draw to
* and then use as a texture. Options can include:
*
* - format: The data format of the texture, either
* UNSIGNED_BYTE, FLOAT, or HALF_FLOAT. The default
* is UNSIGNED_BYTE.
* - channels: What color channels to store, either
* RGB or RGBA. The default is to match the channels
* in the main canvas (with alpha unless disabled
* with setAttributes.)
* - depth: A boolean, whether or not to include a
* depth buffer. Defaults to true.
* - depthFormat: The data format for depth
* information, either UNSIGNED_INT or FLOAT. The
* default is FLOAT if available, or UNSIGNED_INT
* otherwise.
* - antialias: Boolean or Number, whether or not to
* render with antialiased edges, and if so,
* optionally the number of samples to use. Defaults
* to whether or not the main canvas is antialiased,
* using a default of 2 samples if so. Antialiasing
* is only supported when WebGL 2 is available.
* - width: The width of the texture. Defaults to
* matching the main canvas.
* - height: The height of the texture. Defaults to
* matching the main canvas.
* - density: The pixel density of the texture.
* Defaults to the pixel density of the main canvas.
* - textureFiltering: Either LINEAR (nearby pixels
* will be interpolated when reading values from the
* color texture) or NEAREST (no interpolation.)
* Generally, use LINEAR when using the texture as an
* image, and use NEAREST if reading the texture as
* data. Defaults to LINEAR.
*
* If width, height, or density are specified, then
* the framebuffer will keep that size until manually
* changed. Otherwise, it will be autosized, and it
* will update to match the main canvas's size and
* density when the main canvas changes.
* @param [options] An optional object with
* configuration
*/
function createFramebuffer(options?: object): void;
/**
* Blends the pixels in the display window according
* to the defined mode. There is a choice of the
* following modes to blend the source pixels (A)
* with the ones of pixels already in the display
* window (B): - BLEND - linear interpolation of
* colours: C = A*factor + B. This is the default
* blending mode.
* - ADD - sum of A and B
* - DARKEST - only the darkest colour succeeds: C =
* min(A*factor, B).
* - LIGHTEST - only the lightest colour succeeds: C
* = max(A*factor, B).
* - DIFFERENCE - subtract colors from underlying
* image. (2D)
* - EXCLUSION - similar to DIFFERENCE, but less
* extreme.
* - MULTIPLY - multiply the colors, result will
* always be darker.
* - SCREEN - opposite multiply, uses inverse values
* of the colors.
* - REPLACE - the pixels entirely replace the others
* and don't utilize alpha (transparency) values.
* - REMOVE - removes pixels from B with the alpha
* strength of A.
* - OVERLAY - mix of MULTIPLY and SCREEN .
* Multiplies dark values, and screens light values.
* (2D)
* - HARD_LIGHT - SCREEN when greater than 50% gray,
* MULTIPLY when lower. (2D)
* - SOFT_LIGHT - mix of DARKEST and LIGHTEST. Works
* like OVERLAY, but not as harsh. (2D)
* - DODGE - lightens light tones and increases
* contrast, ignores darks. (2D)
* - BURN - darker areas are applied, increasing
* contrast, ignores lights. (2D)
* - SUBTRACT - remainder of A and B (3D)
*
* (2D) indicates that this blend mode only works in
* the 2D renderer.
*
* (3D) indicates that this blend mode only works in
* the WEBGL renderer.
* @param mode blend mode to set for canvas. either
* BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,
* EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
* SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT
*/
function blendMode(mode: p5.BLEND_MODE): void;
/**
* The p5.js API provides a lot of functionality for
* creating graphics, but there is some native HTML5
* Canvas functionality that is not exposed by p5.
* You can still call it directly using the variable
* drawingContext, as in the example shown. This is
* the equivalent of calling canvas.getContext('2d');
* or canvas.getContext('webgl');. See this
* reference for the native canvas API for possible
* drawing functions you can call.
*/
let drawingContext: any;
/**
* Stops p5.js from continuously executing the code
* within draw(). If loop() is called, the code in
* draw() begins to run continuously again. If using
* noLoop() in setup(), it should be the last line
* inside the block. When noLoop() is used, it's not
* possible to manipulate or access the screen inside
* event handling functions such as mousePressed() or
* keyPressed(). Instead, use those functions to call
* redraw() or loop(), which will run draw(), which
* can update the screen properly. This means that
* when noLoop() has been called, no drawing can
* happen, and functions like saveFrames() or
* loadPixels() may not be used.
*
* Note that if the sketch is resized, redraw() will
* be called to update the sketch, even after
* noLoop() has been specified. Otherwise, the sketch
* would enter an odd state until loop() was called.
*
* Use isLooping() to check the current state of
* loop().
*/
function noLoop(): void;
/**
* By default, p5.js loops through draw()
* continuously, executing the code within it.
* However, the draw() loop may be stopped by calling
* noLoop(). In that case, the draw() loop can be
* resumed with loop(). Avoid calling loop() from
* inside setup().
*
* Use isLooping() to check the current state of
* loop().
*/
function loop(): void;
/**
* By default, p5.js loops through draw()
* continuously, executing the code within it. If the
* sketch is stopped with noLoop() or resumed with
* loop(), isLooping() returns the current state for
* use within custom event handlers.
*/
function isLooping(): boolean;
/**
* The push() function saves the current drawing
* style settings and transformations, while pop()
* restores these settings. Note that these functions
* are always used together. They allow you to change
* the style and transformation settings and later
* return to what you had. When a new state is
* started with push(), it builds on the current
* style and transform information. The push() and
* pop() functions can be embedded to provide more
* control. (See the second example for a
* demonstration.) push() stores information related
* to the current transformation state and style
* settings controlled by the following functions:
* fill(), noFill(), noStroke(), stroke(), tint(),
* noTint(), strokeWeight(), strokeCap(),
* strokeJoin(), imageMode(), rectMode(),
* ellipseMode(), colorMode(), textAlign(),
* textFont(), textSize(), textLeading(),
* applyMatrix(), resetMatrix(), rotate(), scale(),
* shearX(), shearY(), translate(), noiseSeed().
*
* In WEBGL mode additional style settings are
* stored. These are controlled by the following
* functions: setCamera(), ambientLight(),
* directionalLight(), pointLight(), texture(),
* specularMaterial(), shininess(), normalMaterial()
* and shader().
*/
function push(): void;
/**
* The push() function saves the current drawing
* style settings and transformations, while pop()
* restores these settings. Note that these functions
* are always used together. They allow you to change
* the style and transformation settings and later
* return to what you had. When a new state is
* started with push(), it builds on the current
* style and transform information. The push() and
* pop() functions can be embedded to provide more
* control. (See the second example for a
* demonstration.) push() stores information related
* to the current transformation state and style
* settings controlled by the following functions:
* fill(), noFill(), noStroke(), stroke(), tint(),
* noTint(), strokeWeight(), strokeCap(),
* strokeJoin(), imageMode(), rectMode(),
* ellipseMode(), colorMode(), textAlign(),
* textFont(), textSize(), textLeading(),
* applyMatrix(), resetMatrix(), rotate(), scale(),
* shearX(), shearY(), translate(), noiseSeed().
*
* In WEBGL mode additional style settings are
* stored. These are controlled by the following
* functions: setCamera(), ambientLight(),
* directionalLight(), pointLight(), texture(),
* specularMaterial(), shininess(), normalMaterial()
* and shader().
*/
function pop(): void;
/**
* Executes the code within draw() one time. This
* function allows the program to update the display
* window only when necessary, for example when an
* event registered by mousePressed() or keyPressed()
* occurs. In structuring a program, it only makes
* sense to call redraw() within events such as
* mousePressed(). This is because redraw() does not
* run draw() immediately (it only sets a flag that
* indicates an update is needed).
*
* The redraw() function does not work properly when
* called inside draw().To enable/disable animations,
* use loop() and noLoop().
*
* In addition you can set the number of redraws per
* method call. Just add an integer as single
* parameter for the number of redraws.
* @param [n] Redraw for n-times. The default value
* is 1.
*/
function redraw(n?: number): void;
/**
* The p5() constructor enables you to activate
* "instance mode" instead of normal "global mode".
* This is an advanced topic. A short description and
* example is included below. Please see Dan
* Shiffman's Coding Train video tutorial or this
* tutorial page for more info. By default, all p5.js
* functions are in the global namespace (i.e. bound
* to the window object), meaning you can call them
* simply ellipse(), fill(), etc. However, this might
* be inconvenient if you are mixing with other JS
* libraries (synchronously or asynchronously) or
* writing long programs of your own. p5.js currently
* supports a way around this problem called
* "instance mode". In instance mode, all p5
* functions are bound up in a single variable
* instead of polluting your global namespace.
*
* Optionally, you can specify a default container
* for the canvas and any other elements to append to
* with a second argument. You can give the ID of an
* element in your html, or an html node itself.
*
* Note that creating instances like this also allows
* you to have more than one p5 sketch on a single
* web page, as they will each be wrapped up with
* their own set up variables. Of course, you could
* also use iframes to have multiple sketches in
* global mode.
* @param sketch a function containing a p5.js sketch
* @param node ID or pointer to HTML DOM node to
* contain sketch in
*/
function p5(sketch: object, node: string | object): void;
/**
* Multiplies the current matrix by the one specified
* through the parameters. This is a powerful
* operation that can perform the equivalent of
* translate, scale, shear and rotate all at once.
* You can learn more about transformation matrices
* on Wikipedia. The naming of the arguments here
* follows the naming of the WHATWG specification
* and corresponds to a transformation matrix of the
* form:
* @param arr an array of numbers - should be 6 or 16
* length (2×3 or 4×4 matrix values)
* @chainable
*/
function applyMatrix(arr: any[]): p5;
/**
* Multiplies the current matrix by the one specified
* through the parameters. This is a powerful
* operation that can perform the equivalent of
* translate, scale, shear and rotate all at once.
* You can learn more about transformation matrices
* on Wikipedia. The naming of the arguments here
* follows the naming of the WHATWG specification
* and corresponds to a transformation matrix of the
* form:
* @param a numbers which define the 2×3 or 4×4
* matrix to be multiplied
* @param b numbers which define the 2×3 or 4×4
* matrix to be multiplied
* @param c numbers which define the 2×3 or 4×4
* matrix to be multiplied
* @param d numbers which define the 2×3 or 4×4
* matrix to be multiplied
* @param e numbers which define the 2×3 or 4×4
* matrix to be multiplied
* @param f numbers which define the 2×3 or 4×4
* matrix to be multiplied
* @chainable
*/
function applyMatrix(a: number, b: number, c: number, d: number, e: number, f: number): p5;
/**
* Multiplies the current matrix by the one specified
* through the parameters. This is a powerful
* operation that can perform the equivalent of
* translate, scale, shear and rotate all at once.
* You can learn more about transformation matrices
* on Wikipedia. The naming of the arguments here
* follows the naming of the WHATWG specification
* and corresponds to a transformation matrix of the
* form:
* @param a numbers which define the 2×3 or 4×4
* matrix to be multiplied
* @param b numbers which define the 2×3 or 4×4
* matrix to be multiplied
* @param c numbers which define the 2×3 or 4×4
* matrix to be multiplied
* @param d numbers which define the 2×3 or 4×4
* matrix to be multiplied
* @param e numbers which define the 2×3 or 4×4
* matrix to be multiplied
* @param f numbers which define the 2×3 or 4×4
* matrix to be multiplied
* @param g numbers which define the 4×4 matrix to be
* multiplied
* @param h numbers which define the 4×4 matrix to be
* multiplied
* @param i numbers which define the 4×4 matrix to be
* multiplied
* @param j numbers which define the 4×4 matrix to be
* multiplied
* @param k numbers which define the 4×4 matrix to be
* multiplied
* @param l numbers which define the 4×4 matrix to be
* multiplied
* @param m numbers which define the 4×4 matrix to be
* multiplied
* @param n numbers which define the 4×4 matrix to be
* multiplied
* @param o numbers which define the 4×4 matrix to be
* multiplied
* @param p numbers which define the 4×4 matrix to be
* multiplied
* @chainable
*/
function applyMatrix(
a: number,
b: number,
c: number,
d: number,
e: number,
f: number,
g: number,
h: number,
i: number,
j: number,
k: number,
l: number,
m: number,
n: number,
o: number,
p: number
): p5;
/**
* Replaces the current matrix with the identity
* matrix.
* @chainable
*/
function resetMatrix(): p5;
/**
* Rotates a shape by the amount specified by the
* angle parameter. This function accounts for
* angleMode, so angles can be entered in either
* RADIANS or DEGREES. Objects are always rotated
* around their relative position to the origin and
* positive numbers rotate objects in a clockwise
* direction. Transformations apply to everything
* that happens after and subsequent calls to the
* function accumulate the effect. For example,
* calling rotate(HALF_PI) and then rotate(HALF_PI)
* is the same as rotate(PI). All transformations are
* reset when draw() begins again.
*
* Technically, rotate() multiplies the current
* transformation matrix by a rotation matrix. This
* function can be further controlled by push() and
* pop().
* @param angle the angle of rotation, specified in
* radians or degrees, depending on current angleMode
* @param [axis] (in 3d) the axis to rotate around
* @chainable
*/
function rotate(angle: number, axis?: p5.Vector | number[]): p5;
/**
* Rotates a shape around X axis by the amount
* specified in angle parameter. The angles can be
* entered in either RADIANS or DEGREES. Objects are
* always rotated around their relative position to
* the origin and positive numbers rotate objects in
* a clockwise direction. All transformations are
* reset when draw() begins again.
* @param angle the angle of rotation, specified in
* radians or degrees, depending on current angleMode
* @chainable
*/
function rotateX(angle: number): p5;
/**
* Rotates a shape around Y axis by the amount
* specified in angle parameter. The angles can be
* entered in either RADIANS or DEGREES. Objects are
* always rotated around their relative position to
* the origin and positive numbers rotate objects in
* a clockwise direction. All transformations are
* reset when draw() begins again.
* @param angle the angle of rotation, specified in
* radians or degrees, depending on current angleMode
* @chainable
*/
function rotateY(angle: number): p5;
/**
* Rotates a shape around Z axis by the amount
* specified in angle parameter. The angles can be
* entered in either RADIANS or DEGREES. This method
* works in WEBGL mode only.
*
* Objects are always rotated around their relative
* position to the origin and positive numbers rotate
* objects in a clockwise direction. All
* transformations are reset when draw() begins
* again.
* @param angle the angle of rotation, specified in
* radians or degrees, depending on current angleMode
* @chainable
*/
function rotateZ(angle: number): p5;
/**
* Increases or decreases the size of a shape by
* expanding or contracting vertices. Objects always
* scale from their relative origin to the coordinate
* system. Scale values are specified as decimal
* percentages. For example, the function call
* scale(2.0) increases the dimension of a shape by
* 200%. Transformations apply to everything that
* happens after and subsequent calls to the function
* multiply the effect. For example, calling
* scale(2.0) and then scale(1.5) is the same as
* scale(3.0). If scale() is called within draw(),
* the transformation is reset when the loop begins
* again.
*
* Using this function with the z parameter is only
* available in WEBGL mode. This function can be
* further controlled with push() and pop().
* @param s percent to scale the object, or
* percentage to scale the object in the x-axis if
* multiple arguments are given
* @param [y] percent to scale the object in the
* y-axis
* @param [z] percent to scale the object in the
* z-axis (webgl only)
* @chainable
*/
function scale(s: number | p5.Vector | number[], y?: number, z?: number): p5;
/**
* Increases or decreases the size of a shape by
* expanding or contracting vertices. Objects always
* scale from their relative origin to the coordinate
* system. Scale values are specified as decimal
* percentages. For example, the function call
* scale(2.0) increases the dimension of a shape by
* 200%. Transformations apply to everything that
* happens after and subsequent calls to the function
* multiply the effect. For example, calling
* scale(2.0) and then scale(1.5) is the same as
* scale(3.0). If scale() is called within draw(),
* the transformation is reset when the loop begins
* again.
*
* Using this function with the z parameter is only
* available in WEBGL mode. This function can be
* further controlled with push() and pop().
* @param scales per-axis percents to scale the
* object
* @chainable
*/
function scale(scales: p5.Vector | number[]): p5;
/**
* Shears a shape around the x-axis by the amount
* specified by the angle parameter. Angles should be
* specified in the current angleMode. Objects are
* always sheared around their relative position to
* the origin and positive numbers shear objects in a
* clockwise direction. Transformations apply to
* everything that happens after and subsequent calls
* to the function accumulates the effect. For
* example, calling shearX(PI/2) and then
* shearX(PI/2) is the same as shearX(PI). If
* shearX() is called within the draw(), the
* transformation is reset when the loop begins
* again.
*
* Technically, shearX() multiplies the current
* transformation matrix by a rotation matrix. This
* function can be further controlled by the push()
* and pop() functions.
* @param angle angle of shear specified in radians
* or degrees, depending on current angleMode
* @chainable
*/
function shearX(angle: number): p5;
/**
* Shears a shape around the y-axis the amount
* specified by the angle parameter. Angles should be
* specified in the current angleMode. Objects are
* always sheared around their relative position to
* the origin and positive numbers shear objects in a
* clockwise direction. Transformations apply to
* everything that happens after and subsequent calls
* to the function accumulates the effect. For
* example, calling shearY(PI/2) and then
* shearY(PI/2) is the same as shearY(PI). If
* shearY() is called within the draw(), the
* transformation is reset when the loop begins
* again.
*
* Technically, shearY() multiplies the current
* transformation matrix by a rotation matrix. This
* function can be further controlled by the push()
* and pop() functions.
* @param angle angle of shear specified in radians
* or degrees, depending on current angleMode
* @chainable
*/
function shearY(angle: number): p5;
/**
* Specifies an amount to displace objects within the
* display window. The x parameter specifies
* left/right translation, the y parameter specifies
* up/down translation. Transformations are
* cumulative and apply to everything that happens
* after and subsequent calls to the function
* accumulates the effect. For example, calling
* translate(50, 0) and then translate(20, 0) is the
* same as translate(70, 0). If translate() is called
* within draw(), the transformation is reset when
* the loop begins again. This function can be
* further controlled by using push() and pop().
* @param x left/right translation
* @param y up/down translation
* @param [z] forward/backward translation (WEBGL
* only)
* @chainable
*/
function translate(x: number, y: number, z?: number): p5;
/**
* Specifies an amount to displace objects within the
* display window. The x parameter specifies
* left/right translation, the y parameter specifies
* up/down translation. Transformations are
* cumulative and apply to everything that happens
* after and subsequent calls to the function
* accumulates the effect. For example, calling
* translate(50, 0) and then translate(20, 0) is the
* same as translate(70, 0). If translate() is called
* within draw(), the transformation is reset when
* the loop begins again. This function can be
* further controlled by using push() and pop().
* @param vector the vector to translate by
* @chainable
*/
function translate(vector: p5.Vector): p5;
/**
* Stores a value in local storage under the key
* name. Local storage is saved in the browser and
* persists between browsing sessions and page
* reloads. The key can be the name of the variable
* but doesn't have to be. To retrieve stored items
* see getItem. Sensitive data such as passwords or
* personal information should not be stored in local
* storage.
*/
function storeItem(key: string, value: string | number | object | boolean | p5.Color | p5.Vector): void;
/**
* Returns the value of an item that was stored in
* local storage using storeItem()
* @param key name that you wish to use to store in
* local storage
* @return Value of stored item
*/
function getItem(key: string): number | object | string | boolean | p5.Color | p5.Vector;
/**
* Clears all local storage items set with
* storeItem() for the current domain.
*/
function clearStorage(): void;
/**
* Removes an item that was stored with storeItem()
*/
function removeItem(key: string): void;
/**
* Creates a new instance of p5.StringDict using the
* key-value pair or the object you provide.
*/
function createStringDict(key: string, value: string): p5.StringDict;
/**
* Creates a new instance of p5.StringDict using the
* key-value pair or the object you provide.
* @param object object
*/
function createStringDict(object: object): p5.StringDict;
/**
* Creates a new instance of p5.NumberDict using the
* key-value pair or object you provide.
*/
function createNumberDict(key: number, value: number): p5.NumberDict;
/**
* Creates a new instance of p5.NumberDict using the
* key-value pair or object you provide.
* @param object object
*/
function createNumberDict(object: object): p5.NumberDict;
/**
* Searches the page for the first element that
* matches the given CSS selector string (can be an
* ID, class, tag name or a combination) and returns
* it as a p5.Element. The DOM node itself can be
* accessed with .elt. Returns null if none found.
* You can also specify a container to search within.
* @param selectors CSS selector string of element to
* search for
* @param [container] CSS selector string,
* p5.Element, or HTML element to search within
* @return p5.Element containing node found
*/
function select(selectors: string, container?: string | p5.Element | HTMLElement): p5.Element | null;
/**
* Searches the page for elements that match the
* given CSS selector string (can be an ID a class,
* tag name or a combination) and returns them as
* p5.Elements in an array. The DOM node itself can
* be accessed with .elt. Returns an empty array if
* none found. You can also specify a container to
* search within.
* @param selectors CSS selector string of elements
* to search for
* @param [container] CSS selector string, p5.Element
* , or HTML element to search within
* @return Array of p5.Elements containing nodes
* found
*/
function selectAll(selectors: string, container?: string | p5.Element | HTMLElement): p5.Element[];
/**
* Removes all elements created by p5, except any
* canvas / graphics elements created by createCanvas
* or createGraphics. Event handlers are removed, and
* element is removed from the DOM.
*/
function removeElements(): void;
/**
* The .changed() function is called when the value
* of an element changes. This can be used to attach
* an element specific event listener.
* @param fxn function to be fired when the value of
* an element changes. if false is passed instead,
* the previously firing function will no longer
* fire.
* @chainable
*/
function changed(fxn: ((...args: any[]) => any) | boolean): p5;
/**
* The .input() function is called when any user
* input is detected with an element. The input event
* is often used to detect keystrokes in a input
* element, or changes on a slider element. This can
* be used to attach an element specific event
* listener.
* @param fxn function to be fired when any user
* input is detected within the element. if false is
* passed instead, the previously firing function
* will no longer fire.
* @chainable
*/
function input(fxn: ((...args: any[]) => any) | boolean): p5;
/**
* Creates a element in the DOM with
* given inner HTML.
* @param [html] inner HTML for element created
* @return pointer to p5.Element holding created node
*/
function createDiv(html?: string): p5.Element;
/**
* Creates a element in the DOM with given
* inner HTML. Used for paragraph length text.
* @param [html] inner HTML for element created
* @return pointer to p5.Element holding created node
*/
function createP(html?: string): p5.Element;
/**
* Creates a element in the DOM with
* given inner HTML.
* @param [html] inner HTML for element created
* @return pointer to p5.Element holding created node
*/
function createSpan(html?: string): p5.Element;
/**
* Creates an element in the DOM with given src
* and alternate text.
* @param src src path or url for image
* @param alt alternate text to be used if image does
* not load. You can use also an empty string ("") if
* that an image is not intended to be viewed.
* @return pointer to p5.Element holding created node
*/
function createImg(src: string, alt: string): p5.Element;
/**
* Creates an element in the DOM with given src
* and alternate text.
* @param src src path or url for image
* @param alt alternate text to be used if image does
* not load. You can use also an empty string ("") if
* that an image is not intended to be viewed.
* @param crossOrigin crossOrigin property of the img
* element; use either 'anonymous' or
* 'use-credentials' to retrieve the image with
* cross-origin access (for later use with canvas. if
* an empty string("") is passed, CORS is not used
* @param [successCallback] callback to be called
* once image data is loaded with the p5.Element as
* argument
* @return pointer to p5.Element holding created node
*/
function createImg(
src: string,
alt: string,
crossOrigin: string,
successCallback?: (...args: any[]) => any
): p5.Element;
/**
* Creates an element in the DOM for
* including a hyperlink.
* @param href url of page to link to
* @param html inner html of link element to display
* @param [target] target where new link should open,
* could be _blank, _self, _parent, _top.
* @return pointer to p5.Element holding created node
*/
function createA(href: string, html: string, target?: string): p5.Element;
/**
* Creates a slider element in the
* DOM. Use .size() to set the display length of the
* slider.
* @param min minimum value of the slider
* @param max maximum value of the slider
* @param [value] default value of the slider
* @param [step] step size for each tick of the
* slider (if step is set to 0, the slider will move
* continuously from the minimum to the maximum
* value)
* @return pointer to p5.Element holding the created
* node
*/
function createSlider(min: number, max: number, value?: number, step?: number): p5.Element;
/**
* Creates a element in the DOM.
* Use .size() to set the display size of the button.
* Use .mousePressed() to specify behavior on press.
* @param label label displayed on the button
* @param [value] value of the button
* @return pointer to p5.Element holding created node
*/
function createButton(label: string, value?: string): p5.Element;
/**
* Creates a checkbox element in the
* DOM. Calling .checked() on a checkbox returns a
* boolean indicating whether it is checked or not.
* @param [label] label displayed after checkbox
* @param [value] value of the checkbox; checked is
* true, unchecked is false
* @return pointer to p5.Element holding created node
*/
function createCheckbox(label?: string, value?: boolean): p5.Element;
/**
* Creates a dropdown menu element
* in the DOM. It also assigns select-related methods
* to p5.Element when selecting an existing select
* box. Options in the menu are unique by name (the
* display text). - .option(name, [value]) can be
* used to add an option with name (the display text)
* and value to the select element. If an option with
* name already exists within the select element,
* this method will change its value to value.
* - .value() will return the currently selected
* option.
* - .selected() will return the current dropdown
* element which is an instance of p5.Element.
* - .selected(value) can be used to make given
* option selected by default when the page first
* loads.
* - .disable() marks the whole dropdown element as
* disabled.
* - .disable(value) marks a given option as
* disabled.
* - .enable() marks the whole dropdown element as
* enabled if whole dropdown element is disabled
* intially.
* - .enable(value) marks a given option as enable if
* the initial option is disabled.
* @param [multiple] true if dropdown should support
* multiple selections
* @return pointer to p5.Element holding created node
*/
function createSelect(multiple?: boolean): p5.Element;
/**
* Creates a dropdown menu element
* in the DOM. It also assigns select-related methods
* to p5.Element when selecting an existing select
* box. Options in the menu are unique by name (the
* display text). - .option(name, [value]) can be
* used to add an option with name (the display text)
* and value to the select element. If an option with
* name already exists within the select element,
* this method will change its value to value.
* - .value() will return the currently selected
* option.
* - .selected() will return the current dropdown
* element which is an instance of p5.Element.
* - .selected(value) can be used to make given
* option selected by default when the page first
* loads.
* - .disable() marks the whole dropdown element as
* disabled.
* - .disable(value) marks a given option as
* disabled.
* - .enable() marks the whole dropdown element as
* enabled if whole dropdown element is disabled
* intially.
* - .enable(value) marks a given option as enable if
* the initial option is disabled.
* @param existing DOM select element
*/
function createSelect(existing: object): p5.Element;
/**
* Creates a radio button element in the DOM. It also
* helps existing radio buttons assign methods of
* p5.Element. - .option(value, [label]) can be used
* to create a new option for the element. If an
* option with a value already exists, it will be
* returned. It is recommended to use string values
* as input for value. Optionally, a label can be
* provided as second argument for the option.
* - .remove(value) can be used to remove an option
* for the element. String values recommended as
* input for value.
* - .value() method will return the currently
* selected value.
* - .selected() method will return the currently
* selected input element.
* - .selected(value) method will select the option
* and return it. String values recommended as input
* for value.
* - .disable(Boolean) method will enable/disable the
* whole radio button element.
* @param containerElement A container HTML Element,
* either a div or span, inside which all existing
* radio inputs will be considered as options.
* @param [name] A name parameter for each Input
* Element.
* @return pointer to p5.Element holding created node
*/
function createRadio(containerElement: object, name?: string): p5.Element;
/**
* Creates a radio button element in the DOM. It also
* helps existing radio buttons assign methods of
* p5.Element. - .option(value, [label]) can be used
* to create a new option for the element. If an
* option with a value already exists, it will be
* returned. It is recommended to use string values
* as input for value. Optionally, a label can be
* provided as second argument for the option.
* - .remove(value) can be used to remove an option
* for the element. String values recommended as
* input for value.
* - .value() method will return the currently
* selected value.
* - .selected() method will return the currently
* selected input element.
* - .selected(value) method will select the option
* and return it. String values recommended as input
* for value.
* - .disable(Boolean) method will enable/disable the
* whole radio button element.
* @param name A name parameter for each Input
* Element.
* @return pointer to p5.Element holding created node
*/
function createRadio(name: string): p5.Element;
/**
* Creates a radio button element in the DOM. It also
* helps existing radio buttons assign methods of
* p5.Element. - .option(value, [label]) can be used
* to create a new option for the element. If an
* option with a value already exists, it will be
* returned. It is recommended to use string values
* as input for value. Optionally, a label can be
* provided as second argument for the option.
* - .remove(value) can be used to remove an option
* for the element. String values recommended as
* input for value.
* - .value() method will return the currently
* selected value.
* - .selected() method will return the currently
* selected input element.
* - .selected(value) method will select the option
* and return it. String values recommended as input
* for value.
* - .disable(Boolean) method will enable/disable the
* whole radio button element.
* @return pointer to p5.Element holding created node
*/
function createRadio(): p5.Element;
/**
* Creates a colorPicker element in the DOM for color
* input. The .value() method will return a hex
* string (#rrggbb) of the color. The .color() method
* will return a p5.Color object with the current
* chosen color.
* @param [value] default color of element
* @return pointer to p5.Element holding created node
*/
function createColorPicker(value?: string | p5.Color): p5.Element;
/**
* Creates an element in the DOM for
* text input. Use .size() to set the display length
* of the box.
* @param value default value of the input box
* @param [type] type of text, ie text, password etc.
* Defaults to text. Needs a value to be specified
* first.
* @return pointer to p5.Element holding created node
*/
function createInput(value: string, type?: string): p5.Element;
/**
* Creates an element in the DOM for
* text input. Use .size() to set the display length
* of the box.
* @param [value] default value of the input box
*/
function createInput(value?: string): p5.Element;
/**
* Creates an element in the DOM of
* type 'file'. This allows users to select local
* files for use in a sketch.
* @param callback callback function for when a file
* is loaded
* @param [multiple] optional, to allow multiple
* files to be selected
* @return pointer to p5.Element holding created DOM
* element
*/
function createFileInput(callback: (...args: any[]) => any, multiple?: boolean): p5.Element;
/**
* Creates an HTML5