diff --git a/Gruntfile.js b/Gruntfile.js index 851c3a9057..1625c6e527 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -456,7 +456,7 @@ module.exports = function(grunt) { const done = this.async(); const languages = pkg.languages; const promises = []; - const {assert} = require('chai'); + // const {assert} = require('chai'); try { for (const language of languages) { @@ -468,9 +468,7 @@ module.exports = function(grunt) { const files = await glob(`./src/data/localization/${language}/*.ftl`); for (const file of files) { - if ( - file !== `./src/data/localization/${language}/root.ftl` - ) { + if (file !== `./src/data/localization/${language}/root.ftl`) { const key = path.basename(file, '.ftl'); const fileData = await fs.readFile(file, {encoding: 'utf8'}); const jsonData = fluentConverter.ftlToObj(fileData); @@ -485,7 +483,7 @@ module.exports = function(grunt) { console.log('SEP'); console.log(newData[key][entry]); console.log('END'); - assert.deepEqual(inner, newData[key][entry]); + // assert.deepEqual(inner, newData[key][entry]); }); } } diff --git a/getenJSON.js b/getenJSON.js index c6c8cafa10..5eeeebaeb7 100644 --- a/getenJSON.js +++ b/getenJSON.js @@ -61,7 +61,7 @@ function buildClassObj(p5Class) { } if (p5Class.return) { - classObj['returns'] = buildReturnObj(p5Class.return); + classObj['returns'] = buildReturnObj(p5Class.return).trim(); } if (p5Class.params) { @@ -77,7 +77,7 @@ function buildItemObj(p5Item) { itemObj['description'] = getParagraphs(p5Item.description); } if (p5Item.return) { - itemObj['returns'] = buildReturnObj(p5Item.return); + itemObj['returns'] = buildReturnObj(p5Item.return).trim(); } if (p5Item.itemtype === 'method') { @@ -88,7 +88,7 @@ function buildItemObj(p5Item) { itemObj = getOverloads(p5Item, itemObj); } } - return itemObj.description; + return itemObj; } function buildReturnObj(returns) { diff --git a/src/data/reference/en.json b/src/data/reference/en.json index 3c35818994..e26111adba 100644 --- a/src/data/reference/en.json +++ b/src/data/reference/en.json @@ -73,1379 +73,3627 @@ "sketch": "Function: a closure that can set optional preload(), setup(), and/or draw() properties on the given p5 instance", "node": "HTMLElement: (Optional) element to attach canvas to" }, - "describe": [ - "Creates a screen reader accessible description for the canvas. The first parameter should be a string with a description of the canvas. The second parameter is optional. If specified, it determines how the description is displayed.", - "describe(text, LABEL) displays the description to all users as a tombstone or exhibit label/caption in a div adjacent to the canvas. You can style it as you wish in your CSS.", - "describe(text, FALLBACK) makes the description accessible to screen-reader users only, in a sub DOM inside the canvas element. If a second parameter is not specified, by default, the description will only be available to screen-reader users." - ], - "describeElement": [ - "This function creates a screen-reader accessible description for elements —shapes or groups of shapes that create meaning together— in the canvas. The first paramater should be the name of the element. The second parameter should be a string with a description of the element. The third parameter is optional. If specified, it determines how the element description is displayed.", - "describeElement(name, text, LABEL) displays the element description to all users as a tombstone or exhibit label/caption in a div adjacent to the canvas. You can style it as you wish in your CSS.", - "describeElement(name, text, FALLBACK) makes the element description accessible to screen-reader users only, in a sub DOM inside the canvas element. If a second parameter is not specified, by default, the element description will only be available to screen-reader users." - ], - "textOutput": [ - "textOutput() creates a screenreader accessible output that describes the shapes present on the canvas. The general description of the canvas includes canvas size, canvas color, and number of elements in the canvas (example: 'Your output is a, 400 by 400 pixels, lavender blue canvas containing the following 4 shapes:'). This description is followed by a list of shapes where the color, position, and area of each shape are described (example: \"orange ellipse at top left covering 1% of the canvas\"). Each element can be selected to get more details. A table of elements is also provided. In this table, shape, color, location, coordinates and area are described (example: \"orange ellipse location=top left area=2\").", - "textOutput() and textOutput(FALLBACK) make the output available in a sub DOM inside the canvas element which is accessible to screen readers. textOutput(LABEL) creates an additional div with the output adjacent to the canvas, this is useful for non-screen reader users that might want to display the output outside of the canvas' sub DOM as they code. However, using LABEL will create unnecessary redundancy for screen reader users. We recommend using LABEL only as part of the development process of a sketch and removing it before publishing or sharing with screen reader users." - ], - "gridOutput": [ - "gridOutput() lays out the content of the canvas in the form of a grid (html table) based on the spatial location of each shape. A brief description of the canvas is available before the table output. This description includes: color of the background, size of the canvas, number of objects, and object types (example: \"lavender blue canvas is 200 by 200 and contains 4 objects - 3 ellipses 1 rectangle\"). The grid describes the content spatially, each element is placed on a cell of the table depending on its position. Within each cell an element the color and type of shape of that element are available (example: \"orange ellipse\"). These descriptions can be selected individually to get more details. A list of elements where shape, color, location, and area are described (example: \"orange ellipse location=top left area=1%\") is also available.", - "gridOutput() and gridOutput(FALLBACK) make the output available in a sub DOM inside the canvas element which is accessible to screen readers. gridOutput(LABEL) creates an additional div with the output adjacent to the canvas, this is useful for non-screen reader users that might want to display the output outside of the canvas' sub DOM as they code. However, using LABEL will create unnecessary redundancy for screen reader users. We recommend using LABEL only as part of the development process of a sketch and removing it before publishing or sharing with screen reader users." - ], - "alpha": [ - "Extracts the alpha value from a color or pixel array." - ], - "blue": [ - "Extracts the blue value from a color or pixel array." - ], - "brightness": [ - "Extracts the HSB brightness value from a color or pixel array." - ], - "color": [ - "Creates colors for storing in variables of the color datatype. The parameters are interpreted as RGB or HSB values depending on the current colorMode(). The default mode is RGB values from 0 to 255 and, therefore, the function call color(255, 204, 0) will return a bright yellow color.", - "Note that if only one value is provided to color(), it will be interpreted as a grayscale value. Add a second value, and it will be used for alpha transparency. When three values are specified, they are interpreted as either RGB or HSB values. Adding a fourth value applies alpha transparency.", - "If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used." - ], - "green": [ - "Extracts the green value from a color or pixel array." - ], - "hue": [ - "Extracts the hue value from a color or pixel array.", - "Hue exists in both HSB and HSL. This function will return the HSB-normalized hue when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL-normalized hue otherwise. (The values will only be different if the maximum hue setting for each system is different.)" - ], - "lerpColor": [ - "Blends two colors to find a third color somewhere between them. The amt parameter is the amount to interpolate between the two values where 0.0 is equal to the first color, 0.1 is very near the first color, 0.5 is halfway in between, etc. An amount below 0 will be treated as 0. Likewise, amounts above 1 will be capped at 1. This is different from the behavior of lerp(), but necessary because otherwise numbers outside the range will produce strange and unexpected colors.", - "The way that colors are interpolated depends on the current color mode." - ], - "lightness": [ - "Extracts the HSL lightness value from a color or pixel array." - ], - "red": [ - "Extracts the red value from a color or pixel array." - ], - "saturation": [ - "Extracts the saturation value from a color or pixel array.", - "Saturation is scaled differently in HSB and HSL. This function will return the HSB saturation when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL saturation otherwise." - ], - "background": [ - "The background() function sets the color used for the background of the p5.js canvas. The default 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 the first frame of animation or if the background need only be set once.", - "The color is either specified in terms of the RGB, HSB, or HSL color depending on the current colorMode. (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.", - "If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.", - "A p5.Color object can also be provided to set the background color.", - "A p5.Image can also be provided to set the background image." - ], - "clear": [ - "Clears the pixels within a buffer. This function only clears the canvas. It will not clear objects created by createX() methods such as createVideo() or createDiv(). Unlike the main graphics context, pixels in additional graphics areas created with createGraphics() can be entirely or partially transparent. This function clears everything to make all of the pixels 100% transparent." - ], - "colorMode": [ - "colorMode() changes the way p5.js interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using the RGB color model. This is equivalent to setting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB system instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You can also use HSL.", - "Note: existing color objects remember the mode that they were created in, so you can change modes as you like without affecting their appearance." - ], - "fill": [ - "Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all shapes drawn after the fill command will be filled with the color orange. This color is either specified in terms of the RGB or HSB color depending on the current colorMode(). (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.", - "If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.", - "A p5 Color object can also be provided to set the fill color." - ], - "noFill": [ - "Disables filling geometry. If both noStroke() and noFill() are called, nothing will be drawn to the screen." - ], - "noStroke": [ - "Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen." - ], - "stroke": [ - "Sets the color used to draw lines and borders around shapes. This color is either specified in terms of the RGB or HSB color depending on the current colorMode() (the default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.", - "If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.", - "A p5 Color object can also be provided to set the stroke color." - ], - "erase": [ - "All drawing that follows erase() will subtract from the canvas.Erased areas will reveal the web page underneath the canvas.Erasing can be canceled with noErase().", - "Drawing done with image() and background() in between erase() and noErase() will not erase the canvas but works as usual." - ], - "noErase": [ - "Ends erasing that was started with erase(). The fill(), stroke(), and blendMode() settings will return to what they were prior to calling erase()." - ], - "arc": [ - "Draw an arc to the screen. If called with only x, y, w, h, start and stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc will be filled like an open semi-circle (OPEN), a closed semi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed with the ellipseMode() function.", - "The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse. Adding or subtracting TWO_PI to either angle does not change where they fall. If both start and stop fall at the same place, a full ellipse will be drawn. Be aware that the y-axis increases in the downward direction, therefore angles are measured clockwise from the positive x-direction (\"3 o'clock\")." - ], - "ellipse": [ - "Draws an ellipse (oval) to the screen. By default, the first two parameters set the location of the center of the ellipse, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken.", - "An ellipse with equal width and height is a circle. The origin may be changed with the ellipseMode() function." - ], - "circle": [ - "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 correspond to the diameter of the circle. By default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle." - ], - "line": [ - "Draws a line (a direct path between two points) to the screen. If called with only 4 parameters, it will draw a line in 2D with a default width of 1 pixel. This width can be modified by using the strokeWeight() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. So to color a line, use the stroke() function." - ], - "point": [ - "Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second param is the vertical value for the point. The color of the point is changed with the stroke() function. The size of the point can be changed with the strokeWeight() function." - ], - "quad": [ - "Draws a quad on the canvas. A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape. z-arguments only work when quad() is used in WEBGL mode." - ], - "rect": [ - "Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted, may be changed with the rectMode() function.", - "The fifth, sixth, seventh and eighth 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." - ], - "square": [ - "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, 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." - ], - "triangle": [ - "Draws a triangle to the canvas. A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point." - ], - "ellipseMode": [ - "Modifies the location from which ellipses are drawn by changing the way in which parameters given to ellipse(), circle() and arc() are interpreted.", - "The default mode is CENTER, in which the first two parameters are interpreted as the shape's center point's x and y coordinates respectively, while the third and fourth parameters are its width and height.", - "ellipseMode(RADIUS) also uses the first two parameters as the shape's center point's x and y coordinates, but uses the third and fourth parameters to specify half of the shapes's width and height.", - "ellipseMode(CORNER) interprets the first two parameters as the upper-left corner of the shape, while the third and fourth parameters are its width and height.", - "ellipseMode(CORNERS) interprets the first two parameters as the location of one corner of the ellipse's bounding box, and the third and fourth parameters as the location of the opposite corner.", - "The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language." - ], - "noSmooth": [ - "Draws all geometry with jagged (aliased) edges. Note that smooth() is active by default in 2D mode, so it is necessary to call noSmooth() to disable smoothing of geometry, images, and fonts. In 3D mode, noSmooth() is enabled by default, so it is necessary to call smooth() if you would like smooth (antialiased) edges on your geometry." - ], - "rectMode": [ - "Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are interpreted.", - "The default mode is CORNER, which interprets the first two parameters as the upper-left corner of the shape, while the third and fourth parameters are its width and height.", - "rectMode(CORNERS) interprets the first two parameters as the location of one of the corners, and the third and fourth parameters as the location of the diagonally opposite corner. Note, the rectangle is drawn between the coordinates, so it is not neccesary that the first corner be the upper left corner.", - "rectMode(CENTER) interprets the first two parameters as the shape's center point, while the third and fourth parameters are its width and height.", - "rectMode(RADIUS) also uses the first two parameters as the shape's center point, but uses the third and fourth parameters to specify half of the shape's width and height respectively.", - "The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language." - ], - "smooth": [ - "Draws all geometry with smooth (anti-aliased) edges. smooth() will also improve image quality of resized images. Note that smooth() is active by default in 2D mode; noSmooth() can be used to disable smoothing of geometry, images, and fonts. In 3D mode, noSmooth() is enabled by default, so it is necessary to call smooth() if you would like smooth (antialiased) edges on your geometry." - ], - "strokeCap": [ - "Sets the style for rendering line endings. These ends are either rounded, squared or extended, each of which specified with the corresponding parameters: ROUND, SQUARE and PROJECT. The default cap is ROUND.", - "The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language." - ], - "strokeJoin": [ - "Sets the style of the joints which connect line segments. These joints are either mitered, beveled or rounded and specified with the corresponding parameters MITER, BEVEL and ROUND. The default joint is MITER.", - "The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language." - ], - "strokeWeight": [ - "Sets the width of the stroke used for lines, points and the border around shapes. All widths are set in units of pixels." - ], - "bezier": [ - "Draws a cubic Bezier curve on the screen. These curves are defined by a series of anchor and control points. The first two parameters specify the first anchor point and the last two parameters specify the other anchor point, which become the first and last points on the curve. The middle parameters specify the two control points which define the shape of the curve. Approximately speaking, control points \"pull\" the curve towards them.", - "Bezier curves were developed by French automotive engineer Pierre Bezier, and are commonly used in computer graphics to define gently sloping curves. See also curve()." - ], - "bezierDetail": [ - "Sets the resolution at which Bezier's curve is displayed. The default value is 20.", - "Note, This function is only useful when using the WEBGL renderer as the default canvas renderer does not use this information." - ], - "bezierPoint": [ - "Given the x or y co-ordinate values of control and anchor points of a bezier curve, it evaluates the x or y coordinate of the bezier at position t. The parameters a and d are the x or y coordinates of first and last points on the curve while b and c are of the control points.The final parameter t is the position of the resultant point which is given between 0 and 1. This can be done once with the x coordinates and a second time with the y coordinates to get the location of a bezier curve at t." - ], - "bezierTangent": [ - "Evaluates the tangent to the Bezier at position t for points a, b, c, d. The parameters a and d are the first and last points on the curve, and b and c are the control points. The final parameter t varies between 0 and 1." - ], - "curve": [ - "Draws a curved line on the screen between two points, given as the middle four parameters. The first two parameters are a control point, as if the curve came from this point even though it's not drawn. The last two parameters similarly describe the other control point.

Longer curves can be created by putting a series of curve() functions together or using curveVertex(). An additional function called curveTightness() provides control for the visual quality of the curve. The curve() function is an implementation of Catmull-Rom splines." - ], - "curveDetail": [ - "Sets the resolution at which curves display. The default value is 20 while the minimum value is 3.", - "This function is only useful when using the WEBGL renderer as the default canvas renderer does not use this information." - ], - "curveTightness": [ - "Modifies the quality of forms created with curve() and curveVertex().The parameter tightness determines how the curve fits to the vertex points. The value 0.0 is the default value for tightness (this value defines the curves to be Catmull-Rom splines) and the value 1.0 connects all the points with straight lines. Values within the range -5.0 and 5.0 will deform the curves but will leave them recognizable and as values increase in magnitude, they will continue to deform." - ], - "curvePoint": [ - "Evaluates the curve at position t for points a, b, c, d. The parameter t varies between 0 and 1, a and d are control points of the curve, and b and c are the start and end points of the curve. This can be done once with the x coordinates and a second time with the y coordinates to get the location of a curve at t." - ], - "curveTangent": [ - "Evaluates the tangent to the curve at position t for points a, b, c, d. The parameter t varies between 0 and 1, a and d are points on the curve, and b and c are the control points." - ], - "beginContour": [ - "Use the beginContour() and endContour() functions to create negative shapes within shapes such as the center of the letter 'O'. beginContour() begins recording vertices for the shape and endContour() stops recording. The vertices that define a negative shape must \"wind\" in the opposite direction from the exterior shape. First draw vertices for the exterior clockwise order, then for internal shapes, draw vertices shape in counter-clockwise.", - "These functions can only be used within a beginShape()/endShape() pair and transformations such as translate(), rotate(), and scale() do not work within a beginContour()/endContour() pair. It is also not possible to use other shapes, such as ellipse() or rect() within." - ], - "beginShape": [ - "Using the beginShape() and endShape() functions allow creating more complex forms. beginShape() begins recording vertices for a shape and endShape() stops recording. The value of the kind parameter tells it which types of shapes to create from the provided vertices. With no mode specified, the shape can be any irregular polygon.", - "The parameters available for beginShape() are:", - "POINTS Draw a series of points", - "LINES Draw a series of unconnected line segments (individual lines)", - "TRIANGLES Draw a series of separate triangles", - "TRIANGLE_FAN Draw a series of connected triangles sharing the first vertex in a fan-like fashion", - "TRIANGLE_STRIP Draw a series of connected triangles in strip fashion", - "QUADS Draw a series of seperate quad", - "QUAD_STRIP Draw quad strip using adjacent edges to form the next quad", - "TESS (WebGl only) Handle irregular polygon for filling curve by explicit tessellation", - "After calling the beginShape() function, a series of vertex() commands must follow. To stop drawing the shape, call endShape(). Each shape will be outlined with the current stroke color and filled with the fill color.", - "Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape()." - ], - "bezierVertex": [ - "Specifies vertex coordinates for Bezier curves. Each call to bezierVertex() defines the position of two control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. For WebGL mode bezierVertex() can be used in 2D as well as 3D mode. 2D mode expects 6 parameters, while 3D mode expects 9 parameters (including z coordinates).", - "The first time bezierVertex() is used within a beginShape() call, it must be prefaced with a call to vertex() to set the first anchor point. This function must be used between beginShape() and endShape() and only when there is no MODE or POINTS parameter specified to beginShape()." - ], - "curveVertex": [ - "Specifies vertex coordinates for curves. This function may only be used between beginShape() and endShape() and only when there is no MODE parameter specified to beginShape(). For WebGL mode curveVertex() can be used in 2D as well as 3D mode. 2D mode expects 2 parameters, while 3D mode expects 3 parameters.", - "The first and last points in a series of curveVertex() lines will be used to guide the beginning and end of a the curve. A minimum of four points is required to draw a tiny curve between the second and third points. Adding a fifth point with curveVertex() will draw the curve between the second, third, and fourth points. The curveVertex() function is an implementation of Catmull-Rom splines." - ], - "endContour": [ - "Use the beginContour() and endContour() functions to create negative shapes within shapes such as the center of the letter 'O'. beginContour() begins recording vertices for the shape and endContour() stops recording. The vertices that define a negative shape must \"wind\" in the opposite direction from the exterior shape. First draw vertices for the exterior clockwise order, then for internal shapes, draw vertices shape in counter-clockwise.", - "These functions can only be used within a beginShape()/endShape() pair and transformations such as translate(), rotate(), and scale() do not work within a beginContour()/endContour() pair. It is also not possible to use other shapes, such as ellipse() or rect() within." - ], - "endShape": [ - "The endShape() function is the companion to beginShape() and may only be called after beginShape(). When endShape() is called, all of image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE as the value for the MODE parameter to close the shape (to connect the beginning and the end)." - ], - "quadraticVertex": [ - "Specifies vertex coordinates for quadratic Bezier curves. Each call to quadraticVertex() defines the position of one control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. The first time quadraticVertex() is used within a beginShape() call, it must be prefaced with a call to vertex() to set the first anchor point. For WebGL mode quadraticVertex() can be used in 2D as well as 3D mode. 2D mode expects 4 parameters, while 3D mode expects 6 parameters (including z coordinates).", - "This function must be used between beginShape() and endShape() and only when there is no MODE or POINTS parameter specified to beginShape()." - ], - "vertex": [ - "All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons. It is used exclusively within the beginShape() and endShape() functions." - ], - "normal": [ - "Sets the 3d vertex normal to use for subsequent vertices drawn with vertex(). A normal is a vector that is generally nearly perpendicular to a shape's surface which controls how much light will be reflected from that part of the surface." - ], - "VERSION": [ - "Version of this p5.js." - ], - "P2D": [ - "The default, two-dimensional renderer." - ], - "WEBGL": [ - "One of the two render modes in p5.js: P2D (default renderer) and WEBGL Enables 3D render by introducing the third dimension: Z" - ], - "HALF_PI": [ - "HALF_PI is a mathematical constant with the value 1.57079632679489661923. It is half the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos()." - ], - "PI": [ - "PI is a mathematical constant with the value 3.14159265358979323846. It is the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos()." - ], - "QUARTER_PI": [ - "QUARTER_PI is a mathematical constant with the value 0.7853982. It is one quarter the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos()." - ], - "TAU": [ - "TAU is an alias for TWO_PI, a mathematical constant with the value 6.28318530717958647693. It is twice the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos()." - ], - "TWO_PI": [ - "TWO_PI is a mathematical constant with the value 6.28318530717958647693. It is twice the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos()." - ], - "DEGREES": [ - "Constant to be used with angleMode() function, to set the mode which p5.js interprets and calculates angles (either DEGREES or RADIANS)." - ], - "RADIANS": [ - "Constant to be used with angleMode() function, to set the mode which p5.js interprets and calculates angles (either RADIANS or DEGREES)." - ], - "HSB": [ - "HSB (hue, saturation, brightness) is a type of color model. You can learn more about it at HSB." - ], - "AUTO": [ - "AUTO allows us to automatically set the width or height of an element (but not both), based on the current height and width of the element. Only one parameter can be passed to the size function as AUTO, at a time." - ], - "print": [ - "The print() function writes to the console area of your browser. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes (\"\") and joined with the addition operator (+).", - "Note that calling print() without any arguments invokes the window.print() function which opens the browser's print dialog. To print a blank line to console you can write print('\\n')." - ], - "frameCount": [ - "The system variable frameCount contains the number of frames that have been displayed since the program started. Inside setup() the value is 0, after the first iteration of draw it is 1, etc." - ], - "deltaTime": [ - "The system variable deltaTime contains the time difference between the beginning of the previous frame and the beginning of the current frame in milliseconds.", - "This variable is useful for creating time sensitive animation or physics calculation that should stay constant regardless of frame rate." - ], - "focused": [ - "Confirms if the window a p5.js program is in is \"focused,\" meaning that the sketch will accept mouse or keyboard input. This variable is \"true\" if the window is focused and \"false\" if not." - ], - "cursor": [ - "Sets the cursor to a predefined symbol or an image, or makes it visible if already hidden. If you are trying to set an image as the cursor, the recommended size is 16x16 or 32x32 pixels. The values for parameters x and y must be less than the dimensions of the image." - ], - "frameRate": [ - "Specifies the number of frames to be displayed every second. For example, the function call frameRate(30) will attempt to refresh 30 times a second. If the processor is not fast enough to maintain the specified rate, the frame rate will not be achieved. Setting the frame rate within setup() is recommended. The default frame rate is based on the frame rate of the display (here also called \"refresh rate\"), which is set to 60 frames per second on most computers. A frame rate of 24 frames per second (usual for movies) or above will be enough for smooth animations. This is the same as setFrameRate(val).", - "Calling frameRate() with no arguments returns the current framerate. The draw function must run at least once before it will return a value. This is the same as getFrameRate().", - "Calling frameRate() with arguments that are not of the type numbers or are non positive also returns current framerate." - ], - "noCursor": [ - "Hides the cursor from view." - ], - "displayWidth": [ - "System variable that stores the width of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity." - ], - "displayHeight": [ - "System variable that stores the height of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity." - ], - "windowWidth": [ - "System variable that stores the width of the inner window, it maps to window.innerWidth." - ], - "windowHeight": [ - "System variable that stores the height of the inner window, it maps to window.innerHeight." - ], - "windowResized": [ - "The windowResized() function is called once every time the browser window is resized. This is a good place to resize the canvas or do any other adjustments to accommodate the new window size." - ], - "width": [ - "System variable that stores the width of the drawing canvas. This value is set by the first parameter of the createCanvas() function. For example, the function call createCanvas(320, 240) sets the width variable to the value 320. The value of width defaults to 100 if createCanvas() is not used in a program." - ], - "height": [ - "System variable that stores the height of the drawing canvas. This value is set by the second parameter of the createCanvas() function. For example, the function call createCanvas(320, 240) sets the height variable to the value 240. The value of height defaults to 100 if createCanvas() is not used in a program." - ], - "fullscreen": [ - "If argument is given, sets the sketch to fullscreen or not based on the value of the argument. If no argument is given, returns the current fullscreen state. Note that due to browser restrictions this can only be called on user input, for example, on mouse press like the example below." - ], - "pixelDensity": [ - "Sets the pixel scaling for high pixel density displays. By default pixel density is set to match display density, call pixelDensity(1) to turn this off. Calling pixelDensity() with no arguments returns the current pixel density of the sketch." - ], - "displayDensity": [ - "Returns the pixel density of the current display the sketch is running on." - ], - "getURL": [ - "Gets the current URL. Note: when using the p5 Editor, this will return an empty object because the sketch is embedded in an iframe. It will work correctly if you view the sketch using the editor's present or share URLs." - ], - "getURLPath": [ - "Gets the current URL path as an array. Note: when using the p5 Editor, this will return an empty object because the sketch is embedded in an iframe. It will work correctly if you view the sketch using the editor's present or share URLs." - ], - "getURLParams": [ - "Gets the current URL params as an Object. Note: when using the p5 Editor, this will return an empty object because the sketch is embedded in an iframe. It will work correctly if you view the sketch using the editor's present or share URLs." - ], - "preload": [ - "Called directly before setup(), the preload() function is used to handle asynchronous loading of external files in a blocking way. If a preload function is defined, setup() will wait until any load calls within have finished. Nothing besides load calls (loadImage, loadJSON, loadFont, loadStrings, etc.) should be inside the preload function. If asynchronous loading is preferred, the load methods can instead be called in setup() or anywhere else with the use of a callback parameter.", - "By default the text \"loading...\" will be displayed. To make your own loading page, include an HTML element with id \"p5_loading\" in your page. More information here." - ], - "setup": [ - "The setup() function is called once when the program starts. It's used to define initial environment properties such as screen size and background color and to load media such as images and fonts as the program starts. There can only be one setup() function for each program and it shouldn't be called again after its initial execution.", - "Note: Variables declared within setup() are not accessible within other functions, including draw()." - ], - "draw": [ - "Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called. Note if noLoop() is called in setup(), draw() will still be executed once before stopping. draw() is called automatically and should never be called explicitly.", - "It should always be controlled with noLoop(), redraw() and loop(). After noLoop() stops the code in draw() from executing, redraw() causes the code inside draw() to execute once, and loop() will cause the code inside draw() to resume executing continuously.", - "The number of times draw() executes in each second may be controlled with the frameRate() function.", - "There can only be one draw() function for each sketch, and draw() must exist if you want the code to run continuously, or to process events such as mousePressed(). Sometimes, you might have an empty call to draw() in your program, as shown in the above example.", - "It is important to note that the drawing coordinate system will be reset at the beginning of each draw() call. If any transformations are performed within draw() (ex: scale, rotate, translate), their effects will be undone at the beginning of draw(), so transformations will not accumulate over time. On the other hand, styling applied (ex: fill, stroke, etc) will remain in effect." - ], - "remove": [ - "Removes the entire p5 sketch. This will remove the canvas and any elements created by p5.js. It will also stop the draw loop and unbind any properties or methods from the window global scope. It will leave a variable p5 in case you wanted to create a new p5 sketch. If you like, you can set p5 = null to erase it. While all functions and variables and objects created by the p5 library will be removed, any other global variables created by your code will remain." - ], - "disableFriendlyErrors": [ - "Allows for the friendly error system (FES) to be turned off when creating a sketch, which can give a significant boost to performance when needed. See disabling the friendly error system." - ], - "let": [ - "Creates and names a new variable. A variable is a container for a value.", - "Variables that are declared with let will have block-scope. This means that the variable only exists within the block that it is created within.", - "From the MDN entry: Declares a block scope local variable, optionally initializing it to a value." - ], - "const": [ - "Creates and names a new constant. Like a variable created with let, a constant that is created with const is a container for a value, however constants cannot be reassigned once they are declared. Although it is noteworthy that for non-primitive data types like objects & arrays, their elements can still be changeable. So if a variable is assigned an array, you can still add or remove elements from the array but cannot reassign another array to it. Also unlike let, you cannot declare variables without value using const.", - "Constants have block-scope. This means that the constant only exists within the block that it is created within. A constant cannot be redeclared within a scope in which it already exists.", - "From the MDN entry: Declares a read-only named constant. Constants are block-scoped, much like variables defined using the 'let' statement. The value of a constant can't be changed through reassignment, and it can't be redeclared." - ], - "===": [ - "The strict equality operator === checks to see if two values are equal and of the same type.", - "A comparison expression always evaluates to a boolean.", - "From the MDN entry: The non-identity operator returns true if the operands are not equal and/or not of the same type.", - "Note: In some examples around the web you may see a double-equals-sign ==, used for comparison instead. This is the non-strict equality operator in Javascript. This will convert the two values being compared to the same type before comparing them." - ], - ">": [ - "The greater than operator \">> evaluates to true if the left value is greater than the right value. There is more info on comparison operators on MDN." - ], - ">=": [ - "The greater than or equal to operator =\">>= evaluates to true if the left value is greater than or equal to the right value.", - "There is more info on comparison operators on MDN." - ], - "<": [ - "The less than operator < evaluates to true if the left value is less than the right value.", - "There is more info on comparison operators on MDN." - ], - "<=": [ - "The less than or equal to operator <= evaluates to true if the left value is less than or equal to the right value.", - "There is more info on comparison operators on MDN." - ], - "if-else": [ - "The if-else statement helps control the flow of your code.", - "A condition is placed between the parenthesis following 'if', when that condition evalues to truthy, the code between the following curly braces is run. Alternatively, when the condition evaluates to falsy, the code between the curly braces of 'else' block is run instead. Writing an else block is optional.", - "From the MDN entry: The 'if' statement executes a statement if a specified condition is truthy. If the condition is falsy, another statement can be executed" - ], - "function": [ - "Creates and names a function. A function is a set of statements that perform a task.", - "Optionally, functions can have parameters. Parameters are variables that are scoped to the function, that can be assigned a value when calling the function.Multiple parameters can be given by seperating them with commmas.", - "From the MDN entry: Declares a function with the specified parameters." - ], - "return": [ - "Specifies the value to be returned by a function. For more info checkout the MDN entry for return." - ], - "boolean": [ - "Converts a number or string to its boolean representation. For a number, any non-zero value (positive or negative) evaluates to true, while zero evaluates to false. For a string, the value \"true\" evaluates to true, while any other value evaluates to false. When an array of number or string values is passed in, then a array of booleans of the same length is returned." - ], - "string": [ - "A string is one of the 7 primitive data types in Javascript. A string is a series of text characters. In Javascript, a string value must be surrounded by either single-quotation marks(') or double-quotation marks(\").", - "From the MDN entry: A string is a sequence of characters used to represent text." - ], - "number": [ - "A number is one of the 7 primitive data types in Javascript. A number can be a whole number or a decimal number.", - "The MDN entry for number" - ], - "object": [ - "From MDN's object basics: An object is a collection of related data and/or functionality (which usually consists of several variables and functions — which are called properties and methods when they are inside objects.)" - ], - "class": [ - "Creates and names a class which is a template for the creation of objects.", - "From the MDN entry: The class declaration creates a new Class with a given name using prototype-based inheritance." - ], - "for": [ - "for creates a loop that is useful for executing one section of code multiple times.", - "A 'for loop' consists of three different expressions inside of a parenthesis, all of which are optional.These expressions are used to control the number of times the loop is run.The first expression is a statement that is used to set the initial state for the loop.The second expression is a condition that you would like to check before each loop. If this expression returns false then the loop will exit.The third expression is executed at the end of each loop. These expression are separated by ; (semi-colon).In case of an empty expression, only a semi-colon is written.", - "The code inside of the loop body (in between the curly braces) is executed between the evaluation of the second and third expression.", - "As with any loop, it is important to ensure that the loop can 'exit', or that the test condition will eventually evaluate to false. The test condition with a for loop is the second expression detailed above. Ensuring that this expression can eventually become false ensures that your loop doesn't attempt to run an infinite amount of times, which can crash your browser.", - "From the MDN entry: Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once." - ], - "while": [ - "while creates a loop that is useful for executing one section of code multiple times.", - "With a 'while loop', the code inside of the loop body (between the curly braces) is run repeatedly until the test condition (inside of the parenthesis) evaluates to false. The condition is tested before executing the code body with while, so if the condition is initially false the loop body, or statement, will never execute.", - "As with any loop, it is important to ensure that the loop can 'exit', or that the test condition will eventually evaluate to false. This is to keep your loop from trying to run an infinite amount of times, which can crash your browser.", - "From the MDN entry: The while statement creates a loop that executes a specified statement as long as the test condition evaluates to true.The condition is evaluated before executing the statement." - ], - "createCanvas": [ - "Creates a canvas element in the document, and sets the dimensions of it in pixels. This method should be called only once at the start of setup. Calling createCanvas more than once in a sketch will result in very unpredictable behavior. If you want more than one drawing canvas you could use createGraphics (hidden by default but it can be shown).", - "Important note: in 2D mode (i.e. when p5.Renderer is not set) the origin (0,0) is positioned at the top left of the screen. In 3D mode (i.e. when p5.Renderer is set to WEBGL), the origin is positioned at the center of the canvas. See this issue for more information.", - "The system variables width and height are set by the parameters passed to this function. If createCanvas() is not used, the window will be given a default size of 100x100 pixels.", - "For more ways to position the canvas, see the positioning the canvas wiki page." - ], - "resizeCanvas": [ - "Resizes the canvas to given width and height. The canvas will be cleared and draw will be called immediately, allowing the sketch to re-render itself in the resized canvas." - ], - "noCanvas": [ - "Removes the default canvas for a p5 sketch that doesn't require a canvas" - ], - "createGraphics": [ - "Creates and returns a new p5.Renderer object. Use this class if you need to draw into an off-screen graphics buffer. The two parameters define the width and height in pixels." - ], - "blendMode": [ - "Blends the pixels in the display window according to the defined mode. There is a choice of the following modes to blend the source pixels (A) with the ones of pixels already in the display window (B): ", - "(2D) indicates that this blend mode only works in the 2D renderer. (3D) indicates that this blend mode only works in the WEBGL renderer." - ], - "drawingContext": [ - "The p5.js API provides a lot of functionality for creating graphics, but there is some native HTML5 Canvas functionality that is not exposed by p5. You can still call it directly using the variable drawingContext, as in the example shown. This is the equivalent of calling canvas.getContext('2d'); or canvas.getContext('webgl');. See this reference for the native canvas API for possible drawing functions you can call." - ], - "noLoop": [ - "Stops p5.js from continuously executing the code within draw(). If loop() is called, the code in draw() begins to run continuously again. If using noLoop() in setup(), it should be the last line inside the block.", - "When noLoop() is used, it's not possible to manipulate or access the screen inside event handling functions such as mousePressed() or keyPressed(). Instead, use those functions to call redraw() or loop(), which will run draw(), which can update the screen properly. This means that when noLoop() has been called, no drawing can happen, and functions like saveFrames() or loadPixels() may not be used.", - "Note that if the sketch is resized, redraw() will be called to update the sketch, even after noLoop() has been specified. Otherwise, the sketch would enter an odd state until loop() was called.", - "Use isLooping() to check current state of loop()." - ], - "loop": [ - "By default, p5.js loops through draw() continuously, executing the code within it. However, the draw() loop may be stopped by calling noLoop(). In that case, the draw() loop can be resumed with loop().", - "Avoid calling loop() from inside setup().", - "Use isLooping() to check current state of loop()." - ], - "isLooping": [ - "By default, p5.js loops through draw() continuously, executing the code within it. If the sketch is stopped with noLoop() or resumed with loop(), isLooping() returns the current state for use within custom event handlers." - ], - "push": [ - "The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)", - "push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), noFill(), noStroke(), stroke(), tint(), noTint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(), applyMatrix(), resetMatrix(), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed().", - "In WEBGL mode additional style settings are stored. These are controlled by the following functions: setCamera(), ambientLight(), directionalLight(), pointLight(), texture(), specularMaterial(), shininess(), normalMaterial() and shader()." - ], - "pop": [ - "The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)", - "push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), noFill(), noStroke(), stroke(), tint(), noTint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(), applyMatrix(), resetMatrix(), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed().", - "In WEBGL mode additional style settings are stored. These are controlled by the following functions: setCamera(), ambientLight(), directionalLight(), pointLight(), texture(), specularMaterial(), shininess(), normalMaterial() and shader()." - ], - "redraw": [ - "Executes the code within draw() one time. This function allows the program to update the display window only when necessary, for example when an event registered by mousePressed() or keyPressed() occurs.", - "In structuring a program, it only makes sense to call redraw() within events such as mousePressed(). This is because redraw() does not run draw() immediately (it only sets a flag that indicates an update is needed).", - "The redraw() function does not work properly when called inside draw().To enable/disable animations, use loop() and noLoop().", - "In addition you can set the number of redraws per method call. Just add an integer as single parameter for the number of redraws." - ], - "p5": [ - "The p5() constructor enables you to activate \"instance mode\" instead of normal \"global mode\". This is an advanced topic. A short description and example is included below. Please see Dan Shiffman's Coding Train video tutorial or this tutorial page for more info.", - "By default, all p5.js functions are in the global namespace (i.e. bound to the window object), meaning you can call them simply ellipse(), fill(), etc. However, this might be inconvenient if you are mixing with other JS libraries (synchronously or asynchronously) or writing long programs of your own. p5.js currently supports a way around this problem called \"instance mode\". In instance mode, all p5 functions are bound up in a single variable instead of polluting your global namespace.", - "Optionally, you can specify a default container for the canvas and any other elements to append to with a second argument. You can give the ID of an element in your html, or an html node itself.", - "Note that creating instances like this also allows you to have more than one p5 sketch on a single web page, as they will each be wrapped up with their own set up variables. Of course, you could also use iframes to have multiple sketches in global mode." - ], - "applyMatrix": [ - "Multiplies the current matrix by the one specified through the parameters. This is a powerful operation that can perform the equivalent of translate, scale, shear and rotate all at once. You can learn more about transformation matrices on Wikipedia.", - "The naming of the arguments here follows the naming of the WHATWG specification and corresponds to a transformation matrix of the form:
", - "\"The
" - ], - "resetMatrix": [ - "Replaces the current matrix with the identity matrix." - ], - "rotate": [ - "Rotates a shape by the amount specified by the angle parameter. This function accounts for angleMode, so angles can be entered in either RADIANS or DEGREES.", - "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). All transformations are reset when draw() begins again.", - "Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop()." - ], - "rotateX": [ - "Rotates a shape around X axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES.", - "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All transformations are reset when draw() begins again." - ], - "rotateY": [ - "Rotates a shape around Y axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES.", - "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All transformations are reset when draw() begins again." - ], - "rotateZ": [ - "Rotates a shape around Z axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES.", - "This method works in WEBGL mode only.", - "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All transformations are reset when draw() begins again." - ], - "scale": [ - "Increases or decreases the size of a shape by expanding or contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call scale(2.0) increases the dimension of a shape by 200%.", - "Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0). If scale() is called within draw(), the transformation is reset when the loop begins again.", - "Using this function with the z parameter is only available in WEBGL mode. This function can be further controlled with push() and pop()." - ], - "shearX": [ - "Shears a shape around the x-axis by the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.", - "Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI). If shearX() is called within the draw(), the transformation is reset when the loop begins again.", - "Technically, shearX() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions." - ], - "shearY": [ - "Shears a shape around the y-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.", - "Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If shearY() is called within the draw(), the transformation is reset when the loop begins again.", - "Technically, shearY() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions." - ], - "translate": [ - "Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation.", - "Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). If translate() is called within draw(), the transformation is reset when the loop begins again. This function can be further controlled by using push() and pop()." - ], - "storeItem": [ - "Stores a value in local storage under the key name. Local storage is saved in the browser and persists between browsing sessions and page reloads. The key can be the name of the variable but doesn't have to be. To retrieve stored items see getItem. Sensitive data such as passwords or personal information should not be stored in local storage." - ], - "getItem": [ - "Returns the value of an item that was stored in local storage using storeItem()" - ], - "clearStorage": [ - "Clears all local storage items set with storeItem() for the current domain." - ], - "removeItem": [ - "Removes an item that was stored with storeItem()" - ], - "createStringDict": [ - "Creates a new instance of p5.StringDict using the key-value pair or the object you provide." - ], - "createNumberDict": [ - "Creates a new instance of p5.NumberDict using the key-value pair or object you provide." - ], - "select": [ - "Searches the page for the first element that matches the given CSS selector string (can be an ID, class, tag name or a combination) and returns it as a p5.Element. The DOM node itself can be accessed with .elt. Returns null if none found. You can also specify a container to search within." - ], - "selectAll": [ - "Searches the page for elements that match the given CSS selector string (can be an ID a class, tag name or a combination) and returns them as p5.Elements in an array. The DOM node itself can be accessed with .elt. Returns an empty array if none found. You can also specify a container to search within." - ], - "removeElements": [ - "Removes all elements created by p5, except any canvas / graphics elements created by createCanvas or createGraphics. Event handlers are removed, and element is removed from the DOM." - ], - "changed": [ - "The .changed() function is called when the value of an element changes. This can be used to attach an element specific event listener." - ], - "input": [ - "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." - ], - "createDiv": [ - "Creates a <div></div> element in the DOM with given inner HTML." - ], - "createP": [ - "Creates a <p></p> element in the DOM with given inner HTML. Used for paragraph length text." - ], - "createSpan": [ - "Creates a <span></span> element in the DOM with given inner HTML." - ], - "createImg": [ - "Creates an <img> element in the DOM with given src and alternate text." - ], - "createA": [ - "Creates an <a></a> element in the DOM for including a hyperlink." - ], - "createSlider": [ - "Creates a slider <input></input> element in the DOM. Use .size() to set the display length of the slider." - ], - "createButton": [ - "Creates a <button></button> element in the DOM. Use .size() to set the display size of the button. Use .mousePressed() to specify behavior on press." - ], - "createCheckbox": [ - "Creates a checkbox <input></input> element in the DOM. Calling .checked() on a checkbox returns if it is checked or not" - ], - "createSelect": [ - "Creates a dropdown menu <select></select> element in the DOM. It also helps to assign select-box methods to p5.Element when selecting existing select box. " - ], - "createRadio": [ - "Creates a radio button element in the DOM.It also helps existing radio buttons assign methods of p5.Element. " - ], - "createColorPicker": [ - "Creates a colorPicker element in the DOM for color input. The .value() method will return a hex string (#rrggbb) of the color. The .color() method will return a p5.Color object with the current chosen color." - ], - "createInput": [ - "Creates an <input></input> element in the DOM for text input. Use .size() to set the display length of the box." - ], - "createFileInput": [ - "Creates an <input></input> element in the DOM of type 'file'. This allows users to select local files for use in a sketch." - ], - "createVideo": [ - "Creates an HTML5 <video> element in the DOM for simple playback of audio/video. Shown by default, can be hidden with .hide() and drawn into canvas using image(). The first parameter can be either a single string path to a video file, or an array of string paths to different formats of the same video. This is useful for ensuring that your video can play across different browsers, as each supports different formats. See this page for further information about supported formats." - ], - "createAudio": [ - "Creates a hidden HTML5 <audio> element in the DOM for simple audio playback. The first parameter can be either a single string path to a audio file, or an array of string paths to different formats of the same audio. This is useful for ensuring that your audio can play across different browsers, as each supports different formats. See this page for further information about supported formats." - ], - "createCapture": [ - "Creates a new HTML5 <video> element that contains the audio/video feed from a webcam. The element is separate from the canvas and is displayed by default. The element can be hidden using .hide(). The feed can be drawn onto the canvas using image(). The loadedmetadata property can be used to detect when the element has fully loaded (see second example).", - "More specific properties of the feed can be passing in a Constraints object. See the W3C spec for possible properties. Note that not all of these are supported by all browsers.", - "Security note: A new browser security specification requires that getUserMedia, which is behind createCapture(), only works when you're running the code locally, or on HTTPS. Learn more here and here." - ], - "createElement": [ - "Creates element with given tag in the DOM with given content." - ], - "deviceOrientation": [ - "The system variable deviceOrientation always contains the orientation of the device. The value of this variable will either be set 'landscape' or 'portrait'. If no data is available it will be set to 'undefined'. either LANDSCAPE or PORTRAIT." - ], - "accelerationX": [ - "The system variable accelerationX always contains the acceleration of the device along the x axis. Value is represented as meters per second squared." - ], - "accelerationY": [ - "The system variable accelerationY always contains the acceleration of the device along the y axis. Value is represented as meters per second squared." - ], - "accelerationZ": [ - "The system variable accelerationZ always contains the acceleration of the device along the z axis. Value is represented as meters per second squared." - ], - "pAccelerationX": [ - "The system variable pAccelerationX always contains the acceleration of the device along the x axis in the frame previous to the current frame. Value is represented as meters per second squared." - ], - "pAccelerationY": [ - "The system variable pAccelerationY always contains the acceleration of the device along the y axis in the frame previous to the current frame. Value is represented as meters per second squared." - ], - "pAccelerationZ": [ - "The system variable pAccelerationZ always contains the acceleration of the device along the z axis in the frame previous to the current frame. Value is represented as meters per second squared." - ], - "rotationX": [ - "The system variable rotationX always contains the rotation of the device along the x axis. If the sketch angleMode() is set to DEGREES, the value will be -180 to 180. If it is set to RADIANS, the value will be -PI to PI.", - "Note: The order the rotations are called is important, ie. if used together, it must be called in the order Z-X-Y or there might be unexpected behaviour." - ], - "rotationY": [ - "The system variable rotationY always contains the rotation of the device along the y axis. If the sketch angleMode() is set to DEGREES, the value will be -90 to 90. If it is set to RADIANS, the value will be -PI/2 to PI/2.", - "Note: The order the rotations are called is important, ie. if used together, it must be called in the order Z-X-Y or there might be unexpected behaviour." - ], - "rotationZ": [ - "The system variable rotationZ always contains the rotation of the device along the z axis. If the sketch angleMode() is set to DEGREES, the value will be 0 to 360. If it is set to RADIANS, the value will be 0 to 2*PI.", - "Unlike rotationX and rotationY, this variable is available for devices with a built-in compass only.", - "Note: The order the rotations are called is important, ie. if used together, it must be called in the order Z-X-Y or there might be unexpected behaviour." - ], - "pRotationX": [ - "The system variable pRotationX always contains the rotation of the device along the x axis in the frame previous to the current frame. If the sketch angleMode() is set to DEGREES, the value will be -180 to 180. If it is set to RADIANS, the value will be -PI to PI.", - "pRotationX can also be used with rotationX to determine the rotate direction of the device along the X-axis." - ], - "pRotationY": [ - "The system variable pRotationY always contains the rotation of the device along the y axis in the frame previous to the current frame. If the sketch angleMode() is set to DEGREES, the value will be -90 to 90. If it is set to RADIANS, the value will be -PI/2 to PI/2.", - "pRotationY can also be used with rotationY to determine the rotate direction of the device along the Y-axis." - ], - "pRotationZ": [ - "The system variable pRotationZ always contains the rotation of the device along the z axis in the frame previous to the current frame. If the sketch angleMode() is set to DEGREES, the value will be 0 to 360. If it is set to RADIANS, the value will be 0 to 2*PI.", - "pRotationZ can also be used with rotationZ to determine the rotate direction of the device along the Z-axis." - ], - "turnAxis": [ - "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()." - ], - "setMoveThreshold": [ - "The setMoveThreshold() function is used to set the movement threshold for the deviceMoved() function. The default threshold is set to 0.5." - ], - "setShakeThreshold": [ - "The setShakeThreshold() function is used to set the movement threshold for the deviceShaken() function. The default threshold is set to 30." - ], - "deviceMoved": [ - "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. The threshold value can be changed using setMoveThreshold()." - ], - "deviceTurned": [ - "The deviceTurned() function is called when the device rotates by more than 90 degrees continuously.", - "The axis that triggers the deviceTurned() method is stored in the turnAxis variable. The deviceTurned() method can be locked to trigger on any axis: X, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'." - ], - "deviceShaken": [ - "The deviceShaken() function is called when the device total acceleration changes of accelerationX and accelerationY values is more than the threshold value. The default threshold is set to 30. The threshold value can be changed using setShakeThreshold()." - ], - "keyIsPressed": [ - "The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed." - ], - "key": [ - "The system variable key always contains the value of the most recent key on the keyboard that was typed. To get the proper capitalization, it is best to use it within keyTyped(). For non-ASCII keys, use the keyCode variable." - ], - "keyCode": [ - "The variable keyCode is used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. You can also check for custom keys by looking up the keyCode of any key on a site like this: keycode.info." - ], - "keyPressed": [ - "The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable.", - "For non-ASCII keys, use the keyCode variable. You can check if the keyCode equals BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.", - "For ASCII keys, 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 repeats, holding down a key may cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add \"return false\" to the end of the method." - ], - "keyReleased": [ - "The keyReleased() function is called once every time a key is released. See key and keyCode for more information. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add \"return false\" to the end of the method." - ], - "keyTyped": [ - "The keyTyped() function is called once every time a key is pressed, but action keys such as Backspace, Delete, Ctrl, Shift, and Alt are ignored. If you are trying to detect a keyCode for one of these keys, use the keyPressed() function instead. The most recent key typed will be stored in the key variable.", - "Because of how operating systems handle key repeats, holding down a key will cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add \"return false\" to the end of the method." - ], - "keyIsDown": [ - "The keyIsDown() function checks if the key is currently down, i.e. pressed. It can be used if you have an object that moves, and you want several keys to be able to affect its behaviour simultaneously, such as moving a sprite diagonally. You can put in any number representing the keyCode of the key, or use any of the variable keyCode names listed here." - ], - "movedX": [ - "The variable movedX contains the horizontal movement of the mouse since the last frame" - ], - "movedY": [ - "The variable movedY contains the vertical movement of the mouse since the last frame" - ], - "mouseX": [ - "The system variable mouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL. If touch is used instead of mouse input, mouseX will hold the x value of the most recent touch point." - ], - "mouseY": [ - "The system variable mouseY always contains the current vertical position of the mouse, relative to (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL. If touch is used instead of mouse input, mouseY will hold the y value of the most recent touch point." - ], - "pmouseX": [ - "The system variable pmouseX always contains the horizontal position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL. Note: pmouseX will be reset to the current mouseX value at the start of each touch event." - ], - "pmouseY": [ - "The system variable pmouseY always contains the vertical position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL. Note: pmouseY will be reset to the current mouseY value at the start of each touch event." - ], - "winMouseX": [ - "The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window." - ], - "winMouseY": [ - "The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window." - ], - "pwinMouseX": [ - "The system variable pwinMouseX always contains the horizontal position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX value at the start of each touch event." - ], - "pwinMouseY": [ - "The system variable pwinMouseY always contains the vertical position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseY will be reset to the current winMouseY value at the start of each touch event." - ], - "mouseButton": [ - "p5 automatically tracks if the mouse button is pressed and which button is pressed. The value of the system variable mouseButton is either LEFT, RIGHT, or CENTER depending on which button was pressed last. Warning: different browsers may track mouseButton differently." - ], - "mouseIsPressed": [ - "The boolean system variable mouseIsPressed is true if the mouse is pressed and false if not." - ], - "mouseMoved": [ - "The mouseMoved() function is called every time the mouse moves and a mouse button is not pressed. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method." - ], - "mouseDragged": [ - "The mouseDragged() function is called once every time the mouse moves and a mouse button is pressed. If no mouseDragged() function is defined, the touchMoved() function will be called instead if it is defined. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method." - ], - "mousePressed": [ - "The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been pressed. If no mousePressed() function is defined, the touchStarted() function will be called instead if it is defined. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method." - ], - "mouseReleased": [ - "The mouseReleased() function is called every time a mouse button is released. If no mouseReleased() function is defined, the touchEnded() function will be called instead if it is defined. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method." - ], - "mouseClicked": [ - "The mouseClicked() function is called once after a mouse button has been pressed and then released. Browsers handle clicks differently, so this function is only guaranteed to be run when the left mouse button is clicked. To handle other mouse buttons being pressed or released, see mousePressed() or mouseReleased(). Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method." - ], - "doubleClicked": [ - "The doubleClicked() function is executed every time a event listener has detected a dblclick event which is a part of the DOM L3 specification. The doubleClicked event is fired when a pointing device button (usually a mouse's primary button) is clicked twice on a single element. For more info on the dblclick event refer to mozilla's documentation here: https://developer.mozilla.org/en-US/docs/Web/Events/dblclick" - ], - "mouseWheel": [ - "The function mouseWheel() is executed every time a vertical mouse wheel event is detected either triggered by an actual mouse wheel or by a touchpad. The event.delta property returns the amount the mouse wheel have scrolled. The values can be positive or negative depending on the scroll direction (on OS X with \"natural\" scrolling enabled, the signs are inverted). Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method. Due to the current support of the \"wheel\" event on Safari, the function may only work as expected if \"return false\" is included while using Safari." - ], - "requestPointerLock": [ - "The function requestPointerLock() locks the pointer to its current position and makes it invisible. Use movedX and movedY to get the difference the mouse was moved since the last call of draw. Note that not all browsers support this feature. This enables you to create experiences that aren't limited by the mouse moving out of the screen even if it is repeatedly moved into one direction. For example, a first person perspective experience." - ], - "exitPointerLock": [ - "The function exitPointerLock() exits a previously triggered pointer Lock for example to make ui elements usable etc" - ], - "touches": [ - "The system variable touches[] contains an array of the positions of all current touch points, relative to (0, 0) of the canvas, and IDs identifying a unique touch as it moves. Each element in the array is an object with x, y, and id properties.", - "The touches[] array is not supported on Safari and IE on touch-based desktops (laptops)." - ], - "touchStarted": [ - "The touchStarted() function is called once after every time a touch is registered. If no touchStarted() function is defined, the mousePressed() function will be called instead if it is defined. Browsers may have different default behaviors attached to various touch events. To prevent any default behavior for this event, add \"return false\" to the end of the method." - ], - "touchMoved": [ - "The touchMoved() function is called every time a touch move is registered. If no touchMoved() function is defined, the mouseDragged() function will be called instead if it is defined. Browsers may have different default behaviors attached to various touch events. To prevent any default behavior for this event, add \"return false\" to the end of the method." - ], - "touchEnded": [ - "The touchEnded() function is called every time a touch ends. If no touchEnded() function is defined, the mouseReleased() function will be called instead if it is defined. Browsers may have different default behaviors attached to various touch events. To prevent any default behavior for this event, add \"return false\" to the end of the method." - ], - "createImage": [ - "Creates a new p5.Image (the datatype for storing images). This provides a fresh buffer of pixels to play with. Set the size of the buffer with the width and height parameters.", - ".pixels gives access to an array containing the values for all the pixels in the display window. These values are numbers. This array is the size (including an appropriate factor for the pixelDensity) of the display window x4, representing the R, G, B, A values in order for each pixel, moving from left to right across each row, then down each column. See .pixels for more info. It may also be simpler to use set() or get().", - "Before accessing the pixels of an image, the data must loaded with the loadPixels() function. After the array data has been modified, the updatePixels() function must be run to update the changes." - ], - "saveCanvas": [ - "Save the current canvas as an image. The browser will either save the file immediately, or prompt the user with a dialogue window." - ], - "saveFrames": [ - "Capture a sequence of frames that can be used to create a movie. Accepts a callback. For example, you may wish to send the frames to a server where they can be stored or converted into a movie. If no callback is provided, the browser will pop up save dialogues in an attempt to download all of the images that have just been created. With the callback provided the image data isn't saved by default but instead passed as an argument to the callback function as an array of objects, with the size of array equal to the total number of frames.", - "Note that saveFrames() will only save the first 15 frames of an animation. To export longer animations, you might look into a library like ccapture.js." - ], - "loadImage": [ - "Loads an image from a path and creates a p5.Image from it.", - "The image may not be immediately available for rendering. If you want to ensure that the image is ready before doing anything with it, place the loadImage() call in preload(). You may also supply a callback function to handle the image when it's ready.", - "The path to the image should be relative to the HTML file that links in your sketch. Loading an image from a URL or other remote location may be blocked due to your browser's built-in security.", - "You can also pass in a string of a base64 encoded image as an alternative to the file path. Remember to add \"data:image/png;base64,\" in front of the string." - ], - "image": [ - "Draw an image to the p5.js canvas.", - "This function can be used with different numbers of parameters. The simplest use requires only three parameters: img, x, and y—where (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image.", - "This function can also be used with all eight Number parameters. To differentiate between all these parameters, p5.js uses the language of \"destination rectangle\" (which corresponds to \"dx\", \"dy\", etc.) and \"source image\" (which corresponds to \"sx\", \"sy\", etc.) below. Specifying the \"source image\" dimensions can be useful when you want to display a subsection of the source image instead of the whole thing. Here's a diagram to explain further: " - ], - "tint": [ - "Sets the fill value for displaying images. Images can be tinted to specified colors or made transparent by including an alpha value.", - "To apply transparency to an image without affecting its color, use white as the tint color and specify an alpha value. For instance, tint(255, 128) will make an image 50% transparent (assuming the default alpha range of 0-255, which can be changed with colorMode()).", - "The value for the gray parameter must be less than or equal to the current maximum value as specified by colorMode(). The default maximum value is 255." - ], - "noTint": [ - "Removes the current fill value for displaying images and reverts to displaying images with their original hues." - ], - "imageMode": [ - "Set image mode. Modifies the location from which images are drawn by changing the way in which parameters given to image() are interpreted. The default mode is imageMode(CORNER), which interprets the second and third parameters of image() as the upper-left corner of the image. If two additional parameters are specified, they are used to set the image's width and height.", - "imageMode(CORNERS) interprets the second and third parameters of image() as the location of one corner, and the fourth and fifth parameters as the opposite corner.", - "imageMode(CENTER) interprets the second and third parameters of image() as the image's center point. If two additional parameters are specified, they are used to set the image's width and height." - ], - "pixels": [ - "Uint8ClampedArray containing the values for all the pixels in the display window. These values are numbers. This array is the size (include an appropriate factor for pixelDensity) of the display window x4, representing the R, G, B, A values in order for each pixel, moving from left to right across each row, then down each column. Retina and other high density displays will have more pixels[] (by a factor of pixelDensity^2). For example, if the image is 100x100 pixels, there will be 40,000. On a retina display, there will be 160,000.", - "The first four values (indices 0-3) in the array will be the R, G, B, A values of the pixel at (0, 0). The second four values (indices 4-7) will contain the R, G, B, A values of the pixel at (1, 0). More generally, to set values for a pixel at (x, y): 
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 set() will automatically take care of setting all the appropriate values in pixels[] for a given (x, y) at any pixelDensity, but the performance may not be as fast when lots of modifications are made to the pixel array.", - "Before accessing this array, the data must loaded with the loadPixels() function. After the array data has been modified, the updatePixels() function must be run to update the changes.", - "Note that this is not a standard javascript array. This means that standard javascript functions such as slice() or arrayCopy() do not work." - ], - "blend": [ - "Copies a region of pixels from one image to another, using a specified blend mode to do the operation." - ], - "copy": [ - "Copies a region of the canvas to another region of the canvas and copies a region of pixels from an image used as the srcImg parameter into the canvas srcImage is specified this is used as the source. If the source and destination regions aren't the same size, it will automatically resize source pixels to fit the specified target region." - ], - "filter": [ - "Applies a filter to the canvas. The presets options are:", - "THRESHOLD Converts the image to black and white pixels depending if they are above or below the threshold defined by the level parameter. The parameter must be between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.", - "GRAY Converts any colors in the image to grayscale equivalents. No parameter is used.", - "OPAQUE Sets the alpha channel to entirely opaque. No parameter is used.", - "INVERT Sets each pixel to its inverse value. No parameter is used.", - "POSTERIZE Limits each channel of the image to the number of colors specified as the parameter. The parameter can be set to values between 2 and 255, but results are most noticeable in the lower ranges.", - "BLUR Executes a Gaussian blur with the level parameter specifying the extent of the blurring. If no parameter is used, the blur is equivalent to Gaussian blur of radius 1. Larger values increase the blur.", - "ERODE Reduces the light areas. No parameter is used.", - "DILATE Increases the light areas. No parameter is used.", - "filter() does not work in WEBGL mode. A similar effect can be achieved in WEBGL mode using custom shaders. Adam Ferriss has written a selection of shader examples that contains many of the effects present in the filter examples." - ], - "get": [ - "Get a region of pixels, or a single pixel, from the canvas.", - "Returns an array of [R,G,B,A] values for any pixel or grabs a section of an image. If no parameters are specified, the entire image is returned. Use the x and y parameters to get the value of one pixel. Get a section of the display window by specifying additional w and h parameters. When getting an image, the x and y parameters define the coordinates for the upper-left corner of the image, regardless of the current imageMode().", - "Getting the color of a single pixel with get(x, y) is easy, but not as fast as grabbing the data directly from pixels[]. The equivalent statement to get(x, y) using pixels[] with pixel density d is 
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.", - "If you want to extract an array of colors or a subimage from an p5.Image object, take a look at p5.Image.get()" - ], - "loadPixels": [ - "Loads the pixel data for the display window into the pixels[] array. This function must always be called before reading from or writing to pixels[]. Note that only changes made with set() or direct manipulation of pixels[] will occur." - ], - "set": [ - "Changes the color of any pixel, or writes an image directly to the display window. The x and y parameters specify the pixel to change and the c parameter specifies the color value. This can be a p5.Color object, or [R, G, B, A] pixel array. It can also be a single grayscale value. When setting an image, the x and y parameters define the coordinates for the upper-left corner of the image, regardless of the current imageMode().", - "After using set(), you must call updatePixels() for your changes to appear. This should be called once all pixels have been set, and must be called before calling .get() or drawing the image.", - "Setting the color of a single pixel with set(x, y) is easy, but not as fast as putting the data directly into pixels[]. Setting the pixels[] values directly may be complicated when working with a retina display, but will perform better when lots of pixels need to be set directly on every loop. See the reference for pixels[] for more information." - ], - "updatePixels": [ - "Updates the display window with the data in the pixels[] array. Use in conjunction with loadPixels(). If you're only reading pixels from the array, there's no need to call updatePixels() — updating is only necessary to apply changes. updatePixels() should be called anytime the pixels array is manipulated or set() is called, and only changes made with set() or direct changes to pixels[] will occur." - ], - "loadJSON": [ - "Loads a JSON file from a file or a URL, and returns an Object. Note that even if the JSON file contains an Array, an Object will be returned with index numbers as keys.", - "This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. JSONP is supported via a polyfill and you can pass in as the second argument an object with definitions of the json callback following the syntax specified here.", - "This method is suitable for fetching files up to size of 64MB." - ], - "loadStrings": [ - "Reads the contents of a file and creates a String array of its individual lines. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder.", - "Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.", - "This method is asynchronous, meaning it may not finish before the next line in your sketch is executed.", - "This method is suitable for fetching files up to size of 64MB." - ], - "loadTable": [ - "Reads the contents of a file or URL and creates a p5.Table object with its values. If a file is specified, it must be located in the sketch's \"data\" folder. The filename parameter can also be a URL to a file found online. By default, the file is assumed to be comma-separated (in CSV format). Table only looks for a header row if the 'header' option is included.", - "This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. Calling loadTable() inside preload() guarantees to complete the operation before setup() and draw() are called. Outside of preload(), you may supply a callback function to handle the object:", - "All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB." - ], - "loadXML": [ - "Reads the contents of a file and creates an XML object with its values. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder.", - "Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.", - "This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. Calling loadXML() inside preload() guarantees to complete the operation before setup() and draw() are called.", - "Outside of preload(), you may supply a callback function to handle the object.", - "This method is suitable for fetching files up to size of 64MB." - ], - "loadBytes": [ - "This method is suitable for fetching files up to size of 64MB." - ], - "httpGet": [ - "Method for executing an HTTP GET request. If data type is not specified, p5 will try to guess based on the URL, defaulting to text. This is equivalent to calling httpDo(path, 'GET'). The 'binary' datatype will return a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer which can be used to initialize typed arrays (such as Uint8Array)." - ], - "httpPost": [ - "Method for executing an HTTP POST request. If data type is not specified, p5 will try to guess based on the URL, defaulting to text. This is equivalent to calling httpDo(path, 'POST')." - ], - "httpDo": [ - "Method for executing an HTTP request. If data type is not specified, p5 will try to guess based on the URL, defaulting to text. For more advanced use, you may also pass in the path as the first argument and a object as the second argument, the signature follows the one specified in the Fetch API specification. This method is suitable for fetching files up to size of 64MB when \"GET\" is used." - ], - "save": [ - "Saves a given element(image, text, json, csv, wav, or html) to the client's computer. The first parameter can be a pointer to element we want to save. The element can be one of p5.Element,an Array of Strings, an Array of JSON, a JSON object, a p5.Table , a p5.Image, or a p5.SoundFile (requires p5.sound). The second parameter is a filename (including extension).The third parameter is for options specific to this type of object. This method will save a file that fits the given parameters. If it is called without specifying an element, by default it will save the whole canvas as an image file. You can optionally specify a filename as the first parameter in such a case. Note that it is not recommended to call this method within draw, as it will open a new save dialog on every render." - ], - "saveJSON": [ - "Writes the contents of an Array or a JSON object to a .json file. The file saving process and location of the saved file will vary between web browsers." - ], - "saveStrings": [ - "Writes an array of Strings to a text file, one line per String. The file saving process and location of the saved file will vary between web browsers." - ], - "saveTable": [ - "Writes the contents of a Table object to a file. Defaults to a text file with comma-separated-values ('csv') but can also use tab separation ('tsv'), or generate an HTML table ('html'). The file saving process and location of the saved file will vary between web browsers." - ], - "abs": [ - "Calculates the absolute value (magnitude) of a number. Maps to Math.abs(). The absolute value of a number is always positive." - ], - "ceil": [ - "Calculates the closest int value that is greater than or equal to the value of the parameter. Maps to Math.ceil(). For example, ceil(9.03) returns the value 10." - ], - "constrain": [ - "Constrains a value between a minimum and maximum value." - ], - "dist": [ - "Calculates the distance between two points, in either two or three dimensions. If you looking for distance between two vectors see dist()" - ], - "exp": [ - "Returns Euler's number e (2.71828...) raised to the power of the n parameter. Maps to Math.exp()." - ], - "floor": [ - "Calculates the closest int value that is less than or equal to the value of the parameter. Maps to Math.floor()." - ], - "lerp": [ - "Calculates a number between two numbers at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, 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." - ], - "log": [ - "Calculates the natural logarithm (the base-e logarithm) of a number. This function expects the n parameter to be a value greater than 0.0. Maps to Math.log()." - ], - "mag": [ - "Calculates the magnitude (or length) of a vector. A vector is a direction in space commonly used in computer graphics and linear algebra. Because it has no \"start\" position, the magnitude of a vector can be thought of as the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is a shortcut for writing dist(0, 0, x, y)." - ], - "map": [ - "Re-maps a number from one range to another.", - "In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width)." - ], - "max": [ - "Determines the largest value in a sequence of numbers, and then returns that value. max() accepts any number of Number parameters, or an Array of any length." - ], - "min": [ - "Determines the smallest value in a sequence of numbers, and then returns that value. min() accepts any number of Number parameters, or an Array of any length." - ], - "norm": [ - "Normalizes a number from another range into a value between 0 and 1. Identical to map(value, low, high, 0, 1). Numbers outside of the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. (See the example above.)" - ], - "pow": [ - "Facilitates exponential expressions. The pow() function is an efficient way of multiplying numbers by themselves (or their reciprocals) in large quantities. For example, pow(3, 5) is equivalent to the expression 3 × 3 × 3 × 3 × 3 and pow(3, -5) is equivalent to 1 / 3 × 3 × 3 × 3 × 3. Maps to Math.pow()." - ], - "round": [ - "Calculates the integer closest to the n parameter. For example, round(133.8) returns the value 134. Maps to Math.round()." - ], - "sq": [ - "Squares a number (multiplies a number by itself). The result is always a positive number, as multiplying two negative numbers always yields a positive result. For example, -1 * -1 = 1." - ], - "sqrt": [ - "Calculates the square root of a number. The square root of a number is always positive, even though there may be a valid negative root. The square root s of number a is such that s*s = a. It is the opposite of squaring. Maps to Math.sqrt()." - ], - "fract": [ - "Calculates the fractional part of a number." - ], - "createVector": [ - "Creates a new p5.Vector (the datatype for storing vectors). This provides a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction." - ], - "noise": [ - "Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more naturally ordered, harmonic succession of numbers compared to the standard random() function. It was invented by Ken Perlin in the 1980s and been used since in graphical applications to produce procedural textures, natural motion, shapes, terrains etc.

The main difference to the random() function is that Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value (fixed only for the lifespan of the program; see the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise, depending on the number of coordinates given. The resulting value will always be between 0.0 and 1.0. The noise value can be animated by moving through the noise space as demonstrated in the example above. The 2nd and 3rd dimension can also be interpreted as time.

The actual noise is structured similar to an audio signal, in respect to the function's use of frequencies. Similar to the concept of harmonics in physics, perlin noise is computed over several octaves which are added together for the final result.

Another way to adjust the character of the resulting sequence is the scale of the input coordinates. As the function works within an infinite space the value of the coordinates doesn't matter as such, only the distance between successive coordinates does (eg. when using noise() within a loop). As a general rule the smaller the difference between coordinates, the smoother the resulting noise sequence will be. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use." - ], - "noiseDetail": [ - "Adjusts the character and level of detail produced by the Perlin noise function. Similar to harmonics in physics, noise is computed over several octaves. Lower octaves contribute more to the output signal and as such define the overall intensity of the noise, whereas higher octaves create finer grained details in the noise sequence. By default, noise is computed over 4 octaves with each octave contributing exactly half than its predecessor, starting at 50% strength for the 1st octave. This falloff amount can be changed by adding an additional function parameter. Eg. a falloff factor of 0.75 means each octave will now have 75% impact (25% less) of the previous lower octave. Any value between 0.0 and 1.0 is valid, however note that values greater than 0.5 might result in greater than 1.0 values returned by noise(). By changing these parameters, the signal created by the noise() function can be adapted to fit very specific needs and characteristics." - ], - "noiseSeed": [ - "Sets the seed value for noise(). By default, noise() produces different results each time the program is run. Set the value parameter to a constant to return the same pseudo-random numbers each time the software is run." - ], - "randomSeed": [ - "Sets the seed value for random().", - "By default, random() produces different results each time the program is run. Set the seed parameter to a constant to return the same pseudo-random numbers each time the software is run." - ], - "random": [ - "Return a random floating-point number.", - "Takes either 0, 1 or 2 arguments.", - "If no argument is given, returns a random number from 0 up to (but not including) 1.", - "If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number.", - "If one argument is given and it is an array, returns a random element from that array.", - "If two arguments are given, returns a random number from the first argument up to (but not including) the second argument." - ], - "randomGaussian": [ - "Returns a random number fitting a Gaussian, or normal, distribution. There is theoretically no minimum or maximum value that randomGaussian() might return. Rather, there is just a very low probability that values far from the mean will be returned; and a higher probability that numbers near the mean will be returned. Takes either 0, 1 or 2 arguments. If no args, returns a mean of 0 and standard deviation of 1. If one arg, that arg is the mean (standard deviation is 1). If two args, first is mean, second is standard deviation." - ], - "acos": [ - "The inverse of cos(), returns the arc cosine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range 0 to PI (3.1415927) if the angleMode is RADIANS or 0 to 180 if the angle mode is DEGREES." - ], - "asin": [ - "The inverse of sin(), returns the arc sine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range -PI/2 to PI/2 if the angleMode is RADIANS or -90 to 90 if the angle mode is DEGREES." - ], - "atan": [ - "The inverse of tan(), returns the arc tangent of a value. This function expects the values in the range of -Infinity to Infinity (exclusive) and values are returned in the range -PI/2 to PI/2 if the angleMode is RADIANS or -90 to 90 if the angle mode is DEGREES." - ], - "atan2": [ - "Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis. Values are returned as a float in the range from PI to -PI if the angleMode is RADIANS or 180 to -180 if the angleMode is DEGREES. The atan2() function is most often used for orienting geometry to the position of the cursor.", - "Note: The y-coordinate of the point is the first parameter, and the x-coordinate is the second parameter, due the the structure of calculating the tangent." - ], - "cos": [ - "Calculates the cosine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1." - ], - "sin": [ - "Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1." - ], - "tan": [ - "Calculates the tangent of an angle. This function takes into account the current angleMode. Values are returned in the range of all real numbers." - ], - "degrees": [ - "Converts a radian measurement to its corresponding value in degrees. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode." - ], - "radians": [ - "Converts a degree measurement to its corresponding value in radians. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode." - ], - "angleMode": [ - "Sets the current mode of p5 to given mode. Default mode is RADIANS." - ], - "textAlign": [ - "Sets the current alignment for drawing text. Accepts two arguments: horizAlign (LEFT, CENTER, or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or BASELINE).", - "The horizAlign parameter is in reference to the x value of the text() function, while the vertAlign parameter is in reference to the y value.", - "So if you write textAlign(LEFT), you are aligning the left edge of your text to the x value you give in text(). If you write textAlign(RIGHT, TOP), you are aligning the right edge of your text to the x value and the top of edge of the text to the y value." - ], - "textLeading": [ - "Sets/gets the spacing, in pixels, between lines of text. This setting will be used in all subsequent calls to the text() function." - ], - "textSize": [ - "Sets/gets the current font size. This size will be used in all subsequent calls to the text() function. Font size is measured in pixels." - ], - "textStyle": [ - "Sets/gets the style of the text for system fonts 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." - ], - "textWidth": [ - "Calculates and returns the width of any character or text string." - ], - "textAscent": [ - "Returns the ascent of the current font at its current size. The ascent represents the distance, in pixels, of the tallest character above the baseline." - ], - "textDescent": [ - "Returns the descent of the current font at its current size. The descent represents the distance, in pixels, of the character with the longest descender below the baseline." - ], - "textWrap": [ - "Specifies how lines of text are wrapped within a text box. This requires a max-width set on the text area, specified in text() as parameter x2.", - "WORD wrap style only breaks lines at spaces. A single string without spaces that exceeds the boundaries of the canvas or text area is not truncated, and will overflow the desired area, disappearing at the canvas edge.", - "CHAR wrap style breaks lines wherever needed to stay within the text box.", - "WORD is the default wrap style, and both styles will still break lines at any line breaks (\\n) specified in the original text. The text area max-height parameter (y2) also still applies to wrapped text in both styles, lines of text that do not fit within the text area will not be drawn to the screen." - ], - "loadFont": [ - "Loads an opentype font file (.otf, .ttf) from a file or a URL, and returns a PFont Object. This method is asynchronous, meaning it may not finish before the next line in your sketch is executed.", - "The path to the font should be relative to the HTML file that links in your sketch. Loading fonts from a URL or other remote location may be blocked due to your browser's built-in security." - ], - "text": [ - "Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is set with the textFont() function and a default size will be used unless a font is set with textSize(). Change the color of the text with the fill() function. Change the outline of the text with the stroke() and strokeWeight() functions.", - "The text displays in relation to the textAlign() function, which gives the option to draw to the left, right, and center of the coordinates.", - "The x2 and y2 parameters define a rectangular area to display within and may only be used with string data. When these parameters are specified, they are interpreted based on the current rectMode() setting. Text that does not fit completely within the rectangle specified will not be drawn to the screen. If x2 and y2 are not specified, the baseline alignment is the default, which means that the text will be drawn upwards from x and y.", - "WEBGL: Only opentype/truetype fonts are supported. You must load a font using the loadFont() method (see the example above). stroke() currently has no effect in webgl mode." - ], - "textFont": [ - "Sets the current font that will be drawn with the text() function. If textFont() is called without any argument, it will return the current font if one has been set already. If not, it will return the name of the default font as a string. If textFont() is called with a font to use, it will return the p5 object.", - "WEBGL: Only fonts loaded via loadFont() are supported." - ], - "append": [ - "Adds a value to the end of an array. Extends the length of the array by one. Maps to Array.push()." - ], - "arrayCopy": [ - "Copies an array (or part of an array) to another array. The src array is copied to the dst array, beginning at the position specified by srcPosition and into the position specified by dstPosition. The number of elements to copy is determined by length. Note that copying values overwrites existing values in the destination array. To append values instead of overwriting them, use concat().", - "The simplified version with only two arguments, arrayCopy(src, dst), copies an entire array to another of the same size. It is equivalent to arrayCopy(src, 0, dst, 0, src.length).", - "Using this function is far more efficient for copying array data than iterating through a for() loop and copying each element individually." - ], - "concat": [ - "Concatenates two arrays, maps to Array.concat(). Does not modify the input arrays." - ], - "reverse": [ - "Reverses the order of an array, maps to Array.reverse()" - ], - "shorten": [ - "Decreases an array by one element and returns the shortened array, maps to Array.pop()." - ], - "shuffle": [ - "Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm." - ], - "sort": [ - "Sorts an array of numbers from smallest to largest, or puts an array of words in alphabetical order. The original array is not modified; a re-ordered array is returned. The count parameter states the number of elements to sort. For example, if there are 12 elements in an array and count is set to 5, only the first 5 elements in the array will be sorted." - ], - "splice": [ - "Inserts a value or an array of values into an existing array. The first parameter specifies the initial array to be modified, and the second parameter defines the data to be inserted. The third parameter is an index value which specifies the array position from which to insert data. (Remember that array index numbering starts at zero, so the first position is 0, the second position is 1, and so on.)" - ], - "subset": [ - "Extracts an array of elements from an existing array. The list parameter defines the array from which the elements will be copied, and the start and count parameters specify which elements to extract. If no count is given, elements will be extracted from the start to the end of the array. When specifying the start, remember that the first array element is 0. This function does not change the source array." - ], - "float": [ - "Converts a string to its floating point representation. The contents of a string must resemble a number, or NaN (not a number) will be returned. For example, float(\"1234.56\") evaluates to 1234.56, but float(\"giraffe\") will return NaN.", - "When an array of values is passed in, then an array of floats of the same length is returned." - ], - "int": [ - "Converts a boolean, string, or float to its integer representation. When an array of values is passed in, then an int array of the same length is returned." - ], - "str": [ - "Converts a boolean, string or number to its string representation. When an array of values is passed in, then an array of strings of the same length is returned." - ], - "byte": [ - "Converts a number, string representation of a number, or boolean to its byte representation. A byte can be only a whole number between -128 and 127, so when a value outside of this range is converted, it wraps around to the corresponding byte representation. When an array of number, string or boolean values is passed in, then an array of bytes the same length is returned." - ], - "char": [ - "Converts a number or string to its corresponding single-character string representation. If a string parameter is provided, it is first parsed as an integer and then translated into a single-character string. When an array of number or string values is passed in, then an array of single-character strings of the same length is returned." - ], - "unchar": [ - "Converts a single-character string to its corresponding integer representation. When an array of single-character string values is passed in, then an array of integers of the same length is returned." - ], - "hex": [ - "Converts a number to a string in its equivalent hexadecimal notation. If a second parameter is passed, it is used to set the number of characters to generate in the hexadecimal notation. When an array is passed in, an array of strings in hexadecimal notation of the same length is returned." - ], - "unhex": [ - "Converts a string representation of a hexadecimal number to its equivalent integer value. When an array of strings in hexadecimal notation is passed in, an array of integers of the same length is returned." - ], - "join": [ - "Combines an array of Strings into one String, each separated by the character(s) used for the separator parameter. To join arrays of ints or floats, it's necessary to first convert them to Strings using nf() or nfs()." - ], - "match": [ - "This function is used to apply a regular expression to a piece of text, and return matching groups (elements found inside parentheses) as a String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, an array of length 1 (with the matched text as the first element of the array) will be returned.", - "To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, an array is returned.", - "If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Element [0] of a regular expression match returns the entire matching string, and the match groups start at element [1] (the first group is [1], the second [2], and so on)." - ], - "matchAll": [ - "This function is used to apply a regular expression to a piece of text, and return a list of matching groups (elements found inside parentheses) as a two-dimensional String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, a two dimensional array is still returned, but the second dimension is only of length one.", - "To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, a 2D array is returned.", - "If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Assuming a loop with counter variable i, element [i][0] of a regular expression match returns the entire matching string, and the match groups start at element [i][1] (the first group is [i][1], the second [i][2], and so on)." - ], - "nf": [ - "Utility function for formatting numbers into strings. There are two versions: one for formatting floats, and one for formatting ints. The values for the digits, left, and right parameters should always be positive integers. (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." - ], - "nfc": [ - "Utility function for formatting numbers into strings and placing appropriate commas to mark units of 1000. There are two versions: one for formatting ints, and one for formatting an array of ints. The value for the right parameter should always be a positive integer." - ], - "nfp": [ - "Utility function for formatting numbers into strings. Similar to nf() but puts a \"+\" in front of positive numbers and a \"-\" in front of negative numbers. There are two versions: one for formatting floats, and one for formatting ints. The values for left, and right parameters should always be positive integers." - ], - "nfs": [ - "Utility function for formatting numbers into 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 non-negative 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." - ], - "split": [ - "The split() function maps to String.split(), it breaks a String into pieces using a character or string as the delimiter. The delim parameter specifies the character or characters that mark the boundaries between each piece. A String[] array is returned that contains each of the pieces.", - "The splitTokens() function works in a similar fashion, except that it splits using a range of characters instead of a specific character or sequence." - ], - "splitTokens": [ - "The splitTokens() function splits a String at one or many character delimiters or \"tokens.\" The delim parameter specifies the character or characters to be used as a boundary.", - "If no delim characters are specified, any whitespace character is used to split. Whitespace characters include tab (\\t), line feed (\\n), carriage return (\\r), form feed (\\f), and space." - ], - "trim": [ - "Removes whitespace characters from the beginning and end of a String. In addition to standard whitespace characters such as space, carriage return, and tab, this function also removes the Unicode \"nbsp\" character." - ], - "day": [ - "p5.js communicates with the clock on your computer. The day() function returns the current day as a value from 1 - 31." - ], - "hour": [ - "p5.js communicates with the clock on your computer. The hour() function returns the current hour as a value from 0 - 23." - ], - "minute": [ - "p5.js communicates with the clock on your computer. The minute() function returns the current minute as a value from 0 - 59." - ], - "millis": [ - "Returns the number of milliseconds (thousandths of a second) since starting the sketch (when setup() is called). This information is often used for timing events and animation sequences." - ], - "month": [ - "p5.js communicates with the clock on your computer. The month() function returns the current month as a value from 1 - 12." - ], - "second": [ - "p5.js communicates with the clock on your computer. The second() function returns the current second as a value from 0 - 59." - ], - "year": [ - "p5.js communicates with the clock on your computer. The year() function returns the current year as an integer (2014, 2015, 2016, etc)." - ], - "plane": [ - "Draw a plane with given a width and height" - ], - "box": [ - "Draw a box with given width, height and depth" - ], - "sphere": [ - "Draw a sphere with given radius.", - "DetailX and detailY determines the number of subdivisions in the x-dimension and the y-dimension of a sphere. More subdivisions make the sphere seem smoother. The recommended maximum values are both 24. Using a value greater than 24 may cause a warning or slow down the browser." - ], - "cylinder": [ - "Draw a cylinder with given radius and height", - "DetailX and detailY determines the number of subdivisions in the x-dimension and the y-dimension of a cylinder. More subdivisions make the cylinder seem smoother. The recommended maximum value for detailX is 24. Using a value greater than 24 may cause a warning or slow down the browser." - ], - "cone": [ - "Draw a cone with given radius and height", - "DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a cone. More subdivisions make the cone seem smoother. The recommended maximum value for detailX is 24. Using a value greater than 24 may cause a warning or slow down the browser." - ], - "ellipsoid": [ - "Draw an ellipsoid with given radius", - "DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a cone. More subdivisions make the ellipsoid appear to be smoother. Avoid detail number above 150, it may crash the browser." - ], - "torus": [ - "Draw a torus with given radius and tube radius", - "DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a torus. More subdivisions make the torus appear to be smoother. The default and maximum values for detailX and detailY are 24 and 16, respectively. Setting them to relatively small values like 4 and 6 allows you to create new shapes other than a torus." - ], - "orbitControl": [ - "Allows movement around a 3D sketch using a mouse or trackpad. Left-clicking and dragging will rotate the camera position about the center of the sketch, right-clicking and dragging will pan the camera position without rotation, and using the mouse wheel (scrolling) will move the camera closer or further from the center of the sketch. This function can be called with parameters dictating sensitivity to mouse movement along the X and Y axes. Calling this function without parameters is equivalent to calling orbitControl(1,1). To reverse direction of movement in either axis, enter a negative number for sensitivity." - ], - "debugMode": [ - "debugMode() helps visualize 3D space by adding a grid to indicate where the ‘ground’ is in a sketch and an axes icon which indicates the +X, +Y, and +Z directions. This function can be called without parameters to create a default grid and axes icon, or it can be called according to the examples above to customize the size and position of the grid and/or axes icon. The grid is drawn using the most recently set stroke color and weight. To specify these parameters, add a call to stroke() and strokeWeight() just before the end of the draw() loop.", - "By default, the grid will run through the origin (0,0,0) of the sketch along the XZ plane and the axes icon will be offset from the origin. Both the grid and axes icon will be sized according to the current canvas size. Note that because the grid runs parallel to the default camera view, it is often helpful to use debugMode along with orbitControl to allow full view of the grid." - ], - "noDebugMode": [ - "Turns off debugMode() in a 3D sketch." - ], - "ambientLight": [ - "Creates an ambient light with a color. Ambient light is light that comes from everywhere on the canvas. It has no particular source." - ], - "specularColor": [ - "Set's the color of the specular highlight when using a specular material and specular light.", - "This method can be combined with specularMaterial() and shininess() functions to set specular highlights. The default color is white, ie (255, 255, 255), which is used if this method is not called before specularMaterial(). If this method is called without specularMaterial(), There will be no effect.", - "Note: specularColor is equivalent to the processing function lightSpecular." - ], - "directionalLight": [ - "Creates a directional light with a color and a direction", - "A maximum of 5 directionalLight can be active at one time" - ], - "pointLight": [ - "Creates a point light with a color and a light position", - "A maximum of 5 pointLight can be active at one time" - ], - "lights": [ - "Sets the default ambient and directional light. The defaults are ambientLight(128, 128, 128) and directionalLight(128, 128, 128, 0, 0, -1). Lights need to be included in the draw() to remain persistent in a looping program. Placing them in the setup() of a looping program will cause them to only have an effect the first time through the loop." - ], - "lightFalloff": [ - "Sets the falloff rates for point lights. It affects only the elements which are created after it in the code. The default value is lightFalloff(1.0, 0.0, 0.0), and the parameters are used to calculate the falloff with the following equation:", - "d = distance from light position to vertex position", - "falloff = 1 / (CONSTANT + d * LINEAR + ( d * d ) * QUADRATIC)" - ], - "spotLight": [ - "Creates a spotlight with a given color, position, direction of light, angle and concentration. Here, angle refers to the opening or aperture of the cone of the spotlight, and concentration is used to focus the light towards the center. Both angle and concentration are optional, but if you want to provide concentration, you will also have to specify the angle.", - "A maximum of 5 spotLight can be active at one time" - ], - "noLights": [ - "This function will remove all the lights from the sketch for the subsequent materials rendered. It affects all the subsequent methods. Calls to lighting methods made after noLights() will re-enable lights in the sketch." - ], - "loadModel": [ - "Load a 3d model from an OBJ or STL file.", - "loadModel() should be placed inside of preload(). This allows the model to load fully before the rest of your code is run.", - "One of the limitations of the OBJ and STL format is that it doesn't have a built-in sense of scale. This means that models exported from different programs might be very different sizes. If your model isn't displaying, try calling loadModel() with the normalized parameter set to true. This will resize the model to a scale appropriate for p5. You can also make additional changes to the final size of your model with the scale() function.", - "Also, the support for colored STL files is not present. STL files with color will be rendered without color properties." - ], - "model": [ - "Render a 3d model to the screen." - ], - "loadShader": [ - "Loads a custom shader from the provided vertex and fragment shader paths. The shader files are loaded asynchronously in the background, so this method should be used in preload().", - "For now, there are three main types of shaders. p5 will automatically supply appropriate vertices, normals, colors, and lighting attributes if the parameters defined in the shader match the names." - ], - "shader": [ - "The shader() function lets the user provide a custom shader to fill in shapes in WEBGL mode. Users can create their own shaders by loading vertex and fragment shaders with loadShader()." - ], - "resetShader": [ - "This function restores the default shaders in WEBGL mode. Code that runs after resetShader() will not be affected by previously defined shaders. Should be run after shader()." - ], - "texture": [ - "Texture for geometry. You can view other possible materials in this example." - ], - "textureMode": [ - "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)." - ], - "textureWrap": [ - "Sets the global texture wrapping mode. This controls how textures behave when their uv's go outside of the 0 - 1 range. There are three options: CLAMP, REPEAT, and MIRROR.", - "CLAMP causes the pixels at the edge of the texture to extend to the bounds REPEAT causes the texture to tile repeatedly until reaching the bounds MIRROR works similarly to REPEAT but it flips the texture with every new tile", - "REPEAT & MIRROR are only available if the texture is a power of two size (128, 256, 512, 1024, etc.).", - "This method will affect all textures in your sketch until a subsequent textureWrap call is made.", - "If only one argument is provided, it will be applied to both the horizontal and vertical axes." - ], - "normalMaterial": [ - "Normal material for geometry is a material that is not affected by light. It is not reflective and is a placeholder material often used for debugging. Surfaces facing the X-axis, become red, those facing the Y-axis, become green and those facing the Z-axis, become blue. You can view all possible materials in this example." - ], - "ambientMaterial": [ - "Ambient material for geometry with a given color. Ambient material defines the color the object reflects under any lighting. For example, if the ambient material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light. Here's an example containing all possible materials." - ], - "emissiveMaterial": [ - "Sets the emissive color of the material used for geometry drawn to the screen. This is a misnomer in the sense that the material does not actually emit light that effects surrounding polygons. Instead, it gives the appearance that the object is glowing. An emissive material will display at full strength even if there is no light for it to reflect." - ], - "specularMaterial": [ - "Specular material for geometry with a given color. Specular material is a shiny reflective material. Like ambient material it also defines the color the object reflects under ambient lighting. For example, if the specular material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light. For all other types of light like point and directional light, a specular material will reflect the color of the light source to the viewer. Here's an example containing all possible materials." - ], - "shininess": [ - "Sets the amount of gloss in the surface of shapes. Used in combination with specularMaterial() in setting the material properties of shapes. The default and minimum value is 1." - ], - "camera": [ - "Sets the position of the current camera in a 3D sketch. Parameters for this function define the camera's position, the center of the sketch (where the camera is pointing), and an up direction (the orientation of the camera).", - "This function simulates the movements of the camera, allowing objects to be viewed from various angles. Remember, it does not move the objects themselves but the camera instead. For example when the centerX value is positive, and the camera is rotating to the right side of the sketch, the object will seem like it's moving to the left.", - "See this example to view the position of your camera.", - "If no parameters are given, the following default is used: camera(0, 0, (height/2) / tan(PI/6), 0, 0, 0, 0, 1, 0)" - ], - "perspective": [ - "Sets a perspective projection for the current camera in a 3D sketch. This projection represents depth through foreshortening: objects that are close to the camera appear their actual size while those that are further away from the camera appear smaller.", - "The parameters to this function define the viewing frustum (the truncated pyramid within which objects are seen by the camera) through vertical field of view, aspect ratio (usually width/height), and near and far clipping planes.", - "If no parameters are given, the following default is used: perspective(PI/3, width/height, eyeZ/10, eyeZ*10), where eyeZ is equal to ((height/2) / tan(PI/6))." - ], - "ortho": [ - "Sets an orthographic projection for the current camera in a 3D sketch and defines a box-shaped viewing frustum within which objects are seen. In this projection, all objects with the same dimension appear the same size, regardless of whether they are near or far from the camera.", - "The parameters to this function specify the viewing frustum where left and right are the minimum and maximum x values, top and bottom are the minimum and maximum y values, and near and far are the minimum and maximum z values.", - "If no parameters are given, the following default is used: ortho(-width/2, width/2, -height/2, height/2)." - ], - "frustum": [ - "Sets the frustum of the current camera as defined by the parameters.", - "A frustum is a geometric form: a pyramid with its top cut off. With the viewer's eye at the imaginary top of the pyramid, the six planes of the frustum act as clipping planes when rendering a 3D view. Thus, any form inside the clipping planes is visible; anything outside those planes is not visible.", - "Setting the frustum changes the perspective of the scene being rendered. This can be achieved more simply in many cases by using perspective().", - "If no parameters are given, the following default is used: frustum(-width/2, width/2, -height/2, height/2, 0, max(width, height))." - ], - "createCamera": [ - "Creates a new p5.Camera object and sets it as the current (active) camera.", - "The new camera is initialized with a default position (see camera()) and a default perspective projection (see perspective()). Its properties can be controlled with the p5.Camera methods.", - "Note: Every 3D sketch starts with a default camera initialized. This camera can be controlled with the global methods camera(), perspective(), ortho(), and frustum() if it is the only camera in the scene." - ], - "setCamera": [ - "Sets the current (active) camera of a 3D sketch. Allows for switching between multiple cameras." - ], - "setAttributes": [ - "Set attributes for the WebGL Drawing context. This is a way of adjusting how the WebGL renderer works to fine-tune the display and performance.", - "Note that this will reinitialize the drawing context if called after the WebGL canvas is made.", - "If an object is passed as the parameter, all attributes not declared in the object will be set to defaults.", - "The available attributes are: alpha - indicates if the canvas contains an alpha buffer default is true", - "depth - indicates whether the drawing buffer has a depth buffer of at least 16 bits - default is true", - "stencil - indicates whether the drawing buffer has a stencil buffer of at least 8 bits", - "antialias - indicates whether or not to perform anti-aliasing default is false (true in Safari)", - "premultipliedAlpha - indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha default is false", - "preserveDrawingBuffer - if true the buffers will not be cleared and and will preserve their values until cleared or overwritten by author (note that p5 clears automatically on draw loop) default is true", - "perPixelLighting - if true, per-pixel lighting will be used in the lighting shader otherwise per-vertex lighting is used. default is true." - ], - "getAudioContext": [ - "Returns the Audio Context for this sketch. Useful for users who would like to dig deeper into the Web Audio API .", - "Some browsers require users to startAudioContext with a user gesture, such as touchStarted in the example below." - ], - "userStartAudio": [ - "It is not only a good practice to give users control over starting audio. This policy is enforced by many web browsers, including iOS and Google Chrome, which create the Web Audio API's Audio Context in a suspended state.", - "In these browser-specific policies, sound will not play until a user interaction event (i.e. mousePressed()) explicitly resumes the AudioContext, or starts an audio node. This can be accomplished by calling start() on a p5.Oscillator, play() on a p5.SoundFile, or simply userStartAudio().", - "userStartAudio() starts the AudioContext on a user gesture. The default behavior will enable audio on any mouseUp or touchEnd event. It can also be placed in a specific interaction function, such as mousePressed() as in the example below. This method utilizes StartAudioContext , a library by Yotam Mann (MIT Licence, 2016)." - ], - "getOutputVolume": [ - "Returns a number representing the output volume for sound in this sketch." - ], - "outputVolume": [ - "Scale the output of all sound in this sketch Scaled between 0.0 (silence) and 1.0 (full volume). 1.0 is the maximum amplitude of a digital sound, so multiplying by greater than 1.0 may cause digital distortion. To fade, provide a rampTime parameter. For more complex fades, see the Envelope class.", - "Alternately, you can pass in a signal source such as an oscillator to modulate the amplitude with an audio signal.", - "How This Works: When you load the p5.sound module, it creates a single instance of p5sound. All sound objects in this module output to p5sound before reaching your computer's output. So if you change the amplitude of p5sound, it impacts all of the sound in this module.", - "If no value is provided, returns a Web Audio API Gain Node" - ], - "soundOut": [ - "p5.soundOut is the p5.sound final output bus. It sends output to the destination of this window's web audio context. It contains Web Audio API nodes including a dyanmicsCompressor (.limiter), and Gain Nodes for .input and .output." - ], - "sampleRate": [ - "Returns a number representing the sample rate, in samples per second, of all sound objects in this audio context. It is determined by the sampling rate of your operating system's sound card, and it is not currently possile to change. It is often 44100, or twice the range of human hearing." - ], - "freqToMidi": [ - "Returns the closest MIDI note value for a given frequency." - ], - "midiToFreq": [ - "Returns the frequency value of a MIDI note value. General MIDI treats notes as integers where middle C is 60, C# is 61, D is 62 etc. Useful for generating musical frequencies with oscillators." - ], - "soundFormats": [ - "List the SoundFile formats that you will include. LoadSound will search your directory for these extensions, and will pick a format that is compatable with the client's web browser. Here is a free online file converter." - ], - "saveSound": [ - "Save a p5.SoundFile as a .wav file. The browser will prompt the user to download the file to their device. For uploading audio to a server, use p5.SoundFile.saveBlob." - ], - "loadSound": [ - "loadSound() returns a new p5.SoundFile from a specified path. If called during preload(), the p5.SoundFile will be ready to play in time for setup() and draw(). If called outside of preload, the p5.SoundFile will not be ready immediately, so loadSound accepts a callback as the second parameter. Using a local server is recommended when loading external files." - ], - "createConvolver": [ - "Create a p5.Convolver. Accepts a path to a soundfile that will be used to generate an impulse response." - ], - "setBPM": [ - "Set the global tempo, in beats per minute, for all p5.Parts. This method will impact all active p5.Parts." - ] + "describe": { + "description": [ + "Creates a screen reader accessible description for the canvas. The first parameter should be a string with a description of the canvas. The second parameter is optional. If specified, it determines how the description is displayed.", + "describe(text, LABEL) displays the description to all users as a tombstone or exhibit label/caption in a div adjacent to the canvas. You can style it as you wish in your CSS.", + "describe(text, FALLBACK) makes the description accessible to screen-reader users only, in a sub DOM inside the canvas element. If a second parameter is not specified, by default, the description will only be available to screen-reader users." + ], + "params": { + "text": "String: description of the canvas", + "display": "Constant: (Optional) either LABEL or FALLBACK" + } + }, + "describeElement": { + "description": [ + "This function creates a screen-reader accessible description for elements —shapes or groups of shapes that create meaning together— in the canvas. The first paramater should be the name of the element. The second parameter should be a string with a description of the element. The third parameter is optional. If specified, it determines how the element description is displayed.", + "describeElement(name, text, LABEL) displays the element description to all users as a tombstone or exhibit label/caption in a div adjacent to the canvas. You can style it as you wish in your CSS.", + "describeElement(name, text, FALLBACK) makes the element description accessible to screen-reader users only, in a sub DOM inside the canvas element. If a second parameter is not specified, by default, the element description will only be available to screen-reader users." + ], + "params": { + "name": "String: name of the element", + "text": "String: description of the element", + "display": "Constant: (Optional) either LABEL or FALLBACK" + } + }, + "textOutput": { + "description": [ + "textOutput() creates a screenreader accessible output that describes the shapes present on the canvas. The general description of the canvas includes canvas size, canvas color, and number of elements in the canvas (example: 'Your output is a, 400 by 400 pixels, lavender blue canvas containing the following 4 shapes:'). This description is followed by a list of shapes where the color, position, and area of each shape are described (example: \"orange ellipse at top left covering 1% of the canvas\"). Each element can be selected to get more details. A table of elements is also provided. In this table, shape, color, location, coordinates and area are described (example: \"orange ellipse location=top left area=2\").", + "textOutput() and textOutput(FALLBACK) make the output available in a sub DOM inside the canvas element which is accessible to screen readers. textOutput(LABEL) creates an additional div with the output adjacent to the canvas, this is useful for non-screen reader users that might want to display the output outside of the canvas' sub DOM as they code. However, using LABEL will create unnecessary redundancy for screen reader users. We recommend using LABEL only as part of the development process of a sketch and removing it before publishing or sharing with screen reader users." + ], + "params": { + "display": "Constant: (Optional) either FALLBACK or LABEL" + } + }, + "gridOutput": { + "description": [ + "gridOutput() lays out the content of the canvas in the form of a grid (html table) based on the spatial location of each shape. A brief description of the canvas is available before the table output. This description includes: color of the background, size of the canvas, number of objects, and object types (example: \"lavender blue canvas is 200 by 200 and contains 4 objects - 3 ellipses 1 rectangle\"). The grid describes the content spatially, each element is placed on a cell of the table depending on its position. Within each cell an element the color and type of shape of that element are available (example: \"orange ellipse\"). These descriptions can be selected individually to get more details. A list of elements where shape, color, location, and area are described (example: \"orange ellipse location=top left area=1%\") is also available.", + "gridOutput() and gridOutput(FALLBACK) make the output available in a sub DOM inside the canvas element which is accessible to screen readers. gridOutput(LABEL) creates an additional div with the output adjacent to the canvas, this is useful for non-screen reader users that might want to display the output outside of the canvas' sub DOM as they code. However, using LABEL will create unnecessary redundancy for screen reader users. We recommend using LABEL only as part of the development process of a sketch and removing it before publishing or sharing with screen reader users." + ], + "params": { + "display": "Constant: (Optional) either FALLBACK or LABEL" + } + }, + "alpha": { + "description": [ + "Extracts the alpha value from a color or pixel array." + ], + "returns": "Number: the alpha value", + "params": { + "color": "p5.Color|Number[]|String: p5.Color object, color components, or CSS color" + } + }, + "blue": { + "description": [ + "Extracts the blue value from a color or pixel array." + ], + "returns": "Number: the blue value", + "params": { + "color": "p5.Color|Number[]|String: p5.Color object, color components, or CSS color" + } + }, + "brightness": { + "description": [ + "Extracts the HSB brightness value from a color or pixel array." + ], + "returns": "Number: the brightness value", + "params": { + "color": "p5.Color|Number[]|String: p5.Color object, color components, or CSS color" + } + }, + "color": { + "description": [ + "Creates colors for storing in variables of the color datatype. The parameters are interpreted as RGB or HSB values depending on the current colorMode(). The default mode is RGB values from 0 to 255 and, therefore, the function call color(255, 204, 0) will return a bright yellow color.", + "Note that if only one value is provided to color(), it will be interpreted as a grayscale value. Add a second value, and it will be used for alpha transparency. When three values are specified, they are interpreted as either RGB or HSB values. Adding a fourth value applies alpha transparency.", + "If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used." + ], + "returns": "p5.Color: resulting color", + "params": { + "gray": "Number: number specifying value between white and black.", + "alpha": "Number: (Optional) alpha value relative to current color range (default is 0-255)", + "v1": "Number: red or hue value relative to the current color range", + "v2": "Number: green or saturation value relative to the current color range", + "v3": "Number: blue or brightness value relative to the current color range", + "value": "String: a color string", + "values": "Number[]: an array containing the red,green,blue & and alpha components of the color", + "color": "p5.Color" + } + }, + "green": { + "description": [ + "Extracts the green value from a color or pixel array." + ], + "returns": "Number: the green value", + "params": { + "color": "p5.Color|Number[]|String: p5.Color object, color components, or CSS color" + } + }, + "hue": { + "description": [ + "Extracts the hue value from a color or pixel array.", + "Hue exists in both HSB and HSL. This function will return the HSB-normalized hue when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL-normalized hue otherwise. (The values will only be different if the maximum hue setting for each system is different.)" + ], + "returns": "Number: the hue", + "params": { + "color": "p5.Color|Number[]|String: p5.Color object, color components, or CSS color" + } + }, + "lerpColor": { + "description": [ + "Blends two colors to find a third color somewhere between them. The amt parameter is the amount to interpolate between the two values where 0.0 is equal to the first color, 0.1 is very near the first color, 0.5 is halfway in between, etc. An amount below 0 will be treated as 0. Likewise, amounts above 1 will be capped at 1. This is different from the behavior of lerp(), but necessary because otherwise numbers outside the range will produce strange and unexpected colors.", + "The way that colors are interpolated depends on the current color mode." + ], + "returns": "p5.Color: interpolated color", + "params": { + "c1": "p5.Color: interpolate from this color", + "c2": "p5.Color: interpolate to this color", + "amt": "Number: number between 0 and 1" + } + }, + "lightness": { + "description": [ + "Extracts the HSL lightness value from a color or pixel array." + ], + "returns": "Number: the lightness", + "params": { + "color": "p5.Color|Number[]|String: p5.Color object, color components, or CSS color" + } + }, + "red": { + "description": [ + "Extracts the red value from a color or pixel array." + ], + "returns": "Number: the red value", + "params": { + "color": "p5.Color|Number[]|String: p5.Color object, color components, or CSS color" + } + }, + "saturation": { + "description": [ + "Extracts the saturation value from a color or pixel array.", + "Saturation is scaled differently in HSB and HSL. This function will return the HSB saturation when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL saturation otherwise." + ], + "returns": "Number: the saturation value", + "params": { + "color": "p5.Color|Number[]|String: p5.Color object, color components, or CSS color" + } + }, + "background": { + "description": [ + "The background() function sets the color used for the background of the p5.js canvas. The default 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 the first frame of animation or if the background need only be set once.", + "The color is either specified in terms of the RGB, HSB, or HSL color depending on the current colorMode. (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.", + "If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.", + "A p5.Color object can also be provided to set the background color.", + "A p5.Image can also be provided to set the background image." + ], + "params": { + "color": "p5.Color: any value created by the color() function", + "colorstring": "String: color string, possible formats include: integer rgb() or rgba(), percentage rgb() or rgba(), 3-digit hex, 6-digit hex", + "a": "Number: (Optional) opacity of the background relative to current color range (default is 0-255)", + "gray": "Number: specifies a value between white and black", + "v1": "Number: red or hue value (depending on the current color mode)", + "v2": "Number: green or saturation value (depending on the current color mode)", + "v3": "Number: blue or brightness value (depending on the current color mode)", + "values": "Number[]: an array containing the red, green, blue and alpha components of the color", + "image": "p5.Image: image created with loadImage() or createImage(), to set as background (must be same size as the sketch window)" + } + }, + "clear": { + "description": [ + "Clears the pixels within a buffer. This function only clears the canvas. It will not clear objects created by createX() methods such as createVideo() or createDiv(). Unlike the main graphics context, pixels in additional graphics areas created with createGraphics() can be entirely or partially transparent. This function clears everything to make all of the pixels 100% transparent." + ] + }, + "colorMode": { + "description": [ + "colorMode() changes the way p5.js interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using the RGB color model. This is equivalent to setting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB system instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You can also use HSL.", + "Note: existing color objects remember the mode that they were created in, so you can change modes as you like without affecting their appearance." + ], + "params": { + "mode": "Constant: either RGB, HSB or HSL, corresponding to Red/Green/Blue and Hue/Saturation/Brightness (or Lightness)", + "max": "Number: (Optional) range for all values", + "max1": "Number: range for the red or hue depending on the current color mode", + "max2": "Number: range for the green or saturation depending on the current color mode", + "max3": "Number: range for the blue or brightness/lightness depending on the current color mode", + "maxA": "Number: (Optional) range for the alpha" + } + }, + "fill": { + "description": [ + "Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all shapes drawn after the fill command will be filled with the color orange. This color is either specified in terms of the RGB or HSB color depending on the current colorMode(). (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.", + "If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.", + "A p5 Color object can also be provided to set the fill color." + ], + "params": { + "v1": "Number: red or hue value relative to the current color range", + "v2": "Number: green or saturation value relative to the current color range", + "v3": "Number: blue or brightness value relative to the current color range", + "alpha": "Number (Optional)", + "value": "String: a color string", + "gray": "Number: a gray value", + "values": "Number[]: an array containing the red,green,blue & and alpha components of the color", + "color": "p5.Color: the fill color" + } + }, + "noFill": { + "description": [ + "Disables filling geometry. If both noStroke() and noFill() are called, nothing will be drawn to the screen." + ] + }, + "noStroke": { + "description": [ + "Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen." + ] + }, + "stroke": { + "description": [ + "Sets the color used to draw lines and borders around shapes. This color is either specified in terms of the RGB or HSB color depending on the current colorMode() (the default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.", + "If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.", + "A p5 Color object can also be provided to set the stroke color." + ], + "params": { + "v1": "Number: red or hue value relative to the current color range", + "v2": "Number: green or saturation value relative to the current color range", + "v3": "Number: blue or brightness value relative to the current color range", + "alpha": "Number (Optional)", + "value": "String: a color string", + "gray": "Number: a gray value", + "values": "Number[]: an array containing the red,green,blue & and alpha components of the color", + "color": "p5.Color: the stroke color" + } + }, + "erase": { + "description": [ + "All drawing that follows erase() will subtract from the canvas.Erased areas will reveal the web page underneath the canvas.Erasing can be canceled with noErase().", + "Drawing done with image() and background() in between erase() and noErase() will not erase the canvas but works as usual." + ], + "params": { + "strengthFill": "Number: (Optional) A number (0-255) for the strength of erasing for a shape's fill. This will default to 255 when no argument is given, which is full strength.", + "strengthStroke": "Number: (Optional) A number (0-255) for the strength of erasing for a shape's stroke. This will default to 255 when no argument is given, which is full strength." + } + }, + "noErase": { + "description": [ + "Ends erasing that was started with erase(). The fill(), stroke(), and blendMode() settings will return to what they were prior to calling erase()." + ] + }, + "arc": { + "description": [ + "Draw an arc to the screen. If called with only x, y, w, h, start and stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc will be filled like an open semi-circle (OPEN), a closed semi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed with the ellipseMode() function.", + "The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse. Adding or subtracting TWO_PI to either angle does not change where they fall. If both start and stop fall at the same place, a full ellipse will be drawn. Be aware that the y-axis increases in the downward direction, therefore angles are measured clockwise from the positive x-direction (\"3 o'clock\")." + ], + "params": { + "x": "Number: x-coordinate of the arc's ellipse", + "y": "Number: y-coordinate of the arc's ellipse", + "w": "Number: width of the arc's ellipse by default", + "h": "Number: height of the arc's ellipse by default", + "start": "Number: angle to start the arc, specified in radians", + "stop": "Number: angle to stop the arc, specified in radians", + "mode": "Constant: (Optional) optional parameter to determine the way of drawing the arc. either CHORD, PIE or OPEN", + "detail": "Integer: (Optional) optional parameter for WebGL mode only. This is to specify the number of vertices that makes up the perimeter of the arc. Default value is 25. Won't draw a stroke for a detail of more than 50." + } + }, + "ellipse": { + "description": [ + "Draws an ellipse (oval) to the screen. By default, the first two parameters set the location of the center of the ellipse, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken.", + "An ellipse with equal width and height is a circle. The origin may be changed with the ellipseMode() function." + ], + "params": { + "x": "Number: x-coordinate of the center of ellipse.", + "y": "Number: y-coordinate of the center of ellipse.", + "w": "Number: width of the ellipse.", + "h": "Number: (Optional) height of the ellipse.", + "detail": "Integer: (Optional) optional parameter for WebGL mode only. This is to specify the number of vertices that makes up the perimeter of the ellipse. Default value is 25. Won't draw a stroke for a detail of more than 50." + } + }, + "circle": { + "description": [ + "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 correspond to the diameter of the circle. By default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle." + ], + "params": { + "x": "Number: x-coordinate of the centre of the circle.", + "y": "Number: y-coordinate of the centre of the circle.", + "d": "Number: diameter of the circle." + } + }, + "line": { + "description": [ + "Draws a line (a direct path between two points) to the screen. If called with only 4 parameters, it will draw a line in 2D with a default width of 1 pixel. This width can be modified by using the strokeWeight() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. So to color a line, use the stroke() function." + ], + "params": { + "x1": "Number: the x-coordinate of the first point", + "y1": "Number: the y-coordinate of the first point", + "x2": "Number: the x-coordinate of the second point", + "y2": "Number: the y-coordinate of the second point", + "z1": "Number: the z-coordinate of the first point", + "z2": "Number: the z-coordinate of the second point" + } + }, + "point": { + "description": [ + "Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second param is the vertical value for the point. The color of the point is changed with the stroke() function. The size of the point can be changed with the strokeWeight() function." + ], + "params": { + "x": "Number: the x-coordinate", + "y": "Number: the y-coordinate", + "z": "Number: (Optional) the z-coordinate (for WebGL mode)", + "coordinate_vector": "p5.Vector: the coordinate vector" + } + }, + "quad": { + "description": [ + "Draws a quad on the canvas. A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape. z-arguments only work when quad() is used in WEBGL mode." + ], + "params": { + "x1": "Number: the x-coordinate of the first point", + "y1": "Number: the y-coordinate of the first point", + "x2": "Number: the x-coordinate of the second point", + "y2": "Number: the y-coordinate of the second point", + "x3": "Number: the x-coordinate of the third point", + "y3": "Number: the y-coordinate of the third point", + "x4": "Number: the x-coordinate of the fourth point", + "y4": "Number: the y-coordinate of the fourth point", + "detailX": "Integer: (Optional) number of segments in the x-direction", + "detailY": "Integer: (Optional) number of segments in the y-direction", + "z1": "Number: the z-coordinate of the first point", + "z2": "Number: the z-coordinate of the second point", + "z3": "Number: the z-coordinate of the third point", + "z4": "Number: the z-coordinate of the fourth point" + } + }, + "rect": { + "description": [ + "Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted, may be changed with the rectMode() function.", + "The fifth, sixth, seventh and eighth 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." + ], + "params": { + "x": "Number: x-coordinate of the rectangle.", + "y": "Number: y-coordinate of the rectangle.", + "w": "Number: width of the rectangle.", + "h": "Number: (Optional) height of the rectangle.", + "tl": "Number: (Optional) optional radius of top-left corner.", + "tr": "Number: (Optional) optional radius of top-right corner.", + "br": "Number: (Optional) optional radius of bottom-right corner.", + "bl": "Number: (Optional) optional radius of bottom-left corner.", + "detailX": "Integer: (Optional) number of segments in the x-direction (for WebGL mode)", + "detailY": "Integer: (Optional) number of segments in the y-direction (for WebGL mode)" + } + }, + "square": { + "description": [ + "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, 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." + ], + "params": { + "x": "Number: x-coordinate of the square.", + "y": "Number: y-coordinate of the square.", + "s": "Number: side size of the square.", + "tl": "Number: (Optional) optional radius of top-left corner.", + "tr": "Number: (Optional) optional radius of top-right corner.", + "br": "Number: (Optional) optional radius of bottom-right corner.", + "bl": "Number: (Optional) optional radius of bottom-left corner." + } + }, + "triangle": { + "description": [ + "Draws a triangle to the canvas. A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point." + ], + "params": { + "x1": "Number: x-coordinate of the first point", + "y1": "Number: y-coordinate of the first point", + "x2": "Number: x-coordinate of the second point", + "y2": "Number: y-coordinate of the second point", + "x3": "Number: x-coordinate of the third point", + "y3": "Number: y-coordinate of the third point" + } + }, + "ellipseMode": { + "description": [ + "Modifies the location from which ellipses are drawn by changing the way in which parameters given to ellipse(), circle() and arc() are interpreted.", + "The default mode is CENTER, in which the first two parameters are interpreted as the shape's center point's x and y coordinates respectively, while the third and fourth parameters are its width and height.", + "ellipseMode(RADIUS) also uses the first two parameters as the shape's center point's x and y coordinates, but uses the third and fourth parameters to specify half of the shapes's width and height.", + "ellipseMode(CORNER) interprets the first two parameters as the upper-left corner of the shape, while the third and fourth parameters are its width and height.", + "ellipseMode(CORNERS) interprets the first two parameters as the location of one corner of the ellipse's bounding box, and the third and fourth parameters as the location of the opposite corner.", + "The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language." + ], + "params": { + "mode": "Constant: either CENTER, RADIUS, CORNER, or CORNERS" + } + }, + "noSmooth": { + "description": [ + "Draws all geometry with jagged (aliased) edges. Note that smooth() is active by default in 2D mode, so it is necessary to call noSmooth() to disable smoothing of geometry, images, and fonts. In 3D mode, noSmooth() is enabled by default, so it is necessary to call smooth() if you would like smooth (antialiased) edges on your geometry." + ] + }, + "rectMode": { + "description": [ + "Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are interpreted.", + "The default mode is CORNER, which interprets the first two parameters as the upper-left corner of the shape, while the third and fourth parameters are its width and height.", + "rectMode(CORNERS) interprets the first two parameters as the location of one of the corners, and the third and fourth parameters as the location of the diagonally opposite corner. Note, the rectangle is drawn between the coordinates, so it is not neccesary that the first corner be the upper left corner.", + "rectMode(CENTER) interprets the first two parameters as the shape's center point, while the third and fourth parameters are its width and height.", + "rectMode(RADIUS) also uses the first two parameters as the shape's center point, but uses the third and fourth parameters to specify half of the shape's width and height respectively.", + "The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language." + ], + "params": { + "mode": "Constant: either CORNER, CORNERS, CENTER, or RADIUS" + } + }, + "smooth": { + "description": [ + "Draws all geometry with smooth (anti-aliased) edges. smooth() will also improve image quality of resized images. Note that smooth() is active by default in 2D mode; noSmooth() can be used to disable smoothing of geometry, images, and fonts. In 3D mode, noSmooth() is enabled by default, so it is necessary to call smooth() if you would like smooth (antialiased) edges on your geometry." + ] + }, + "strokeCap": { + "description": [ + "Sets the style for rendering line endings. These ends are either rounded, squared or extended, each of which specified with the corresponding parameters: ROUND, SQUARE and PROJECT. The default cap is ROUND.", + "The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language." + ], + "params": { + "cap": "Constant: either ROUND, SQUARE or PROJECT" + } + }, + "strokeJoin": { + "description": [ + "Sets the style of the joints which connect line segments. These joints are either mitered, beveled or rounded and specified with the corresponding parameters MITER, BEVEL and ROUND. The default joint is MITER.", + "The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language." + ], + "params": { + "join": "Constant: either MITER, BEVEL, ROUND" + } + }, + "strokeWeight": { + "description": [ + "Sets the width of the stroke used for lines, points and the border around shapes. All widths are set in units of pixels." + ], + "params": { + "weight": "Number: the weight of the stroke (in pixels)" + } + }, + "bezier": { + "description": [ + "Draws a cubic Bezier curve on the screen. These curves are defined by a series of anchor and control points. The first two parameters specify the first anchor point and the last two parameters specify the other anchor point, which become the first and last points on the curve. The middle parameters specify the two control points which define the shape of the curve. Approximately speaking, control points \"pull\" the curve towards them.", + "Bezier curves were developed by French automotive engineer Pierre Bezier, and are commonly used in computer graphics to define gently sloping curves. See also curve()." + ], + "params": { + "x1": "Number: x-coordinate for the first anchor point", + "y1": "Number: y-coordinate for the first anchor point", + "x2": "Number: x-coordinate for the first control point", + "y2": "Number: y-coordinate for the first control point", + "x3": "Number: x-coordinate for the second control point", + "y3": "Number: y-coordinate for the second control point", + "x4": "Number: x-coordinate for the second anchor point", + "y4": "Number: y-coordinate for the second anchor point", + "z1": "Number: z-coordinate for the first anchor point", + "z2": "Number: z-coordinate for the first control point", + "z3": "Number: z-coordinate for the second control point", + "z4": "Number: z-coordinate for the second anchor point" + } + }, + "bezierDetail": { + "description": [ + "Sets the resolution at which Bezier's curve is displayed. The default value is 20.", + "Note, This function is only useful when using the WEBGL renderer as the default canvas renderer does not use this information." + ], + "params": { + "detail": "Number: resolution of the curves" + } + }, + "bezierPoint": { + "description": [ + "Given the x or y co-ordinate values of control and anchor points of a bezier curve, it evaluates the x or y coordinate of the bezier at position t. The parameters a and d are the x or y coordinates of first and last points on the curve while b and c are of the control points.The final parameter t is the position of the resultant point which is given between 0 and 1. This can be done once with the x coordinates and a second time with the y coordinates to get the location of a bezier curve at t." + ], + "returns": "Number: the value of the Bezier at position t", + "params": { + "a": "Number: coordinate of first point on the curve", + "b": "Number: coordinate of first control point", + "c": "Number: coordinate of second control point", + "d": "Number: coordinate of second point on the curve", + "t": "Number: value between 0 and 1" + } + }, + "bezierTangent": { + "description": [ + "Evaluates the tangent to the Bezier at position t for points a, b, c, d. The parameters a and d are the first and last points on the curve, and b and c are the control points. The final parameter t varies between 0 and 1." + ], + "returns": "Number: the tangent at position t", + "params": { + "a": "Number: coordinate of first point on the curve", + "b": "Number: coordinate of first control point", + "c": "Number: coordinate of second control point", + "d": "Number: coordinate of second point on the curve", + "t": "Number: value between 0 and 1" + } + }, + "curve": { + "description": [ + "Draws a curved line on the screen between two points, given as the middle four parameters. The first two parameters are a control point, as if the curve came from this point even though it's not drawn. The last two parameters similarly describe the other control point.

Longer curves can be created by putting a series of curve() functions together or using curveVertex(). An additional function called curveTightness() provides control for the visual quality of the curve. The curve() function is an implementation of Catmull-Rom splines." + ], + "params": { + "x1": "Number: x-coordinate for the beginning control point", + "y1": "Number: y-coordinate for the beginning control point", + "x2": "Number: x-coordinate for the first point", + "y2": "Number: y-coordinate for the first point", + "x3": "Number: x-coordinate for the second point", + "y3": "Number: y-coordinate for the second point", + "x4": "Number: x-coordinate for the ending control point", + "y4": "Number: y-coordinate for the ending control point", + "z1": "Number: z-coordinate for the beginning control point", + "z2": "Number: z-coordinate for the first point", + "z3": "Number: z-coordinate for the second point", + "z4": "Number: z-coordinate for the ending control point" + } + }, + "curveDetail": { + "description": [ + "Sets the resolution at which curves display. The default value is 20 while the minimum value is 3.", + "This function is only useful when using the WEBGL renderer as the default canvas renderer does not use this information." + ], + "params": { + "resolution": "Number: resolution of the curves" + } + }, + "curveTightness": { + "description": [ + "Modifies the quality of forms created with curve() and curveVertex().The parameter tightness determines how the curve fits to the vertex points. The value 0.0 is the default value for tightness (this value defines the curves to be Catmull-Rom splines) and the value 1.0 connects all the points with straight lines. Values within the range -5.0 and 5.0 will deform the curves but will leave them recognizable and as values increase in magnitude, they will continue to deform." + ], + "params": { + "amount": "Number: amount of deformation from the original vertices" + } + }, + "curvePoint": { + "description": [ + "Evaluates the curve at position t for points a, b, c, d. The parameter t varies between 0 and 1, a and d are control points of the curve, and b and c are the start and end points of the curve. This can be done once with the x coordinates and a second time with the y coordinates to get the location of a curve at t." + ], + "returns": "Number: bezier value at position t", + "params": { + "a": "Number: coordinate of first control point of the curve", + "b": "Number: coordinate of first point", + "c": "Number: coordinate of second point", + "d": "Number: coordinate of second control point", + "t": "Number: value between 0 and 1" + } + }, + "curveTangent": { + "description": [ + "Evaluates the tangent to the curve at position t for points a, b, c, d. The parameter t varies between 0 and 1, a and d are points on the curve, and b and c are the control points." + ], + "returns": "Number: the tangent at position t", + "params": { + "a": "Number: coordinate of first control point", + "b": "Number: coordinate of first point on the curve", + "c": "Number: coordinate of second point on the curve", + "d": "Number: coordinate of second conrol point", + "t": "Number: value between 0 and 1" + } + }, + "beginContour": { + "description": [ + "Use the beginContour() and endContour() functions to create negative shapes within shapes such as the center of the letter 'O'. beginContour() begins recording vertices for the shape and endContour() stops recording. The vertices that define a negative shape must \"wind\" in the opposite direction from the exterior shape. First draw vertices for the exterior clockwise order, then for internal shapes, draw vertices shape in counter-clockwise.", + "These functions can only be used within a beginShape()/endShape() pair and transformations such as translate(), rotate(), and scale() do not work within a beginContour()/endContour() pair. It is also not possible to use other shapes, such as ellipse() or rect() within." + ] + }, + "beginShape": { + "description": [ + "Using the beginShape() and endShape() functions allow creating more complex forms. beginShape() begins recording vertices for a shape and endShape() stops recording. The value of the kind parameter tells it which types of shapes to create from the provided vertices. With no mode specified, the shape can be any irregular polygon.", + "The parameters available for beginShape() are:", + "POINTS Draw a series of points", + "LINES Draw a series of unconnected line segments (individual lines)", + "TRIANGLES Draw a series of separate triangles", + "TRIANGLE_FAN Draw a series of connected triangles sharing the first vertex in a fan-like fashion", + "TRIANGLE_STRIP Draw a series of connected triangles in strip fashion", + "QUADS Draw a series of seperate quad", + "QUAD_STRIP Draw quad strip using adjacent edges to form the next quad", + "TESS (WebGl only) Handle irregular polygon for filling curve by explicit tessellation", + "After calling the beginShape() function, a series of vertex() commands must follow. To stop drawing the shape, call endShape(). Each shape will be outlined with the current stroke color and filled with the fill color.", + "Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape()." + ], + "params": { + "kind": "Constant: (Optional) either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS" + } + }, + "bezierVertex": { + "description": [ + "Specifies vertex coordinates for Bezier curves. Each call to bezierVertex() defines the position of two control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. For WebGL mode bezierVertex() can be used in 2D as well as 3D mode. 2D mode expects 6 parameters, while 3D mode expects 9 parameters (including z coordinates).", + "The first time bezierVertex() is used within a beginShape() call, it must be prefaced with a call to vertex() to set the first anchor point. This function must be used between beginShape() and endShape() and only when there is no MODE or POINTS parameter specified to beginShape()." + ], + "params": { + "x2": "Number: x-coordinate for the first control point", + "y2": "Number: y-coordinate for the first control point", + "x3": "Number: x-coordinate for the second control point", + "y3": "Number: y-coordinate for the second control point", + "x4": "Number: x-coordinate for the anchor point", + "y4": "Number: y-coordinate for the anchor point", + "z2": "Number: z-coordinate for the first control point (for WebGL mode)", + "z3": "Number: z-coordinate for the second control point (for WebGL mode)", + "z4": "Number: z-coordinate for the anchor point (for WebGL mode)" + } + }, + "curveVertex": { + "description": [ + "Specifies vertex coordinates for curves. This function may only be used between beginShape() and endShape() and only when there is no MODE parameter specified to beginShape(). For WebGL mode curveVertex() can be used in 2D as well as 3D mode. 2D mode expects 2 parameters, while 3D mode expects 3 parameters.", + "The first and last points in a series of curveVertex() lines will be used to guide the beginning and end of a the curve. A minimum of four points is required to draw a tiny curve between the second and third points. Adding a fifth point with curveVertex() will draw the curve between the second, third, and fourth points. The curveVertex() function is an implementation of Catmull-Rom splines." + ], + "params": { + "x": "Number: x-coordinate of the vertex", + "y": "Number: y-coordinate of the vertex", + "z": "Number: (Optional) z-coordinate of the vertex (for WebGL mode)" + } + }, + "endContour": { + "description": [ + "Use the beginContour() and endContour() functions to create negative shapes within shapes such as the center of the letter 'O'. beginContour() begins recording vertices for the shape and endContour() stops recording. The vertices that define a negative shape must \"wind\" in the opposite direction from the exterior shape. First draw vertices for the exterior clockwise order, then for internal shapes, draw vertices shape in counter-clockwise.", + "These functions can only be used within a beginShape()/endShape() pair and transformations such as translate(), rotate(), and scale() do not work within a beginContour()/endContour() pair. It is also not possible to use other shapes, such as ellipse() or rect() within." + ] + }, + "endShape": { + "description": [ + "The endShape() function is the companion to beginShape() and may only be called after beginShape(). When endShape() is called, all of image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE as the value for the MODE parameter to close the shape (to connect the beginning and the end)." + ], + "params": { + "mode": "Constant: (Optional) use CLOSE to close the shape" + } + }, + "quadraticVertex": { + "description": [ + "Specifies vertex coordinates for quadratic Bezier curves. Each call to quadraticVertex() defines the position of one control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. The first time quadraticVertex() is used within a beginShape() call, it must be prefaced with a call to vertex() to set the first anchor point. For WebGL mode quadraticVertex() can be used in 2D as well as 3D mode. 2D mode expects 4 parameters, while 3D mode expects 6 parameters (including z coordinates).", + "This function must be used between beginShape() and endShape() and only when there is no MODE or POINTS parameter specified to beginShape()." + ], + "params": { + "cx": "Number: x-coordinate for the control point", + "cy": "Number: y-coordinate for the control point", + "x3": "Number: x-coordinate for the anchor point", + "y3": "Number: y-coordinate for the anchor point", + "cz": "Number: z-coordinate for the control point (for WebGL mode)", + "z3": "Number: z-coordinate for the anchor point (for WebGL mode)" + } + }, + "vertex": { + "description": [ + "All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons. It is used exclusively within the beginShape() and endShape() functions." + ], + "params": { + "x": "Number: x-coordinate of the vertex", + "y": "Number: y-coordinate of the vertex", + "z": "Number: z-coordinate of the vertex. Defaults to 0 if not specified.", + "u": "Number: the vertex's texture u-coordinate", + "v": "Number: the vertex's texture v-coordinate" + } + }, + "normal": { + "description": [ + "Sets the 3d vertex normal to use for subsequent vertices drawn with vertex(). A normal is a vector that is generally nearly perpendicular to a shape's surface which controls how much light will be reflected from that part of the surface." + ], + "params": { + "vector": "Vector: A p5.Vector representing the vertex normal.", + "x": "Number: The x component of the vertex normal.", + "y": "Number: The y component of the vertex normal.", + "z": "Number: The z component of the vertex normal." + } + }, + "VERSION": { + "description": [ + "Version of this p5.js." + ] + }, + "P2D": { + "description": [ + "The default, two-dimensional renderer." + ] + }, + "WEBGL": { + "description": [ + "One of the two render modes in p5.js: P2D (default renderer) and WEBGL Enables 3D render by introducing the third dimension: Z" + ] + }, + "ARROW": {}, + "CROSS": {}, + "HAND": {}, + "MOVE": {}, + "TEXT": {}, + "WAIT": {}, + "HALF_PI": { + "description": [ + "HALF_PI is a mathematical constant with the value 1.57079632679489661923. It is half the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos()." + ] + }, + "PI": { + "description": [ + "PI is a mathematical constant with the value 3.14159265358979323846. It is the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos()." + ] + }, + "QUARTER_PI": { + "description": [ + "QUARTER_PI is a mathematical constant with the value 0.7853982. It is one quarter the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos()." + ] + }, + "TAU": { + "description": [ + "TAU is an alias for TWO_PI, a mathematical constant with the value 6.28318530717958647693. It is twice the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos()." + ] + }, + "TWO_PI": { + "description": [ + "TWO_PI is a mathematical constant with the value 6.28318530717958647693. It is twice the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos()." + ] + }, + "DEGREES": { + "description": [ + "Constant to be used with angleMode() function, to set the mode which p5.js interprets and calculates angles (either DEGREES or RADIANS)." + ] + }, + "RADIANS": { + "description": [ + "Constant to be used with angleMode() function, to set the mode which p5.js interprets and calculates angles (either RADIANS or DEGREES)." + ] + }, + "CORNER": {}, + "CORNERS": {}, + "RADIUS": {}, + "RIGHT": {}, + "LEFT": {}, + "CENTER": {}, + "TOP": {}, + "BOTTOM": {}, + "BASELINE": {}, + "POINTS": {}, + "LINES": {}, + "LINE_STRIP": {}, + "LINE_LOOP": {}, + "TRIANGLES": {}, + "TRIANGLE_FAN": {}, + "TRIANGLE_STRIP": {}, + "QUADS": {}, + "QUAD_STRIP": {}, + "TESS": {}, + "CLOSE": {}, + "OPEN": {}, + "CHORD": {}, + "PIE": {}, + "PROJECT": {}, + "SQUARE": {}, + "ROUND": {}, + "BEVEL": {}, + "MITER": {}, + "RGB": {}, + "HSB": { + "description": [ + "HSB (hue, saturation, brightness) is a type of color model. You can learn more about it at HSB." + ] + }, + "HSL": {}, + "AUTO": { + "description": [ + "AUTO allows us to automatically set the width or height of an element (but not both), based on the current height and width of the element. Only one parameter can be passed to the size function as AUTO, at a time." + ] + }, + "ALT": {}, + "BACKSPACE": {}, + "CONTROL": {}, + "DELETE": {}, + "DOWN_ARROW": {}, + "ENTER": {}, + "ESCAPE": {}, + "LEFT_ARROW": {}, + "OPTION": {}, + "RETURN": {}, + "RIGHT_ARROW": {}, + "SHIFT": {}, + "TAB": {}, + "UP_ARROW": {}, + "BLEND": {}, + "REMOVE": {}, + "ADD": {}, + "DARKEST": {}, + "LIGHTEST": {}, + "DIFFERENCE": {}, + "SUBTRACT": {}, + "EXCLUSION": {}, + "MULTIPLY": {}, + "SCREEN": {}, + "REPLACE": {}, + "OVERLAY": {}, + "HARD_LIGHT": {}, + "SOFT_LIGHT": {}, + "DODGE": {}, + "BURN": {}, + "THRESHOLD": {}, + "GRAY": {}, + "OPAQUE": {}, + "INVERT": {}, + "POSTERIZE": {}, + "DILATE": {}, + "ERODE": {}, + "BLUR": {}, + "NORMAL": {}, + "ITALIC": {}, + "BOLD": {}, + "BOLDITALIC": {}, + "CHAR": {}, + "WORD": {}, + "LINEAR": {}, + "QUADRATIC": {}, + "BEZIER": {}, + "CURVE": {}, + "STROKE": {}, + "FILL": {}, + "TEXTURE": {}, + "IMMEDIATE": {}, + "IMAGE": {}, + "NEAREST": {}, + "REPEAT": {}, + "CLAMP": {}, + "MIRROR": {}, + "LANDSCAPE": {}, + "PORTRAIT": {}, + "GRID": {}, + "AXES": {}, + "LABEL": {}, + "FALLBACK": {}, + "print": { + "description": [ + "The print() function writes to the console area of your browser. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes (\"\") and joined with the addition operator (+).", + "Note that calling print() without any arguments invokes the window.print() function which opens the browser's print dialog. To print a blank line to console you can write print('\\n')." + ], + "params": { + "contents": "Any: any combination of Number, String, Object, Boolean, Array to print" + } + }, + "frameCount": { + "description": [ + "The system variable frameCount contains the number of frames that have been displayed since the program started. Inside setup() the value is 0, after the first iteration of draw it is 1, etc." + ] + }, + "deltaTime": { + "description": [ + "The system variable deltaTime contains the time difference between the beginning of the previous frame and the beginning of the current frame in milliseconds.", + "This variable is useful for creating time sensitive animation or physics calculation that should stay constant regardless of frame rate." + ] + }, + "focused": { + "description": [ + "Confirms if the window a p5.js program is in is \"focused,\" meaning that the sketch will accept mouse or keyboard input. This variable is \"true\" if the window is focused and \"false\" if not." + ] + }, + "cursor": { + "description": [ + "Sets the cursor to a predefined symbol or an image, or makes it visible if already hidden. If you are trying to set an image as the cursor, the recommended size is 16x16 or 32x32 pixels. The values for parameters x and y must be less than the dimensions of the image." + ], + "params": { + "type": "String|Constant: 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", + "x": "Number: (Optional) the horizontal active spot of the cursor (must be less than 32)", + "y": "Number: (Optional) the vertical active spot of the cursor (must be less than 32)" + } + }, + "frameRate": { + "description": [ + "Specifies the number of frames to be displayed every second. For example, the function call frameRate(30) will attempt to refresh 30 times a second. If the processor is not fast enough to maintain the specified rate, the frame rate will not be achieved. Setting the frame rate within setup() is recommended. The default frame rate is based on the frame rate of the display (here also called \"refresh rate\"), which is set to 60 frames per second on most computers. A frame rate of 24 frames per second (usual for movies) or above will be enough for smooth animations. This is the same as setFrameRate(val).", + "Calling frameRate() with no arguments returns the current framerate. The draw function must run at least once before it will return a value. This is the same as getFrameRate().", + "Calling frameRate() with arguments that are not of the type numbers or are non positive also returns current framerate." + ], + "params": { + "fps": "Number: number of frames to be displayed every second" + } + }, + "noCursor": { + "description": [ + "Hides the cursor from view." + ] + }, + "displayWidth": { + "description": [ + "System variable that stores the width of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity." + ] + }, + "displayHeight": { + "description": [ + "System variable that stores the height of the screen display according to The default pixelDensity. This is used to run a full-screen program on any display size. To return actual screen size, multiply this by pixelDensity." + ] + }, + "windowWidth": { + "description": [ + "System variable that stores the width of the inner window, it maps to window.innerWidth." + ] + }, + "windowHeight": { + "description": [ + "System variable that stores the height of the inner window, it maps to window.innerHeight." + ] + }, + "windowResized": { + "description": [ + "The windowResized() function is called once every time the browser window is resized. This is a good place to resize the canvas or do any other adjustments to accommodate the new window size." + ], + "params": { + "event": "Object: (Optional) optional Event callback argument." + } + }, + "width": { + "description": [ + "System variable that stores the width of the drawing canvas. This value is set by the first parameter of the createCanvas() function. For example, the function call createCanvas(320, 240) sets the width variable to the value 320. The value of width defaults to 100 if createCanvas() is not used in a program." + ] + }, + "height": { + "description": [ + "System variable that stores the height of the drawing canvas. This value is set by the second parameter of the createCanvas() function. For example, the function call createCanvas(320, 240) sets the height variable to the value 240. The value of height defaults to 100 if createCanvas() is not used in a program." + ] + }, + "fullscreen": { + "description": [ + "If argument is given, sets the sketch to fullscreen or not based on the value of the argument. If no argument is given, returns the current fullscreen state. Note that due to browser restrictions this can only be called on user input, for example, on mouse press like the example below." + ], + "returns": "Boolean: current fullscreen state", + "params": { + "val": "Boolean: (Optional) whether the sketch should be in fullscreen mode or not" + } + }, + "pixelDensity": { + "description": [ + "Sets the pixel scaling for high pixel density displays. By default pixel density is set to match display density, call pixelDensity(1) to turn this off. Calling pixelDensity() with no arguments returns the current pixel density of the sketch." + ], + "params": { + "val": "Number: whether or how much the sketch should scale" + } + }, + "displayDensity": { + "description": [ + "Returns the pixel density of the current display the sketch is running on." + ], + "returns": "Number: current pixel density of the display" + }, + "getURL": { + "description": [ + "Gets the current URL. Note: when using the p5 Editor, this will return an empty object because the sketch is embedded in an iframe. It will work correctly if you view the sketch using the editor's present or share URLs." + ], + "returns": "String: url" + }, + "getURLPath": { + "description": [ + "Gets the current URL path as an array. Note: when using the p5 Editor, this will return an empty object because the sketch is embedded in an iframe. It will work correctly if you view the sketch using the editor's present or share URLs." + ], + "returns": "String[]: path components" + }, + "getURLParams": { + "description": [ + "Gets the current URL params as an Object. Note: when using the p5 Editor, this will return an empty object because the sketch is embedded in an iframe. It will work correctly if you view the sketch using the editor's present or share URLs." + ], + "returns": "Object: URL params" + }, + "preload": { + "description": [ + "Called directly before setup(), the preload() function is used to handle asynchronous loading of external files in a blocking way. If a preload function is defined, setup() will wait until any load calls within have finished. Nothing besides load calls (loadImage, loadJSON, loadFont, loadStrings, etc.) should be inside the preload function. If asynchronous loading is preferred, the load methods can instead be called in setup() or anywhere else with the use of a callback parameter.", + "By default the text \"loading...\" will be displayed. To make your own loading page, include an HTML element with id \"p5_loading\" in your page. More information here." + ] + }, + "setup": { + "description": [ + "The setup() function is called once when the program starts. It's used to define initial environment properties such as screen size and background color and to load media such as images and fonts as the program starts. There can only be one setup() function for each program and it shouldn't be called again after its initial execution.", + "Note: Variables declared within setup() are not accessible within other functions, including draw()." + ] + }, + "draw": { + "description": [ + "Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called. Note if noLoop() is called in setup(), draw() will still be executed once before stopping. draw() is called automatically and should never be called explicitly.", + "It should always be controlled with noLoop(), redraw() and loop(). After noLoop() stops the code in draw() from executing, redraw() causes the code inside draw() to execute once, and loop() will cause the code inside draw() to resume executing continuously.", + "The number of times draw() executes in each second may be controlled with the frameRate() function.", + "There can only be one draw() function for each sketch, and draw() must exist if you want the code to run continuously, or to process events such as mousePressed(). Sometimes, you might have an empty call to draw() in your program, as shown in the above example.", + "It is important to note that the drawing coordinate system will be reset at the beginning of each draw() call. If any transformations are performed within draw() (ex: scale, rotate, translate), their effects will be undone at the beginning of draw(), so transformations will not accumulate over time. On the other hand, styling applied (ex: fill, stroke, etc) will remain in effect." + ] + }, + "remove": { + "description": [ + "Removes the entire p5 sketch. This will remove the canvas and any elements created by p5.js. It will also stop the draw loop and unbind any properties or methods from the window global scope. It will leave a variable p5 in case you wanted to create a new p5 sketch. If you like, you can set p5 = null to erase it. While all functions and variables and objects created by the p5 library will be removed, any other global variables created by your code will remain." + ] + }, + "disableFriendlyErrors": { + "description": [ + "Allows for the friendly error system (FES) to be turned off when creating a sketch, which can give a significant boost to performance when needed. See disabling the friendly error system." + ] + }, + "let": { + "description": [ + "Creates and names a new variable. A variable is a container for a value.", + "Variables that are declared with let will have block-scope. This means that the variable only exists within the block that it is created within.", + "From the MDN entry: Declares a block scope local variable, optionally initializing it to a value." + ] + }, + "const": { + "description": [ + "Creates and names a new constant. Like a variable created with let, a constant that is created with const is a container for a value, however constants cannot be reassigned once they are declared. Although it is noteworthy that for non-primitive data types like objects & arrays, their elements can still be changeable. So if a variable is assigned an array, you can still add or remove elements from the array but cannot reassign another array to it. Also unlike let, you cannot declare variables without value using const.", + "Constants have block-scope. This means that the constant only exists within the block that it is created within. A constant cannot be redeclared within a scope in which it already exists.", + "From the MDN entry: Declares a read-only named constant. Constants are block-scoped, much like variables defined using the 'let' statement. The value of a constant can't be changed through reassignment, and it can't be redeclared." + ] + }, + "===": { + "description": [ + "The strict equality operator === checks to see if two values are equal and of the same type.", + "A comparison expression always evaluates to a boolean.", + "From the MDN entry: The non-identity operator returns true if the operands are not equal and/or not of the same type.", + "Note: In some examples around the web you may see a double-equals-sign ==, used for comparison instead. This is the non-strict equality operator in Javascript. This will convert the two values being compared to the same type before comparing them." + ] + }, + ">": { + "description": [ + "The greater than operator \">> evaluates to true if the left value is greater than the right value. There is more info on comparison operators on MDN." + ] + }, + ">=": { + "description": [ + "The greater than or equal to operator =\">>= evaluates to true if the left value is greater than or equal to the right value.", + "There is more info on comparison operators on MDN." + ] + }, + "<": { + "description": [ + "The less than operator < evaluates to true if the left value is less than the right value.", + "There is more info on comparison operators on MDN." + ] + }, + "<=": { + "description": [ + "The less than or equal to operator <= evaluates to true if the left value is less than or equal to the right value.", + "There is more info on comparison operators on MDN." + ] + }, + "if-else": { + "description": [ + "The if-else statement helps control the flow of your code.", + "A condition is placed between the parenthesis following 'if', when that condition evalues to truthy, the code between the following curly braces is run. Alternatively, when the condition evaluates to falsy, the code between the curly braces of 'else' block is run instead. Writing an else block is optional.", + "From the MDN entry: The 'if' statement executes a statement if a specified condition is truthy. If the condition is falsy, another statement can be executed" + ] + }, + "function": { + "description": [ + "Creates and names a function. A function is a set of statements that perform a task.", + "Optionally, functions can have parameters. Parameters are variables that are scoped to the function, that can be assigned a value when calling the function.Multiple parameters can be given by seperating them with commmas.", + "From the MDN entry: Declares a function with the specified parameters." + ] + }, + "return": { + "description": [ + "Specifies the value to be returned by a function. For more info checkout the MDN entry for return." + ] + }, + "boolean": { + "description": [ + "Converts a number or string to its boolean representation. For a number, any non-zero value (positive or negative) evaluates to true, while zero evaluates to false. For a string, the value \"true\" evaluates to true, while any other value evaluates to false. When an array of number or string values is passed in, then a array of booleans of the same length is returned." + ], + "returns": "Boolean: boolean representation of value", + "params": { + "n": "String|Boolean|Number|Array: value to parse" + } + }, + "string": { + "description": [ + "A string is one of the 7 primitive data types in Javascript. A string is a series of text characters. In Javascript, a string value must be surrounded by either single-quotation marks(') or double-quotation marks(\").", + "From the MDN entry: A string is a sequence of characters used to represent text." + ] + }, + "number": { + "description": [ + "A number is one of the 7 primitive data types in Javascript. A number can be a whole number or a decimal number.", + "The MDN entry for number" + ] + }, + "object": { + "description": [ + "From MDN's object basics: An object is a collection of related data and/or functionality (which usually consists of several variables and functions — which are called properties and methods when they are inside objects.)" + ] + }, + "class": { + "description": [ + "Creates and names a class which is a template for the creation of objects.", + "From the MDN entry: The class declaration creates a new Class with a given name using prototype-based inheritance." + ] + }, + "for": { + "description": [ + "for creates a loop that is useful for executing one section of code multiple times.", + "A 'for loop' consists of three different expressions inside of a parenthesis, all of which are optional.These expressions are used to control the number of times the loop is run.The first expression is a statement that is used to set the initial state for the loop.The second expression is a condition that you would like to check before each loop. If this expression returns false then the loop will exit.The third expression is executed at the end of each loop. These expression are separated by ; (semi-colon).In case of an empty expression, only a semi-colon is written.", + "The code inside of the loop body (in between the curly braces) is executed between the evaluation of the second and third expression.", + "As with any loop, it is important to ensure that the loop can 'exit', or that the test condition will eventually evaluate to false. The test condition with a for loop is the second expression detailed above. Ensuring that this expression can eventually become false ensures that your loop doesn't attempt to run an infinite amount of times, which can crash your browser.", + "From the MDN entry: Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once." + ] + }, + "while": { + "description": [ + "while creates a loop that is useful for executing one section of code multiple times.", + "With a 'while loop', the code inside of the loop body (between the curly braces) is run repeatedly until the test condition (inside of the parenthesis) evaluates to false. The condition is tested before executing the code body with while, so if the condition is initially false the loop body, or statement, will never execute.", + "As with any loop, it is important to ensure that the loop can 'exit', or that the test condition will eventually evaluate to false. This is to keep your loop from trying to run an infinite amount of times, which can crash your browser.", + "From the MDN entry: The while statement creates a loop that executes a specified statement as long as the test condition evaluates to true.The condition is evaluated before executing the statement." + ] + }, + "createCanvas": { + "description": [ + "Creates a canvas element in the document, and sets the dimensions of it in pixels. This method should be called only once at the start of setup. Calling createCanvas more than once in a sketch will result in very unpredictable behavior. If you want more than one drawing canvas you could use createGraphics (hidden by default but it can be shown).", + "Important note: in 2D mode (i.e. when p5.Renderer is not set) the origin (0,0) is positioned at the top left of the screen. In 3D mode (i.e. when p5.Renderer is set to WEBGL), the origin is positioned at the center of the canvas. See this issue for more information.", + "The system variables width and height are set by the parameters passed to this function. If createCanvas() is not used, the window will be given a default size of 100x100 pixels.", + "For more ways to position the canvas, see the positioning the canvas wiki page." + ], + "returns": "p5.Renderer:", + "params": { + "w": "Number: width of the canvas", + "h": "Number: height of the canvas", + "renderer": "Constant: (Optional) either P2D or WEBGL" + } + }, + "resizeCanvas": { + "description": [ + "Resizes the canvas to given width and height. The canvas will be cleared and draw will be called immediately, allowing the sketch to re-render itself in the resized canvas." + ], + "params": { + "w": "Number: width of the canvas", + "h": "Number: height of the canvas", + "noRedraw": "Boolean: (Optional) don't redraw the canvas immediately" + } + }, + "noCanvas": { + "description": [ + "Removes the default canvas for a p5 sketch that doesn't require a canvas" + ] + }, + "createGraphics": { + "description": [ + "Creates and returns a new p5.Renderer object. Use this class if you need to draw into an off-screen graphics buffer. The two parameters define the width and height in pixels." + ], + "returns": "p5.Graphics: offscreen graphics buffer", + "params": { + "w": "Number: width of the offscreen graphics buffer", + "h": "Number: height of the offscreen graphics buffer", + "renderer": "Constant: (Optional) either P2D or WEBGL undefined defaults to p2d" + } + }, + "blendMode": { + "description": [ + "Blends the pixels in the display window according to the defined mode. There is a choice of the following modes to blend the source pixels (A) with the ones of pixels already in the display window (B): ", + "(2D) indicates that this blend mode only works in the 2D renderer. (3D) indicates that this blend mode only works in the WEBGL renderer." + ], + "params": { + "mode": "Constant: blend mode to set for canvas. either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT" + } + }, + "drawingContext": { + "description": [ + "The p5.js API provides a lot of functionality for creating graphics, but there is some native HTML5 Canvas functionality that is not exposed by p5. You can still call it directly using the variable drawingContext, as in the example shown. This is the equivalent of calling canvas.getContext('2d'); or canvas.getContext('webgl');. See this reference for the native canvas API for possible drawing functions you can call." + ] + }, + "noLoop": { + "description": [ + "Stops p5.js from continuously executing the code within draw(). If loop() is called, the code in draw() begins to run continuously again. If using noLoop() in setup(), it should be the last line inside the block.", + "When noLoop() is used, it's not possible to manipulate or access the screen inside event handling functions such as mousePressed() or keyPressed(). Instead, use those functions to call redraw() or loop(), which will run draw(), which can update the screen properly. This means that when noLoop() has been called, no drawing can happen, and functions like saveFrames() or loadPixels() may not be used.", + "Note that if the sketch is resized, redraw() will be called to update the sketch, even after noLoop() has been specified. Otherwise, the sketch would enter an odd state until loop() was called.", + "Use isLooping() to check current state of loop()." + ] + }, + "loop": { + "description": [ + "By default, p5.js loops through draw() continuously, executing the code within it. However, the draw() loop may be stopped by calling noLoop(). In that case, the draw() loop can be resumed with loop().", + "Avoid calling loop() from inside setup().", + "Use isLooping() to check current state of loop()." + ] + }, + "isLooping": { + "description": [ + "By default, p5.js loops through draw() continuously, executing the code within it. If the sketch is stopped with noLoop() or resumed with loop(), isLooping() returns the current state for use within custom event handlers." + ] + }, + "push": { + "description": [ + "The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)", + "push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), noFill(), noStroke(), stroke(), tint(), noTint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(), applyMatrix(), resetMatrix(), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed().", + "In WEBGL mode additional style settings are stored. These are controlled by the following functions: setCamera(), ambientLight(), directionalLight(), pointLight(), texture(), specularMaterial(), shininess(), normalMaterial() and shader()." + ] + }, + "pop": { + "description": [ + "The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)", + "push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), noFill(), noStroke(), stroke(), tint(), noTint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(), applyMatrix(), resetMatrix(), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed().", + "In WEBGL mode additional style settings are stored. These are controlled by the following functions: setCamera(), ambientLight(), directionalLight(), pointLight(), texture(), specularMaterial(), shininess(), normalMaterial() and shader()." + ] + }, + "redraw": { + "description": [ + "Executes the code within draw() one time. This function allows the program to update the display window only when necessary, for example when an event registered by mousePressed() or keyPressed() occurs.", + "In structuring a program, it only makes sense to call redraw() within events such as mousePressed(). This is because redraw() does not run draw() immediately (it only sets a flag that indicates an update is needed).", + "The redraw() function does not work properly when called inside draw().To enable/disable animations, use loop() and noLoop().", + "In addition you can set the number of redraws per method call. Just add an integer as single parameter for the number of redraws." + ], + "params": { + "n": "Integer: (Optional) Redraw for n-times. The default value is 1." + } + }, + "p5": { + "description": [ + "The p5() constructor enables you to activate \"instance mode\" instead of normal \"global mode\". This is an advanced topic. A short description and example is included below. Please see Dan Shiffman's Coding Train video tutorial or this tutorial page for more info.", + "By default, all p5.js functions are in the global namespace (i.e. bound to the window object), meaning you can call them simply ellipse(), fill(), etc. However, this might be inconvenient if you are mixing with other JS libraries (synchronously or asynchronously) or writing long programs of your own. p5.js currently supports a way around this problem called \"instance mode\". In instance mode, all p5 functions are bound up in a single variable instead of polluting your global namespace.", + "Optionally, you can specify a default container for the canvas and any other elements to append to with a second argument. You can give the ID of an element in your html, or an html node itself.", + "Note that creating instances like this also allows you to have more than one p5 sketch on a single web page, as they will each be wrapped up with their own set up variables. Of course, you could also use iframes to have multiple sketches in global mode." + ], + "params": { + "sketch": "Object: a function containing a p5.js sketch", + "node": "String|Object: ID or pointer to HTML DOM node to contain sketch in" + } + }, + "applyMatrix": { + "description": [ + "Multiplies the current matrix by the one specified through the parameters. This is a powerful operation that can perform the equivalent of translate, scale, shear and rotate all at once. You can learn more about transformation matrices on Wikipedia.", + "The naming of the arguments here follows the naming of the WHATWG specification and corresponds to a transformation matrix of the form:
", + "\"The
" + ], + "params": { + "a": "Number|Array: numbers which define the 2x3 matrix to be multiplied, or an array of numbers", + "b": "Number: numbers which define the 2x3 matrix to be multiplied", + "c": "Number: numbers which define the 2x3 matrix to be multiplied", + "d": "Number: numbers which define the 2x3 matrix to be multiplied", + "e": "Number: numbers which define the 2x3 matrix to be multiplied", + "f": "Number: numbers which define the 2x3 matrix to be multiplied" + } + }, + "resetMatrix": { + "description": [ + "Replaces the current matrix with the identity matrix." + ] + }, + "rotate": { + "description": [ + "Rotates a shape by the amount specified by the angle parameter. This function accounts for angleMode, so angles can be entered in either RADIANS or DEGREES.", + "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). All transformations are reset when draw() begins again.", + "Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop()." + ], + "params": { + "angle": "Number: the angle of rotation, specified in radians or degrees, depending on current angleMode", + "axis": "p5.Vector|Number[]: (Optional) (in 3d) the axis to rotate around" + } + }, + "rotateX": { + "description": [ + "Rotates a shape around X axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES.", + "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All transformations are reset when draw() begins again." + ], + "params": { + "angle": "Number: the angle of rotation, specified in radians or degrees, depending on current angleMode" + } + }, + "rotateY": { + "description": [ + "Rotates a shape around Y axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES.", + "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All transformations are reset when draw() begins again." + ], + "params": { + "angle": "Number: the angle of rotation, specified in radians or degrees, depending on current angleMode" + } + }, + "rotateZ": { + "description": [ + "Rotates a shape around Z axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES.", + "This method works in WEBGL mode only.", + "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All transformations are reset when draw() begins again." + ], + "params": { + "angle": "Number: the angle of rotation, specified in radians or degrees, depending on current angleMode" + } + }, + "scale": { + "description": [ + "Increases or decreases the size of a shape by expanding or contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call scale(2.0) increases the dimension of a shape by 200%.", + "Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0). If scale() is called within draw(), the transformation is reset when the loop begins again.", + "Using this function with the z parameter is only available in WEBGL mode. This function can be further controlled with push() and pop()." + ], + "params": { + "s": "Number|p5.Vector|Number[]: percent to scale the object, or percentage to scale the object in the x-axis if multiple arguments are given", + "y": "Number: (Optional) percent to scale the object in the y-axis", + "z": "Number: (Optional) percent to scale the object in the z-axis (webgl only)", + "scales": "p5.Vector|Number[]: per-axis percents to scale the object" + } + }, + "shearX": { + "description": [ + "Shears a shape around the x-axis by the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.", + "Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI). If shearX() is called within the draw(), the transformation is reset when the loop begins again.", + "Technically, shearX() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions." + ], + "params": { + "angle": "Number: angle of shear specified in radians or degrees, depending on current angleMode" + } + }, + "shearY": { + "description": [ + "Shears a shape around the y-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.", + "Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If shearY() is called within the draw(), the transformation is reset when the loop begins again.", + "Technically, shearY() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions." + ], + "params": { + "angle": "Number: angle of shear specified in radians or degrees, depending on current angleMode" + } + }, + "translate": { + "description": [ + "Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation.", + "Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). If translate() is called within draw(), the transformation is reset when the loop begins again. This function can be further controlled by using push() and pop()." + ], + "params": { + "x": "Number: left/right translation", + "y": "Number: up/down translation", + "z": "Number: (Optional) forward/backward translation (webgl only)", + "vector": "p5.Vector: the vector to translate by" + } + }, + "storeItem": { + "description": [ + "Stores a value in local storage under the key name. Local storage is saved in the browser and persists between browsing sessions and page reloads. The key can be the name of the variable but doesn't have to be. To retrieve stored items see getItem. Sensitive data such as passwords or personal information should not be stored in local storage." + ], + "params": { + "key": "String", + "value": "String|Number|Object|Boolean|p5.Color|p5.Vector" + } + }, + "getItem": { + "description": [ + "Returns the value of an item that was stored in local storage using storeItem()" + ], + "returns": "Number|Object|String|Boolean|p5.Color|p5.Vector: Value of stored item", + "params": { + "key": "String: name that you wish to use to store in local storage" + } + }, + "clearStorage": { + "description": [ + "Clears all local storage items set with storeItem() for the current domain." + ] + }, + "removeItem": { + "description": [ + "Removes an item that was stored with storeItem()" + ], + "params": { + "key": "String" + } + }, + "createStringDict": { + "description": [ + "Creates a new instance of p5.StringDict using the key-value pair or the object you provide." + ], + "returns": "p5.StringDict:", + "params": { + "key": "String", + "value": "String", + "object": "Object: object" + } + }, + "createNumberDict": { + "description": [ + "Creates a new instance of p5.NumberDict using the key-value pair or object you provide." + ], + "returns": "p5.NumberDict:", + "params": { + "key": "Number", + "value": "Number", + "object": "Object: object" + } + }, + "select": { + "description": [ + "Searches the page for the first element that matches the given CSS selector string (can be an ID, class, tag name or a combination) and returns it as a p5.Element. The DOM node itself can be accessed with .elt. Returns null if none found. You can also specify a container to search within." + ], + "returns": "p5.Element|null: p5.Element containing node found", + "params": { + "selectors": "String: CSS selector string of element to search for", + "container": "String|p5.Element|HTMLElement: (Optional) CSS selector string, p5.Element, or HTML element to search within" + } + }, + "selectAll": { + "description": [ + "Searches the page for elements that match the given CSS selector string (can be an ID a class, tag name or a combination) and returns them as p5.Elements in an array. The DOM node itself can be accessed with .elt. Returns an empty array if none found. You can also specify a container to search within." + ], + "returns": "p5.Element[]: Array of p5.Elements containing nodes found", + "params": { + "selectors": "String: CSS selector string of elements to search for", + "container": "String|p5.Element|HTMLElement: (Optional) CSS selector string, p5.Element , or HTML element to search within" + } + }, + "removeElements": { + "description": [ + "Removes all elements created by p5, except any canvas / graphics elements created by createCanvas or createGraphics. Event handlers are removed, and element is removed from the DOM." + ] + }, + "changed": { + "description": [ + "The .changed() function is called when the value of an element changes. This can be used to attach an element specific event listener." + ], + "params": { + "fxn": "Function|Boolean: function to be fired when the value of an element changes. if false is passed instead, the previously firing function will no longer fire." + } + }, + "input": { + "description": [ + "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." + ], + "params": { + "fxn": "Function|Boolean: 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." + } + }, + "createDiv": { + "description": [ + "Creates a <div></div> element in the DOM with given inner HTML." + ], + "returns": "p5.Element: pointer to p5.Element holding created node", + "params": { + "html": "String: (Optional) inner HTML for element created" + } + }, + "createP": { + "description": [ + "Creates a <p></p> element in the DOM with given inner HTML. Used for paragraph length text." + ], + "returns": "p5.Element: pointer to p5.Element holding created node", + "params": { + "html": "String: (Optional) inner HTML for element created" + } + }, + "createSpan": { + "description": [ + "Creates a <span></span> element in the DOM with given inner HTML." + ], + "returns": "p5.Element: pointer to p5.Element holding created node", + "params": { + "html": "String: (Optional) inner HTML for element created" + } + }, + "createImg": { + "description": [ + "Creates an <img> element in the DOM with given src and alternate text." + ], + "returns": "p5.Element: pointer to p5.Element holding created node", + "params": { + "src": "String: src path or url for image", + "alt": "String: alternate text to be used if image does not load. You can use also an empty string (\"\") if that an image is not intended to be viewed.", + "crossOrigin": "String: crossOrigin property of the img element; use either 'anonymous' or 'use-credentials' to retrieve the image with cross-origin access (for later use with canvas. if an empty string(\"\") is passed, CORS is not used", + "successCallback": "Function: (Optional) callback to be called once image data is loaded with the p5.Element as argument" + } + }, + "createA": { + "description": [ + "Creates an <a></a> element in the DOM for including a hyperlink." + ], + "returns": "p5.Element: pointer to p5.Element holding created node", + "params": { + "href": "String: url of page to link to", + "html": "String: inner html of link element to display", + "target": "String: (Optional) target where new link should open, could be _blank, _self, _parent, _top." + } + }, + "createSlider": { + "description": [ + "Creates a slider <input></input> element in the DOM. Use .size() to set the display length of the slider." + ], + "returns": "p5.Element: pointer to p5.Element holding created node", + "params": { + "min": "Number: minimum value of the slider", + "max": "Number: maximum value of the slider", + "value": "Number: (Optional) default value of the slider", + "step": "Number: (Optional) step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value)" + } + }, + "createButton": { + "description": [ + "Creates a <button></button> element in the DOM. Use .size() to set the display size of the button. Use .mousePressed() to specify behavior on press." + ], + "returns": "p5.Element: pointer to p5.Element holding created node", + "params": { + "label": "String: label displayed on the button", + "value": "String: (Optional) value of the button" + } + }, + "createCheckbox": { + "description": [ + "Creates a checkbox <input></input> element in the DOM. Calling .checked() on a checkbox returns if it is checked or not" + ], + "returns": "p5.Element: pointer to p5.Element holding created node", + "params": { + "label": "String: (Optional) label displayed after checkbox", + "value": "Boolean: (Optional) value of the checkbox; checked is true, unchecked is false" + } + }, + "createSelect": { + "description": [ + "Creates a dropdown menu <select></select> element in the DOM. It also helps to assign select-box methods to p5.Element when selecting existing select box. " + ], + "returns": "p5.Element:", + "params": { + "multiple": "Boolean: (Optional) true if dropdown should support multiple selections", + "existing": "Object: DOM select element" + } + }, + "createRadio": { + "description": [ + "Creates a radio button element in the DOM.It also helps existing radio buttons assign methods of p5.Element. " + ], + "returns": "p5.Element: pointer to p5.Element holding created node", + "params": { + "containerElement": "Object: An container HTML Element either a div or span inside which all existing radio inputs will be considered as options.", + "name": "String: (Optional) A name parameter for each Input Element." + } + }, + "createColorPicker": { + "description": [ + "Creates a colorPicker element in the DOM for color input. The .value() method will return a hex string (#rrggbb) of the color. The .color() method will return a p5.Color object with the current chosen color." + ], + "returns": "p5.Element: pointer to p5.Element holding created node", + "params": { + "value": "String|p5.Color: (Optional) default color of element" + } + }, + "createInput": { + "description": [ + "Creates an <input></input> element in the DOM for text input. Use .size() to set the display length of the box." + ], + "returns": "p5.Element: pointer to p5.Element holding created node", + "params": { + "value": "String: default value of the input box", + "type": "String: (Optional) type of text, ie text, password etc. Defaults to text. Needs a value to be specified first." + } + }, + "createFileInput": { + "description": [ + "Creates an <input></input> element in the DOM of type 'file'. This allows users to select local files for use in a sketch." + ], + "returns": "p5.Element: pointer to p5.Element holding created DOM element", + "params": { + "callback": "Function: callback function for when a file is loaded", + "multiple": "Boolean: (Optional) optional, to allow multiple files to be selected" + } + }, + "createVideo": { + "description": [ + "Creates an HTML5 <video> element in the DOM for simple playback of audio/video. Shown by default, can be hidden with .hide() and drawn into canvas using image(). The first parameter can be either a single string path to a video file, or an array of string paths to different formats of the same video. This is useful for ensuring that your video can play across different browsers, as each supports different formats. See this page for further information about supported formats." + ], + "returns": "p5.MediaElement: pointer to video p5.Element", + "params": { + "src": "String|String[]: path to a video file, or array of paths for supporting different browsers", + "callback": "Function: (Optional) callback function to be called upon 'canplaythrough' event fire, that is, when the browser can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content" + } + }, + "createAudio": { + "description": [ + "Creates a hidden HTML5 <audio> element in the DOM for simple audio playback. The first parameter can be either a single string path to a audio file, or an array of string paths to different formats of the same audio. This is useful for ensuring that your audio can play across different browsers, as each supports different formats. See this page for further information about supported formats." + ], + "returns": "p5.MediaElement: pointer to audio p5.Element", + "params": { + "src": "String|String[]: (Optional) path to an audio file, or array of paths for supporting different browsers", + "callback": "Function: (Optional) callback function to be called upon 'canplaythrough' event fire, that is, when the browser can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content" + } + }, + "VIDEO": {}, + "AUDIO": {}, + "createCapture": { + "description": [ + "Creates a new HTML5 <video> element that contains the audio/video feed from a webcam. The element is separate from the canvas and is displayed by default. The element can be hidden using .hide(). The feed can be drawn onto the canvas using image(). The loadedmetadata property can be used to detect when the element has fully loaded (see second example).", + "More specific properties of the feed can be passing in a Constraints object. See the W3C spec for possible properties. Note that not all of these are supported by all browsers.", + "Security note: A new browser security specification requires that getUserMedia, which is behind createCapture(), only works when you're running the code locally, or on HTTPS. Learn more here and here." + ], + "returns": "p5.Element: capture video p5.Element", + "params": { + "type": "String|Constant|Object: type of capture, either VIDEO or AUDIO if none specified, default both, or a Constraints object", + "callback": "Function: (Optional) function to be called once stream has loaded" + } + }, + "createElement": { + "description": [ + "Creates element with given tag in the DOM with given content." + ], + "returns": "p5.Element: pointer to p5.Element holding created node", + "params": { + "tag": "String: tag for the new element", + "content": "String: (Optional) html content to be inserted into the element" + } + }, + "deviceOrientation": { + "description": [ + "The system variable deviceOrientation always contains the orientation of the device. The value of this variable will either be set 'landscape' or 'portrait'. If no data is available it will be set to 'undefined'. either LANDSCAPE or PORTRAIT." + ] + }, + "accelerationX": { + "description": [ + "The system variable accelerationX always contains the acceleration of the device along the x axis. Value is represented as meters per second squared." + ] + }, + "accelerationY": { + "description": [ + "The system variable accelerationY always contains the acceleration of the device along the y axis. Value is represented as meters per second squared." + ] + }, + "accelerationZ": { + "description": [ + "The system variable accelerationZ always contains the acceleration of the device along the z axis. Value is represented as meters per second squared." + ] + }, + "pAccelerationX": { + "description": [ + "The system variable pAccelerationX always contains the acceleration of the device along the x axis in the frame previous to the current frame. Value is represented as meters per second squared." + ] + }, + "pAccelerationY": { + "description": [ + "The system variable pAccelerationY always contains the acceleration of the device along the y axis in the frame previous to the current frame. Value is represented as meters per second squared." + ] + }, + "pAccelerationZ": { + "description": [ + "The system variable pAccelerationZ always contains the acceleration of the device along the z axis in the frame previous to the current frame. Value is represented as meters per second squared." + ] + }, + "rotationX": { + "description": [ + "The system variable rotationX always contains the rotation of the device along the x axis. If the sketch angleMode() is set to DEGREES, the value will be -180 to 180. If it is set to RADIANS, the value will be -PI to PI.", + "Note: The order the rotations are called is important, ie. if used together, it must be called in the order Z-X-Y or there might be unexpected behaviour." + ] + }, + "rotationY": { + "description": [ + "The system variable rotationY always contains the rotation of the device along the y axis. If the sketch angleMode() is set to DEGREES, the value will be -90 to 90. If it is set to RADIANS, the value will be -PI/2 to PI/2.", + "Note: The order the rotations are called is important, ie. if used together, it must be called in the order Z-X-Y or there might be unexpected behaviour." + ] + }, + "rotationZ": { + "description": [ + "The system variable rotationZ always contains the rotation of the device along the z axis. If the sketch angleMode() is set to DEGREES, the value will be 0 to 360. If it is set to RADIANS, the value will be 0 to 2*PI.", + "Unlike rotationX and rotationY, this variable is available for devices with a built-in compass only.", + "Note: The order the rotations are called is important, ie. if used together, it must be called in the order Z-X-Y or there might be unexpected behaviour." + ] + }, + "pRotationX": { + "description": [ + "The system variable pRotationX always contains the rotation of the device along the x axis in the frame previous to the current frame. If the sketch angleMode() is set to DEGREES, the value will be -180 to 180. If it is set to RADIANS, the value will be -PI to PI.", + "pRotationX can also be used with rotationX to determine the rotate direction of the device along the X-axis." + ] + }, + "pRotationY": { + "description": [ + "The system variable pRotationY always contains the rotation of the device along the y axis in the frame previous to the current frame. If the sketch angleMode() is set to DEGREES, the value will be -90 to 90. If it is set to RADIANS, the value will be -PI/2 to PI/2.", + "pRotationY can also be used with rotationY to determine the rotate direction of the device along the Y-axis." + ] + }, + "pRotationZ": { + "description": [ + "The system variable pRotationZ always contains the rotation of the device along the z axis in the frame previous to the current frame. If the sketch angleMode() is set to DEGREES, the value will be 0 to 360. If it is set to RADIANS, the value will be 0 to 2*PI.", + "pRotationZ can also be used with rotationZ to determine the rotate direction of the device along the Z-axis." + ] + }, + "turnAxis": { + "description": [ + "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()." + ] + }, + "setMoveThreshold": { + "description": [ + "The setMoveThreshold() function is used to set the movement threshold for the deviceMoved() function. The default threshold is set to 0.5." + ], + "params": { + "value": "Number: The threshold value" + } + }, + "setShakeThreshold": { + "description": [ + "The setShakeThreshold() function is used to set the movement threshold for the deviceShaken() function. The default threshold is set to 30." + ], + "params": { + "value": "Number: The threshold value" + } + }, + "deviceMoved": { + "description": [ + "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. The threshold value can be changed using setMoveThreshold()." + ] + }, + "deviceTurned": { + "description": [ + "The deviceTurned() function is called when the device rotates by more than 90 degrees continuously.", + "The axis that triggers the deviceTurned() method is stored in the turnAxis variable. The deviceTurned() method can be locked to trigger on any axis: X, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'." + ] + }, + "deviceShaken": { + "description": [ + "The deviceShaken() function is called when the device total acceleration changes of accelerationX and accelerationY values is more than the threshold value. The default threshold is set to 30. The threshold value can be changed using setShakeThreshold()." + ] + }, + "keyIsPressed": { + "description": [ + "The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed." + ] + }, + "key": { + "description": [ + "The system variable key always contains the value of the most recent key on the keyboard that was typed. To get the proper capitalization, it is best to use it within keyTyped(). For non-ASCII keys, use the keyCode variable." + ] + }, + "keyCode": { + "description": [ + "The variable keyCode is used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. You can also check for custom keys by looking up the keyCode of any key on a site like this: keycode.info." + ] + }, + "keyPressed": { + "description": [ + "The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable.", + "For non-ASCII keys, use the keyCode variable. You can check if the keyCode equals BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.", + "For ASCII keys, 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 repeats, holding down a key may cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add \"return false\" to the end of the method." + ], + "params": { + "event": "Object: (Optional) optional KeyboardEvent callback argument." + } + }, + "keyReleased": { + "description": [ + "The keyReleased() function is called once every time a key is released. See key and keyCode for more information. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add \"return false\" to the end of the method." + ], + "params": { + "event": "Object: (Optional) optional KeyboardEvent callback argument." + } + }, + "keyTyped": { + "description": [ + "The keyTyped() function is called once every time a key is pressed, but action keys such as Backspace, Delete, Ctrl, Shift, and Alt are ignored. If you are trying to detect a keyCode for one of these keys, use the keyPressed() function instead. The most recent key typed will be stored in the key variable.", + "Because of how operating systems handle key repeats, holding down a key will cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add \"return false\" to the end of the method." + ], + "params": { + "event": "Object: (Optional) optional KeyboardEvent callback argument." + } + }, + "keyIsDown": { + "description": [ + "The keyIsDown() function checks if the key is currently down, i.e. pressed. It can be used if you have an object that moves, and you want several keys to be able to affect its behaviour simultaneously, such as moving a sprite diagonally. You can put in any number representing the keyCode of the key, or use any of the variable keyCode names listed here." + ], + "returns": "Boolean: whether key is down or not", + "params": { + "code": "Number: The key to check for." + } + }, + "movedX": { + "description": [ + "The variable movedX contains the horizontal movement of the mouse since the last frame" + ] + }, + "movedY": { + "description": [ + "The variable movedY contains the vertical movement of the mouse since the last frame" + ] + }, + "mouseX": { + "description": [ + "The system variable mouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL. If touch is used instead of mouse input, mouseX will hold the x value of the most recent touch point." + ] + }, + "mouseY": { + "description": [ + "The system variable mouseY always contains the current vertical position of the mouse, relative to (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL. If touch is used instead of mouse input, mouseY will hold the y value of the most recent touch point." + ] + }, + "pmouseX": { + "description": [ + "The system variable pmouseX always contains the horizontal position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL. Note: pmouseX will be reset to the current mouseX value at the start of each touch event." + ] + }, + "pmouseY": { + "description": [ + "The system variable pmouseY always contains the vertical position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas. The value at the top-left corner is (0, 0) for 2-D and (-width/2, -height/2) for WebGL. Note: pmouseY will be reset to the current mouseY value at the start of each touch event." + ] + }, + "winMouseX": { + "description": [ + "The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window." + ] + }, + "winMouseY": { + "description": [ + "The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window." + ] + }, + "pwinMouseX": { + "description": [ + "The system variable pwinMouseX always contains the horizontal position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseX will be reset to the current winMouseX value at the start of each touch event." + ] + }, + "pwinMouseY": { + "description": [ + "The system variable pwinMouseY always contains the vertical position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window. Note: pwinMouseY will be reset to the current winMouseY value at the start of each touch event." + ] + }, + "mouseButton": { + "description": [ + "p5 automatically tracks if the mouse button is pressed and which button is pressed. The value of the system variable mouseButton is either LEFT, RIGHT, or CENTER depending on which button was pressed last. Warning: different browsers may track mouseButton differently." + ] + }, + "mouseIsPressed": { + "description": [ + "The boolean system variable mouseIsPressed is true if the mouse is pressed and false if not." + ] + }, + "mouseMoved": { + "description": [ + "The mouseMoved() function is called every time the mouse moves and a mouse button is not pressed. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method." + ], + "params": { + "event": "Object: (Optional) optional MouseEvent callback argument." + } + }, + "mouseDragged": { + "description": [ + "The mouseDragged() function is called once every time the mouse moves and a mouse button is pressed. If no mouseDragged() function is defined, the touchMoved() function will be called instead if it is defined. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method." + ], + "params": { + "event": "Object: (Optional) optional MouseEvent callback argument." + } + }, + "mousePressed": { + "description": [ + "The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been pressed. If no mousePressed() function is defined, the touchStarted() function will be called instead if it is defined. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method." + ], + "params": { + "event": "Object: (Optional) optional MouseEvent callback argument." + } + }, + "mouseReleased": { + "description": [ + "The mouseReleased() function is called every time a mouse button is released. If no mouseReleased() function is defined, the touchEnded() function will be called instead if it is defined. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method." + ], + "params": { + "event": "Object: (Optional) optional MouseEvent callback argument." + } + }, + "mouseClicked": { + "description": [ + "The mouseClicked() function is called once after a mouse button has been pressed and then released. Browsers handle clicks differently, so this function is only guaranteed to be run when the left mouse button is clicked. To handle other mouse buttons being pressed or released, see mousePressed() or mouseReleased(). Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method." + ], + "params": { + "event": "Object: (Optional) optional MouseEvent callback argument." + } + }, + "doubleClicked": { + "description": [ + "The doubleClicked() function is executed every time a event listener has detected a dblclick event which is a part of the DOM L3 specification. The doubleClicked event is fired when a pointing device button (usually a mouse's primary button) is clicked twice on a single element. For more info on the dblclick event refer to mozilla's documentation here: https://developer.mozilla.org/en-US/docs/Web/Events/dblclick" + ], + "params": { + "event": "Object: (Optional) optional MouseEvent callback argument." + } + }, + "mouseWheel": { + "description": [ + "The function mouseWheel() is executed every time a vertical mouse wheel event is detected either triggered by an actual mouse wheel or by a touchpad. The event.delta property returns the amount the mouse wheel have scrolled. The values can be positive or negative depending on the scroll direction (on OS X with \"natural\" scrolling enabled, the signs are inverted). Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method. Due to the current support of the \"wheel\" event on Safari, the function may only work as expected if \"return false\" is included while using Safari." + ], + "params": { + "event": "Object: (Optional) optional WheelEvent callback argument." + } + }, + "requestPointerLock": { + "description": [ + "The function requestPointerLock() locks the pointer to its current position and makes it invisible. Use movedX and movedY to get the difference the mouse was moved since the last call of draw. Note that not all browsers support this feature. This enables you to create experiences that aren't limited by the mouse moving out of the screen even if it is repeatedly moved into one direction. For example, a first person perspective experience." + ] + }, + "exitPointerLock": { + "description": [ + "The function exitPointerLock() exits a previously triggered pointer Lock for example to make ui elements usable etc" + ] + }, + "touches": { + "description": [ + "The system variable touches[] contains an array of the positions of all current touch points, relative to (0, 0) of the canvas, and IDs identifying a unique touch as it moves. Each element in the array is an object with x, y, and id properties.", + "The touches[] array is not supported on Safari and IE on touch-based desktops (laptops)." + ] + }, + "touchStarted": { + "description": [ + "The touchStarted() function is called once after every time a touch is registered. If no touchStarted() function is defined, the mousePressed() function will be called instead if it is defined. Browsers may have different default behaviors attached to various touch events. To prevent any default behavior for this event, add \"return false\" to the end of the method." + ], + "params": { + "event": "Object: (Optional) optional TouchEvent callback argument." + } + }, + "touchMoved": { + "description": [ + "The touchMoved() function is called every time a touch move is registered. If no touchMoved() function is defined, the mouseDragged() function will be called instead if it is defined. Browsers may have different default behaviors attached to various touch events. To prevent any default behavior for this event, add \"return false\" to the end of the method." + ], + "params": { + "event": "Object: (Optional) optional TouchEvent callback argument." + } + }, + "touchEnded": { + "description": [ + "The touchEnded() function is called every time a touch ends. If no touchEnded() function is defined, the mouseReleased() function will be called instead if it is defined. Browsers may have different default behaviors attached to various touch events. To prevent any default behavior for this event, add \"return false\" to the end of the method." + ], + "params": { + "event": "Object: (Optional) optional TouchEvent callback argument." + } + }, + "createImage": { + "description": [ + "Creates a new p5.Image (the datatype for storing images). This provides a fresh buffer of pixels to play with. Set the size of the buffer with the width and height parameters.", + ".pixels gives access to an array containing the values for all the pixels in the display window. These values are numbers. This array is the size (including an appropriate factor for the pixelDensity) of the display window x4, representing the R, G, B, A values in order for each pixel, moving from left to right across each row, then down each column. See .pixels for more info. It may also be simpler to use set() or get().", + "Before accessing the pixels of an image, the data must loaded with the loadPixels() function. After the array data has been modified, the updatePixels() function must be run to update the changes." + ], + "returns": "p5.Image: the p5.Image object", + "params": { + "width": "Integer: width in pixels", + "height": "Integer: height in pixels" + } + }, + "saveCanvas": { + "description": [ + "Save the current canvas as an image. The browser will either save the file immediately, or prompt the user with a dialogue window." + ], + "params": { + "selectedCanvas": "p5.Element|HTMLCanvasElement: a variable representing a specific html5 canvas (optional)", + "filename": "String (Optional)", + "extension": "String: (Optional) 'jpg' or 'png'" + } + }, + "saveFrames": { + "description": [ + "Capture a sequence of frames that can be used to create a movie. Accepts a callback. For example, you may wish to send the frames to a server where they can be stored or converted into a movie. If no callback is provided, the browser will pop up save dialogues in an attempt to download all of the images that have just been created. With the callback provided the image data isn't saved by default but instead passed as an argument to the callback function as an array of objects, with the size of array equal to the total number of frames.", + "Note that saveFrames() will only save the first 15 frames of an animation. To export longer animations, you might look into a library like ccapture.js." + ], + "params": { + "filename": "String", + "extension": "String: 'jpg' or 'png'", + "duration": "Number: Duration in seconds to save the frames for.", + "framerate": "Number: Framerate to save the frames in.", + "callback": "Function(Array): (Optional) A callback function that will be executed to handle the image data. This function should accept an array as argument. The array will contain the specified number of frames of objects. Each object has three properties: imageData - an image/octet-stream, filename and extension." + } + }, + "loadImage": { + "description": [ + "Loads an image from a path and creates a p5.Image from it.", + "The image may not be immediately available for rendering. If you want to ensure that the image is ready before doing anything with it, place the loadImage() call in preload(). You may also supply a callback function to handle the image when it's ready.", + "The path to the image should be relative to the HTML file that links in your sketch. Loading an image from a URL or other remote location may be blocked due to your browser's built-in security.", + "You can also pass in a string of a base64 encoded image as an alternative to the file path. Remember to add \"data:image/png;base64,\" in front of the string." + ], + "returns": "p5.Image: the p5.Image object", + "params": { + "path": "String: Path of the image to be loaded", + "successCallback": "function(p5.Image): (Optional) Function to be called once the image is loaded. Will be passed the p5.Image.", + "failureCallback": "Function(Event): (Optional) called with event error if the image fails to load." + } + }, + "image": { + "description": [ + "Draw an image to the p5.js canvas.", + "This function can be used with different numbers of parameters. The simplest use requires only three parameters: img, x, and y—where (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image.", + "This function can also be used with all eight Number parameters. To differentiate between all these parameters, p5.js uses the language of \"destination rectangle\" (which corresponds to \"dx\", \"dy\", etc.) and \"source image\" (which corresponds to \"sx\", \"sy\", etc.) below. Specifying the \"source image\" dimensions can be useful when you want to display a subsection of the source image instead of the whole thing. Here's a diagram to explain further: " + ], + "params": { + "img": "p5.Image|p5.Element: the image to display", + "x": "Number: the x-coordinate of the top-left corner of the image", + "y": "Number: the y-coordinate of the top-left corner of the image", + "width": "Number: (Optional) the width to draw the image", + "height": "Number: (Optional) the height to draw the image", + "dx": "Number: the x-coordinate of the destination rectangle in which to draw the source image", + "dy": "Number: the y-coordinate of the destination rectangle in which to draw the source image", + "dWidth": "Number: the width of the destination rectangle", + "dHeight": "Number: the height of the destination rectangle", + "sx": "Number: the x-coordinate of the subsection of the source image to draw into the destination rectangle", + "sy": "Number: the y-coordinate of the subsection of the source image to draw into the destination rectangle", + "sWidth": "Number: (Optional) the width of the subsection of the source image to draw into the destination rectangle", + "sHeight": "Number: (Optional) the height of the subsection of the source image to draw into the destination rectangle" + } + }, + "tint": { + "description": [ + "Sets the fill value for displaying images. Images can be tinted to specified colors or made transparent by including an alpha value.", + "To apply transparency to an image without affecting its color, use white as the tint color and specify an alpha value. For instance, tint(255, 128) will make an image 50% transparent (assuming the default alpha range of 0-255, which can be changed with colorMode()).", + "The value for the gray parameter must be less than or equal to the current maximum value as specified by colorMode(). The default maximum value is 255." + ], + "params": { + "v1": "Number: red or hue value relative to the current color range", + "v2": "Number: green or saturation value relative to the current color range", + "v3": "Number: blue or brightness value relative to the current color range", + "alpha": "Number (Optional)", + "value": "String: a color string", + "gray": "Number: a gray value", + "values": "Number[]: an array containing the red,green,blue & and alpha components of the color", + "color": "p5.Color: the tint color" + } + }, + "noTint": { + "description": [ + "Removes the current fill value for displaying images and reverts to displaying images with their original hues." + ] + }, + "imageMode": { + "description": [ + "Set image mode. Modifies the location from which images are drawn by changing the way in which parameters given to image() are interpreted. The default mode is imageMode(CORNER), which interprets the second and third parameters of image() as the upper-left corner of the image. If two additional parameters are specified, they are used to set the image's width and height.", + "imageMode(CORNERS) interprets the second and third parameters of image() as the location of one corner, and the fourth and fifth parameters as the opposite corner.", + "imageMode(CENTER) interprets the second and third parameters of image() as the image's center point. If two additional parameters are specified, they are used to set the image's width and height." + ], + "params": { + "mode": "Constant: either CORNER, CORNERS, or CENTER" + } + }, + "pixels": { + "description": [ + "Uint8ClampedArray containing the values for all the pixels in the display window. These values are numbers. This array is the size (include an appropriate factor for pixelDensity) of the display window x4, representing the R, G, B, A values in order for each pixel, moving from left to right across each row, then down each column. Retina and other high density displays will have more pixels[] (by a factor of pixelDensity^2). For example, if the image is 100x100 pixels, there will be 40,000. On a retina display, there will be 160,000.", + "The first four values (indices 0-3) in the array will be the R, G, B, A values of the pixel at (0, 0). The second four values (indices 4-7) will contain the R, G, B, A values of the pixel at (1, 0). More generally, to set values for a pixel at (x, y): 
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 set() will automatically take care of setting all the appropriate values in pixels[] for a given (x, y) at any pixelDensity, but the performance may not be as fast when lots of modifications are made to the pixel array.", + "Before accessing this array, the data must loaded with the loadPixels() function. After the array data has been modified, the updatePixels() function must be run to update the changes.", + "Note that this is not a standard javascript array. This means that standard javascript functions such as slice() or arrayCopy() do not work." + ] + }, + "blend": { + "description": [ + "Copies a region of pixels from one image to another, using a specified blend mode to do the operation." + ], + "params": { + "srcImage": "p5.Image: source image", + "sx": "Integer: X coordinate of the source's upper left corner", + "sy": "Integer: Y coordinate of the source's upper left corner", + "sw": "Integer: source image width", + "sh": "Integer: source image height", + "dx": "Integer: X coordinate of the destination's upper left corner", + "dy": "Integer: Y coordinate of the destination's upper left corner", + "dw": "Integer: destination image width", + "dh": "Integer: destination image height", + "blendMode": "Constant: the blend mode. either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD or NORMAL." + } + }, + "copy": { + "description": [ + "Copies a region of the canvas to another region of the canvas and copies a region of pixels from an image used as the srcImg parameter into the canvas srcImage is specified this is used as the source. If the source and destination regions aren't the same size, it will automatically resize source pixels to fit the specified target region." + ], + "params": { + "srcImage": "p5.Image|p5.Element: source image", + "sx": "Integer: X coordinate of the source's upper left corner", + "sy": "Integer: Y coordinate of the source's upper left corner", + "sw": "Integer: source image width", + "sh": "Integer: source image height", + "dx": "Integer: X coordinate of the destination's upper left corner", + "dy": "Integer: Y coordinate of the destination's upper left corner", + "dw": "Integer: destination image width", + "dh": "Integer: destination image height" + } + }, + "filter": { + "description": [ + "Applies a filter to the canvas. The presets options are:", + "THRESHOLD Converts the image to black and white pixels depending if they are above or below the threshold defined by the level parameter. The parameter must be between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.", + "GRAY Converts any colors in the image to grayscale equivalents. No parameter is used.", + "OPAQUE Sets the alpha channel to entirely opaque. No parameter is used.", + "INVERT Sets each pixel to its inverse value. No parameter is used.", + "POSTERIZE Limits each channel of the image to the number of colors specified as the parameter. The parameter can be set to values between 2 and 255, but results are most noticeable in the lower ranges.", + "BLUR Executes a Gaussian blur with the level parameter specifying the extent of the blurring. If no parameter is used, the blur is equivalent to Gaussian blur of radius 1. Larger values increase the blur.", + "ERODE Reduces the light areas. No parameter is used.", + "DILATE Increases the light areas. No parameter is used.", + "filter() does not work in WEBGL mode. A similar effect can be achieved in WEBGL mode using custom shaders. Adam Ferriss has written a selection of shader examples that contains many of the effects present in the filter examples." + ], + "params": { + "filterType": "Constant: either THRESHOLD, GRAY, OPAQUE, INVERT, POSTERIZE, BLUR, ERODE, DILATE or BLUR. See Filters.js for docs on each available filter", + "filterParam": "Number: (Optional) an optional parameter unique to each filter, see above" + } + }, + "get": { + "description": [ + "Get a region of pixels, or a single pixel, from the canvas.", + "Returns an array of [R,G,B,A] values for any pixel or grabs a section of an image. If no parameters are specified, the entire image is returned. Use the x and y parameters to get the value of one pixel. Get a section of the display window by specifying additional w and h parameters. When getting an image, the x and y parameters define the coordinates for the upper-left corner of the image, regardless of the current imageMode().", + "Getting the color of a single pixel with get(x, y) is easy, but not as fast as grabbing the data directly from pixels[]. The equivalent statement to get(x, y) using pixels[] with pixel density d is 
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.", + "If you want to extract an array of colors or a subimage from an p5.Image object, take a look at p5.Image.get()" + ], + "returns": "p5.Image: the rectangle p5.Image", + "params": { + "x": "Number: x-coordinate of the pixel", + "y": "Number: y-coordinate of the pixel", + "w": "Number: width", + "h": "Number: height" + } + }, + "loadPixels": { + "description": [ + "Loads the pixel data for the display window into the pixels[] array. This function must always be called before reading from or writing to pixels[]. Note that only changes made with set() or direct manipulation of pixels[] will occur." + ] + }, + "set": { + "description": [ + "Changes the color of any pixel, or writes an image directly to the display window. The x and y parameters specify the pixel to change and the c parameter specifies the color value. This can be a p5.Color object, or [R, G, B, A] pixel array. It can also be a single grayscale value. When setting an image, the x and y parameters define the coordinates for the upper-left corner of the image, regardless of the current imageMode().", + "After using set(), you must call updatePixels() for your changes to appear. This should be called once all pixels have been set, and must be called before calling .get() or drawing the image.", + "Setting the color of a single pixel with set(x, y) is easy, but not as fast as putting the data directly into pixels[]. Setting the pixels[] values directly may be complicated when working with a retina display, but will perform better when lots of pixels need to be set directly on every loop. See the reference for pixels[] for more information." + ], + "params": { + "x": "Number: x-coordinate of the pixel", + "y": "Number: y-coordinate of the pixel", + "c": "Number|Number[]|Object: insert a grayscale value | a pixel array | a p5.Color object | a p5.Image to copy" + } + }, + "updatePixels": { + "description": [ + "Updates the display window with the data in the pixels[] array. Use in conjunction with loadPixels(). If you're only reading pixels from the array, there's no need to call updatePixels() — updating is only necessary to apply changes. updatePixels() should be called anytime the pixels array is manipulated or set() is called, and only changes made with set() or direct changes to pixels[] will occur." + ], + "params": { + "x": "Number: (Optional) x-coordinate of the upper-left corner of region to update", + "y": "Number: (Optional) y-coordinate of the upper-left corner of region to update", + "w": "Number: (Optional) width of region to update", + "h": "Number: (Optional) height of region to update" + } + }, + "loadJSON": { + "description": [ + "Loads a JSON file from a file or a URL, and returns an Object. Note that even if the JSON file contains an Array, an Object will be returned with index numbers as keys.", + "This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. JSONP is supported via a polyfill and you can pass in as the second argument an object with definitions of the json callback following the syntax specified here.", + "This method is suitable for fetching files up to size of 64MB." + ], + "returns": "Object|Array: JSON data", + "params": { + "path": "String: name of the file or url to load", + "jsonpOptions": "Object: (Optional) options object for jsonp related settings", + "datatype": "String: (Optional) \"json\" or \"jsonp\"", + "callback": "Function: (Optional) function to be executed after loadJSON() completes, data is passed in as first argument", + "errorCallback": "Function: (Optional) function to be executed if there is an error, response is passed in as first argument" + } + }, + "loadStrings": { + "description": [ + "Reads the contents of a file and creates a String array of its individual lines. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder.", + "Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.", + "This method is asynchronous, meaning it may not finish before the next line in your sketch is executed.", + "This method is suitable for fetching files up to size of 64MB." + ], + "returns": "String[]: Array of Strings", + "params": { + "filename": "String: name of the file or url to load", + "callback": "Function: (Optional) function to be executed after loadStrings() completes, Array is passed in as first argument", + "errorCallback": "Function: (Optional) function to be executed if there is an error, response is passed in as first argument" + } + }, + "loadTable": { + "description": [ + "Reads the contents of a file or URL and creates a p5.Table object with its values. If a file is specified, it must be located in the sketch's \"data\" folder. The filename parameter can also be a URL to a file found online. By default, the file is assumed to be comma-separated (in CSV format). Table only looks for a header row if the 'header' option is included.", + "This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. Calling loadTable() inside preload() guarantees to complete the operation before setup() and draw() are called. Outside of preload(), you may supply a callback function to handle the object:", + "All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB." + ], + "returns": "Object: Table object containing data", + "params": { + "filename": "String: name of the file or URL to load", + "extension": "String: (Optional) parse the table by comma-separated values \"csv\", semicolon-separated values \"ssv\", or tab-separated values \"tsv\"", + "header": "String: (Optional) \"header\" to indicate table has header row", + "callback": "Function: (Optional) function to be executed after loadTable() completes. On success, the Table object is passed in as the first argument.", + "errorCallback": "Function: (Optional) function to be executed if there is an error, response is passed in as first argument" + } + }, + "loadXML": { + "description": [ + "Reads the contents of a file and creates an XML object with its values. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder.", + "Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.", + "This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. Calling loadXML() inside preload() guarantees to complete the operation before setup() and draw() are called.", + "Outside of preload(), you may supply a callback function to handle the object.", + "This method is suitable for fetching files up to size of 64MB." + ], + "returns": "Object: XML object containing data", + "params": { + "filename": "String: name of the file or URL to load", + "callback": "Function: (Optional) function to be executed after loadXML() completes, XML object is passed in as first argument", + "errorCallback": "Function: (Optional) function to be executed if there is an error, response is passed in as first argument" + } + }, + "loadBytes": { + "description": [ + "This method is suitable for fetching files up to size of 64MB." + ], + "returns": "Object: an object whose 'bytes' property will be the loaded buffer", + "params": { + "file": "String: name of the file or URL to load", + "callback": "Function: (Optional) function to be executed after loadBytes() completes", + "errorCallback": "Function: (Optional) function to be executed if there is an error" + } + }, + "httpGet": { + "description": [ + "Method for executing an HTTP GET request. If data type is not specified, p5 will try to guess based on the URL, defaulting to text. This is equivalent to calling httpDo(path, 'GET'). The 'binary' datatype will return a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer which can be used to initialize typed arrays (such as Uint8Array)." + ], + "returns": "Promise: A promise that resolves with the data when the operation completes successfully or rejects with the error after one occurs.", + "params": { + "path": "String: name of the file or url to load", + "datatype": "String: (Optional) \"json\", \"jsonp\", \"binary\", \"arrayBuffer\", \"xml\", or \"text\"", + "data": "Object|Boolean: (Optional) param data passed sent with request", + "callback": "Function: (Optional) function to be executed after httpGet() completes, data is passed in as first argument", + "errorCallback": "Function: (Optional) function to be executed if there is an error, response is passed in as first argument" + } + }, + "httpPost": { + "description": [ + "Method for executing an HTTP POST request. If data type is not specified, p5 will try to guess based on the URL, defaulting to text. This is equivalent to calling httpDo(path, 'POST')." + ], + "returns": "Promise: A promise that resolves with the data when the operation completes successfully or rejects with the error after one occurs.", + "params": { + "path": "String: name of the file or url to load", + "datatype": "String: (Optional) \"json\", \"jsonp\", \"xml\", or \"text\". If omitted, httpPost() will guess.", + "data": "Object|Boolean: (Optional) param data passed sent with request", + "callback": "Function: (Optional) function to be executed after httpPost() completes, data is passed in as first argument", + "errorCallback": "Function: (Optional) function to be executed if there is an error, response is passed in as first argument" + } + }, + "httpDo": { + "description": [ + "Method for executing an HTTP request. If data type is not specified, p5 will try to guess based on the URL, defaulting to text. For more advanced use, you may also pass in the path as the first argument and a object as the second argument, the signature follows the one specified in the Fetch API specification. This method is suitable for fetching files up to size of 64MB when \"GET\" is used." + ], + "returns": "Promise: A promise that resolves with the data when the operation completes successfully or rejects with the error after one occurs.", + "params": { + "path": "String: name of the file or url to load", + "method": "String: (Optional) either \"GET\", \"POST\", or \"PUT\", defaults to \"GET\"", + "datatype": "String: (Optional) \"json\", \"jsonp\", \"xml\", or \"text\"", + "data": "Object: (Optional) param data passed sent with request", + "callback": "Function: (Optional) function to be executed after httpGet() completes, data is passed in as first argument", + "errorCallback": "Function: (Optional) function to be executed if there is an error, response is passed in as first argument", + "options": "Object: Request object options as documented in the \"fetch\" API reference" + } + }, + "createWriter": { + "returns": "p5.PrintWriter:", + "params": { + "name": "String: name of the file to be created", + "extension": "String (Optional)" + } + }, + "save": { + "description": [ + "Saves a given element(image, text, json, csv, wav, or html) to the client's computer. The first parameter can be a pointer to element we want to save. The element can be one of p5.Element,an Array of Strings, an Array of JSON, a JSON object, a p5.Table , a p5.Image, or a p5.SoundFile (requires p5.sound). The second parameter is a filename (including extension).The third parameter is for options specific to this type of object. This method will save a file that fits the given parameters. If it is called without specifying an element, by default it will save the whole canvas as an image file. You can optionally specify a filename as the first parameter in such a case. Note that it is not recommended to call this method within draw, as it will open a new save dialog on every render." + ], + "params": { + "objectOrFilename": "Object|String: (Optional) If filename is provided, will save canvas as an image with either png or jpg extension depending on the filename. If object is provided, will save depending on the object and filename (see examples above).", + "filename": "String: (Optional) If an object is provided as the first parameter, then the second parameter indicates the filename, and should include an appropriate file extension (see examples above).", + "options": "Boolean|String: (Optional) Additional options depend on filetype. For example, when saving JSON, true indicates that the output will be optimized for filesize, rather than readability." + } + }, + "saveJSON": { + "description": [ + "Writes the contents of an Array or a JSON object to a .json file. The file saving process and location of the saved file will vary between web browsers." + ], + "params": { + "json": "Array|Object", + "filename": "String", + "optimize": "Boolean: (Optional) If true, removes line breaks and spaces from the output file to optimize filesize (but not readability)." + } + }, + "saveStrings": { + "description": [ + "Writes an array of Strings to a text file, one line per String. The file saving process and location of the saved file will vary between web browsers." + ], + "params": { + "list": "String[]: string array to be written", + "filename": "String: filename for output", + "extension": "String: (Optional) the filename's extension", + "isCRLF": "Boolean: (Optional) if true, change line-break to CRLF" + } + }, + "saveTable": { + "description": [ + "Writes the contents of a Table object to a file. Defaults to a text file with comma-separated-values ('csv') but can also use tab separation ('tsv'), or generate an HTML table ('html'). The file saving process and location of the saved file will vary between web browsers." + ], + "params": { + "Table": "p5.Table: the Table object to save to a file", + "filename": "String: the filename to which the Table should be saved", + "options": "String: (Optional) can be one of \"tsv\", \"csv\", or \"html\"" + } + }, + "abs": { + "description": [ + "Calculates the absolute value (magnitude) of a number. Maps to Math.abs(). The absolute value of a number is always positive." + ], + "returns": "Number: absolute value of given number", + "params": { + "n": "Number: number to compute" + } + }, + "ceil": { + "description": [ + "Calculates the closest int value that is greater than or equal to the value of the parameter. Maps to Math.ceil(). For example, ceil(9.03) returns the value 10." + ], + "returns": "Integer: rounded up number", + "params": { + "n": "Number: number to round up" + } + }, + "constrain": { + "description": [ + "Constrains a value between a minimum and maximum value." + ], + "returns": "Number: constrained number", + "params": { + "n": "Number: number to constrain", + "low": "Number: minimum limit", + "high": "Number: maximum limit" + } + }, + "dist": { + "description": [ + "Calculates the distance between two points, in either two or three dimensions. If you looking for distance between two vectors see dist()" + ], + "returns": "Number: distance between the two points", + "params": { + "x1": "Number: x-coordinate of the first point", + "y1": "Number: y-coordinate of the first point", + "x2": "Number: x-coordinate of the second point", + "y2": "Number: y-coordinate of the second point", + "z1": "Number: z-coordinate of the first point", + "z2": "Number: z-coordinate of the second point" + } + }, + "exp": { + "description": [ + "Returns Euler's number e (2.71828...) raised to the power of the n parameter. Maps to Math.exp()." + ], + "returns": "Number: e^n", + "params": { + "n": "Number: exponent to raise" + } + }, + "floor": { + "description": [ + "Calculates the closest int value that is less than or equal to the value of the parameter. Maps to Math.floor()." + ], + "returns": "Integer: rounded down number", + "params": { + "n": "Number: number to round down" + } + }, + "lerp": { + "description": [ + "Calculates a number between two numbers at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, 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." + ], + "returns": "Number: lerped value", + "params": { + "start": "Number: first value", + "stop": "Number: second value", + "amt": "Number: number" + } + }, + "log": { + "description": [ + "Calculates the natural logarithm (the base-e logarithm) of a number. This function expects the n parameter to be a value greater than 0.0. Maps to Math.log()." + ], + "returns": "Number: natural logarithm of n", + "params": { + "n": "Number: number greater than 0" + } + }, + "mag": { + "description": [ + "Calculates the magnitude (or length) of a vector. A vector is a direction in space commonly used in computer graphics and linear algebra. Because it has no \"start\" position, the magnitude of a vector can be thought of as the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is a shortcut for writing dist(0, 0, x, y)." + ], + "returns": "Number: magnitude of vector from (0,0) to (a,b)", + "params": { + "a": "Number: first value", + "b": "Number: second value" + } + }, + "map": { + "description": [ + "Re-maps a number from one range to another.", + "In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width)." + ], + "returns": "Number: remapped number", + "params": { + "value": "Number: the incoming value to be converted", + "start1": "Number: lower bound of the value's current range", + "stop1": "Number: upper bound of the value's current range", + "start2": "Number: lower bound of the value's target range", + "stop2": "Number: upper bound of the value's target range", + "withinBounds": "Boolean: (Optional) constrain the value to the newly mapped range" + } + }, + "max": { + "description": [ + "Determines the largest value in a sequence of numbers, and then returns that value. max() accepts any number of Number parameters, or an Array of any length." + ], + "returns": "Number: maximum Number", + "params": { + "n0": "Number: Number to compare", + "n1": "Number: Number to compare", + "nums": "Number[]: Numbers to compare" + } + }, + "min": { + "description": [ + "Determines the smallest value in a sequence of numbers, and then returns that value. min() accepts any number of Number parameters, or an Array of any length." + ], + "returns": "Number: minimum Number", + "params": { + "n0": "Number: Number to compare", + "n1": "Number: Number to compare", + "nums": "Number[]: Numbers to compare" + } + }, + "norm": { + "description": [ + "Normalizes a number from another range into a value between 0 and 1. Identical to map(value, low, high, 0, 1). Numbers outside of the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. (See the example above.)" + ], + "returns": "Number: normalized number", + "params": { + "value": "Number: incoming value to be normalized", + "start": "Number: lower bound of the value's current range", + "stop": "Number: upper bound of the value's current range" + } + }, + "pow": { + "description": [ + "Facilitates exponential expressions. The pow() function is an efficient way of multiplying numbers by themselves (or their reciprocals) in large quantities. For example, pow(3, 5) is equivalent to the expression 3 × 3 × 3 × 3 × 3 and pow(3, -5) is equivalent to 1 / 3 × 3 × 3 × 3 × 3. Maps to Math.pow()." + ], + "returns": "Number: n^e", + "params": { + "n": "Number: base of the exponential expression", + "e": "Number: power by which to raise the base" + } + }, + "round": { + "description": [ + "Calculates the integer closest to the n parameter. For example, round(133.8) returns the value 134. Maps to Math.round()." + ], + "returns": "Integer: rounded number", + "params": { + "n": "Number: number to round", + "decimals": "Number: (Optional) number of decimal places to round to, default is 0" + } + }, + "sq": { + "description": [ + "Squares a number (multiplies a number by itself). The result is always a positive number, as multiplying two negative numbers always yields a positive result. For example, -1 * -1 = 1." + ], + "returns": "Number: squared number", + "params": { + "n": "Number: number to square" + } + }, + "sqrt": { + "description": [ + "Calculates the square root of a number. The square root of a number is always positive, even though there may be a valid negative root. The square root s of number a is such that s*s = a. It is the opposite of squaring. Maps to Math.sqrt()." + ], + "returns": "Number: square root of number", + "params": { + "n": "Number: non-negative number to square root" + } + }, + "fract": { + "description": [ + "Calculates the fractional part of a number." + ], + "returns": "Number: fractional part of x, i.e, {x}", + "params": { + "num": "Number: Number whose fractional part needs to be found out" + } + }, + "createVector": { + "description": [ + "Creates a new p5.Vector (the datatype for storing vectors). This provides a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction." + ], + "returns": "p5.Vector:", + "params": { + "x": "Number: (Optional) x component of the vector", + "y": "Number: (Optional) y component of the vector", + "z": "Number: (Optional) z component of the vector" + } + }, + "noise": { + "description": [ + "Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more naturally ordered, harmonic succession of numbers compared to the standard random() function. It was invented by Ken Perlin in the 1980s and been used since in graphical applications to produce procedural textures, natural motion, shapes, terrains etc.

The main difference to the random() function is that Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value (fixed only for the lifespan of the program; see the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise, depending on the number of coordinates given. The resulting value will always be between 0.0 and 1.0. The noise value can be animated by moving through the noise space as demonstrated in the example above. The 2nd and 3rd dimension can also be interpreted as time.

The actual noise is structured similar to an audio signal, in respect to the function's use of frequencies. Similar to the concept of harmonics in physics, perlin noise is computed over several octaves which are added together for the final result.

Another way to adjust the character of the resulting sequence is the scale of the input coordinates. As the function works within an infinite space the value of the coordinates doesn't matter as such, only the distance between successive coordinates does (eg. when using noise() within a loop). As a general rule the smaller the difference between coordinates, the smoother the resulting noise sequence will be. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use." + ], + "returns": "Number: Perlin noise value (between 0 and 1) at specified coordinates", + "params": { + "x": "Number: x-coordinate in noise space", + "y": "Number: (Optional) y-coordinate in noise space", + "z": "Number: (Optional) z-coordinate in noise space" + } + }, + "noiseDetail": { + "description": [ + "Adjusts the character and level of detail produced by the Perlin noise function. Similar to harmonics in physics, noise is computed over several octaves. Lower octaves contribute more to the output signal and as such define the overall intensity of the noise, whereas higher octaves create finer grained details in the noise sequence. By default, noise is computed over 4 octaves with each octave contributing exactly half than its predecessor, starting at 50% strength for the 1st octave. This falloff amount can be changed by adding an additional function parameter. Eg. a falloff factor of 0.75 means each octave will now have 75% impact (25% less) of the previous lower octave. Any value between 0.0 and 1.0 is valid, however note that values greater than 0.5 might result in greater than 1.0 values returned by noise(). By changing these parameters, the signal created by the noise() function can be adapted to fit very specific needs and characteristics." + ], + "params": { + "lod": "Number: number of octaves to be used by the noise", + "falloff": "Number: falloff factor for each octave" + } + }, + "noiseSeed": { + "description": [ + "Sets the seed value for noise(). By default, noise() produces different results each time the program is run. Set the value parameter to a constant to return the same pseudo-random numbers each time the software is run." + ], + "params": { + "seed": "Number: the seed value" + } + }, + "randomSeed": { + "description": [ + "Sets the seed value for random().", + "By default, random() produces different results each time the program is run. Set the seed parameter to a constant to return the same pseudo-random numbers each time the software is run." + ], + "params": { + "seed": "Number: the seed value" + } + }, + "random": { + "description": [ + "Return a random floating-point number.", + "Takes either 0, 1 or 2 arguments.", + "If no argument is given, returns a random number from 0 up to (but not including) 1.", + "If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number.", + "If one argument is given and it is an array, returns a random element from that array.", + "If two arguments are given, returns a random number from the first argument up to (but not including) the second argument." + ], + "returns": "Number: the random number", + "params": { + "min": "Number: (Optional) the lower bound (inclusive)", + "max": "Number: (Optional) the upper bound (exclusive)", + "choices": "Array: the array to choose from" + } + }, + "randomGaussian": { + "description": [ + "Returns a random number fitting a Gaussian, or normal, distribution. There is theoretically no minimum or maximum value that randomGaussian() might return. Rather, there is just a very low probability that values far from the mean will be returned; and a higher probability that numbers near the mean will be returned. Takes either 0, 1 or 2 arguments. If no args, returns a mean of 0 and standard deviation of 1. If one arg, that arg is the mean (standard deviation is 1). If two args, first is mean, second is standard deviation." + ], + "returns": "Number: the random number", + "params": { + "mean": "Number: (Optional) the mean", + "sd": "Number: (Optional) the standard deviation" + } + }, + "acos": { + "description": [ + "The inverse of cos(), returns the arc cosine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range 0 to PI (3.1415927) if the angleMode is RADIANS or 0 to 180 if the angle mode is DEGREES." + ], + "returns": "Number: the arc cosine of the given value", + "params": { + "value": "Number: the value whose arc cosine is to be returned" + } + }, + "asin": { + "description": [ + "The inverse of sin(), returns the arc sine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range -PI/2 to PI/2 if the angleMode is RADIANS or -90 to 90 if the angle mode is DEGREES." + ], + "returns": "Number: the arc sine of the given value", + "params": { + "value": "Number: the value whose arc sine is to be returned" + } + }, + "atan": { + "description": [ + "The inverse of tan(), returns the arc tangent of a value. This function expects the values in the range of -Infinity to Infinity (exclusive) and values are returned in the range -PI/2 to PI/2 if the angleMode is RADIANS or -90 to 90 if the angle mode is DEGREES." + ], + "returns": "Number: the arc tangent of the given value", + "params": { + "value": "Number: the value whose arc tangent is to be returned" + } + }, + "atan2": { + "description": [ + "Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis. Values are returned as a float in the range from PI to -PI if the angleMode is RADIANS or 180 to -180 if the angleMode is DEGREES. The atan2() function is most often used for orienting geometry to the position of the cursor.", + "Note: The y-coordinate of the point is the first parameter, and the x-coordinate is the second parameter, due the the structure of calculating the tangent." + ], + "returns": "Number: the arc tangent of the given point", + "params": { + "y": "Number: y-coordinate of the point", + "x": "Number: x-coordinate of the point" + } + }, + "cos": { + "description": [ + "Calculates the cosine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1." + ], + "returns": "Number: the cosine of the angle", + "params": { + "angle": "Number: the angle" + } + }, + "sin": { + "description": [ + "Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1." + ], + "returns": "Number: the sine of the angle", + "params": { + "angle": "Number: the angle" + } + }, + "tan": { + "description": [ + "Calculates the tangent of an angle. This function takes into account the current angleMode. Values are returned in the range of all real numbers." + ], + "returns": "Number: the tangent of the angle", + "params": { + "angle": "Number: the angle" + } + }, + "degrees": { + "description": [ + "Converts a radian measurement to its corresponding value in degrees. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode." + ], + "returns": "Number: the converted angle", + "params": { + "radians": "Number: the radians value to convert to degrees" + } + }, + "radians": { + "description": [ + "Converts a degree measurement to its corresponding value in radians. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode." + ], + "returns": "Number: the converted angle", + "params": { + "degrees": "Number: the degree value to convert to radians" + } + }, + "angleMode": { + "description": [ + "Sets the current mode of p5 to given mode. Default mode is RADIANS." + ], + "params": { + "mode": "Constant: either RADIANS or DEGREES" + } + }, + "textAlign": { + "description": [ + "Sets the current alignment for drawing text. Accepts two arguments: horizAlign (LEFT, CENTER, or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or BASELINE).", + "The horizAlign parameter is in reference to the x value of the text() function, while the vertAlign parameter is in reference to the y value.", + "So if you write textAlign(LEFT), you are aligning the left edge of your text to the x value you give in text(). If you write textAlign(RIGHT, TOP), you are aligning the right edge of your text to the x value and the top of edge of the text to the y value." + ], + "params": { + "horizAlign": "Constant: horizontal alignment, either LEFT, CENTER, or RIGHT", + "vertAlign": "Constant: (Optional) vertical alignment, either TOP, BOTTOM, CENTER, or BASELINE" + } + }, + "textLeading": { + "description": [ + "Sets/gets the spacing, in pixels, between lines of text. This setting will be used in all subsequent calls to the text() function." + ], + "params": { + "leading": "Number: the size in pixels for spacing between lines" + } + }, + "textSize": { + "description": [ + "Sets/gets the current font size. This size will be used in all subsequent calls to the text() function. Font size is measured in pixels." + ], + "params": { + "theSize": "Number: the size of the letters in units of pixels" + } + }, + "textStyle": { + "description": [ + "Sets/gets the style of the text for system fonts 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." + ], + "params": { + "theStyle": "Constant: styling for text, either NORMAL, ITALIC, BOLD or BOLDITALIC" + } + }, + "textWidth": { + "description": [ + "Calculates and returns the width of any character or text string." + ], + "returns": "Number: the calculated width", + "params": { + "theText": "String: the String of characters to measure" + } + }, + "textAscent": { + "description": [ + "Returns the ascent of the current font at its current size. The ascent represents the distance, in pixels, of the tallest character above the baseline." + ], + "returns": "Number:" + }, + "textDescent": { + "description": [ + "Returns the descent of the current font at its current size. The descent represents the distance, in pixels, of the character with the longest descender below the baseline." + ], + "returns": "Number:" + }, + "textWrap": { + "description": [ + "Specifies how lines of text are wrapped within a text box. This requires a max-width set on the text area, specified in text() as parameter x2.", + "WORD wrap style only breaks lines at spaces. A single string without spaces that exceeds the boundaries of the canvas or text area is not truncated, and will overflow the desired area, disappearing at the canvas edge.", + "CHAR wrap style breaks lines wherever needed to stay within the text box.", + "WORD is the default wrap style, and both styles will still break lines at any line breaks (\\n) specified in the original text. The text area max-height parameter (y2) also still applies to wrapped text in both styles, lines of text that do not fit within the text area will not be drawn to the screen." + ], + "returns": "String: wrapStyle", + "params": { + "wrapStyle": "Constant: text wrapping style, either WORD or CHAR" + } + }, + "loadFont": { + "description": [ + "Loads an opentype font file (.otf, .ttf) from a file or a URL, and returns a PFont Object. This method is asynchronous, meaning it may not finish before the next line in your sketch is executed.", + "The path to the font should be relative to the HTML file that links in your sketch. Loading fonts from a URL or other remote location may be blocked due to your browser's built-in security." + ], + "returns": "p5.Font: p5.Font object", + "params": { + "path": "String: name of the file or url to load", + "callback": "Function: (Optional) function to be executed after loadFont() completes", + "onError": "Function: (Optional) function to be executed if an error occurs" + } + }, + "text": { + "description": [ + "Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is set with the textFont() function and a default size will be used unless a font is set with textSize(). Change the color of the text with the fill() function. Change the outline of the text with the stroke() and strokeWeight() functions.", + "The text displays in relation to the textAlign() function, which gives the option to draw to the left, right, and center of the coordinates.", + "The x2 and y2 parameters define a rectangular area to display within and may only be used with string data. When these parameters are specified, they are interpreted based on the current rectMode() setting. Text that does not fit completely within the rectangle specified will not be drawn to the screen. If x2 and y2 are not specified, the baseline alignment is the default, which means that the text will be drawn upwards from x and y.", + "WEBGL: Only opentype/truetype fonts are supported. You must load a font using the loadFont() method (see the example above). stroke() currently has no effect in webgl mode." + ], + "params": { + "str": "String|Object|Array|Number|Boolean: the alphanumeric symbols to be displayed", + "x": "Number: x-coordinate of text", + "y": "Number: y-coordinate of text", + "x2": "Number: (Optional) by default, the width of the text box, see rectMode() for more info", + "y2": "Number: (Optional) by default, the height of the text box, see rectMode() for more info" + } + }, + "textFont": { + "description": [ + "Sets the current font that will be drawn with the text() function. If textFont() is called without any argument, it will return the current font if one has been set already. If not, it will return the name of the default font as a string. If textFont() is called with a font to use, it will return the p5 object.", + "WEBGL: Only fonts loaded via loadFont() are supported." + ], + "returns": "Object: the current font / p5 Object", + "params": { + "font": "Object|String: a font loaded via loadFont(), or a String representing a web safe font (a font that is generally available across all systems)", + "size": "Number: (Optional) the font size to use" + } + }, + "append": { + "description": [ + "Adds a value to the end of an array. Extends the length of the array by one. Maps to Array.push()." + ], + "returns": "Array: the array that was appended to", + "params": { + "array": "Array: Array to append", + "value": "Any: to be added to the Array" + } + }, + "arrayCopy": { + "description": [ + "Copies an array (or part of an array) to another array. The src array is copied to the dst array, beginning at the position specified by srcPosition and into the position specified by dstPosition. The number of elements to copy is determined by length. Note that copying values overwrites existing values in the destination array. To append values instead of overwriting them, use concat().", + "The simplified version with only two arguments, arrayCopy(src, dst), copies an entire array to another of the same size. It is equivalent to arrayCopy(src, 0, dst, 0, src.length).", + "Using this function is far more efficient for copying array data than iterating through a for() loop and copying each element individually." + ], + "params": { + "src": "Array: the source Array", + "srcPosition": "Integer: starting position in the source Array", + "dst": "Array: the destination Array", + "dstPosition": "Integer: starting position in the destination Array", + "length": "Integer: number of Array elements to be copied" + } + }, + "concat": { + "description": [ + "Concatenates two arrays, maps to Array.concat(). Does not modify the input arrays." + ], + "returns": "Array: concatenated array", + "params": { + "a": "Array: first Array to concatenate", + "b": "Array: second Array to concatenate" + } + }, + "reverse": { + "description": [ + "Reverses the order of an array, maps to Array.reverse()" + ], + "returns": "Array: the reversed list", + "params": { + "list": "Array: Array to reverse" + } + }, + "shorten": { + "description": [ + "Decreases an array by one element and returns the shortened array, maps to Array.pop()." + ], + "returns": "Array: shortened Array", + "params": { + "list": "Array: Array to shorten" + } + }, + "shuffle": { + "description": [ + "Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm." + ], + "returns": "Array: shuffled Array", + "params": { + "array": "Array: Array to shuffle", + "bool": "Boolean: (Optional) modify passed array" + } + }, + "sort": { + "description": [ + "Sorts an array of numbers from smallest to largest, or puts an array of words in alphabetical order. The original array is not modified; a re-ordered array is returned. The count parameter states the number of elements to sort. For example, if there are 12 elements in an array and count is set to 5, only the first 5 elements in the array will be sorted." + ], + "returns": "Array: the sorted list", + "params": { + "list": "Array: Array to sort", + "count": "Integer: (Optional) number of elements to sort, starting from 0" + } + }, + "splice": { + "description": [ + "Inserts a value or an array of values into an existing array. The first parameter specifies the initial array to be modified, and the second parameter defines the data to be inserted. The third parameter is an index value which specifies the array position from which to insert data. (Remember that array index numbering starts at zero, so the first position is 0, the second position is 1, and so on.)" + ], + "returns": "Array: the list", + "params": { + "list": "Array: Array to splice into", + "value": "Any: value to be spliced in", + "position": "Integer: in the array from which to insert data" + } + }, + "subset": { + "description": [ + "Extracts an array of elements from an existing array. The list parameter defines the array from which the elements will be copied, and the start and count parameters specify which elements to extract. If no count is given, elements will be extracted from the start to the end of the array. When specifying the start, remember that the first array element is 0. This function does not change the source array." + ], + "returns": "Array: Array of extracted elements", + "params": { + "list": "Array: Array to extract from", + "start": "Integer: position to begin", + "count": "Integer: (Optional) number of values to extract" + } + }, + "float": { + "description": [ + "Converts a string to its floating point representation. The contents of a string must resemble a number, or NaN (not a number) will be returned. For example, float(\"1234.56\") evaluates to 1234.56, but float(\"giraffe\") will return NaN.", + "When an array of values is passed in, then an array of floats of the same length is returned." + ], + "returns": "Number: floating point representation of string", + "params": { + "str": "String: float string to parse" + } + }, + "int": { + "description": [ + "Converts a boolean, string, or float to its integer representation. When an array of values is passed in, then an int array of the same length is returned." + ], + "returns": "Number: integer representation of value", + "params": { + "n": "String|Boolean|Number: value to parse", + "radix": "Integer: (Optional) the radix to convert to (default: 10)", + "ns": "Array: values to parse" + } + }, + "str": { + "description": [ + "Converts a boolean, string or number to its string representation. When an array of values is passed in, then an array of strings of the same length is returned." + ], + "returns": "String: string representation of value", + "params": { + "n": "String|Boolean|Number|Array: value to parse" + } + }, + "byte": { + "description": [ + "Converts a number, string representation of a number, or boolean to its byte representation. A byte can be only a whole number between -128 and 127, so when a value outside of this range is converted, it wraps around to the corresponding byte representation. When an array of number, string or boolean values is passed in, then an array of bytes the same length is returned." + ], + "returns": "Number: byte representation of value", + "params": { + "n": "String|Boolean|Number: value to parse", + "ns": "Array: values to parse" + } + }, + "char": { + "description": [ + "Converts a number or string to its corresponding single-character string representation. If a string parameter is provided, it is first parsed as an integer and then translated into a single-character string. When an array of number or string values is passed in, then an array of single-character strings of the same length is returned." + ], + "returns": "String: string representation of value", + "params": { + "n": "String|Number: value to parse", + "ns": "Array: values to parse" + } + }, + "unchar": { + "description": [ + "Converts a single-character string to its corresponding integer representation. When an array of single-character string values is passed in, then an array of integers of the same length is returned." + ], + "returns": "Number: integer representation of value", + "params": { + "n": "String: value to parse", + "ns": "Array: values to parse" + } + }, + "hex": { + "description": [ + "Converts a number to a string in its equivalent hexadecimal notation. If a second parameter is passed, it is used to set the number of characters to generate in the hexadecimal notation. When an array is passed in, an array of strings in hexadecimal notation of the same length is returned." + ], + "returns": "String: hexadecimal string representation of value", + "params": { + "n": "Number: value to parse", + "digits": "Number (Optional)", + "ns": "Number[]: array of values to parse" + } + }, + "unhex": { + "description": [ + "Converts a string representation of a hexadecimal number to its equivalent integer value. When an array of strings in hexadecimal notation is passed in, an array of integers of the same length is returned." + ], + "returns": "Number: integer representation of hexadecimal value", + "params": { + "n": "String: value to parse", + "ns": "Array: values to parse" + } + }, + "join": { + "description": [ + "Combines an array of Strings into one String, each separated by the character(s) used for the separator parameter. To join arrays of ints or floats, it's necessary to first convert them to Strings using nf() or nfs()." + ], + "returns": "String: joined String", + "params": { + "list": "Array: array of Strings to be joined", + "separator": "String: String to be placed between each item" + } + }, + "match": { + "description": [ + "This function is used to apply a regular expression to a piece of text, and return matching groups (elements found inside parentheses) as a String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, an array of length 1 (with the matched text as the first element of the array) will be returned.", + "To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, an array is returned.", + "If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Element [0] of a regular expression match returns the entire matching string, and the match groups start at element [1] (the first group is [1], the second [2], and so on)." + ], + "returns": "String[]: Array of Strings found", + "params": { + "str": "String: the String to be searched", + "regexp": "String: the regexp to be used for matching" + } + }, + "matchAll": { + "description": [ + "This function is used to apply a regular expression to a piece of text, and return a list of matching groups (elements found inside parentheses) as a two-dimensional String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, a two dimensional array is still returned, but the second dimension is only of length one.", + "To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, a 2D array is returned.", + "If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Assuming a loop with counter variable i, element [i][0] of a regular expression match returns the entire matching string, and the match groups start at element [i][1] (the first group is [i][1], the second [i][2], and so on)." + ], + "returns": "String[]: 2d Array of Strings found", + "params": { + "str": "String: the String to be searched", + "regexp": "String: the regexp to be used for matching" + } + }, + "nf": { + "description": [ + "Utility function for formatting numbers into strings. There are two versions: one for formatting floats, and one for formatting ints. The values for the digits, left, and right parameters should always be positive integers. (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." + ], + "returns": "String: formatted String", + "params": { + "num": "Number|String: the Number to format", + "left": "Integer|String: (Optional) number of digits to the left of the decimal point", + "right": "Integer|String: (Optional) number of digits to the right of the decimal point", + "nums": "Array: the Numbers to format" + } + }, + "nfc": { + "description": [ + "Utility function for formatting numbers into strings and placing appropriate commas to mark units of 1000. There are two versions: one for formatting ints, and one for formatting an array of ints. The value for the right parameter should always be a positive integer." + ], + "returns": "String: formatted String", + "params": { + "num": "Number|String: the Number to format", + "right": "Integer|String: (Optional) number of digits to the right of the decimal point", + "nums": "Array: the Numbers to format" + } + }, + "nfp": { + "description": [ + "Utility function for formatting numbers into strings. Similar to nf() but puts a \"+\" in front of positive numbers and a \"-\" in front of negative numbers. There are two versions: one for formatting floats, and one for formatting ints. The values for left, and right parameters should always be positive integers." + ], + "returns": "String: formatted String", + "params": { + "num": "Number: the Number to format", + "left": "Integer: (Optional) number of digits to the left of the decimal point", + "right": "Integer: (Optional) number of digits to the right of the decimal point", + "nums": "Number[]: the Numbers to format" + } + }, + "nfs": { + "description": [ + "Utility function for formatting numbers into 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 non-negative 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." + ], + "returns": "String: formatted String", + "params": { + "num": "Number: the Number to format", + "left": "Integer: (Optional) number of digits to the left of the decimal point", + "right": "Integer: (Optional) number of digits to the right of the decimal point", + "nums": "Array: the Numbers to format" + } + }, + "split": { + "description": [ + "The split() function maps to String.split(), it breaks a String into pieces using a character or string as the delimiter. The delim parameter specifies the character or characters that mark the boundaries between each piece. A String[] array is returned that contains each of the pieces.", + "The splitTokens() function works in a similar fashion, except that it splits using a range of characters instead of a specific character or sequence." + ], + "returns": "String[]: Array of Strings", + "params": { + "value": "String: the String to be split", + "delim": "String: the String used to separate the data" + } + }, + "splitTokens": { + "description": [ + "The splitTokens() function splits a String at one or many character delimiters or \"tokens.\" The delim parameter specifies the character or characters to be used as a boundary.", + "If no delim characters are specified, any whitespace character is used to split. Whitespace characters include tab (\\t), line feed (\\n), carriage return (\\r), form feed (\\f), and space." + ], + "returns": "String[]: Array of Strings", + "params": { + "value": "String: the String to be split", + "delim": "String: (Optional) list of individual Strings that will be used as separators" + } + }, + "trim": { + "description": [ + "Removes whitespace characters from the beginning and end of a String. In addition to standard whitespace characters such as space, carriage return, and tab, this function also removes the Unicode \"nbsp\" character." + ], + "returns": "String: a trimmed String", + "params": { + "str": "String: a String to be trimmed", + "strs": "Array: an Array of Strings to be trimmed" + } + }, + "day": { + "description": [ + "p5.js communicates with the clock on your computer. The day() function returns the current day as a value from 1 - 31." + ], + "returns": "Integer: the current day" + }, + "hour": { + "description": [ + "p5.js communicates with the clock on your computer. The hour() function returns the current hour as a value from 0 - 23." + ], + "returns": "Integer: the current hour" + }, + "minute": { + "description": [ + "p5.js communicates with the clock on your computer. The minute() function returns the current minute as a value from 0 - 59." + ], + "returns": "Integer: the current minute" + }, + "millis": { + "description": [ + "Returns the number of milliseconds (thousandths of a second) since starting the sketch (when setup() is called). This information is often used for timing events and animation sequences." + ], + "returns": "Number: the number of milliseconds since starting the sketch" + }, + "month": { + "description": [ + "p5.js communicates with the clock on your computer. The month() function returns the current month as a value from 1 - 12." + ], + "returns": "Integer: the current month" + }, + "second": { + "description": [ + "p5.js communicates with the clock on your computer. The second() function returns the current second as a value from 0 - 59." + ], + "returns": "Integer: the current second" + }, + "year": { + "description": [ + "p5.js communicates with the clock on your computer. The year() function returns the current year as an integer (2014, 2015, 2016, etc)." + ], + "returns": "Integer: the current year" + }, + "plane": { + "description": [ + "Draw a plane with given a width and height" + ], + "params": { + "width": "Number: (Optional) width of the plane", + "height": "Number: (Optional) height of the plane", + "detailX": "Integer: (Optional) Optional number of triangle subdivisions in x-dimension", + "detailY": "Integer: (Optional) Optional number of triangle subdivisions in y-dimension" + } + }, + "box": { + "description": [ + "Draw a box with given width, height and depth" + ], + "params": { + "width": "Number: (Optional) width of the box", + "Height": "Number: (Optional) height of the box", + "depth": "Number: (Optional) depth of the box", + "detailX": "Integer: (Optional) Optional number of triangle subdivisions in x-dimension", + "detailY": "Integer: (Optional) Optional number of triangle subdivisions in y-dimension" + } + }, + "sphere": { + "description": [ + "Draw a sphere with given radius.", + "DetailX and detailY determines the number of subdivisions in the x-dimension and the y-dimension of a sphere. More subdivisions make the sphere seem smoother. The recommended maximum values are both 24. Using a value greater than 24 may cause a warning or slow down the browser." + ], + "params": { + "radius": "Number: (Optional) radius of circle", + "detailX": "Integer: (Optional) optional number of subdivisions in x-dimension", + "detailY": "Integer: (Optional) optional number of subdivisions in y-dimension" + } + }, + "cylinder": { + "description": [ + "Draw a cylinder with given radius and height", + "DetailX and detailY determines the number of subdivisions in the x-dimension and the y-dimension of a cylinder. More subdivisions make the cylinder seem smoother. The recommended maximum value for detailX is 24. Using a value greater than 24 may cause a warning or slow down the browser." + ], + "params": { + "radius": "Number: (Optional) radius of the surface", + "height": "Number: (Optional) height of the cylinder", + "detailX": "Integer: (Optional) number of subdivisions in x-dimension; default is 24", + "detailY": "Integer: (Optional) number of subdivisions in y-dimension; default is 1", + "bottomCap": "Boolean: (Optional) whether to draw the bottom of the cylinder", + "topCap": "Boolean: (Optional) whether to draw the top of the cylinder" + } + }, + "cone": { + "description": [ + "Draw a cone with given radius and height", + "DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a cone. More subdivisions make the cone seem smoother. The recommended maximum value for detailX is 24. Using a value greater than 24 may cause a warning or slow down the browser." + ], + "params": { + "radius": "Number: (Optional) radius of the bottom surface", + "height": "Number: (Optional) height of the cone", + "detailX": "Integer: (Optional) number of segments, the more segments the smoother geometry default is 24", + "detailY": "Integer: (Optional) number of segments, the more segments the smoother geometry default is 1", + "cap": "Boolean: (Optional) whether to draw the base of the cone" + } + }, + "ellipsoid": { + "description": [ + "Draw an ellipsoid with given radius", + "DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a cone. More subdivisions make the ellipsoid appear to be smoother. Avoid detail number above 150, it may crash the browser." + ], + "params": { + "radiusx": "Number: (Optional) x-radius of ellipsoid", + "radiusy": "Number: (Optional) y-radius of ellipsoid", + "radiusz": "Number: (Optional) z-radius of ellipsoid", + "detailX": "Integer: (Optional) number of segments, the more segments the smoother geometry default is 24. Avoid detail number above 150, it may crash the browser.", + "detailY": "Integer: (Optional) number of segments, the more segments the smoother geometry default is 16. Avoid detail number above 150, it may crash the browser." + } + }, + "torus": { + "description": [ + "Draw a torus with given radius and tube radius", + "DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a torus. More subdivisions make the torus appear to be smoother. The default and maximum values for detailX and detailY are 24 and 16, respectively. Setting them to relatively small values like 4 and 6 allows you to create new shapes other than a torus." + ], + "params": { + "radius": "Number: (Optional) radius of the whole ring", + "tubeRadius": "Number: (Optional) radius of the tube", + "detailX": "Integer: (Optional) number of segments in x-dimension, the more segments the smoother geometry default is 24", + "detailY": "Integer: (Optional) number of segments in y-dimension, the more segments the smoother geometry default is 16" + } + }, + "orbitControl": { + "description": [ + "Allows movement around a 3D sketch using a mouse or trackpad. Left-clicking and dragging will rotate the camera position about the center of the sketch, right-clicking and dragging will pan the camera position without rotation, and using the mouse wheel (scrolling) will move the camera closer or further from the center of the sketch. This function can be called with parameters dictating sensitivity to mouse movement along the X and Y axes. Calling this function without parameters is equivalent to calling orbitControl(1,1). To reverse direction of movement in either axis, enter a negative number for sensitivity." + ], + "params": { + "sensitivityX": "Number: (Optional) sensitivity to mouse movement along X axis", + "sensitivityY": "Number: (Optional) sensitivity to mouse movement along Y axis", + "sensitivityZ": "Number: (Optional) sensitivity to scroll movement along Z axis" + } + }, + "debugMode": { + "description": [ + "debugMode() helps visualize 3D space by adding a grid to indicate where the ‘ground’ is in a sketch and an axes icon which indicates the +X, +Y, and +Z directions. This function can be called without parameters to create a default grid and axes icon, or it can be called according to the examples above to customize the size and position of the grid and/or axes icon. The grid is drawn using the most recently set stroke color and weight. To specify these parameters, add a call to stroke() and strokeWeight() just before the end of the draw() loop.", + "By default, the grid will run through the origin (0,0,0) of the sketch along the XZ plane and the axes icon will be offset from the origin. Both the grid and axes icon will be sized according to the current canvas size. Note that because the grid runs parallel to the default camera view, it is often helpful to use debugMode along with orbitControl to allow full view of the grid." + ], + "params": { + "mode": "Constant: either GRID or AXES", + "gridSize": "Number: (Optional) size of one side of the grid", + "gridDivisions": "Number: (Optional) number of divisions in the grid", + "xOff": "Number: (Optional) X axis offset from origin (0,0,0)", + "yOff": "Number: (Optional) Y axis offset from origin (0,0,0)", + "zOff": "Number: (Optional) Z axis offset from origin (0,0,0)", + "axesSize": "Number: (Optional) size of axes icon", + "gridXOff": "Number (Optional)", + "gridYOff": "Number (Optional)", + "gridZOff": "Number (Optional)", + "axesXOff": "Number (Optional)", + "axesYOff": "Number (Optional)", + "axesZOff": "Number (Optional)" + } + }, + "noDebugMode": { + "description": [ + "Turns off debugMode() in a 3D sketch." + ] + }, + "ambientLight": { + "description": [ + "Creates an ambient light with a color. Ambient light is light that comes from everywhere on the canvas. It has no particular source." + ], + "params": { + "v1": "Number: red or hue value relative to the current color range", + "v2": "Number: green or saturation value relative to the current color range", + "v3": "Number: blue or brightness value relative to the current color range", + "alpha": "Number: (Optional) the alpha value", + "value": "String: a color string", + "gray": "Number: a gray value", + "values": "Number[]: an array containing the red,green,blue & and alpha components of the color", + "color": "p5.Color: the ambient light color" + } + }, + "specularColor": { + "description": [ + "Set's the color of the specular highlight when using a specular material and specular light.", + "This method can be combined with specularMaterial() and shininess() functions to set specular highlights. The default color is white, ie (255, 255, 255), which is used if this method is not called before specularMaterial(). If this method is called without specularMaterial(), There will be no effect.", + "Note: specularColor is equivalent to the processing function lightSpecular." + ], + "params": { + "v1": "Number: red or hue value relative to the current color range", + "v2": "Number: green or saturation value relative to the current color range", + "v3": "Number: blue or brightness value relative to the current color range", + "value": "String: a color string", + "gray": "Number: a gray value", + "values": "Number[]: an array containing the red,green,blue & and alpha components of the color", + "color": "p5.Color: the ambient light color" + } + }, + "directionalLight": { + "description": [ + "Creates a directional light with a color and a direction", + "A maximum of 5 directionalLight can be active at one time" + ], + "params": { + "v1": "Number: red or hue value (depending on the current color mode),", + "v2": "Number: green or saturation value", + "v3": "Number: blue or brightness value", + "position": "p5.Vector: the direction of the light", + "color": "Number[]|String|p5.Color: color Array, CSS color string, or p5.Color value", + "x": "Number: x axis direction", + "y": "Number: y axis direction", + "z": "Number: z axis direction" + } + }, + "pointLight": { + "description": [ + "Creates a point light with a color and a light position", + "A maximum of 5 pointLight can be active at one time" + ], + "params": { + "v1": "Number: red or hue value (depending on the current color mode),", + "v2": "Number: green or saturation value", + "v3": "Number: blue or brightness value", + "x": "Number: x axis position", + "y": "Number: y axis position", + "z": "Number: z axis position", + "position": "p5.Vector: the position of the light", + "color": "Number[]|String|p5.Color: color Array, CSS color string, or p5.Color value" + } + }, + "lights": { + "description": [ + "Sets the default ambient and directional light. The defaults are ambientLight(128, 128, 128) and directionalLight(128, 128, 128, 0, 0, -1). Lights need to be included in the draw() to remain persistent in a looping program. Placing them in the setup() of a looping program will cause them to only have an effect the first time through the loop." + ] + }, + "lightFalloff": { + "description": [ + "Sets the falloff rates for point lights. It affects only the elements which are created after it in the code. The default value is lightFalloff(1.0, 0.0, 0.0), and the parameters are used to calculate the falloff with the following equation:", + "d = distance from light position to vertex position", + "falloff = 1 / (CONSTANT + d * LINEAR + ( d * d ) * QUADRATIC)" + ], + "params": { + "constant": "Number: constant value for determining falloff", + "linear": "Number: linear value for determining falloff", + "quadratic": "Number: quadratic value for determining falloff" + } + }, + "spotLight": { + "description": [ + "Creates a spotlight with a given color, position, direction of light, angle and concentration. Here, angle refers to the opening or aperture of the cone of the spotlight, and concentration is used to focus the light towards the center. Both angle and concentration are optional, but if you want to provide concentration, you will also have to specify the angle.", + "A maximum of 5 spotLight can be active at one time" + ], + "params": { + "v1": "Number: red or hue value (depending on the current color mode),", + "v2": "Number: green or saturation value", + "v3": "Number: blue or brightness value", + "x": "Number: x axis position", + "y": "Number: y axis position", + "z": "Number: z axis position", + "rx": "Number: x axis direction of light", + "ry": "Number: y axis direction of light", + "rz": "Number: z axis direction of light", + "angle": "Number: (Optional) optional parameter for angle. Defaults to PI/3", + "conc": "Number: (Optional) optional parameter for concentration. Defaults to 100", + "color": "Number[]|String|p5.Color: color Array, CSS color string, or p5.Color value", + "position": "p5.Vector: the position of the light", + "direction": "p5.Vector: the direction of the light" + } + }, + "noLights": { + "description": [ + "This function will remove all the lights from the sketch for the subsequent materials rendered. It affects all the subsequent methods. Calls to lighting methods made after noLights() will re-enable lights in the sketch." + ] + }, + "loadModel": { + "description": [ + "Load a 3d model from an OBJ or STL file.", + "loadModel() should be placed inside of preload(). This allows the model to load fully before the rest of your code is run.", + "One of the limitations of the OBJ and STL format is that it doesn't have a built-in sense of scale. This means that models exported from different programs might be very different sizes. If your model isn't displaying, try calling loadModel() with the normalized parameter set to true. This will resize the model to a scale appropriate for p5. You can also make additional changes to the final size of your model with the scale() function.", + "Also, the support for colored STL files is not present. STL files with color will be rendered without color properties." + ], + "returns": "p5.Geometry: the p5.Geometry object", + "params": { + "path": "String: Path of the model to be loaded", + "normalize": "Boolean: If true, scale the model to a standardized size when loading", + "successCallback": "function(p5.Geometry): (Optional) Function to be called once the model is loaded. Will be passed the 3D model object.", + "failureCallback": "Function(Event): (Optional) called with event error if the model fails to load.", + "fileType": "String: (Optional) The file extension of the model (.stl, .obj)." + } + }, + "model": { + "description": [ + "Render a 3d model to the screen." + ], + "params": { + "model": "p5.Geometry: Loaded 3d model to be rendered" + } + }, + "loadShader": { + "description": [ + "Loads a custom shader from the provided vertex and fragment shader paths. The shader files are loaded asynchronously in the background, so this method should be used in preload().", + "For now, there are three main types of shaders. p5 will automatically supply appropriate vertices, normals, colors, and lighting attributes if the parameters defined in the shader match the names." + ], + "returns": "p5.Shader: a shader object created from the provided vertex and fragment shader files.", + "params": { + "vertFilename": "String: path to file containing vertex shader source code", + "fragFilename": "String: path to file containing fragment shader source code", + "callback": "Function: (Optional) callback to be executed after loadShader completes. On success, the Shader object is passed as the first argument.", + "errorCallback": "Function: (Optional) callback to be executed when an error occurs inside loadShader. On error, the error is passed as the first argument." + } + }, + "createShader": { + "returns": "p5.Shader: a shader object created from the provided vertex and fragment shaders.", + "params": { + "vertSrc": "String: source code for the vertex shader", + "fragSrc": "String: source code for the fragment shader" + } + }, + "shader": { + "description": [ + "The shader() function lets the user provide a custom shader to fill in shapes in WEBGL mode. Users can create their own shaders by loading vertex and fragment shaders with loadShader()." + ], + "params": { + "s": "p5.Shader: (Optional) the desired p5.Shader to use for rendering shapes." + } + }, + "resetShader": { + "description": [ + "This function restores the default shaders in WEBGL mode. Code that runs after resetShader() will not be affected by previously defined shaders. Should be run after shader()." + ] + }, + "texture": { + "description": [ + "Texture for geometry. You can view other possible materials in this example." + ], + "params": { + "tex": "p5.Image|p5.MediaElement|p5.Graphics: 2-dimensional graphics to render as texture" + } + }, + "textureMode": { + "description": [ + "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)." + ], + "params": { + "mode": "Constant: either IMAGE or NORMAL" + } + }, + "textureWrap": { + "description": [ + "Sets the global texture wrapping mode. This controls how textures behave when their uv's go outside of the 0 - 1 range. There are three options: CLAMP, REPEAT, and MIRROR.", + "CLAMP causes the pixels at the edge of the texture to extend to the bounds REPEAT causes the texture to tile repeatedly until reaching the bounds MIRROR works similarly to REPEAT but it flips the texture with every new tile", + "REPEAT & MIRROR are only available if the texture is a power of two size (128, 256, 512, 1024, etc.).", + "This method will affect all textures in your sketch until a subsequent textureWrap call is made.", + "If only one argument is provided, it will be applied to both the horizontal and vertical axes." + ], + "params": { + "wrapX": "Constant: either CLAMP, REPEAT, or MIRROR", + "wrapY": "Constant: (Optional) either CLAMP, REPEAT, or MIRROR" + } + }, + "normalMaterial": { + "description": [ + "Normal material for geometry is a material that is not affected by light. It is not reflective and is a placeholder material often used for debugging. Surfaces facing the X-axis, become red, those facing the Y-axis, become green and those facing the Z-axis, become blue. You can view all possible materials in this example." + ] + }, + "ambientMaterial": { + "description": [ + "Ambient material for geometry with a given color. Ambient material defines the color the object reflects under any lighting. For example, if the ambient material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light. Here's an example containing all possible materials." + ], + "params": { + "v1": "Number: gray value, red or hue value (depending on the current color mode),", + "v2": "Number: (Optional) green or saturation value", + "v3": "Number: (Optional) blue or brightness value", + "color": "Number[]|String|p5.Color: color, color Array, or CSS color string" + } + }, + "emissiveMaterial": { + "description": [ + "Sets the emissive color of the material used for geometry drawn to the screen. This is a misnomer in the sense that the material does not actually emit light that effects surrounding polygons. Instead, it gives the appearance that the object is glowing. An emissive material will display at full strength even if there is no light for it to reflect." + ], + "params": { + "v1": "Number: gray value, red or hue value (depending on the current color mode),", + "v2": "Number: (Optional) green or saturation value", + "v3": "Number: (Optional) blue or brightness value", + "a": "Number: (Optional) opacity", + "color": "Number[]|String|p5.Color: color, color Array, or CSS color string" + } + }, + "specularMaterial": { + "description": [ + "Specular material for geometry with a given color. Specular material is a shiny reflective material. Like ambient material it also defines the color the object reflects under ambient lighting. For example, if the specular material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light. For all other types of light like point and directional light, a specular material will reflect the color of the light source to the viewer. Here's an example containing all possible materials." + ], + "params": { + "gray": "Number: number specifying value between white and black.", + "alpha": "Number: (Optional) alpha value relative to current color range (default is 0-255)", + "v1": "Number: red or hue value relative to the current color range", + "v2": "Number: green or saturation value relative to the current color range", + "v3": "Number: blue or brightness value relative to the current color range", + "color": "Number[]|String|p5.Color: color Array, or CSS color string" + } + }, + "shininess": { + "description": [ + "Sets the amount of gloss in the surface of shapes. Used in combination with specularMaterial() in setting the material properties of shapes. The default and minimum value is 1." + ], + "params": { + "shine": "Number: Degree of Shininess. Defaults to 1." + } + }, + "camera": { + "description": [ + "Sets the position of the current camera in a 3D sketch. Parameters for this function define the camera's position, the center of the sketch (where the camera is pointing), and an up direction (the orientation of the camera).", + "This function simulates the movements of the camera, allowing objects to be viewed from various angles. Remember, it does not move the objects themselves but the camera instead. For example when the centerX value is positive, and the camera is rotating to the right side of the sketch, the object will seem like it's moving to the left.", + "See this example to view the position of your camera.", + "If no parameters are given, the following default is used: camera(0, 0, (height/2) / tan(PI/6), 0, 0, 0, 0, 1, 0)" + ], + "params": { + "x": "Number: (Optional) camera position value on x axis", + "y": "Number: (Optional) camera position value on y axis", + "z": "Number: (Optional) camera position value on z axis", + "centerX": "Number: (Optional) x coordinate representing center of the sketch", + "centerY": "Number: (Optional) y coordinate representing center of the sketch", + "centerZ": "Number: (Optional) z coordinate representing center of the sketch", + "upX": "Number: (Optional) x component of direction 'up' from camera", + "upY": "Number: (Optional) y component of direction 'up' from camera", + "upZ": "Number: (Optional) z component of direction 'up' from camera" + } + }, + "perspective": { + "description": [ + "Sets a perspective projection for the current camera in a 3D sketch. This projection represents depth through foreshortening: objects that are close to the camera appear their actual size while those that are further away from the camera appear smaller.", + "The parameters to this function define the viewing frustum (the truncated pyramid within which objects are seen by the camera) through vertical field of view, aspect ratio (usually width/height), and near and far clipping planes.", + "If no parameters are given, the following default is used: perspective(PI/3, width/height, eyeZ/10, eyeZ*10), where eyeZ is equal to ((height/2) / tan(PI/6))." + ], + "params": { + "fovy": "Number: (Optional) camera frustum vertical field of view, from bottom to top of view, in angleMode units", + "aspect": "Number: (Optional) camera frustum aspect ratio", + "near": "Number: (Optional) frustum near plane length", + "far": "Number: (Optional) frustum far plane length" + } + }, + "ortho": { + "description": [ + "Sets an orthographic projection for the current camera in a 3D sketch and defines a box-shaped viewing frustum within which objects are seen. In this projection, all objects with the same dimension appear the same size, regardless of whether they are near or far from the camera.", + "The parameters to this function specify the viewing frustum where left and right are the minimum and maximum x values, top and bottom are the minimum and maximum y values, and near and far are the minimum and maximum z values.", + "If no parameters are given, the following default is used: ortho(-width/2, width/2, -height/2, height/2)." + ], + "params": { + "left": "Number: (Optional) camera frustum left plane", + "right": "Number: (Optional) camera frustum right plane", + "bottom": "Number: (Optional) camera frustum bottom plane", + "top": "Number: (Optional) camera frustum top plane", + "near": "Number: (Optional) camera frustum near plane", + "far": "Number: (Optional) camera frustum far plane" + } + }, + "frustum": { + "description": [ + "Sets the frustum of the current camera as defined by the parameters.", + "A frustum is a geometric form: a pyramid with its top cut off. With the viewer's eye at the imaginary top of the pyramid, the six planes of the frustum act as clipping planes when rendering a 3D view. Thus, any form inside the clipping planes is visible; anything outside those planes is not visible.", + "Setting the frustum changes the perspective of the scene being rendered. This can be achieved more simply in many cases by using perspective().", + "If no parameters are given, the following default is used: frustum(-width/2, width/2, -height/2, height/2, 0, max(width, height))." + ], + "params": { + "left": "Number: (Optional) camera frustum left plane", + "right": "Number: (Optional) camera frustum right plane", + "bottom": "Number: (Optional) camera frustum bottom plane", + "top": "Number: (Optional) camera frustum top plane", + "near": "Number: (Optional) camera frustum near plane", + "far": "Number: (Optional) camera frustum far plane" + } + }, + "createCamera": { + "description": [ + "Creates a new p5.Camera object and sets it as the current (active) camera.", + "The new camera is initialized with a default position (see camera()) and a default perspective projection (see perspective()). Its properties can be controlled with the p5.Camera methods.", + "Note: Every 3D sketch starts with a default camera initialized. This camera can be controlled with the global methods camera(), perspective(), ortho(), and frustum() if it is the only camera in the scene." + ], + "returns": "p5.Camera: The newly created camera object." + }, + "setCamera": { + "description": [ + "Sets the current (active) camera of a 3D sketch. Allows for switching between multiple cameras." + ], + "params": { + "cam": "p5.Camera: p5.Camera object" + } + }, + "setAttributes": { + "description": [ + "Set attributes for the WebGL Drawing context. This is a way of adjusting how the WebGL renderer works to fine-tune the display and performance.", + "Note that this will reinitialize the drawing context if called after the WebGL canvas is made.", + "If an object is passed as the parameter, all attributes not declared in the object will be set to defaults.", + "The available attributes are: alpha - indicates if the canvas contains an alpha buffer default is true", + "depth - indicates whether the drawing buffer has a depth buffer of at least 16 bits - default is true", + "stencil - indicates whether the drawing buffer has a stencil buffer of at least 8 bits", + "antialias - indicates whether or not to perform anti-aliasing default is false (true in Safari)", + "premultipliedAlpha - indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha default is false", + "preserveDrawingBuffer - if true the buffers will not be cleared and and will preserve their values until cleared or overwritten by author (note that p5 clears automatically on draw loop) default is true", + "perPixelLighting - if true, per-pixel lighting will be used in the lighting shader otherwise per-vertex lighting is used. default is true." + ], + "params": { + "key": "String: Name of attribute", + "value": "Boolean: New value of named attribute", + "obj": "Object: object with key-value pairs" + } + }, + "getAudioContext": { + "description": [ + "Returns the Audio Context for this sketch. Useful for users who would like to dig deeper into the Web Audio API .", + "Some browsers require users to startAudioContext with a user gesture, such as touchStarted in the example below." + ], + "returns": "Object: AudioContext for this sketch" + }, + "userStartAudio": { + "description": [ + "It is not only a good practice to give users control over starting audio. This policy is enforced by many web browsers, including iOS and Google Chrome, which create the Web Audio API's Audio Context in a suspended state.", + "In these browser-specific policies, sound will not play until a user interaction event (i.e. mousePressed()) explicitly resumes the AudioContext, or starts an audio node. This can be accomplished by calling start() on a p5.Oscillator, play() on a p5.SoundFile, or simply userStartAudio().", + "userStartAudio() starts the AudioContext on a user gesture. The default behavior will enable audio on any mouseUp or touchEnd event. It can also be placed in a specific interaction function, such as mousePressed() as in the example below. This method utilizes StartAudioContext , a library by Yotam Mann (MIT Licence, 2016)." + ], + "returns": "Promise: Returns a Promise that resolves when the AudioContext state is 'running'", + "params": { + "element(s)": "Element|Array: (Optional) This argument can be an Element, Selector String, NodeList, p5.Element, jQuery Element, or an Array of any of those.", + "callback": "Function: (Optional) Callback to invoke when the AudioContext has started" + } + }, + "getOutputVolume": { + "description": [ + "Returns a number representing the output volume for sound in this sketch." + ], + "returns": "Number: Output volume for sound in this sketch. Should be between 0.0 (silence) and 1.0." + }, + "outputVolume": { + "description": [ + "Scale the output of all sound in this sketch Scaled between 0.0 (silence) and 1.0 (full volume). 1.0 is the maximum amplitude of a digital sound, so multiplying by greater than 1.0 may cause digital distortion. To fade, provide a rampTime parameter. For more complex fades, see the Envelope class.", + "Alternately, you can pass in a signal source such as an oscillator to modulate the amplitude with an audio signal.", + "How This Works: When you load the p5.sound module, it creates a single instance of p5sound. All sound objects in this module output to p5sound before reaching your computer's output. So if you change the amplitude of p5sound, it impacts all of the sound in this module.", + "If no value is provided, returns a Web Audio API Gain Node" + ], + "params": { + "volume": "Number|Object: Volume (amplitude) between 0.0 and 1.0 or modulating signal/oscillator", + "rampTime": "Number: (Optional) Fade for t seconds", + "timeFromNow": "Number: (Optional) Schedule this event to happen at t seconds in the future" + } + }, + "soundOut": { + "description": [ + "p5.soundOut is the p5.sound final output bus. It sends output to the destination of this window's web audio context. It contains Web Audio API nodes including a dyanmicsCompressor (.limiter), and Gain Nodes for .input and .output." + ] + }, + "sampleRate": { + "description": [ + "Returns a number representing the sample rate, in samples per second, of all sound objects in this audio context. It is determined by the sampling rate of your operating system's sound card, and it is not currently possile to change. It is often 44100, or twice the range of human hearing." + ], + "returns": "Number: samplerate samples per second" + }, + "freqToMidi": { + "description": [ + "Returns the closest MIDI note value for a given frequency." + ], + "returns": "Number: MIDI note value", + "params": { + "frequency": "Number: A freqeuncy, for example, the \"A\" above Middle C is 440Hz" + } + }, + "midiToFreq": { + "description": [ + "Returns the frequency value of a MIDI note value. General MIDI treats notes as integers where middle C is 60, C# is 61, D is 62 etc. Useful for generating musical frequencies with oscillators." + ], + "returns": "Number: Frequency value of the given MIDI note", + "params": { + "midiNote": "Number: The number of a MIDI note" + } + }, + "soundFormats": { + "description": [ + "List the SoundFile formats that you will include. LoadSound will search your directory for these extensions, and will pick a format that is compatable with the client's web browser. Here is a free online file converter." + ], + "params": { + "formats": "String: (Optional) i.e. 'mp3', 'wav', 'ogg'" + } + }, + "saveSound": { + "description": [ + "Save a p5.SoundFile as a .wav file. The browser will prompt the user to download the file to their device. For uploading audio to a server, use p5.SoundFile.saveBlob." + ], + "params": { + "soundFile": "p5.SoundFile: p5.SoundFile that you wish to save", + "fileName": "String: name of the resulting .wav file." + } + }, + "loadSound": { + "description": [ + "loadSound() returns a new p5.SoundFile from a specified path. If called during preload(), the p5.SoundFile will be ready to play in time for setup() and draw(). If called outside of preload, the p5.SoundFile will not be ready immediately, so loadSound accepts a callback as the second parameter. Using a local server is recommended when loading external files." + ], + "returns": "SoundFile: Returns a p5.SoundFile", + "params": { + "path": "String|Array: Path to the sound file, or an array with paths to soundfiles in multiple formats i.e. ['sound.ogg', 'sound.mp3']. Alternately, accepts an object: either from the HTML5 File API, or a p5.File.", + "successCallback": "Function: (Optional) Name of a function to call once file loads", + "errorCallback": "Function: (Optional) Name of a function to call if there is an error loading the file.", + "whileLoading": "Function: (Optional) Name of a function to call while file is loading. This function will receive the percentage loaded so far, from 0.0 to 1.0." + } + }, + "createConvolver": { + "description": [ + "Create a p5.Convolver. Accepts a path to a soundfile that will be used to generate an impulse response." + ], + "returns": "p5.Convolver:", + "params": { + "path": "String: path to a sound file", + "callback": "Function: (Optional) function to call if loading is successful. The object will be passed in as the argument to the callback function.", + "errorCallback": "Function: (Optional) function to call if loading is not successful. A custom error will be passed in as the argument to the callback function." + } + }, + "setBPM": { + "description": [ + "Set the global tempo, in beats per minute, for all p5.Parts. This method will impact all active p5.Parts." + ], + "params": { + "BPM": "Number: Beats Per Minute", + "rampTime": "Number: Seconds from now" + } + } }, "p5.Color": { "description": [ @@ -1453,21 +3701,47 @@ "Internally, we store an array representing the ideal RGBA values in floating point form, normalized from 0 to 1. From this we calculate the closest screen color (RGBA levels from 0 to 255) and expose this to the renderer.", "We also cache normalized, floating point components of the color in various representations as they are calculated. This is done to prevent repeating a conversion that has already been performed." ], - "toString": [ - "This function returns the color formatted as a string. This can be useful for debugging, or for using p5.js with other libraries." - ], - "setRed": [ - "The setRed function sets the red component of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255." - ], - "setGreen": [ - "The setGreen function sets the green component of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255." - ], - "setBlue": [ - "The setBlue function sets the blue component of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255." - ], - "setAlpha": [ - "The setAlpha function sets the transparency (alpha) value of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255." - ] + "toString": { + "description": [ + "This function returns the color formatted as a string. This can be useful for debugging, or for using p5.js with other libraries." + ], + "returns": "String: the formatted string", + "params": { + "format": "String: (Optional) How the color string will be formatted. Leaving this empty formats the string as rgba(r, g, b, a). '#rgb' '#rgba' '#rrggbb' and '#rrggbbaa' format as hexadecimal color codes. 'rgb' 'hsb' and 'hsl' return the color formatted in the specified color mode. 'rgba' 'hsba' and 'hsla' are the same as above but with alpha channels. 'rgb%' 'hsb%' 'hsl%' 'rgba%' 'hsba%' and 'hsla%' format as percentages." + } + }, + "setRed": { + "description": [ + "The setRed function sets the red component of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255." + ], + "params": { + "red": "Number: the new red value" + } + }, + "setGreen": { + "description": [ + "The setGreen function sets the green component of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255." + ], + "params": { + "green": "Number: the new green value" + } + }, + "setBlue": { + "description": [ + "The setBlue function sets the blue component of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255." + ], + "params": { + "blue": "Number: the new blue value" + } + }, + "setAlpha": { + "description": [ + "The setAlpha function sets the transparency (alpha) value of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255." + ], + "params": { + "alpha": "Number: the new alpha value" + } + } }, "p5.Element": { "description": [ @@ -1477,111 +3751,285 @@ "elt": "String: DOM node that is wrapped", "pInst": "P5: (Optional) pointer to p5 instance" }, - "elt": [ - "Underlying HTML element. All normal HTML methods can be called on this." - ], - "parent": [ - "Attaches the element to the parent specified. A way of setting the container for the element. 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." - ], - "id": [ - "Sets the ID of the element. If no ID argument is passed in, it instead returns the current ID of the element. Note that only one element can have a particular id in a page. The .class() function can be used to identify multiple elements with the same class name." - ], - "class": [ - "Adds given class to the element. If no class argument is passed in, it instead returns a string containing the current class(es) of the element." - ], - "mousePressed": [ - "The .mousePressed() function is called once after every time a mouse button is pressed over the element. Some mobile browsers may also trigger this event on a touch screen, if the user performs a quick tap. This can be used to attach element specific event listeners." - ], - "doubleClicked": [ - "The .doubleClicked() function is called once after every time a mouse button is pressed twice over the element. This can be used to attach element and action specific event listeners." - ], - "mouseWheel": [ - "The mouseWheel() function is called once after every time a mouse wheel is scrolled over the element. This can be used to attach element specific event listeners.", - "The function accepts a callback function as argument which will be executed when the wheel event is triggered on the element, the callback function is passed one argument event. The event.deltaY property returns negative values if the mouse wheel is rotated up or away from the user and positive in the other direction. The event.deltaX does the same as event.deltaY except it reads the horizontal wheel scroll of the mouse wheel.", - "On OS X with \"natural\" scrolling enabled, the event.deltaY values are reversed." - ], - "mouseReleased": [ - "The mouseReleased() function is called once after every time a mouse button is released over the element. Some mobile browsers may also trigger this event on a touch screen, if the user performs a quick tap. This can be used to attach element specific event listeners." - ], - "mouseClicked": [ - "The .mouseClicked() function is called once after a mouse button is pressed and released over the element. Some mobile browsers may also trigger this event on a touch screen, if the user performs a quick tap.This can be used to attach element specific event listeners." - ], - "mouseMoved": [ - "The .mouseMoved() function is called once every time a mouse moves over the element. This can be used to attach an element specific event listener." - ], - "mouseOver": [ - "The .mouseOver() function is called once after every time a mouse moves onto the element. This can be used to attach an element specific event listener." - ], - "mouseOut": [ - "The .mouseOut() function is called once after every time a mouse moves off the element. This can be used to attach an element specific event listener." - ], - "touchStarted": [ - "The .touchStarted() function is called once after every time a touch is registered. This can be used to attach element specific event listeners." - ], - "touchMoved": [ - "The .touchMoved() function is called once after every time a touch move is registered. This can be used to attach element specific event listeners." - ], - "touchEnded": [ - "The .touchEnded() function is called once after every time a touch is registered. This can be used to attach element specific event listeners." - ], - "dragOver": [ - "The .dragOver() function is called once after every time a file is dragged over the element. This can be used to attach an element specific event listener." - ], - "dragLeave": [ - "The .dragLeave() function is called once after every time a dragged file leaves the element area. This can be used to attach an element specific event listener." - ], - "addClass": [ - "Adds specified class to the element." - ], - "removeClass": [ - "Removes specified class from the element." - ], - "hasClass": [ - "Checks if specified class already set to element" - ], - "toggleClass": [ - "Toggles element class" - ], - "child": [ - "Attaches the element as a child to the parent specified. Accepts either a string ID, DOM node, or p5.Element. If no argument is specified, an array of children DOM nodes is returned." - ], - "center": [ - "Centers a p5 Element either vertically, horizontally, or both, relative to its parent or according to the body if the Element has no parent. If no argument is passed the Element is aligned both vertically and horizontally." - ], - "html": [ - "If an argument is given, sets the inner HTML of the element, replacing any existing html. If true is included as a second argument, html is appended instead of replacing existing html. If no arguments are given, returns the inner HTML of the element." - ], - "position": [ - "Sets the position of the element. If no position type argument is given, the position will be relative to (0, 0) of the window. Essentially, this sets position:absolute and left and top properties of style. If an optional third argument specifying position type is given, the x and y coordinates will be interpreted based on the positioning scheme. If no arguments given, the function returns the x and y position of the element. found documentation on how to be more specific with object type https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc" - ], - "style": [ - "Sets the given style (css) property (1st arg) of the element with the given value (2nd arg). If a single argument is given, .style() returns the value of the given property; however, if the single argument is given in css syntax ('text-align:center'), .style() sets the css appropriately." - ], - "attribute": [ - "Adds a new attribute or changes the value of an existing attribute on the specified element. If no value is specified, returns the value of the given attribute, or null if attribute is not set." - ], - "removeAttribute": [ - "Removes an attribute on the specified element." - ], - "value": [ - "Either returns the value of the element if no arguments given, or sets the value of the element." - ], - "show": [ - "Shows the current element. Essentially, setting display:block for the style." - ], - "hide": [ - "Hides the current element. Essentially, setting display:none for the style." - ], - "size": [ - "Sets the width and height of the element. AUTO can be used to only adjust one dimension at a time. If no arguments are given, it returns the width and height of the element in an object. In case of elements which need to be loaded, such as images, it is recommended to call the function after the element has finished loading." - ], - "remove": [ - "Removes the element, stops all media streams, and deregisters all listeners." - ], - "drop": [ - "Registers a callback that gets called every time a file that is dropped on the element has been loaded. p5 will load every dropped file into memory and pass it as a p5.File object to the callback. Multiple files dropped at the same time will result in multiple calls to the callback.", - "You can optionally pass a second callback which will be registered to the raw drop event. The callback will thus be provided the original DragEvent. Dropping multiple files at the same time will trigger the second callback once per drop, whereas the first callback will trigger for each loaded file." - ] + "elt": { + "description": [ + "Underlying HTML element. All normal HTML methods can be called on this." + ] + }, + "parent": { + "description": [ + "Attaches the element to the parent specified. A way of setting the container for the element. 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." + ], + "params": { + "parent": "String|p5.Element|Object: the ID, DOM node, or p5.Element of desired parent element" + } + }, + "id": { + "description": [ + "Sets the ID of the element. If no ID argument is passed in, it instead returns the current ID of the element. Note that only one element can have a particular id in a page. The .class() function can be used to identify multiple elements with the same class name." + ], + "params": { + "id": "String: ID of the element" + } + }, + "class": { + "description": [ + "Adds given class to the element. If no class argument is passed in, it instead returns a string containing the current class(es) of the element." + ], + "params": { + "class": "String: class to add" + } + }, + "mousePressed": { + "description": [ + "The .mousePressed() function is called once after every time a mouse button is pressed over the element. Some mobile browsers may also trigger this event on a touch screen, if the user performs a quick tap. This can be used to attach element specific event listeners." + ], + "params": { + "fxn": "Function|Boolean: function to be fired when mouse is pressed over the element. if false is passed instead, the previously firing function will no longer fire." + } + }, + "doubleClicked": { + "description": [ + "The .doubleClicked() function is called once after every time a mouse button is pressed twice over the element. This can be used to attach element and action specific event listeners." + ], + "returns": "p5.Element:", + "params": { + "fxn": "Function|Boolean: function to be fired when mouse is double clicked over the element. if false is passed instead, the previously firing function will no longer fire." + } + }, + "mouseWheel": { + "description": [ + "The mouseWheel() function is called once after every time a mouse wheel is scrolled over the element. This can be used to attach element specific event listeners.", + "The function accepts a callback function as argument which will be executed when the wheel event is triggered on the element, the callback function is passed one argument event. The event.deltaY property returns negative values if the mouse wheel is rotated up or away from the user and positive in the other direction. The event.deltaX does the same as event.deltaY except it reads the horizontal wheel scroll of the mouse wheel.", + "On OS X with \"natural\" scrolling enabled, the event.deltaY values are reversed." + ], + "params": { + "fxn": "Function|Boolean: function to be fired when mouse is scrolled over the element. if false is passed instead, the previously firing function will no longer fire." + } + }, + "mouseReleased": { + "description": [ + "The mouseReleased() function is called once after every time a mouse button is released over the element. Some mobile browsers may also trigger this event on a touch screen, if the user performs a quick tap. This can be used to attach element specific event listeners." + ], + "params": { + "fxn": "Function|Boolean: function to be fired when mouse is released over the element. if false is passed instead, the previously firing function will no longer fire." + } + }, + "mouseClicked": { + "description": [ + "The .mouseClicked() function is called once after a mouse button is pressed and released over the element. Some mobile browsers may also trigger this event on a touch screen, if the user performs a quick tap.This can be used to attach element specific event listeners." + ], + "params": { + "fxn": "Function|Boolean: function to be fired when mouse is clicked over the element. if false is passed instead, the previously firing function will no longer fire." + } + }, + "mouseMoved": { + "description": [ + "The .mouseMoved() function is called once every time a mouse moves over the element. This can be used to attach an element specific event listener." + ], + "params": { + "fxn": "Function|Boolean: function to be fired when a mouse moves over the element. if false is passed instead, the previously firing function will no longer fire." + } + }, + "mouseOver": { + "description": [ + "The .mouseOver() function is called once after every time a mouse moves onto the element. This can be used to attach an element specific event listener." + ], + "params": { + "fxn": "Function|Boolean: function to be fired when a mouse moves onto the element. if false is passed instead, the previously firing function will no longer fire." + } + }, + "mouseOut": { + "description": [ + "The .mouseOut() function is called once after every time a mouse moves off the element. This can be used to attach an element specific event listener." + ], + "params": { + "fxn": "Function|Boolean: function to be fired when a mouse moves off of an element. if false is passed instead, the previously firing function will no longer fire." + } + }, + "touchStarted": { + "description": [ + "The .touchStarted() function is called once after every time a touch is registered. This can be used to attach element specific event listeners." + ], + "params": { + "fxn": "Function|Boolean: function to be fired when a touch starts over the element. if false is passed instead, the previously firing function will no longer fire." + } + }, + "touchMoved": { + "description": [ + "The .touchMoved() function is called once after every time a touch move is registered. This can be used to attach element specific event listeners." + ], + "params": { + "fxn": "Function|Boolean: function to be fired when a touch moves over the element. if false is passed instead, the previously firing function will no longer fire." + } + }, + "touchEnded": { + "description": [ + "The .touchEnded() function is called once after every time a touch is registered. This can be used to attach element specific event listeners." + ], + "params": { + "fxn": "Function|Boolean: function to be fired when a touch ends over the element. if false is passed instead, the previously firing function will no longer fire." + } + }, + "dragOver": { + "description": [ + "The .dragOver() function is called once after every time a file is dragged over the element. This can be used to attach an element specific event listener." + ], + "params": { + "fxn": "Function|Boolean: function to be fired when a file is dragged over the element. if false is passed instead, the previously firing function will no longer fire." + } + }, + "dragLeave": { + "description": [ + "The .dragLeave() function is called once after every time a dragged file leaves the element area. This can be used to attach an element specific event listener." + ], + "params": { + "fxn": "Function|Boolean: function to be fired when a file is dragged off the element. if false is passed instead, the previously firing function will no longer fire." + } + }, + "addClass": { + "description": [ + "Adds specified class to the element." + ], + "params": { + "class": "String: name of class to add" + } + }, + "removeClass": { + "description": [ + "Removes specified class from the element." + ], + "params": { + "class": "String: name of class to remove" + } + }, + "hasClass": { + "description": [ + "Checks if specified class already set to element" + ], + "returns": "Boolean: a boolean value if element has specified class", + "params": { + "c": "String: class name of class to check" + } + }, + "toggleClass": { + "description": [ + "Toggles element class" + ], + "params": { + "c": "String: class name to toggle" + } + }, + "child": { + "description": [ + "Attaches the element as a child to the parent specified. Accepts either a string ID, DOM node, or p5.Element. If no argument is specified, an array of children DOM nodes is returned." + ], + "returns": "Node[]: an array of child nodes", + "params": { + "child": "String|p5.Element: (Optional) the ID, DOM node, or p5.Element to add to the current element" + } + }, + "center": { + "description": [ + "Centers a p5 Element either vertically, horizontally, or both, relative to its parent or according to the body if the Element has no parent. If no argument is passed the Element is aligned both vertically and horizontally." + ], + "params": { + "align": "String: (Optional) passing 'vertical', 'horizontal' aligns element accordingly" + } + }, + "html": { + "description": [ + "If an argument is given, sets the inner HTML of the element, replacing any existing html. If true is included as a second argument, html is appended instead of replacing existing html. If no arguments are given, returns the inner HTML of the element." + ], + "returns": "String: the inner HTML of the element", + "params": { + "html": "String: (Optional) the HTML to be placed inside the element", + "append": "Boolean: (Optional) whether to append HTML to existing" + } + }, + "position": { + "description": [ + "Sets the position of the element. If no position type argument is given, the position will be relative to (0, 0) of the window. Essentially, this sets position:absolute and left and top properties of style. If an optional third argument specifying position type is given, the x and y coordinates will be interpreted based on the positioning scheme. If no arguments given, the function returns the x and y position of the element. found documentation on how to be more specific with object type https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc" + ], + "returns": "Object: object of form { x: 0, y: 0 } containing the position of the element in an object", + "params": { + "x": "Number: (Optional) x-position relative to upper left of window (optional)", + "y": "Number: (Optional) y-position relative to upper left of window (optional)", + "positionType": "String: it can be static, fixed, relative, sticky, initial or inherit (optional)" + } + }, + "style": { + "description": [ + "Sets the given style (css) property (1st arg) of the element with the given value (2nd arg). If a single argument is given, .style() returns the value of the given property; however, if the single argument is given in css syntax ('text-align:center'), .style() sets the css appropriately." + ], + "returns": "String: value of property", + "params": { + "property": "String: property to be set", + "value": "String|p5.Color: value to assign to property" + } + }, + "attribute": { + "description": [ + "Adds a new attribute or changes the value of an existing attribute on the specified element. If no value is specified, returns the value of the given attribute, or null if attribute is not set." + ], + "returns": "String: value of attribute", + "params": { + "attr": "String: attribute to set", + "value": "String: value to assign to attribute" + } + }, + "removeAttribute": { + "description": [ + "Removes an attribute on the specified element." + ], + "params": { + "attr": "String: attribute to remove" + } + }, + "value": { + "description": [ + "Either returns the value of the element if no arguments given, or sets the value of the element." + ], + "returns": "String|Number: value of the element", + "params": { + "value": "String|Number" + } + }, + "show": { + "description": [ + "Shows the current element. Essentially, setting display:block for the style." + ] + }, + "hide": { + "description": [ + "Hides the current element. Essentially, setting display:none for the style." + ] + }, + "size": { + "description": [ + "Sets the width and height of the element. AUTO can be used to only adjust one dimension at a time. If no arguments are given, it returns the width and height of the element in an object. In case of elements which need to be loaded, such as images, it is recommended to call the function after the element has finished loading." + ], + "returns": "Object: the width and height of the element in an object", + "params": { + "w": "Number|Constant: width of the element, either AUTO, or a number", + "h": "Number|Constant: (Optional) height of the element, either AUTO, or a number" + } + }, + "remove": { + "description": [ + "Removes the element, stops all media streams, and deregisters all listeners." + ] + }, + "drop": { + "description": [ + "Registers a callback that gets called every time a file that is dropped on the element has been loaded. p5 will load every dropped file into memory and pass it as a p5.File object to the callback. Multiple files dropped at the same time will result in multiple calls to the callback.", + "You can optionally pass a second callback which will be registered to the raw drop event. The callback will thus be provided the original DragEvent. Dropping multiple files at the same time will trigger the second callback once per drop, whereas the first callback will trigger for each loaded file." + ], + "params": { + "callback": "Function: callback to receive loaded file, called for each file dropped.", + "fxn": "Function: (Optional) callback triggered once when files are dropped with the drop event." + } + } }, "p5.Graphics": { "description": [ @@ -1593,12 +4041,16 @@ "renderer": "Constant: the renderer to use, either P2D or WEBGL", "pInst": "P5: (Optional) pointer to p5 instance" }, - "reset": [ - "Resets certain values such as those modified by functions in the Transform category and in the Lights category that are not automatically reset with graphics buffer objects. Calling this in draw() will copy the behavior of the standard canvas." - ], - "remove": [ - "Removes a Graphics object from the page and frees any resources associated with it." - ] + "reset": { + "description": [ + "Resets certain values such as those modified by functions in the Transform category and in the Lights category that are not automatically reset with graphics buffer objects. Calling this in draw() will copy the behavior of the standard canvas." + ] + }, + "remove": { + "description": [ + "Removes a Graphics object from the page and frees any resources associated with it." + ] + } }, "p5.Renderer": { "description": [ @@ -1611,51 +4063,102 @@ } }, "JSON": { - "stringify": [ - "From the MDN entry: The JSON.stringify() method converts a JavaScript object or value to a JSON string." - ] + "stringify": { + "description": [ + "From the MDN entry: The JSON.stringify() method converts a JavaScript object or value to a JSON string." + ], + "params": { + "object": "Object: :Javascript object that you would like to convert to JSON" + } + } }, "console": { - "log": [ - "Prints a message to your browser's web console. When using p5, you can use print and console.log interchangeably.", - "The console is opened differently depending on which browser you are using. Here are links on how to open the console in Firefox , Chrome, Edge, and Safari. With the online p5 editor the console is embedded directly in the page underneath the code editor.", - "From the MDN entry: The Console method log() outputs a message to the web console. The message may be a single string (with optional substitution values), or it may be any one or more JavaScript objects." - ] + "log": { + "description": [ + "Prints a message to your browser's web console. When using p5, you can use print and console.log interchangeably.", + "The console is opened differently depending on which browser you are using. Here are links on how to open the console in Firefox , Chrome, Edge, and Safari. With the online p5 editor the console is embedded directly in the page underneath the code editor.", + "From the MDN entry: The Console method log() outputs a message to the web console. The message may be a single string (with optional substitution values), or it may be any one or more JavaScript objects." + ], + "params": { + "message": "String|Expression|Object: :Message that you would like to print to the console" + } + } }, "p5.TypedDict": { "description": [ "Base class for all p5.Dictionary types. Specifically typed Dictionary classes inherit from this class." ], - "size": [ - "Returns the number of key-value pairs currently stored in the Dictionary." - ], - "hasKey": [ - "Returns true if the given key exists in the Dictionary, otherwise returns false." - ], - "get": [ - "Returns the value stored at the given key." - ], - "set": [ - "Updates the value associated with the given key in case it already exists in the Dictionary. Otherwise a new key-value pair is added." - ], - "create": [ - "Creates a new key-value pair in the Dictionary." - ], - "clear": [ - "Removes all previously stored key-value pairs from the Dictionary." - ], - "remove": [ - "Removes the key-value pair stored at the given key from the Dictionary." - ], - "print": [ - "Logs the set of items currently stored in the Dictionary to the console." - ], - "saveTable": [ - "Converts the Dictionary into a CSV file for local download." - ], - "saveJSON": [ - "Converts the Dictionary into a JSON file for local download." - ] + "size": { + "description": [ + "Returns the number of key-value pairs currently stored in the Dictionary." + ], + "returns": "Integer: the number of key-value pairs in the Dictionary" + }, + "hasKey": { + "description": [ + "Returns true if the given key exists in the Dictionary, otherwise returns false." + ], + "returns": "Boolean: whether that key exists in Dictionary", + "params": { + "key": "Number|String: that you want to look up" + } + }, + "get": { + "description": [ + "Returns the value stored at the given key." + ], + "returns": "Number|String: the value stored at that key", + "params": { + "the": "Number|String: key you want to access" + } + }, + "set": { + "description": [ + "Updates the value associated with the given key in case it already exists in the Dictionary. Otherwise a new key-value pair is added." + ], + "params": { + "key": "Number|String", + "value": "Number|String" + } + }, + "create": { + "description": [ + "Creates a new key-value pair in the Dictionary." + ], + "params": { + "key": "Number|String", + "value": "Number|String", + "obj": "Object: key/value pair" + } + }, + "clear": { + "description": [ + "Removes all previously stored key-value pairs from the Dictionary." + ] + }, + "remove": { + "description": [ + "Removes the key-value pair stored at the given key from the Dictionary." + ], + "params": { + "key": "Number|String: for the pair to remove" + } + }, + "print": { + "description": [ + "Logs the set of items currently stored in the Dictionary to the console." + ] + }, + "saveTable": { + "description": [ + "Converts the Dictionary into a CSV file for local download." + ] + }, + "saveJSON": { + "description": [ + "Converts the Dictionary into a JSON file for local download." + ] + } }, "p5.StringDict": { "description": [ @@ -1666,30 +4169,66 @@ "description": [ "A simple Dictionary class for Numbers." ], - "add": [ - "Add the given number to the value currently stored at the given key. The sum then replaces the value previously stored in the Dictionary." - ], - "sub": [ - "Subtract the given number from the value currently stored at the given key. The difference then replaces the value previously stored in the Dictionary." - ], - "mult": [ - "Multiply the given number with the value currently stored at the given key. The product then replaces the value previously stored in the Dictionary." - ], - "div": [ - "Divide the given number with the value currently stored at the given key. The quotient then replaces the value previously stored in the Dictionary." - ], - "minValue": [ - "Return the lowest number currently stored in the Dictionary." - ], - "maxValue": [ - "Return the highest number currently stored in the Dictionary." - ], - "minKey": [ - "Return the lowest key currently used in the Dictionary." - ], - "maxKey": [ - "Return the highest key currently used in the Dictionary." - ] + "add": { + "description": [ + "Add the given number to the value currently stored at the given key. The sum then replaces the value previously stored in the Dictionary." + ], + "params": { + "Key": "Number: for the value you wish to add to", + "Number": "Number: to add to the value" + } + }, + "sub": { + "description": [ + "Subtract the given number from the value currently stored at the given key. The difference then replaces the value previously stored in the Dictionary." + ], + "params": { + "Key": "Number: for the value you wish to subtract from", + "Number": "Number: to subtract from the value" + } + }, + "mult": { + "description": [ + "Multiply the given number with the value currently stored at the given key. The product then replaces the value previously stored in the Dictionary." + ], + "params": { + "Key": "Number: for value you wish to multiply", + "Amount": "Number: to multiply the value by" + } + }, + "div": { + "description": [ + "Divide the given number with the value currently stored at the given key. The quotient then replaces the value previously stored in the Dictionary." + ], + "params": { + "Key": "Number: for value you wish to divide", + "Amount": "Number: to divide the value by" + } + }, + "minValue": { + "description": [ + "Return the lowest number currently stored in the Dictionary." + ], + "returns": "Number:" + }, + "maxValue": { + "description": [ + "Return the highest number currently stored in the Dictionary." + ], + "returns": "Number:" + }, + "minKey": { + "description": [ + "Return the lowest key currently used in the Dictionary." + ], + "returns": "Number:" + }, + "maxKey": { + "description": [ + "Return the highest key currently used in the Dictionary." + ], + "returns": "Number:" + } }, "p5.MediaElement": { "description": [ @@ -1698,66 +4237,139 @@ "params": { "elt": "String: DOM node that is wrapped" }, - "src": [ - "Path to the media element source." - ], - "play": [ - "Play an HTML5 media element." - ], - "stop": [ - "Stops an HTML5 media element (sets current time to zero)." - ], - "pause": [ - "Pauses an HTML5 media element." - ], - "loop": [ - "Set 'loop' to true for an HTML5 media element, and starts playing." - ], - "noLoop": [ - "Set 'loop' to false for an HTML5 media element. Element will stop when it reaches the end." - ], - "autoplay": [ - "Set HTML5 media element to autoplay or not. If no argument is specified, by default it will autoplay." - ], - "volume": [ - "Sets volume for this HTML5 media element. If no argument is given, returns the current volume." - ], - "speed": [ - "If no arguments are given, returns the current playback speed of the element. The speed parameter sets the speed where 2.0 will play the element twice as fast, 0.5 will play at half the speed, and -1 will play the element in normal speed in reverse.(Note that not all browsers support backward playback and even if they do, playback might not be smooth.)" - ], - "time": [ - "If no arguments are given, returns the current time of the element. If an argument is given the current time of the element is set to it." - ], - "duration": [ - "Returns the duration of the HTML5 media element." - ], - "onended": [ - "Schedule an event to be called when the audio or video element reaches the end. If the element is looping, this will not be called. The element is passed in as the argument to the onended callback." - ], - "connect": [ - "Send the audio output of this element to a specified audioNode or p5.sound object. If no element is provided, connects to p5's main output. That connection is established when this method is first called. All connections are removed by the .disconnect() method.", - "This method is meant to be used with the p5.sound.js addon library." - ], - "disconnect": [ - "Disconnect all Web Audio routing, including to main output. This is useful if you want to re-route the output through audio effects, for example." - ], - "showControls": [ - "Show the default MediaElement controls, as determined by the web browser." - ], - "hideControls": [ - "Hide the default mediaElement controls." - ], - "addCue": [ - "Schedule events to trigger every time a MediaElement (audio/video) reaches a playback cue point.", - "Accepts a callback function, a time (in seconds) at which to trigger the callback, and an optional parameter for the callback.", - "Time will be passed as the first parameter to the callback function, and param will be the second parameter." - ], - "removeCue": [ - "Remove a callback based on its ID. The ID is returned by the addCue method." - ], - "clearCues": [ - "Remove all of the callbacks that had originally been scheduled via the addCue method." - ] + "src": { + "description": [ + "Path to the media element source." + ], + "returns": "String: src" + }, + "play": { + "description": [ + "Play an HTML5 media element." + ] + }, + "stop": { + "description": [ + "Stops an HTML5 media element (sets current time to zero)." + ] + }, + "pause": { + "description": [ + "Pauses an HTML5 media element." + ] + }, + "loop": { + "description": [ + "Set 'loop' to true for an HTML5 media element, and starts playing." + ] + }, + "noLoop": { + "description": [ + "Set 'loop' to false for an HTML5 media element. Element will stop when it reaches the end." + ] + }, + "autoplay": { + "description": [ + "Set HTML5 media element to autoplay or not. If no argument is specified, by default it will autoplay." + ], + "params": { + "shouldAutoplay": "Boolean: whether the element should autoplay" + } + }, + "volume": { + "description": [ + "Sets volume for this HTML5 media element. If no argument is given, returns the current volume." + ], + "returns": "Number: current volume", + "params": { + "val": "Number: volume between 0.0 and 1.0" + } + }, + "speed": { + "description": [ + "If no arguments are given, returns the current playback speed of the element. The speed parameter sets the speed where 2.0 will play the element twice as fast, 0.5 will play at half the speed, and -1 will play the element in normal speed in reverse.(Note that not all browsers support backward playback and even if they do, playback might not be smooth.)" + ], + "returns": "Number: current playback speed of the element", + "params": { + "speed": "Number: speed multiplier for element playback" + } + }, + "time": { + "description": [ + "If no arguments are given, returns the current time of the element. If an argument is given the current time of the element is set to it." + ], + "returns": "Number: current time (in seconds)", + "params": { + "time": "Number: time to jump to (in seconds)" + } + }, + "duration": { + "description": [ + "Returns the duration of the HTML5 media element." + ], + "returns": "Number: duration" + }, + "onended": { + "description": [ + "Schedule an event to be called when the audio or video element reaches the end. If the element is looping, this will not be called. The element is passed in as the argument to the onended callback." + ], + "params": { + "callback": "Function: function to call when the soundfile has ended. The media element will be passed in as the argument to the callback." + } + }, + "connect": { + "description": [ + "Send the audio output of this element to a specified audioNode or p5.sound object. If no element is provided, connects to p5's main output. That connection is established when this method is first called. All connections are removed by the .disconnect() method.", + "This method is meant to be used with the p5.sound.js addon library." + ], + "params": { + "audioNode": "AudioNode|Object: AudioNode from the Web Audio API, or an object from the p5.sound library" + } + }, + "disconnect": { + "description": [ + "Disconnect all Web Audio routing, including to main output. This is useful if you want to re-route the output through audio effects, for example." + ] + }, + "showControls": { + "description": [ + "Show the default MediaElement controls, as determined by the web browser." + ] + }, + "hideControls": { + "description": [ + "Hide the default mediaElement controls." + ] + }, + "addCue": { + "description": [ + "Schedule events to trigger every time a MediaElement (audio/video) reaches a playback cue point.", + "Accepts a callback function, a time (in seconds) at which to trigger the callback, and an optional parameter for the callback.", + "Time will be passed as the first parameter to the callback function, and param will be the second parameter." + ], + "returns": "Number: id ID of this cue, useful for removeCue(id)", + "params": { + "time": "Number: Time in seconds, relative to this media element's playback. For example, to trigger an event every time playback reaches two seconds, pass in the number 2. This will be passed as the first parameter to the callback function.", + "callback": "Function: Name of a function that will be called at the given time. The callback will receive time and (optionally) param as its two parameters.", + "value": "Object: (Optional) An object to be passed as the second parameter to the callback function." + } + }, + "removeCue": { + "description": [ + "Remove a callback based on its ID. The ID is returned by the addCue method." + ], + "params": { + "id": "Number: ID of the cue, as returned by addCue" + } + }, + "clearCues": { + "description": [ + "Remove all of the callbacks that had originally been scheduled via the addCue method." + ], + "params": { + "id": "Number: ID of the cue, as returned by addCue" + } + } }, "p5.File": { "description": [ @@ -1766,24 +4378,36 @@ "params": { "file": "File: File that is wrapped" }, - "file": [ - "Underlying File object. All normal File methods can be called on this." - ], - "type": [ - "File type (image, text, etc.)" - ], - "subtype": [ - "File subtype (usually the file extension jpg, png, xml, etc.)" - ], - "name": [ - "File name" - ], - "size": [ - "File size" - ], - "data": [ - "URL string containing either image data, the text contents of the file or a parsed object if file is JSON and p5.XML if XML" - ] + "file": { + "description": [ + "Underlying File object. All normal File methods can be called on this." + ] + }, + "type": { + "description": [ + "File type (image, text, etc.)" + ] + }, + "subtype": { + "description": [ + "File subtype (usually the file extension jpg, png, xml, etc.)" + ] + }, + "name": { + "description": [ + "File name" + ] + }, + "size": { + "description": [ + "File size" + ] + }, + "data": { + "description": [ + "URL string containing either image data, the text contents of the file or a parsed object if file is JSON and p5.XML if XML" + ] + } }, "p5.Image": { "description": [ @@ -1796,97 +4420,216 @@ "width": "Number", "height": "Number" }, - "width": [ - "Image width." - ], - "height": [ - "Image height." - ], - "pixels": [ - "Array containing the values for all the pixels in the display window. These values are numbers. This array is the size (include an appropriate factor for pixelDensity) of the display window x4, representing the R, G, B, A values in order for each pixel, moving from left to right across each row, then down each column. Retina and other high density displays may have more pixels (by a factor of pixelDensity^2). For example, if the image is 100x100 pixels, there will be 40,000. With pixelDensity = 2, there will be 160,000. The first four values (indices 0-3) in the array will be the R, G, B, A values of the pixel at (0, 0). The second four values (indices 4-7) will contain the R, G, B, A values of the pixel at (1, 0). More generally, to set values for a pixel at (x, y): 
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;  } }
", - "Before accessing this array, the data must loaded with the loadPixels() function. After the array data has been modified, the updatePixels() function must be run to update the changes." - ], - "loadPixels": [ - "Loads the pixels data for this image into the [pixels] attribute." - ], - "updatePixels": [ - "Updates the backing canvas for this image with the contents of the [pixels] array.", - "If this image is an animated GIF then the pixels will be updated in the frame that is currently displayed." - ], - "get": [ - "Get a region of pixels from an image.", - "If no params are passed, the whole image is returned. If x and y are the only params passed a single pixel is extracted. If all params are passed a rectangle region is extracted and a p5.Image is returned." - ], - "set": [ - "Set the color of a single pixel or write an image into this p5.Image.", - "Note that for a large number of pixels this will be slower than directly manipulating the pixels array and then calling updatePixels()." - ], - "resize": [ - "Resize the image to a new width and height. To make the image scale proportionally, use 0 as the value for the wide or high parameter. For instance, to make the width of an image 150 pixels, and change the height using the same proportion, use resize(150, 0)." - ], - "copy": [ - "Copies a region of pixels from one image to another. If no srcImage is specified this is used as the source. If the source and destination regions aren't the same size, it will automatically resize source pixels to fit the specified target region." - ], - "mask": [ - "Masks part of an image from displaying by loading another image and using its alpha channel as an alpha channel for this image. Masks are cumulative, one applied to an image object, they cannot be removed." - ], - "filter": [ - "Applies an image filter to a p5.Image", - "THRESHOLD Converts the image to black and white pixels depending if they are above or below the threshold defined by the level parameter. The parameter must be between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.", - "GRAY Converts any colors in the image to grayscale equivalents. No parameter is used.", - "OPAQUE Sets the alpha channel to entirely opaque. No parameter is used.", - "INVERT Sets each pixel to its inverse value. No parameter is used.", - "POSTERIZE Limits each channel of the image to the number of colors specified as the parameter. The parameter can be set to values between 2 and 255, but results are most noticeable in the lower ranges.", - "BLUR Executes a Gaussian blur with the level parameter specifying the extent of the blurring. If no parameter is used, the blur is equivalent to Gaussian blur of radius 1. Larger values increase the blur.", - "ERODE Reduces the light areas. No parameter is used.", - "DILATE Increases the light areas. No parameter is used.", - "filter() does not work in WEBGL mode. A similar effect can be achieved in WEBGL mode using custom shaders. Adam Ferriss has written a selection of shader examples that contains many of the effects present in the filter examples." - ], - "blend": [ - "Copies a region of pixels from one image to another, using a specified blend mode to do the operation." - ], - "save": [ - "Saves the image to a file and force the browser to download it. Accepts two strings for filename and file extension Supports png (default), jpg, and gif Note that the file will only be downloaded as an animated GIF if the p5.Image was loaded from a GIF file." - ], - "reset": [ - "Starts an animated GIF over at the beginning state." - ], - "getCurrentFrame": [ - "Gets the index for the frame that is currently visible in an animated GIF." - ], - "setFrame": [ - "Sets the index of the frame that is currently visible in an animated GIF" - ], - "numFrames": [ - "Returns the number of frames in an animated GIF" - ], - "play": [ - "Plays an animated GIF that was paused with pause()" - ], - "pause": [ - "Pauses an animated GIF." - ], - "delay": [ - "Changes the delay between frames in an animated GIF. There is an optional second parameter that indicates an index for a specific frame that should have its delay modified. If no index is given, all frames will have the new delay." - ] + "width": { + "description": [ + "Image width." + ] + }, + "height": { + "description": [ + "Image height." + ] + }, + "pixels": { + "description": [ + "Array containing the values for all the pixels in the display window. These values are numbers. This array is the size (include an appropriate factor for pixelDensity) of the display window x4, representing the R, G, B, A values in order for each pixel, moving from left to right across each row, then down each column. Retina and other high density displays may have more pixels (by a factor of pixelDensity^2). For example, if the image is 100x100 pixels, there will be 40,000. With pixelDensity = 2, there will be 160,000. The first four values (indices 0-3) in the array will be the R, G, B, A values of the pixel at (0, 0). The second four values (indices 4-7) will contain the R, G, B, A values of the pixel at (1, 0). More generally, to set values for a pixel at (x, y): 
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;  } }
", + "Before accessing this array, the data must loaded with the loadPixels() function. After the array data has been modified, the updatePixels() function must be run to update the changes." + ] + }, + "loadPixels": { + "description": [ + "Loads the pixels data for this image into the [pixels] attribute." + ] + }, + "updatePixels": { + "description": [ + "Updates the backing canvas for this image with the contents of the [pixels] array.", + "If this image is an animated GIF then the pixels will be updated in the frame that is currently displayed." + ], + "params": { + "x": "Integer: x-offset of the target update area for the underlying canvas", + "y": "Integer: y-offset of the target update area for the underlying canvas", + "w": "Integer: height of the target update area for the underlying canvas", + "h": "Integer: height of the target update area for the underlying canvas" + } + }, + "get": { + "description": [ + "Get a region of pixels from an image.", + "If no params are passed, the whole image is returned. If x and y are the only params passed a single pixel is extracted. If all params are passed a rectangle region is extracted and a p5.Image is returned." + ], + "returns": "p5.Image: the rectangle p5.Image", + "params": { + "x": "Number: x-coordinate of the pixel", + "y": "Number: y-coordinate of the pixel", + "w": "Number: width", + "h": "Number: height" + } + }, + "set": { + "description": [ + "Set the color of a single pixel or write an image into this p5.Image.", + "Note that for a large number of pixels this will be slower than directly manipulating the pixels array and then calling updatePixels()." + ], + "params": { + "x": "Number: x-coordinate of the pixel", + "y": "Number: y-coordinate of the pixel", + "a": "Number|Number[]|Object: grayscale value | pixel array | a p5.Color | image to copy" + } + }, + "resize": { + "description": [ + "Resize the image to a new width and height. To make the image scale proportionally, use 0 as the value for the wide or high parameter. For instance, to make the width of an image 150 pixels, and change the height using the same proportion, use resize(150, 0)." + ], + "params": { + "width": "Number: the resized image width", + "height": "Number: the resized image height" + } + }, + "copy": { + "description": [ + "Copies a region of pixels from one image to another. If no srcImage is specified this is used as the source. If the source and destination regions aren't the same size, it will automatically resize source pixels to fit the specified target region." + ], + "params": { + "srcImage": "p5.Image|p5.Element: source image", + "sx": "Integer: X coordinate of the source's upper left corner", + "sy": "Integer: Y coordinate of the source's upper left corner", + "sw": "Integer: source image width", + "sh": "Integer: source image height", + "dx": "Integer: X coordinate of the destination's upper left corner", + "dy": "Integer: Y coordinate of the destination's upper left corner", + "dw": "Integer: destination image width", + "dh": "Integer: destination image height" + } + }, + "mask": { + "description": [ + "Masks part of an image from displaying by loading another image and using its alpha channel as an alpha channel for this image. Masks are cumulative, one applied to an image object, they cannot be removed." + ], + "params": { + "srcImage": "p5.Image: source image" + } + }, + "filter": { + "description": [ + "Applies an image filter to a p5.Image", + "THRESHOLD Converts the image to black and white pixels depending if they are above or below the threshold defined by the level parameter. The parameter must be between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.", + "GRAY Converts any colors in the image to grayscale equivalents. No parameter is used.", + "OPAQUE Sets the alpha channel to entirely opaque. No parameter is used.", + "INVERT Sets each pixel to its inverse value. No parameter is used.", + "POSTERIZE Limits each channel of the image to the number of colors specified as the parameter. The parameter can be set to values between 2 and 255, but results are most noticeable in the lower ranges.", + "BLUR Executes a Gaussian blur with the level parameter specifying the extent of the blurring. If no parameter is used, the blur is equivalent to Gaussian blur of radius 1. Larger values increase the blur.", + "ERODE Reduces the light areas. No parameter is used.", + "DILATE Increases the light areas. No parameter is used.", + "filter() does not work in WEBGL mode. A similar effect can be achieved in WEBGL mode using custom shaders. Adam Ferriss has written a selection of shader examples that contains many of the effects present in the filter examples." + ], + "params": { + "filterType": "Constant: either THRESHOLD, GRAY, OPAQUE, INVERT, POSTERIZE, ERODE, DILATE or BLUR. See Filters.js for docs on each available filter", + "filterParam": "Number: (Optional) an optional parameter unique to each filter, see above" + } + }, + "blend": { + "description": [ + "Copies a region of pixels from one image to another, using a specified blend mode to do the operation." + ], + "params": { + "srcImage": "p5.Image: source image", + "sx": "Integer: X coordinate of the source's upper left corner", + "sy": "Integer: Y coordinate of the source's upper left corner", + "sw": "Integer: source image width", + "sh": "Integer: source image height", + "dx": "Integer: X coordinate of the destination's upper left corner", + "dy": "Integer: Y coordinate of the destination's upper left corner", + "dw": "Integer: destination image width", + "dh": "Integer: destination image height", + "blendMode": "Constant: the blend mode. either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD or NORMAL. Available blend modes are: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/" + } + }, + "save": { + "description": [ + "Saves the image to a file and force the browser to download it. Accepts two strings for filename and file extension Supports png (default), jpg, and gif Note that the file will only be downloaded as an animated GIF if the p5.Image was loaded from a GIF file." + ], + "params": { + "filename": "String: give your file a name", + "extension": "String: 'png' or 'jpg'" + } + }, + "reset": { + "description": [ + "Starts an animated GIF over at the beginning state." + ] + }, + "getCurrentFrame": { + "description": [ + "Gets the index for the frame that is currently visible in an animated GIF." + ], + "returns": "Number: The index for the currently displaying frame in animated GIF" + }, + "setFrame": { + "description": [ + "Sets the index of the frame that is currently visible in an animated GIF" + ], + "params": { + "index": "Number: the index for the frame that should be displayed" + } + }, + "numFrames": { + "description": [ + "Returns the number of frames in an animated GIF" + ], + "returns": "Number:" + }, + "play": { + "description": [ + "Plays an animated GIF that was paused with pause()" + ] + }, + "pause": { + "description": [ + "Pauses an animated GIF." + ] + }, + "delay": { + "description": [ + "Changes the delay between frames in an animated GIF. There is an optional second parameter that indicates an index for a specific frame that should have its delay modified. If no index is given, all frames will have the new delay." + ], + "params": { + "d": "Number: the amount in milliseconds to delay between switching frames", + "index": "Number: (Optional) the index of the frame that should have the new delay value {optional}" + } + } }, "p5.PrintWriter": { "params": { "filename": "String", "extension": "String (Optional)" }, - "write": [ - "Writes data to the PrintWriter stream" - ], - "print": [ - "Writes data to the PrintWriter stream, and adds a new line at the end" - ], - "clear": [ - "Clears the data already written to the PrintWriter object" - ], - "close": [ - "Closes the PrintWriter" - ] + "write": { + "description": [ + "Writes data to the PrintWriter stream" + ], + "params": { + "data": "Array: all data to be written by the PrintWriter" + } + }, + "print": { + "description": [ + "Writes data to the PrintWriter stream, and adds a new line at the end" + ], + "params": { + "data": "Array: all data to be printed by the PrintWriter" + } + }, + "clear": { + "description": [ + "Clears the data already written to the PrintWriter object" + ] + }, + "close": { + "description": [ + "Closes the PrintWriter" + ] + } }, "p5.Table": { "description": [ @@ -1895,86 +4638,224 @@ "params": { "rows": "p5.TableRow[]: (Optional) An array of p5.TableRow objects" }, - "columns": [ - "An array containing the names of the columns in the table, if the \"header\" the table is loaded with the \"header\" parameter." - ], - "rows": [ - "An array containing the p5.TableRow objects that make up the rows of the table. The same result as calling getRows()" - ], - "addRow": [ - "Use addRow() to add a new row of data to a p5.Table object. By default, an empty row is created. Typically, you would store a reference to the new row in a TableRow object (see newRow in the example above), and then set individual values using set().", - "If a p5.TableRow object is included as a parameter, then that row is duplicated and added to the table." - ], - "removeRow": [ - "Removes a row from the table object." - ], - "getRow": [ - "Returns a reference to the specified p5.TableRow. The reference can then be used to get and set values of the selected row." - ], - "getRows": [ - "Gets all rows from the table. Returns an array of p5.TableRows." - ], - "findRow": [ - "Finds the first row in the Table that contains the value provided, and returns a reference to that row. Even if multiple rows are possible matches, only the first matching row is returned. The column to search may be specified by either its ID or title." - ], - "findRows": [ - "Finds the rows in the Table that contain the value provided, and returns references to those rows. Returns an Array, so for must be used to iterate through all the rows, as shown in the example above. The column to search may be specified by either its ID or title." - ], - "matchRow": [ - "Finds the first row in the Table that matches the regular expression provided, and returns a reference to that row. Even if multiple rows are possible matches, only the first matching row is returned. The column to search may be specified by either its ID or title." - ], - "matchRows": [ - "Finds the rows in the Table that match the regular expression provided, and returns references to those rows. Returns an array, so for must be used to iterate through all the rows, as shown in the example. The column to search may be specified by either its ID or title." - ], - "getColumn": [ - "Retrieves all values in the specified column, and returns them as an array. The column may be specified by either its ID or title." - ], - "clearRows": [ - "Removes all rows from a Table. While all rows are removed, columns and column titles are maintained." - ], - "addColumn": [ - "Use addColumn() to add a new column to a Table object. Typically, you will want to specify a title, so the column may be easily referenced later by name. (If no title is specified, the new column's title will be null.)" - ], - "getColumnCount": [ - "Returns the total number of columns in a Table." - ], - "getRowCount": [ - "Returns the total number of rows in a Table." - ], - "removeTokens": [ - "Removes any of the specified characters (or \"tokens\").", - "If no column is specified, then the values in all columns and rows are processed. A specific column may be referenced by either its ID or title." - ], - "trim": [ - "Trims leading and trailing whitespace, such as spaces and tabs, from String table values. If no column is specified, then the values in all columns and rows are trimmed. A specific column may be referenced by either its ID or title." - ], - "removeColumn": [ - "Use removeColumn() to remove an existing column from a Table object. The column to be removed may be identified by either its title (a String) or its index value (an int). removeColumn(0) would remove the first column, removeColumn(1) would remove the second column, and so on." - ], - "set": [ - "Stores a value in the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title." - ], - "setNum": [ - "Stores a Float value in the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title." - ], - "setString": [ - "Stores a String value in the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title." - ], - "get": [ - "Retrieves a value from the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title." - ], - "getNum": [ - "Retrieves a Float value from the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title." - ], - "getString": [ - "Retrieves a String value from the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title." - ], - "getObject": [ - "Retrieves all table data and returns as an object. If a column name is passed in, each row object will be stored with that attribute as its title." - ], - "getArray": [ - "Retrieves all table data and returns it as a multidimensional array." - ] + "columns": { + "description": [ + "An array containing the names of the columns in the table, if the \"header\" the table is loaded with the \"header\" parameter." + ] + }, + "rows": { + "description": [ + "An array containing the p5.TableRow objects that make up the rows of the table. The same result as calling getRows()" + ] + }, + "addRow": { + "description": [ + "Use addRow() to add a new row of data to a p5.Table object. By default, an empty row is created. Typically, you would store a reference to the new row in a TableRow object (see newRow in the example above), and then set individual values using set().", + "If a p5.TableRow object is included as a parameter, then that row is duplicated and added to the table." + ], + "returns": "p5.TableRow: the row that was added", + "params": { + "row": "p5.TableRow: (Optional) row to be added to the table" + } + }, + "removeRow": { + "description": [ + "Removes a row from the table object." + ], + "params": { + "id": "Integer: ID number of the row to remove" + } + }, + "getRow": { + "description": [ + "Returns a reference to the specified p5.TableRow. The reference can then be used to get and set values of the selected row." + ], + "returns": "p5.TableRow: p5.TableRow object", + "params": { + "rowID": "Integer: ID number of the row to get" + } + }, + "getRows": { + "description": [ + "Gets all rows from the table. Returns an array of p5.TableRows." + ], + "returns": "p5.TableRow[]: Array of p5.TableRows" + }, + "findRow": { + "description": [ + "Finds the first row in the Table that contains the value provided, and returns a reference to that row. Even if multiple rows are possible matches, only the first matching row is returned. The column to search may be specified by either its ID or title." + ], + "returns": "p5.TableRow:", + "params": { + "value": "String: The value to match", + "column": "Integer|String: ID number or title of the column to search" + } + }, + "findRows": { + "description": [ + "Finds the rows in the Table that contain the value provided, and returns references to those rows. Returns an Array, so for must be used to iterate through all the rows, as shown in the example above. The column to search may be specified by either its ID or title." + ], + "returns": "p5.TableRow[]: An Array of TableRow objects", + "params": { + "value": "String: The value to match", + "column": "Integer|String: ID number or title of the column to search" + } + }, + "matchRow": { + "description": [ + "Finds the first row in the Table that matches the regular expression provided, and returns a reference to that row. Even if multiple rows are possible matches, only the first matching row is returned. The column to search may be specified by either its ID or title." + ], + "returns": "p5.TableRow: TableRow object", + "params": { + "regexp": "String|RegExp: The regular expression to match", + "column": "String|Integer: The column ID (number) or title (string)" + } + }, + "matchRows": { + "description": [ + "Finds the rows in the Table that match the regular expression provided, and returns references to those rows. Returns an array, so for must be used to iterate through all the rows, as shown in the example. The column to search may be specified by either its ID or title." + ], + "returns": "p5.TableRow[]: An Array of TableRow objects", + "params": { + "regexp": "String: The regular expression to match", + "column": "String|Integer: (Optional) The column ID (number) or title (string)" + } + }, + "getColumn": { + "description": [ + "Retrieves all values in the specified column, and returns them as an array. The column may be specified by either its ID or title." + ], + "returns": "Array: Array of column values", + "params": { + "column": "String|Number: String or Number of the column to return" + } + }, + "clearRows": { + "description": [ + "Removes all rows from a Table. While all rows are removed, columns and column titles are maintained." + ] + }, + "addColumn": { + "description": [ + "Use addColumn() to add a new column to a Table object. Typically, you will want to specify a title, so the column may be easily referenced later by name. (If no title is specified, the new column's title will be null.)" + ], + "params": { + "title": "String: (Optional) title of the given column" + } + }, + "getColumnCount": { + "description": [ + "Returns the total number of columns in a Table." + ], + "returns": "Integer: Number of columns in this table" + }, + "getRowCount": { + "description": [ + "Returns the total number of rows in a Table." + ], + "returns": "Integer: Number of rows in this table" + }, + "removeTokens": { + "description": [ + "Removes any of the specified characters (or \"tokens\").", + "If no column is specified, then the values in all columns and rows are processed. A specific column may be referenced by either its ID or title." + ], + "params": { + "chars": "String: String listing characters to be removed", + "column": "String|Integer: (Optional) Column ID (number) or name (string)" + } + }, + "trim": { + "description": [ + "Trims leading and trailing whitespace, such as spaces and tabs, from String table values. If no column is specified, then the values in all columns and rows are trimmed. A specific column may be referenced by either its ID or title." + ], + "params": { + "column": "String|Integer: (Optional) Column ID (number) or name (string)" + } + }, + "removeColumn": { + "description": [ + "Use removeColumn() to remove an existing column from a Table object. The column to be removed may be identified by either its title (a String) or its index value (an int). removeColumn(0) would remove the first column, removeColumn(1) would remove the second column, and so on." + ], + "params": { + "column": "String|Integer: columnName (string) or ID (number)" + } + }, + "set": { + "description": [ + "Stores a value in the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title." + ], + "params": { + "row": "Integer: row ID", + "column": "String|Integer: column ID (Number) or title (String)", + "value": "String|Number: value to assign" + } + }, + "setNum": { + "description": [ + "Stores a Float value in the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title." + ], + "params": { + "row": "Integer: row ID", + "column": "String|Integer: column ID (Number) or title (String)", + "value": "Number: value to assign" + } + }, + "setString": { + "description": [ + "Stores a String value in the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title." + ], + "params": { + "row": "Integer: row ID", + "column": "String|Integer: column ID (Number) or title (String)", + "value": "String: value to assign" + } + }, + "get": { + "description": [ + "Retrieves a value from the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title." + ], + "returns": "String|Number:", + "params": { + "row": "Integer: row ID", + "column": "String|Integer: columnName (string) or ID (number)" + } + }, + "getNum": { + "description": [ + "Retrieves a Float value from the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title." + ], + "returns": "Number:", + "params": { + "row": "Integer: row ID", + "column": "String|Integer: columnName (string) or ID (number)" + } + }, + "getString": { + "description": [ + "Retrieves a String value from the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title." + ], + "returns": "String:", + "params": { + "row": "Integer: row ID", + "column": "String|Integer: columnName (string) or ID (number)" + } + }, + "getObject": { + "description": [ + "Retrieves all table data and returns as an object. If a column name is passed in, each row object will be stored with that attribute as its title." + ], + "returns": "Object:", + "params": { + "headerColumn": "String: (Optional) Name of the column which should be used to title each row object (optional)" + } + }, + "getArray": { + "description": [ + "Retrieves all table data and returns it as a multidimensional array." + ], + "returns": "Array:" + } }, "p5.TableRow": { "description": [ @@ -1985,83 +4866,204 @@ "str": "String: (Optional) optional: populate the row with a string of values, separated by the separator", "separator": "String: (Optional) comma separated values (csv) by default" }, - "set": [ - "Stores a value in the TableRow's specified column. The column may be specified by either its ID or title." - ], - "setNum": [ - "Stores a Float value in the TableRow's specified column. The column may be specified by either its ID or title." - ], - "setString": [ - "Stores a String value in the TableRow's specified column. The column may be specified by either its ID or title." - ], - "get": [ - "Retrieves a value from the TableRow's specified column. The column may be specified by either its ID or title." - ], - "getNum": [ - "Retrieves a Float value from the TableRow's specified column. The column may be specified by either its ID or title." - ], - "getString": [ - "Retrieves an String value from the TableRow's specified column. The column may be specified by either its ID or title." - ] + "set": { + "description": [ + "Stores a value in the TableRow's specified column. The column may be specified by either its ID or title." + ], + "params": { + "column": "String|Integer: Column ID (Number) or Title (String)", + "value": "String|Number: The value to be stored" + } + }, + "setNum": { + "description": [ + "Stores a Float value in the TableRow's specified column. The column may be specified by either its ID or title." + ], + "params": { + "column": "String|Integer: Column ID (Number) or Title (String)", + "value": "Number|String: The value to be stored as a Float" + } + }, + "setString": { + "description": [ + "Stores a String value in the TableRow's specified column. The column may be specified by either its ID or title." + ], + "params": { + "column": "String|Integer: Column ID (Number) or Title (String)", + "value": "String|Number|Boolean|Object: The value to be stored as a String" + } + }, + "get": { + "description": [ + "Retrieves a value from the TableRow's specified column. The column may be specified by either its ID or title." + ], + "returns": "String|Number:", + "params": { + "column": "String|Integer: columnName (string) or ID (number)" + } + }, + "getNum": { + "description": [ + "Retrieves a Float value from the TableRow's specified column. The column may be specified by either its ID or title." + ], + "returns": "Number: Float Floating point number", + "params": { + "column": "String|Integer: columnName (string) or ID (number)" + } + }, + "getString": { + "description": [ + "Retrieves an String value from the TableRow's specified column. The column may be specified by either its ID or title." + ], + "returns": "String: String", + "params": { + "column": "String|Integer: columnName (string) or ID (number)" + } + } }, "p5.XML": { "description": [ "XML is a representation of an XML object, able to parse XML code. Use loadXML() to load external XML files and create XML objects." ], - "getParent": [ - "Gets a copy of the element's parent. Returns the parent as another p5.XML object." - ], - "getName": [ - "Gets the element's full name, which is returned as a String." - ], - "setName": [ - "Sets the element's name, which is specified as a String." - ], - "hasChildren": [ - "Checks whether or not the element has any children, and returns the result as a boolean." - ], - "listChildren": [ - "Get the names of all of the element's children, and returns the names as an array of Strings. This is the same as looping through and calling getName() on each child element individually." - ], - "getChildren": [ - "Returns all of the element's children as an array of p5.XML objects. When the name parameter is specified, then it will return all children that match that name." - ], - "getChild": [ - "Returns the first of the element's children that matches the name parameter or the child of the given index.It returns undefined if no matching child is found." - ], - "addChild": [ - "Appends a new child to the element. The child can be specified with either a String, which will be used as the new tag's name, or as a reference to an existing p5.XML object. A reference to the newly created child is returned as an p5.XML object." - ], - "removeChild": [ - "Removes the element specified by name or index." - ], - "getAttributeCount": [ - "Counts the specified element's number of attributes, returned as an Number." - ], - "listAttributes": [ - "Gets all of the specified element's attributes, and returns them as an array of Strings." - ], - "hasAttribute": [ - "Checks whether or not an element has the specified attribute." - ], - "getNum": [ - "Returns an attribute value of the element as an Number. If the defaultValue parameter is specified and the attribute doesn't exist, then defaultValue is returned. If no defaultValue is specified and the attribute doesn't exist, the value 0 is returned." - ], - "getString": [ - "Returns an attribute value of the element as an String. If the defaultValue parameter is specified and the attribute doesn't exist, then defaultValue is returned. If no defaultValue is specified and the attribute doesn't exist, null is returned." - ], - "setAttribute": [ - "Sets the content of an element's attribute. The first parameter specifies the attribute name, while the second specifies the new content." - ], - "getContent": [ - "Returns the content of an element. If there is no such content, defaultValue is returned if specified, otherwise null is returned." - ], - "setContent": [ - "Sets the element's content." - ], - "serialize": [ - "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." - ] + "getParent": { + "description": [ + "Gets a copy of the element's parent. Returns the parent as another p5.XML object." + ], + "returns": "p5.XML: element parent" + }, + "getName": { + "description": [ + "Gets the element's full name, which is returned as a String." + ], + "returns": "String: the name of the node" + }, + "setName": { + "description": [ + "Sets the element's name, which is specified as a String." + ], + "params": { + "the": "String: new name of the node" + } + }, + "hasChildren": { + "description": [ + "Checks whether or not the element has any children, and returns the result as a boolean." + ], + "returns": "Boolean:" + }, + "listChildren": { + "description": [ + "Get the names of all of the element's children, and returns the names as an array of Strings. This is the same as looping through and calling getName() on each child element individually." + ], + "returns": "String[]: names of the children of the element" + }, + "getChildren": { + "description": [ + "Returns all of the element's children as an array of p5.XML objects. When the name parameter is specified, then it will return all children that match that name." + ], + "returns": "p5.XML[]: children of the element", + "params": { + "name": "String: (Optional) element name" + } + }, + "getChild": { + "description": [ + "Returns the first of the element's children that matches the name parameter or the child of the given index.It returns undefined if no matching child is found." + ], + "returns": "p5.XML:", + "params": { + "name": "String|Integer: element name or index" + } + }, + "addChild": { + "description": [ + "Appends a new child to the element. The child can be specified with either a String, which will be used as the new tag's name, or as a reference to an existing p5.XML object. A reference to the newly created child is returned as an p5.XML object." + ], + "params": { + "node": "p5.XML: a p5.XML Object which will be the child to be added" + } + }, + "removeChild": { + "description": [ + "Removes the element specified by name or index." + ], + "params": { + "name": "String|Integer: element name or index" + } + }, + "getAttributeCount": { + "description": [ + "Counts the specified element's number of attributes, returned as an Number." + ], + "returns": "Integer:" + }, + "listAttributes": { + "description": [ + "Gets all of the specified element's attributes, and returns them as an array of Strings." + ], + "returns": "String[]: an array of strings containing the names of attributes" + }, + "hasAttribute": { + "description": [ + "Checks whether or not an element has the specified attribute." + ], + "returns": "Boolean: true if attribute found else false", + "params": { + "the": "String: attribute to be checked" + } + }, + "getNum": { + "description": [ + "Returns an attribute value of the element as an Number. If the defaultValue parameter is specified and the attribute doesn't exist, then defaultValue is returned. If no defaultValue is specified and the attribute doesn't exist, the value 0 is returned." + ], + "returns": "Number:", + "params": { + "name": "String: the non-null full name of the attribute", + "defaultValue": "Number: (Optional) the default value of the attribute" + } + }, + "getString": { + "description": [ + "Returns an attribute value of the element as an String. If the defaultValue parameter is specified and the attribute doesn't exist, then defaultValue is returned. If no defaultValue is specified and the attribute doesn't exist, null is returned." + ], + "returns": "String:", + "params": { + "name": "String: the non-null full name of the attribute", + "defaultValue": "Number: (Optional) the default value of the attribute" + } + }, + "setAttribute": { + "description": [ + "Sets the content of an element's attribute. The first parameter specifies the attribute name, while the second specifies the new content." + ], + "params": { + "name": "String: the full name of the attribute", + "value": "Number|String|Boolean: the value of the attribute" + } + }, + "getContent": { + "description": [ + "Returns the content of an element. If there is no such content, defaultValue is returned if specified, otherwise null is returned." + ], + "returns": "String:", + "params": { + "defaultValue": "String: (Optional) value returned if no content is found" + } + }, + "setContent": { + "description": [ + "Sets the element's content." + ], + "params": { + "text": "String: the new content" + } + }, + "serialize": { + "description": [ + "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." + ], + "returns": "String: Serialized string of the element" + } }, "p5.Vector": { "description": [ @@ -2074,99 +5076,301 @@ "y": "Number: (Optional) y component of the vector", "z": "Number: (Optional) z component of the vector" }, - "x": [ - "The x component of the vector" - ], - "y": [ - "The y component of the vector" - ], - "z": [ - "The z component of the vector" - ], - "toString": [ - "Returns a string representation of a vector v by calling String(v) or v.toString(). This method is useful for logging vectors in the console." - ], - "set": [ - "Sets the x, y, and z component of the vector using two or three separate variables, the data from a p5.Vector, or the values from a float array." - ], - "copy": [ - "Gets a copy of the vector, returns a p5.Vector object." - ], - "add": [ - "Adds x, y, and z components to a vector, adds one vector to another, or adds two independent vectors together. The version of the method that adds two vectors together is a static method and returns a p5.Vector, the others acts directly on the vector. Additionally, you may provide arguments to this function as an array. See the examples for more context." - ], - "rem": [ - "Gives remainder of a vector when it is divided by another vector. See examples for more context." - ], - "sub": [ - "Subtracts x, y, and z components from a vector, subtracts one vector from another, or subtracts two independent vectors. The version of the method that subtracts two vectors is a static method and returns a p5.Vector, the other acts directly on the vector. Additionally, you may provide arguments to this function as an array. See the examples for more context." - ], - "mult": [ - "Multiplies the vector by a scalar, multiplies the x, y, and z components from a vector, or multiplies the x, y, and z components of two independent vectors. When multiplying a vector by a scalar, the x, y, and z components of the vector are all multiplied by the scalar. When multiplying a vector by a vector, the x, y, z components of both vectors are multiplied by each other (for example, with two vectors a and b: a.x * b.x, a.y * b.y, a.z * b.z). The static version of this method creates a new p5.Vector while the non static version acts on the vector directly. Additionally, you may provide arguments to this function as an array. See the examples for more context." - ], - "div": [ - "Divides the vector by a scalar, divides a vector by the x, y, and z arguments, or divides the x, y, and z components of two vectors against each other. When dividing a vector by a scalar, the x, y, and z components of the vector are all divided by the scalar. When dividing a vector by a vector, the x, y, z components of the source vector are treated as the dividend, and the x, y, z components of the argument is treated as the divisor (for example with two vectors a and b: a.x / b.x, a.y / b.y, a.z / b.z). The static version of this method creates a new p5.Vector while the non static version acts on the vector directly. Additionally, you may provide arguments to this function as an array. See the examples for more context." - ], - "mag": [ - "Calculates the magnitude (length) of the vector and returns the result as a float (this is simply the equation sqrt(x*x + y*y + z*z).)" - ], - "magSq": [ - "Calculates the squared magnitude of the vector and returns the result as a float (this is simply the equation (x*x + y*y + z*z).) Faster if the real length is not required in the case of comparing vectors, etc." - ], - "dot": [ - "Calculates the dot product of two vectors. The version of the method that computes the dot product of two independent vectors is a static method. See the examples for more context." - ], - "cross": [ - "Calculates and returns a vector composed of the cross product between two vectors. Both the static and non static methods return a new p5.Vector. See the examples for more context." - ], - "dist": [ - "Calculates the Euclidean distance between two points (considering a point as a vector object). If you are looking to calculate distance with 2 points see dist()" - ], - "normalize": [ - "Normalize the vector to length 1 (make it a unit vector)." - ], - "limit": [ - "Limit the magnitude of this vector to the value used for the max parameter." - ], - "setMag": [ - "Set the magnitude of this vector to the value used for the len parameter." - ], - "heading": [ - "Calculate the angle of rotation for this vector(only 2D vectors). p5.Vectors created using createVector() will take the current angleMode into consideration, and give the angle in radians or degree accordingly." - ], - "setHeading": [ - "Rotate the vector to a specific angle (only 2D vectors), magnitude remains the same" - ], - "rotate": [ - "Rotate the vector by an angle (only 2D vectors), magnitude remains the same" - ], - "angleBetween": [ - "Calculates and returns the angle between two vectors. This function will take the current angleMode into consideration, and give the angle in radians or degree accordingly." - ], - "lerp": [ - "Linear interpolate the vector to another vector" - ], - "reflect": [ - "Reflect the incoming vector about a normal to a line in 2D, or about a normal to a plane in 3D This method acts on the vector directly" - ], - "array": [ - "Return a representation of this vector as a float array. This is only for temporary use. If used in any other fashion, the contents should be copied by using the p5.Vector.copy() method to copy into your own array." - ], - "equals": [ - "Equality check against a p5.Vector" - ], - "fromAngle": [ - "Make a new 2D vector from an angle" - ], - "fromAngles": [ - "Make a new 3D vector from a pair of ISO spherical angles" - ], - "random2D": [ - "Make a new 2D unit vector from a random angle" - ], - "random3D": [ - "Make a new random 3D unit vector." - ] + "x": { + "description": [ + "The x component of the vector" + ] + }, + "y": { + "description": [ + "The y component of the vector" + ] + }, + "z": { + "description": [ + "The z component of the vector" + ] + }, + "toString": { + "description": [ + "Returns a string representation of a vector v by calling String(v) or v.toString(). This method is useful for logging vectors in the console." + ], + "returns": "String:" + }, + "set": { + "description": [ + "Sets the x, y, and z component of the vector using two or three separate variables, the data from a p5.Vector, or the values from a float array." + ], + "params": { + "x": "Number: (Optional) the x component of the vector", + "y": "Number: (Optional) the y component of the vector", + "z": "Number: (Optional) the z component of the vector", + "value": "p5.Vector|Number[]: the vector to set" + } + }, + "copy": { + "description": [ + "Gets a copy of the vector, returns a p5.Vector object." + ], + "returns": "p5.Vector: the copy of the p5.Vector object" + }, + "add": { + "description": [ + "Adds x, y, and z components to a vector, adds one vector to another, or adds two independent vectors together. The version of the method that adds two vectors together is a static method and returns a p5.Vector, the others acts directly on the vector. Additionally, you may provide arguments to this function as an array. See the examples for more context." + ], + "params": { + "x": "Number: the x component of the vector to be added", + "y": "Number: (Optional) the y component of the vector to be added", + "z": "Number: (Optional) the z component of the vector to be added", + "value": "p5.Vector|Number[]: the vector to add", + "v1": "p5.Vector: a p5.Vector to add", + "v2": "p5.Vector: a p5.Vector to add", + "target": "p5.Vector: (Optional) the vector to receive the result" + } + }, + "rem": { + "description": [ + "Gives remainder of a vector when it is divided by another vector. See examples for more context." + ], + "params": { + "x": "Number: the x component of divisor vector", + "y": "Number: the y component of divisor vector", + "z": "Number: the z component of divisor vector", + "value": "p5.Vector | Number[]: divisor vector", + "v1": "p5.Vector: dividend p5.Vector", + "v2": "p5.Vector: divisor p5.Vector" + } + }, + "sub": { + "description": [ + "Subtracts x, y, and z components from a vector, subtracts one vector from another, or subtracts two independent vectors. The version of the method that subtracts two vectors is a static method and returns a p5.Vector, the other acts directly on the vector. Additionally, you may provide arguments to this function as an array. See the examples for more context." + ], + "params": { + "x": "Number: the x component of the vector to subtract", + "y": "Number: (Optional) the y component of the vector to subtract", + "z": "Number: (Optional) the z component of the vector to subtract", + "value": "p5.Vector|Number[]: the vector to subtract", + "v1": "p5.Vector: a p5.Vector to subtract from", + "v2": "p5.Vector: a p5.Vector to subtract", + "target": "p5.Vector: (Optional) the vector to receive the result" + } + }, + "mult": { + "description": [ + "Multiplies the vector by a scalar, multiplies the x, y, and z components from a vector, or multiplies the x, y, and z components of two independent vectors. When multiplying a vector by a scalar, the x, y, and z components of the vector are all multiplied by the scalar. When multiplying a vector by a vector, the x, y, z components of both vectors are multiplied by each other (for example, with two vectors a and b: a.x * b.x, a.y * b.y, a.z * b.z). The static version of this method creates a new p5.Vector while the non static version acts on the vector directly. Additionally, you may provide arguments to this function as an array. See the examples for more context." + ], + "params": { + "n": "Number: The number to multiply with the vector", + "x": "Number: The number to multiply with the x component of the vector", + "y": "Number: The number to multiply with the y component of the vector", + "z": "Number: (Optional) The number to multiply with the z component of the vector", + "arr": "Number[]: The array to multiply with the components of the vector", + "v": "p5.Vector: The vector to multiply with the components of the original vector", + "target": "p5.Vector: (Optional) the vector to receive the result", + "v0": "p5.Vector", + "v1": "p5.Vector" + } + }, + "div": { + "description": [ + "Divides the vector by a scalar, divides a vector by the x, y, and z arguments, or divides the x, y, and z components of two vectors against each other. When dividing a vector by a scalar, the x, y, and z components of the vector are all divided by the scalar. When dividing a vector by a vector, the x, y, z components of the source vector are treated as the dividend, and the x, y, z components of the argument is treated as the divisor (for example with two vectors a and b: a.x / b.x, a.y / b.y, a.z / b.z). The static version of this method creates a new p5.Vector while the non static version acts on the vector directly. Additionally, you may provide arguments to this function as an array. See the examples for more context." + ], + "params": { + "n": "Number: The number to divide the vector by", + "x": "Number: The number to divide with the x component of the vector", + "y": "Number: The number to divide with the y component of the vector", + "z": "Number: (Optional) The number to divide with the z component of the vector", + "arr": "Number[]: The array to divide the components of the vector by", + "v": "p5.Vector: The vector to divide the components of the original vector by", + "target": "p5.Vector: (Optional) the vector to receive the result", + "v0": "p5.Vector", + "v1": "p5.Vector" + } + }, + "mag": { + "description": [ + "Calculates the magnitude (length) of the vector and returns the result as a float (this is simply the equation sqrt(x*x + y*y + z*z).)" + ], + "returns": "Number: magnitude of the vector", + "params": { + "vecT": "p5.Vector: the vector to return the magnitude of" + } + }, + "magSq": { + "description": [ + "Calculates the squared magnitude of the vector and returns the result as a float (this is simply the equation (x*x + y*y + z*z).) Faster if the real length is not required in the case of comparing vectors, etc." + ], + "returns": "Number: squared magnitude of the vector" + }, + "dot": { + "description": [ + "Calculates the dot product of two vectors. The version of the method that computes the dot product of two independent vectors is a static method. See the examples for more context." + ], + "returns": "Number: the dot product", + "params": { + "x": "Number: x component of the vector", + "y": "Number: (Optional) y component of the vector", + "z": "Number: (Optional) z component of the vector", + "value": "p5.Vector: value component of the vector or a p5.Vector", + "v1": "p5.Vector: the first p5.Vector", + "v2": "p5.Vector: the second p5.Vector" + } + }, + "cross": { + "description": [ + "Calculates and returns a vector composed of the cross product between two vectors. Both the static and non static methods return a new p5.Vector. See the examples for more context." + ], + "returns": "p5.Vector: p5.Vector composed of cross product", + "params": { + "v": "p5.Vector: p5.Vector to be crossed", + "v1": "p5.Vector: the first p5.Vector", + "v2": "p5.Vector: the second p5.Vector" + } + }, + "dist": { + "description": [ + "Calculates the Euclidean distance between two points (considering a point as a vector object). If you are looking to calculate distance with 2 points see dist()" + ], + "returns": "Number: the distance", + "params": { + "v": "p5.Vector: the x, y, and z coordinates of a p5.Vector", + "v1": "p5.Vector: the first p5.Vector", + "v2": "p5.Vector: the second p5.Vector" + } + }, + "normalize": { + "description": [ + "Normalize the vector to length 1 (make it a unit vector)." + ], + "returns": "p5.Vector: normalized p5.Vector", + "params": { + "v": "p5.Vector: the vector to normalize", + "target": "p5.Vector: (Optional) the vector to receive the result" + } + }, + "limit": { + "description": [ + "Limit the magnitude of this vector to the value used for the max parameter." + ], + "params": { + "max": "Number: the maximum magnitude for the vector" + } + }, + "setMag": { + "description": [ + "Set the magnitude of this vector to the value used for the len parameter." + ], + "params": { + "len": "Number: the new length for this vector" + } + }, + "heading": { + "description": [ + "Calculate the angle of rotation for this vector(only 2D vectors). p5.Vectors created using createVector() will take the current angleMode into consideration, and give the angle in radians or degree accordingly." + ], + "returns": "Number: the angle of rotation" + }, + "setHeading": { + "description": [ + "Rotate the vector to a specific angle (only 2D vectors), magnitude remains the same" + ], + "params": { + "angle": "Number: the angle of rotation" + } + }, + "rotate": { + "description": [ + "Rotate the vector by an angle (only 2D vectors), magnitude remains the same" + ], + "params": { + "angle": "Number: the angle of rotation", + "v": "p5.Vector", + "target": "p5.Vector: (Optional) the vector to receive the result" + } + }, + "angleBetween": { + "description": [ + "Calculates and returns the angle between two vectors. This function will take the current angleMode into consideration, and give the angle in radians or degree accordingly." + ], + "returns": "Number: the angle between (in radians)", + "params": { + "value": "p5.Vector: the x, y, and z components of a p5.Vector" + } + }, + "lerp": { + "description": [ + "Linear interpolate the vector to another vector" + ], + "params": { + "x": "Number: the x component", + "y": "Number: the y component", + "z": "Number: the z component", + "amt": "Number: the amount of interpolation; some value between 0.0 (old vector) and 1.0 (new vector). 0.9 is very near the new vector. 0.5 is halfway in between.", + "v": "p5.Vector: the p5.Vector to lerp to", + "v1": "p5.Vector", + "v2": "p5.Vector", + "target": "p5.Vector: (Optional) the vector to receive the result" + } + }, + "reflect": { + "description": [ + "Reflect the incoming vector about a normal to a line in 2D, or about a normal to a plane in 3D This method acts on the vector directly" + ], + "params": { + "surfaceNormal": "p5.Vector: the p5.Vector to reflect about, will be normalized by this method" + } + }, + "array": { + "description": [ + "Return a representation of this vector as a float array. This is only for temporary use. If used in any other fashion, the contents should be copied by using the p5.Vector.copy() method to copy into your own array." + ], + "returns": "Number[]: an Array with the 3 values" + }, + "equals": { + "description": [ + "Equality check against a p5.Vector" + ], + "returns": "Boolean: whether the vectors are equals", + "params": { + "x": "Number: (Optional) the x component of the vector", + "y": "Number: (Optional) the y component of the vector", + "z": "Number: (Optional) the z component of the vector", + "value": "p5.Vector|Array: the vector to compare" + } + }, + "fromAngle": { + "description": [ + "Make a new 2D vector from an angle" + ], + "returns": "p5.Vector: the new p5.Vector object", + "params": { + "angle": "Number: the desired angle, in radians (unaffected by angleMode)", + "length": "Number: (Optional) the length of the new vector (defaults to 1)" + } + }, + "fromAngles": { + "description": [ + "Make a new 3D vector from a pair of ISO spherical angles" + ], + "returns": "p5.Vector: the new p5.Vector object", + "params": { + "theta": "Number: the polar angle, in radians (zero is up)", + "phi": "Number: the azimuthal angle, in radians (zero is out of the screen)", + "length": "Number: (Optional) the length of the new vector (defaults to 1)" + } + }, + "random2D": { + "description": [ + "Make a new 2D unit vector from a random angle" + ], + "returns": "p5.Vector: the new p5.Vector object" + }, + "random3D": { + "description": [ + "Make a new random 3D unit vector." + ], + "returns": "p5.Vector: the new p5.Vector object" + } }, "p5.Font": { "description": [ @@ -2175,15 +5379,37 @@ "params": { "pInst": "P5: (Optional) pointer to p5 instance" }, - "font": [ - "Underlying opentype font implementation" - ], - "textBounds": [ - "Returns a tight bounding box for the given text string using this font" - ], - "textToPoints": [ - "Computes an array of points following the path for specified text" - ] + "font": { + "description": [ + "Underlying opentype font implementation" + ] + }, + "textBounds": { + "description": [ + "Returns a tight bounding box for the given text string using this font" + ], + "returns": "Object: a rectangle object with properties: x, y, w, h", + "params": { + "line": "String: a line of text", + "x": "Number: x-position", + "y": "Number: y-position", + "fontSize": "Number: (Optional) font size to use (optional) Default is 12.", + "options": "Object: (Optional) opentype options (optional) opentype fonts contains alignment and baseline options. Default is 'LEFT' and 'alphabetic'" + } + }, + "textToPoints": { + "description": [ + "Computes an array of points following the path for specified text" + ], + "returns": "Array: an array of points, each with x, y, alpha (the path angle)", + "params": { + "txt": "String: a line of text", + "x": "Number: x-position", + "y": "Number: y-position", + "fontSize": "Number: font size to use (optional)", + "options": "Object: (Optional) an (optional) object that can contain: sampleFactor - the ratio of path-length to number of samples (default=.1); higher values yield more points and are therefore more precise simplifyThreshold - if set to a non-zero value, collinear points will be be removed from the polygon; the value represents the threshold angle to use when determining whether two edges are collinear" + } + } }, "p5.Camera": { "description": [ @@ -2195,60 +5421,117 @@ "params": { "rendererGL": "RendererGL: instance of WebGL renderer" }, - "eyeX": [ - "camera position value on x axis" - ], - "eyeY": [ - "camera position value on y axis" - ], - "eyeZ": [ - "camera position value on z axis" - ], - "centerX": [ - "x coordinate representing center of the sketch" - ], - "centerY": [ - "y coordinate representing center of the sketch" - ], - "centerZ": [ - "z coordinate representing center of the sketch" - ], - "upX": [ - "x component of direction 'up' from camera" - ], - "upY": [ - "y component of direction 'up' from camera" - ], - "upZ": [ - "z component of direction 'up' from camera" - ], - "perspective": [ - "Sets a perspective projection. Accepts the same parameters as the global perspective(). More information on this function can be found there." - ], - "ortho": [ - "Sets an orthographic projection. Accepts the same parameters as the global ortho(). More information on this function can be found there." - ], - "frustum": [ - "Sets the camera's frustum. Accepts the same parameters as the global frustum(). More information on this function can be found there." - ], - "pan": [ - "Panning rotates the camera view to the left and right." - ], - "tilt": [ - "Tilting rotates the camera view up and down." - ], - "lookAt": [ - "Reorients the camera to look at a position in world space." - ], - "camera": [ - "Sets the camera's position and orientation. Accepts the same parameters as the global camera(). More information on this function can be found there." - ], - "move": [ - "Move camera along its local axes while maintaining current camera orientation." - ], - "setPosition": [ - "Set camera position in world-space while maintaining current camera orientation." - ] + "eyeX": { + "description": [ + "camera position value on x axis" + ] + }, + "eyeY": { + "description": [ + "camera position value on y axis" + ] + }, + "eyeZ": { + "description": [ + "camera position value on z axis" + ] + }, + "centerX": { + "description": [ + "x coordinate representing center of the sketch" + ] + }, + "centerY": { + "description": [ + "y coordinate representing center of the sketch" + ] + }, + "centerZ": { + "description": [ + "z coordinate representing center of the sketch" + ] + }, + "upX": { + "description": [ + "x component of direction 'up' from camera" + ] + }, + "upY": { + "description": [ + "y component of direction 'up' from camera" + ] + }, + "upZ": { + "description": [ + "z component of direction 'up' from camera" + ] + }, + "perspective": { + "description": [ + "Sets a perspective projection. Accepts the same parameters as the global perspective(). More information on this function can be found there." + ] + }, + "ortho": { + "description": [ + "Sets an orthographic projection. Accepts the same parameters as the global ortho(). More information on this function can be found there." + ] + }, + "frustum": { + "description": [ + "Sets the camera's frustum. Accepts the same parameters as the global frustum(). More information on this function can be found there." + ] + }, + "pan": { + "description": [ + "Panning rotates the camera view to the left and right." + ], + "params": { + "angle": "Number: amount to rotate camera in current angleMode units. Greater than 0 values rotate counterclockwise (to the left)." + } + }, + "tilt": { + "description": [ + "Tilting rotates the camera view up and down." + ], + "params": { + "angle": "Number: amount to rotate camera in current angleMode units. Greater than 0 values rotate counterclockwise (to the left)." + } + }, + "lookAt": { + "description": [ + "Reorients the camera to look at a position in world space." + ], + "params": { + "x": "Number: x position of a point in world space", + "y": "Number: y position of a point in world space", + "z": "Number: z position of a point in world space" + } + }, + "camera": { + "description": [ + "Sets the camera's position and orientation. Accepts the same parameters as the global camera(). More information on this function can be found there." + ] + }, + "move": { + "description": [ + "Move camera along its local axes while maintaining current camera orientation." + ], + "params": { + "x": "Number: amount to move along camera's left-right axis", + "y": "Number: amount to move along camera's up-down axis", + "z": "Number: amount to move along camera's forward-backward axis" + } + }, + "setPosition": { + "description": [ + "Set camera position in world-space while maintaining current camera orientation." + ], + "params": { + "x": "Number: x position of a point in world space", + "y": "Number: y position of a point in world space", + "z": "Number: z position of a point in world space" + } + } }, "p5.Geometry": { "description": [ @@ -2259,21 +5542,31 @@ "detailY": "Integer: (Optional) number of vertices on horizontal surface", "callback": "Function: (Optional) function to call upon object instantiation." }, - "computeFaces": [ - "computes faces for geometry objects based on the vertices." - ], - "computeNormals": [ - "computes smooth normals per vertex as an average of each face." - ], - "averageNormals": [ - "Averages the vertex normals. Used in curved surfaces" - ], - "averagePoleNormals": [ - "Averages pole normals. Used in spherical primitives" - ], - "normalize": [ - "Modifies all vertices to be centered within the range -100 to 100." - ] + "computeFaces": { + "description": [ + "computes faces for geometry objects based on the vertices." + ] + }, + "computeNormals": { + "description": [ + "computes smooth normals per vertex as an average of each face." + ] + }, + "averageNormals": { + "description": [ + "Averages the vertex normals. Used in curved surfaces" + ] + }, + "averagePoleNormals": { + "description": [ + "Averages pole normals. Used in spherical primitives" + ] + }, + "normalize": { + "description": [ + "Modifies all vertices to be centered within the range -100 to 100." + ] + } }, "p5.Shader": { "description": [ @@ -2284,9 +5577,15 @@ "vertSrc": "String: source code for the vertex shader (as a string)", "fragSrc": "String: source code for the fragment shader (as a string)" }, - "setUniform": [ - "Wrapper around gl.uniform functions. As we store uniform info in the shader we can use that to do type checking on the supplied data and call the appropriate function." - ] + "setUniform": { + "description": [ + "Wrapper around gl.uniform functions. As we store uniform info in the shader we can use that to do type checking on the supplied data and call the appropriate function." + ], + "params": { + "uniformName": "String: the name of the uniform in the shader program", + "data": "Object|Number|Boolean|Number[]: the data to be associated with that uniform; type varies (could be a single numerical value, array, matrix, or texture / sampler reference)" + } + } }, "p5.sound": {}, "p5.SoundFile": { @@ -2302,107 +5601,253 @@ "errorCallback": "Function: (Optional) Name of a function to call if file fails to load. This function will receive an error or XMLHttpRequest object with information about what went wrong.", "whileLoadingCallback": "Function: (Optional) Name of a function to call while file is loading. That function will receive progress of the request to load the sound file (between 0 and 1) as its first parameter. This progress does not account for the additional time needed to decode the audio data." }, - "isLoaded": [ - "Returns true if the sound file finished loading successfully." - ], - "play": [ - "Play the p5.SoundFile" - ], - "playMode": [ - "p5.SoundFile has two play modes: restart and sustain. Play Mode determines what happens to a p5.SoundFile if it is triggered while in the middle of playback. In sustain mode, playback will continue simultaneous to the new playback. In restart mode, play() will stop playback and start over. With untilDone, a sound will play only if it's not already playing. Sustain is the default mode." - ], - "pause": [ - "Pauses a file that is currently playing. If the file is not playing, then nothing will happen.", - "After pausing, .play() will resume from the paused position. If p5.SoundFile had been set to loop before it was paused, it will continue to loop after it is unpaused with .play()." - ], - "loop": [ - "Loop the p5.SoundFile. Accepts optional parameters to set the playback rate, playback volume, loopStart, loopEnd." - ], - "setLoop": [ - "Set a p5.SoundFile's looping flag to true or false. If the sound is currently playing, this change will take effect when it reaches the end of the current playback." - ], - "isLooping": [ - "Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not." - ], - "isPlaying": [ - "Returns true if a p5.SoundFile is playing, false if not (i.e. paused or stopped)." - ], - "isPaused": [ - "Returns true if a p5.SoundFile is paused, false if not (i.e. playing or stopped)." - ], - "stop": [ - "Stop soundfile playback." - ], - "pan": [ - "Set the stereo panning of a p5.sound object to a floating point number between -1.0 (left) and 1.0 (right). Default is 0.0 (center)." - ], - "getPan": [ - "Returns the current stereo pan position (-1.0 to 1.0)" - ], - "rate": [ - "Set the playback rate of a sound file. Will change the speed and the pitch. Values less than zero will reverse the audio buffer." - ], - "setVolume": [ - "Multiply the output volume (amplitude) of a sound file between 0.0 (silence) and 1.0 (full volume). 1.0 is the maximum amplitude of a digital sound, so multiplying by greater than 1.0 may cause digital distortion. To fade, provide a rampTime parameter. For more complex fades, see the Envelope class.", - "Alternately, you can pass in a signal source such as an oscillator to modulate the amplitude with an audio signal." - ], - "duration": [ - "Returns the duration of a sound file in seconds." - ], - "currentTime": [ - "Return the current position of the p5.SoundFile playhead, in seconds. Time is relative to the normal buffer direction, so if reverseBuffer has been called, currentTime will count backwards." - ], - "jump": [ - "Move the playhead of a soundfile that is currently playing to a new position and a new duration, in seconds. If none are given, will reset the file to play entire duration from start to finish. To set the position of a soundfile that is not currently playing, use the play or loop methods." - ], - "channels": [ - "Return the number of channels in a sound file. For example, Mono = 1, Stereo = 2." - ], - "sampleRate": [ - "Return the sample rate of the sound file." - ], - "frames": [ - "Return the number of samples in a sound file. Equal to sampleRate * duration." - ], - "getPeaks": [ - "Returns an array of amplitude peaks in a p5.SoundFile that can be used to draw a static waveform. Scans through the p5.SoundFile's audio buffer to find the greatest amplitudes. Accepts one parameter, 'length', which determines size of the array. Larger arrays result in more precise waveform visualizations.", - "Inspired by Wavesurfer.js." - ], - "reverseBuffer": [ - "Reverses the p5.SoundFile's buffer source. Playback must be handled separately (see example)." - ], - "onended": [ - "Schedule an event to be called when the soundfile reaches the end of a buffer. If the soundfile is playing through once, this will be called when it ends. If it is looping, it will be called when stop is called." - ], - "connect": [ - "Connects the output of a p5sound object to input of another p5.sound object. For example, you may connect a p5.SoundFile to an FFT or an Effect. If no parameter is given, it will connect to the main output. Most p5sound objects connect to the master output when they are created." - ], - "disconnect": [ - "Disconnects the output of this p5sound object." - ], - "setPath": [ - "Reset the source for this SoundFile to a new path (URL)." - ], - "setBuffer": [ - "Replace the current Audio Buffer with a new Buffer." - ], - "addCue": [ - "Schedule events to trigger every time a MediaElement (audio/video) reaches a playback cue point.", - "Accepts a callback function, a time (in seconds) at which to trigger the callback, and an optional parameter for the callback.", - "Time will be passed as the first parameter to the callback function, and param will be the second parameter." - ], - "removeCue": [ - "Remove a callback based on its ID. The ID is returned by the addCue method." - ], - "clearCues": [ - "Remove all of the callbacks that had originally been scheduled via the addCue method." - ], - "save": [ - "Save a p5.SoundFile as a .wav file. The browser will prompt the user to download the file to their device. To upload a file to a server, see getBlob" - ], - "getBlob": [ - "This method is useful for sending a SoundFile to a server. It returns the .wav-encoded audio data as a \"Blob\". A Blob is a file-like data object that can be uploaded to a server with an http request. We'll use the httpDo options object to send a POST request with some specific options: we encode the request as multipart/form-data, and attach the blob as one of the form values using FormData." - ] + "isLoaded": { + "description": [ + "Returns true if the sound file finished loading successfully." + ], + "returns": "Boolean:" + }, + "play": { + "description": [ + "Play the p5.SoundFile" + ], + "params": { + "startTime": "Number: (Optional) (optional) schedule playback to start (in seconds from now).", + "rate": "Number: (Optional) (optional) playback rate", + "amp": "Number: (Optional) (optional) amplitude (volume) of playback", + "cueStart": "Number: (Optional) (optional) cue start time in seconds", + "duration": "Number: (Optional) (optional) duration of playback in seconds" + } + }, + "playMode": { + "description": [ + "p5.SoundFile has two play modes: restart and sustain. Play Mode determines what happens to a p5.SoundFile if it is triggered while in the middle of playback. In sustain mode, playback will continue simultaneous to the new playback. In restart mode, play() will stop playback and start over. With untilDone, a sound will play only if it's not already playing. Sustain is the default mode." + ], + "params": { + "str": "String: 'restart' or 'sustain' or 'untilDone'" + } + }, + "pause": { + "description": [ + "Pauses a file that is currently playing. If the file is not playing, then nothing will happen.", + "After pausing, .play() will resume from the paused position. If p5.SoundFile had been set to loop before it was paused, it will continue to loop after it is unpaused with .play()." + ], + "params": { + "startTime": "Number: (Optional) (optional) schedule event to occur seconds from now" + } + }, + "loop": { + "description": [ + "Loop the p5.SoundFile. Accepts optional parameters to set the playback rate, playback volume, loopStart, loopEnd." + ], + "params": { + "startTime": "Number: (Optional) (optional) schedule event to occur seconds from now", + "rate": "Number: (Optional) (optional) playback rate", + "amp": "Number: (Optional) (optional) playback volume", + "cueLoopStart": "Number: (Optional) (optional) startTime in seconds", + "duration": "Number: (Optional) (optional) loop duration in seconds" + } + }, + "setLoop": { + "description": [ + "Set a p5.SoundFile's looping flag to true or false. If the sound is currently playing, this change will take effect when it reaches the end of the current playback." + ], + "params": { + "Boolean": "Boolean: set looping to true or false" + } + }, + "isLooping": { + "description": [ + "Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not." + ], + "returns": "Boolean:" + }, + "isPlaying": { + "description": [ + "Returns true if a p5.SoundFile is playing, false if not (i.e. paused or stopped)." + ], + "returns": "Boolean:" + }, + "isPaused": { + "description": [ + "Returns true if a p5.SoundFile is paused, false if not (i.e. playing or stopped)." + ], + "returns": "Boolean:" + }, + "stop": { + "description": [ + "Stop soundfile playback." + ], + "params": { + "startTime": "Number: (Optional) (optional) schedule event to occur in seconds from now" + } + }, + "pan": { + "description": [ + "Set the stereo panning of a p5.sound object to a floating point number between -1.0 (left) and 1.0 (right). Default is 0.0 (center)." + ], + "params": { + "panValue": "Number: (Optional) Set the stereo panner", + "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now" + } + }, + "getPan": { + "description": [ + "Returns the current stereo pan position (-1.0 to 1.0)" + ], + "returns": "Number: Returns the stereo pan setting of the Oscillator as a number between -1.0 (left) and 1.0 (right). 0.0 is center and default." + }, + "rate": { + "description": [ + "Set the playback rate of a sound file. Will change the speed and the pitch. Values less than zero will reverse the audio buffer." + ], + "params": { + "playbackRate": "Number: (Optional) Set the playback rate. 1.0 is normal, .5 is half-speed, 2.0 is twice as fast. Values less than zero play backwards." + } + }, + "setVolume": { + "description": [ + "Multiply the output volume (amplitude) of a sound file between 0.0 (silence) and 1.0 (full volume). 1.0 is the maximum amplitude of a digital sound, so multiplying by greater than 1.0 may cause digital distortion. To fade, provide a rampTime parameter. For more complex fades, see the Envelope class.", + "Alternately, you can pass in a signal source such as an oscillator to modulate the amplitude with an audio signal." + ], + "params": { + "volume": "Number|Object: Volume (amplitude) between 0.0 and 1.0 or modulating signal/oscillator", + "rampTime": "Number: (Optional) Fade for t seconds", + "timeFromNow": "Number: (Optional) Schedule this event to happen at t seconds in the future" + } + }, + "duration": { + "description": [ + "Returns the duration of a sound file in seconds." + ], + "returns": "Number: The duration of the soundFile in seconds." + }, + "currentTime": { + "description": [ + "Return the current position of the p5.SoundFile playhead, in seconds. Time is relative to the normal buffer direction, so if reverseBuffer has been called, currentTime will count backwards." + ], + "returns": "Number: currentTime of the soundFile in seconds." + }, + "jump": { + "description": [ + "Move the playhead of a soundfile that is currently playing to a new position and a new duration, in seconds. If none are given, will reset the file to play entire duration from start to finish. To set the position of a soundfile that is not currently playing, use the play or loop methods." + ], + "params": { + "cueTime": "Number: cueTime of the soundFile in seconds.", + "duration": "Number: duration in seconds." + } + }, + "channels": { + "description": [ + "Return the number of channels in a sound file. For example, Mono = 1, Stereo = 2." + ], + "returns": "Number: [channels]" + }, + "sampleRate": { + "description": [ + "Return the sample rate of the sound file." + ], + "returns": "Number: [sampleRate]" + }, + "frames": { + "description": [ + "Return the number of samples in a sound file. Equal to sampleRate * duration." + ], + "returns": "Number: [sampleCount]" + }, + "getPeaks": { + "description": [ + "Returns an array of amplitude peaks in a p5.SoundFile that can be used to draw a static waveform. Scans through the p5.SoundFile's audio buffer to find the greatest amplitudes. Accepts one parameter, 'length', which determines size of the array. Larger arrays result in more precise waveform visualizations.", + "Inspired by Wavesurfer.js." + ], + "returns": "Float32Array: Array of peaks.", + "params": { + "length": "Number: (Optional) length is the size of the returned array. Larger length results in more precision. Defaults to 5*width of the browser window." + } + }, + "reverseBuffer": { + "description": [ + "Reverses the p5.SoundFile's buffer source. Playback must be handled separately (see example)." + ] + }, + "onended": { + "description": [ + "Schedule an event to be called when the soundfile reaches the end of a buffer. If the soundfile is playing through once, this will be called when it ends. If it is looping, it will be called when stop is called." + ], + "params": { + "callback": "Function: function to call when the soundfile has ended." + } + }, + "connect": { + "description": [ + "Connects the output of a p5sound object to input of another p5.sound object. For example, you may connect a p5.SoundFile to an FFT or an Effect. If no parameter is given, it will connect to the main output. Most p5sound objects connect to the master output when they are created." + ], + "params": { + "object": "Object: (Optional) Audio object that accepts an input" + } + }, + "disconnect": { + "description": [ + "Disconnects the output of this p5sound object." + ] + }, + "setPath": { + "description": [ + "Reset the source for this SoundFile to a new path (URL)." + ], + "params": { + "path": "String: path to audio file", + "callback": "Function: Callback" + } + }, + "setBuffer": { + "description": [ + "Replace the current Audio Buffer with a new Buffer." + ], + "params": { + "buf": "Array: Array of Float32 Array(s). 2 Float32 Arrays will create a stereo source. 1 will create a mono source." + } + }, + "addCue": { + "description": [ + "Schedule events to trigger every time a MediaElement (audio/video) reaches a playback cue point.", + "Accepts a callback function, a time (in seconds) at which to trigger the callback, and an optional parameter for the callback.", + "Time will be passed as the first parameter to the callback function, and param will be the second parameter." + ], + "returns": "Number: id ID of this cue, useful for removeCue(id)", + "params": { + "time": "Number: Time in seconds, relative to this media element's playback. For example, to trigger an event every time playback reaches two seconds, pass in the number 2. This will be passed as the first parameter to the callback function.", + "callback": "Function: Name of a function that will be called at the given time. The callback will receive time and (optionally) param as its two parameters.", + "value": "Object: (Optional) An object to be passed as the second parameter to the callback function." + } + }, + "removeCue": { + "description": [ + "Remove a callback based on its ID. The ID is returned by the addCue method." + ], + "params": { + "id": "Number: ID of the cue, as returned by addCue" + } + }, + "clearCues": { + "description": [ + "Remove all of the callbacks that had originally been scheduled via the addCue method." + ] + }, + "save": { + "description": [ + "Save a p5.SoundFile as a .wav file. The browser will prompt the user to download the file to their device. To upload a file to a server, see getBlob" + ], + "params": { + "fileName": "String: (Optional) name of the resulting .wav file." + } + }, + "getBlob": { + "description": [ + "This method is useful for sending a SoundFile to a server. It returns the .wav-encoded audio data as a \"Blob\". A Blob is a file-like data object that can be uploaded to a server with an http request. We'll use the httpDo options object to send a POST request with some specific options: we encode the request as multipart/form-data, and attach the blob as one of the form values using FormData." + ], + "returns": "Blob: A file-like data object" + } }, "p5.Amplitude": { "description": [ @@ -2411,18 +5856,40 @@ "params": { "smoothing": "Number: (Optional) between 0.0 and .999 to smooth amplitude readings (defaults to 0)" }, - "setInput": [ - "Connects to the p5sound instance (main output) by default. Optionally, you can pass in a specific source (i.e. a soundfile)." - ], - "getLevel": [ - "Returns a single Amplitude reading at the moment it is called. For continuous readings, run in the draw loop." - ], - "toggleNormalize": [ - "Determines whether the results of Amplitude.process() will be Normalized. To normalize, Amplitude finds the difference the loudest reading it has processed and the maximum amplitude of 1.0. Amplitude adds this difference to all values to produce results that will reliably map between 0.0 and 1.0. However, if a louder moment occurs, the amount that Normalize adds to all the values will change. Accepts an optional boolean parameter (true or false). Normalizing is off by default." - ], - "smooth": [ - "Smooth Amplitude analysis by averaging with the last analysis frame. Off by default." - ] + "setInput": { + "description": [ + "Connects to the p5sound instance (main output) by default. Optionally, you can pass in a specific source (i.e. a soundfile)." + ], + "params": { + "snd": "SoundObject|undefined: (Optional) set the sound source (optional, defaults to main output)", + "smoothing": "Number|undefined: (Optional) a range between 0.0 and 1.0 to smooth amplitude readings" + } + }, + "getLevel": { + "description": [ + "Returns a single Amplitude reading at the moment it is called. For continuous readings, run in the draw loop." + ], + "returns": "Number: Amplitude as a number between 0.0 and 1.0", + "params": { + "channel": "Number: (Optional) Optionally return only channel 0 (left) or 1 (right)" + } + }, + "toggleNormalize": { + "description": [ + "Determines whether the results of Amplitude.process() will be Normalized. To normalize, Amplitude finds the difference the loudest reading it has processed and the maximum amplitude of 1.0. Amplitude adds this difference to all values to produce results that will reliably map between 0.0 and 1.0. However, if a louder moment occurs, the amount that Normalize adds to all the values will change. Accepts an optional boolean parameter (true or false). Normalizing is off by default." + ], + "params": { + "boolean": "Boolean: (Optional) set normalize to true (1) or false (0)" + } + }, + "smooth": { + "description": [ + "Smooth Amplitude analysis by averaging with the last analysis frame. Off by default." + ], + "params": { + "set": "Number: smoothing from 0.0 <= 1" + } + } }, "p5.FFT": { "description": [ @@ -2434,33 +5901,86 @@ "smoothing": "Number: (Optional) Smooth results of Freq Spectrum. 0.0 < smoothing < 1.0. Defaults to 0.8.", "bins": "Number: (Optional) Length of resulting array. Must be a power of two between 16 and 1024. Defaults to 1024." }, - "setInput": [ - "Set the input source for the FFT analysis. If no source is provided, FFT will analyze all sound in the sketch." - ], - "waveform": [ - "Returns an array of amplitude values (between -1.0 and +1.0) that represent a snapshot of amplitude readings in a single buffer. Length will be equal to bins (defaults to 1024). Can be used to draw the waveform of a sound." - ], - "analyze": [ - "Returns an array of amplitude values (between 0 and 255) across the frequency spectrum. Length is equal to FFT bins (1024 by default). The array indices correspond to frequencies (i.e. pitches), from the lowest to the highest that humans can hear. Each value represents amplitude at that slice of the frequency spectrum. Must be called prior to using getEnergy()." - ], - "getEnergy": [ - "Returns the amount of energy (volume) at a specific frequency, or the average amount of energy between two frequencies. Accepts Number(s) corresponding to frequency (in Hz), or a \"string\" corresponding to predefined frequency ranges (\"bass\", \"lowMid\", \"mid\", \"highMid\", \"treble\"). Returns a range between 0 (no energy/volume at that frequency) and 255 (maximum energy). NOTE: analyze() must be called prior to getEnergy(). analyze() tells the FFT to analyze frequency data, and getEnergy() uses the results to determine the value at a specific frequency or range of frequencies." - ], - "getCentroid": [ - "Returns the spectral centroid of the input signal. NOTE: analyze() must be called prior to getCentroid(). Analyze() tells the FFT to analyze frequency data, and getCentroid() uses the results determine the spectral centroid." - ], - "smooth": [ - "Smooth FFT analysis by averaging with the last analysis frame." - ], - "linAverages": [ - "Returns an array of average amplitude values for a given number of frequency bands split equally. N defaults to 16. NOTE: analyze() must be called prior to linAverages(). Analyze() tells the FFT to analyze frequency data, and linAverages() uses the results to group them into a smaller set of averages." - ], - "logAverages": [ - "Returns an array of average amplitude values of the spectrum, for a given set of Octave Bands NOTE: analyze() must be called prior to logAverages(). Analyze() tells the FFT to analyze frequency data, and logAverages() uses the results to group them into a smaller set of averages." - ], - "getOctaveBands": [ - "Calculates and Returns the 1/N Octave Bands N defaults to 3 and minimum central frequency to 15.625Hz. (1/3 Octave Bands ~= 31 Frequency Bands) Setting fCtr0 to a central value of a higher octave will ignore the lower bands and produce less frequency groups." - ] + "setInput": { + "description": [ + "Set the input source for the FFT analysis. If no source is provided, FFT will analyze all sound in the sketch." + ], + "params": { + "source": "Object: (Optional) p5.sound object (or web audio API source node)" + } + }, + "waveform": { + "description": [ + "Returns an array of amplitude values (between -1.0 and +1.0) that represent a snapshot of amplitude readings in a single buffer. Length will be equal to bins (defaults to 1024). Can be used to draw the waveform of a sound." + ], + "returns": "Array: Array Array of amplitude values (-1 to 1) over time. Array length = bins.", + "params": { + "bins": "Number: (Optional) Must be a power of two between 16 and 1024. Defaults to 1024.", + "precision": "String: (Optional) If any value is provided, will return results in a Float32 Array which is more precise than a regular array." + } + }, + "analyze": { + "description": [ + "Returns an array of amplitude values (between 0 and 255) across the frequency spectrum. Length is equal to FFT bins (1024 by default). The array indices correspond to frequencies (i.e. pitches), from the lowest to the highest that humans can hear. Each value represents amplitude at that slice of the frequency spectrum. Must be called prior to using getEnergy()." + ], + "returns": "Array: spectrum Array of energy (amplitude/volume) values across the frequency spectrum. Lowest energy (silence) = 0, highest possible is 255.", + "params": { + "bins": "Number: (Optional) Must be a power of two between 16 and 1024. Defaults to 1024.", + "scale": "Number: (Optional) If \"dB,\" returns decibel float measurements between -140 and 0 (max). Otherwise returns integers from 0-255." + } + }, + "getEnergy": { + "description": [ + "Returns the amount of energy (volume) at a specific frequency, or the average amount of energy between two frequencies. Accepts Number(s) corresponding to frequency (in Hz), or a \"string\" corresponding to predefined frequency ranges (\"bass\", \"lowMid\", \"mid\", \"highMid\", \"treble\"). Returns a range between 0 (no energy/volume at that frequency) and 255 (maximum energy). NOTE: analyze() must be called prior to getEnergy(). analyze() tells the FFT to analyze frequency data, and getEnergy() uses the results to determine the value at a specific frequency or range of frequencies." + ], + "returns": "Number: Energy Energy (volume/amplitude) from 0 and 255.", + "params": { + "frequency1": "Number|String: Will return a value representing energy at this frequency. Alternately, the strings \"bass\", \"lowMid\" \"mid\", \"highMid\", and \"treble\" will return predefined frequency ranges.", + "frequency2": "Number: (Optional) If a second frequency is given, will return average amount of energy that exists between the two frequencies." + } + }, + "getCentroid": { + "description": [ + "Returns the spectral centroid of the input signal. NOTE: analyze() must be called prior to getCentroid(). Analyze() tells the FFT to analyze frequency data, and getCentroid() uses the results determine the spectral centroid." + ], + "returns": "Number: Spectral Centroid Frequency of the spectral centroid in Hz." + }, + "smooth": { + "description": [ + "Smooth FFT analysis by averaging with the last analysis frame." + ], + "params": { + "smoothing": "Number: 0.0 < smoothing < 1.0. Defaults to 0.8." + } + }, + "linAverages": { + "description": [ + "Returns an array of average amplitude values for a given number of frequency bands split equally. N defaults to 16. NOTE: analyze() must be called prior to linAverages(). Analyze() tells the FFT to analyze frequency data, and linAverages() uses the results to group them into a smaller set of averages." + ], + "returns": "Array: linearAverages Array of average amplitude values for each group", + "params": { + "N": "Number: Number of returned frequency groups" + } + }, + "logAverages": { + "description": [ + "Returns an array of average amplitude values of the spectrum, for a given set of Octave Bands NOTE: analyze() must be called prior to logAverages(). Analyze() tells the FFT to analyze frequency data, and logAverages() uses the results to group them into a smaller set of averages." + ], + "returns": "Array: logAverages Array of average amplitude values for each group", + "params": { + "octaveBands": "Array: Array of Octave Bands objects for grouping" + } + }, + "getOctaveBands": { + "description": [ + "Calculates and Returns the 1/N Octave Bands N defaults to 3 and minimum central frequency to 15.625Hz. (1/3 Octave Bands ~= 31 Frequency Bands) Setting fCtr0 to a central value of a higher octave will ignore the lower bands and produce less frequency groups." + ], + "returns": "Array: octaveBands Array of octave band objects with their bounds", + "params": { + "N": "Number: Specifies the 1/N type of generated octave bands", + "fCtr0": "Number: Minimum central frequency for the lowest band" + } + } }, "p5.Oscillator": { "description": [ @@ -2471,55 +5991,138 @@ "freq": "Number: (Optional) frequency defaults to 440Hz", "type": "String: (Optional) type of oscillator. Options: 'sine' (default), 'triangle', 'sawtooth', 'square'" }, - "start": [ - "Start an oscillator.", - "Starting an oscillator on a user gesture will enable audio in browsers that have a strict autoplay policy, including Chrome and most mobile devices. See also: userStartAudio()." - ], - "stop": [ - "Stop an oscillator. Accepts an optional parameter to determine how long (in seconds from now) until the oscillator stops." - ], - "amp": [ - "Set the amplitude between 0 and 1.0. Or, pass in an object such as an oscillator to modulate amplitude with an audio signal." - ], - "getAmp": [ - "Returns the value of output gain" - ], - "freq": [ - "Set frequency of an oscillator to a value. Or, pass in an object such as an oscillator to modulate the frequency with an audio signal." - ], - "getFreq": [ - "Returns the value of frequency of oscillator" - ], - "setType": [ - "Set type to 'sine', 'triangle', 'sawtooth' or 'square'." - ], - "getType": [ - "Returns current type of oscillator eg. 'sine', 'triangle', 'sawtooth' or 'square'." - ], - "connect": [ - "Connect to a p5.sound / Web Audio object." - ], - "disconnect": [ - "Disconnect all outputs" - ], - "pan": [ - "Pan between Left (-1) and Right (1)" - ], - "getPan": [ - "Returns the current value of panPosition , between Left (-1) and Right (1)" - ], - "phase": [ - "Set the phase of an oscillator between 0.0 and 1.0. In this implementation, phase is a delay time based on the oscillator's current frequency." - ], - "add": [ - "Add a value to the p5.Oscillator's output amplitude, and return the oscillator. Calling this method again will override the initial add() with a new value." - ], - "mult": [ - "Multiply the p5.Oscillator's output amplitude by a fixed value (i.e. turn it up!). Calling this method again will override the initial mult() with a new value." - ], - "scale": [ - "Scale this oscillator's amplitude values to a given range, and return the oscillator. Calling this method again will override the initial scale() with new values." - ] + "start": { + "description": [ + "Start an oscillator.", + "Starting an oscillator on a user gesture will enable audio in browsers that have a strict autoplay policy, including Chrome and most mobile devices. See also: userStartAudio()." + ], + "params": { + "time": "Number: (Optional) startTime in seconds from now.", + "frequency": "Number: (Optional) frequency in Hz." + } + }, + "stop": { + "description": [ + "Stop an oscillator. Accepts an optional parameter to determine how long (in seconds from now) until the oscillator stops." + ], + "params": { + "secondsFromNow": "Number: Time, in seconds from now." + } + }, + "amp": { + "description": [ + "Set the amplitude between 0 and 1.0. Or, pass in an object such as an oscillator to modulate amplitude with an audio signal." + ], + "returns": "AudioParam: gain If no value is provided, returns the Web Audio API AudioParam that controls this oscillator's gain/amplitude/volume)", + "params": { + "vol": "Number|Object: between 0 and 1.0 or a modulating signal/oscillator", + "rampTime": "Number: (Optional) create a fade that lasts rampTime", + "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now" + } + }, + "getAmp": { + "description": [ + "Returns the value of output gain" + ], + "returns": "Number: Amplitude value between 0.0 and 1.0" + }, + "freq": { + "description": [ + "Set frequency of an oscillator to a value. Or, pass in an object such as an oscillator to modulate the frequency with an audio signal." + ], + "returns": "AudioParam: Frequency If no value is provided, returns the Web Audio API AudioParam that controls this oscillator's frequency", + "params": { + "Frequency": "Number|Object: Frequency in Hz or modulating signal/oscillator", + "rampTime": "Number: (Optional) Ramp time (in seconds)", + "timeFromNow": "Number: (Optional) Schedule this event to happen at x seconds from now" + } + }, + "getFreq": { + "description": [ + "Returns the value of frequency of oscillator" + ], + "returns": "Number: Frequency of oscillator in Hertz" + }, + "setType": { + "description": [ + "Set type to 'sine', 'triangle', 'sawtooth' or 'square'." + ], + "params": { + "type": "String: 'sine', 'triangle', 'sawtooth' or 'square'." + } + }, + "getType": { + "description": [ + "Returns current type of oscillator eg. 'sine', 'triangle', 'sawtooth' or 'square'." + ], + "returns": "String: type of oscillator eg . 'sine', 'triangle', 'sawtooth' or 'square'." + }, + "connect": { + "description": [ + "Connect to a p5.sound / Web Audio object." + ], + "params": { + "unit": "Object: A p5.sound or Web Audio object" + } + }, + "disconnect": { + "description": [ + "Disconnect all outputs" + ] + }, + "pan": { + "description": [ + "Pan between Left (-1) and Right (1)" + ], + "params": { + "panning": "Number: Number between -1 and 1", + "timeFromNow": "Number: schedule this event to happen seconds from now" + } + }, + "getPan": { + "description": [ + "Returns the current value of panPosition , between Left (-1) and Right (1)" + ], + "returns": "Number: panPosition of oscillator , between Left (-1) and Right (1)" + }, + "phase": { + "description": [ + "Set the phase of an oscillator between 0.0 and 1.0. In this implementation, phase is a delay time based on the oscillator's current frequency." + ], + "params": { + "phase": "Number: float between 0.0 and 1.0" + } + }, + "add": { + "description": [ + "Add a value to the p5.Oscillator's output amplitude, and return the oscillator. Calling this method again will override the initial add() with a new value." + ], + "returns": "p5.Oscillator: Oscillator Returns this oscillator with scaled output", + "params": { + "number": "Number: Constant number to add" + } + }, + "mult": { + "description": [ + "Multiply the p5.Oscillator's output amplitude by a fixed value (i.e. turn it up!). Calling this method again will override the initial mult() with a new value." + ], + "returns": "p5.Oscillator: Oscillator Returns this oscillator with multiplied output", + "params": { + "number": "Number: Constant number to multiply" + } + }, + "scale": { + "description": [ + "Scale this oscillator's amplitude values to a given range, and return the oscillator. Calling this method again will override the initial scale() with new values." + ], + "returns": "p5.Oscillator: Oscillator Returns this oscillator with scaled output", + "params": { + "inMin": "Number: input range minumum", + "inMax": "Number: input range maximum", + "outMin": "Number: input range minumum", + "outMax": "Number: input range maximum" + } + } }, "p5.SinOsc": { "description": [ @@ -2559,60 +6162,154 @@ "Use setRange to change the attack/release level. Use setADSR to change attackTime, decayTime, sustainPercent and releaseTime.", "Use the play method to play the entire envelope, the ramp method for a pingable trigger, or triggerAttack/ triggerRelease to trigger noteOn/noteOff." ], - "attackTime": [ - "Time until envelope reaches attackLevel" - ], - "attackLevel": [ - "Level once attack is complete." - ], - "decayTime": [ - "Time until envelope reaches decayLevel." - ], - "decayLevel": [ - "Level after decay. The envelope will sustain here until it is released." - ], - "releaseTime": [ - "Duration of the release portion of the envelope." - ], - "releaseLevel": [ - "Level at the end of the release." - ], - "set": [ - "Reset the envelope with a series of time/value pairs." - ], - "setADSR": [ - "Set values like a traditional ADSR envelope ." - ], - "setRange": [ - "Set max (attackLevel) and min (releaseLevel) of envelope." - ], - "setInput": [ - "Assign a parameter to be controlled by this envelope. If a p5.Sound object is given, then the p5.Envelope will control its output gain. If multiple inputs are provided, the env will control all of them." - ], - "setExp": [ - "Set whether the envelope ramp is linear (default) or exponential. Exponential ramps can be useful because we perceive amplitude and frequency logarithmically." - ], - "play": [ - "Play tells the envelope to start acting on a given input. If the input is a p5.sound object (i.e. AudioIn, Oscillator, SoundFile), then Envelope will control its output volume. Envelopes can also be used to control any Web Audio Audio Param." - ], - "triggerAttack": [ - "Trigger the Attack, and Decay portion of the Envelope. Similar to holding down a key on a piano, but it will hold the sustain level until you let go. Input can be any p5.sound object, or a Web Audio Param." - ], - "triggerRelease": [ - "Trigger the Release of the Envelope. This is similar to releasing the key on a piano and letting the sound fade according to the release level and release time." - ], - "ramp": [ - "Exponentially ramp to a value using the first two values from setADSR(attackTime, decayTime) as time constants for simple exponential ramps. If the value is higher than current value, it uses attackTime, while a decrease uses decayTime." - ], - "add": [ - "Add a value to the p5.Oscillator's output amplitude, and return the oscillator. Calling this method again will override the initial add() with new values." - ], - "mult": [ - "Multiply the p5.Envelope's output amplitude by a fixed value. Calling this method again will override the initial mult() with new values." - ], - "scale": [ - "Scale this envelope's amplitude values to a given range, and return the envelope. Calling this method again will override the initial scale() with new values." - ] + "attackTime": { + "description": [ + "Time until envelope reaches attackLevel" + ] + }, + "attackLevel": { + "description": [ + "Level once attack is complete." + ] + }, + "decayTime": { + "description": [ + "Time until envelope reaches decayLevel." + ] + }, + "decayLevel": { + "description": [ + "Level after decay. The envelope will sustain here until it is released." + ] + }, + "releaseTime": { + "description": [ + "Duration of the release portion of the envelope." + ] + }, + "releaseLevel": { + "description": [ + "Level at the end of the release." + ] + }, + "set": { + "description": [ + "Reset the envelope with a series of time/value pairs." + ], + "params": { + "attackTime": "Number: Time (in seconds) before level reaches attackLevel", + "attackLevel": "Number: Typically an amplitude between 0.0 and 1.0", + "decayTime": "Number: Time", + "decayLevel": "Number: Amplitude (In a standard ADSR envelope, decayLevel = sustainLevel)", + "releaseTime": "Number: Release Time (in seconds)", + "releaseLevel": "Number: Amplitude" + } + }, + "setADSR": { + "description": [ + "Set values like a traditional ADSR envelope ." + ], + "params": { + "attackTime": "Number: Time (in seconds before envelope reaches Attack Level", + "decayTime": "Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level", + "susRatio": "Number: (Optional) Ratio between attackLevel and releaseLevel, on a scale from 0 to 1, where 1.0 = attackLevel, 0.0 = releaseLevel. The susRatio determines the decayLevel and the level at which the sustain portion of the envelope will sustain. For example, if attackLevel is 0.4, releaseLevel is 0, and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is increased to 1.0 (using setRange), then decayLevel would increase proportionally, to become 0.5.", + "releaseTime": "Number: (Optional) Time in seconds from now (defaults to 0)" + } + }, + "setRange": { + "description": [ + "Set max (attackLevel) and min (releaseLevel) of envelope." + ], + "params": { + "aLevel": "Number: attack level (defaults to 1)", + "rLevel": "Number: release level (defaults to 0)" + } + }, + "setInput": { + "description": [ + "Assign a parameter to be controlled by this envelope. If a p5.Sound object is given, then the p5.Envelope will control its output gain. If multiple inputs are provided, the env will control all of them." + ], + "params": { + "inputs": "Object: (Optional) A p5.sound object or Web Audio Param." + } + }, + "setExp": { + "description": [ + "Set whether the envelope ramp is linear (default) or exponential. Exponential ramps can be useful because we perceive amplitude and frequency logarithmically." + ], + "params": { + "isExp": "Boolean: true is exponential, false is linear" + } + }, + "play": { + "description": [ + "Play tells the envelope to start acting on a given input. If the input is a p5.sound object (i.e. AudioIn, Oscillator, SoundFile), then Envelope will control its output volume. Envelopes can also be used to control any Web Audio Audio Param." + ], + "params": { + "unit": "Object: A p5.sound object or Web Audio Param.", + "startTime": "Number: (Optional) time from now (in seconds) at which to play", + "sustainTime": "Number: (Optional) time to sustain before releasing the envelope" + } + }, + "triggerAttack": { + "description": [ + "Trigger the Attack, and Decay portion of the Envelope. Similar to holding down a key on a piano, but it will hold the sustain level until you let go. Input can be any p5.sound object, or a Web Audio Param." + ], + "params": { + "unit": "Object: p5.sound Object or Web Audio Param", + "secondsFromNow": "Number: time from now (in seconds)" + } + }, + "triggerRelease": { + "description": [ + "Trigger the Release of the Envelope. This is similar to releasing the key on a piano and letting the sound fade according to the release level and release time." + ], + "params": { + "unit": "Object: p5.sound Object or Web Audio Param", + "secondsFromNow": "Number: time to trigger the release" + } + }, + "ramp": { + "description": [ + "Exponentially ramp to a value using the first two values from setADSR(attackTime, decayTime) as time constants for simple exponential ramps. If the value is higher than current value, it uses attackTime, while a decrease uses decayTime." + ], + "params": { + "unit": "Object: p5.sound Object or Web Audio Param", + "secondsFromNow": "Number: When to trigger the ramp", + "v": "Number: Target value", + "v2": "Number: (Optional) Second target value" + } + }, + "add": { + "description": [ + "Add a value to the p5.Oscillator's output amplitude, and return the oscillator. Calling this method again will override the initial add() with new values." + ], + "returns": "p5.Envelope: Envelope Returns this envelope with scaled output", + "params": { + "number": "Number: Constant number to add" + } + }, + "mult": { + "description": [ + "Multiply the p5.Envelope's output amplitude by a fixed value. Calling this method again will override the initial mult() with new values." + ], + "returns": "p5.Envelope: Envelope Returns this envelope with scaled output", + "params": { + "number": "Number: Constant number to multiply" + } + }, + "scale": { + "description": [ + "Scale this envelope's amplitude values to a given range, and return the envelope. Calling this method again will override the initial scale() with new values." + ], + "returns": "p5.Envelope: Envelope Returns this envelope with scaled output", + "params": { + "inMin": "Number: input range minumum", + "inMax": "Number: input range maximum", + "outMin": "Number: input range minumum", + "outMax": "Number: input range maximum" + } + } }, "p5.Noise": { "description": [ @@ -2621,9 +6318,14 @@ "params": { "type": "String: Type of noise can be 'white' (default), 'brown' or 'pink'." }, - "setType": [ - "Set type of noise to 'white', 'pink' or 'brown'. White is the default." - ] + "setType": { + "description": [ + "Set type of noise to 'white', 'pink' or 'brown'. White is the default." + ], + "params": { + "type": "String: (Optional) 'white', 'pink' or 'brown'" + } + } }, "p5.Pulse": { "description": [ @@ -2633,9 +6335,14 @@ "freq": "Number: (Optional) Frequency in oscillations per second (Hz)", "w": "Number: (Optional) Width between the pulses (0 to 1.0, defaults to 0)" }, - "width": [ - "Set the width of a Pulse object (an oscillator that implements Pulse Width Modulation)." - ] + "width": { + "description": [ + "Set the width of a Pulse object (an oscillator that implements Pulse Width Modulation)." + ], + "params": { + "width": "Number: (Optional) Width between the pulses (0 to 1.0, defaults to 0)" + } + } }, "p5.AudioIn": { "description": [ @@ -2647,37 +6354,85 @@ "params": { "errorCallback": "Function: (Optional) A function to call if there is an error accessing the AudioIn. For example, Safari and iOS devices do not currently allow microphone access." }, - "enabled": [ - "Client must allow browser to access their microphone / audioin source. Default: false. Will become true when the client enables access." - ], - "amplitude": [ - "Input amplitude, connect to it by default but not to master out" - ], - "start": [ - "Start processing audio input. This enables the use of other AudioIn methods like getLevel(). Note that by default, AudioIn is not connected to p5.sound's output. So you won't hear anything unless you use the connect() method.
", - "Certain browsers limit access to the user's microphone. For example, Chrome only allows access from localhost and over https. For this reason, you may want to include an errorCallback—a function that is called in case the browser won't provide mic access." - ], - "stop": [ - "Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel(). If re-starting, the user may be prompted for permission access." - ], - "connect": [ - "Connect to an audio unit. If no parameter is provided, will connect to the main output (i.e. your speakers).
" - ], - "disconnect": [ - "Disconnect the AudioIn from all audio units. For example, if connect() had been called, disconnect() will stop sending signal to your speakers.
" - ], - "getLevel": [ - "Read the Amplitude (volume level) of an AudioIn. The AudioIn class contains its own instance of the Amplitude class to help make it easy to get a microphone's volume level. Accepts an optional smoothing value (0.0 < 1.0). NOTE: AudioIn must .start() before using .getLevel().
" - ], - "amp": [ - "Set amplitude (volume) of a mic input between 0 and 1.0.
" - ], - "getSources": [ - "Returns a list of available input sources. This is a wrapper for MediaDevices.enumerateDevices() - Web APIs | MDN and it returns a Promise." - ], - "setSource": [ - "Set the input source. Accepts a number representing a position in the array returned by getSources(). This is only available in browsers that support navigator.mediaDevices.enumerateDevices()" - ] + "input": {}, + "output": {}, + "stream": {}, + "mediaStream": {}, + "currentSource": {}, + "enabled": { + "description": [ + "Client must allow browser to access their microphone / audioin source. Default: false. Will become true when the client enables access." + ] + }, + "amplitude": { + "description": [ + "Input amplitude, connect to it by default but not to master out" + ] + }, + "start": { + "description": [ + "Start processing audio input. This enables the use of other AudioIn methods like getLevel(). Note that by default, AudioIn is not connected to p5.sound's output. So you won't hear anything unless you use the connect() method.
", + "Certain browsers limit access to the user's microphone. For example, Chrome only allows access from localhost and over https. For this reason, you may want to include an errorCallback—a function that is called in case the browser won't provide mic access." + ], + "params": { + "successCallback": "Function: (Optional) Name of a function to call on success.", + "errorCallback": "Function: (Optional) Name of a function to call if there was an error. For example, some browsers do not support getUserMedia." + } + }, + "stop": { + "description": [ + "Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel(). If re-starting, the user may be prompted for permission access." + ] + }, + "connect": { + "description": [ + "Connect to an audio unit. If no parameter is provided, will connect to the main output (i.e. your speakers).
" + ], + "params": { + "unit": "Object: (Optional) An object that accepts audio input, such as an FFT" + } + }, + "disconnect": { + "description": [ + "Disconnect the AudioIn from all audio units. For example, if connect() had been called, disconnect() will stop sending signal to your speakers.
" + ] + }, + "getLevel": { + "description": [ + "Read the Amplitude (volume level) of an AudioIn. The AudioIn class contains its own instance of the Amplitude class to help make it easy to get a microphone's volume level. Accepts an optional smoothing value (0.0 < 1.0). NOTE: AudioIn must .start() before using .getLevel().
" + ], + "returns": "Number: Volume level (between 0.0 and 1.0)", + "params": { + "smoothing": "Number: (Optional) Smoothing is 0.0 by default. Smooths values based on previous values." + } + }, + "amp": { + "description": [ + "Set amplitude (volume) of a mic input between 0 and 1.0.
" + ], + "params": { + "vol": "Number: between 0 and 1.0", + "time": "Number: (Optional) ramp time (optional)" + } + }, + "getSources": { + "description": [ + "Returns a list of available input sources. This is a wrapper for MediaDevices.enumerateDevices() - Web APIs | MDN and it returns a Promise." + ], + "returns": "Promise: Returns a Promise that can be used in place of the callbacks, similar to the enumerateDevices() method", + "params": { + "successCallback": "Function: (Optional) This callback function handles the sources when they have been enumerated. The callback function receives the deviceList array as its only argument", + "errorCallback": "Function: (Optional) This optional callback receives the error message as its argument." + } + }, + "setSource": { + "description": [ + "Set the input source. Accepts a number representing a position in the array returned by getSources(). This is only available in browsers that support navigator.mediaDevices.enumerateDevices()" + ], + "params": { + "num": "Number: position of input source in the array" + } + } }, "p5.Effect": { "description": [ @@ -2691,21 +6446,45 @@ "_drywet": "Object: (Optional) Tone.JS CrossFade node (defaults to value: 1)", "wet": "AudioNode: (Optional) Effects that extend this class should connect to the wet signal to this gain node, so that dry and wet signals are mixed properly." }, - "amp": [ - "Set the output volume of the filter." - ], - "chain": [ - "Link effects together in a chain Example usage: filter.chain(reverb, delay, panner); May be used with an open-ended number of arguments" - ], - "drywet": [ - "Adjust the dry/wet value." - ], - "connect": [ - "Send output to a p5.js-sound, Web Audio Node, or use signal to control an AudioParam" - ], - "disconnect": [ - "Disconnect all output." - ] + "amp": { + "description": [ + "Set the output volume of the filter." + ], + "params": { + "vol": "Number: (Optional) amplitude between 0 and 1.0", + "rampTime": "Number: (Optional) create a fade that lasts until rampTime", + "tFromNow": "Number: (Optional) schedule this event to happen in tFromNow seconds" + } + }, + "chain": { + "description": [ + "Link effects together in a chain Example usage: filter.chain(reverb, delay, panner); May be used with an open-ended number of arguments" + ], + "params": { + "arguments": "Object: (Optional) Chain together multiple sound objects" + } + }, + "drywet": { + "description": [ + "Adjust the dry/wet value." + ], + "params": { + "fade": "Number: (Optional) The desired drywet value (0 - 1.0)" + } + }, + "connect": { + "description": [ + "Send output to a p5.js-sound, Web Audio Node, or use signal to control an AudioParam" + ], + "params": { + "unit": "Object" + } + }, + "disconnect": { + "description": [ + "Disconnect all output." + ] + } }, "p5.Filter": { "description": [ @@ -2716,30 +6495,74 @@ "params": { "type": "String: (Optional) 'lowpass' (default), 'highpass', 'bandpass'" }, - "biquadFilter": [ - "The p5.Filter is built with a Web Audio BiquadFilter Node." - ], - "process": [ - "Filter an audio signal according to a set of filter parameters." - ], - "set": [ - "Set the frequency and the resonance of the filter." - ], - "freq": [ - "Set the filter frequency, in Hz, from 10 to 22050 (the range of human hearing, although in reality most people hear in a narrower range)." - ], - "res": [ - "Controls either width of a bandpass frequency, or the resonance of a low/highpass cutoff frequency." - ], - "gain": [ - "Controls the gain attribute of a Biquad Filter. This is distinctly different from .amp() which is inherited from p5.Effect .amp() controls the volume via the output gain node p5.Filter.gain() controls the gain parameter of a Biquad Filter node." - ], - "toggle": [ - "Toggle function. Switches between the specified type and allpass" - ], - "setType": [ - "Set the type of a p5.Filter. Possible types include: \"lowpass\" (default), \"highpass\", \"bandpass\", \"lowshelf\", \"highshelf\", \"peaking\", \"notch\", \"allpass\"." - ] + "biquadFilter": { + "description": [ + "The p5.Filter is built with a Web Audio BiquadFilter Node." + ] + }, + "process": { + "description": [ + "Filter an audio signal according to a set of filter parameters." + ], + "params": { + "Signal": "Object: An object that outputs audio", + "freq": "Number: (Optional) Frequency in Hz, from 10 to 22050", + "res": "Number: (Optional) Resonance/Width of the filter frequency from 0.001 to 1000" + } + }, + "set": { + "description": [ + "Set the frequency and the resonance of the filter." + ], + "params": { + "freq": "Number: (Optional) Frequency in Hz, from 10 to 22050", + "res": "Number: (Optional) Resonance (Q) from 0.001 to 1000", + "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now" + } + }, + "freq": { + "description": [ + "Set the filter frequency, in Hz, from 10 to 22050 (the range of human hearing, although in reality most people hear in a narrower range)." + ], + "returns": "Number: value Returns the current frequency value", + "params": { + "freq": "Number: Filter Frequency", + "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now" + } + }, + "res": { + "description": [ + "Controls either width of a bandpass frequency, or the resonance of a low/highpass cutoff frequency." + ], + "returns": "Number: value Returns the current res value", + "params": { + "res": "Number: Resonance/Width of filter freq from 0.001 to 1000", + "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now" + } + }, + "gain": { + "description": [ + "Controls the gain attribute of a Biquad Filter. This is distinctly different from .amp() which is inherited from p5.Effect .amp() controls the volume via the output gain node p5.Filter.gain() controls the gain parameter of a Biquad Filter node." + ], + "returns": "Number: Returns the current or updated gain value", + "params": { + "gain": "Number" + } + }, + "toggle": { + "description": [ + "Toggle function. Switches between the specified type and allpass" + ], + "returns": "Boolean: [Toggle value]" + }, + "setType": { + "description": [ + "Set the type of a p5.Filter. Possible types include: \"lowpass\" (default), \"highpass\", \"bandpass\", \"lowshelf\", \"highshelf\", \"peaking\", \"notch\", \"allpass\"." + ], + "params": { + "t": "String" + } + } }, "p5.LowPass": { "description": [ @@ -2765,115 +6588,260 @@ "params": { "_eqsize": "Number: (Optional) Constructor will accept 3 or 8, defaults to 3" }, - "bands": [ - "The p5.EQ is built with abstracted p5.Filter objects. To modify any bands, use methods of the p5.Filter API, especially gain and freq. Bands are stored in an array, with indices 0 - 3, or 0 - 7" - ], - "process": [ - "Process an input by connecting it to the EQ" - ] + "bands": { + "description": [ + "The p5.EQ is built with abstracted p5.Filter objects. To modify any bands, use methods of the p5.Filter API, especially gain and freq. Bands are stored in an array, with indices 0 - 3, or 0 - 7" + ] + }, + "process": { + "description": [ + "Process an input by connecting it to the EQ" + ], + "params": { + "src": "Object: Audio source" + } + } }, "p5.Panner3D": { "description": [ "Panner3D is based on the Web Audio Spatial Panner Node. This panner is a spatial processing node that allows audio to be positioned and oriented in 3D space.", "The position is relative to an Audio Context Listener, which can be accessed by p5.soundOut.audiocontext.listener" ], - "panner": [ - " Web Audio Spatial Panner Node", - "Properties include Panning Model : \"equal power\" or \"HRTF\" DistanceModel : \"linear\", \"inverse\", or \"exponential\"" - ], - "process": [ - "Connect an audio sorce" - ], - "set": [ - "Set the X,Y,Z position of the Panner" - ], - "positionX": [ - "Getter and setter methods for position coordinates" - ], - "positionY": [ - "Getter and setter methods for position coordinates" - ], - "positionZ": [ - "Getter and setter methods for position coordinates" - ], - "orient": [ - "Set the X,Y,Z position of the Panner" - ], - "orientX": [ - "Getter and setter methods for orient coordinates" - ], - "orientY": [ - "Getter and setter methods for orient coordinates" - ], - "orientZ": [ - "Getter and setter methods for orient coordinates" - ], - "setFalloff": [ - "Set the rolloff factor and max distance" - ], - "maxDist": [ - "Maxium distance between the source and the listener" - ], - "rollof": [ - "How quickly the volume is reduced as the source moves away from the listener" - ] + "panner": { + "description": [ + " Web Audio Spatial Panner Node", + "Properties include Panning Model : \"equal power\" or \"HRTF\" DistanceModel : \"linear\", \"inverse\", or \"exponential\"" + ] + }, + "process": { + "description": [ + "Connect an audio sorce" + ], + "params": { + "src": "Object: Input source" + } + }, + "set": { + "description": [ + "Set the X,Y,Z position of the Panner" + ], + "returns": "Array: Updated x, y, z values as an array", + "params": { + "xVal": "Number", + "yVal": "Number", + "zVal": "Number", + "time": "Number" + } + }, + "positionX": { + "description": [ + "Getter and setter methods for position coordinates" + ], + "returns": "Number: updated coordinate value" + }, + "positionY": { + "description": [ + "Getter and setter methods for position coordinates" + ], + "returns": "Number: updated coordinate value" + }, + "positionZ": { + "description": [ + "Getter and setter methods for position coordinates" + ], + "returns": "Number: updated coordinate value" + }, + "orient": { + "description": [ + "Set the X,Y,Z position of the Panner" + ], + "returns": "Array: Updated x, y, z values as an array", + "params": { + "xVal": "Number", + "yVal": "Number", + "zVal": "Number", + "time": "Number" + } + }, + "orientX": { + "description": [ + "Getter and setter methods for orient coordinates" + ], + "returns": "Number: updated coordinate value" + }, + "orientY": { + "description": [ + "Getter and setter methods for orient coordinates" + ], + "returns": "Number: updated coordinate value" + }, + "orientZ": { + "description": [ + "Getter and setter methods for orient coordinates" + ], + "returns": "Number: updated coordinate value" + }, + "setFalloff": { + "description": [ + "Set the rolloff factor and max distance" + ], + "params": { + "maxDistance": "Number (Optional)", + "rolloffFactor": "Number (Optional)" + } + }, + "maxDist": { + "description": [ + "Maxium distance between the source and the listener" + ], + "returns": "Number: updated value", + "params": { + "maxDistance": "Number" + } + }, + "rollof": { + "description": [ + "How quickly the volume is reduced as the source moves away from the listener" + ], + "returns": "Number: updated value", + "params": { + "rolloffFactor": "Number" + } + } }, "p5.Delay": { "description": [ "Delay is an echo effect. It processes an existing sound source, and outputs a delayed version of that sound. The p5.Delay can produce different effects depending on the delayTime, feedback, filter, and type. In the example below, a feedback of 0.5 (the default value) will produce a looping delay that decreases in volume by 50% each repeat. A filter will cut out the high frequencies so that the delay does not sound as piercing as the original source.", "This class extends p5.Effect. Methods amp(), chain(), drywet(), connect(), and disconnect() are available." ], - "leftDelay": [ - "The p5.Delay is built with two Web Audio Delay Nodes, one for each stereo channel." - ], - "rightDelay": [ - "The p5.Delay is built with two Web Audio Delay Nodes, one for each stereo channel." - ], - "process": [ - "Add delay to an audio signal according to a set of delay parameters." - ], - "delayTime": [ - "Set the delay (echo) time, in seconds. Usually this value will be a floating point number between 0.0 and 1.0." - ], - "feedback": [ - "Feedback occurs when Delay sends its signal back through its input in a loop. The feedback amount determines how much signal to send each time through the loop. A feedback greater than 1.0 is not desirable because it will increase the overall output each time through the loop, creating an infinite feedback loop. The default value is 0.5" - ], - "filter": [ - "Set a lowpass filter frequency for the delay. A lowpass filter will cut off any frequencies higher than the filter frequency." - ], - "setType": [ - "Choose a preset type of delay. 'pingPong' bounces the signal from the left to the right channel to produce a stereo effect. Any other parameter will revert to the default delay setting." - ], - "amp": [ - "Set the output level of the delay effect." - ], - "connect": [ - "Send output to a p5.sound or web audio object" - ], - "disconnect": [ - "Disconnect all output." - ] + "leftDelay": { + "description": [ + "The p5.Delay is built with two Web Audio Delay Nodes, one for each stereo channel." + ] + }, + "rightDelay": { + "description": [ + "The p5.Delay is built with two Web Audio Delay Nodes, one for each stereo channel." + ] + }, + "process": { + "description": [ + "Add delay to an audio signal according to a set of delay parameters." + ], + "params": { + "Signal": "Object: An object that outputs audio", + "delayTime": "Number: (Optional) Time (in seconds) of the delay/echo. Some browsers limit delayTime to 1 second.", + "feedback": "Number: (Optional) sends the delay back through itself in a loop that decreases in volume each time.", + "lowPass": "Number: (Optional) Cutoff frequency. Only frequencies below the lowPass will be part of the delay." + } + }, + "delayTime": { + "description": [ + "Set the delay (echo) time, in seconds. Usually this value will be a floating point number between 0.0 and 1.0." + ], + "params": { + "delayTime": "Number: Time (in seconds) of the delay" + } + }, + "feedback": { + "description": [ + "Feedback occurs when Delay sends its signal back through its input in a loop. The feedback amount determines how much signal to send each time through the loop. A feedback greater than 1.0 is not desirable because it will increase the overall output each time through the loop, creating an infinite feedback loop. The default value is 0.5" + ], + "returns": "Number: Feedback value", + "params": { + "feedback": "Number|Object: 0.0 to 1.0, or an object such as an Oscillator that can be used to modulate this param" + } + }, + "filter": { + "description": [ + "Set a lowpass filter frequency for the delay. A lowpass filter will cut off any frequencies higher than the filter frequency." + ], + "params": { + "cutoffFreq": "Number|Object: A lowpass filter will cut off any frequencies higher than the filter frequency.", + "res": "Number|Object: Resonance of the filter frequency cutoff, or an object (i.e. a p5.Oscillator) that can be used to modulate this parameter. High numbers (i.e. 15) will produce a resonance, low numbers (i.e. .2) will produce a slope." + } + }, + "setType": { + "description": [ + "Choose a preset type of delay. 'pingPong' bounces the signal from the left to the right channel to produce a stereo effect. Any other parameter will revert to the default delay setting." + ], + "params": { + "type": "String|Number: 'pingPong' (1) or 'default' (0)" + } + }, + "amp": { + "description": [ + "Set the output level of the delay effect." + ], + "params": { + "volume": "Number: amplitude between 0 and 1.0", + "rampTime": "Number: (Optional) create a fade that lasts rampTime", + "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now" + } + }, + "connect": { + "description": [ + "Send output to a p5.sound or web audio object" + ], + "params": { + "unit": "Object" + } + }, + "disconnect": { + "description": [ + "Disconnect all output." + ] + } }, "p5.Reverb": { "description": [ "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 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 p5.Convolver extends p5.Reverb allowing you to recreate the sound of actual physical spaces through convolution.", "This class extends p5.Effect. Methods amp(), chain(), drywet(), connect(), and disconnect() are available." ], - "process": [ - "Connect a source to the reverb, and assign reverb parameters." - ], - "set": [ - "Set the reverb settings. Similar to .process(), but without assigning a new input." - ], - "amp": [ - "Set the output level of the reverb effect." - ], - "connect": [ - "Send output to a p5.sound or web audio object" - ], - "disconnect": [ - "Disconnect all output." - ] + "process": { + "description": [ + "Connect a source to the reverb, and assign reverb parameters." + ], + "params": { + "src": "Object: p5.sound / Web Audio object with a sound output.", + "seconds": "Number: (Optional) Duration of the reverb, in seconds. Min: 0, Max: 10. Defaults to 3.", + "decayRate": "Number: (Optional) Percentage of decay with each echo. Min: 0, Max: 100. Defaults to 2.", + "reverse": "Boolean: (Optional) Play the reverb backwards or forwards." + } + }, + "set": { + "description": [ + "Set the reverb settings. Similar to .process(), but without assigning a new input." + ], + "params": { + "seconds": "Number: (Optional) Duration of the reverb, in seconds. Min: 0, Max: 10. Defaults to 3.", + "decayRate": "Number: (Optional) Percentage of decay with each echo. Min: 0, Max: 100. Defaults to 2.", + "reverse": "Boolean: (Optional) Play the reverb backwards or forwards." + } + }, + "amp": { + "description": [ + "Set the output level of the reverb effect." + ], + "params": { + "volume": "Number: amplitude between 0 and 1.0", + "rampTime": "Number: (Optional) create a fade that lasts rampTime", + "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now" + } + }, + "connect": { + "description": [ + "Send output to a p5.sound or web audio object" + ], + "params": { + "unit": "Object" + } + }, + "disconnect": { + "description": [ + "Disconnect all output." + ] + } }, "p5.Convolver": { "description": [ @@ -2886,24 +6854,52 @@ "callback": "Function: (Optional) function to call when loading succeeds", "errorCallback": "Function: (Optional) function to call if loading fails. This function will receive an error or XMLHttpRequest object with information about what went wrong." }, - "convolverNode": [ - "Internally, the p5.Convolver uses the a Web Audio Convolver Node." - ], - "impulses": [ - "If you load multiple impulse files using the .addImpulse method, they will be stored as Objects in this Array. Toggle between them with the toggleImpulse(id) method." - ], - "process": [ - "Connect a source to the convolver." - ], - "addImpulse": [ - "Load and assign a new Impulse Response to the p5.Convolver. The impulse is added to the .impulses array. Previous impulses can be accessed with the .toggleImpulse(id) method." - ], - "resetImpulse": [ - "Similar to .addImpulse, except that the .impulses Array is reset to save memory. A new .impulses array is created with this impulse as the only item." - ], - "toggleImpulse": [ - "If you have used .addImpulse() to add multiple impulses to a p5.Convolver, then you can use this method to toggle between the items in the .impulses Array. Accepts a parameter to identify which impulse you wish to use, identified either by its original filename (String) or by its position in the .impulses Array (Number).
You can access the objects in the .impulses Array directly. Each Object has two attributes: an .audioBuffer (type: Web Audio AudioBuffer) and a .name, a String that corresponds with the original filename." - ] + "convolverNode": { + "description": [ + "Internally, the p5.Convolver uses the a Web Audio Convolver Node." + ] + }, + "impulses": { + "description": [ + "If you load multiple impulse files using the .addImpulse method, they will be stored as Objects in this Array. Toggle between them with the toggleImpulse(id) method." + ] + }, + "process": { + "description": [ + "Connect a source to the convolver." + ], + "params": { + "src": "Object: p5.sound / Web Audio object with a sound output." + } + }, + "addImpulse": { + "description": [ + "Load and assign a new Impulse Response to the p5.Convolver. The impulse is added to the .impulses array. Previous impulses can be accessed with the .toggleImpulse(id) method." + ], + "params": { + "path": "String: path to a sound file", + "callback": "Function: function (optional)", + "errorCallback": "Function: function (optional)" + } + }, + "resetImpulse": { + "description": [ + "Similar to .addImpulse, except that the .impulses Array is reset to save memory. A new .impulses array is created with this impulse as the only item." + ], + "params": { + "path": "String: path to a sound file", + "callback": "Function: function (optional)", + "errorCallback": "Function: function (optional)" + } + }, + "toggleImpulse": { + "description": [ + "If you have used .addImpulse() to add multiple impulses to a p5.Convolver, then you can use this method to toggle between the items in the .impulses Array. Accepts a parameter to identify which impulse you wish to use, identified either by its original filename (String) or by its position in the .impulses Array (Number).
You can access the objects in the .impulses Array directly. Each Object has two attributes: an .audioBuffer (type: Web Audio AudioBuffer) and a .name, a String that corresponds with the original filename." + ], + "params": { + "id": "String|Number: Identify the impulse by its original filename (String), or by its position in the .impulses Array (Number)." + } + } }, "p5.Phrase": { "description": [ @@ -2916,9 +6912,11 @@ "callback": "Function: The name of a function that this phrase will call. Typically it will play a sound, and accept two parameters: a time at which to play the sound (in seconds from now), and a value from the sequence array. The time should be passed into the play() or start() method to ensure precision.", "sequence": "Array: Array of values to pass into the callback at each step of the phrase." }, - "sequence": [ - "Array of values to pass into the callback at each step of the phrase. Depending on the callback function's requirements, these values may be numbers, strings, or an object with multiple parameters. Zero (0) indicates a rest." - ] + "sequence": { + "description": [ + "Array of values to pass into the callback at each step of the phrase. Depending on the callback function's requirements, these values may be numbers, strings, or an object with multiple parameters. Zero (0) indicates a rest." + ] + } }, "p5.Part": { "description": [ @@ -2929,42 +6927,99 @@ "steps": "Number: (Optional) Steps in the part", "tatums": "Number: (Optional) Divisions of a beat, e.g. use 1/4, or 0.25 for a quater note (default is 1/16, a sixteenth note)" }, - "setBPM": [ - "Set the tempo of this part, in Beats Per Minute." - ], - "getBPM": [ - "Returns the tempo, in Beats Per Minute, of this part." - ], - "start": [ - "Start playback of this part. It will play through all of its phrases at a speed determined by setBPM." - ], - "loop": [ - "Loop playback of this part. It will begin looping through all of its phrases at a speed determined by setBPM." - ], - "noLoop": [ - "Tell the part to stop looping." - ], - "stop": [ - "Stop the part and cue it to step 0. Playback will resume from the begining of the Part when it is played again." - ], - "pause": [ - "Pause the part. Playback will resume from the current step." - ], - "addPhrase": [ - "Add a p5.Phrase to this Part." - ], - "removePhrase": [ - "Remove a phrase from this part, based on the name it was given when it was created." - ], - "getPhrase": [ - "Get a phrase from this part, based on the name it was given when it was created. Now you can modify its array." - ], - "replaceSequence": [ - "Find all sequences with the specified name, and replace their patterns with the specified array." - ], - "onStep": [ - "Set the function that will be called at every step. This will clear the previous function." - ] + "setBPM": { + "description": [ + "Set the tempo of this part, in Beats Per Minute." + ], + "params": { + "BPM": "Number: Beats Per Minute", + "rampTime": "Number: (Optional) Seconds from now" + } + }, + "getBPM": { + "description": [ + "Returns the tempo, in Beats Per Minute, of this part." + ], + "returns": "Number:" + }, + "start": { + "description": [ + "Start playback of this part. It will play through all of its phrases at a speed determined by setBPM." + ], + "params": { + "time": "Number: (Optional) seconds from now" + } + }, + "loop": { + "description": [ + "Loop playback of this part. It will begin looping through all of its phrases at a speed determined by setBPM." + ], + "params": { + "time": "Number: (Optional) seconds from now" + } + }, + "noLoop": { + "description": [ + "Tell the part to stop looping." + ] + }, + "stop": { + "description": [ + "Stop the part and cue it to step 0. Playback will resume from the begining of the Part when it is played again." + ], + "params": { + "time": "Number: (Optional) seconds from now" + } + }, + "pause": { + "description": [ + "Pause the part. Playback will resume from the current step." + ], + "params": { + "time": "Number: seconds from now" + } + }, + "addPhrase": { + "description": [ + "Add a p5.Phrase to this Part." + ], + "params": { + "phrase": "p5.Phrase: reference to a p5.Phrase" + } + }, + "removePhrase": { + "description": [ + "Remove a phrase from this part, based on the name it was given when it was created." + ], + "params": { + "phraseName": "String" + } + }, + "getPhrase": { + "description": [ + "Get a phrase from this part, based on the name it was given when it was created. Now you can modify its array." + ], + "params": { + "phraseName": "String" + } + }, + "replaceSequence": { + "description": [ + "Find all sequences with the specified name, and replace their patterns with the specified array." + ], + "params": { + "phraseName": "String", + "sequence": "Array: Array of values to pass into the callback at each step of the phrase." + } + }, + "onStep": { + "description": [ + "Set the function that will be called at every step. This will clear the previous function." + ], + "params": { + "callback": "Function: The name of the callback you want to fire on every beat/tatum." + } + } }, "p5.Score": { "description": [ @@ -2973,24 +7028,40 @@ "params": { "parts": "p5.Part: (Optional) One or multiple parts, to be played in sequence." }, - "start": [ - "Start playback of the score." - ], - "stop": [ - "Stop playback of the score." - ], - "pause": [ - "Pause playback of the score." - ], - "loop": [ - "Loop playback of the score." - ], - "noLoop": [ - "Stop looping playback of the score. If it is currently playing, this will go into effect after the current round of playback completes." - ], - "setBPM": [ - "Set the tempo for all parts in the score" - ] + "start": { + "description": [ + "Start playback of the score." + ] + }, + "stop": { + "description": [ + "Stop playback of the score." + ] + }, + "pause": { + "description": [ + "Pause playback of the score." + ] + }, + "loop": { + "description": [ + "Loop playback of the score." + ] + }, + "noLoop": { + "description": [ + "Stop looping playback of the score. If it is currently playing, this will go into effect after the current round of playback completes." + ] + }, + "setBPM": { + "description": [ + "Set the tempo for all parts in the score" + ], + "params": { + "BPM": "Number: Beats Per Minute", + "rampTime": "Number: Seconds from now" + } + } }, "p5.SoundLoop": { "description": [ @@ -3000,69 +7071,156 @@ "callback": "Function: this function will be called on each iteration of theloop", "interval": "Number|String: (Optional) amount of time (if a number) or beats (if a string, following Tone.Time convention) for each iteration of the loop. Defaults to 1 second." }, - "bpm": [ - "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)" - ], - "timeSignature": [ - "number of quarter notes in a measure (defaults to 4)" - ], - "interval": [ - "length of the loops interval" - ], - "iterations": [ - "how many times the callback has been called so far" - ], - "musicalTimeMode": [ - "musicalTimeMode uses Tone.Time convention true if string, false if number" - ], - "maxIterations": [ - "Set a limit to the number of loops to play. defaults to Infinity" - ], - "start": [ - "Start the loop" - ], - "stop": [ - "Stop the loop" - ], - "pause": [ - "Pause the loop" - ], - "syncedStart": [ - "Synchronize loops. Use this method to start two or more loops in synchronization or to start a loop in synchronization with a loop that is already playing This method will schedule the implicit loop in sync with the explicit master loop i.e. loopToStart.syncedStart(loopToSyncWith)" - ] + "bpm": { + "description": [ + "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)" + ] + }, + "timeSignature": { + "description": [ + "number of quarter notes in a measure (defaults to 4)" + ] + }, + "interval": { + "description": [ + "length of the loops interval" + ] + }, + "iterations": { + "description": [ + "how many times the callback has been called so far" + ] + }, + "musicalTimeMode": { + "description": [ + "musicalTimeMode uses Tone.Time convention true if string, false if number" + ] + }, + "maxIterations": { + "description": [ + "Set a limit to the number of loops to play. defaults to Infinity" + ] + }, + "start": { + "description": [ + "Start the loop" + ], + "params": { + "timeFromNow": "Number: (Optional) schedule a starting time" + } + }, + "stop": { + "description": [ + "Stop the loop" + ], + "params": { + "timeFromNow": "Number: (Optional) schedule a stopping time" + } + }, + "pause": { + "description": [ + "Pause the loop" + ], + "params": { + "timeFromNow": "Number: (Optional) schedule a pausing time" + } + }, + "syncedStart": { + "description": [ + "Synchronize loops. Use this method to start two or more loops in synchronization or to start a loop in synchronization with a loop that is already playing This method will schedule the implicit loop in sync with the explicit master loop i.e. loopToStart.syncedStart(loopToSyncWith)" + ], + "params": { + "otherLoop": "Object: a p5.SoundLoop to sync with", + "timeFromNow": "Number: (Optional) Start the loops in sync after timeFromNow seconds" + } + } }, "p5.Compressor": { "description": [ "Compressor is an audio effect class that performs dynamics compression on an audio input source. This is a very commonly used technique in music and sound production. Compression creates an overall louder, richer, and fuller sound by lowering the volume of louds and raising that of softs. Compression can be used to avoid clipping (sound distortion due to peaks in volume) and is especially useful when many sounds are played at once. Compression can be used on indivudal sound sources in addition to the main output.", "This class extends p5.Effect. Methods amp(), chain(), drywet(), connect(), and disconnect() are available." ], - "compressor": [ - "The p5.Compressor is built with a Web Audio Dynamics Compressor Node " - ], - "process": [ - "Performs the same function as .connect, but also accepts optional parameters to set compressor's audioParams" - ], - "set": [ - "Set the paramters of a compressor." - ], - "attack": [ - "Get current attack or set value w/ time ramp" - ], - "knee": [ - "Get current knee or set value w/ time ramp" - ], - "ratio": [ - "Get current ratio or set value w/ time ramp" - ], - "threshold": [ - "Get current threshold or set value w/ time ramp" - ], - "release": [ - "Get current release or set value w/ time ramp" - ], - "reduction": [ - "Return the current reduction value" - ] + "compressor": { + "description": [ + "The p5.Compressor is built with a Web Audio Dynamics Compressor Node " + ] + }, + "process": { + "description": [ + "Performs the same function as .connect, but also accepts optional parameters to set compressor's audioParams" + ], + "params": { + "src": "Object: Sound source to be connected", + "attack": "Number: (Optional) The amount of time (in seconds) to reduce the gain by 10dB, default = .003, range 0 - 1", + "knee": "Number: (Optional) A decibel value representing the range above the threshold where the curve smoothly transitions to the \"ratio\" portion. default = 30, range 0 - 40", + "ratio": "Number: (Optional) The amount of dB change in input for a 1 dB change in output default = 12, range 1 - 20", + "threshold": "Number: (Optional) The decibel value above which the compression will start taking effect default = -24, range -100 - 0", + "release": "Number: (Optional) The amount of time (in seconds) to increase the gain by 10dB default = .25, range 0 - 1" + } + }, + "set": { + "description": [ + "Set the paramters of a compressor." + ], + "params": { + "attack": "Number: The amount of time (in seconds) to reduce the gain by 10dB, default = .003, range 0 - 1", + "knee": "Number: A decibel value representing the range above the threshold where the curve smoothly transitions to the \"ratio\" portion. default = 30, range 0 - 40", + "ratio": "Number: The amount of dB change in input for a 1 dB change in output default = 12, range 1 - 20", + "threshold": "Number: The decibel value above which the compression will start taking effect default = -24, range -100 - 0", + "release": "Number: The amount of time (in seconds) to increase the gain by 10dB default = .25, range 0 - 1" + } + }, + "attack": { + "description": [ + "Get current attack or set value w/ time ramp" + ], + "params": { + "attack": "Number: (Optional) Attack is the amount of time (in seconds) to reduce the gain by 10dB, default = .003, range 0 - 1", + "time": "Number: (Optional) Assign time value to schedule the change in value" + } + }, + "knee": { + "description": [ + "Get current knee or set value w/ time ramp" + ], + "params": { + "knee": "Number: (Optional) A decibel value representing the range above the threshold where the curve smoothly transitions to the \"ratio\" portion. default = 30, range 0 - 40", + "time": "Number: (Optional) Assign time value to schedule the change in value" + } + }, + "ratio": { + "description": [ + "Get current ratio or set value w/ time ramp" + ], + "params": { + "ratio": "Number: (Optional) The amount of dB change in input for a 1 dB change in output default = 12, range 1 - 20", + "time": "Number: (Optional) Assign time value to schedule the change in value" + } + }, + "threshold": { + "description": [ + "Get current threshold or set value w/ time ramp" + ], + "params": { + "threshold": "Number: The decibel value above which the compression will start taking effect default = -24, range -100 - 0", + "time": "Number: (Optional) Assign time value to schedule the change in value" + } + }, + "release": { + "description": [ + "Get current release or set value w/ time ramp" + ], + "params": { + "release": "Number: The amount of time (in seconds) to increase the gain by 10dB default = .25, range 0 - 1", + "time": "Number: (Optional) Assign time value to schedule the change in value" + } + }, + "reduction": { + "description": [ + "Return the current reduction value" + ], + "returns": "Number: Value of the amount of gain reduction that is applied to the signal" + } }, "p5.PeakDetect": { "description": [ @@ -3079,31 +7237,58 @@ "threshold": "Number: (Optional) Threshold for detecting a beat between 0 and 1 scaled logarithmically where 0.1 is 1/2 the loudness of 1.0. Defaults to 0.35.", "framesPerPeak": "Number: (Optional) Defaults to 20." }, - "isDetected": [ - "isDetected is set to true when a peak is detected." - ], - "update": [ - "The update method is run in the draw loop.", - "Accepts an FFT object. You must call .analyze() on the FFT object prior to updating the peakDetect because it relies on a completed FFT analysis." - ], - "onPeak": [ - "onPeak accepts two arguments: a function to call when a peak is detected. The value of the peak, between 0.0 and 1.0, is passed to the callback." - ] + "isDetected": { + "description": [ + "isDetected is set to true when a peak is detected." + ] + }, + "update": { + "description": [ + "The update method is run in the draw loop.", + "Accepts an FFT object. You must call .analyze() on the FFT object prior to updating the peakDetect because it relies on a completed FFT analysis." + ], + "params": { + "fftObject": "p5.FFT: A p5.FFT object" + } + }, + "onPeak": { + "description": [ + "onPeak accepts two arguments: a function to call when a peak is detected. The value of the peak, between 0.0 and 1.0, is passed to the callback." + ], + "params": { + "callback": "Function: Name of a function that will be called when a peak is detected.", + "val": "Object: (Optional) Optional value to pass into the function when a peak is detected." + } + } }, "p5.SoundRecorder": { "description": [ "Record sounds for playback and/or to save as a .wav file. The p5.SoundRecorder records all sound output from your sketch, or can be assigned a specific source with setInput().", "The record() method accepts a p5.SoundFile as a parameter. When playback is stopped (either after the given amount of time, or with the stop() method), the p5.SoundRecorder will send its recording to that p5.SoundFile for playback." ], - "setInput": [ - "Connect a specific device to the p5.SoundRecorder. If no parameter is given, p5.SoundRecorer will record all audible p5.sound from your sketch." - ], - "record": [ - "Start recording. To access the recording, provide a p5.SoundFile as the first parameter. The p5.SoundRecorder will send its recording to that p5.SoundFile for playback once recording is complete. Optional parameters include duration (in seconds) of the recording, and a callback function that will be called once the complete recording has been transfered to the p5.SoundFile." - ], - "stop": [ - "Stop the recording. Once the recording is stopped, the results will be sent to the p5.SoundFile that was given on .record(), and if a callback function was provided on record, that function will be called." - ] + "setInput": { + "description": [ + "Connect a specific device to the p5.SoundRecorder. If no parameter is given, p5.SoundRecorer will record all audible p5.sound from your sketch." + ], + "params": { + "unit": "Object: (Optional) p5.sound object or a web audio unit that outputs sound" + } + }, + "record": { + "description": [ + "Start recording. To access the recording, provide a p5.SoundFile as the first parameter. The p5.SoundRecorder will send its recording to that p5.SoundFile for playback once recording is complete. Optional parameters include duration (in seconds) of the recording, and a callback function that will be called once the complete recording has been transfered to the p5.SoundFile." + ], + "params": { + "soundFile": "p5.SoundFile: p5.SoundFile", + "duration": "Number: (Optional) Time (in seconds)", + "callback": "Function: (Optional) The name of a function that will be called once the recording completes" + } + }, + "stop": { + "description": [ + "Stop the recording. Once the recording is stopped, the results will be sent to the p5.SoundFile that was given on .record(), and if a callback function was provided on record, that function will be called." + ] + } }, "p5.Distortion": { "description": [ @@ -3114,81 +7299,176 @@ "amount": "Number: (Optional) Unbounded distortion amount. Normal values range from 0-1.", "oversample": "String: (Optional) 'none', '2x', or '4x'." }, - "WaveShaperNode": [ - "The p5.Distortion is built with a Web Audio WaveShaper Node." - ], - "process": [ - "Process a sound source, optionally specify amount and oversample values." - ], - "set": [ - "Set the amount and oversample of the waveshaper distortion." - ], - "getAmount": [ - "Return the distortion amount, typically between 0-1." - ], - "getOversample": [ - "Return the oversampling." - ] + "WaveShaperNode": { + "description": [ + "The p5.Distortion is built with a Web Audio WaveShaper Node." + ] + }, + "process": { + "description": [ + "Process a sound source, optionally specify amount and oversample values." + ], + "params": { + "amount": "Number: (Optional) Unbounded distortion amount. Normal values range from 0-1.", + "oversample": "String: (Optional) 'none', '2x', or '4x'." + } + }, + "set": { + "description": [ + "Set the amount and oversample of the waveshaper distortion." + ], + "params": { + "amount": "Number: (Optional) Unbounded distortion amount. Normal values range from 0-1.", + "oversample": "String: (Optional) 'none', '2x', or '4x'." + } + }, + "getAmount": { + "description": [ + "Return the distortion amount, typically between 0-1." + ], + "returns": "Number: Unbounded distortion amount. Normal values range from 0-1." + }, + "getOversample": { + "description": [ + "Return the oversampling." + ], + "returns": "String: Oversample can either be 'none', '2x', or '4x'." + } }, "p5.Gain": { "description": [ "A gain node is usefull to set the relative volume of sound. It's typically used to build mixers." ], - "setInput": [ - "Connect a source to the gain node." - ], - "connect": [ - "Send output to a p5.sound or web audio object" - ], - "disconnect": [ - "Disconnect all output." - ], - "amp": [ - "Set the output level of the gain node." - ] + "setInput": { + "description": [ + "Connect a source to the gain node." + ], + "params": { + "src": "Object: p5.sound / Web Audio object with a sound output." + } + }, + "connect": { + "description": [ + "Send output to a p5.sound or web audio object" + ], + "params": { + "unit": "Object" + } + }, + "disconnect": { + "description": [ + "Disconnect all output." + ] + }, + "amp": { + "description": [ + "Set the output level of the gain node." + ], + "params": { + "volume": "Number: amplitude between 0 and 1.0", + "rampTime": "Number: (Optional) create a fade that lasts rampTime", + "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now" + } + } }, "p5.AudioVoice": { "description": [ "Base class for monophonic synthesizers. Any extensions of this class should follow the API and implement the methods below in order to remain compatible with p5.PolySynth();" ], - "connect": [ - "Connect to p5 objects or Web Audio Nodes" - ], - "disconnect": [ - "Disconnect from soundOut" - ] + "connect": { + "description": [ + "Connect to p5 objects or Web Audio Nodes" + ], + "params": { + "unit": "Object" + } + }, + "disconnect": { + "description": [ + "Disconnect from soundOut" + ] + } }, "p5.MonoSynth": { "description": [ "A MonoSynth is used as a single voice for sound synthesis. This is a class to be used in conjunction with the PolySynth class. Custom synthetisers should be built inheriting from this class." ], - "attack": [ - "Getters and Setters" - ], - "play": [ - "Play tells the MonoSynth to start playing a note. This method schedules the calling of .triggerAttack and .triggerRelease." - ], - "triggerAttack": [ - "Trigger the Attack, and Decay portion of the Envelope. Similar to holding down a key on a piano, but it will hold the sustain level until you let go." - ], - "triggerRelease": [ - "Trigger the release of the Envelope. This is similar to releasing the key on a piano and letting the sound fade according to the release level and release time." - ], - "setADSR": [ - "Set values like a traditional ADSR envelope ." - ], - "amp": [ - "MonoSynth amp" - ], - "connect": [ - "Connect to a p5.sound / Web Audio object." - ], - "disconnect": [ - "Disconnect all outputs" - ], - "dispose": [ - "Get rid of the MonoSynth and free up its resources / memory." - ] + "attack": { + "description": [ + "Getters and Setters" + ] + }, + "decay": {}, + "sustain": {}, + "release": {}, + "play": { + "description": [ + "Play tells the MonoSynth to start playing a note. This method schedules the calling of .triggerAttack and .triggerRelease." + ], + "params": { + "note": "String | Number: the note you want to play, specified as a frequency in Hertz (Number) or as a midi value in Note/Octave format (\"C4\", \"Eb3\"...etc\") See Tone. Defaults to 440 hz.", + "velocity": "Number: (Optional) velocity of the note to play (ranging from 0 to 1)", + "secondsFromNow": "Number: (Optional) time from now (in seconds) at which to play", + "sustainTime": "Number: (Optional) time to sustain before releasing the envelope. Defaults to 0.15 seconds." + } + }, + "triggerAttack": { + "description": [ + "Trigger the Attack, and Decay portion of the Envelope. Similar to holding down a key on a piano, but it will hold the sustain level until you let go." + ], + "params": { + "note": "String | Number: the note you want to play, specified as a frequency in Hertz (Number) or as a midi value in Note/Octave format (\"C4\", \"Eb3\"...etc\") See Tone. Defaults to 440 hz", + "velocity": "Number: (Optional) velocity of the note to play (ranging from 0 to 1)", + "secondsFromNow": "Number: (Optional) time from now (in seconds) at which to play" + } + }, + "triggerRelease": { + "description": [ + "Trigger the release of the Envelope. This is similar to releasing the key on a piano and letting the sound fade according to the release level and release time." + ], + "params": { + "secondsFromNow": "Number: time to trigger the release" + } + }, + "setADSR": { + "description": [ + "Set values like a traditional ADSR envelope ." + ], + "params": { + "attackTime": "Number: Time (in seconds before envelope reaches Attack Level", + "decayTime": "Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level", + "susRatio": "Number: (Optional) Ratio between attackLevel and releaseLevel, on a scale from 0 to 1, where 1.0 = attackLevel, 0.0 = releaseLevel. The susRatio determines the decayLevel and the level at which the sustain portion of the envelope will sustain. For example, if attackLevel is 0.4, releaseLevel is 0, and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is increased to 1.0 (using setRange), then decayLevel would increase proportionally, to become 0.5.", + "releaseTime": "Number: (Optional) Time in seconds from now (defaults to 0)" + } + }, + "amp": { + "description": [ + "MonoSynth amp" + ], + "returns": "Number: new volume value", + "params": { + "vol": "Number: desired volume", + "rampTime": "Number: (Optional) Time to reach new volume" + } + }, + "connect": { + "description": [ + "Connect to a p5.sound / Web Audio object." + ], + "params": { + "unit": "Object: A p5.sound or Web Audio object" + } + }, + "disconnect": { + "description": [ + "Disconnect all outputs" + ] + }, + "dispose": { + "description": [ + "Get rid of the MonoSynth and free up its resources / memory." + ] + } }, "p5.OnsetDetect": { "description": [ @@ -3209,38 +7489,91 @@ "synthVoice": "Number: (Optional) A monophonic synth voice inheriting the AudioVoice class. Defaults to p5.MonoSynth", "maxVoices": "Number: (Optional) Number of voices, defaults to 8;" }, - "notes": [ - "An object that holds information about which notes have been played and which notes are currently being played. New notes are added as keys on the fly. While a note has been attacked, but not released, the value of the key is the audiovoice which is generating that note. When notes are released, the value of the key becomes undefined." - ], - "polyvalue": [ - "A PolySynth must have at least 1 voice, defaults to 8" - ], - "AudioVoice": [ - "Monosynth that generates the sound for each note that is triggered. The p5.PolySynth defaults to using the p5.MonoSynth as its voice." - ], - "play": [ - "Play a note by triggering noteAttack and noteRelease with sustain time" - ], - "noteADSR": [ - "noteADSR sets the envelope for a specific note that has just been triggered. Using this method modifies the envelope of whichever audiovoice is being used to play the desired note. The envelope should be reset before noteRelease is called in order to prevent the modified envelope from being used on other notes." - ], - "setADSR": [ - "Set the PolySynths global envelope. This method modifies the envelopes of each monosynth so that all notes are played with this envelope." - ], - "noteAttack": [ - "Trigger the Attack, and Decay portion of a MonoSynth. Similar to holding down a key on a piano, but it will hold the sustain level until you let go." - ], - "noteRelease": [ - "Trigger the Release of an AudioVoice note. This is similar to releasing the key on a piano and letting the sound fade according to the release level and release time." - ], - "connect": [ - "Connect to a p5.sound / Web Audio object." - ], - "disconnect": [ - "Disconnect all outputs" - ], - "dispose": [ - "Get rid of the MonoSynth and free up its resources / memory." - ] + "notes": { + "description": [ + "An object that holds information about which notes have been played and which notes are currently being played. New notes are added as keys on the fly. While a note has been attacked, but not released, the value of the key is the audiovoice which is generating that note. When notes are released, the value of the key becomes undefined." + ] + }, + "polyvalue": { + "description": [ + "A PolySynth must have at least 1 voice, defaults to 8" + ] + }, + "AudioVoice": { + "description": [ + "Monosynth that generates the sound for each note that is triggered. The p5.PolySynth defaults to using the p5.MonoSynth as its voice." + ] + }, + "play": { + "description": [ + "Play a note by triggering noteAttack and noteRelease with sustain time" + ], + "params": { + "note": "Number: (Optional) midi note to play (ranging from 0 to 127 - 60 being a middle C)", + "velocity": "Number: (Optional) velocity of the note to play (ranging from 0 to 1)", + "secondsFromNow": "Number: (Optional) time from now (in seconds) at which to play", + "sustainTime": "Number: (Optional) time to sustain before releasing the envelope" + } + }, + "noteADSR": { + "description": [ + "noteADSR sets the envelope for a specific note that has just been triggered. Using this method modifies the envelope of whichever audiovoice is being used to play the desired note. The envelope should be reset before noteRelease is called in order to prevent the modified envelope from being used on other notes." + ], + "params": { + "note": "Number: (Optional) Midi note on which ADSR should be set.", + "attackTime": "Number: (Optional) Time (in seconds before envelope reaches Attack Level", + "decayTime": "Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level", + "susRatio": "Number: (Optional) Ratio between attackLevel and releaseLevel, on a scale from 0 to 1, where 1.0 = attackLevel, 0.0 = releaseLevel. The susRatio determines the decayLevel and the level at which the sustain portion of the envelope will sustain. For example, if attackLevel is 0.4, releaseLevel is 0, and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is increased to 1.0 (using setRange), then decayLevel would increase proportionally, to become 0.5.", + "releaseTime": "Number: (Optional) Time in seconds from now (defaults to 0)" + } + }, + "setADSR": { + "description": [ + "Set the PolySynths global envelope. This method modifies the envelopes of each monosynth so that all notes are played with this envelope." + ], + "params": { + "attackTime": "Number: (Optional) Time (in seconds before envelope reaches Attack Level", + "decayTime": "Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level", + "susRatio": "Number: (Optional) Ratio between attackLevel and releaseLevel, on a scale from 0 to 1, where 1.0 = attackLevel, 0.0 = releaseLevel. The susRatio determines the decayLevel and the level at which the sustain portion of the envelope will sustain. For example, if attackLevel is 0.4, releaseLevel is 0, and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is increased to 1.0 (using setRange), then decayLevel would increase proportionally, to become 0.5.", + "releaseTime": "Number: (Optional) Time in seconds from now (defaults to 0)" + } + }, + "noteAttack": { + "description": [ + "Trigger the Attack, and Decay portion of a MonoSynth. Similar to holding down a key on a piano, but it will hold the sustain level until you let go." + ], + "params": { + "note": "Number: (Optional) midi note on which attack should be triggered.", + "velocity": "Number: (Optional) velocity of the note to play (ranging from 0 to 1)/", + "secondsFromNow": "Number: (Optional) time from now (in seconds)" + } + }, + "noteRelease": { + "description": [ + "Trigger the Release of an AudioVoice note. This is similar to releasing the key on a piano and letting the sound fade according to the release level and release time." + ], + "params": { + "note": "Number: (Optional) midi note on which attack should be triggered. If no value is provided, all notes will be released.", + "secondsFromNow": "Number: (Optional) time to trigger the release" + } + }, + "connect": { + "description": [ + "Connect to a p5.sound / Web Audio object." + ], + "params": { + "unit": "Object: A p5.sound or Web Audio object" + } + }, + "disconnect": { + "description": [ + "Disconnect all outputs" + ] + }, + "dispose": { + "description": [ + "Get rid of the MonoSynth and free up its resources / memory." + ] + } } } \ No newline at end of file