diff --git a/types/p5/constants.d.ts b/types/p5/constants.d.ts index 808e55b72e..df2bc6d3c7 100644 --- a/types/p5/constants.d.ts +++ b/types/p5/constants.d.ts @@ -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 diff --git a/types/p5/global.d.ts b/types/p5/global.d.ts index 6dd593e282..13bcd8acc4 100644 --- a/types/p5/global.d.ts +++ b/types/p5/global.d.ts @@ -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
element in the DOM with * given inner HTML. Appends to the container node if diff --git a/types/p5/index.d.ts b/types/p5/index.d.ts index f87978d993..47ec26df31 100644 --- a/types/p5/index.d.ts +++ b/types/p5/index.d.ts @@ -2,10 +2,11 @@ // Project: https://github.com/processing/p5.js // Definitions by: 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. +/// /// /// /// diff --git a/types/p5/lib/addons/p5.dom.d.ts b/types/p5/lib/addons/p5.dom.d.ts index 7a4f2e096b..8566cf1cf3 100644 --- a/types/p5/lib/addons/p5.dom.d.ts +++ b/types/p5/lib/addons/p5.dom.d.ts @@ -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
element in the DOM with * given inner HTML. Appends to the container node if diff --git a/types/p5/lib/addons/p5.sound.d.ts b/types/p5/lib/addons/p5.sound.d.ts index faa16f7e1b..b6eb3c5e87 100644 --- a/types/p5/lib/addons/p5.sound.d.ts +++ b/types/p5/lib/addons/p5.sound.d.ts @@ -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 diff --git a/types/p5/literals.d.ts b/types/p5/literals.d.ts index 0dc8f8b65a..d1e6aed943 100644 --- a/types/p5/literals.d.ts +++ b/types/p5/literals.d.ts @@ -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"; diff --git a/types/p5/src/color/setting.d.ts b/types/p5/src/color/setting.d.ts index c02a705a1e..9a9d01fc2c 100644 --- a/types/p5/src/color/setting.d.ts +++ b/types/p5/src/color/setting.d.ts @@ -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 diff --git a/types/p5/src/core/constants.d.ts b/types/p5/src/core/constants.d.ts index 4daaadfca5..6bed1232f5 100644 --- a/types/p5/src/core/constants.d.ts +++ b/types/p5/src/core/constants.d.ts @@ -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; diff --git a/types/p5/src/core/environment.d.ts b/types/p5/src/core/environment.d.ts index e226544030..be0346f244 100644 --- a/types/p5/src/core/environment.d.ts +++ b/types/p5/src/core/environment.d.ts @@ -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: diff --git a/types/p5/src/core/p5.Element.d.ts b/types/p5/src/core/p5.Element.d.ts index dbd32afdb6..43fda2ced9 100644 --- a/types/p5/src/core/p5.Element.d.ts +++ b/types/p5/src/core/p5.Element.d.ts @@ -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 diff --git a/types/p5/src/core/shape/2d_primitives.d.ts b/types/p5/src/core/shape/2d_primitives.d.ts index 4cced6ef5c..aa8ab3c8e9 100644 --- a/types/p5/src/core/shape/2d_primitives.d.ts +++ b/types/p5/src/core/shape/2d_primitives.d.ts @@ -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 diff --git a/types/p5/src/events/acceleration.d.ts b/types/p5/src/events/acceleration.d.ts index 7c9ea98e2f..1c6f43c7ce 100644 --- a/types/p5/src/events/acceleration.d.ts +++ b/types/p5/src/events/acceleration.d.ts @@ -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; } } diff --git a/types/p5/src/events/keyboard.d.ts b/types/p5/src/events/keyboard.d.ts index 3226d6e741..d7d5fa2d40 100644 --- a/types/p5/src/events/keyboard.d.ts +++ b/types/p5/src/events/keyboard.d.ts @@ -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 diff --git a/types/p5/src/image/p5.Image.d.ts b/types/p5/src/image/p5.Image.d.ts index 08278f9b54..98df046fe0 100644 --- a/types/p5/src/image/p5.Image.d.ts +++ b/types/p5/src/image/p5.Image.d.ts @@ -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; } } * * * diff --git a/types/p5/src/image/pixels.d.ts b/types/p5/src/image/pixels.d.ts index 85164e4447..dfdc6b9cfb 100644 --- a/types/p5/src/image/pixels.d.ts +++ b/types/p5/src/image/pixels.d.ts @@ -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 diff --git a/types/p5/src/io/files.d.ts b/types/p5/src/io/files.d.ts index 75b7eb9a41..5f8c9e059d 100644 --- a/types/p5/src/io/files.d.ts +++ b/types/p5/src/io/files.d.ts @@ -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 diff --git a/types/p5/src/io/p5.XML.d.ts b/types/p5/src/io/p5.XML.d.ts index fe5220e61f..731f63a423 100644 --- a/types/p5/src/io/p5.XML.d.ts +++ b/types/p5/src/io/p5.XML.d.ts @@ -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; } } diff --git a/types/p5/src/math/calculation.d.ts b/types/p5/src/math/calculation.d.ts index 82698236c5..cc57b50823 100644 --- a/types/p5/src/math/calculation.d.ts +++ b/types/p5/src/math/calculation.d.ts @@ -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( diff --git a/types/p5/src/typography/attributes.d.ts b/types/p5/src/typography/attributes.d.ts index 06cb7f9571..cf8a2f651c 100644 --- a/types/p5/src/typography/attributes.d.ts +++ b/types/p5/src/typography/attributes.d.ts @@ -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; diff --git a/types/p5/src/typography/loading_displaying.d.ts b/types/p5/src/typography/loading_displaying.d.ts index c02a5d9a4e..35e72263f1 100644 --- a/types/p5/src/typography/loading_displaying.d.ts +++ b/types/p5/src/typography/loading_displaying.d.ts @@ -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 diff --git a/types/p5/src/typography/p5.Font.d.ts b/types/p5/src/typography/p5.Font.d.ts index 7b6803393e..001540a17a 100644 --- a/types/p5/src/typography/p5.Font.d.ts +++ b/types/p5/src/typography/p5.Font.d.ts @@ -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 */ diff --git a/types/p5/src/utilities/string_functions.d.ts b/types/p5/src/utilities/string_functions.d.ts index da531a0303..4a46731d7d 100644 --- a/types/p5/src/utilities/string_functions.d.ts +++ b/types/p5/src/utilities/string_functions.d.ts @@ -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 diff --git a/types/p5/src/webgl/material.d.ts b/types/p5/src/webgl/material.d.ts index 09f392d7e8..ecdf389ee7 100644 --- a/types/p5/src/webgl/material.d.ts +++ b/types/p5/src/webgl/material.d.ts @@ -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