Merge pull request #32362 from p5-types/p5.js

Update p5 to 0.7.3
This commit is contained in:
Pranav Senthilnathan
2019-01-31 11:41:43 -08:00
committed by GitHub
23 changed files with 554 additions and 184 deletions
+7 -3
View File
@@ -46,8 +46,7 @@ declare module "./index" {
| CROSS
| HAND
| MOVE
| TEXT
| WAIT;
| TEXT;
type DEBUG_MODE =
| GRID
@@ -110,10 +109,15 @@ declare module "./index" {
| BEVEL
| ROUND;
type TEXTURE_MODE =
| IMAGE
| NORMAL;
type THE_STYLE =
| NORMAL
| ITALIC
| BOLD;
| BOLD
| BOLDITALIC;
type TYPE =
| VIDEO
+251 -61
View File
@@ -307,7 +307,7 @@ declare global {
/**
* The background() function sets the color used for
* the background of the p5.js canvas. The default
* background is light gray. This function is
* background is transparent. 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
@@ -344,7 +344,7 @@ declare global {
/**
* The background() function sets the color used for
* the background of the p5.js canvas. The default
* background is light gray. This function is
* background is transparent. 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
@@ -385,7 +385,7 @@ declare global {
/**
* The background() function sets the color used for
* the background of the p5.js canvas. The default
* background is light gray. This function is
* background is transparent. 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
@@ -425,7 +425,7 @@ declare global {
/**
* The background() function sets the color used for
* the background of the p5.js canvas. The default
* background is light gray. This function is
* background is transparent. 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
@@ -471,7 +471,7 @@ declare global {
/**
* The background() function sets the color used for
* the background of the p5.js canvas. The default
* background is light gray. This function is
* background is transparent. 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
@@ -508,7 +508,7 @@ declare global {
/**
* The background() function sets the color used for
* the background of the p5.js canvas. The default
* background is light gray. This function is
* background is transparent. 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
@@ -969,6 +969,7 @@ declare global {
* @param w width of the ellipse.
* @param h height of the ellipse.
* @param detail number of radial sectors to draw
* (for WebGL mode)
*/
function ellipse(
x: number,
@@ -978,6 +979,28 @@ declare global {
detail: number
): void;
/**
* Draws a circle to the screen. A circle is a simple
* closed shape. It is the set of all points in a
* plane that are at a given distance from a given
* point, the centre. This function is a special case
* of the ellipse() function, where the width and
* height of the ellipse are the same. Height and
* width of the ellipse is equal to twice the radius
* of the circle.. By default, the first two
* parameters set the location of the centre of the
* circle, the third sets the radius of the circle.
* @param x x-coordinate of the centre of the circle.
* @param y y-coordinate of the centre of the circle.
* @param r radius of the circle.
* @chainable
*/
function circle(
x: number,
y: number,
r: number
): p5;
/**
* Draws a line (a direct path between two points) to
* the screen. The version of line() with four
@@ -1034,7 +1057,7 @@ declare global {
* 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)
* @param [z] the z-coordinate (for WebGL mode)
* @chainable
*/
function point(
@@ -1164,9 +1187,9 @@ declare global {
* @param w width of the rectangle.
* @param h height of the rectangle.
* @param [detailX] number of segments in the
* x-direction
* x-direction (for WebGL mode)
* @param [detailY] number of segments in the
* y-direction
* y-direction (for WebGL mode)
* @chainable
*/
function rect(
@@ -1178,6 +1201,44 @@ declare global {
detailY?: number
): p5;
/**
* Draws a square to the screen. A square is a
* four-sided shape with every angle at ninety
* degrees, and equal side size. This function is a
* special case of the rect() function, where the
* width and height are the same, and the parameter
* is called "s" for side size. By default, the first
* two parameters set the location of the upper-left
* corner, the third sets the side size of the
* square. The way these parameters are interpreted,
* however, may be changed with the rectMode()
* function. The fourth, fifth, sixth and seventh
* parameters, if specified, determine corner radius
* for the top-left, top-right, 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 square.
* @param y y-coordinate of the square.
* @param s side size of the square.
* @param [tl] optional radius of top-left corner.
* @param [tr] optional radius of top-right corner.
* @param [br] optional radius of bottom-right
* corner.
* @param [bl] optional radius of bottom-left corner.
* @chainable
*/
function square(
x: number,
y: number,
s: number,
tl?: number,
tr?: number,
br?: number,
bl?: number
): p5;
/**
* A triangle is a plane created by connecting three
* points. The first two arguments specify the first
@@ -2085,6 +2146,7 @@ declare global {
const NORMAL: p5.NORMAL;
const ITALIC: p5.ITALIC;
const BOLD: p5.BOLD;
const BOLDITALIC: p5.BOLDITALIC;
const LANDSCAPE: p5.LANDSCAPE;
const PORTRAIT: p5.PORTRAIT;
const GRID: p5.GRID;
@@ -2116,11 +2178,17 @@ declare global {
* recommended size is 16x16 or 32x32 pixels. 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 type Built-In: either ARROW, CROSS, HAND,
* MOVE, TEXT and WAIT Native CSS properties: 'grab',
* 'progress', 'cell' etc. External: path for
* cursor's images (Allowed File extensions: .cur,
* .gif, .jpg, .jpeg, .png) For more information on
* Native CSS cursors and url visit:
* https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
* @param [x] the horizontal active spot of the
* cursor
* cursor (must be less than 32)
* @param [y] the vertical active spot of the cursor
* (must be less than 32)
*/
function cursor(
type:
@@ -2872,7 +2940,8 @@ declare global {
* 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.
* to 0.5. The threshold value can be changed using
* setMoveThreshold().
*/
function deviceMoved(): void;
@@ -2892,7 +2961,8 @@ declare global {
* device total acceleration changes of accelerationX
* and accelerationY values is more than the
* threshold value. The default threshold is set to
* 30.
* 30. The threshold value can be changed using
* setShakeThreshold().
*/
function deviceShaken(): void;
@@ -3014,6 +3084,13 @@ declare global {
* rotate direction of the device along the Z-axis.
*/
let pRotationZ: number;
/**
* When a device is rotated, the axis that triggers
* the deviceTurned() method is stored in the
* turnAxis variable. The turnAxis variable is only
* defined within the scope of deviceTurned().
*/
let turnAxis: string;
/**
@@ -3027,12 +3104,12 @@ declare global {
* 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.
* For ASCII keys, the key 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
@@ -3984,12 +4061,16 @@ declare global {
* 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],
* is
*
* let x, y, d; // set these to the coordinates let
* off = (y * width + x) * d * 4; let components = [
* pixels[off], pixels[off + 1], pixels[off + 2],
* pixels[off + 3] ]; print(components);
*
*
*
*
* See the reference for pixels[] for more
* information.
*
@@ -4105,11 +4186,11 @@ declare global {
* 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; } }
* let d = pixelDensity(); for (let i = 0; i < d;
* i++) { for (let j = 0; j < d; j++) { // loop over
* index = 4 * ((y * d + j) * width * d + (x * d +
* i)); pixels[index] = r; pixels[index+1] = g;
* pixels[index+2] = b; pixels[index+3] = a; } }
*
* While the above method is complex, it is flexible
* enough to work with any pixelDensity. Note that
@@ -4294,6 +4375,8 @@ declare global {
* - 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:
@@ -4352,6 +4435,8 @@ declare global {
* - 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:
@@ -4749,22 +4834,22 @@ declare global {
*
*
* // Saves canvas as an image save('myCanvas.jpg');
* // Saves pImage as a png image var img =
* // Saves pImage as a png image let img =
* createImage(10, 10); save(img, 'my.png'); // Saves
* canvas as an image var cnv = createCanvas(100,
* canvas as an image let cnv = createCanvas(100,
* 100); save(cnv, 'myCanvas.jpg'); // Saves
* p5.Renderer object as an image var gb =
* p5.Renderer object as an image let gb =
* createGraphics(100, 100); save(gb,
* 'myGraphics.jpg'); var myTable = new p5.Table();
* 'myGraphics.jpg'); let 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 =
* Values save(myTable, 'myTable.tsv'); let 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'];
* after each item let arrayOfStrings = ['a', 'b'];
* save(arrayOfStrings, 'my.txt');
* @param [objectOrFilename] If filename is provided,
* will save canvas as an image with either png or
@@ -4938,13 +5023,16 @@ declare global {
* 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.
* first point, 0.5 is half-way in between, and 1.0
* is equal to the second point. If the value of amt
* is more than 1.0 or less than 0.0, the number will
* be calculated accordingly in the ratio of the two
* given numbers. 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
* @param amt number
* @return lerped value
*/
function lerp(
@@ -5549,12 +5637,12 @@ declare global {
/**
* 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.
* to NORMAL, ITALIC, BOLD or BOLDITALIC. 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
* ITALIC, BOLD or BOLDITALIC
* @chainable
*/
function textStyle(
@@ -5563,10 +5651,10 @@ declare global {
/**
* 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.
* to NORMAL, ITALIC, BOLD or BOLDITALIC. Note: this
* may be is overridden by CSS styling. For
* non-system fonts (opentype, truetype, etc.) please
* load styled fonts instead.
*/
function textStyle(): string;
@@ -5601,7 +5689,7 @@ declare global {
* 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
* HTML file that links in your sketch. Loading fonts
* 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
@@ -6207,6 +6295,14 @@ declare global {
* formatting floats, and one for formatting ints.
* The values for the digits, left, and right
* parameters should always be positive integers.
* (NOTE): Be cautious when using left and right
* parameters as it prepends numbers of 0's if the
* parameter if greater than the current length of
* the number. For example if number is 123.2 and
* left parameter passed is 4 which is greater than
* length of 123 (integer part) i.e 3 than result
* will be 0123.2. Same case for right parameter i.e.
* if right is 3 than the result will be 123.200.
* @param num the Number to format
* @param [left] number of digits to the left of the
* decimal point
@@ -6232,6 +6328,14 @@ declare global {
* formatting floats, and one for formatting ints.
* The values for the digits, left, and right
* parameters should always be positive integers.
* (NOTE): Be cautious when using left and right
* parameters as it prepends numbers of 0's if the
* parameter if greater than the current length of
* the number. For example if number is 123.2 and
* left parameter passed is 4 which is greater than
* length of 123 (integer part) i.e 3 than result
* will be 0123.2. Same case for right parameter i.e.
* if right is 3 than the result will be 123.200.
* @param nums the Numbers to format
* @param [left] number of digits to the left of the
* decimal point
@@ -6333,12 +6437,27 @@ declare global {
/**
* 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.
* strings. Similar to nf() but puts an additional
* "_" (space) in front of positive numbers just in
* case to align it with negative numbers which
* includes "-" (minus) sign. The main usecase of
* nfs() can be seen when one wants to align the
* digits (place values) of a positive number with
* some negative number (See the example to get a
* clear picture). There are two versions: one for
* formatting float, and one for formatting int. The
* values for the digits, left, and right parameters
* should always be positive integers. (IMP): The
* result on the canvas basically the expected
* alignment can vary based on the typeface you are
* using. (NOTE): Be cautious when using left and
* right parameters as it prepends numbers of 0's if
* the parameter if greater than the current length
* of the number. For example if number is 123.2 and
* left parameter passed is 4 which is greater than
* length of 123 (integer part) i.e 3 than result
* will be 0123.2. Same case for right parameter i.e.
* if right is 3 than the result will be 123.200.
* @param num the Number to format
* @param [left] number of digits to the left of the
* decimal point
@@ -6354,12 +6473,27 @@ declare global {
/**
* 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.
* strings. Similar to nf() but puts an additional
* "_" (space) in front of positive numbers just in
* case to align it with negative numbers which
* includes "-" (minus) sign. The main usecase of
* nfs() can be seen when one wants to align the
* digits (place values) of a positive number with
* some negative number (See the example to get a
* clear picture). There are two versions: one for
* formatting float, and one for formatting int. The
* values for the digits, left, and right parameters
* should always be positive integers. (IMP): The
* result on the canvas basically the expected
* alignment can vary based on the typeface you are
* using. (NOTE): Be cautious when using left and
* right parameters as it prepends numbers of 0's if
* the parameter if greater than the current length
* of the number. For example if number is 123.2 and
* left parameter passed is 4 which is greater than
* length of 123 (integer part) i.e 3 than result
* will be 0123.2. Same case for right parameter i.e.
* if right is 3 than the result will be 123.200.
* @param nums the Numbers to format
* @param [left] number of digits to the left of the
* decimal point
@@ -7158,6 +7292,23 @@ declare global {
| p5.Graphics
): p5;
/**
* Sets the coordinate space for texture mapping. The
* default mode is IMAGE which refers to the actual
* coordinates of the image. NORMAL refers to a
* normalized space of values ranging from 0 to 1.
* This function only works in WEBGL mode. With
* IMAGE, if an image is 100 x 200 pixels, mapping
* the image onto the entire size of a quad would
* require the points (0,0) (100, 0) (100,200)
* (0,200). The same mapping in NORMAL is (0,0) (1,0)
* (1,1) (0,1).
* @param mode either IMAGE or NORMAL
*/
function textureMode(
mode: p5.TEXTURE_MODE
): void;
/**
* Ambient material for geometry with a given color.
* You can view all possible materials in this
@@ -7477,6 +7628,45 @@ declare global {
*/
function removeElements(): void;
/**
* The .changed() function is called when the value
* of an element changes. This can be used to attach
* an element specific event listener.
* @param fxn function to be fired when the value of
* an element changes. if false is passed instead,
* the previously firing function will no longer
* fire.
* @chainable
*/
function changed(
fxn:
| ((
...args: any[]
) => any)
| boolean
): p5;
/**
* The .input() function is called when any user
* input is detected with an element. The input event
* is often used to detect keystrokes in a input
* element, or changes on a slider element. This can
* be used to attach an element specific event
* listener.
* @param fxn function to be fired when any user
* input is detected within the element. if false is
* passed instead, the previously firing function
* will no longer fire.
* @chainable
*/
function input(
fxn:
| ((
...args: any[]
) => any)
| boolean
): p5;
/**
* Creates a <div></div> element in the DOM with
* given inner HTML. Appends to the container node if
+2 -1
View File
@@ -2,10 +2,11 @@
// Project: https://github.com/processing/p5.js
// Definitions by: p5-types <https://github.com/p5-types>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.4
// TypeScript Version: 2.9
// This file was auto-generated. Please do not edit it.
/// <reference path="./lib/addons/p5.dom.d.ts" />
/// <reference path="./src/color/creating_reading.d.ts" />
/// <reference path="./src/color/setting.d.ts" />
/// <reference path="./src/core/shape/2d_primitives.d.ts" />
+39
View File
@@ -336,6 +336,45 @@ declare module "../../index" {
*/
removeElements(): void;
/**
* The .changed() function is called when the value
* of an element changes. This can be used to attach
* an element specific event listener.
* @param fxn function to be fired when the value of
* an element changes. if false is passed instead,
* the previously firing function will no longer
* fire.
* @chainable
*/
changed(
fxn:
| ((
...args: any[]
) => any)
| boolean
): p5;
/**
* The .input() function is called when any user
* input is detected with an element. The input event
* is often used to detect keystrokes in a input
* element, or changes on a slider element. This can
* be used to attach an element specific event
* listener.
* @param fxn function to be fired when any user
* input is detected within the element. if false is
* passed instead, the previously firing function
* will no longer fire.
* @chainable
*/
input(
fxn:
| ((
...args: any[]
) => any)
| boolean
): p5;
/**
* Creates a <div></div> element in the DOM with
* given inner HTML. Appends to the container node if
+15 -12
View File
@@ -1990,7 +1990,7 @@ declare module "../../index" {
* Reverb adds depth to a sound through a large
* number of decaying echoes. It creates the
* perception that sound is occurring in a physical
* space. The p5.Reverb has parameters for Time (how
* space. The p5.Reverb has paramters for Time (how
* long does the reverb last) and decayRate (how much
* the sound decays with each echo) that can be set
* with the .set() or .process() methods. The
@@ -2270,12 +2270,13 @@ declare module "../../index" {
/**
* A p5.Part plays back one or more p5.Phrases.
* Instantiate a part with steps and tatums. By
* default, each step represents 1/16th note. See
* default, each step represents a 1/16th note. See
* p5.Phrase for more about musical timing.
*
* @param [steps] Steps in the part
* @param [tatums] Divisions of a beat (default is
* 1/16, a quarter note)
* @param [tatums] Divisions of a beat, e.g. use 1/4,
* or 0.25 for a quater note (default is 1/16, a
* sixteenth note)
*/
constructor(
steps?: number,
@@ -2293,7 +2294,7 @@ declare module "../../index" {
): void;
/**
* Returns the Beats Per Minute of this currently
* Returns the tempo, in Beats Per Minute, of this
* part.
*/
getBPM(): number;
@@ -2324,7 +2325,9 @@ declare module "../../index" {
noLoop(): void;
/**
* Stop the part and cue it to step 0.
* Stop the part and cue it to step 0. Playback will
* resume from the begining of the Part when it is
* played again.
* @param [time] seconds from now
*/
stop(
@@ -2366,9 +2369,8 @@ declare module "../../index" {
): void;
/**
* Get a phrase from this part, based on the name it
* was given when it was created. Now you can modify
* its array.
* Find all sequences with the specified name, and
* replace their patterns with the specified array.
* @param sequence Array of values to pass into the
* callback at each step of the phrase.
*/
@@ -2378,7 +2380,8 @@ declare module "../../index" {
): void;
/**
* Fire a callback function at every step.
* Set the function that will be called at every
* step. This will clear the previous function.
* @param callback The name of the callback you want
* to fire on every beat/tatum.
*/
@@ -2511,7 +2514,7 @@ declare module "../../index" {
maxIterations: number;
/**
* Getters and Setters, setting any parameter will
* Getters and Setters, setting any paramter will
* result in a change in the clock's frequency, that
* will be reflected after the next callback beats
* per minute (defaults to 60)
@@ -2588,7 +2591,7 @@ declare module "../../index" {
): void;
/**
* Set the parameters of a compressor.
* Set the paramters of a compressor.
* @param attack The amount of time (in seconds) to
* reduce the gain by 10dB, default = .003, range 0 -
* 1
+2
View File
@@ -11,6 +11,7 @@ declare module "./index" {
type BLEND = "source-over";
type BLUR = "blur";
type BOLD = "bold";
type BOLDITALIC = "bolditalic";
type BOTTOM = "bottom";
type BURN = "color-burn";
type CENTER = "center";
@@ -32,6 +33,7 @@ declare module "./index" {
type HARD_LIGHT = "hard-light";
type HSB = "hsb";
type HSL = "hsl";
type IMAGE = "image";
type INVERT = "invert";
type ITALIC = "italic";
type LANDSCAPE = "landscape";
+6 -6
View File
@@ -7,7 +7,7 @@ declare module "../../index" {
/**
* The background() function sets the color used for
* the background of the p5.js canvas. The default
* background is light gray. This function is
* background is transparent. 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
@@ -44,7 +44,7 @@ declare module "../../index" {
/**
* The background() function sets the color used for
* the background of the p5.js canvas. The default
* background is light gray. This function is
* background is transparent. 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
@@ -85,7 +85,7 @@ declare module "../../index" {
/**
* The background() function sets the color used for
* the background of the p5.js canvas. The default
* background is light gray. This function is
* background is transparent. 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
@@ -125,7 +125,7 @@ declare module "../../index" {
/**
* The background() function sets the color used for
* the background of the p5.js canvas. The default
* background is light gray. This function is
* background is transparent. 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
@@ -171,7 +171,7 @@ declare module "../../index" {
/**
* The background() function sets the color used for
* the background of the p5.js canvas. The default
* background is light gray. This function is
* background is transparent. 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
@@ -208,7 +208,7 @@ declare module "../../index" {
/**
* The background() function sets the color used for
* the background of the p5.js canvas. The default
* background is light gray. This function is
* background is transparent. 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
+1
View File
@@ -128,6 +128,7 @@ declare module "../../index" {
readonly NORMAL: NORMAL;
readonly ITALIC: ITALIC;
readonly BOLD: BOLD;
readonly BOLDITALIC: BOLDITALIC;
readonly LANDSCAPE: LANDSCAPE;
readonly PORTRAIT: PORTRAIT;
readonly GRID: GRID;
+9 -3
View File
@@ -30,11 +30,17 @@ declare module "../../index" {
* recommended size is 16x16 or 32x32 pixels. 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 type Built-In: either ARROW, CROSS, HAND,
* MOVE, TEXT and WAIT Native CSS properties: 'grab',
* 'progress', 'cell' etc. External: path for
* cursor's images (Allowed File extensions: .cur,
* .gif, .jpg, .jpeg, .png) For more information on
* Native CSS cursors and url visit:
* https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
* @param [x] the horizontal active spot of the
* cursor
* cursor (must be less than 32)
* @param [y] the vertical active spot of the cursor
* (must be less than 32)
*/
cursor(
type:
+10 -41
View File
@@ -10,7 +10,11 @@ declare module "../../index" {
* Accepts either a string ID, DOM node, or
* p5.Element. If no arguments given, parent node is
* returned. For more ways to position the canvas,
* see the positioning the canvas wiki page.
* see the positioning the canvas wiki page. All
* above examples except for the first one require
* the inclusion of the p5.dom library in your
* index.html. See the using a library section for
* information on how to include this library.
* @param parent the ID, DOM node, or p5.Element of
* desired parent element
* @chainable
@@ -28,7 +32,11 @@ declare module "../../index" {
* Accepts either a string ID, DOM node, or
* p5.Element. If no arguments given, parent node is
* returned. For more ways to position the canvas,
* see the positioning the canvas wiki page.
* see the positioning the canvas wiki page. All
* above examples except for the first one require
* the inclusion of the p5.dom library in your
* index.html. See the using a library section for
* information on how to include this library.
*/
parent(): Element;
@@ -218,45 +226,6 @@ declare module "../../index" {
| boolean
): Element;
/**
* The .changed() function is called when the value
* of an element changes. This can be used to attach
* an element specific event listener.
* @param fxn function to be fired when the value of
* an element changes. if false is passed instead,
* the previously firing function will no longer
* fire.
* @chainable
*/
changed(
fxn:
| ((
...args: any[]
) => any)
| boolean
): Element;
/**
* The .input() function is called when any user
* input is detected with an element. The input event
* is often used to detect keystrokes in a input
* element, or changes on a slider element. This can
* be used to attach an element specific event
* listener.
* @param fxn function to be fired when any user
* input is detected within the element. if false is
* passed instead, the previously firing function
* will no longer fire.
* @chainable
*/
input(
fxn:
| ((
...args: any[]
) => any)
| boolean
): Element;
/**
* The .mouseOut() function is called once after
* every time a mouse moves off the element. This can
+64 -3
View File
@@ -84,6 +84,7 @@ declare module "../../../index" {
* @param w width of the ellipse.
* @param h height of the ellipse.
* @param detail number of radial sectors to draw
* (for WebGL mode)
*/
ellipse(
x: number,
@@ -93,6 +94,28 @@ declare module "../../../index" {
detail: number
): void;
/**
* Draws a circle to the screen. A circle is a simple
* closed shape. It is the set of all points in a
* plane that are at a given distance from a given
* point, the centre. This function is a special case
* of the ellipse() function, where the width and
* height of the ellipse are the same. Height and
* width of the ellipse is equal to twice the radius
* of the circle.. By default, the first two
* parameters set the location of the centre of the
* circle, the third sets the radius of the circle.
* @param x x-coordinate of the centre of the circle.
* @param y y-coordinate of the centre of the circle.
* @param r radius of the circle.
* @chainable
*/
circle(
x: number,
y: number,
r: number
): p5;
/**
* Draws a line (a direct path between two points) to
* the screen. The version of line() with four
@@ -149,7 +172,7 @@ declare module "../../../index" {
* 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)
* @param [z] the z-coordinate (for WebGL mode)
* @chainable
*/
point(
@@ -279,9 +302,9 @@ declare module "../../../index" {
* @param w width of the rectangle.
* @param h height of the rectangle.
* @param [detailX] number of segments in the
* x-direction
* x-direction (for WebGL mode)
* @param [detailY] number of segments in the
* y-direction
* y-direction (for WebGL mode)
* @chainable
*/
rect(
@@ -293,6 +316,44 @@ declare module "../../../index" {
detailY?: number
): p5;
/**
* Draws a square to the screen. A square is a
* four-sided shape with every angle at ninety
* degrees, and equal side size. This function is a
* special case of the rect() function, where the
* width and height are the same, and the parameter
* is called "s" for side size. By default, the first
* two parameters set the location of the upper-left
* corner, the third sets the side size of the
* square. The way these parameters are interpreted,
* however, may be changed with the rectMode()
* function. The fourth, fifth, sixth and seventh
* parameters, if specified, determine corner radius
* for the top-left, top-right, 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 square.
* @param y y-coordinate of the square.
* @param s side size of the square.
* @param [tl] optional radius of top-left corner.
* @param [tr] optional radius of top-right corner.
* @param [br] optional radius of bottom-right
* corner.
* @param [bl] optional radius of bottom-left corner.
* @chainable
*/
square(
x: number,
y: number,
s: number,
tl?: number,
tr?: number,
br?: number,
bl?: number
): p5;
/**
* A triangle is a plane created by connecting three
* points. The first two arguments specify the first
+11 -2
View File
@@ -28,7 +28,8 @@ declare module "../../index" {
* 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.
* to 0.5. The threshold value can be changed using
* setMoveThreshold().
*/
deviceMoved(): void;
@@ -48,7 +49,8 @@ declare module "../../index" {
* device total acceleration changes of accelerationX
* and accelerationY values is more than the
* threshold value. The default threshold is set to
* 30.
* 30. The threshold value can be changed using
* setShakeThreshold().
*/
deviceShaken(): void;
@@ -170,6 +172,13 @@ declare module "../../index" {
* rotate direction of the device along the Z-axis.
*/
pRotationZ: number;
/**
* When a device is rotated, the axis that triggers
* the deviceTurned() method is stored in the
* turnAxis variable. The turnAxis variable is only
* defined within the scope of deviceTurned().
*/
turnAxis: string;
}
}
+6 -6
View File
@@ -15,12 +15,12 @@ declare module "../../index" {
* 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.
* For ASCII keys, the key 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
+5 -5
View File
@@ -308,11 +308,11 @@ declare module "../../index" {
* 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; } }
* let d = pixelDensity(); for (let i = 0; i < d;
* i++) { for (let j = 0; j < d; j++) { // loop over
* index = 4 * ((y * d + j) * width * d + (x * d +
* i)); pixels[index] = r; pixels[index+1] = g;
* pixels[index+2] = b; pixels[index+3] = a; } }
*
*
*
+12 -8
View File
@@ -225,12 +225,16 @@ declare module "../../index" {
* 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],
* is
*
* let x, y, d; // set these to the coordinates let
* off = (y * width + x) * d * 4; let components = [
* pixels[off], pixels[off + 1], pixels[off + 2],
* pixels[off + 3] ]; print(components);
*
*
*
*
* See the reference for pixels[] for more
* information.
*
@@ -346,11 +350,11 @@ declare module "../../index" {
* 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; } }
* let d = pixelDensity(); for (let i = 0; i < d;
* i++) { for (let j = 0; j < d; j++) { // loop over
* index = 4 * ((y * d + j) * width * d + (x * d +
* i)); pixels[index] = r; pixels[index+1] = g;
* pixels[index+2] = b; pixels[index+3] = a; } }
*
* While the above method is complex, it is flexible
* enough to work with any pixelDensity. Note that
+10 -6
View File
@@ -197,6 +197,8 @@ declare module "../../index" {
* - 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:
@@ -255,6 +257,8 @@ declare module "../../index" {
* - 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:
@@ -652,22 +656,22 @@ declare module "../../index" {
*
*
* // Saves canvas as an image save('myCanvas.jpg');
* // Saves pImage as a png image var img =
* // Saves pImage as a png image let img =
* createImage(10, 10); save(img, 'my.png'); // Saves
* canvas as an image var cnv = createCanvas(100,
* canvas as an image let cnv = createCanvas(100,
* 100); save(cnv, 'myCanvas.jpg'); // Saves
* p5.Renderer object as an image var gb =
* p5.Renderer object as an image let gb =
* createGraphics(100, 100); save(gb,
* 'myGraphics.jpg'); var myTable = new p5.Table();
* 'myGraphics.jpg'); let 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 =
* Values save(myTable, 'myTable.tsv'); let 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'];
* after each item let arrayOfStrings = ['a', 'b'];
* save(arrayOfStrings, 'my.txt');
* @param [objectOrFilename] If filename is provided,
* will save canvas as an image with either png or
+8
View File
@@ -189,5 +189,13 @@ declare module "../../index" {
setContent(
text: string
): void;
/**
* Serializes the element into a string. This
* function is useful for preparing the content to be
* sent over a http request or saved to file.
* @return Serialized string of the element
*/
serialize(): string;
}
}
+8 -5
View File
@@ -101,13 +101,16 @@ declare module "../../index" {
* 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.
* first point, 0.5 is half-way in between, and 1.0
* is equal to the second point. If the value of amt
* is more than 1.0 or less than 0.0, the number will
* be calculated accordingly in the ratio of the two
* given numbers. 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
* @param amt number
* @return lerped value
*/
lerp(
+9 -9
View File
@@ -88,12 +88,12 @@ declare module "../../index" {
/**
* 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.
* to NORMAL, ITALIC, BOLD or BOLDITALIC. 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
* ITALIC, BOLD or BOLDITALIC
* @chainable
*/
textStyle(
@@ -102,10 +102,10 @@ declare module "../../index" {
/**
* 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.
* to NORMAL, ITALIC, BOLD or BOLDITALIC. Note: this
* may be is overridden by CSS styling. For
* non-system fonts (opentype, truetype, etc.) please
* load styled fonts instead.
*/
textStyle(): string;
+1 -1
View File
@@ -10,7 +10,7 @@ declare module "../../index" {
* 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
* HTML file that links in your sketch. Loading fonts
* 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
+3
View File
@@ -12,7 +12,10 @@ declare module "../../index" {
* @param x x-position
* @param y y-position
* @param [fontSize] font size to use (optional)
* Default is 12.
* @param [options] opentype options (optional)
* opentype fonts contains alignment and baseline
* options. Default is 'LEFT' and 'alphabetic'
* @return a rectangle object with properties: x, y,
* w, h
*/
+58 -12
View File
@@ -90,6 +90,14 @@ declare module "../../index" {
* formatting floats, and one for formatting ints.
* The values for the digits, left, and right
* parameters should always be positive integers.
* (NOTE): Be cautious when using left and right
* parameters as it prepends numbers of 0's if the
* parameter if greater than the current length of
* the number. For example if number is 123.2 and
* left parameter passed is 4 which is greater than
* length of 123 (integer part) i.e 3 than result
* will be 0123.2. Same case for right parameter i.e.
* if right is 3 than the result will be 123.200.
* @param num the Number to format
* @param [left] number of digits to the left of the
* decimal point
@@ -115,6 +123,14 @@ declare module "../../index" {
* formatting floats, and one for formatting ints.
* The values for the digits, left, and right
* parameters should always be positive integers.
* (NOTE): Be cautious when using left and right
* parameters as it prepends numbers of 0's if the
* parameter if greater than the current length of
* the number. For example if number is 123.2 and
* left parameter passed is 4 which is greater than
* length of 123 (integer part) i.e 3 than result
* will be 0123.2. Same case for right parameter i.e.
* if right is 3 than the result will be 123.200.
* @param nums the Numbers to format
* @param [left] number of digits to the left of the
* decimal point
@@ -216,12 +232,27 @@ declare module "../../index" {
/**
* 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.
* strings. Similar to nf() but puts an additional
* "_" (space) in front of positive numbers just in
* case to align it with negative numbers which
* includes "-" (minus) sign. The main usecase of
* nfs() can be seen when one wants to align the
* digits (place values) of a positive number with
* some negative number (See the example to get a
* clear picture). There are two versions: one for
* formatting float, and one for formatting int. The
* values for the digits, left, and right parameters
* should always be positive integers. (IMP): The
* result on the canvas basically the expected
* alignment can vary based on the typeface you are
* using. (NOTE): Be cautious when using left and
* right parameters as it prepends numbers of 0's if
* the parameter if greater than the current length
* of the number. For example if number is 123.2 and
* left parameter passed is 4 which is greater than
* length of 123 (integer part) i.e 3 than result
* will be 0123.2. Same case for right parameter i.e.
* if right is 3 than the result will be 123.200.
* @param num the Number to format
* @param [left] number of digits to the left of the
* decimal point
@@ -237,12 +268,27 @@ declare module "../../index" {
/**
* 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.
* strings. Similar to nf() but puts an additional
* "_" (space) in front of positive numbers just in
* case to align it with negative numbers which
* includes "-" (minus) sign. The main usecase of
* nfs() can be seen when one wants to align the
* digits (place values) of a positive number with
* some negative number (See the example to get a
* clear picture). There are two versions: one for
* formatting float, and one for formatting int. The
* values for the digits, left, and right parameters
* should always be positive integers. (IMP): The
* result on the canvas basically the expected
* alignment can vary based on the typeface you are
* using. (NOTE): Be cautious when using left and
* right parameters as it prepends numbers of 0's if
* the parameter if greater than the current length
* of the number. For example if number is 123.2 and
* left parameter passed is 4 which is greater than
* length of 123 (integer part) i.e 3 than result
* will be 0123.2. Same case for right parameter i.e.
* if right is 3 than the result will be 123.200.
* @param nums the Numbers to format
* @param [left] number of digits to the left of the
* decimal point
+17
View File
@@ -63,6 +63,23 @@ declare module "../../index" {
| Graphics
): p5;
/**
* Sets the coordinate space for texture mapping. The
* default mode is IMAGE which refers to the actual
* coordinates of the image. NORMAL refers to a
* normalized space of values ranging from 0 to 1.
* This function only works in WEBGL mode. With
* IMAGE, if an image is 100 x 200 pixels, mapping
* the image onto the entire size of a quad would
* require the points (0,0) (100, 0) (100,200)
* (0,200). The same mapping in NORMAL is (0,0) (1,0)
* (1,1) (0,1).
* @param mode either IMAGE or NORMAL
*/
textureMode(
mode: TEXTURE_MODE
): void;
/**
* Ambient material for geometry with a given color.
* You can view all possible materials in this