You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
6481 lines
222 KiB
TypeScript
6481 lines
222 KiB
TypeScript
// This file was auto-generated. Please do not edit it.
|
|
|
|
///<reference path="p5.d.ts" />
|
|
|
|
|
|
// Properties from p5
|
|
|
|
/**
|
|
* This is the p5 instance constructor. A p5 instance
|
|
* holds all the properties and methods related to a
|
|
* p5 sketch. It expects an incoming sketch closure
|
|
* and it can also take an optional node parameter
|
|
* for attaching the generated p5 canvas to a node.
|
|
* The sketch closure takes the newly created p5
|
|
* instance as its sole argument and may optionally
|
|
* set preload(), setup(), and/or draw() properties
|
|
* on it for running a sketch.
|
|
*
|
|
* A p5 sketch can run in "global" or "instance"
|
|
* mode: "global" - all properties and methods are
|
|
* attached to the window "instance" - all properties
|
|
* and methods are bound to this p5 object
|
|
*
|
|
* @param sketch a closure that can set optional
|
|
* preload(), setup(), and/or draw() properties on
|
|
* the given p5 instance
|
|
* @param [node] element to attach canvas to, if a
|
|
* boolean is passed in use it as sync
|
|
* @param [sync] start synchronously (optional)
|
|
* @return a p5 instance
|
|
*/
|
|
declare function constructor(sketch: Function, node?: HTMLElement|boolean, sync?: boolean);
|
|
|
|
// src/color/creating_reading.js
|
|
|
|
/**
|
|
* Extracts the alpha value from a color or pixel
|
|
* array.
|
|
*
|
|
* @param color p5.Color object, color components, or
|
|
* CSS color
|
|
* @return the alpha value
|
|
*/
|
|
declare function alpha(color: p5.Color|number[]|string): number;
|
|
|
|
/**
|
|
* Extracts the blue value from a color or pixel
|
|
* array.
|
|
*
|
|
* @param color p5.Color object, color components, or
|
|
* CSS color
|
|
* @return the blue value
|
|
*/
|
|
declare function blue(color: p5.Color|number[]|string): number;
|
|
|
|
/**
|
|
* Extracts the HSB brightness value from a color or
|
|
* pixel array.
|
|
*
|
|
* @param color p5.Color object, color components, or
|
|
* CSS color
|
|
* @return the brightness value
|
|
*/
|
|
declare function brightness(color: p5.Color|number[]|string): number;
|
|
|
|
/**
|
|
* Creates colors for storing in variables of the
|
|
* color datatype. The parameters are interpreted as
|
|
* RGB or HSB values depending on the current
|
|
* colorMode(). The default mode is RGB values from 0
|
|
* to 255 and, therefore, the function call
|
|
* color(255, 204, 0) will return a bright yellow
|
|
* color. Note that if only one value is provided to
|
|
* color(), it will be interpreted as a grayscale
|
|
* value. Add a second value, and it will be used for
|
|
* alpha transparency. When three values are
|
|
* specified, they are interpreted as either RGB or
|
|
* HSB values. Adding a fourth value applies alpha
|
|
* transparency.
|
|
*
|
|
*
|
|
* If a single string argument is provided, RGB, RGBA
|
|
* and Hex CSS color strings and all named color
|
|
* strings are supported. In this case, an alpha
|
|
* number value as a second argument is not
|
|
* supported, the RGBA form should be used.
|
|
*
|
|
* @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
|
|
*/
|
|
declare function color(gray: number, alpha?: number): p5.Color;
|
|
|
|
/**
|
|
* Creates colors for storing in variables of the
|
|
* color datatype. The parameters are interpreted as
|
|
* RGB or HSB values depending on the current
|
|
* colorMode(). The default mode is RGB values from 0
|
|
* to 255 and, therefore, the function call
|
|
* color(255, 204, 0) will return a bright yellow
|
|
* color. Note that if only one value is provided to
|
|
* color(), it will be interpreted as a grayscale
|
|
* value. Add a second value, and it will be used for
|
|
* alpha transparency. When three values are
|
|
* specified, they are interpreted as either RGB or
|
|
* HSB values. Adding a fourth value applies alpha
|
|
* transparency.
|
|
*
|
|
*
|
|
* If a single string argument is provided, RGB, RGBA
|
|
* and Hex CSS color strings and all named color
|
|
* strings are supported. In this case, an alpha
|
|
* number value as a second argument is not
|
|
* supported, the RGBA form should be used.
|
|
*
|
|
* @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)
|
|
*/
|
|
declare function color(v1: number, v2: number, v3: number, alpha?: number): p5.Color;
|
|
|
|
/**
|
|
* Creates colors for storing in variables of the
|
|
* color datatype. The parameters are interpreted as
|
|
* RGB or HSB values depending on the current
|
|
* colorMode(). The default mode is RGB values from 0
|
|
* to 255 and, therefore, the function call
|
|
* color(255, 204, 0) will return a bright yellow
|
|
* color. Note that if only one value is provided to
|
|
* color(), it will be interpreted as a grayscale
|
|
* value. Add a second value, and it will be used for
|
|
* alpha transparency. When three values are
|
|
* specified, they are interpreted as either RGB or
|
|
* HSB values. Adding a fourth value applies alpha
|
|
* transparency.
|
|
*
|
|
*
|
|
* If a single string argument is provided, RGB, RGBA
|
|
* and Hex CSS color strings and all named color
|
|
* strings are supported. In this case, an alpha
|
|
* number value as a second argument is not
|
|
* supported, the RGBA form should be used.
|
|
*
|
|
* @param value a color string
|
|
* @param [alpha] alpha value relative to current
|
|
* color range (default is 0-255)
|
|
*/
|
|
declare function color(value: string, alpha?: number): p5.Color;
|
|
|
|
/**
|
|
* Creates colors for storing in variables of the
|
|
* color datatype. The parameters are interpreted as
|
|
* RGB or HSB values depending on the current
|
|
* colorMode(). The default mode is RGB values from 0
|
|
* to 255 and, therefore, the function call
|
|
* color(255, 204, 0) will return a bright yellow
|
|
* color. Note that if only one value is provided to
|
|
* color(), it will be interpreted as a grayscale
|
|
* value. Add a second value, and it will be used for
|
|
* alpha transparency. When three values are
|
|
* specified, they are interpreted as either RGB or
|
|
* HSB values. Adding a fourth value applies alpha
|
|
* transparency.
|
|
*
|
|
*
|
|
* If a single string argument is provided, RGB, RGBA
|
|
* and Hex CSS color strings and all named color
|
|
* strings are supported. In this case, an alpha
|
|
* number value as a second argument is not
|
|
* supported, the RGBA form should be used.
|
|
*
|
|
* @param values an array containing the
|
|
* red,green,blue & and alpha components of the color
|
|
*/
|
|
declare function color(values: number[]): p5.Color;
|
|
|
|
/**
|
|
* Creates colors for storing in variables of the
|
|
* color datatype. The parameters are interpreted as
|
|
* RGB or HSB values depending on the current
|
|
* colorMode(). The default mode is RGB values from 0
|
|
* to 255 and, therefore, the function call
|
|
* color(255, 204, 0) will return a bright yellow
|
|
* color. Note that if only one value is provided to
|
|
* color(), it will be interpreted as a grayscale
|
|
* value. Add a second value, and it will be used for
|
|
* alpha transparency. When three values are
|
|
* specified, they are interpreted as either RGB or
|
|
* HSB values. Adding a fourth value applies alpha
|
|
* transparency.
|
|
*
|
|
*
|
|
* If a single string argument is provided, RGB, RGBA
|
|
* and Hex CSS color strings and all named color
|
|
* strings are supported. In this case, an alpha
|
|
* number value as a second argument is not
|
|
* supported, the RGBA form should be used.
|
|
*
|
|
*/
|
|
declare function color(color: p5.Color): p5.Color;
|
|
|
|
/**
|
|
* Extracts the green value from a color or pixel
|
|
* array.
|
|
*
|
|
* @param color p5.Color object, color components, or
|
|
* CSS color
|
|
* @return the green value
|
|
*/
|
|
declare function green(color: p5.Color|number[]|string): number;
|
|
|
|
/**
|
|
* Extracts the hue value from a color or pixel
|
|
* array. Hue exists in both HSB and HSL. This
|
|
* function will return the HSB-normalized hue when
|
|
* supplied with an HSB color object (or when
|
|
* supplied with a pixel array while the color mode
|
|
* is HSB), but will default to the HSL-normalized
|
|
* hue otherwise. (The values will only be different
|
|
* if the maximum hue setting for each system is
|
|
* different.)
|
|
*
|
|
* @param color p5.Color object, color components, or
|
|
* CSS color
|
|
* @return the hue
|
|
*/
|
|
declare function hue(color: p5.Color|number[]|string): number;
|
|
|
|
/**
|
|
* Blends two colors to find a third color somewhere
|
|
* between them. The amt parameter is the amount to
|
|
* interpolate between the two values where 0.0 equal
|
|
* to the first color, 0.1 is very near the first
|
|
* color, 0.5 is halfway in between, etc. An amount
|
|
* below 0 will be treated as 0. Likewise, amounts
|
|
* above 1 will be capped at 1. This is different
|
|
* from the behavior of lerp(), but necessary because
|
|
* otherwise numbers outside the range will produce
|
|
* strange and unexpected colors. The way that
|
|
* colours are interpolated depends on the current
|
|
* color mode.
|
|
*
|
|
* @param c1 interpolate from this color
|
|
* @param c2 interpolate to this color
|
|
* @param amt number between 0 and 1
|
|
* @return interpolated color
|
|
*/
|
|
declare function lerpColor(c1: p5.Color, c2: p5.Color, amt: number): p5.Color;
|
|
|
|
/**
|
|
* Extracts the HSL lightness value from a color or
|
|
* pixel array.
|
|
*
|
|
* @param color p5.Color object, color components, or
|
|
* CSS color
|
|
* @return the lightness
|
|
*/
|
|
declare function lightness(color: p5.Color|number[]|string): number;
|
|
|
|
/**
|
|
* Extracts the red value from a color or pixel
|
|
* array.
|
|
*
|
|
* @param color p5.Color object, color components, or
|
|
* CSS color
|
|
* @return the red value
|
|
*/
|
|
declare function red(color: p5.Color|number[]|string): number;
|
|
|
|
/**
|
|
* Extracts the saturation value from a color or
|
|
* pixel array. Saturation is scaled differently in
|
|
* HSB and HSL. This function will return the HSB
|
|
* saturation when supplied with an HSB color object
|
|
* (or when supplied with a pixel array while the
|
|
* color mode is HSB), but will default to the HSL
|
|
* saturation otherwise.
|
|
*
|
|
* @param color p5.Color object, color components, or
|
|
* CSS color
|
|
* @return the saturation value
|
|
*/
|
|
declare function saturation(color: p5.Color|number[]|string): number;
|
|
|
|
// src/color/setting.js
|
|
|
|
/**
|
|
* The background() function sets the color used for
|
|
* the background of the p5.js canvas. The default
|
|
* background is light gray. This function is
|
|
* typically used within draw() to clear the display
|
|
* window at the beginning of each frame, but it can
|
|
* be used inside setup() to set the background on
|
|
* the first frame of animation or if the background
|
|
* need only be set once. The color is either
|
|
* specified in terms of the RGB, HSB, or HSL color
|
|
* depending on the current colorMode. (The default
|
|
* color space is RGB, with each value in the range
|
|
* from 0 to 255). The alpha range by default is also
|
|
* 0 to 255.
|
|
*
|
|
*
|
|
* If a single string argument is provided, RGB, RGBA
|
|
* and Hex CSS color strings and all named color
|
|
* strings are supported. In this case, an alpha
|
|
* number value as a second argument is not
|
|
* supported, the RGBA form should be used.
|
|
*
|
|
*
|
|
* A p5.Color object can also be provided to set the
|
|
* background color.
|
|
*
|
|
*
|
|
* A p5.Image can also be provided to set the
|
|
* background iamge.
|
|
*
|
|
* @param color any value created by the color()
|
|
* function
|
|
* @chainable
|
|
*/
|
|
declare function background(color: p5.Color): p5;
|
|
|
|
/**
|
|
* The background() function sets the color used for
|
|
* the background of the p5.js canvas. The default
|
|
* background is light gray. This function is
|
|
* typically used within draw() to clear the display
|
|
* window at the beginning of each frame, but it can
|
|
* be used inside setup() to set the background on
|
|
* the first frame of animation or if the background
|
|
* need only be set once. The color is either
|
|
* specified in terms of the RGB, HSB, or HSL color
|
|
* depending on the current colorMode. (The default
|
|
* color space is RGB, with each value in the range
|
|
* from 0 to 255). The alpha range by default is also
|
|
* 0 to 255.
|
|
*
|
|
*
|
|
* If a single string argument is provided, RGB, RGBA
|
|
* and Hex CSS color strings and all named color
|
|
* strings are supported. In this case, an alpha
|
|
* number value as a second argument is not
|
|
* supported, the RGBA form should be used.
|
|
*
|
|
*
|
|
* A p5.Color object can also be provided to set the
|
|
* background color.
|
|
*
|
|
*
|
|
* A p5.Image can also be provided to set the
|
|
* background iamge.
|
|
*
|
|
* @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
|
|
*/
|
|
declare function background(colorstring: string, a?: number): p5;
|
|
|
|
/**
|
|
* The background() function sets the color used for
|
|
* the background of the p5.js canvas. The default
|
|
* background is light gray. This function is
|
|
* typically used within draw() to clear the display
|
|
* window at the beginning of each frame, but it can
|
|
* be used inside setup() to set the background on
|
|
* the first frame of animation or if the background
|
|
* need only be set once. The color is either
|
|
* specified in terms of the RGB, HSB, or HSL color
|
|
* depending on the current colorMode. (The default
|
|
* color space is RGB, with each value in the range
|
|
* from 0 to 255). The alpha range by default is also
|
|
* 0 to 255.
|
|
*
|
|
*
|
|
* If a single string argument is provided, RGB, RGBA
|
|
* and Hex CSS color strings and all named color
|
|
* strings are supported. In this case, an alpha
|
|
* number value as a second argument is not
|
|
* supported, the RGBA form should be used.
|
|
*
|
|
*
|
|
* A p5.Color object can also be provided to set the
|
|
* background color.
|
|
*
|
|
*
|
|
* A p5.Image can also be provided to set the
|
|
* background iamge.
|
|
*
|
|
* @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
|
|
*/
|
|
declare function background(gray: number, a?: number): p5;
|
|
|
|
/**
|
|
* The background() function sets the color used for
|
|
* the background of the p5.js canvas. The default
|
|
* background is light gray. This function is
|
|
* typically used within draw() to clear the display
|
|
* window at the beginning of each frame, but it can
|
|
* be used inside setup() to set the background on
|
|
* the first frame of animation or if the background
|
|
* need only be set once. The color is either
|
|
* specified in terms of the RGB, HSB, or HSL color
|
|
* depending on the current colorMode. (The default
|
|
* color space is RGB, with each value in the range
|
|
* from 0 to 255). The alpha range by default is also
|
|
* 0 to 255.
|
|
*
|
|
*
|
|
* If a single string argument is provided, RGB, RGBA
|
|
* and Hex CSS color strings and all named color
|
|
* strings are supported. In this case, an alpha
|
|
* number value as a second argument is not
|
|
* supported, the RGBA form should be used.
|
|
*
|
|
*
|
|
* A p5.Color object can also be provided to set the
|
|
* background color.
|
|
*
|
|
*
|
|
* A p5.Image can also be provided to set the
|
|
* background iamge.
|
|
*
|
|
* @param v1 red or hue value (depending on the
|
|
* current color mode)
|
|
* @param v2 green or saturation value (depending on
|
|
* the current color mode)
|
|
* @param v3 blue or brightness value (depending on
|
|
* the current color mode)
|
|
* @param [a] opacity of the background relative to
|
|
* current color range (default is 0-255)
|
|
* @chainable
|
|
*/
|
|
declare function background(v1: number, v2: number, v3: number, a?: number): p5;
|
|
|
|
/**
|
|
* The background() function sets the color used for
|
|
* the background of the p5.js canvas. The default
|
|
* background is light gray. This function is
|
|
* typically used within draw() to clear the display
|
|
* window at the beginning of each frame, but it can
|
|
* be used inside setup() to set the background on
|
|
* the first frame of animation or if the background
|
|
* need only be set once. The color is either
|
|
* specified in terms of the RGB, HSB, or HSL color
|
|
* depending on the current colorMode. (The default
|
|
* color space is RGB, with each value in the range
|
|
* from 0 to 255). The alpha range by default is also
|
|
* 0 to 255.
|
|
*
|
|
*
|
|
* If a single string argument is provided, RGB, RGBA
|
|
* and Hex CSS color strings and all named color
|
|
* strings are supported. In this case, an alpha
|
|
* number value as a second argument is not
|
|
* supported, the RGBA form should be used.
|
|
*
|
|
*
|
|
* A p5.Color object can also be provided to set the
|
|
* background color.
|
|
*
|
|
*
|
|
* A p5.Image can also be provided to set the
|
|
* background iamge.
|
|
*
|
|
* @param values an array containing the
|
|
* red,green,blue & and alpha components of the color
|
|
* @chainable
|
|
*/
|
|
declare function background(values: number[]): p5;
|
|
|
|
/**
|
|
* The background() function sets the color used for
|
|
* the background of the p5.js canvas. The default
|
|
* background is light gray. This function is
|
|
* typically used within draw() to clear the display
|
|
* window at the beginning of each frame, but it can
|
|
* be used inside setup() to set the background on
|
|
* the first frame of animation or if the background
|
|
* need only be set once. The color is either
|
|
* specified in terms of the RGB, HSB, or HSL color
|
|
* depending on the current colorMode. (The default
|
|
* color space is RGB, with each value in the range
|
|
* from 0 to 255). The alpha range by default is also
|
|
* 0 to 255.
|
|
*
|
|
*
|
|
* If a single string argument is provided, RGB, RGBA
|
|
* and Hex CSS color strings and all named color
|
|
* strings are supported. In this case, an alpha
|
|
* number value as a second argument is not
|
|
* supported, the RGBA form should be used.
|
|
*
|
|
*
|
|
* A p5.Color object can also be provided to set the
|
|
* background color.
|
|
*
|
|
*
|
|
* A p5.Image can also be provided to set the
|
|
* background iamge.
|
|
*
|
|
* @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
|
|
*/
|
|
declare function background(image: p5.Image, a?: number): p5;
|
|
|
|
/**
|
|
* Clears the pixels within a buffer. This function
|
|
* only works on p5.Canvas objects created with the
|
|
* createCanvas() function; it won't work with the
|
|
* main display window. Unlike the main graphics
|
|
* context, pixels in additional graphics areas
|
|
* created with createGraphics() can be entirely or
|
|
* partially transparent. This function clears
|
|
* everything to make all of the pixels 100%
|
|
* transparent.
|
|
*
|
|
* @chainable
|
|
*/
|
|
declare function clear(): p5;
|
|
|
|
/**
|
|
* colorMode() changes the way p5.js interprets color
|
|
* data. By default, the parameters for fill(),
|
|
* stroke(), background(), and color() are defined by
|
|
* values between 0 and 255 using the RGB color
|
|
* model. This is equivalent to setting
|
|
* colorMode(RGB, 255). Setting colorMode(HSB) lets
|
|
* you use the HSB system instead. By default, this
|
|
* is colorMode(HSB, 360, 100, 100, 1). You can also
|
|
* use HSL. Note: existing color objects remember
|
|
* the mode that they were created in, so you can
|
|
* change modes as you like without affecting 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
|
|
*/
|
|
declare function colorMode(mode: COLOR_MODE, max?: number): p5;
|
|
|
|
/**
|
|
* colorMode() changes the way p5.js interprets color
|
|
* data. By default, the parameters for fill(),
|
|
* stroke(), background(), and color() are defined by
|
|
* values between 0 and 255 using the RGB color
|
|
* model. This is equivalent to setting
|
|
* colorMode(RGB, 255). Setting colorMode(HSB) lets
|
|
* you use the HSB system instead. By default, this
|
|
* is colorMode(HSB, 360, 100, 100, 1). You can also
|
|
* use HSL. Note: existing color objects remember
|
|
* the mode that they were created in, so you can
|
|
* change modes as you like without affecting 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/lighntess depending on the current
|
|
* color mode
|
|
* @param [maxA] range for the alpha
|
|
* @chainable
|
|
*/
|
|
declare function colorMode(mode: any, max1: number, max2: number, max3: number, maxA?: number): p5;
|
|
|
|
/**
|
|
* Sets the color used to fill shapes. For example,
|
|
* if you run fill(204, 102, 0), all subsequent
|
|
* shapes will be filled with orange. This color is
|
|
* either specified in terms of the RGB or HSB color
|
|
* depending on the current colorMode(). (The default
|
|
* color space is RGB, with each value in the range
|
|
* from 0 to 255). The alpha range by default is also
|
|
* 0 to 255. If a single string argument is
|
|
* provided, RGB, RGBA and Hex CSS color strings and
|
|
* all named color strings are supported. In this
|
|
* case, an alpha number value as a second argument
|
|
* is not supported, the RGBA form should be used.
|
|
*
|
|
*
|
|
* A p5 Color object can also be provided to set the
|
|
* fill color.
|
|
*
|
|
* @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
|
|
* @chainable
|
|
*/
|
|
declare function fill(v1: number, v2: number, v3: number, alpha?: number): p5;
|
|
|
|
/**
|
|
* Sets the color used to fill shapes. For example,
|
|
* if you run fill(204, 102, 0), all subsequent
|
|
* shapes will be filled with orange. This color is
|
|
* either specified in terms of the RGB or HSB color
|
|
* depending on the current colorMode(). (The default
|
|
* color space is RGB, with each value in the range
|
|
* from 0 to 255). The alpha range by default is also
|
|
* 0 to 255. If a single string argument is
|
|
* provided, RGB, RGBA and Hex CSS color strings and
|
|
* all named color strings are supported. In this
|
|
* case, an alpha number value as a second argument
|
|
* is not supported, the RGBA form should be used.
|
|
*
|
|
*
|
|
* A p5 Color object can also be provided to set the
|
|
* fill color.
|
|
*
|
|
* @param value a color string
|
|
* @chainable
|
|
*/
|
|
declare function fill(value: string, alpha?: number): p5;
|
|
|
|
/**
|
|
* Sets the color used to fill shapes. For example,
|
|
* if you run fill(204, 102, 0), all subsequent
|
|
* shapes will be filled with orange. This color is
|
|
* either specified in terms of the RGB or HSB color
|
|
* depending on the current colorMode(). (The default
|
|
* color space is RGB, with each value in the range
|
|
* from 0 to 255). The alpha range by default is also
|
|
* 0 to 255. If a single string argument is
|
|
* provided, RGB, RGBA and Hex CSS color strings and
|
|
* all named color strings are supported. In this
|
|
* case, an alpha number value as a second argument
|
|
* is not supported, the RGBA form should be used.
|
|
*
|
|
*
|
|
* A p5 Color object can also be provided to set the
|
|
* fill color.
|
|
*
|
|
* @param values an array containing the
|
|
* red,green,blue & and alpha components of the color
|
|
* @chainable
|
|
*/
|
|
declare function fill(values: number[]): p5;
|
|
|
|
/**
|
|
* Sets the color used to fill shapes. For example,
|
|
* if you run fill(204, 102, 0), all subsequent
|
|
* shapes will be filled with orange. This color is
|
|
* either specified in terms of the RGB or HSB color
|
|
* depending on the current colorMode(). (The default
|
|
* color space is RGB, with each value in the range
|
|
* from 0 to 255). The alpha range by default is also
|
|
* 0 to 255. If a single string argument is
|
|
* provided, RGB, RGBA and Hex CSS color strings and
|
|
* all named color strings are supported. In this
|
|
* case, an alpha number value as a second argument
|
|
* is not supported, the RGBA form should be used.
|
|
*
|
|
*
|
|
* A p5 Color object can also be provided to set the
|
|
* fill color.
|
|
*
|
|
* @param color the fill color
|
|
* @chainable
|
|
*/
|
|
declare function fill(color: p5.Color): p5;
|
|
|
|
/**
|
|
* Disables filling geometry. If both noStroke() and
|
|
* noFill() are called, nothing will be drawn to the
|
|
* screen.
|
|
*
|
|
* @chainable
|
|
*/
|
|
declare function noFill(): p5;
|
|
|
|
/**
|
|
* Disables drawing the stroke (outline). If both
|
|
* noStroke() and noFill() are called, nothing will
|
|
* be drawn to the screen.
|
|
*
|
|
* @chainable
|
|
*/
|
|
declare function noStroke(): p5;
|
|
|
|
/**
|
|
* Sets the color used to draw lines and borders
|
|
* around shapes. This color is either specified in
|
|
* terms of the RGB or HSB color depending on the
|
|
* current colorMode() (the default color space is
|
|
* RGB, with each value in the range from 0 to 255).
|
|
* The alpha range by default is also 0 to 255. If a
|
|
* single string argument is provided, RGB, RGBA and
|
|
* Hex CSS color strings and all named color strings
|
|
* are supported. In this case, an alpha number value
|
|
* as a second argument is not supported, the RGBA
|
|
* form should be used.
|
|
*
|
|
*
|
|
* A p5 Color object can also be provided to set the
|
|
* stroke color.
|
|
*
|
|
* @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
|
|
* @chainable
|
|
*/
|
|
declare function stroke(v1: number, v2: number, v3: number, alpha?: number): p5;
|
|
|
|
/**
|
|
* Sets the color used to draw lines and borders
|
|
* around shapes. This color is either specified in
|
|
* terms of the RGB or HSB color depending on the
|
|
* current colorMode() (the default color space is
|
|
* RGB, with each value in the range from 0 to 255).
|
|
* The alpha range by default is also 0 to 255. If a
|
|
* single string argument is provided, RGB, RGBA and
|
|
* Hex CSS color strings and all named color strings
|
|
* are supported. In this case, an alpha number value
|
|
* as a second argument is not supported, the RGBA
|
|
* form should be used.
|
|
*
|
|
*
|
|
* A p5 Color object can also be provided to set the
|
|
* stroke color.
|
|
*
|
|
* @param value a color string
|
|
* @chainable
|
|
*/
|
|
declare function stroke(value: string, alpha?: number): p5;
|
|
|
|
/**
|
|
* Sets the color used to draw lines and borders
|
|
* around shapes. This color is either specified in
|
|
* terms of the RGB or HSB color depending on the
|
|
* current colorMode() (the default color space is
|
|
* RGB, with each value in the range from 0 to 255).
|
|
* The alpha range by default is also 0 to 255. If a
|
|
* single string argument is provided, RGB, RGBA and
|
|
* Hex CSS color strings and all named color strings
|
|
* are supported. In this case, an alpha number value
|
|
* as a second argument is not supported, the RGBA
|
|
* form should be used.
|
|
*
|
|
*
|
|
* A p5 Color object can also be provided to set the
|
|
* stroke color.
|
|
*
|
|
* @param values an array containing the
|
|
* red,green,blue & and alpha components of the color
|
|
* @chainable
|
|
*/
|
|
declare function stroke(values: number[]): p5;
|
|
|
|
/**
|
|
* Sets the color used to draw lines and borders
|
|
* around shapes. This color is either specified in
|
|
* terms of the RGB or HSB color depending on the
|
|
* current colorMode() (the default color space is
|
|
* RGB, with each value in the range from 0 to 255).
|
|
* The alpha range by default is also 0 to 255. If a
|
|
* single string argument is provided, RGB, RGBA and
|
|
* Hex CSS color strings and all named color strings
|
|
* are supported. In this case, an alpha number value
|
|
* as a second argument is not supported, the RGBA
|
|
* form should be used.
|
|
*
|
|
*
|
|
* A p5 Color object can also be provided to set the
|
|
* stroke color.
|
|
*
|
|
* @param color the stroke color
|
|
* @chainable
|
|
*/
|
|
declare function stroke(color: p5.Color): p5;
|
|
|
|
// src/core/2d_primitives.js
|
|
|
|
/**
|
|
* Draw an arc to the screen. If called with only x,
|
|
* y, w, h, start, and stop, the arc will be drawn
|
|
* and filled as an open pie segment. If a mode
|
|
* parameter is provided, the arc will be filled like
|
|
* an open semi-circle (OPEN) , a closed semi-circle
|
|
* (CHORD), or as a closed pie segment (PIE). The
|
|
* origin may be changed with the ellipseMode()
|
|
* function. Note that drawing a full circle (ex: 0
|
|
* to TWO_PI) will appear blank because 0 and TWO_PI
|
|
* are the same position on the unit circle. The best
|
|
* way to handle this is by using the ellipse()
|
|
* function instead to create a closed ellipse, and
|
|
* to use the arc() function only to draw parts of an
|
|
* ellipse.
|
|
*
|
|
* @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
|
|
* @chainable
|
|
*/
|
|
declare function arc(x: number, y: number, w: number, h: number, start: number, stop: number, mode?: ARC_MODE): p5;
|
|
|
|
/**
|
|
* Draws an ellipse (oval) to the screen. An ellipse
|
|
* with equal width and height is a circle. By
|
|
* default, the first two parameters set the
|
|
* location, and the third and fourth parameters set
|
|
* the shape's width and height. 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. The origin
|
|
* may be changed with the ellipseMode() function.
|
|
*
|
|
* @param x x-coordinate of the ellipse.
|
|
* @param y y-coordinate of the ellipse.
|
|
* @param w width of the ellipse.
|
|
* @param [h] height of the ellipse.
|
|
* @chainable
|
|
*/
|
|
declare function ellipse(x: number, y: number, w: number, h?: number): p5;
|
|
|
|
/**
|
|
* Draws an ellipse (oval) to the screen. An ellipse
|
|
* with equal width and height is a circle. By
|
|
* default, the first two parameters set the
|
|
* location, and the third and fourth parameters set
|
|
* the shape's width and height. 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. The origin
|
|
* may be changed with the ellipseMode() function.
|
|
*
|
|
* @param x x-coordinate of the ellipse.
|
|
* @param y y-coordinate of the ellipse.
|
|
* @param w width of the ellipse.
|
|
* @param h height of the ellipse.
|
|
* @param detail number of radial sectors to draw
|
|
*/
|
|
declare function ellipse(x: number, y: number, w: number, h: number, detail: number): void;
|
|
|
|
/**
|
|
* Draws a line (a direct path between two points) to
|
|
* the screen. The version of line() with four
|
|
* parameters draws the line in 2D. To color a line,
|
|
* use the stroke() function. A line cannot be
|
|
* filled, therefore the fill() function will not
|
|
* affect the color of a line. 2D lines are drawn
|
|
* with a width of one pixel by default, but this can
|
|
* be changed with the strokeWeight() function.
|
|
*
|
|
* @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
|
|
*/
|
|
declare function line(x1: number, y1: number, x2: number, y2: number): p5;
|
|
|
|
/**
|
|
* Draws a line (a direct path between two points) to
|
|
* the screen. The version of line() with four
|
|
* parameters draws the line in 2D. To color a line,
|
|
* use the stroke() function. A line cannot be
|
|
* filled, therefore the fill() function will not
|
|
* affect the color of a line. 2D lines are drawn
|
|
* with a width of one pixel by default, but this can
|
|
* be changed with the strokeWeight() function.
|
|
*
|
|
* @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
|
|
*/
|
|
declare function line(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number): p5;
|
|
|
|
/**
|
|
* Draws a point, a coordinate in space at the
|
|
* dimension of one pixel. The first parameter is the
|
|
* horizontal value for the point, the second value
|
|
* is the vertical value for the point. The color of
|
|
* the point is determined by the current stroke.
|
|
*
|
|
* @param x the x-coordinate
|
|
* @param y the y-coordinate
|
|
* @param [z] the z-coordinate (for WEBGL mode)
|
|
* @chainable
|
|
*/
|
|
declare function point(x: number, y: number, z?: number): p5;
|
|
|
|
/**
|
|
* Draw a quad. A quad is a quadrilateral, a four
|
|
* sided polygon. It is similar to a rectangle, but
|
|
* the angles between its edges are not constrained
|
|
* to ninety degrees. The first pair of parameters
|
|
* (x1,y1) sets the first vertex and the subsequent
|
|
* pairs should proceed clockwise or
|
|
* counter-clockwise around the defined shape.
|
|
*
|
|
* @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
|
|
* @chainable
|
|
*/
|
|
declare function quad(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number, x4: number, y4: number): p5;
|
|
|
|
/**
|
|
* Draw a quad. A quad is a quadrilateral, a four
|
|
* sided polygon. It is similar to a rectangle, but
|
|
* the angles between its edges are not constrained
|
|
* to ninety degrees. The first pair of parameters
|
|
* (x1,y1) sets the first vertex and the subsequent
|
|
* pairs should proceed clockwise or
|
|
* counter-clockwise around the defined shape.
|
|
*
|
|
* @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
|
|
* @chainable
|
|
*/
|
|
declare 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): p5;
|
|
|
|
/**
|
|
* Draws a rectangle to the screen. A rectangle is a
|
|
* four-sided shape with every angle at ninety
|
|
* degrees. By default, the first two parameters set
|
|
* the location of the upper-left corner, the third
|
|
* sets the width, and the fourth sets the height.
|
|
* The way these parameters are interpreted, however,
|
|
* may be changed with the rectMode() function. The
|
|
* fifth, sixth, seventh and eighth parameters, if
|
|
* specified, determine corner radius for the
|
|
* top-right, top-left, lower-right and lower-left
|
|
* corners, respectively. An omitted corner radius
|
|
* parameter is set to the value of the previously
|
|
* specified radius value in the parameter list.
|
|
*
|
|
* @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
|
|
*/
|
|
declare function rect(x: number, y: number, w: number, h: number, tl?: number, tr?: number, br?: number, bl?: number): p5;
|
|
|
|
/**
|
|
* Draws a rectangle to the screen. A rectangle is a
|
|
* four-sided shape with every angle at ninety
|
|
* degrees. By default, the first two parameters set
|
|
* the location of the upper-left corner, the third
|
|
* sets the width, and the fourth sets the height.
|
|
* The way these parameters are interpreted, however,
|
|
* may be changed with the rectMode() function. The
|
|
* fifth, sixth, seventh and eighth parameters, if
|
|
* specified, determine corner radius for the
|
|
* top-right, top-left, lower-right and lower-left
|
|
* corners, respectively. An omitted corner radius
|
|
* parameter is set to the value of the previously
|
|
* specified radius value in the parameter list.
|
|
*
|
|
* @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
|
|
* @param [detailY] number of segments in the
|
|
* y-direction
|
|
* @chainable
|
|
*/
|
|
declare function rect(x: number, y: number, w: number, h: number, detailX?: number, detailY?: number): p5;
|
|
|
|
/**
|
|
* A triangle is a plane created by connecting three
|
|
* points. The first two arguments specify the first
|
|
* point, the middle two arguments specify the second
|
|
* point, and the last two arguments specify the
|
|
* third point.
|
|
*
|
|
* @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
|
|
*/
|
|
declare function triangle(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): p5;
|
|
|
|
// src/core/attributes.js
|
|
|
|
/**
|
|
* Modifies the location from which ellipses are
|
|
* drawn by changing the way in which parameters
|
|
* given to ellipse() are interpreted. The default
|
|
* mode is ellipseMode(CENTER), which interprets the
|
|
* first two parameters of ellipse() as the shape's
|
|
* center point, while the third and fourth
|
|
* parameters are its width and height.
|
|
*
|
|
*
|
|
* ellipseMode(RADIUS) also uses the first two
|
|
* parameters of ellipse() as the shape's center
|
|
* point, but uses the third and fourth parameters to
|
|
* specify half of the shapes's width and height.
|
|
*
|
|
*
|
|
* ellipseMode(CORNER) interprets the first two
|
|
* parameters of ellipse() as the upper-left corner
|
|
* of the shape, while the third and fourth
|
|
* parameters are its width and height.
|
|
*
|
|
*
|
|
* ellipseMode(CORNERS) interprets the first two
|
|
* parameters of ellipse() as the location of one
|
|
* corner of the ellipse's bounding box, and the
|
|
* third and fourth parameters as the location of the
|
|
* opposite corner.
|
|
*
|
|
*
|
|
* The parameter must be written in ALL CAPS because
|
|
* Javascript is a case-sensitive language.
|
|
*
|
|
* @param mode either CENTER, RADIUS, CORNER, or
|
|
* CORNERS
|
|
* @chainable
|
|
*/
|
|
declare function ellipseMode(mode: ELLIPSE_MODE): p5;
|
|
|
|
/**
|
|
* Draws all geometry with jagged (aliased) edges.
|
|
* Note that smooth() is active by default, so it is
|
|
* necessary to call noSmooth() to disable smoothing
|
|
* of geometry, images, and fonts.
|
|
*
|
|
* @chainable
|
|
*/
|
|
declare function noSmooth(): p5;
|
|
|
|
/**
|
|
* Modifies the location from which rectangles are
|
|
* drawn by changing the way in which parameters
|
|
* given to rect() are interpreted. The default mode
|
|
* is rectMode(CORNER), which interprets the first
|
|
* two parameters of rect() as the upper-left corner
|
|
* of the shape, while the third and fourth
|
|
* parameters are its width and height.
|
|
*
|
|
*
|
|
* rectMode(CORNERS) interprets the first two
|
|
* parameters of rect() as the location of one
|
|
* corner, and the third and fourth parameters as the
|
|
* location of the opposite corner.
|
|
*
|
|
*
|
|
* rectMode(CENTER) interprets the first two
|
|
* parameters of rect() as the shape's center point,
|
|
* while the third and fourth parameters are its
|
|
* width and height.
|
|
*
|
|
*
|
|
* rectMode(RADIUS) also uses the first two
|
|
* parameters of rect() as the shape's center point,
|
|
* but uses the third and fourth parameters to
|
|
* specify half of the shapes's width and height.
|
|
*
|
|
*
|
|
* The parameter must be written in ALL CAPS because
|
|
* Javascript is a case-sensitive language.
|
|
*
|
|
* @param mode either CORNER, CORNERS, CENTER, or
|
|
* RADIUS
|
|
* @chainable
|
|
*/
|
|
declare function rectMode(mode: RECT_MODE): p5;
|
|
|
|
/**
|
|
* Draws all geometry with smooth (anti-aliased)
|
|
* edges. smooth() will also improve image quality of
|
|
* resized images. Note that smooth() is active by
|
|
* default; noSmooth() can be used to disable
|
|
* smoothing of geometry, images, and fonts.
|
|
*
|
|
* @chainable
|
|
*/
|
|
declare function smooth(): p5;
|
|
|
|
/**
|
|
* Sets the style for rendering line endings. These
|
|
* ends are either squared, extended, or rounded,
|
|
* each of which specified with the corresponding
|
|
* parameters: SQUARE, PROJECT, and ROUND. The
|
|
* default cap is ROUND.
|
|
*
|
|
* @param cap either SQUARE, PROJECT, or ROUND
|
|
* @chainable
|
|
*/
|
|
declare function strokeCap(cap: STROKE_CAP): p5;
|
|
|
|
/**
|
|
* Sets the style of the joints which connect line
|
|
* segments. These joints are either mitered,
|
|
* beveled, or rounded and specified with the
|
|
* corresponding parameters MITER, BEVEL, and ROUND.
|
|
* The default joint is MITER.
|
|
*
|
|
* @param join either MITER, BEVEL, ROUND
|
|
* @chainable
|
|
*/
|
|
declare function strokeJoin(join: 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.
|
|
*
|
|
* @param weight the weight (in pixels) of the stroke
|
|
* @chainable
|
|
*/
|
|
declare function strokeWeight(weight: number): p5;
|
|
|
|
// src/core/constants.js
|
|
|
|
declare const P2D: 'p2d';
|
|
declare const WEBGL: 'webgl';
|
|
|
|
/**
|
|
* 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().
|
|
*
|
|
*/
|
|
declare 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().
|
|
*
|
|
*/
|
|
declare 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().
|
|
*
|
|
*/
|
|
declare 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().
|
|
*
|
|
*/
|
|
declare 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().
|
|
*
|
|
*/
|
|
declare const TWO_PI: number;
|
|
|
|
/**
|
|
* Constant to be used with angleMode() function, to
|
|
* set the mode which p5.js interprates and
|
|
* calculates angles (either DEGREES or RADIANS).
|
|
*
|
|
*/
|
|
declare const DEGREES: 'degrees';
|
|
|
|
/**
|
|
* Constant to be used with angleMode() function, to
|
|
* set the mode which p5.js interprates and
|
|
* calculates angles (either RADIANS or DEGREES).
|
|
*
|
|
*/
|
|
declare const RADIANS: 'radians';
|
|
declare const CORNER: 'corner';
|
|
declare const CORNERS: 'corners';
|
|
declare const RADIUS: 'radius';
|
|
declare const RIGHT: 'right';
|
|
declare const LEFT: 'left';
|
|
declare const CENTER: 'center';
|
|
declare const TOP: 'top';
|
|
declare const BOTTOM: 'bottom';
|
|
declare const BASELINE: 'alphabetic';
|
|
declare const POINTS: 0x0000;
|
|
declare const LINES: 0x0001;
|
|
declare const LINE_STRIP: 0x0003;
|
|
declare const LINE_LOOP: 0x0002;
|
|
declare const TRIANGLES: 0x0004;
|
|
declare const TRIANGLE_FAN: 0x0006;
|
|
declare const TRIANGLE_STRIP: 0x0005;
|
|
declare const QUADS: 'quads';
|
|
declare const QUAD_STRIP: 'quad_strip';
|
|
declare const CLOSE: 'close';
|
|
declare const OPEN: 'open';
|
|
declare const CHORD: 'chord';
|
|
declare const PIE: 'pie';
|
|
declare const PROJECT: 'square';
|
|
declare const SQUARE: 'butt';
|
|
declare const ROUND: 'round';
|
|
declare const BEVEL: 'bevel';
|
|
declare const MITER: 'miter';
|
|
declare const RGB: 'rgb';
|
|
declare const HSB: 'hsb';
|
|
declare const HSL: 'hsl';
|
|
declare const BLEND: 'source-over';
|
|
declare const ADD: 'lighter';
|
|
declare const DARKEST: 'darkest';
|
|
declare const LIGHTEST: 'lighten';
|
|
declare const DIFFERENCE: 'difference';
|
|
declare const EXCLUSION: 'exclusion';
|
|
declare const MULTIPLY: 'multiply';
|
|
declare const SCREEN: 'screen';
|
|
declare const REPLACE: 'copy';
|
|
declare const OVERLAY: 'overlay';
|
|
declare const HARD_LIGHT: 'hard-light';
|
|
declare const SOFT_LIGHT: 'soft-light';
|
|
declare const DODGE: 'color-dodge';
|
|
declare const BURN: 'color-burn';
|
|
declare const THRESHOLD: 'threshold';
|
|
declare const GRAY: 'gray';
|
|
declare const OPAQUE: 'opaque';
|
|
declare const INVERT: 'invert';
|
|
declare const POSTERIZE: 'posterize';
|
|
declare const DILATE: 'dilate';
|
|
declare const ERODE: 'erode';
|
|
declare const BLUR: 'blur';
|
|
declare const NORMAL: 'normal';
|
|
declare const ITALIC: 'italic';
|
|
declare const BOLD: 'bold';
|
|
declare const LANDSCAPE: 'landscape';
|
|
declare const PORTRAIT: 'portrait';
|
|
|
|
// src/core/core.js
|
|
|
|
/**
|
|
* Called directly before setup(), the preload()
|
|
* function is used to handle asynchronous loading of
|
|
* external files. If a preload function is defined,
|
|
* setup() will wait until any load calls within have
|
|
* finished. Nothing besides load calls should be
|
|
* inside preload (loadImage, loadJSON, loadFont,
|
|
* loadStrings, etc).
|
|
*
|
|
*
|
|
* By default the text "loading..." will be
|
|
* displayed. To make your own loading page, include
|
|
* an HTML element with id "p5_loading" in your page.
|
|
* More information here.
|
|
*
|
|
*/
|
|
declare function preload(): void;
|
|
|
|
/**
|
|
* The setup() function is called once when the
|
|
* program starts. It's used to define initial
|
|
* environment properties such as screen size and
|
|
* background color and to load media such as images
|
|
* and fonts as the program starts. There can only be
|
|
* one setup() function for each program and it
|
|
* shouldn't be called again after its initial
|
|
* execution.
|
|
*
|
|
*
|
|
* Note: Variables declared within setup() are not
|
|
* accessible within other functions, including
|
|
* draw().
|
|
*
|
|
*/
|
|
declare function setup(): void;
|
|
|
|
/**
|
|
* Called directly after setup(), the draw() function
|
|
* continuously executes the lines of code contained
|
|
* inside its block until the program is stopped or
|
|
* noLoop() is called. Note if noLoop() is called in
|
|
* setup(), draw() will still be executed once before
|
|
* stopping. draw() is called automatically and
|
|
* should never be called explicitly. It should
|
|
* always be controlled with noLoop(), redraw() and
|
|
* loop(). After noLoop() stops the code in draw()
|
|
* from executing, redraw() causes the code inside
|
|
* draw() to execute once, and loop() will cause the
|
|
* code inside draw() to resume executing
|
|
* continuously.
|
|
*
|
|
*
|
|
* The number of times draw() executes in each second
|
|
* may be controlled with the frameRate() function.
|
|
*
|
|
*
|
|
* There can only be one draw() function for each
|
|
* sketch, and draw() must exist if you want the code
|
|
* to run continuously, or to process events such as
|
|
* mousePressed(). Sometimes, you might have an empty
|
|
* call to draw() in your program, as shown in the
|
|
* above example.
|
|
*
|
|
*
|
|
* It is important to note that the drawing
|
|
* coordinate system will be reset at the beginning
|
|
* of each draw() call. If any transformations are
|
|
* performed within draw() (ex: scale, rotate,
|
|
* translate), their effects will be undone at the
|
|
* beginning of draw(), so transformations will not
|
|
* accumulate over time. On the other hand, styling
|
|
* applied (ex: fill, stroke, etc) will remain in
|
|
* effect.
|
|
*
|
|
*/
|
|
declare function draw(): void;
|
|
|
|
/**
|
|
* Removes the entire p5 sketch. This will remove the
|
|
* canvas and any elements created by p5.js. It will
|
|
* also stop the draw loop and unbind any properties
|
|
* or methods from the window global scope. It will
|
|
* leave a variable p5 in case you wanted to create a
|
|
* new p5 sketch. If you like, you can set p5 = null
|
|
* to erase it. While all functions and variables and
|
|
* objects created by the p5 library will be removed,
|
|
* any other global variables created by your code
|
|
* will remain.
|
|
*
|
|
*/
|
|
declare function remove(): void;
|
|
|
|
// src/core/curves.js
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
declare 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
|
|
*/
|
|
declare 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 Beziers display. The
|
|
* default value is 20.
|
|
*
|
|
* @param detail resolution of the curves
|
|
* @chainable
|
|
*/
|
|
declare function bezierDetail(detail: number): p5;
|
|
|
|
/**
|
|
* Evaluates 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. 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
|
|
*/
|
|
declare 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
|
|
*/
|
|
declare 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
|
|
*/
|
|
declare 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
|
|
*/
|
|
declare 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.
|
|
*
|
|
* @param resolution of the curves
|
|
* @chainable
|
|
*/
|
|
declare 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 of deformation from the original
|
|
* vertices
|
|
* @chainable
|
|
*/
|
|
declare 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 points on the curve, and b and c are the
|
|
* control points. 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 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 bezier value at position t
|
|
*/
|
|
declare 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 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
|
|
*/
|
|
declare function curveTangent(a: number, b: number, c: number, d: number, t: number): number;
|
|
|
|
// src/core/environment.js
|
|
|
|
/**
|
|
* 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 (+).
|
|
*
|
|
* @param contents any combination of Number, String,
|
|
* Object, Boolean, Array to print
|
|
*/
|
|
declare function print(contents: any): void;
|
|
|
|
/**
|
|
* 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.
|
|
*
|
|
*/
|
|
declare var frameCount: 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.
|
|
*
|
|
*/
|
|
declare var focused: boolean;
|
|
|
|
/**
|
|
* 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 16x16 or 32x32 pixels. It is
|
|
* not possible to load an image as the cursor if you
|
|
* are exporting your program for the Web, and not
|
|
* all MODES work with all browsers. The values for
|
|
* parameters x and y must be less than the
|
|
* dimensions of the image.
|
|
*
|
|
* @param type either ARROW, CROSS, HAND, MOVE, TEXT,
|
|
* or WAIT, or path for image
|
|
* @param [x] the horizontal active spot of the
|
|
* cursor
|
|
* @param [y] the vertical active spot of the cursor
|
|
*/
|
|
declare function cursor(type: string|any, 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 rate is 60
|
|
* frames per second. 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 numbers or are non positive also returns
|
|
* current framerate.
|
|
*
|
|
* @param fps number of frames to be displayed every
|
|
* second
|
|
* @chainable
|
|
*/
|
|
declare 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 rate is 60
|
|
* frames per second. 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 numbers or are non positive also returns
|
|
* current framerate.
|
|
*
|
|
* @return current frameRate
|
|
*/
|
|
declare function frameRate(): number;
|
|
|
|
/**
|
|
* Hides the cursor from view.
|
|
*
|
|
*/
|
|
declare function noCursor(): void;
|
|
|
|
/**
|
|
* System variable that stores the width of the
|
|
* entire screen display. This is used to run a
|
|
* full-screen program on any display size.
|
|
*
|
|
*/
|
|
declare var displayWidth: number;
|
|
|
|
/**
|
|
* System variable that stores the height of the
|
|
* entire screen display. This is used to run a
|
|
* full-screen program on any display size.
|
|
*
|
|
*/
|
|
declare var displayHeight: number;
|
|
|
|
/**
|
|
* System variable that stores the width of the inner
|
|
* window, it maps to window.innerWidth.
|
|
*
|
|
*/
|
|
declare var windowWidth: number;
|
|
|
|
/**
|
|
* System variable that stores the height of the
|
|
* inner window, it maps to window.innerHeight.
|
|
*
|
|
*/
|
|
declare var windowHeight: number;
|
|
|
|
/**
|
|
* 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.
|
|
*
|
|
*/
|
|
declare function windowResized(): void;
|
|
|
|
/**
|
|
* 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.
|
|
*
|
|
*/
|
|
declare var 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.
|
|
*
|
|
*/
|
|
declare var height: number;
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
declare 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
|
|
* @return current pixel density of the sketch
|
|
*/
|
|
declare function pixelDensity(val?: number): number;
|
|
|
|
/**
|
|
* Returns the pixel density of the current display
|
|
* the sketch is running on.
|
|
*
|
|
* @return current pixel density of the display
|
|
*/
|
|
declare function displayDensity(): number;
|
|
|
|
/**
|
|
* Gets the current URL.
|
|
*
|
|
* @return url
|
|
*/
|
|
declare function getURL(): string;
|
|
|
|
/**
|
|
* Gets the current URL path as an array.
|
|
*
|
|
* @return path components
|
|
*/
|
|
declare function getURLPath(): string[];
|
|
|
|
/**
|
|
* Gets the current URL params as an Object.
|
|
*
|
|
* @return URL params
|
|
*/
|
|
declare function getURLParams(): object;
|
|
|
|
// src/core/rendering.js
|
|
|
|
/**
|
|
* Creates a canvas element in the document, and sets
|
|
* the dimensions of it 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). 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 100x100 pixels.
|
|
*
|
|
*
|
|
* 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
|
|
* @return canvas generated
|
|
*/
|
|
declare function createCanvas(w: number, h: number, renderer?: RENDERER): HTMLCanvasElement;
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
declare function resizeCanvas(w: number, h: number, noRedraw?: boolean): void;
|
|
|
|
/**
|
|
* Removes the default canvas for a p5 sketch that
|
|
* doesn't require a canvas
|
|
*
|
|
*/
|
|
declare function noCanvas(): void;
|
|
|
|
/**
|
|
* Creates and returns a new p5.Renderer 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.
|
|
*
|
|
* @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
|
|
* @return offscreen graphics buffer
|
|
*/
|
|
declare function createGraphics(w: number, h: number, renderer?: RENDERER): p5.Graphics;
|
|
|
|
/**
|
|
* 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.
|
|
* - 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.
|
|
* - OVERLAY - mix of MULTIPLY and SCREEN .
|
|
* Multiplies dark values, and screens light values.
|
|
* - HARD_LIGHT - SCREEN when greater than 50% gray,
|
|
* MULTIPLY when lower.
|
|
* - SOFT_LIGHT - mix of DARKEST and LIGHTEST. Works
|
|
* like OVERLAY, but not as harsh.
|
|
* - DODGE - lightens light tones and increases
|
|
* contrast, ignores darks.
|
|
* - BURN - darker areas are applied, increasing
|
|
* contrast, ignores lights.
|
|
*
|
|
* @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 or NORMAL
|
|
*/
|
|
declare function blendMode(mode: BLEND_MODE): void;
|
|
|
|
// src/core/structure.js
|
|
|
|
/**
|
|
* 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 saveFrame() 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.
|
|
*
|
|
*/
|
|
declare 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().
|
|
*
|
|
*/
|
|
declare function loop(): 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(), stroke(), tint(), strokeWeight(),
|
|
* strokeCap(), strokeJoin(), imageMode(),
|
|
* rectMode(), ellipseMode(), colorMode(),
|
|
* textAlign(), textFont(), textMode(), textSize(),
|
|
* textLeading().
|
|
*
|
|
*/
|
|
declare 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(), stroke(), tint(), strokeWeight(),
|
|
* strokeCap(), strokeJoin(), imageMode(),
|
|
* rectMode(), ellipseMode(), colorMode(),
|
|
* textAlign(), textFont(), textMode(), textSize(),
|
|
* textLeading().
|
|
*
|
|
*/
|
|
declare function pop(): void;
|
|
|
|
/**
|
|
* Executes the code within draw() one time. This
|
|
* functions 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.
|
|
*/
|
|
declare function redraw(n?: number): void;
|
|
|
|
// src/core/transform.js
|
|
|
|
/**
|
|
* 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 2x3 matrix to be
|
|
* multiplied
|
|
* @param b numbers which define the 2x3 matrix to be
|
|
* multiplied
|
|
* @param c numbers which define the 2x3 matrix to be
|
|
* multiplied
|
|
* @param d numbers which define the 2x3 matrix to be
|
|
* multiplied
|
|
* @param e numbers which define the 2x3 matrix to be
|
|
* multiplied
|
|
* @param f numbers which define the 2x3 matrix to be
|
|
* multiplied
|
|
* @chainable
|
|
*/
|
|
declare function applyMatrix(a: number, b: number, c: number, d: number, e: number, f: number): p5;
|
|
|
|
/**
|
|
* Replaces the current matrix with the identity
|
|
* matrix.
|
|
*
|
|
* @chainable
|
|
*/
|
|
declare function resetMatrix(): p5;
|
|
|
|
/**
|
|
* Rotates a shape 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
|
|
* accumulates the effect. For example, calling
|
|
* rotate(HALF_PI) and then rotate(HALF_PI) is the
|
|
* same as rotate(PI). All tranformations are reset
|
|
* when draw() begins again.
|
|
*
|
|
*
|
|
* Technically, rotate() multiplies the current
|
|
* transformation matrix by a rotation matrix. This
|
|
* function can be further controlled by the 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
|
|
*/
|
|
declare function rotate(angle: number, axis?: p5.Vector|number[]): p5;
|
|
|
|
/**
|
|
* Rotates around X axis.
|
|
*
|
|
* @param angle the angle of rotation, specified in
|
|
* radians or degrees, depending on current angleMode
|
|
* @chainable
|
|
*/
|
|
declare function rotateX(angle: number): p5;
|
|
|
|
/**
|
|
* Rotates around Y axis.
|
|
*
|
|
* @param angle the angle of rotation, specified in
|
|
* radians or degrees, depending on current angleMode
|
|
* @chainable
|
|
*/
|
|
declare function rotateY(angle: number): p5;
|
|
|
|
/**
|
|
* Rotates around Z axis. Webgl mode only.
|
|
*
|
|
* @param angle the angle of rotation, specified in
|
|
* radians or degrees, depending on current angleMode
|
|
* @chainable
|
|
*/
|
|
declare function rotateZ(angle: number): p5;
|
|
|
|
/**
|
|
* Increases or decreases the size of a shape by
|
|
* expanding and 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
|
|
*/
|
|
declare function scale(s: number|p5.Vector|number[], y?: number, z?: number): p5;
|
|
|
|
/**
|
|
* Increases or decreases the size of a shape by
|
|
* expanding and 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
|
|
*/
|
|
declare function scale(scales: p5.Vector|number[]): p5;
|
|
|
|
/**
|
|
* Shears a shape around the x-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 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
|
|
*/
|
|
declare 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
|
|
*/
|
|
declare 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
|
|
*/
|
|
declare 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
|
|
*/
|
|
declare function translate(vector: p5.Vector): p5;
|
|
|
|
// src/core/vertex.js
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
declare 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, LINES, TRIANGLES, TRIANGLE_FAN,
|
|
* TRIANGLE_STRIP, QUADS, and QUAD_STRIP. 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, or QUAD_STRIP
|
|
* @chainable
|
|
*/
|
|
declare function beginShape(kind?: 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. 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 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
|
|
*/
|
|
declare function bezierVertex(x2: number, y2: number, x3: number, y3: number, x4: number, y4: 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(). The first
|
|
* and last points in a series of curveVertex() lines
|
|
* will be used to guide the beginning and end of a
|
|
* 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
|
|
*/
|
|
declare function curveVertex(x: number, y: 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
|
|
*/
|
|
declare function endContour(): p5;
|
|
|
|
/**
|
|
* The endShape() function is the companion to
|
|
* beginShape() and may only be called after
|
|
* beginShape(). When endshape() is called, all of
|
|
* 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
|
|
*/
|
|
declare function endShape(mode?: 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. This function must be used between
|
|
* beginShape() and endShape() and only when there is
|
|
* no MODE 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
|
|
*/
|
|
declare function quadraticVertex(cx: number, cy: number, x3: number, y3: 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
|
|
*/
|
|
declare 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
|
|
* @param [u] the vertex's texture u-coordinate
|
|
* @param [v] the vertex's texture v-coordinate
|
|
*/
|
|
declare function vertex(x: number, y: number, z?: number, u?: number, v?: number): void;
|
|
|
|
// src/data/p5.TypedDict.js
|
|
|
|
/**
|
|
* Creates a new instance of p5.StringDict using the
|
|
* key, value pair or object you provide.
|
|
*
|
|
* @param key or object
|
|
*/
|
|
declare function createStringDict(key: string|object, value: string): p5.StringDict;
|
|
|
|
/**
|
|
* Creates a new instance of p5.NumberDict using the
|
|
* key, value pair or object you provide.
|
|
*
|
|
* @param key or object
|
|
*/
|
|
declare function createNumberDict(key: number|object, value: number): p5.NumberDict;
|
|
|
|
// src/events/acceleration.js
|
|
|
|
/**
|
|
* The system variable deviceOrientation always
|
|
* contains the orientation of the device. The value
|
|
* of this variable will either be set 'landscape' or
|
|
* 'portrait'. If no data is available it will be set
|
|
* to 'undefined'. either LANDSCAPE or PORTRAIT.
|
|
*
|
|
*/
|
|
declare var deviceOrientation: any;
|
|
|
|
/**
|
|
* The system variable accelerationX always contains
|
|
* the acceleration of the device along the x axis.
|
|
* Value is represented as meters per second squared.
|
|
*
|
|
*/
|
|
declare var accelerationX: number;
|
|
|
|
/**
|
|
* The system variable accelerationY always contains
|
|
* the acceleration of the device along the y axis.
|
|
* Value is represented as meters per second squared.
|
|
*
|
|
*/
|
|
declare var accelerationY: number;
|
|
|
|
/**
|
|
* The system variable accelerationZ always contains
|
|
* the acceleration of the device along the z axis.
|
|
* Value is represented as meters per second squared.
|
|
*
|
|
*/
|
|
declare var accelerationZ: number;
|
|
|
|
/**
|
|
* The system variable pAccelerationX always contains
|
|
* the acceleration of the device along the x axis in
|
|
* the frame previous to the current frame. Value is
|
|
* represented as meters per second squared.
|
|
*
|
|
*/
|
|
declare var pAccelerationX: number;
|
|
|
|
/**
|
|
* The system variable pAccelerationY always contains
|
|
* the acceleration of the device along the y axis in
|
|
* the frame previous to the current frame. Value is
|
|
* represented as meters per second squared.
|
|
*
|
|
*/
|
|
declare var pAccelerationY: number;
|
|
|
|
/**
|
|
* The system variable pAccelerationZ always contains
|
|
* the acceleration of the device along the z axis in
|
|
* the frame previous to the current frame. Value is
|
|
* represented as meters per second squared.
|
|
*
|
|
*/
|
|
declare var pAccelerationZ: number;
|
|
|
|
/**
|
|
* The system variable rotationX always contains the
|
|
* rotation of the device along the x axis. Value is
|
|
* represented as 0 to +/-180 degrees. Note: The
|
|
* order the rotations are called is important, ie.
|
|
* if used together, it must be called in the order
|
|
* Z-X-Y or there might be unexpected behaviour.
|
|
*
|
|
*/
|
|
declare var rotationX: number;
|
|
|
|
/**
|
|
* The system variable rotationY always contains the
|
|
* rotation of the device along the y axis. Value is
|
|
* represented as 0 to +/-90 degrees. Note: The
|
|
* order the rotations are called is important, ie.
|
|
* if used together, it must be called in the order
|
|
* Z-X-Y or there might be unexpected behaviour.
|
|
*
|
|
*/
|
|
declare var rotationY: number;
|
|
|
|
/**
|
|
* The system variable rotationZ always contains the
|
|
* rotation of the device along the z axis. Value is
|
|
* represented as 0 to 359 degrees. Unlike rotationX
|
|
* and rotationY, this variable is available for
|
|
* devices with a built-in compass only.
|
|
*
|
|
*
|
|
* Note: The order the rotations are called is
|
|
* important, ie. if used together, it must be called
|
|
* in the order Z-X-Y or there might be unexpected
|
|
* behaviour.
|
|
*
|
|
*/
|
|
declare var rotationZ: number;
|
|
|
|
/**
|
|
* The system variable pRotationX always contains the
|
|
* rotation of the device along the x axis in the
|
|
* frame previous to the current frame. Value is
|
|
* represented as 0 to +/-180 degrees. pRotationX
|
|
* can also be used with rotationX to determine the
|
|
* rotate direction of the device along the X-axis.
|
|
*
|
|
*/
|
|
declare var pRotationX: number;
|
|
|
|
/**
|
|
* The system variable pRotationY always contains the
|
|
* rotation of the device along the y axis in the
|
|
* frame previous to the current frame. Value is
|
|
* represented as 0 to +/-90 degrees. pRotationY can
|
|
* also be used with rotationY to determine the
|
|
* rotate direction of the device along the Y-axis.
|
|
*
|
|
*/
|
|
declare var pRotationY: number;
|
|
|
|
/**
|
|
* The system variable pRotationZ always contains the
|
|
* rotation of the device along the z axis in the
|
|
* frame previous to the current frame. Value is
|
|
* represented as 0 to 359 degrees. pRotationZ can
|
|
* also be used with rotationZ to determine the
|
|
* rotate direction of the device along the Z-axis.
|
|
*
|
|
*/
|
|
declare var pRotationZ: number;
|
|
declare var turnAxis: string;
|
|
|
|
/**
|
|
* The setMoveThreshold() function is used to set the
|
|
* movement threshold for the deviceMoved() function.
|
|
* The default threshold is set to 0.5.
|
|
*
|
|
* @param value The threshold value
|
|
*/
|
|
declare function setMoveThreshold(value: number): void;
|
|
|
|
/**
|
|
* The setShakeThreshold() function is used to set
|
|
* the movement threshold for the deviceShaken()
|
|
* function. The default threshold is set to 30.
|
|
*
|
|
* @param value The threshold value
|
|
*/
|
|
declare function setShakeThreshold(value: number): void;
|
|
|
|
/**
|
|
* The deviceMoved() function is called when the
|
|
* device is moved by more than the threshold value
|
|
* along X, Y or Z axis. The default threshold is set
|
|
* to 0.5.
|
|
*
|
|
*/
|
|
declare function deviceMoved(): void;
|
|
|
|
/**
|
|
* The deviceTurned() function is called when the
|
|
* device rotates by more than 90 degrees
|
|
* continuously. The axis that triggers the
|
|
* deviceTurned() method is stored in the turnAxis
|
|
* variable. The deviceTurned() method can be locked
|
|
* to trigger on any axis: X, Y or Z by comparing the
|
|
* turnAxis variable to 'X', 'Y' or 'Z'.
|
|
*
|
|
*/
|
|
declare function deviceTurned(): void;
|
|
|
|
/**
|
|
* The deviceShaken() function is called when the
|
|
* device total acceleration changes of accelerationX
|
|
* and accelerationY values is more than the
|
|
* threshold value. The default threshold is set to
|
|
* 30.
|
|
*
|
|
*/
|
|
declare function deviceShaken(): void;
|
|
|
|
// src/events/keyboard.js
|
|
|
|
/**
|
|
* The boolean system variable keyIsPressed is true
|
|
* if any key is pressed and false if no keys are
|
|
* pressed.
|
|
*
|
|
*/
|
|
declare var keyIsPressed: boolean;
|
|
|
|
/**
|
|
* The system variable key always contains the value
|
|
* of the most recent key on the keyboard that was
|
|
* typed. To get the proper capitalization, it is
|
|
* best to use it within keyTyped(). For non-ASCII
|
|
* keys, use the keyCode variable.
|
|
*
|
|
*/
|
|
declare var key: string;
|
|
|
|
/**
|
|
* The variable keyCode is used to detect special
|
|
* keys such as BACKSPACE, DELETE, ENTER, RETURN,
|
|
* TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT,
|
|
* UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. You
|
|
* can also check for custom keys by looking up the
|
|
* keyCode of any key on a site like this:
|
|
* keycode.info.
|
|
*
|
|
*/
|
|
declare var keyCode: number;
|
|
|
|
/**
|
|
* The keyPressed() function is called once every
|
|
* time a key is pressed. The keyCode for the key
|
|
* that was pressed is stored in the keyCode
|
|
* variable. For non-ASCII keys, use the keyCode
|
|
* variable. You can check if the keyCode equals
|
|
* BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE,
|
|
* SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW,
|
|
* LEFT_ARROW, RIGHT_ARROW.
|
|
*
|
|
*
|
|
* For ASCII keys that was pressed is stored in the
|
|
* key variable. However, it does not distinguish
|
|
* between uppercase and lowercase. For this reason,
|
|
* it is recommended to use keyTyped() to read the
|
|
* key variable, in which the case of the variable
|
|
* will be distinguished.
|
|
*
|
|
*
|
|
* Because of how operating systems handle key
|
|
* repeats, holding down a key may cause multiple
|
|
* calls to keyTyped() (and keyReleased() as well).
|
|
* The rate of repeat is set by the operating system
|
|
* and how each computer is configured.
|
|
*
|
|
*
|
|
* Browsers may have different default behaviors
|
|
* attached to various key events. To prevent any
|
|
* default behavior for this event, add "return
|
|
* false" to the end of the method.
|
|
*
|
|
*/
|
|
declare function keyPressed(): void;
|
|
|
|
/**
|
|
* The keyReleased() function is called once every
|
|
* time a key is released. See key and keyCode for
|
|
* more information. Browsers may have different
|
|
* default behaviors attached to various key events.
|
|
* To prevent any default behavior for this event,
|
|
* add "return false" to the end of the method.
|
|
*
|
|
*/
|
|
declare function keyReleased(): void;
|
|
|
|
/**
|
|
* The keyTyped() function is called once every time
|
|
* a key is pressed, but action keys such as Ctrl,
|
|
* Shift, and Alt are ignored. The most recent key
|
|
* pressed will be stored in the key variable.
|
|
* Because of how operating systems handle key
|
|
* repeats, holding down a key will cause multiple
|
|
* calls to keyTyped() (and keyReleased() as well).
|
|
* The rate of repeat is set by the operating system
|
|
* and how each computer is configured.
|
|
*
|
|
*
|
|
* Browsers may have different default behaviors
|
|
* attached to various key events. To prevent any
|
|
* default behavior for this event, add "return
|
|
* false" to the end of the method.
|
|
*
|
|
*/
|
|
declare function keyTyped(): void;
|
|
|
|
/**
|
|
* The keyIsDown() function checks if the key is
|
|
* currently down, i.e. pressed. It can be used if
|
|
* you have an object that moves, and you want
|
|
* several keys to be able to affect its behaviour
|
|
* simultaneously, such as moving a sprite
|
|
* diagonally. You can put in any number representing
|
|
* the keyCode of the key, or use any of the variable
|
|
* keyCode names listed here.
|
|
*
|
|
* @param code The key to check for.
|
|
* @return whether key is down or not
|
|
*/
|
|
declare function keyIsDown(code: number): boolean;
|
|
|
|
// src/events/mouse.js
|
|
|
|
/**
|
|
* The system variable mouseX always contains the
|
|
* current horizontal position of the mouse, relative
|
|
* to (0, 0) of the canvas. If touch is used instead
|
|
* of mouse input, mouseX will hold the x value of
|
|
* the most recent touch point.
|
|
*
|
|
*/
|
|
declare var mouseX: number;
|
|
|
|
/**
|
|
* The system variable mouseY always contains the
|
|
* current vertical position of the mouse, relative
|
|
* to (0, 0) of the canvas. If touch is used instead
|
|
* of mouse input, mouseY will hold the y value of
|
|
* the most recent touch point.
|
|
*
|
|
*/
|
|
declare var mouseY: number;
|
|
|
|
/**
|
|
* The system variable pmouseX always contains the
|
|
* horizontal position of the mouse or finger in the
|
|
* frame previous to the current frame, relative to
|
|
* (0, 0) of the canvas.
|
|
*
|
|
*/
|
|
declare var pmouseX: number;
|
|
|
|
/**
|
|
* The system variable pmouseY always contains the
|
|
* vertical position of the mouse or finger in the
|
|
* frame previous to the current frame, relative to
|
|
* (0, 0) of the canvas.
|
|
*
|
|
*/
|
|
declare var pmouseY: number;
|
|
|
|
/**
|
|
* The system variable winMouseX always contains the
|
|
* current horizontal position of the mouse, relative
|
|
* to (0, 0) of the window.
|
|
*
|
|
*/
|
|
declare var winMouseX: number;
|
|
|
|
/**
|
|
* The system variable winMouseY always contains the
|
|
* current vertical position of the mouse, relative
|
|
* to (0, 0) of the window.
|
|
*
|
|
*/
|
|
declare var winMouseY: number;
|
|
|
|
/**
|
|
* The system variable pwinMouseX always contains the
|
|
* horizontal position of the mouse in the frame
|
|
* previous to the current frame, relative to (0, 0)
|
|
* of the window.
|
|
*
|
|
*/
|
|
declare var pwinMouseX: number;
|
|
|
|
/**
|
|
* The system variable pwinMouseY always contains the
|
|
* vertical position of the mouse in the frame
|
|
* previous to the current frame, relative to (0, 0)
|
|
* of the window.
|
|
*
|
|
*/
|
|
declare var pwinMouseY: number;
|
|
|
|
/**
|
|
* Processing automatically tracks if the mouse
|
|
* button is pressed and which button is pressed. The
|
|
* value of the system variable mouseButton is either
|
|
* LEFT, RIGHT, or CENTER depending on which button
|
|
* was pressed last. Warning: different browsers may
|
|
* track mouseButton differently.
|
|
*
|
|
*/
|
|
declare var mouseButton: any;
|
|
|
|
/**
|
|
* The boolean system variable mouseIsPressed is true
|
|
* if the mouse is pressed and false if not.
|
|
*
|
|
*/
|
|
declare var mouseIsPressed: boolean;
|
|
|
|
/**
|
|
* The mouseMoved() function is called every time the
|
|
* mouse moves and a mouse button is not pressed.
|
|
* Browsers may have different default behaviors
|
|
* attached to various mouse events. To prevent any
|
|
* default behavior for this event, add "return
|
|
* false" to the end of the method.
|
|
*
|
|
*/
|
|
declare function mouseMoved(): void;
|
|
|
|
/**
|
|
* The mouseDragged() function is called once every
|
|
* time the mouse moves and a mouse button is
|
|
* pressed. If no mouseDragged() function is defined,
|
|
* the touchMoved() function will be called instead
|
|
* if it is defined. Browsers may have different
|
|
* default behaviors attached to various mouse
|
|
* events. To prevent any default behavior for this
|
|
* event, add "return false" to the end of the
|
|
* method.
|
|
*
|
|
*/
|
|
declare function mouseDragged(): void;
|
|
|
|
/**
|
|
* The mousePressed() function is called once after
|
|
* every time a mouse button is pressed. The
|
|
* mouseButton variable (see the related reference
|
|
* entry) can be used to determine which button has
|
|
* been pressed. If no mousePressed() function is
|
|
* defined, the touchStarted() function will be
|
|
* called instead if it is defined. Browsers may have
|
|
* different default behaviors attached to various
|
|
* mouse events. To prevent any default behavior for
|
|
* this event, add "return false" to the end of the
|
|
* method.
|
|
*
|
|
*/
|
|
declare function mousePressed(): void;
|
|
|
|
/**
|
|
* The mouseReleased() function is called every time
|
|
* a mouse button is released. If no mouseReleased()
|
|
* function is defined, the touchEnded() function
|
|
* will be called instead if it is defined. Browsers
|
|
* may have different default behaviors attached to
|
|
* various mouse events. To prevent any default
|
|
* behavior for this event, add "return false" to the
|
|
* end of the method.
|
|
*
|
|
*/
|
|
declare function mouseReleased(): void;
|
|
|
|
/**
|
|
* The mouseClicked() function is called once after a
|
|
* mouse button has been pressed and then released.
|
|
* Browsers handle clicks differently, so this
|
|
* function is only guaranteed to be run when the
|
|
* left mouse button is clicked. To handle other
|
|
* mouse buttons being pressed or released, see
|
|
* mousePressed() or mouseReleased().
|
|
*
|
|
*
|
|
* Browsers may have different default behaviors
|
|
* attached to various mouse events. To prevent any
|
|
* default behavior for this event, add "return
|
|
* false" to the end of the method.
|
|
*
|
|
*/
|
|
declare function mouseClicked(): void;
|
|
|
|
/**
|
|
* The doubleClicked() function is executed every
|
|
* time a event listener has detected a dblclick
|
|
* event which is a part of the DOM L3 specification.
|
|
* The doubleClicked event is fired when a pointing
|
|
* device button (usually a mouse's primary button)
|
|
* is clicked twice on a single element. For more
|
|
* info on the dblclick event refer to mozilla's
|
|
* documentation here:
|
|
* https://developer.mozilla.org/en-US/docs/Web/Events/dblclick
|
|
*
|
|
*/
|
|
declare function doubleClicked(): void;
|
|
|
|
/**
|
|
* The function mouseWheel() is executed every time a
|
|
* vertical mouse wheel event is detected either
|
|
* triggered by an actual mouse wheel or by a
|
|
* touchpad. The event.delta property returns the
|
|
* amount the mouse wheel have scrolled. The values
|
|
* can be positive or negative depending on the
|
|
* scroll direction (on OS X with "natural" scrolling
|
|
* enabled, the signs are inverted).
|
|
*
|
|
*
|
|
* Browsers may have different default behaviors
|
|
* attached to various mouse events. To prevent any
|
|
* default behavior for this event, add "return
|
|
* false" to the end of the method.
|
|
*
|
|
*
|
|
* Due to the current support of the "wheel" event on
|
|
* Safari, the function may only work as expected if
|
|
* "return false" is included while using Safari.
|
|
*
|
|
*/
|
|
declare function mouseWheel(): void;
|
|
|
|
// src/events/touch.js
|
|
|
|
/**
|
|
* The system variable touches[] contains an array of
|
|
* the positions of all current touch points,
|
|
* relative to (0, 0) of the canvas, and IDs
|
|
* identifying a unique touch as it moves. Each
|
|
* element in the array is an object with x, y, and
|
|
* id properties. The touches[] array is not
|
|
* supported on Safari and IE on touch-based desktops
|
|
* (laptops).
|
|
*
|
|
*/
|
|
declare var touches: object[];
|
|
|
|
/**
|
|
* The touchStarted() function is called once after
|
|
* every time a touch is registered. If no
|
|
* touchStarted() function is defined, the
|
|
* mousePressed() function will be called instead if
|
|
* it is defined. Browsers may have different default
|
|
* behaviors attached to various touch events. To
|
|
* prevent any default behavior for this event, add
|
|
* "return false" to the end of the method.
|
|
*
|
|
*/
|
|
declare function touchStarted(): void;
|
|
|
|
/**
|
|
* The touchMoved() function is called every time a
|
|
* touch move is registered. If no touchMoved()
|
|
* function is defined, the mouseDragged() function
|
|
* will be called instead if it is defined. Browsers
|
|
* may have different default behaviors attached to
|
|
* various touch events. To prevent any default
|
|
* behavior for this event, add "return false" to the
|
|
* end of the method.
|
|
*
|
|
*/
|
|
declare function touchMoved(): void;
|
|
|
|
/**
|
|
* The touchEnded() function is called every time a
|
|
* touch ends. If no touchEnded() function is
|
|
* defined, the mouseReleased() function will be
|
|
* called instead if it is defined. Browsers may have
|
|
* different default behaviors attached to various
|
|
* touch events. To prevent any default behavior for
|
|
* this event, add "return false" to the end of the
|
|
* method.
|
|
*
|
|
*/
|
|
declare function touchEnded(): void;
|
|
|
|
// src/image/image.js
|
|
|
|
/**
|
|
* Creates a new p5.Image (the datatype for storing
|
|
* images). This provides a fresh buffer of pixels to
|
|
* play with. Set the size of the buffer with the
|
|
* width and height parameters. .pixels gives access
|
|
* to an array containing the values for all the
|
|
* pixels in the display window. These values are
|
|
* numbers. This array is the size (including an
|
|
* appropriate factor for the pixelDensity) of the
|
|
* display window x4, representing the R, G, B, A
|
|
* values in order for each pixel, moving from left
|
|
* to right across each row, then down each column.
|
|
* See .pixels for more info. It may also be simpler
|
|
* to use set() or get().
|
|
*
|
|
*
|
|
* Before accessing the pixels of an image, the data
|
|
* must loaded with the loadPixels() function. After
|
|
* the array data has been modified, the
|
|
* updatePixels() function must be run to update the
|
|
* changes.
|
|
*
|
|
* @param width width in pixels
|
|
* @param height height in pixels
|
|
* @return the p5.Image object
|
|
*/
|
|
declare function createImage(width: number, height: number): p5.Image;
|
|
|
|
/**
|
|
* Save the current canvas as an image. In Safari,
|
|
* this will open the image in the window and the
|
|
* user must provide their own filename on save-as.
|
|
* Other browsers will either save the file
|
|
* immediately, or prompt the user with a dialogue
|
|
* window.
|
|
*
|
|
* @param selectedCanvas a variable representing a
|
|
* specific html5 canvas (optional)
|
|
* @param [extension] 'jpg' or 'png'
|
|
*/
|
|
declare function saveCanvas(selectedCanvas: p5.Element|HTMLCanvasElement, filename?: string, extension?: string): void;
|
|
|
|
/**
|
|
* Save the current canvas as an image. In Safari,
|
|
* this will open the image in the window and the
|
|
* user must provide their own filename on save-as.
|
|
* Other browsers will either save the file
|
|
* immediately, or prompt the user with a dialogue
|
|
* window.
|
|
*
|
|
* @param [extension] 'jpg' or 'png'
|
|
*/
|
|
declare function saveCanvas(filename?: string, extension?: string): void;
|
|
|
|
/**
|
|
* Capture a sequence of frames that can be used to
|
|
* create a movie. Accepts a callback. For example,
|
|
* you may wish to send the frames to a server where
|
|
* they can be stored or converted into a movie. If
|
|
* no callback is provided, the browser will pop up
|
|
* save dialogues in an attempt to download all of
|
|
* the images that have just been created. With the
|
|
* callback provided the image data isn't saved by
|
|
* default but instead passed as an argument to the
|
|
* callback function as an array of objects, with the
|
|
* size of array equal to the total number of frames.
|
|
* Note that saveFrames() will only save the first 15
|
|
* frames of an animation. To export longer
|
|
* animations, you might look into a library like
|
|
* ccapture.js.
|
|
*
|
|
* @param extension 'jpg' or 'png'
|
|
* @param duration Duration in seconds to save the
|
|
* frames for.
|
|
* @param framerate Framerate to save the frames in.
|
|
* @param [callback] A callback function that will be
|
|
* executed to handle the image data. This function
|
|
* should accept an array as argument. The array will
|
|
* contain the specified number of frames of objects.
|
|
* Each object has three properties: imageData - an
|
|
* image/octet-stream, filename and extension.
|
|
*/
|
|
declare function saveFrames(filename: string, extension: string, duration: number, framerate: number, callback?: (p1: any[]) => any): void;
|
|
|
|
// src/image/loading_displaying.js
|
|
|
|
/**
|
|
* Loads an image from a path and creates a p5.Image
|
|
* from it. The image may not be immediately
|
|
* available for rendering If you want to ensure that
|
|
* the image is ready before doing anything with it,
|
|
* place the loadImage() call in preload(). You may
|
|
* also supply a callback function to handle the
|
|
* image when it's ready.
|
|
*
|
|
*
|
|
* The path to the image should be relative to the
|
|
* HTML file that links in your sketch. Loading an
|
|
* image from a URL or other remote location may be
|
|
* blocked due to your browser's built-in security.
|
|
*
|
|
* @param path Path of the image to be loaded
|
|
* @param [successCallback] Function to be called
|
|
* once the image is loaded. Will be passed the
|
|
* p5.Image.
|
|
* @param [failureCallback] called with event error
|
|
* if the image fails to load.
|
|
* @return the p5.Image object
|
|
*/
|
|
declare function loadImage(path: string, successCallback?: (p1: p5.Image) => any, failureCallback?: (p1: Event) => any): p5.Image;
|
|
|
|
/**
|
|
* Draw an image to the p5.js canvas. This function
|
|
* can be used with different numbers of parameters.
|
|
* The simplest use requires only three parameters:
|
|
* img, x, and y—where (x, y) is the position of the
|
|
* image. Two more parameters can optionally be added
|
|
* to specify the width and height of the image.
|
|
*
|
|
* This function can also be used with all eight
|
|
* Number parameters. To differentiate between all
|
|
* these parameters, p5.js uses the language of
|
|
* "destination rectangle" (which corresponds to
|
|
* "dx", "dy", etc.) and "source image" (which
|
|
* corresponds to "sx", "sy", etc.) below. Specifying
|
|
* the "source image" dimensions can be useful when
|
|
* you want to display a subsection of the source
|
|
* image instead of the whole thing. Here's a diagram
|
|
* to explain further:
|
|
*
|
|
* @param img the image to display
|
|
* @param x the x-coordinate of the top-left corner
|
|
* of the image
|
|
* @param y the y-coordinate of the top-left corner
|
|
* of the image
|
|
* @param [width] the width to draw the image
|
|
* @param [height] the height to draw the image
|
|
*/
|
|
declare function image(img: p5.Image|p5.Element, x: number, y: number, width?: number, height?: number): void;
|
|
|
|
/**
|
|
* Draw an image to the p5.js canvas. This function
|
|
* can be used with different numbers of parameters.
|
|
* The simplest use requires only three parameters:
|
|
* img, x, and y—where (x, y) is the position of the
|
|
* image. Two more parameters can optionally be added
|
|
* to specify the width and height of the image.
|
|
*
|
|
* This function can also be used with all eight
|
|
* Number parameters. To differentiate between all
|
|
* these parameters, p5.js uses the language of
|
|
* "destination rectangle" (which corresponds to
|
|
* "dx", "dy", etc.) and "source image" (which
|
|
* corresponds to "sx", "sy", etc.) below. Specifying
|
|
* the "source image" dimensions can be useful when
|
|
* you want to display a subsection of the source
|
|
* image instead of the whole thing. Here's a diagram
|
|
* to explain further:
|
|
*
|
|
* @param img the image to display
|
|
* @param dx the x-coordinate of the destination
|
|
* rectangle in which to draw the source image
|
|
* @param dy the y-coordinate of the destination
|
|
* rectangle in which to draw the source image
|
|
* @param dWidth the width of the destination
|
|
* rectangle
|
|
* @param dHeight the height of the destination
|
|
* rectangle
|
|
* @param sx the x-coordinate of the subsection of
|
|
* the source image to draw into the destination
|
|
* rectangle
|
|
* @param sy the y-coordinate of the subsection of
|
|
* the source image to draw into the destination
|
|
* rectangle
|
|
* @param [sWidth] the width of the subsection of the
|
|
* source image to draw into the destination
|
|
* rectangle
|
|
* @param [sHeight] the height of the subsection of
|
|
* the source image to draw into the destination
|
|
* rectangle
|
|
*/
|
|
declare function image(img: p5.Image|p5.Element, dx: number, dy: number, dWidth: number, dHeight: number, sx: number, sy: number, sWidth?: number, sHeight?: number): void;
|
|
|
|
/**
|
|
* Sets the fill value for displaying images. Images
|
|
* can be tinted to specified colors or made
|
|
* transparent by including an alpha value. To apply
|
|
* transparency to an image without affecting its
|
|
* color, use white as the tint color and specify an
|
|
* alpha value. For instance, tint(255, 128) will
|
|
* make an image 50% transparent (assuming the
|
|
* default alpha range of 0-255, which can be changed
|
|
* with colorMode()).
|
|
*
|
|
*
|
|
* The value for the gray parameter must be less than
|
|
* or equal to the current maximum value as specified
|
|
* by colorMode(). The default maximum value is 255.
|
|
*
|
|
* @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
|
|
*/
|
|
declare function tint(v1: number, v2: number, v3: number, alpha?: number): void;
|
|
|
|
/**
|
|
* Sets the fill value for displaying images. Images
|
|
* can be tinted to specified colors or made
|
|
* transparent by including an alpha value. To apply
|
|
* transparency to an image without affecting its
|
|
* color, use white as the tint color and specify an
|
|
* alpha value. For instance, tint(255, 128) will
|
|
* make an image 50% transparent (assuming the
|
|
* default alpha range of 0-255, which can be changed
|
|
* with colorMode()).
|
|
*
|
|
*
|
|
* The value for the gray parameter must be less than
|
|
* or equal to the current maximum value as specified
|
|
* by colorMode(). The default maximum value is 255.
|
|
*
|
|
* @param value a color string
|
|
*/
|
|
declare function tint(value: string, alpha?: number): void;
|
|
|
|
/**
|
|
* Sets the fill value for displaying images. Images
|
|
* can be tinted to specified colors or made
|
|
* transparent by including an alpha value. To apply
|
|
* transparency to an image without affecting its
|
|
* color, use white as the tint color and specify an
|
|
* alpha value. For instance, tint(255, 128) will
|
|
* make an image 50% transparent (assuming the
|
|
* default alpha range of 0-255, which can be changed
|
|
* with colorMode()).
|
|
*
|
|
*
|
|
* The value for the gray parameter must be less than
|
|
* or equal to the current maximum value as specified
|
|
* by colorMode(). The default maximum value is 255.
|
|
*
|
|
* @param values an array containing the
|
|
* red,green,blue & and alpha components of the color
|
|
*/
|
|
declare function tint(values: number[]): void;
|
|
|
|
/**
|
|
* Sets the fill value for displaying images. Images
|
|
* can be tinted to specified colors or made
|
|
* transparent by including an alpha value. To apply
|
|
* transparency to an image without affecting its
|
|
* color, use white as the tint color and specify an
|
|
* alpha value. For instance, tint(255, 128) will
|
|
* make an image 50% transparent (assuming the
|
|
* default alpha range of 0-255, which can be changed
|
|
* with colorMode()).
|
|
*
|
|
*
|
|
* The value for the gray parameter must be less than
|
|
* or equal to the current maximum value as specified
|
|
* by colorMode(). The default maximum value is 255.
|
|
*
|
|
* @param color the tint color
|
|
*/
|
|
declare function tint(color: p5.Color): void;
|
|
|
|
/**
|
|
* Removes the current fill value for displaying
|
|
* images and reverts to displaying images with their
|
|
* original hues.
|
|
*
|
|
*/
|
|
declare function noTint(): void;
|
|
|
|
/**
|
|
* Set image mode. Modifies the location from which
|
|
* images are drawn by changing the way in which
|
|
* parameters given to image() are interpreted. The
|
|
* default mode is imageMode(CORNER), which
|
|
* interprets the second and third parameters of
|
|
* image() as the upper-left corner of the image. If
|
|
* two additional parameters are specified, they are
|
|
* used to set the image's width and height.
|
|
* imageMode(CORNERS) interprets the second and third
|
|
* parameters of image() as the location of one
|
|
* corner, and the fourth and fifth parameters as the
|
|
* opposite corner.
|
|
*
|
|
*
|
|
* imageMode(CENTER) interprets the second and third
|
|
* parameters of image() as the image's center point.
|
|
* If two additional parameters are specified, they
|
|
* are used to set the image's width and height.
|
|
*
|
|
* @param mode either CORNER, CORNERS, or CENTER
|
|
*/
|
|
declare function imageMode(mode: IMAGE_MODE): void;
|
|
|
|
// src/image/pixels.js
|
|
|
|
/**
|
|
* Uint8ClampedArray containing the values for all
|
|
* the pixels in the display window. These values are
|
|
* numbers. This array is the size (include an
|
|
* appropriate factor for pixelDensity) of the
|
|
* display window x4, representing the R, G, B, A
|
|
* values in order for each pixel, moving from left
|
|
* to right across each row, then down each column.
|
|
* Retina and other high density displays will have
|
|
* more pixels[] (by a factor of pixelDensity^2). For
|
|
* example, if the image is 100x100 pixels, there
|
|
* will be 40,000. On a retina display, there will be
|
|
* 160,000. The first four values (indices 0-3) in
|
|
* the array will be the R, G, B, A values of the
|
|
* pixel at (0, 0). The second four values (indices
|
|
* 4-7) will contain the R, G, B, A values of the
|
|
* pixel at (1, 0). More generally, to set values for
|
|
* a pixel at (x, y):
|
|
*
|
|
* var d = pixelDensity(); for (var i = 0; i < d;
|
|
* i++) { for (var j = 0; j < d; j++) { // loop over
|
|
* idx = 4 * ((y * d + j) * width * d + (x * d + i));
|
|
* pixels[idx] = r; pixels[idx+1] = g; pixels[idx+2]
|
|
* = b; pixels[idx+3] = a; } }
|
|
*
|
|
* While the above method is complex, it is flexible
|
|
* enough to work with any pixelDensity. Note that
|
|
* set() will automatically take care of setting all
|
|
* the appropriate values in pixels[] for a given (x,
|
|
* y) at any pixelDensity, but the performance may
|
|
* not be as fast when lots of modifications are made
|
|
* to the pixel array.
|
|
*
|
|
*
|
|
* Before accessing this array, the data must loaded
|
|
* with the loadPixels() function. After the array
|
|
* data has been modified, the updatePixels()
|
|
* function must be run to update the changes.
|
|
*
|
|
*
|
|
* Note that this is not a standard javascript array.
|
|
* This means that standard javascript functions such
|
|
* as slice() or arrayCopy() do not work.
|
|
*
|
|
*/
|
|
declare var pixels: number[];
|
|
|
|
/**
|
|
* Copies a region of pixels from one image to
|
|
* another, using a specified blend mode to do the
|
|
* operation.
|
|
*
|
|
* @param srcImage source image
|
|
* @param sx X coordinate of the source's upper left
|
|
* corner
|
|
* @param sy Y coordinate of the source's upper left
|
|
* corner
|
|
* @param sw source image width
|
|
* @param sh source image height
|
|
* @param dx X coordinate of the destination's upper
|
|
* left corner
|
|
* @param dy Y coordinate of the destination's upper
|
|
* left corner
|
|
* @param dw destination image width
|
|
* @param dh destination image height
|
|
* @param blendMode the blend mode. either BLEND,
|
|
* DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,
|
|
* EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
|
|
* SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
|
|
*/
|
|
declare function blend(srcImage: p5.Image, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number, blendMode: BLEND_MODE): void;
|
|
|
|
/**
|
|
* Copies a region of pixels from one image to
|
|
* another, using a specified blend mode to do the
|
|
* operation.
|
|
*
|
|
* @param sx X coordinate of the source's upper left
|
|
* corner
|
|
* @param sy Y coordinate of the source's upper left
|
|
* corner
|
|
* @param sw source image width
|
|
* @param sh source image height
|
|
* @param dx X coordinate of the destination's upper
|
|
* left corner
|
|
* @param dy Y coordinate of the destination's upper
|
|
* left corner
|
|
* @param dw destination image width
|
|
* @param dh destination image height
|
|
* @param blendMode the blend mode. either BLEND,
|
|
* DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY,
|
|
* EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
|
|
* SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
|
|
*/
|
|
declare function blend(sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number, blendMode: any): void;
|
|
|
|
/**
|
|
* Copies a region of the canvas to another region of
|
|
* the canvas and copies a region of pixels from an
|
|
* image used as the srcImg parameter into the canvas
|
|
* srcImage is specified this is used as the source.
|
|
* If the source and destination regions aren't the
|
|
* same size, it will automatically resize source
|
|
* pixels to fit the specified target region.
|
|
*
|
|
* @param srcImage source image
|
|
* @param sx X coordinate of the source's upper left
|
|
* corner
|
|
* @param sy Y coordinate of the source's upper left
|
|
* corner
|
|
* @param sw source image width
|
|
* @param sh source image height
|
|
* @param dx X coordinate of the destination's upper
|
|
* left corner
|
|
* @param dy Y coordinate of the destination's upper
|
|
* left corner
|
|
* @param dw destination image width
|
|
* @param dh destination image height
|
|
*/
|
|
declare function copy(srcImage: p5.Image|p5.Element, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
|
|
|
|
/**
|
|
* Copies a region of the canvas to another region of
|
|
* the canvas and copies a region of pixels from an
|
|
* image used as the srcImg parameter into the canvas
|
|
* srcImage is specified this is used as the source.
|
|
* If the source and destination regions aren't the
|
|
* same size, it will automatically resize source
|
|
* pixels to fit the specified target region.
|
|
*
|
|
* @param sx X coordinate of the source's upper left
|
|
* corner
|
|
* @param sy Y coordinate of the source's upper left
|
|
* corner
|
|
* @param sw source image width
|
|
* @param sh source image height
|
|
* @param dx X coordinate of the destination's upper
|
|
* left corner
|
|
* @param dy Y coordinate of the destination's upper
|
|
* left corner
|
|
* @param dw destination image width
|
|
* @param dh destination image height
|
|
*/
|
|
declare function copy(sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
|
|
|
|
/**
|
|
* Applies a filter to the canvas.
|
|
*
|
|
* The presets options are:
|
|
*
|
|
*
|
|
*
|
|
* THRESHOLD Converts the image to black and white
|
|
* pixels depending if they are above or below the
|
|
* threshold defined by the level parameter. The
|
|
* parameter must be between 0.0 (black) and 1.0
|
|
* (white). If no level is specified, 0.5 is used.
|
|
*
|
|
*
|
|
*
|
|
* GRAY Converts any colors in the image to grayscale
|
|
* equivalents. No parameter is used.
|
|
*
|
|
*
|
|
*
|
|
* OPAQUE Sets the alpha channel to entirely opaque.
|
|
* No parameter is used.
|
|
*
|
|
*
|
|
*
|
|
* INVERT Sets each pixel to its inverse value. No
|
|
* parameter is used.
|
|
*
|
|
*
|
|
*
|
|
* POSTERIZE Limits each channel of the image to the
|
|
* number of colors specified as the parameter. The
|
|
* parameter can be set to values between 2 and 255,
|
|
* but results are most noticeable in the lower
|
|
* ranges.
|
|
*
|
|
*
|
|
*
|
|
* BLUR Executes a Gaussian blur with the level
|
|
* parameter specifying the extent of the blurring.
|
|
* If no parameter is used, the blur is equivalent to
|
|
* Gaussian blur of radius 1. Larger values increase
|
|
* the blur.
|
|
*
|
|
*
|
|
*
|
|
* ERODE Reduces the light areas. No parameter is
|
|
* used.
|
|
*
|
|
*
|
|
*
|
|
* DILATE Increases the light areas. No parameter is
|
|
* used.
|
|
*
|
|
* @param filterType either THRESHOLD, GRAY, OPAQUE,
|
|
* INVERT, POSTERIZE, BLUR, ERODE, DILATE or BLUR.
|
|
* See Filters.js for docs on each available filter
|
|
* @param [filterParam] an optional parameter unique
|
|
* to each filter, see above
|
|
*/
|
|
declare function filter(filterType: FILTER_TYPE, filterParam?: number): void;
|
|
|
|
/**
|
|
* Returns an array of [R,G,B,A] values for any pixel
|
|
* or grabs a section of an image. If no parameters
|
|
* are specified, the entire image is returned. Use
|
|
* the x and y parameters to get the value of one
|
|
* pixel. Get a section of the display window by
|
|
* specifying additional w and h parameters. When
|
|
* getting an image, the x and y parameters define
|
|
* the coordinates for the upper-left corner of the
|
|
* image, regardless of the current imageMode(). If
|
|
* the pixel requested is outside of the image
|
|
* window, [0,0,0,255] is returned. To get the
|
|
* numbers scaled according to the current color
|
|
* ranges and taking into account colorMode, use
|
|
* getColor instead of get.
|
|
*
|
|
*
|
|
* Getting the color of a single pixel with get(x, y)
|
|
* is easy, but not as fast as grabbing the data
|
|
* directly from pixels[]. The equivalent statement
|
|
* to get(x, y) using pixels[] with pixel density d
|
|
* is var x, y, d; // set these to the coordinates
|
|
* var off = (y width + x) d * 4; var components =
|
|
* [ pixels[off], pixels[off + 1], pixels[off + 2],
|
|
* pixels[off + 3] ]; print(components);
|
|
*
|
|
*
|
|
* See the reference for pixels[] for more
|
|
* information.
|
|
*
|
|
* @param [x] x-coordinate of the pixel
|
|
* @param [y] y-coordinate of the pixel
|
|
* @param [w] width
|
|
* @param [h] height
|
|
* @return values of pixel at x,y in array format [R,
|
|
* G, B, A] or p5.Image
|
|
*/
|
|
declare function get(x?: number, y?: number, w?: number, h?: number): number[]|p5.Image;
|
|
|
|
/**
|
|
* Loads the pixel data for the display window into
|
|
* the pixels[] array. This function must always be
|
|
* called before reading from or writing to pixels[].
|
|
* Note that only changes made with set() or direct
|
|
* manipulation of pixels[] will occur.
|
|
*
|
|
*/
|
|
declare function loadPixels(): void;
|
|
|
|
/**
|
|
* Changes the color of any pixel, or writes an image
|
|
* directly to the display window. The x and y
|
|
* parameters specify the pixel to change and the c
|
|
* parameter specifies the color value. This can be a
|
|
* p5.Color object, or [R, G, B, A] pixel array. It
|
|
* can also be a single grayscale value. When setting
|
|
* an image, the x and y parameters define the
|
|
* coordinates for the upper-left corner of the
|
|
* image, regardless of the current imageMode().
|
|
*
|
|
*
|
|
* After using set(), you must call updatePixels()
|
|
* for your changes to appear. This should be called
|
|
* once all pixels have been set, and must be called
|
|
* before calling .get() or drawing the image.
|
|
*
|
|
* Setting the color of a single pixel with set(x, y)
|
|
* is easy, but not as fast as putting the data
|
|
* directly into pixels[]. Setting the pixels[]
|
|
* values directly may be complicated when working
|
|
* with a retina display, but will perform better
|
|
* when lots of pixels need to be set directly on
|
|
* every loop.
|
|
*
|
|
* See the reference for pixels[] for more
|
|
* information.
|
|
*
|
|
* @param x x-coordinate of the pixel
|
|
* @param y y-coordinate of the pixel
|
|
* @param c insert a grayscale value | a pixel array
|
|
* | a p5.Color object | a p5.Image to copy
|
|
*/
|
|
declare function set(x: number, y: number, c: number|number[]|object): void;
|
|
|
|
/**
|
|
* Updates the display window with the data in the
|
|
* pixels[] array. Use in conjunction with
|
|
* loadPixels(). If you're only reading pixels from
|
|
* the array, there's no need to call updatePixels()
|
|
* — updating is only necessary to apply changes.
|
|
* updatePixels() should be called anytime the pixels
|
|
* array is manipulated or set() is called, and only
|
|
* changes made with set() or direct changes to
|
|
* pixels[] will occur.
|
|
*
|
|
* @param [x] x-coordinate of the upper-left corner
|
|
* of region to update
|
|
* @param [y] y-coordinate of the upper-left corner
|
|
* of region to update
|
|
* @param [w] width of region to update
|
|
* @param [h] height of region to update
|
|
*/
|
|
declare function updatePixels(x?: number, y?: number, w?: number, h?: number): void;
|
|
|
|
// src/io/files.js
|
|
|
|
/**
|
|
* Loads a JSON file from a file or a URL, and
|
|
* returns an Object. Note that even if the JSON file
|
|
* contains an Array, an Object will be returned with
|
|
* index numbers as keys. This method is
|
|
* asynchronous, meaning it may not finish before the
|
|
* next line in your sketch is executed. JSONP is
|
|
* supported via a polyfill and you can pass in as
|
|
* the second argument an object with definitions of
|
|
* the json callback following the syntax specified
|
|
* here.
|
|
*
|
|
* @param path name of the file or url to load
|
|
* @param [jsonpOptions] options object for jsonp
|
|
* related settings
|
|
* @param [datatype] "json" or "jsonp"
|
|
* @param [callback] function to be executed after
|
|
* loadJSON() completes, data is passed in as first
|
|
* argument
|
|
* @param [errorCallback] function to be executed if
|
|
* there is an error, response is passed in as first
|
|
* argument
|
|
* @return JSON data
|
|
*/
|
|
declare function loadJSON(path: string, jsonpOptions?: object, datatype?: string, callback?: Function, errorCallback?: Function): object|any[];
|
|
|
|
/**
|
|
* Reads the contents of a file and creates a String
|
|
* array of its individual lines. If the name of the
|
|
* file is used as the parameter, as in the above
|
|
* example, the file must be located in the sketch
|
|
* directory/folder. Alternatively, the file maybe
|
|
* be loaded from anywhere on the local computer
|
|
* using an absolute path (something that starts with
|
|
* / on Unix and Linux, or a drive letter on
|
|
* Windows), or the filename parameter can be a URL
|
|
* for a file found on a network.
|
|
*
|
|
*
|
|
* This method is asynchronous, meaning it may not
|
|
* finish before the next line in your sketch is
|
|
* executed.
|
|
*
|
|
* @param filename name of the file or url to load
|
|
* @param [callback] function to be executed after
|
|
* loadStrings() completes, Array is passed in as
|
|
* first argument
|
|
* @param [errorCallback] function to be executed if
|
|
* there is an error, response is passed in as first
|
|
* argument
|
|
* @return Array of Strings
|
|
*/
|
|
declare function loadStrings(filename: string, callback?: Function, errorCallback?: Function): string[];
|
|
|
|
/**
|
|
* Reads the contents of a file or URL and creates a
|
|
* p5.Table object with its values. If a file is
|
|
* specified, it must be located in the sketch's
|
|
* "data" folder. The filename parameter can also be
|
|
* a URL to a file found online. By default, the file
|
|
* is assumed to be comma-separated (in CSV format).
|
|
* Table only looks for a header row if the 'header'
|
|
* option is included. Possible options include:
|
|
*
|
|
* - csv - parse the table as comma-separated values
|
|
* - tsv - parse the table as tab-separated values
|
|
* - header - this table has a header (title) row
|
|
*
|
|
* When passing in multiple options, pass them in as
|
|
* separate parameters, seperated by commas. For
|
|
* example:
|
|
*
|
|
*
|
|
* loadTable('my_csv_file.csv', 'csv', 'header');
|
|
*
|
|
*
|
|
* All files loaded and saved use UTF-8 encoding.
|
|
*
|
|
* This method is asynchronous, meaning it may not
|
|
* finish before the next line in your sketch is
|
|
* executed. Calling loadTable() inside preload()
|
|
* guarantees to complete the operation before
|
|
* setup() and draw() are called.
|
|
*
|
|
* Outside of preload(), you may supply a callback
|
|
* function to handle the object:
|
|
*
|
|
* @param filename name of the file or URL to load
|
|
* @param options "header" "csv" "tsv"
|
|
* @param [callback] function to be executed after
|
|
* loadTable() completes. On success, the Table
|
|
* object is passed in as the first argument.
|
|
* @param [errorCallback] function to be executed if
|
|
* there is an error, response is passed in as first
|
|
* argument
|
|
* @return Table object containing data
|
|
*/
|
|
declare function loadTable(filename: string, options: string, callback?: Function, errorCallback?: Function): object;
|
|
|
|
/**
|
|
* Reads the contents of a file or URL and creates a
|
|
* p5.Table object with its values. If a file is
|
|
* specified, it must be located in the sketch's
|
|
* "data" folder. The filename parameter can also be
|
|
* a URL to a file found online. By default, the file
|
|
* is assumed to be comma-separated (in CSV format).
|
|
* Table only looks for a header row if the 'header'
|
|
* option is included. Possible options include:
|
|
*
|
|
* - csv - parse the table as comma-separated values
|
|
* - tsv - parse the table as tab-separated values
|
|
* - header - this table has a header (title) row
|
|
*
|
|
* When passing in multiple options, pass them in as
|
|
* separate parameters, seperated by commas. For
|
|
* example:
|
|
*
|
|
*
|
|
* loadTable('my_csv_file.csv', 'csv', 'header');
|
|
*
|
|
*
|
|
* All files loaded and saved use UTF-8 encoding.
|
|
*
|
|
* This method is asynchronous, meaning it may not
|
|
* finish before the next line in your sketch is
|
|
* executed. Calling loadTable() inside preload()
|
|
* guarantees to complete the operation before
|
|
* setup() and draw() are called.
|
|
*
|
|
* Outside of preload(), you may supply a callback
|
|
* function to handle the object:
|
|
*
|
|
* @param filename name of the file or URL to load
|
|
* @param [callback] function to be executed after
|
|
* loadTable() completes. On success, the Table
|
|
* object is passed in as the first argument.
|
|
* @param [errorCallback] function to be executed if
|
|
* there is an error, response is passed in as first
|
|
* argument
|
|
*/
|
|
declare function loadTable(filename: string, callback?: Function, errorCallback?: Function): object;
|
|
|
|
/**
|
|
* Reads the contents of a file and creates an XML
|
|
* object with its values. If the name of the file is
|
|
* used as the parameter, as in the above example,
|
|
* the file must be located in the sketch
|
|
* directory/folder. Alternatively, the file maybe be
|
|
* loaded from anywhere on the local computer using
|
|
* an absolute path (something that starts with / on
|
|
* Unix and Linux, or a drive letter on Windows), or
|
|
* the filename parameter can be a URL for a file
|
|
* found on a network.
|
|
*
|
|
* This method is asynchronous, meaning it may not
|
|
* finish before the next line in your sketch is
|
|
* executed. Calling loadXML() inside preload()
|
|
* guarantees to complete the operation before
|
|
* setup() and draw() are called.
|
|
*
|
|
* Outside of preload(), you may supply a callback
|
|
* function to handle the object.
|
|
*
|
|
* @param filename name of the file or URL to load
|
|
* @param [callback] function to be executed after
|
|
* loadXML() completes, XML object is passed in as
|
|
* first argument
|
|
* @param [errorCallback] function to be executed if
|
|
* there is an error, response is passed in as first
|
|
* argument
|
|
* @return XML object containing data
|
|
*/
|
|
declare function loadXML(filename: string, callback?: Function, errorCallback?: Function): object;
|
|
|
|
/**
|
|
* Method for executing an HTTP GET request. If data
|
|
* type is not specified, p5 will try to guess based
|
|
* on the URL, defaulting to text. This is equivalent
|
|
* to calling httpDo(path, 'GET').
|
|
*
|
|
* @param path name of the file or url to load
|
|
* @param [datatype] "json", "jsonp", "xml", or
|
|
* "text"
|
|
* @param [data] param data passed sent with request
|
|
* @param [callback] function to be executed after
|
|
* httpGet() completes, data is passed in as first
|
|
* argument
|
|
* @param [errorCallback] function to be executed if
|
|
* there is an error, response is passed in as first
|
|
* argument
|
|
*/
|
|
declare function httpGet(path: string, datatype?: string, data?: object, callback?: Function, errorCallback?: Function): void;
|
|
|
|
/**
|
|
* Method for executing an HTTP POST request. If data
|
|
* type is not specified, p5 will try to guess based
|
|
* on the URL, defaulting to text. This is equivalent
|
|
* to calling httpDo(path, 'POST').
|
|
*
|
|
* @param path name of the file or url to load
|
|
* @param [datatype] "json", "jsonp", "xml", or
|
|
* "text". If omitted, httpPost() will guess.
|
|
* @param [data] param data passed sent with request
|
|
* @param [callback] function to be executed after
|
|
* httpPost() completes, data is passed in as first
|
|
* argument
|
|
* @param [errorCallback] function to be executed if
|
|
* there is an error, response is passed in as first
|
|
* argument
|
|
*/
|
|
declare function httpPost(path: string, datatype?: string, data?: object, callback?: Function, errorCallback?: Function): void;
|
|
|
|
/**
|
|
* Method for executing an HTTP request. If data type
|
|
* is not specified, p5 will try to guess based on
|
|
* the URL, defaulting to text. For more advanced
|
|
* use, you may also pass in the path as the first
|
|
* argument and a object as the second argument, the
|
|
* signature follows the one specified in the Fetch
|
|
* API specification.
|
|
*
|
|
* @param path name of the file or url to load
|
|
* @param [method] either "GET", "POST", or "PUT",
|
|
* defaults to "GET"
|
|
* @param [datatype] "json", "jsonp", "xml", or
|
|
* "text"
|
|
* @param [data] param data passed sent with request
|
|
* @param [callback] function to be executed after
|
|
* httpGet() completes, data is passed in as first
|
|
* argument
|
|
* @param [errorCallback] function to be executed if
|
|
* there is an error, response is passed in as first
|
|
* argument
|
|
*/
|
|
declare function httpDo(path: string, method?: string, datatype?: string, data?: object, callback?: Function, errorCallback?: Function): void;
|
|
|
|
/**
|
|
* Method for executing an HTTP request. If data type
|
|
* is not specified, p5 will try to guess based on
|
|
* the URL, defaulting to text. For more advanced
|
|
* use, you may also pass in the path as the first
|
|
* argument and a object as the second argument, the
|
|
* signature follows the one specified in the Fetch
|
|
* API specification.
|
|
*
|
|
* @param path name of the file or url to load
|
|
* @param options Request object options as
|
|
* documented in the "fetch" API reference
|
|
* @param [callback] function to be executed after
|
|
* httpGet() completes, data is passed in as first
|
|
* argument
|
|
* @param [errorCallback] function to be executed if
|
|
* there is an error, response is passed in as first
|
|
* argument
|
|
*/
|
|
declare function httpDo(path: string, options: object, callback?: Function, errorCallback?: Function): void;
|
|
declare function createWriter(name: string, extension?: string): p5.PrintWriter;
|
|
|
|
/**
|
|
* Save an image, text, json, csv, wav, or html.
|
|
* Prompts download to the client's computer. Note
|
|
* that it is not recommended to call save() within
|
|
* draw if it's looping, as the save() function will
|
|
* open a new save dialog every frame. The default
|
|
* behavior is to save the canvas as an image. You
|
|
* can optionally specify a filename. For example:
|
|
*
|
|
*
|
|
* save(); save('myCanvas.jpg'); // save a specific
|
|
* canvas with a filename
|
|
*
|
|
* Alternately, the first parameter can be a pointer
|
|
* to a canvas p5.Element, an Array of Strings, an
|
|
* Array of JSON, a JSON object, a p5.Table, a
|
|
* p5.Image, or a p5.SoundFile (requires p5.sound).
|
|
* The second parameter is a filename (including
|
|
* extension). The third parameter is for options
|
|
* specific to this type of object. This method will
|
|
* save a file that fits the given paramaters. For
|
|
* example:
|
|
*
|
|
*
|
|
* // Saves canvas as an image save('myCanvas.jpg');
|
|
* // Saves pImage as a png image var img =
|
|
* createImage(10, 10); save(img, 'my.png'); // Saves
|
|
* canvas as an image var cnv = createCanvas(100,
|
|
* 100); save(cnv, 'myCanvas.jpg'); // Saves
|
|
* p5.Renderer object as an image var gb =
|
|
* createGraphics(100, 100); save(gb,
|
|
* 'myGraphics.jpg'); var myTable = new p5.Table();
|
|
* // Saves table as html file save(myTable,
|
|
* 'myTable.html'); // Comma Separated Values
|
|
* save(myTable, 'myTable.csv'); // Tab Separated
|
|
* Values save(myTable, 'myTable.tsv'); var myJSON =
|
|
* { a: 1, b: true }; // Saves pretty JSON
|
|
* save(myJSON, 'my.json'); // Optimizes JSON
|
|
* filesize save(myJSON, 'my.json', true); // Saves
|
|
* array of strings to a text file with line breaks
|
|
* after each item var arrayOfStrings = ['a', 'b'];
|
|
* save(arrayOfStrings, 'my.txt');
|
|
*
|
|
* @param [objectOrFilename] If filename is provided,
|
|
* will save canvas as an image with either png or
|
|
* jpg extension depending on the filename. If object
|
|
* is provided, will save depending on the object and
|
|
* filename (see examples above).
|
|
* @param [filename] If an object is provided as the
|
|
* first parameter, then the second parameter
|
|
* indicates the filename, and should include an
|
|
* appropriate file extension (see examples above).
|
|
* @param [options] Additional options depend on
|
|
* filetype. For example, when saving JSON, true
|
|
* indicates that the output will be optimized for
|
|
* filesize, rather than readability.
|
|
*/
|
|
declare function save(objectOrFilename?: object|string, filename?: string, options?: boolean|string): void;
|
|
|
|
/**
|
|
* Writes the contents of an Array or a JSON object
|
|
* to a .json file. The file saving process and
|
|
* location of the saved file will vary between web
|
|
* browsers.
|
|
*
|
|
* @param [optimize] If true, removes line breaks and
|
|
* spaces from the output file to optimize filesize
|
|
* (but not readability).
|
|
*/
|
|
declare function saveJSON(json: any[]|object, filename: string, optimize?: boolean): void;
|
|
|
|
/**
|
|
* Writes an array of Strings to a text file, one
|
|
* line per String. The file saving process and
|
|
* location of the saved file will vary between web
|
|
* browsers.
|
|
*
|
|
* @param list string array to be written
|
|
* @param filename filename for output
|
|
* @param [extension] the filename's extension
|
|
*/
|
|
declare function saveStrings(list: string[], filename: string, extension?: string): void;
|
|
|
|
/**
|
|
* Writes the contents of a Table object to a file.
|
|
* Defaults to a text file with
|
|
* comma-separated-values ('csv') but can also use
|
|
* tab separation ('tsv'), or generate an HTML table
|
|
* ('html'). The file saving process and location of
|
|
* the saved file will vary between web browsers.
|
|
*
|
|
* @param Table the Table object to save to a file
|
|
* @param filename the filename to which the Table
|
|
* should be saved
|
|
* @param [options] can be one of "tsv", "csv", or
|
|
* "html"
|
|
*/
|
|
declare function saveTable(Table: p5.Table, filename: string, options?: string): void;
|
|
|
|
// src/math/calculation.js
|
|
|
|
/**
|
|
* Calculates the absolute value (magnitude) of a
|
|
* number. Maps to Math.abs(). The absolute value of
|
|
* a number is always positive.
|
|
*
|
|
* @param n number to compute
|
|
* @return absolute value of given number
|
|
*/
|
|
declare function abs(n: number): number;
|
|
|
|
/**
|
|
* Calculates the closest int value that is greater
|
|
* than or equal to the value of the parameter. Maps
|
|
* to Math.ceil(). For example, ceil(9.03) returns
|
|
* the value 10.
|
|
*
|
|
* @param n number to round up
|
|
* @return rounded up number
|
|
*/
|
|
declare function ceil(n: number): number;
|
|
|
|
/**
|
|
* Constrains a value between a minimum and maximum
|
|
* value.
|
|
*
|
|
* @param n number to constrain
|
|
* @param low minimum limit
|
|
* @param high maximum limit
|
|
* @return constrained number
|
|
*/
|
|
declare function constrain(n: number, low: number, high: number): number;
|
|
|
|
/**
|
|
* Calculates the distance between two points.
|
|
*
|
|
* @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
|
|
* @return distance between the two points
|
|
*/
|
|
declare function dist(x1: number, y1: number, x2: number, y2: number): number;
|
|
|
|
/**
|
|
* Calculates the distance between two points.
|
|
*
|
|
* @param x1 x-coordinate of the first point
|
|
* @param y1 y-coordinate of the first point
|
|
* @param z1 z-coordinate of the first point
|
|
* @param x2 x-coordinate of the second point
|
|
* @param y2 y-coordinate of the second point
|
|
* @param z2 z-coordinate of the second point
|
|
* @return distance between the two points
|
|
*/
|
|
declare function dist(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number): number;
|
|
|
|
/**
|
|
* Returns Euler's number e (2.71828...) raised to
|
|
* the power of the n parameter. Maps to Math.exp().
|
|
*
|
|
* @param n exponent to raise
|
|
* @return e^n
|
|
*/
|
|
declare function exp(n: number): number;
|
|
|
|
/**
|
|
* Calculates the closest int value that is less than
|
|
* or equal to the value of the parameter. Maps to
|
|
* Math.floor().
|
|
*
|
|
* @param n number to round down
|
|
* @return rounded down number
|
|
*/
|
|
declare function floor(n: number): number;
|
|
|
|
/**
|
|
* Calculates a number between two numbers at a
|
|
* specific increment. The amt parameter is the
|
|
* amount to interpolate between the two values where
|
|
* 0.0 equal to the first point, 0.1 is very near the
|
|
* first point, 0.5 is half-way in between, etc. The
|
|
* lerp function is convenient for creating motion
|
|
* along a straight path and for drawing dotted
|
|
* lines.
|
|
*
|
|
* @param start first value
|
|
* @param stop second value
|
|
* @param amt number between 0.0 and 1.0
|
|
* @return lerped value
|
|
*/
|
|
declare function lerp(start: number, stop: number, amt: number): number;
|
|
|
|
/**
|
|
* Calculates the natural logarithm (the base-e
|
|
* logarithm) of a number. This function expects the
|
|
* n parameter to be a value greater than 0.0. Maps
|
|
* to Math.log().
|
|
*
|
|
* @param n number greater than 0
|
|
* @return natural logarithm of n
|
|
*/
|
|
declare function log(n: number): number;
|
|
|
|
/**
|
|
* Calculates the magnitude (or length) of a vector.
|
|
* A vector is a direction in space commonly used in
|
|
* computer graphics and linear algebra. Because it
|
|
* has no "start" position, the magnitude of a vector
|
|
* can be thought of as the distance from the
|
|
* coordinate 0,0 to its x,y value. Therefore, mag()
|
|
* is a shortcut for writing dist(0, 0, x, y).
|
|
*
|
|
* @param a first value
|
|
* @param b second value
|
|
* @return magnitude of vector from (0,0) to (a,b)
|
|
*/
|
|
declare function mag(a: number, b: number): number;
|
|
|
|
/**
|
|
* Re-maps a number from one range to another. In
|
|
* the first example above, the number 25 is
|
|
* converted from a value in the range of 0 to 100
|
|
* into a value that ranges from the left edge of the
|
|
* window (0) to the right edge (width).
|
|
*
|
|
* @param value the incoming value to be converted
|
|
* @param start1 lower bound of the value's current
|
|
* range
|
|
* @param stop1 upper bound of the value's current
|
|
* range
|
|
* @param start2 lower bound of the value's target
|
|
* range
|
|
* @param stop2 upper bound of the value's target
|
|
* range
|
|
* @param [withinBounds] constrain the value to the
|
|
* newly mapped range
|
|
* @return remapped number
|
|
*/
|
|
declare function map(value: number, start1: number, stop1: number, start2: number, stop2: number, withinBounds?: boolean): number;
|
|
|
|
/**
|
|
* Determines the largest value in a sequence of
|
|
* numbers, and then returns that value. max()
|
|
* accepts any number of Number parameters, or an
|
|
* Array of any length.
|
|
*
|
|
* @param n0 Number to compare
|
|
* @param n1 Number to compare
|
|
* @return maximum Number
|
|
*/
|
|
declare function max(n0: number, n1: number): number;
|
|
|
|
/**
|
|
* Determines the largest value in a sequence of
|
|
* numbers, and then returns that value. max()
|
|
* accepts any number of Number parameters, or an
|
|
* Array of any length.
|
|
*
|
|
* @param nums Numbers to compare
|
|
*/
|
|
declare function max(nums: number[]): number;
|
|
|
|
/**
|
|
* Determines the smallest value in a sequence of
|
|
* numbers, and then returns that value. min()
|
|
* accepts any number of Number parameters, or an
|
|
* Array of any length.
|
|
*
|
|
* @param n0 Number to compare
|
|
* @param n1 Number to compare
|
|
* @return minimum Number
|
|
*/
|
|
declare function min(n0: number, n1: number): number;
|
|
|
|
/**
|
|
* Determines the smallest value in a sequence of
|
|
* numbers, and then returns that value. min()
|
|
* accepts any number of Number parameters, or an
|
|
* Array of any length.
|
|
*
|
|
* @param nums Numbers to compare
|
|
*/
|
|
declare function min(nums: number[]): number;
|
|
|
|
/**
|
|
* Normalizes a number from another range into a
|
|
* value between 0 and 1. Identical to map(value,
|
|
* low, high, 0, 1). Numbers outside of the range are
|
|
* not clamped to 0 and 1, because out-of-range
|
|
* values are often intentional and useful. (See the
|
|
* second example above.)
|
|
*
|
|
* @param value incoming value to be normalized
|
|
* @param start lower bound of the value's current
|
|
* range
|
|
* @param stop upper bound of the value's current
|
|
* range
|
|
* @return normalized number
|
|
*/
|
|
declare function norm(value: number, start: number, stop: number): number;
|
|
|
|
/**
|
|
* Facilitates exponential expressions. The pow()
|
|
* function is an efficient way of multiplying
|
|
* numbers by themselves (or their reciprocals) in
|
|
* large quantities. For example, pow(3, 5) is
|
|
* equivalent to the expression 33333 and pow(3, -5)
|
|
* is equivalent to 1 / 33333. Maps to Math.pow().
|
|
*
|
|
* @param n base of the exponential expression
|
|
* @param e power by which to raise the base
|
|
* @return n^e
|
|
*/
|
|
declare function pow(n: number, e: number): number;
|
|
|
|
/**
|
|
* Calculates the integer closest to the n parameter.
|
|
* For example, round(133.8) returns the value 134.
|
|
* Maps to Math.round().
|
|
*
|
|
* @param n number to round
|
|
* @return rounded number
|
|
*/
|
|
declare function round(n: number): number;
|
|
|
|
/**
|
|
* Squares a number (multiplies a number by itself).
|
|
* The result is always a positive number, as
|
|
* multiplying two negative numbers always yields a
|
|
* positive result. For example, -1 * -1 = 1.
|
|
*
|
|
* @param n number to square
|
|
* @return squared number
|
|
*/
|
|
declare function sq(n: number): number;
|
|
|
|
/**
|
|
* Calculates the square root of a number. The square
|
|
* root of a number is always positive, even though
|
|
* there may be a valid negative root. The square
|
|
* root s of number a is such that s*s = a. It is the
|
|
* opposite of squaring. Maps to Math.sqrt().
|
|
*
|
|
* @param n non-negative number to square root
|
|
* @return square root of number
|
|
*/
|
|
declare function sqrt(n: number): number;
|
|
|
|
// src/math/math.js
|
|
|
|
/**
|
|
* Creates a new p5.Vector (the datatype for storing
|
|
* vectors). This provides a two or three dimensional
|
|
* vector, specifically a Euclidean (also known as
|
|
* geometric) vector. A vector is an entity that has
|
|
* both magnitude and direction.
|
|
*
|
|
* @param [x] x component of the vector
|
|
* @param [y] y component of the vector
|
|
* @param [z] z component of the vector
|
|
*/
|
|
declare function createVector(x?: number, y?: number, z?: number): p5.Vector;
|
|
|
|
// src/math/noise.js
|
|
|
|
/**
|
|
* Returns the Perlin noise value at specified
|
|
* coordinates. Perlin noise is a random sequence
|
|
* generator producing a more natural ordered,
|
|
* harmonic succession of numbers compared to the
|
|
* standard random() function. It was invented by Ken
|
|
* Perlin in the 1980s and been used since in
|
|
* graphical applications to produce procedural
|
|
* textures, natural motion, shapes, terrains etc.
|
|
* The main difference to the random() function is
|
|
* that Perlin noise is defined in an infinite
|
|
* n-dimensional space where each pair of coordinates
|
|
* corresponds to a fixed semi-random value (fixed
|
|
* only for the lifespan of the program; see the
|
|
* noiseSeed() function). p5.js can compute 1D, 2D
|
|
* and 3D noise, depending on the number of
|
|
* coordinates given. The resulting value will always
|
|
* be between 0.0 and 1.0. The noise value can be
|
|
* animated by moving through the noise space as
|
|
* demonstrated in the example above. The 2nd and 3rd
|
|
* dimension can also be interpreted as time.
|
|
*
|
|
* The actual noise is structured similar to an audio
|
|
* signal, in respect to the function's use of
|
|
* frequencies. Similar to the concept of harmonics
|
|
* in physics, perlin noise is computed over several
|
|
* octaves which are added together for the final
|
|
* result.
|
|
*
|
|
* Another way to adjust the character of the
|
|
* resulting sequence is the scale of the input
|
|
* coordinates. As the function works within an
|
|
* infinite space the value of the coordinates
|
|
* doesn't matter as such, only the distance between
|
|
* successive coordinates does (eg. when using
|
|
* noise() within a loop). As a general rule the
|
|
* smaller the difference between coordinates, the
|
|
* smoother the resulting noise sequence will be.
|
|
* Steps of 0.005-0.03 work best for most
|
|
* applications, but this will differ depending on
|
|
* use.
|
|
*
|
|
* @param x x-coordinate in noise space
|
|
* @param [y] y-coordinate in noise space
|
|
* @param [z] z-coordinate in noise space
|
|
* @return Perlin noise value (between 0 and 1) at
|
|
* specified coordinates
|
|
*/
|
|
declare function noise(x: number, y?: number, z?: number): number;
|
|
|
|
/**
|
|
* Adjusts the character and level of detail produced
|
|
* by the Perlin noise function. Similar to harmonics
|
|
* in physics, noise is computed over several
|
|
* octaves. Lower octaves contribute more to the
|
|
* output signal and as such define the overall
|
|
* intensity of the noise, whereas higher octaves
|
|
* create finer grained details in the noise
|
|
* sequence. By default, noise is computed over 4
|
|
* octaves with each octave contributing exactly half
|
|
* than its predecessor, starting at 50% strength for
|
|
* the 1st octave. This falloff amount can be changed
|
|
* by adding an additional function parameter. Eg. a
|
|
* falloff factor of 0.75 means each octave will now
|
|
* have 75% impact (25% less) of the previous lower
|
|
* octave. Any value between 0.0 and 1.0 is valid,
|
|
* however note that values greater than 0.5 might
|
|
* result in greater than 1.0 values returned by
|
|
* noise().
|
|
*
|
|
*
|
|
* By changing these parameters, the signal created
|
|
* by the noise() function can be adapted to fit very
|
|
* specific needs and characteristics.
|
|
*
|
|
* @param lod number of octaves to be used by the
|
|
* noise
|
|
* @param falloff falloff factor for each octave
|
|
*/
|
|
declare function noiseDetail(lod: number, falloff: number): void;
|
|
|
|
/**
|
|
* Sets the seed value for noise(). By default,
|
|
* noise() produces different results each time the
|
|
* program is run. Set the value parameter to a
|
|
* constant to return the same pseudo-random numbers
|
|
* each time the software is run.
|
|
*
|
|
* @param seed the seed value
|
|
*/
|
|
declare function noiseSeed(seed: number): void;
|
|
|
|
// src/math/random.js
|
|
|
|
/**
|
|
* Sets the seed value for random(). By default,
|
|
* random() produces different results each time the
|
|
* program is run. Set the seed parameter to a
|
|
* constant to return the same pseudo-random numbers
|
|
* each time the software is run.
|
|
*
|
|
* @param seed the seed value
|
|
*/
|
|
declare function randomSeed(seed: number): void;
|
|
|
|
/**
|
|
* Return a random floating-point number. Takes
|
|
* either 0, 1 or 2 arguments.
|
|
*
|
|
* If no argument is given, returns a random number
|
|
* from 0 up to (but not including) 1.
|
|
*
|
|
* If one argument is given and it is a number,
|
|
* returns a random number from 0 up to (but not
|
|
* including) the number.
|
|
*
|
|
* If one argument is given and it is an array,
|
|
* returns a random element from that array.
|
|
*
|
|
* If two arguments are given, returns a random
|
|
* number from the first argument up to (but not
|
|
* including) the second argument.
|
|
*
|
|
* @param [min] the lower bound (inclusive)
|
|
* @param [max] the upper bound (exclusive)
|
|
* @return the random number
|
|
*/
|
|
declare function random(min?: number, max?: number): number;
|
|
|
|
/**
|
|
* Return a random floating-point number. Takes
|
|
* either 0, 1 or 2 arguments.
|
|
*
|
|
* If no argument is given, returns a random number
|
|
* from 0 up to (but not including) 1.
|
|
*
|
|
* If one argument is given and it is a number,
|
|
* returns a random number from 0 up to (but not
|
|
* including) the number.
|
|
*
|
|
* If one argument is given and it is an array,
|
|
* returns a random element from that array.
|
|
*
|
|
* If two arguments are given, returns a random
|
|
* number from the first argument up to (but not
|
|
* including) the second argument.
|
|
*
|
|
* @param choices the array to choose from
|
|
* @return the random element from the array
|
|
*/
|
|
declare function random(choices: any[]): any;
|
|
|
|
/**
|
|
* Returns a random number fitting a Gaussian, or
|
|
* normal, distribution. There is theoretically no
|
|
* minimum or maximum value that randomGaussian()
|
|
* might return. Rather, there is just a very low
|
|
* probability that values far from the mean will be
|
|
* returned; and a higher probability that numbers
|
|
* near the mean will be returned. Takes either 0, 1
|
|
* or 2 arguments.
|
|
*
|
|
* If no args, returns a mean of 0 and standard
|
|
* deviation of 1.
|
|
*
|
|
* If one arg, that arg is the mean (standard
|
|
* deviation is 1).
|
|
*
|
|
* If two args, first is mean, second is standard
|
|
* deviation.
|
|
*
|
|
* @param mean the mean
|
|
* @param sd the standard deviation
|
|
* @return the random number
|
|
*/
|
|
declare function randomGaussian(mean: number, sd: number): number;
|
|
|
|
// src/math/trigonometry.js
|
|
|
|
/**
|
|
* The inverse of cos(), returns the arc cosine of a
|
|
* value. This function expects the values in the
|
|
* range of -1 to 1 and values are returned in the
|
|
* range 0 to PI (3.1415927).
|
|
*
|
|
* @param value the value whose arc cosine is to be
|
|
* returned
|
|
* @return the arc cosine of the given value
|
|
*/
|
|
declare function acos(value: number): number;
|
|
|
|
/**
|
|
* The inverse of sin(), returns the arc sine of a
|
|
* value. This function expects the values in the
|
|
* range of -1 to 1 and values are returned in the
|
|
* range -PI/2 to PI/2.
|
|
*
|
|
* @param value the value whose arc sine is to be
|
|
* returned
|
|
* @return the arc sine of the given value
|
|
*/
|
|
declare function asin(value: number): number;
|
|
|
|
/**
|
|
* The inverse of tan(), returns the arc tangent of a
|
|
* value. This function expects the values in the
|
|
* range of -Infinity to Infinity (exclusive) and
|
|
* values are returned in the range -PI/2 to PI/2.
|
|
*
|
|
* @param value the value whose arc tangent is to be
|
|
* returned
|
|
* @return the arc tangent of the given value
|
|
*/
|
|
declare function atan(value: number): number;
|
|
|
|
/**
|
|
* Calculates the angle (in radians) from a specified
|
|
* point to the coordinate origin as measured from
|
|
* the positive x-axis. Values are returned as a
|
|
* float in the range from PI to -PI. The atan2()
|
|
* function is most often used for orienting geometry
|
|
* to the position of the cursor. Note: The
|
|
* y-coordinate of the point is the first parameter,
|
|
* and the x-coordinate is the second parameter, due
|
|
* the the structure of calculating the tangent.
|
|
*
|
|
* @param y y-coordinate of the point
|
|
* @param x x-coordinate of the point
|
|
* @return the arc tangent of the given point
|
|
*/
|
|
declare function atan2(y: number, x: number): number;
|
|
|
|
/**
|
|
* Calculates the cosine of an angle. This function
|
|
* takes into account the current angleMode. Values
|
|
* are returned in the range -1 to 1.
|
|
*
|
|
* @param angle the angle
|
|
* @return the cosine of the angle
|
|
*/
|
|
declare function cos(angle: number): number;
|
|
|
|
/**
|
|
* Calculates the sine of an angle. This function
|
|
* takes into account the current angleMode. Values
|
|
* are returned in the range -1 to 1.
|
|
*
|
|
* @param angle the angle
|
|
* @return the sine of the angle
|
|
*/
|
|
declare function sin(angle: number): number;
|
|
|
|
/**
|
|
* Calculates the tangent of an angle. This function
|
|
* takes into account the current angleMode. Values
|
|
* are returned in the range -1 to 1.
|
|
*
|
|
* @param angle the angle
|
|
* @return the tangent of the angle
|
|
*/
|
|
declare function tan(angle: number): number;
|
|
|
|
/**
|
|
* Converts a radian measurement to its corresponding
|
|
* value in degrees. Radians and degrees are two ways
|
|
* of measuring the same thing. There are 360 degrees
|
|
* in a circle and 2*PI radians in a circle. For
|
|
* example, 90° = PI/2 = 1.5707964. This function
|
|
* does not take into account the current angleMode.
|
|
*
|
|
* @param radians the radians value to convert to
|
|
* degrees
|
|
* @return the converted angle
|
|
*/
|
|
declare function degrees(radians: number): number;
|
|
|
|
/**
|
|
* Converts a degree measurement to its corresponding
|
|
* value in radians. Radians and degrees are two ways
|
|
* of measuring the same thing. There are 360 degrees
|
|
* in a circle and 2*PI radians in a circle. For
|
|
* example, 90° = PI/2 = 1.5707964. This function
|
|
* does not take into account the current angleMode.
|
|
*
|
|
* @param degrees the degree value to convert to
|
|
* radians
|
|
* @return the converted angle
|
|
*/
|
|
declare function radians(degrees: number): number;
|
|
|
|
/**
|
|
* Sets the current mode of p5 to given mode. Default
|
|
* mode is RADIANS.
|
|
*
|
|
* @param mode either RADIANS or DEGREES
|
|
*/
|
|
declare function angleMode(mode: ANGLE_MODE): void;
|
|
|
|
// src/typography/attributes.js
|
|
|
|
/**
|
|
* Sets the current alignment for drawing text.
|
|
* Accepts two arguments: horizAlign (LEFT, CENTER,
|
|
* or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or
|
|
* BASELINE). The horizAlign parameter is in
|
|
* reference to the x value of the text() function,
|
|
* while the vertAlign parameter is in reference to
|
|
* the y value.
|
|
*
|
|
* So if you write textAlign(LEFT), you are aligning
|
|
* the left edge of your text to the x value you give
|
|
* in text(). If you write textAlign(RIGHT, TOP), you
|
|
* are aligning the right edge of your text to the x
|
|
* value and the top of edge of the text to the y
|
|
* value.
|
|
*
|
|
* @param horizAlign horizontal alignment, either
|
|
* LEFT, CENTER, or RIGHT
|
|
* @param [vertAlign] vertical alignment, either TOP,
|
|
* BOTTOM, CENTER, or BASELINE
|
|
* @chainable
|
|
*/
|
|
declare function textAlign(horizAlign: HORIZ_ALIGN, vertAlign?: VERT_ALIGN): p5;
|
|
|
|
/**
|
|
* Sets the current alignment for drawing text.
|
|
* Accepts two arguments: horizAlign (LEFT, CENTER,
|
|
* or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or
|
|
* BASELINE). The horizAlign parameter is in
|
|
* reference to the x value of the text() function,
|
|
* while the vertAlign parameter is in reference to
|
|
* the y value.
|
|
*
|
|
* So if you write textAlign(LEFT), you are aligning
|
|
* the left edge of your text to the x value you give
|
|
* in text(). If you write textAlign(RIGHT, TOP), you
|
|
* are aligning the right edge of your text to the x
|
|
* value and the top of edge of the text to the y
|
|
* value.
|
|
*
|
|
*/
|
|
declare function textAlign(): object;
|
|
|
|
/**
|
|
* Sets/gets the spacing, in pixels, between lines of
|
|
* text. This setting will be used in all subsequent
|
|
* calls to the text() function.
|
|
*
|
|
* @param leading the size in pixels for spacing
|
|
* between lines
|
|
* @chainable
|
|
*/
|
|
declare function textLeading(leading: number): p5;
|
|
|
|
/**
|
|
* Sets/gets the spacing, in pixels, between lines of
|
|
* text. This setting will be used in all subsequent
|
|
* calls to the text() function.
|
|
*
|
|
*/
|
|
declare function textLeading(): number;
|
|
|
|
/**
|
|
* Sets/gets the current font size. This size will be
|
|
* used in all subsequent calls to the text()
|
|
* function. Font size is measured in pixels.
|
|
*
|
|
* @param theSize the size of the letters in units of
|
|
* pixels
|
|
* @chainable
|
|
*/
|
|
declare function textSize(theSize: number): p5;
|
|
|
|
/**
|
|
* Sets/gets the current font size. This size will be
|
|
* used in all subsequent calls to the text()
|
|
* function. Font size is measured in pixels.
|
|
*
|
|
*/
|
|
declare function textSize(): number;
|
|
|
|
/**
|
|
* Sets/gets the style of the text for system fonts
|
|
* to NORMAL, ITALIC, or BOLD. Note: this may be is
|
|
* overridden by CSS styling. For non-system fonts
|
|
* (opentype, truetype, etc.) please load styled
|
|
* fonts instead.
|
|
*
|
|
* @param theStyle styling for text, either NORMAL,
|
|
* ITALIC, or BOLD
|
|
* @chainable
|
|
*/
|
|
declare function textStyle(theStyle: THE_STYLE): p5;
|
|
|
|
/**
|
|
* Sets/gets the style of the text for system fonts
|
|
* to NORMAL, ITALIC, or BOLD. Note: this may be is
|
|
* overridden by CSS styling. For non-system fonts
|
|
* (opentype, truetype, etc.) please load styled
|
|
* fonts instead.
|
|
*
|
|
*/
|
|
declare function textStyle(): string;
|
|
|
|
/**
|
|
* Calculates and returns the width of any character
|
|
* or text string.
|
|
*
|
|
* @param theText the String of characters to measure
|
|
*/
|
|
declare function textWidth(theText: string): number;
|
|
|
|
/**
|
|
* Returns the ascent of the current font at its
|
|
* current size. The ascent represents the distance,
|
|
* in pixels, of the tallest character above the
|
|
* baseline.
|
|
*
|
|
*/
|
|
declare function textAscent(): number;
|
|
|
|
/**
|
|
* Returns the descent of the current font at its
|
|
* current size. The descent represents the distance,
|
|
* in pixels, of the character with the longest
|
|
* descender below the baseline.
|
|
*
|
|
*/
|
|
declare function textDescent(): number;
|
|
|
|
// src/typography/loading_displaying.js
|
|
|
|
/**
|
|
* Loads an opentype font file (.otf, .ttf) from a
|
|
* file or a URL, and returns a PFont Object. This
|
|
* method is asynchronous, meaning it may not finish
|
|
* before the next line in your sketch is executed.
|
|
* The path to the font should be relative to the
|
|
* HTML file that links in your sketch. Loading an
|
|
* from a URL or other remote location may be blocked
|
|
* due to your browser's built-in security.
|
|
*
|
|
* @param path name of the file or url to load
|
|
* @param [callback] function to be executed after
|
|
* loadFont() completes
|
|
* @param [onError] function to be executed if an
|
|
* error occurs
|
|
* @return p5.Font object
|
|
*/
|
|
declare function loadFont(path: string, callback?: Function, onError?: Function): p5.Font;
|
|
|
|
/**
|
|
* Draws text to the screen. Displays the information
|
|
* specified in the first parameter on the screen in
|
|
* the position specified by the additional
|
|
* parameters. A default font will be used unless a
|
|
* font is set with the textFont() function and a
|
|
* default size will be used unless a font is set
|
|
* with textSize(). Change the color of the text with
|
|
* the fill() function. Change the outline of the
|
|
* text with the stroke() and strokeWeight()
|
|
* functions. The text displays in relation to the
|
|
* textAlign() function, which gives the option to
|
|
* draw to the left, right, and center of the
|
|
* coordinates.
|
|
*
|
|
*
|
|
* The x2 and y2 parameters define a rectangular area
|
|
* to display within and may only be used with string
|
|
* data. When these parameters are specified, they
|
|
* are interpreted based on the current rectMode()
|
|
* setting. Text that does not fit completely within
|
|
* the rectangle specified will not be drawn to the
|
|
* screen.
|
|
*
|
|
* @param str the alphanumeric symbols to be
|
|
* displayed
|
|
* @param x x-coordinate of text
|
|
* @param y y-coordinate of text
|
|
* @param [x2] by default, the width of the text box,
|
|
* see rectMode() for more info
|
|
* @param [y2] by default, the height of the text
|
|
* box, see rectMode() for more info
|
|
* @chainable
|
|
*/
|
|
declare function text(str: string|object|any[], x: number, y: number, x2?: number, y2?: number): p5;
|
|
|
|
/**
|
|
* Sets the current font that will be drawn with the
|
|
* text() function.
|
|
*
|
|
* @return the current font
|
|
*/
|
|
declare function textFont(): object;
|
|
|
|
/**
|
|
* Sets the current font that will be drawn with the
|
|
* text() function.
|
|
*
|
|
* @param font a font loaded via loadFont(), or a
|
|
* String representing a web safe font (a font that
|
|
* is generally available across all systems)
|
|
* @param [size] the font size to use
|
|
* @chainable
|
|
*/
|
|
declare function textFont(font: object|string, size?: number): p5;
|
|
|
|
// src/utilities/array_functions.js
|
|
|
|
/**
|
|
* Adds a value to the end of an array. Extends the
|
|
* length of the array by one. Maps to Array.push().
|
|
*
|
|
* @param array Array to append
|
|
* @param value to be added to the Array
|
|
*/
|
|
declare function append(array: any[], value: any): void;
|
|
|
|
/**
|
|
* Copies an array (or part of an array) to another
|
|
* array. The src array is copied to the dst array,
|
|
* beginning at the position specified by srcPosition
|
|
* and into the position specified by dstPosition.
|
|
* The number of elements to copy is determined by
|
|
* length. Note that copying values overwrites
|
|
* existing values in the destination array. To
|
|
* append values instead of overwriting them, use
|
|
* concat(). The simplified version with only two
|
|
* arguments, arrayCopy(src, dst), copies an entire
|
|
* array to another of the same size. It is
|
|
* equivalent to arrayCopy(src, 0, dst, 0,
|
|
* src.length).
|
|
*
|
|
*
|
|
* Using this function is far more efficient for
|
|
* copying array data than iterating through a for()
|
|
* loop and copying each element individually.
|
|
*
|
|
* @param src the source Array
|
|
* @param srcPosition starting position in the source
|
|
* Array
|
|
* @param dst the destination Array
|
|
* @param dstPosition starting position in the
|
|
* destination Array
|
|
* @param length number of Array elements to be
|
|
* copied
|
|
*/
|
|
declare function arrayCopy(src: any[], srcPosition: number, dst: any[], dstPosition: number, length: number): void;
|
|
|
|
/**
|
|
* Copies an array (or part of an array) to another
|
|
* array. The src array is copied to the dst array,
|
|
* beginning at the position specified by srcPosition
|
|
* and into the position specified by dstPosition.
|
|
* The number of elements to copy is determined by
|
|
* length. Note that copying values overwrites
|
|
* existing values in the destination array. To
|
|
* append values instead of overwriting them, use
|
|
* concat(). The simplified version with only two
|
|
* arguments, arrayCopy(src, dst), copies an entire
|
|
* array to another of the same size. It is
|
|
* equivalent to arrayCopy(src, 0, dst, 0,
|
|
* src.length).
|
|
*
|
|
*
|
|
* Using this function is far more efficient for
|
|
* copying array data than iterating through a for()
|
|
* loop and copying each element individually.
|
|
*
|
|
* @param src the source Array
|
|
* @param dst the destination Array
|
|
* @param [length] number of Array elements to be
|
|
* copied
|
|
*/
|
|
declare function arrayCopy(src: any[], dst: any[], length?: number): void;
|
|
|
|
/**
|
|
* Concatenates two arrays, maps to Array.concat().
|
|
* Does not modify the input arrays.
|
|
*
|
|
* @param a first Array to concatenate
|
|
* @param b second Array to concatenate
|
|
* @return concatenated array
|
|
*/
|
|
declare function concat(a: any[], b: any[]): any[];
|
|
|
|
/**
|
|
* Reverses the order of an array, maps to
|
|
* Array.reverse()
|
|
*
|
|
* @param list Array to reverse
|
|
*/
|
|
declare function reverse(list: any[]): void;
|
|
|
|
/**
|
|
* Decreases an array by one element and returns the
|
|
* shortened array, maps to Array.pop().
|
|
*
|
|
* @param list Array to shorten
|
|
* @return shortened Array
|
|
*/
|
|
declare function shorten(list: any[]): any[];
|
|
|
|
/**
|
|
* Randomizes the order of the elements of an array.
|
|
* Implements Fisher-Yates Shuffle Algorithm.
|
|
*
|
|
* @param array Array to shuffle
|
|
* @param [bool] modify passed array
|
|
* @return shuffled Array
|
|
*/
|
|
declare function shuffle(array: any[], bool?: boolean): any[];
|
|
|
|
/**
|
|
* Sorts an array of numbers from smallest to
|
|
* largest, or puts an array of words in alphabetical
|
|
* order. The original array is not modified; a
|
|
* re-ordered array is returned. The count parameter
|
|
* states the number of elements to sort. For
|
|
* example, if there are 12 elements in an array and
|
|
* count is set to 5, only the first 5 elements in
|
|
* the array will be sorted.
|
|
*
|
|
* @param list Array to sort
|
|
* @param [count] number of elements to sort,
|
|
* starting from 0
|
|
*/
|
|
declare function sort(list: any[], count?: number): void;
|
|
|
|
/**
|
|
* Inserts a value or an array of values into an
|
|
* existing array. The first parameter specifies the
|
|
* initial array to be modified, and the second
|
|
* parameter defines the data to be inserted. The
|
|
* third parameter is an index value which specifies
|
|
* the array position from which to insert data.
|
|
* (Remember that array index numbering starts at
|
|
* zero, so the first position is 0, the second
|
|
* position is 1, and so on.)
|
|
*
|
|
* @param list Array to splice into
|
|
* @param value value to be spliced in
|
|
* @param position in the array from which to insert
|
|
* data
|
|
*/
|
|
declare function splice(list: any[], value: any, position: number): void;
|
|
|
|
/**
|
|
* Extracts an array of elements from an existing
|
|
* array. The list parameter defines the array from
|
|
* which the elements will be copied, and the start
|
|
* and count parameters specify which elements to
|
|
* extract. If no count is given, elements will be
|
|
* extracted from the start to the end of the array.
|
|
* When specifying the start, remember that the first
|
|
* array element is 0. This function does not change
|
|
* the source array.
|
|
*
|
|
* @param list Array to extract from
|
|
* @param start position to begin
|
|
* @param [count] number of values to extract
|
|
* @return Array of extracted elements
|
|
*/
|
|
declare function subset(list: any[], start: number, count?: number): any[];
|
|
|
|
// src/utilities/conversion.js
|
|
|
|
/**
|
|
* Converts a string to its floating point
|
|
* representation. The contents of a string must
|
|
* resemble a number, or NaN (not a number) will be
|
|
* returned. For example, float("1234.56") evaluates
|
|
* to 1234.56, but float("giraffe") will return NaN.
|
|
* When an array of values is passed in, then an
|
|
* array of floats of the same length is returned.
|
|
*
|
|
* @param str float string to parse
|
|
* @return floating point representation of string
|
|
*/
|
|
declare function float(str: string): number;
|
|
|
|
/**
|
|
* Converts a boolean, string, or float to its
|
|
* integer representation. When an array of values is
|
|
* passed in, then an int array of the same length is
|
|
* returned.
|
|
*
|
|
* @param n value to parse
|
|
* @return integer representation of value
|
|
*/
|
|
declare function int(n: string|boolean|number): number;
|
|
|
|
/**
|
|
* Converts a boolean, string, or float to its
|
|
* integer representation. When an array of values is
|
|
* passed in, then an int array of the same length is
|
|
* returned.
|
|
*
|
|
* @param ns values to parse
|
|
* @return integer representation of values
|
|
*/
|
|
declare function int(ns: any[]): number[];
|
|
|
|
/**
|
|
* Converts a boolean, string or number to its string
|
|
* representation. When an array of values is passed
|
|
* in, then an array of strings of the same length is
|
|
* returned.
|
|
*
|
|
* @param n value to parse
|
|
* @return string representation of value
|
|
*/
|
|
declare function str(n: string|boolean|number|any[]): string;
|
|
|
|
/**
|
|
* Converts a number or string to its boolean
|
|
* representation. For a number, any non-zero value
|
|
* (positive or negative) evaluates to true, while
|
|
* zero evaluates to false. For a string, the value
|
|
* "true" evaluates to true, while any other value
|
|
* evaluates to false. When an array of number or
|
|
* string values is passed in, then a array of
|
|
* booleans of the same length is returned.
|
|
*
|
|
* @param n value to parse
|
|
* @return boolean representation of value
|
|
*/
|
|
declare function boolean(n: string|boolean|number|any[]): boolean;
|
|
|
|
/**
|
|
* Converts a number, string representation of a
|
|
* number, or boolean to its byte representation. A
|
|
* byte can be only a whole number between -128 and
|
|
* 127, so when a value outside of this range is
|
|
* converted, it wraps around to the corresponding
|
|
* byte representation. When an array of number,
|
|
* string or boolean values is passed in, then an
|
|
* array of bytes the same length is returned.
|
|
*
|
|
* @param n value to parse
|
|
* @return byte representation of value
|
|
*/
|
|
declare function byte(n: string|boolean|number): number;
|
|
|
|
/**
|
|
* Converts a number, string representation of a
|
|
* number, or boolean to its byte representation. A
|
|
* byte can be only a whole number between -128 and
|
|
* 127, so when a value outside of this range is
|
|
* converted, it wraps around to the corresponding
|
|
* byte representation. When an array of number,
|
|
* string or boolean values is passed in, then an
|
|
* array of bytes the same length is returned.
|
|
*
|
|
* @param ns values to parse
|
|
* @return array of byte representation of values
|
|
*/
|
|
declare function byte(ns: any[]): number[];
|
|
|
|
/**
|
|
* Converts a number or string to its corresponding
|
|
* single-character string representation. If a
|
|
* string parameter is provided, it is first parsed
|
|
* as an integer and then translated into a
|
|
* single-character string. When an array of number
|
|
* or string values is passed in, then an array of
|
|
* single-character strings of the same length is
|
|
* returned.
|
|
*
|
|
* @param n value to parse
|
|
* @return string representation of value
|
|
*/
|
|
declare function char(n: string|number): string;
|
|
|
|
/**
|
|
* Converts a number or string to its corresponding
|
|
* single-character string representation. If a
|
|
* string parameter is provided, it is first parsed
|
|
* as an integer and then translated into a
|
|
* single-character string. When an array of number
|
|
* or string values is passed in, then an array of
|
|
* single-character strings of the same length is
|
|
* returned.
|
|
*
|
|
* @param ns values to parse
|
|
* @return array of string representation of values
|
|
*/
|
|
declare function char(ns: any[]): string[];
|
|
|
|
/**
|
|
* Converts a single-character string to its
|
|
* corresponding integer representation. When an
|
|
* array of single-character string values is passed
|
|
* in, then an array of integers of the same length
|
|
* is returned.
|
|
*
|
|
* @param n value to parse
|
|
* @return integer representation of value
|
|
*/
|
|
declare function unchar(n: string): number;
|
|
|
|
/**
|
|
* Converts a single-character string to its
|
|
* corresponding integer representation. When an
|
|
* array of single-character string values is passed
|
|
* in, then an array of integers of the same length
|
|
* is returned.
|
|
*
|
|
* @param ns values to parse
|
|
* @return integer representation of values
|
|
*/
|
|
declare function unchar(ns: any[]): number[];
|
|
|
|
/**
|
|
* Converts a number to a string in its equivalent
|
|
* hexadecimal notation. If a second parameter is
|
|
* passed, it is used to set the number of characters
|
|
* to generate in the hexadecimal notation. When an
|
|
* array is passed in, an array of strings in
|
|
* hexadecimal notation of the same length is
|
|
* returned.
|
|
*
|
|
* @param n value to parse
|
|
* @return hexadecimal string representation of value
|
|
*/
|
|
declare function hex(n: number, digits?: number): string;
|
|
|
|
/**
|
|
* Converts a number to a string in its equivalent
|
|
* hexadecimal notation. If a second parameter is
|
|
* passed, it is used to set the number of characters
|
|
* to generate in the hexadecimal notation. When an
|
|
* array is passed in, an array of strings in
|
|
* hexadecimal notation of the same length is
|
|
* returned.
|
|
*
|
|
* @param ns array of values to parse
|
|
* @return hexadecimal string representation of
|
|
* values
|
|
*/
|
|
declare function hex(ns: number[], digits?: number): string[];
|
|
|
|
/**
|
|
* Converts a string representation of a hexadecimal
|
|
* number to its equivalent integer value. When an
|
|
* array of strings in hexadecimal notation is passed
|
|
* in, an array of integers of the same length is
|
|
* returned.
|
|
*
|
|
* @param n value to parse
|
|
* @return integer representation of hexadecimal
|
|
* value
|
|
*/
|
|
declare function unhex(n: string): number;
|
|
|
|
/**
|
|
* Converts a string representation of a hexadecimal
|
|
* number to its equivalent integer value. When an
|
|
* array of strings in hexadecimal notation is passed
|
|
* in, an array of integers of the same length is
|
|
* returned.
|
|
*
|
|
* @param ns values to parse
|
|
* @return integer representations of hexadecimal
|
|
* value
|
|
*/
|
|
declare function unhex(ns: any[]): number[];
|
|
|
|
// src/utilities/string_functions.js
|
|
|
|
/**
|
|
* Combines an array of Strings into one String, each
|
|
* separated by the character(s) used for the
|
|
* separator parameter. To join arrays of ints or
|
|
* floats, it's necessary to first convert them to
|
|
* Strings using nf() or nfs().
|
|
*
|
|
* @param list array of Strings to be joined
|
|
* @param separator String to be placed between each
|
|
* item
|
|
* @return joined String
|
|
*/
|
|
declare function join(list: any[], separator: string): string;
|
|
|
|
/**
|
|
* This function is used to apply a regular
|
|
* expression to a piece of text, and return matching
|
|
* groups (elements found inside parentheses) as a
|
|
* String array. If there are no matches, a null
|
|
* value will be returned. If no groups are specified
|
|
* in the regular expression, but the sequence
|
|
* matches, an array of length 1 (with the matched
|
|
* text as the first element of the array) will be
|
|
* returned. To use the function, first check to see
|
|
* if the result is null. If the result is null, then
|
|
* the sequence did not match at all. If the sequence
|
|
* did match, an array is returned.
|
|
*
|
|
*
|
|
* If there are groups (specified by sets of
|
|
* parentheses) in the regular expression, then the
|
|
* contents of each will be returned in the array.
|
|
* Element [0] of a regular expression match returns
|
|
* the entire matching string, and the match groups
|
|
* start at element [1] (the first group is [1], the
|
|
* second [2], and so on).
|
|
*
|
|
* @param str the String to be searched
|
|
* @param regexp the regexp to be used for matching
|
|
* @return Array of Strings found
|
|
*/
|
|
declare function match(str: string, regexp: string): string[];
|
|
|
|
/**
|
|
* This function is used to apply a regular
|
|
* expression to a piece of text, and return a list
|
|
* of matching groups (elements found inside
|
|
* parentheses) as a two-dimensional String array. If
|
|
* there are no matches, a null value will be
|
|
* returned. If no groups are specified in the
|
|
* regular expression, but the sequence matches, a
|
|
* two dimensional array is still returned, but the
|
|
* second dimension is only of length one. To use
|
|
* the function, first check to see if the result is
|
|
* null. If the result is null, then the sequence did
|
|
* not match at all. If the sequence did match, a 2D
|
|
* array is returned.
|
|
*
|
|
*
|
|
* If there are groups (specified by sets of
|
|
* parentheses) in the regular expression, then the
|
|
* contents of each will be returned in the array.
|
|
* Assuming a loop with counter variable i, element
|
|
* [i][0] of a regular expression match returns the
|
|
* entire matching string, and the match groups start
|
|
* at element [i][1] (the first group is [i][1], the
|
|
* second [i][2], and so on).
|
|
*
|
|
* @param str the String to be searched
|
|
* @param regexp the regexp to be used for matching
|
|
* @return 2d Array of Strings found
|
|
*/
|
|
declare function matchAll(str: string, regexp: string): string[];
|
|
|
|
/**
|
|
* Utility function for formatting numbers into
|
|
* strings. There are two versions: one for
|
|
* formatting floats, and one for formatting ints.
|
|
* The values for the digits, left, and right
|
|
* parameters should always be positive integers.
|
|
*
|
|
* @param num the Number to format
|
|
* @param [left] number of digits to the left of the
|
|
* decimal point
|
|
* @param [right] number of digits to the right of
|
|
* the decimal point
|
|
* @return formatted String
|
|
*/
|
|
declare function nf(num: number|string, left?: number|string, right?: number|string): string;
|
|
|
|
/**
|
|
* Utility function for formatting numbers into
|
|
* strings. There are two versions: one for
|
|
* formatting floats, and one for formatting ints.
|
|
* The values for the digits, left, and right
|
|
* parameters should always be positive integers.
|
|
*
|
|
* @param nums the Numbers to format
|
|
* @param [left] number of digits to the left of the
|
|
* decimal point
|
|
* @param [right] number of digits to the right of
|
|
* the decimal point
|
|
* @return formatted Strings
|
|
*/
|
|
declare function nf(nums: any[], left?: number|string, right?: number|string): string[];
|
|
|
|
/**
|
|
* Utility function for formatting numbers into
|
|
* strings and placing appropriate commas to mark
|
|
* units of 1000. There are two versions: one for
|
|
* formatting ints, and one for formatting an array
|
|
* of ints. The value for the right parameter should
|
|
* always be a positive integer.
|
|
*
|
|
* @param num the Number to format
|
|
* @param [right] number of digits to the right of
|
|
* the decimal point
|
|
* @return formatted String
|
|
*/
|
|
declare function nfc(num: number|string, right?: number|string): string;
|
|
|
|
/**
|
|
* Utility function for formatting numbers into
|
|
* strings and placing appropriate commas to mark
|
|
* units of 1000. There are two versions: one for
|
|
* formatting ints, and one for formatting an array
|
|
* of ints. The value for the right parameter should
|
|
* always be a positive integer.
|
|
*
|
|
* @param nums the Numbers to format
|
|
* @param [right] number of digits to the right of
|
|
* the decimal point
|
|
* @return formatted Strings
|
|
*/
|
|
declare function nfc(nums: any[], right?: number|string): string[];
|
|
|
|
/**
|
|
* Utility function for formatting numbers into
|
|
* strings. Similar to nf() but puts a "+" in front
|
|
* of positive numbers and a "-" in front of negative
|
|
* numbers. There are two versions: one for
|
|
* formatting floats, and one for formatting ints.
|
|
* The values for left, and right parameters should
|
|
* always be positive integers.
|
|
*
|
|
* @param num the Number to format
|
|
* @param [left] number of digits to the left of the
|
|
* decimal point
|
|
* @param [right] number of digits to the right of
|
|
* the decimal point
|
|
* @return formatted String
|
|
*/
|
|
declare function nfp(num: number, left?: number, right?: number): string;
|
|
|
|
/**
|
|
* Utility function for formatting numbers into
|
|
* strings. Similar to nf() but puts a "+" in front
|
|
* of positive numbers and a "-" in front of negative
|
|
* numbers. There are two versions: one for
|
|
* formatting floats, and one for formatting ints.
|
|
* The values for left, and right parameters should
|
|
* always be positive integers.
|
|
*
|
|
* @param nums the Numbers to format
|
|
* @param [left] number of digits to the left of the
|
|
* decimal point
|
|
* @param [right] number of digits to the right of
|
|
* the decimal point
|
|
* @return formatted Strings
|
|
*/
|
|
declare function nfp(nums: number[], left?: number, right?: number): string[];
|
|
|
|
/**
|
|
* Utility function for formatting numbers into
|
|
* strings. Similar to nf() but puts a " " (space) in
|
|
* front of positive numbers and a "-" in front of
|
|
* negative numbers. There are two versions: one for
|
|
* formatting floats, and one for formatting ints.
|
|
* The values for the digits, left, and right
|
|
* parameters should always be positive integers.
|
|
*
|
|
* @param num the Number to format
|
|
* @param [left] number of digits to the left of the
|
|
* decimal point
|
|
* @param [right] number of digits to the right of
|
|
* the decimal point
|
|
* @return formatted String
|
|
*/
|
|
declare function nfs(num: number, left?: number, right?: number): string;
|
|
|
|
/**
|
|
* Utility function for formatting numbers into
|
|
* strings. Similar to nf() but puts a " " (space) in
|
|
* front of positive numbers and a "-" in front of
|
|
* negative numbers. There are two versions: one for
|
|
* formatting floats, and one for formatting ints.
|
|
* The values for the digits, left, and right
|
|
* parameters should always be positive integers.
|
|
*
|
|
* @param nums the Numbers to format
|
|
* @param [left] number of digits to the left of the
|
|
* decimal point
|
|
* @param [right] number of digits to the right of
|
|
* the decimal point
|
|
* @return formatted Strings
|
|
*/
|
|
declare function nfs(nums: any[], left?: number, right?: number): string[];
|
|
|
|
/**
|
|
* The split() function maps to String.split(), it
|
|
* breaks a String into pieces using a character or
|
|
* string as the delimiter. The delim parameter
|
|
* specifies the character or characters that mark
|
|
* the boundaries between each piece. A String[]
|
|
* array is returned that contains each of the
|
|
* pieces. The splitTokens() function works in a
|
|
* similar fashion, except that it splits using a
|
|
* range of characters instead of a specific
|
|
* character or sequence.
|
|
*
|
|
* @param value the String to be split
|
|
* @param delim the String used to separate the data
|
|
* @return Array of Strings
|
|
*/
|
|
declare function split(value: string, delim: string): string[];
|
|
|
|
/**
|
|
* The splitTokens() function splits a String at one
|
|
* or many character delimiters or "tokens." The
|
|
* delim parameter specifies the character or
|
|
* characters to be used as a boundary. If no delim
|
|
* characters are specified, any whitespace character
|
|
* is used to split. Whitespace characters include
|
|
* tab (\t), line feed (\n), carriage return (\r),
|
|
* form feed (\f), and space.
|
|
*
|
|
* @param value the String to be split
|
|
* @param [delim] list of individual Strings that
|
|
* will be used as separators
|
|
* @return Array of Strings
|
|
*/
|
|
declare function splitTokens(value: string, delim?: string): string[];
|
|
|
|
/**
|
|
* Removes whitespace characters from the beginning
|
|
* and end of a String. In addition to standard
|
|
* whitespace characters such as space, carriage
|
|
* return, and tab, this function also removes the
|
|
* Unicode "nbsp" character.
|
|
*
|
|
* @param str a String to be trimmed
|
|
* @return a trimmed String
|
|
*/
|
|
declare function trim(str: string): string;
|
|
|
|
/**
|
|
* Removes whitespace characters from the beginning
|
|
* and end of a String. In addition to standard
|
|
* whitespace characters such as space, carriage
|
|
* return, and tab, this function also removes the
|
|
* Unicode "nbsp" character.
|
|
*
|
|
* @param strs an Array of Strings to be trimmed
|
|
* @return an Array of trimmed Strings
|
|
*/
|
|
declare function trim(strs: any[]): string[];
|
|
|
|
// src/utilities/time_date.js
|
|
|
|
/**
|
|
* p5.js communicates with the clock on your
|
|
* computer. The day() function returns the current
|
|
* day as a value from 1 - 31.
|
|
*
|
|
* @return the current day
|
|
*/
|
|
declare function day(): number;
|
|
|
|
/**
|
|
* p5.js communicates with the clock on your
|
|
* computer. The hour() function returns the current
|
|
* hour as a value from 0 - 23.
|
|
*
|
|
* @return the current hour
|
|
*/
|
|
declare function hour(): number;
|
|
|
|
/**
|
|
* p5.js communicates with the clock on your
|
|
* computer. The minute() function returns the
|
|
* current minute as a value from 0 - 59.
|
|
*
|
|
* @return the current minute
|
|
*/
|
|
declare function minute(): number;
|
|
|
|
/**
|
|
* Returns the number of milliseconds (thousandths of
|
|
* a second) since starting the program. This
|
|
* information is often used for timing events and
|
|
* animation sequences.
|
|
*
|
|
* @return the number of milliseconds since starting
|
|
* the program
|
|
*/
|
|
declare function millis(): number;
|
|
|
|
/**
|
|
* p5.js communicates with the clock on your
|
|
* computer. The month() function returns the current
|
|
* month as a value from 1 - 12.
|
|
*
|
|
* @return the current month
|
|
*/
|
|
declare function month(): number;
|
|
|
|
/**
|
|
* p5.js communicates with the clock on your
|
|
* computer. The second() function returns the
|
|
* current second as a value from 0 - 59.
|
|
*
|
|
* @return the current second
|
|
*/
|
|
declare function second(): number;
|
|
|
|
/**
|
|
* p5.js communicates with the clock on your
|
|
* computer. The year() function returns the current
|
|
* year as an integer (2014, 2015, 2016, etc).
|
|
*
|
|
* @return the current year
|
|
*/
|
|
declare function year(): number;
|
|
|
|
// src/webgl/camera.js
|
|
|
|
/**
|
|
* Sets camera position for a 3D sketch. The function
|
|
* behaves similarly gluLookAt, except that it
|
|
* replaces the existing modelview matrix instead of
|
|
* applying any transformations calculated here on
|
|
* top of the existing model view. When called with
|
|
* no arguments, this function sets a default camera
|
|
* equivalent to calling camera(0, 0, (height/2.0) /
|
|
* tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);
|
|
*
|
|
* @param [x] camera position value on x axis
|
|
* @param [y] camera position value on y axis
|
|
* @param [z] camera position value on z axis
|
|
* @param [centerX] x coordinate representing center
|
|
* of the sketch
|
|
* @param [centerY] y coordinate representing center
|
|
* of the sketch
|
|
* @param [centerZ] z coordinate representing center
|
|
* of the sketch
|
|
* @param [upX] x component of direction 'up' from
|
|
* camera
|
|
* @param [upY] y component of direction 'up' from
|
|
* camera
|
|
* @param [upZ] z component of direction 'up' from
|
|
* camera
|
|
* @chainable
|
|
*/
|
|
declare function camera(x?: number, y?: number, z?: number, centerX?: number, centerY?: number, centerZ?: number, upX?: number, upY?: number, upZ?: number): p5;
|
|
|
|
/**
|
|
* Sets perspective camera. When called with no
|
|
* arguments, the defaults provided are equivalent to
|
|
* perspective(PI/3.0, width/height, cameraZ/10.0,
|
|
* cameraZ10.0) where cameraZ is ((height/2.0) /
|
|
* tan(PI60.0/360.0));
|
|
*
|
|
* @param [fovy] camera frustum vertical field of
|
|
* view, from bottom to top of view, in angleMode
|
|
* units
|
|
* @param [aspect] camera frustum aspect ratio
|
|
* @param [near] frustum near plane length
|
|
* @param [far] frustum far plane length
|
|
* @chainable
|
|
*/
|
|
declare function perspective(fovy?: number, aspect?: number, near?: number, far?: number): p5;
|
|
|
|
/**
|
|
* Setup ortho camera
|
|
*
|
|
* @param [left] camera frustum left plane
|
|
* @param [right] camera frustum right plane
|
|
* @param [bottom] camera frustum bottom plane
|
|
* @param [top] camera frustum top plane
|
|
* @param [near] camera frustum near plane
|
|
* @param [far] camera frustum far plane
|
|
* @chainable
|
|
*/
|
|
declare function ortho(left?: number, right?: number, bottom?: number, top?: number, near?: number, far?: number): p5;
|
|
|
|
// src/webgl/interaction.js
|
|
|
|
declare function orbitControl(): p5;
|
|
|
|
// src/webgl/light.js
|
|
|
|
/**
|
|
* Creates an ambient light with a color
|
|
*
|
|
* @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
|
|
* @chainable
|
|
*/
|
|
declare function ambientLight(v1: number, v2: number, v3: number, alpha?: number): p5;
|
|
|
|
/**
|
|
* Creates an ambient light with a color
|
|
*
|
|
* @param value a color string
|
|
* @chainable
|
|
*/
|
|
declare function ambientLight(value: string, alpha?: number): p5;
|
|
|
|
/**
|
|
* Creates an ambient light with a color
|
|
*
|
|
* @param values an array containing the
|
|
* red,green,blue & and alpha components of the color
|
|
* @chainable
|
|
*/
|
|
declare function ambientLight(values: number[]): p5;
|
|
|
|
/**
|
|
* Creates an ambient light with a color
|
|
*
|
|
* @param color the ambient light color
|
|
* @chainable
|
|
*/
|
|
declare function ambientLight(color: p5.Color): p5;
|
|
|
|
/**
|
|
* Creates a directional light with a color and a
|
|
* direction
|
|
*
|
|
* @param v1 red or hue value (depending on the
|
|
* current color mode),
|
|
* @param v2 green or saturation value
|
|
* @param v3 blue or brightness value
|
|
* @param position the direction of the light
|
|
* @chainable
|
|
*/
|
|
declare function directionalLight(v1: number, v2: number, v3: number, position: p5.Vector): p5;
|
|
|
|
/**
|
|
* Creates a directional light with a color and a
|
|
* direction
|
|
*
|
|
* @param color color Array, CSS color string, or
|
|
* p5.Color value
|
|
* @param x x axis direction
|
|
* @param y y axis direction
|
|
* @param z z axis direction
|
|
* @chainable
|
|
*/
|
|
declare function directionalLight(color: number[]|string|p5.Color, x: number, y: number, z: number): p5;
|
|
|
|
/**
|
|
* Creates a directional light with a color and a
|
|
* direction
|
|
*
|
|
* @param color color Array, CSS color string, or
|
|
* p5.Color value
|
|
* @param position the direction of the light
|
|
* @chainable
|
|
*/
|
|
declare function directionalLight(color: number[]|string|p5.Color, position: p5.Vector): p5;
|
|
|
|
/**
|
|
* Creates a directional light with a color and a
|
|
* direction
|
|
*
|
|
* @param v1 red or hue value (depending on the
|
|
* current color mode),
|
|
* @param v2 green or saturation value
|
|
* @param v3 blue or brightness value
|
|
* @param x x axis direction
|
|
* @param y y axis direction
|
|
* @param z z axis direction
|
|
* @chainable
|
|
*/
|
|
declare function directionalLight(v1: number, v2: number, v3: number, x: number, y: number, z: number): p5;
|
|
|
|
/**
|
|
* Creates a point light with a color and a light
|
|
* position
|
|
*
|
|
* @param v1 red or hue value (depending on the
|
|
* current color mode),
|
|
* @param v2 green or saturation value
|
|
* @param v3 blue or brightness value
|
|
* @param x x axis position
|
|
* @param y y axis position
|
|
* @param z z axis position
|
|
* @chainable
|
|
*/
|
|
declare function pointLight(v1: number, v2: number, v3: number, x: number, y: number, z: number): p5;
|
|
|
|
/**
|
|
* Creates a point light with a color and a light
|
|
* position
|
|
*
|
|
* @param v1 red or hue value (depending on the
|
|
* current color mode),
|
|
* @param v2 green or saturation value
|
|
* @param v3 blue or brightness value
|
|
* @param position the position of the light
|
|
* @chainable
|
|
*/
|
|
declare function pointLight(v1: number, v2: number, v3: number, position: p5.Vector): p5;
|
|
|
|
/**
|
|
* Creates a point light with a color and a light
|
|
* position
|
|
*
|
|
* @param color color Array, CSS color string, or
|
|
* p5.Color value
|
|
* @param x x axis position
|
|
* @param y y axis position
|
|
* @param z z axis position
|
|
* @chainable
|
|
*/
|
|
declare function pointLight(color: number[]|string|p5.Color, x: number, y: number, z: number): p5;
|
|
|
|
/**
|
|
* Creates a point light with a color and a light
|
|
* position
|
|
*
|
|
* @param color color Array, CSS color string, or
|
|
* p5.Color value
|
|
* @param position the position of the light
|
|
* @chainable
|
|
*/
|
|
declare function pointLight(color: number[]|string|p5.Color, position: p5.Vector): p5;
|
|
|
|
// src/webgl/loading.js
|
|
|
|
/**
|
|
* Load a 3d model from an OBJ file. One of the
|
|
* limitations of the OBJ format is that it doesn't
|
|
* have a built-in sense of scale. This means that
|
|
* models exported from different programs might be
|
|
* very different sizes. If your model isn't
|
|
* displaying, try calling loadModel() with the
|
|
* normalized parameter set to true. This will resize
|
|
* the model to a scale appropriate for p5. You can
|
|
* also make additional changes to the final size of
|
|
* your model with the scale() function.
|
|
*
|
|
* @param path Path of the model to be loaded
|
|
* @param normalize If true, scale the model to a
|
|
* standardized size when loading
|
|
* @param [successCallback] Function to be called
|
|
* once the model is loaded. Will be passed the 3D
|
|
* model object.
|
|
* @param [failureCallback] called with event error
|
|
* if the image fails to load.
|
|
* @return the p5.Geometry object
|
|
*/
|
|
declare function loadModel(path: string, normalize: boolean, successCallback?: (p1: p5.Geometry) => any, failureCallback?: (p1: Event) => any): p5.Geometry;
|
|
|
|
/**
|
|
* Load a 3d model from an OBJ file. One of the
|
|
* limitations of the OBJ format is that it doesn't
|
|
* have a built-in sense of scale. This means that
|
|
* models exported from different programs might be
|
|
* very different sizes. If your model isn't
|
|
* displaying, try calling loadModel() with the
|
|
* normalized parameter set to true. This will resize
|
|
* the model to a scale appropriate for p5. You can
|
|
* also make additional changes to the final size of
|
|
* your model with the scale() function.
|
|
*
|
|
* @param path Path of the model to be loaded
|
|
* @param [successCallback] Function to be called
|
|
* once the model is loaded. Will be passed the 3D
|
|
* model object.
|
|
* @param [failureCallback] called with event error
|
|
* if the image fails to load.
|
|
* @return the p5.Geometry object
|
|
*/
|
|
declare function loadModel(path: string, successCallback?: (p1: p5.Geometry) => any, failureCallback?: (p1: Event) => any): p5.Geometry;
|
|
|
|
/**
|
|
* Render a 3d model to the screen.
|
|
*
|
|
* @param model Loaded 3d model to be rendered
|
|
*/
|
|
declare function model(model: p5.Geometry): void;
|
|
|
|
// src/webgl/material.js
|
|
|
|
/**
|
|
* Loads a custom shader from the provided vertex and
|
|
* fragment shader paths. The shader files are loaded
|
|
* asynchronously in the background, so this method
|
|
* should be used in preload(). For now, there are
|
|
* three main types of shaders. p5 will automatically
|
|
* supply appropriate vertices, normals, colors, and
|
|
* lighting attributes if the parameters defined in
|
|
* the shader match the names.
|
|
*
|
|
* @param [vertFilename] path to file containing
|
|
* vertex shader source code
|
|
* @param [fragFilename] path to file containing
|
|
* fragment shader source code
|
|
* @return a shader object created from the provided
|
|
* vertex and fragment shader files.
|
|
*/
|
|
declare function loadShader(vertFilename?: string, fragFilename?: string): p5.Shader;
|
|
declare function createShader(vertSrc: string, fragSrc: string): p5.Shader;
|
|
|
|
/**
|
|
* The shader() function lets the user provide a
|
|
* custom shader to fill in shapes in WEBGL mode.
|
|
* Users can create their own shaders by loading
|
|
* vertex and fragment shaders with loadShader().
|
|
*
|
|
* @param [s] the desired p5.Shader to use for
|
|
* rendering shapes.
|
|
* @chainable
|
|
*/
|
|
declare function shader(s?: p5.Shader): p5;
|
|
|
|
/**
|
|
* Normal material for geometry. You can view all
|
|
* possible materials in this example.
|
|
*
|
|
* @chainable
|
|
*/
|
|
declare function normalMaterial(): p5;
|
|
|
|
/**
|
|
* Texture for geometry. You can view other possible
|
|
* materials in this example.
|
|
*
|
|
* @param tex 2-dimensional graphics to render as
|
|
* texture
|
|
* @chainable
|
|
*/
|
|
declare function texture(tex: p5.Image|p5.MediaElement|p5.Graphics): p5;
|
|
|
|
/**
|
|
* Ambient material for geometry with a given color.
|
|
* You can view all possible materials in this
|
|
* example.
|
|
*
|
|
* @param v1 gray value, red or hue value (depending
|
|
* on the current color mode),
|
|
* @param [v2] green or saturation value
|
|
* @param [v3] blue or brightness value
|
|
* @param [a] opacity
|
|
* @chainable
|
|
*/
|
|
declare function ambientMaterial(v1: number, v2?: number, v3?: number, a?: number): p5;
|
|
|
|
/**
|
|
* Ambient material for geometry with a given color.
|
|
* You can view all possible materials in this
|
|
* example.
|
|
*
|
|
* @param color color, color Array, or CSS color
|
|
* string
|
|
* @chainable
|
|
*/
|
|
declare function ambientMaterial(color: number[]|string|p5.Color): p5;
|
|
|
|
/**
|
|
* Specular material for geometry with a given color.
|
|
* You can view all possible materials in this
|
|
* example.
|
|
*
|
|
* @param v1 gray value, red or hue value (depending
|
|
* on the current color mode),
|
|
* @param [v2] green or saturation value
|
|
* @param [v3] blue or brightness value
|
|
* @param [a] opacity
|
|
* @chainable
|
|
*/
|
|
declare function specularMaterial(v1: number, v2?: number, v3?: number, a?: number): p5;
|
|
|
|
/**
|
|
* Specular material for geometry with a given color.
|
|
* You can view all possible materials in this
|
|
* example.
|
|
*
|
|
* @param color color Array, or CSS color string
|
|
* @chainable
|
|
*/
|
|
declare function specularMaterial(color: number[]|string|p5.Color): p5;
|
|
|
|
// src/webgl/p5.RendererGL.js
|
|
|
|
/**
|
|
* Set attributes for the WebGL Drawing context. This
|
|
* is a way of adjusting ways that the WebGL renderer
|
|
* works to fine-tune the display and performance.
|
|
* This should be put in setup(). The available
|
|
* attributes are: alpha - indicates if the canvas
|
|
* contains an alpha buffer
|
|
*
|
|
* default is true
|
|
*
|
|
*
|
|
* depth - indicates whether the drawing buffer has a
|
|
* depth buffer of at least 16 bits - default is true
|
|
*
|
|
*
|
|
* stencil - indicates whether the drawing buffer has
|
|
* a stencil buffer of at least 8 bits
|
|
*
|
|
*
|
|
* antialias - indicates whether or not to perform
|
|
* anti-aliasing
|
|
*
|
|
* default is false
|
|
*
|
|
*
|
|
* premultipliedAlpha - indicates that the page
|
|
* compositor will assume the drawing buffer contains
|
|
* colors with pre-multiplied alpha
|
|
*
|
|
* default is false
|
|
*
|
|
*
|
|
* preserveDrawingBuffer - if true the buffers will
|
|
* not be cleared and and will preserve their values
|
|
* until cleared or overwritten by author (note that
|
|
* p5 clears automatically on draw loop)
|
|
*
|
|
* default is true
|
|
*
|
|
*
|
|
* perPixelLighting - if true, per-pixel lighting
|
|
* will be used in the lighting shader.
|
|
*
|
|
* default is false
|
|
*
|
|
* @param key Name of attribute
|
|
* @param value New value of named attribute
|
|
*/
|
|
declare function setAttributes(key: string, value: boolean): void;
|
|
|
|
/**
|
|
* Set attributes for the WebGL Drawing context. This
|
|
* is a way of adjusting ways that the WebGL renderer
|
|
* works to fine-tune the display and performance.
|
|
* This should be put in setup(). The available
|
|
* attributes are: alpha - indicates if the canvas
|
|
* contains an alpha buffer
|
|
*
|
|
* default is true
|
|
*
|
|
*
|
|
* depth - indicates whether the drawing buffer has a
|
|
* depth buffer of at least 16 bits - default is true
|
|
*
|
|
*
|
|
* stencil - indicates whether the drawing buffer has
|
|
* a stencil buffer of at least 8 bits
|
|
*
|
|
*
|
|
* antialias - indicates whether or not to perform
|
|
* anti-aliasing
|
|
*
|
|
* default is false
|
|
*
|
|
*
|
|
* premultipliedAlpha - indicates that the page
|
|
* compositor will assume the drawing buffer contains
|
|
* colors with pre-multiplied alpha
|
|
*
|
|
* default is false
|
|
*
|
|
*
|
|
* preserveDrawingBuffer - if true the buffers will
|
|
* not be cleared and and will preserve their values
|
|
* until cleared or overwritten by author (note that
|
|
* p5 clears automatically on draw loop)
|
|
*
|
|
* default is true
|
|
*
|
|
*
|
|
* perPixelLighting - if true, per-pixel lighting
|
|
* will be used in the lighting shader.
|
|
*
|
|
* default is false
|
|
*
|
|
* @param obj object with key-value pairs
|
|
*/
|
|
declare function setAttributes(obj: object): void;
|
|
|
|
// src/webgl/primitives.js
|
|
|
|
/**
|
|
* Draw a plane with given a width and height
|
|
*
|
|
* @param [width] width of the plane
|
|
* @param [height] height of the plane
|
|
* @param [detailX] Optional number of triangle
|
|
* subdivisions in x-dimension
|
|
* @param [detailY] Optional number of triangle
|
|
* subdivisions in y-dimension
|
|
* @chainable
|
|
*/
|
|
declare function plane(width?: number, height?: number, detailX?: number, detailY?: number): p5;
|
|
|
|
/**
|
|
* Draw a box with given width, height and depth
|
|
*
|
|
* @param [width] width of the box
|
|
* @param [Height] height of the box
|
|
* @param [depth] depth of the box
|
|
* @param [detailX] Optional number of triangle
|
|
* subdivisions in x-dimension
|
|
* @param [detailY] Optional number of triangle
|
|
* subdivisions in y-dimension
|
|
* @chainable
|
|
*/
|
|
declare function box(width?: number, Height?: number, depth?: number, detailX?: number, detailY?: number): p5;
|
|
|
|
/**
|
|
* Draw a sphere with given radius
|
|
*
|
|
* @param [radius] radius of circle
|
|
* @param [detailX] number of segments, the more
|
|
* segments the smoother geometry default is 24
|
|
* @param [detailY] number of segments, the more
|
|
* segments the smoother geometry default is 16
|
|
* @chainable
|
|
*/
|
|
declare function sphere(radius?: number, detailX?: number, detailY?: number): p5;
|
|
|
|
/**
|
|
* Draw a cylinder with given radius and height
|
|
*
|
|
* @param [radius] radius of the surface
|
|
* @param [height] height of the cylinder
|
|
* @param [detailX] number of segments, the more
|
|
* segments the smoother geometry default is 24
|
|
* @param [detailY] number of segments in
|
|
* y-dimension, the more segments the smoother
|
|
* geometry default is 1
|
|
* @param [bottomCap] whether to draw the bottom of
|
|
* the cylinder
|
|
* @param [topCap] whether to draw the top of the
|
|
* cylinder
|
|
* @chainable
|
|
*/
|
|
declare function cylinder(radius?: number, height?: number, detailX?: number, detailY?: number, bottomCap?: boolean, topCap?: boolean): p5;
|
|
|
|
/**
|
|
* Draw a cone with given radius and height
|
|
*
|
|
* @param [radius] radius of the bottom surface
|
|
* @param [height] height of the cone
|
|
* @param [detailX] number of segments, the more
|
|
* segments the smoother geometry default is 24
|
|
* @param [detailY] number of segments, the more
|
|
* segments the smoother geometry default is 1
|
|
* @param [cap] whether to draw the base of the cone
|
|
* @chainable
|
|
*/
|
|
declare function cone(radius?: number, height?: number, detailX?: number, detailY?: number, cap?: boolean): p5;
|
|
|
|
/**
|
|
* Draw an ellipsoid with given radius
|
|
*
|
|
* @param [radiusx] xradius of circle
|
|
* @param [radiusy] yradius of circle
|
|
* @param [radiusz] zradius of circle
|
|
* @param [detailX] number of segments, the more
|
|
* segments the smoother geometry default is 24.
|
|
* Avoid detail number above 150, it may crash the
|
|
* browser.
|
|
* @param [detailY] number of segments, the more
|
|
* segments the smoother geometry default is 16.
|
|
* Avoid detail number above 150, it may crash the
|
|
* browser.
|
|
* @chainable
|
|
*/
|
|
declare function ellipsoid(radiusx?: number, radiusy?: number, radiusz?: number, detailX?: number, detailY?: number): p5;
|
|
|
|
/**
|
|
* Draw a torus with given radius and tube radius
|
|
*
|
|
* @param [radius] radius of the whole ring
|
|
* @param [tubeRadius] radius of the tube
|
|
* @param [detailX] number of segments in
|
|
* x-dimension, the more segments the smoother
|
|
* geometry default is 24
|
|
* @param [detailY] number of segments in
|
|
* y-dimension, the more segments the smoother
|
|
* geometry default is 16
|
|
* @chainable
|
|
*/
|
|
declare function torus(radius?: number, tubeRadius?: number, detailX?: number, detailY?: number): p5;
|
|
|
|
// lib/addons/p5.sound.js
|
|
|
|
/**
|
|
* Returns a number representing the sample rate, in
|
|
* samples per second, of all sound objects in this
|
|
* audio context. It is determined by the sampling
|
|
* rate of your operating system's sound card, and it
|
|
* is not currently possile to change. It is often
|
|
* 44100, or twice the range of human hearing.
|
|
*
|
|
* @return samplerate samples per second
|
|
*/
|
|
declare function sampleRate(): number;
|
|
|
|
/**
|
|
* Returns the closest MIDI note value for a given
|
|
* frequency.
|
|
*
|
|
* @param frequency A freqeuncy, for example, the "A"
|
|
* above Middle C is 440Hz
|
|
* @return MIDI note value
|
|
*/
|
|
declare function freqToMidi(frequency: number): number;
|
|
|
|
/**
|
|
* Returns the frequency value of a MIDI note value.
|
|
* General MIDI treats notes as integers where middle
|
|
* C is 60, C# is 61, D is 62 etc. Useful for
|
|
* generating musical frequencies with oscillators.
|
|
*
|
|
* @param midiNote The number of a MIDI note
|
|
* @return Frequency value of the given MIDI note
|
|
*/
|
|
declare function midiToFreq(midiNote: number): number;
|
|
|
|
/**
|
|
* List the SoundFile formats that you will include.
|
|
* LoadSound will search your directory for these
|
|
* extensions, and will pick a format that is
|
|
* compatable with the client's web browser. Here is
|
|
* a free online file converter.
|
|
*
|
|
* @param [formats] i.e. 'mp3', 'wav', 'ogg'
|
|
*/
|
|
declare function soundFormats(formats?: string): void;
|
|
|
|
// Properties from p5.dom
|
|
|
|
// lib/addons/p5.dom.js
|
|
|
|
/**
|
|
* Searches the page for an element with the given
|
|
* ID, class, or tag name (using the '#' or '.'
|
|
* prefixes to specify an ID or class respectively,
|
|
* and none for a tag) and returns it as a
|
|
* p5.Element. If a class or tag name is given with
|
|
* more than 1 element, only the first element will
|
|
* be returned. The DOM node itself can be accessed
|
|
* with .elt. Returns null if none found. You can
|
|
* also specify a container to search within.
|
|
*
|
|
* @param name id, class, or tag name of element to
|
|
* search for
|
|
* @param [container] id, p5.Element, or HTML element
|
|
* to search within
|
|
* @return p5.Element containing node found
|
|
*/
|
|
declare function select(name: string, container?: string): object|p5.Element|null;
|
|
|
|
/**
|
|
* Searches the page for elements with the given
|
|
* class or tag name (using the '.' prefix to specify
|
|
* a class and no prefix for a tag) 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 name class or tag name of elements to
|
|
* search for
|
|
* @param [container] id, p5.Element, or HTML element
|
|
* to search within
|
|
* @return Array of p5.Elements containing nodes
|
|
* found
|
|
*/
|
|
declare function selectAll(name: string, container?: string): any[];
|
|
|
|
/**
|
|
* 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.
|
|
*
|
|
*/
|
|
declare function removeElements(): void;
|
|
|
|
/**
|
|
* Creates a <div></div> element in the DOM with
|
|
* given inner HTML. Appends to the container node if
|
|
* one is specified, otherwise appends to body.
|
|
*
|
|
* @param [html] inner HTML for element created
|
|
* @return pointer to p5.Element holding created node
|
|
*/
|
|
declare function createDiv(html?: string): object|p5.Element;
|
|
|
|
/**
|
|
* Creates a <p></p> element in the DOM with given
|
|
* inner HTML. Used for paragraph length text.
|
|
* Appends to the container node if one is specified,
|
|
* otherwise appends to body.
|
|
*
|
|
* @param [html] inner HTML for element created
|
|
* @return pointer to p5.Element holding created node
|
|
*/
|
|
declare function createP(html?: string): object|p5.Element;
|
|
|
|
/**
|
|
* Creates a <span></span> element in the DOM with
|
|
* given inner HTML. Appends to the container node if
|
|
* one is specified, otherwise appends to body.
|
|
*
|
|
* @param [html] inner HTML for element created
|
|
* @return pointer to p5.Element holding created node
|
|
*/
|
|
declare function createSpan(html?: string): object|p5.Element;
|
|
|
|
/**
|
|
* Creates an <img> element in the DOM with given src
|
|
* and alternate text. Appends to the container node
|
|
* if one is specified, otherwise appends to body.
|
|
*
|
|
* @param src src path or url for image
|
|
* @param [alt] alternate text to be used if image
|
|
* does not load
|
|
* @param [successCallback] callback to be called
|
|
* once image data is loaded
|
|
* @return pointer to p5.Element holding created node
|
|
*/
|
|
declare function createImg(src: string, alt?: string, successCallback?: Function): object|p5.Element;
|
|
|
|
/**
|
|
* Creates an <a></a> element in the DOM for
|
|
* including a hyperlink. Appends to the container
|
|
* node if one is specified, otherwise appends to
|
|
* body.
|
|
*
|
|
* @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
|
|
*/
|
|
declare function createA(href: string, html: string, target?: string): object|p5.Element;
|
|
|
|
/**
|
|
* Creates a slider <input></input> element in the
|
|
* DOM. Use .size() to set the display length of the
|
|
* slider. Appends to the container node if one is
|
|
* specified, otherwise appends to body.
|
|
*
|
|
* @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 created node
|
|
*/
|
|
declare function createSlider(min: number, max: number, value?: number, step?: number): object|p5.Element;
|
|
|
|
/**
|
|
* Creates a <button></button> element in the DOM.
|
|
* Use .size() to set the display size of the button.
|
|
* Use .mousePressed() to specify behavior on press.
|
|
* Appends to the container node if one is specified,
|
|
* otherwise appends to body.
|
|
*
|
|
* @param label label displayed on the button
|
|
* @param [value] value of the button
|
|
* @return pointer to p5.Element holding created node
|
|
*/
|
|
declare function createButton(label: string, value?: string): object|p5.Element;
|
|
|
|
/**
|
|
* Creates a checkbox <input></input> element in the
|
|
* DOM. Calling .checked() on a checkbox returns if
|
|
* 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
|
|
*/
|
|
declare function createCheckbox(label?: string, value?: boolean): object|p5.Element;
|
|
|
|
/**
|
|
* Creates a dropdown menu <select></select> element
|
|
* in the DOM. It also helps to assign select-box
|
|
* methods to p5.Element when selecting existing
|
|
* select box
|
|
*
|
|
* @param [multiple] true if dropdown should support
|
|
* multiple selections
|
|
*/
|
|
declare function createSelect(multiple?: boolean): p5.Element;
|
|
|
|
/**
|
|
* Creates a dropdown menu <select></select> element
|
|
* in the DOM. It also helps to assign select-box
|
|
* methods to p5.Element when selecting existing
|
|
* select box
|
|
*
|
|
* @param existing DOM select element
|
|
*/
|
|
declare function createSelect(existing: object): p5.Element;
|
|
|
|
/**
|
|
* Creates a radio button <input></input> element in
|
|
* the DOM. The .option() method can be used to set
|
|
* options for the radio after it is created. The
|
|
* .value() method will return the currently selected
|
|
* option.
|
|
*
|
|
* @param [divId] the id and name of the created div
|
|
* and input field respectively
|
|
* @return pointer to p5.Element holding created node
|
|
*/
|
|
declare function createRadio(divId?: string): object|p5.Element;
|
|
|
|
/**
|
|
* Creates an <input></input> element in the DOM for
|
|
* text input. Use .size() to set the display length
|
|
* of the box. Appends to the container node if one
|
|
* is specified, otherwise appends to body.
|
|
*
|
|
* @param [value] default value of the input box
|
|
* @param [type] type of text, ie text, password etc.
|
|
* Defaults to text
|
|
* @return pointer to p5.Element holding created node
|
|
*/
|
|
declare function createInput(value?: string, type?: string): object|p5.Element;
|
|
|
|
/**
|
|
* Creates an <input></input> 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 loaded
|
|
* @param [multiple] optional to allow multiple files
|
|
* selected
|
|
* @return pointer to p5.Element holding created DOM
|
|
* element
|
|
*/
|
|
declare function createFileInput(callback?: Function, multiple?: string): object|p5.Element;
|
|
|
|
/**
|
|
* Creates an HTML5 <video> element in the DOM for
|
|
* simple playback of audio/video. Shown by default,
|
|
* can be hidden with .hide() and drawn into canvas
|
|
* using video(). Appends to the container node if
|
|
* one is specified, otherwise appends to body. The
|
|
* first parameter can be either a single string path
|
|
* to a video file, or an array of string paths to
|
|
* different formats of the same video. This is
|
|
* useful for ensuring that your video can play
|
|
* across different browsers, as each supports
|
|
* different formats. See this page for further
|
|
* information about supported formats.
|
|
*
|
|
* @param src path to a video file, or array of paths
|
|
* for supporting different browsers
|
|
* @param [callback] callback function to be called
|
|
* upon 'canplaythrough' event fire, that is, when
|
|
* the browser can play the media, and estimates that
|
|
* enough data has been loaded to play the media up
|
|
* to its end without having to stop for further
|
|
* buffering of content
|
|
* @return pointer to video p5.Element
|
|
*/
|
|
declare function createVideo(src: string|any[], callback?: object): p5.MediaElement|p5.Element;
|
|
|
|
/**
|
|
* Creates a hidden HTML5 <audio> element in the DOM
|
|
* for simple audio playback. Appends to the
|
|
* container node if one is specified, otherwise
|
|
* appends to body. The first parameter can be either
|
|
* a single string path to a audio file, or an array
|
|
* of string paths to different formats of the same
|
|
* audio. This is useful for ensuring that your audio
|
|
* can play across different browsers, as each
|
|
* supports different formats. See this page for
|
|
* further information about supported formats.
|
|
*
|
|
* @param [src] path to an audio file, or array of
|
|
* paths for supporting different browsers
|
|
* @param [callback] callback function to be called
|
|
* upon 'canplaythrough' event fire, that is, when
|
|
* the browser can play the media, and estimates that
|
|
* enough data has been loaded to play the media up
|
|
* to its end without having to stop for further
|
|
* buffering of content
|
|
* @return pointer to audio p5.Element /**
|
|
*/
|
|
declare function createAudio(src?: string|string[], callback?: object): p5.MediaElement|p5.Element;
|
|
|
|
/**
|
|
* Creates a new <video> element that contains the
|
|
* audio/video feed from a webcam. This can be drawn
|
|
* onto the canvas using video(). More specific
|
|
* properties of the feed can be passing in a
|
|
* Constraints object. See the W3C spec for possible
|
|
* properties. Note that not all of these are
|
|
* supported by all browsers.
|
|
*
|
|
* Security note: A new browser security
|
|
* specification requires that getUserMedia, which is
|
|
* behind createCapture(), only works when you're
|
|
* running the code locally, or on HTTPS. Learn more
|
|
* here and here.
|
|
*
|
|
* @param type type of capture, either VIDEO or AUDIO
|
|
* if none specified, default both, or a Constraints
|
|
* object
|
|
* @param callback function to be called once stream
|
|
* has loaded
|
|
* @return capture video p5.Element
|
|
*/
|
|
declare function createCapture(type: string|any|object, callback: Function): object|p5.Element;
|
|
|
|
/**
|
|
* Creates element with given tag in the DOM with
|
|
* given content. Appends to the container node if
|
|
* one is specified, otherwise appends to body.
|
|
*
|
|
* @param tag tag for the new element
|
|
* @param [content] html content to be inserted into
|
|
* the element
|
|
* @return pointer to p5.Element holding created node
|
|
*/
|
|
declare function createElement(tag: string, content?: string): object|p5.Element;
|
|
|
|
// Properties from p5.sound
|
|
|
|
// lib/addons/p5.sound.js
|
|
|
|
/**
|
|
* Returns the Audio Context for this sketch. Useful
|
|
* for users who would like to dig deeper into the
|
|
* Web Audio API .
|
|
*
|
|
* @return AudioContext for this sketch
|
|
*/
|
|
declare function getAudioContext(): object;
|
|
|
|
/**
|
|
* Returns a number representing the master amplitude
|
|
* (volume) for sound in this sketch.
|
|
*
|
|
* @return Master amplitude (volume) for sound in
|
|
* this sketch. Should be between 0.0 (silence) and
|
|
* 1.0.
|
|
*/
|
|
declare function getMasterVolume(): number;
|
|
|
|
/**
|
|
* Scale the output of all sound in this sketch
|
|
* Scaled between 0.0 (silence) and 1.0 (full
|
|
* volume). 1.0 is the maximum amplitude of a digital
|
|
* sound, so multiplying by greater than 1.0 may
|
|
* cause digital distortion. To fade, provide a
|
|
* rampTime parameter. For more complex fades, see
|
|
* the Env class. Alternately, you can pass in a
|
|
* signal source such as an oscillator to modulate
|
|
* the amplitude with an audio signal. How This
|
|
* Works: When you load the p5.sound module, it
|
|
* creates a single instance of p5sound. All sound
|
|
* objects in this module output to p5sound before
|
|
* reaching your computer's output. So if you change
|
|
* the amplitude of p5sound, it impacts all of the
|
|
* sound in this module.
|
|
*
|
|
* If no value is provided, returns a Web Audio API
|
|
* Gain Node
|
|
*
|
|
* @param volume Volume (amplitude) between 0.0 and
|
|
* 1.0 or modulating signal/oscillator
|
|
* @param [rampTime] Fade for t seconds
|
|
* @param [timeFromNow] Schedule this event to happen
|
|
* at t seconds in the future
|
|
*/
|
|
declare function masterVolume(volume: number|object, rampTime?: number, timeFromNow?: number): void;
|
|
|
|
/**
|
|
* p5.soundOut is the p5.sound master output. It
|
|
* sends output to the destination of this window's
|
|
* web audio context. It contains Web Audio API nodes
|
|
* including a dyanmicsCompressor (.limiter), and
|
|
* Gain Nodes for .input and .output.
|
|
*
|
|
*/
|
|
declare var soundOut: object;
|