Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
a Tern def file for p5.js generated from source 8/18/17
{
"!name": "p5.js",
"!define": {
"Conversion": {
"p5": {
"!type": "fn()",
"!url": "https://p5js.org/reference/#/p5/p5",
"prototype": {
"undefined": {
"!type": "fn()",
"!doc": "Convert an RGBA array to HSLA.\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
}
}
}
},
"Color": {
"p5": {
"!type": "fn()",
"!url": "https://p5js.org/reference/#/p5/p5",
"prototype": {
"alpha": {
"!type": "fn(obj: Color.p5.Color) -> number",
"!doc": "Extracts the alpha value from a color or pixel array.\n",
"!url": "https://p5js.org/reference/#/p5/alpha"
},
"blue": {
"!type": "fn(obj: Color.p5.Color) -> number",
"!doc": "Extracts the blue value from a color or pixel array.\n",
"!url": "https://p5js.org/reference/#/p5/blue"
},
"brightness": {
"!type": "fn(color: Color.p5.Color) -> number",
"!doc": "Extracts the HSB brightness value from a color or pixel array.\n",
"!url": "https://p5js.org/reference/#/p5/brightness"
},
"color": {
"!type": "fn() -> +Color.p5.Color",
"!doc": "Creates colors for storing in variables of the color datatype. The\nparameters are interpreted as RGB or HSB values depending on the\ncurrent colorMode(). The default mode is RGB values from 0 to 255\nand, therefore, the function call color(255, 204, 0) will return a\nbright yellow color.\n<br><br>\nNote that if only one value is provided to color(), it will be interpreted\nas a grayscale value. Add a second value, and it will be used for alpha\ntransparency. When three values are specified, they are interpreted as\neither RGB or HSB values. Adding a fourth value applies alpha\ntransparency.\n<br><br>\nIf a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.\n",
"!url": "https://p5js.org/reference/#/p5/color"
},
"green": {
"!type": "fn(color: Color.p5.Color) -> number",
"!doc": "Extracts the green value from a color or pixel array.\n",
"!url": "https://p5js.org/reference/#/p5/green"
},
"hue": {
"!type": "fn(color: Color.p5.Color) -> number",
"!doc": "Extracts the hue value from a color or pixel array.\nHue exists in both HSB and HSL. This function will return the\nHSB-normalized hue when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL-normalized hue otherwise. (The values will only be different if the\nmaximum hue setting for each system is different.)\n",
"!url": "https://p5js.org/reference/#/p5/hue"
},
"lerpColor": {
"!type": "fn(c1: Color.p5.Color, c2: Color.p5.Color, amt: number) -> +Color.p5.Color",
"!doc": "Blends two colors to find a third color somewhere between them. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first color, 0.1 is very near the first color, 0.5 is halfway\nin between, etc. An amount below 0 will be treated as 0. Likewise, amounts\nabove 1 will be capped at 1. This is different from the behavior of lerp(),\nbut necessary because otherwise numbers outside the range will produce\nstrange and unexpected colors.\n<br><br>\nThe way that colours are interpolated depends on the current color mode.\n",
"!url": "https://p5js.org/reference/#/p5/lerpColor"
},
"lightness": {
"!type": "fn(color: Color.p5.Color) -> number",
"!doc": "Extracts the HSL lightness value from a color or pixel array.\n",
"!url": "https://p5js.org/reference/#/p5/lightness"
},
"red": {
"!type": "fn(obj: Color.p5.Color) -> number",
"!doc": "Extracts the red value from a color or pixel array.\n",
"!url": "https://p5js.org/reference/#/p5/red"
},
"saturation": {
"!type": "fn(color: Color.p5.Color) -> number",
"!doc": "Extracts the saturation value from a color or pixel array.\nSaturation is scaled differently in HSB and HSL. This function will return\nthe HSB saturation when supplied with an HSB color object (or when supplied\nwith a pixel array while the color mode is HSB), but will default to the\nHSL saturation otherwise.\n",
"!url": "https://p5js.org/reference/#/p5/saturation"
},
"background": {
"!type": "fn() -> !this",
"!doc": "The background() function sets the color used for the background of the\np5.js canvas. The default background is light gray. This function is\ntypically used within draw() to clear the display window at the beginning\nof each frame, but it can be used inside setup() to set the background on\nthe first frame of animation or if the background need only be set once.\n<br><br>\nThe color is either specified in terms of the RGB, HSB, or HSL color\ndepending on the current colorMode. (The default color space is RGB, with\neach value in the range from 0 to 255).\n<br><br>\nIf a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.\n<br><br>\nA p5.Color object can also be provided to set the background color.\n<br><br>\nA p5.Image can also be provided to set the background iamge.\n",
"!url": "https://p5js.org/reference/#/p5/background"
},
"clear": {
"!type": "fn() -> !this",
"!doc": "Clears the pixels within a buffer. This function only works on p5.Canvas\nobjects created with the createCanvas() function; it won&#39;t work with the\nmain display window. Unlike the main graphics context, pixels in\nadditional graphics areas created with createGraphics() can be entirely\nor partially transparent. This function clears everything to make all of\nthe pixels 100% transparent.\n",
"!url": "https://p5js.org/reference/#/p5/clear"
},
"colorMode": {
"!type": "fn() -> !this",
"!doc": "colorMode() changes the way p5.js interprets color data. By default, the\nparameters for fill(), stroke(), background(), and color() are defined by\nvalues between 0 and 255 using the RGB color model. This is equivalent to\nsetting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB\nsystem instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You\ncan also use HSL.\n<br><br>\nNote: existing color objects remember the mode that they were created in,\nso you can change modes as you like without affecting their appearance.\n",
"!url": "https://p5js.org/reference/#/p5/colorMode"
},
"fill": {
"!type": "fn() -> !this",
"!doc": "Sets the color used to fill shapes. For example, if you run\nfill(204, 102, 0), all subsequent shapes will be filled with orange. This\ncolor is either specified in terms of the RGB or HSB color depending on\nthe current colorMode(). (The default color space is RGB, with each value\nin the range from 0 to 255).\n<br><br>\nIf a single string argument is provided, RGB, RGBA and Hex CSS color strings\nand all named color strings are supported. In this case, an alpha number\nvalue as a second argument is not supported, the RGBA form should be used.\n<br><br>\nA p5 Color object can also be provided to set the fill color.\n",
"!url": "https://p5js.org/reference/#/p5/fill"
},
"noFill": {
"!type": "fn() -> !this",
"!doc": "Disables filling geometry. If both noStroke() and noFill() are called,\nnothing will be drawn to the screen.\n",
"!url": "https://p5js.org/reference/#/p5/noFill"
},
"noStroke": {
"!type": "fn() -> !this",
"!doc": "Disables drawing the stroke (outline). If both noStroke() and noFill()\nare called, nothing will be drawn to the screen.\n",
"!url": "https://p5js.org/reference/#/p5/noStroke"
},
"stroke": {
"!type": "fn() -> !this",
"!doc": "Sets the color used to draw lines and borders around shapes. This color\nis either specified in terms of the RGB or HSB color depending on the\ncurrent colorMode() (the default color space is RGB, with each value in\nthe range from 0 to 255).\n<br><br>\nIf a single string argument is provided, RGB, RGBA and Hex CSS color\nstrings and all named color strings are supported. In this case, an alpha\nnumber value as a second argument is not supported, the RGBA form should be\nused.\n<br><br>\nA p5 Color object can also be provided to set the stroke color.\n",
"!url": "https://p5js.org/reference/#/p5/stroke"
}
}
},
"p5.Color": {
"!type": "fn() -> +Color.p5.Color",
"!doc": "We define colors to be immutable objects. Each color stores the color mode\nand level maxes that applied at the time of its construction. These are\nused to interpret the input arguments and to format the output e.g. when\nsaturation() is requested.\nInternally we store an array representing the ideal RGBA values in floating\npoint form, normalized from 0 to 1. From this we calculate the closest\nscreen color (RGBA levels from 0 to 255) and expose this to the renderer.\nWe also cache normalized, floating point components of the color in various\nrepresentations as they are calculated. This is done to prevent repeating a\nconversion that has already been performed.\n",
"!url": "https://p5js.org/reference/#/p5/p5.Color",
"prototype": {
"undefined": {
"!type": "fn()",
"!doc": "For HSB and HSL, interpret the gray level as a brightness/lightness\nvalue (they are equivalent when chroma is zero). For RGB, normalize the\ngray level according to the blue maximum.\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
}
}
}
},
"Shape": {
"p5": {
"!type": "fn()",
"!url": "https://p5js.org/reference/#/p5/p5",
"prototype": {
"arc": {
"!type": "fn(a: number, b: number, c: number, d: number, start: number, stop: number, mode?: Constant) -> !this",
"!doc": "Draw an arc to the screen. If called with only a, b, c, d, start, and\nstop, the arc will be drawn as an open pie. If mode is provided, the arc\nwill be drawn either open, as a chord, or as a pie as specified. The\norigin may be changed with the ellipseMode() function.<br><br>\nNote that drawing a full circle (ex: 0 to TWO_PI) will appear blank\nbecause 0 and TWO_PI are the same position on the unit circle. The\nbest way to handle this is by using the ellipse() function instead\nto create a closed ellipse, and to use the arc() function\nonly to draw parts of an ellipse.\n",
"!url": "https://p5js.org/reference/#/p5/arc"
},
"ellipse": {
"!type": "fn(x: number, y: number, w: number, h?: number) -> !this",
"!doc": "Draws an ellipse (oval) to the screen. An ellipse with equal width and\nheight is a circle. By default, the first two parameters set the location,\nand the third and fourth parameters set the shape&#39;s width and height. If\nno height is specified, the value of width is used for both the width and\nheight. If a negative height or width is specified, the absolute value is taken.\nThe origin may be changed with the ellipseMode() function.\n",
"!url": "https://p5js.org/reference/#/p5/ellipse"
},
"line": {
"!type": "fn(x1: number, y1: number, x2: number, y2: number) -> !this",
"!doc": "Draws a line (a direct path between two points) to the screen. The version\nof line() with four parameters draws the line in 2D. To color a line, use\nthe stroke() function. A line cannot be filled, therefore the fill()\nfunction will not affect the color of a line. 2D lines are drawn with a\nwidth of one pixel by default, but this can be changed with the\nstrokeWeight() function.\n",
"!url": "https://p5js.org/reference/#/p5/line"
},
"point": {
"!type": "fn(x: number, y: number) -> !this",
"!doc": "Draws a point, a coordinate in space at the dimension of one pixel.\nThe first parameter is the horizontal value for the point, the second\nvalue is the vertical value for the point. The color of the point is\ndetermined by the current stroke.\n",
"!url": "https://p5js.org/reference/#/p5/point"
},
"quad": {
"!type": "fn() -> !this",
"!doc": "Draw a quad. A quad is a quadrilateral, a four sided polygon. It is\nsimilar to a rectangle, but the angles between its edges are not\nconstrained to ninety degrees. The first pair of parameters (x1,y1)\nsets the first vertex and the subsequent pairs should proceed\nclockwise or counter-clockwise around the defined shape.\n",
"!url": "https://p5js.org/reference/#/p5/quad"
},
"rect": {
"!type": "fn() -> +P5",
"!doc": "Draws a rectangle to the screen. A rectangle is a four-sided shape with\nevery angle at ninety degrees. By default, the first two parameters set\nthe location of the upper-left corner, the third sets the width, and the\nfourth sets the height. The way these parameters are interpreted, however,\nmay be changed with the rectMode() function.\n<br><br>\nThe fifth, sixth, seventh and eighth parameters, if specified,\ndetermine corner radius for the top-right, top-left, lower-right and\nlower-left corners, respectively. An omitted corner radius parameter is set\nto the value of the previously specified radius value in the parameter list.\n",
"!url": "https://p5js.org/reference/#/p5/rect"
},
"triangle": {
"!type": "fn(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number) -> !this",
"!doc": "A triangle is a plane created by connecting three points. The first two\narguments specify the first point, the middle two arguments specify the\nsecond point, and the last two arguments specify the third point.\n",
"!url": "https://p5js.org/reference/#/p5/triangle"
},
"ellipseMode": {
"!type": "fn(mode: Constant) -> !this",
"!doc": "Modifies the location from which ellipses are drawn by changing the way\nin which parameters given to ellipse() are interpreted.\n<br><br>\nThe default mode is ellipseMode(CENTER), which interprets the first two\nparameters of ellipse() as the shape&#39;s center point, while the third and\nfourth parameters are its width and height.\n<br><br>\nellipseMode(RADIUS) also uses the first two parameters of ellipse() as\nthe shape&#39;s center point, but uses the third and fourth parameters to\nspecify half of the shapes&#39;s width and height.\n<br><br>\nellipseMode(CORNER) interprets the first two parameters of ellipse() as\nthe upper-left corner of the shape, while the third and fourth parameters\nare its width and height.\n<br><br>\nellipseMode(CORNERS) interprets the first two parameters of ellipse() as\nthe location of one corner of the ellipse&#39;s bounding box, and the third\nand fourth parameters as the location of the opposite corner.\n<br><br>\nThe parameter must be written in ALL CAPS because Javascript is a\ncase-sensitive language.\n",
"!url": "https://p5js.org/reference/#/p5/ellipseMode"
},
"noSmooth": {
"!type": "fn() -> !this",
"!doc": "Draws all geometry with jagged (aliased) edges. Note that smooth() is\nactive by default, so it is necessary to call noSmooth() to disable\nsmoothing of geometry, images, and fonts.\n",
"!url": "https://p5js.org/reference/#/p5/noSmooth"
},
"rectMode": {
"!type": "fn(mode: Constant) -> !this",
"!doc": "Modifies the location from which rectangles are drawn by changing the way\nin which parameters given to rect() are interpreted.\n<br><br>\nThe default mode is rectMode(CORNER), which interprets the first two\nparameters of rect() as the upper-left corner of the shape, while the\nthird and fourth parameters are its width and height.\n<br><br>\nrectMode(CORNERS) interprets the first two parameters of rect() as the\nlocation of one corner, and the third and fourth parameters as the\nlocation of the opposite corner.\n<br><br>\nrectMode(CENTER) interprets the first two parameters of rect() as the\nshape&#39;s center point, while the third and fourth parameters are its\nwidth and height.\n<br><br>\nrectMode(RADIUS) also uses the first two parameters of rect() as the\nshape&#39;s center point, but uses the third and fourth parameters to specify\nhalf of the shapes&#39;s width and height.\n<br><br>\nThe parameter must be written in ALL CAPS because Javascript is a\ncase-sensitive language.\n",
"!url": "https://p5js.org/reference/#/p5/rectMode"
},
"smooth": {
"!type": "fn() -> !this",
"!doc": "Draws all geometry with smooth (anti-aliased) edges. smooth() will also\nimprove image quality of resized images. Note that smooth() is active by\ndefault; noSmooth() can be used to disable smoothing of geometry,\nimages, and fonts.\n",
"!url": "https://p5js.org/reference/#/p5/smooth"
},
"strokeCap": {
"!type": "fn(cap: Constant) -> !this",
"!doc": "Sets the style for rendering line endings. These ends are either squared,\nextended, or rounded, each of which specified with the corresponding\nparameters: SQUARE, PROJECT, and ROUND. The default cap is ROUND.\n",
"!url": "https://p5js.org/reference/#/p5/strokeCap"
},
"strokeJoin": {
"!type": "fn(join: Constant) -> !this",
"!doc": "Sets the style of the joints which connect line segments. These joints\nare either mitered, beveled, or rounded and specified with the\ncorresponding parameters MITER, BEVEL, and ROUND. The default joint is\nMITER.\n",
"!url": "https://p5js.org/reference/#/p5/strokeJoin"
},
"strokeWeight": {
"!type": "fn(weight: number) -> +P5",
"!doc": "Sets the width of the stroke used for lines, points, and the border\naround shapes. All widths are set in units of pixels.\n",
"!url": "https://p5js.org/reference/#/p5/strokeWeight"
},
"undefined": {
"!type": "fn(x0: number, y0: number, z0: number, x1: number, y1: number, z1: number) -> !this",
"!doc": "Draw a line given two points\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
},
"bezier": {
"!type": "fn() -> +P5",
"!doc": "Draws a cubic Bezier curve on the screen. These curves are defined by a\nseries of anchor and control points. The first two parameters specify\nthe first anchor point and the last two parameters specify the other\nanchor point, which become the first and last points on the curve. The\nmiddle parameters specify the two control points which define the shape\nof the curve. Approximately speaking, control points &quot;pull&quot; the curve\ntowards them.<br /><br />Bezier curves were developed by French\nautomotive engineer Pierre Bezier, and are commonly used in computer\ngraphics to define gently sloping curves. See also curve().\n",
"!url": "https://p5js.org/reference/#/p5/bezier"
},
"bezierPoint": {
"!type": "fn(a: number, b: number, c: number, d: number, t: number) -> number",
"!doc": "Evaluates the Bezier at position t for points a, b, c, d.\nThe parameters a and d are the first and last points\non the curve, and b and c are the control points.\nThe final parameter t varies between 0 and 1.\nThis can be done once with the x coordinates and a second time\nwith the y coordinates to get the location of a bezier curve at t.\n",
"!url": "https://p5js.org/reference/#/p5/bezierPoint"
},
"bezierTangent": {
"!type": "fn(a: number, b: number, c: number, d: number, t: number) -> number",
"!doc": "Evaluates the tangent to the Bezier at position t for points a, b, c, d.\nThe parameters a and d are the first and last points\non the curve, and b and c are the control points.\nThe final parameter t varies between 0 and 1.\n",
"!url": "https://p5js.org/reference/#/p5/bezierTangent"
},
"curve": {
"!type": "fn() -> +P5",
"!doc": "Draws a curved line on the screen between two points, given as the\nmiddle four parameters. The first two parameters are a control point, as\nif the curve came from this point even though it&#39;s not drawn. The last\ntwo parameters similarly describe the other control point. <br /><br />\nLonger curves can be created by putting a series of curve() functions\ntogether or using curveVertex(). An additional function called\ncurveTightness() provides control for the visual quality of the curve.\nThe curve() function is an implementation of Catmull-Rom splines.\n",
"!url": "https://p5js.org/reference/#/p5/curve"
},
"curveTightness": {
"!type": "fn(amount: number) -> !this",
"!doc": "Modifies the quality of forms created with curve() and curveVertex().\nThe parameter tightness determines how the curve fits to the vertex\npoints. The value 0.0 is the default value for tightness (this value\ndefines the curves to be Catmull-Rom splines) and the value 1.0 connects\nall the points with straight lines. Values within the range -5.0 and 5.0\nwill deform the curves but will leave them recognizable and as values\nincrease in magnitude, they will continue to deform.\n",
"!url": "https://p5js.org/reference/#/p5/curveTightness"
},
"curvePoint": {
"!type": "fn(a: number, b: number, c: number, d: number, t: number) -> number",
"!doc": "Evaluates the curve at position t for points a, b, c, d.\nThe parameter t varies between 0 and 1, a and d are points\non the curve, and b and c are the control points.\nThis can be done once with the x coordinates and a second time\nwith the y coordinates to get the location of a curve at t.\n",
"!url": "https://p5js.org/reference/#/p5/curvePoint"
},
"curveTangent": {
"!type": "fn(a: number, b: number, c: number, d: number, t: number) -> number",
"!doc": "Evaluates the tangent to the curve at position t for points a, b, c, d.\nThe parameter t varies between 0 and 1, a and d are points on the curve,\nand b and c are the control points.\n",
"!url": "https://p5js.org/reference/#/p5/curveTangent"
},
"beginContour": {
"!type": "fn() -> !this",
"!doc": "Use the beginContour() and endContour() functions to create negative\nshapes within shapes such as the center of the letter &#39;O&#39;. beginContour()\nbegins recording vertices for the shape and endContour() stops recording.\nThe vertices that define a negative shape must &quot;wind&quot; in the opposite\ndirection from the exterior shape. First draw vertices for the exterior\nclockwise order, then for internal shapes, draw vertices\nshape in counter-clockwise.\n<br><br>\nThese functions can only be used within a beginShape()/endShape() pair and\ntransformations such as translate(), rotate(), and scale() do not work\nwithin a beginContour()/endContour() pair. It is also not possible to use\nother shapes, such as ellipse() or rect() within.\n",
"!url": "https://p5js.org/reference/#/p5/beginContour"
},
"beginShape": {
"!type": "fn(kind?: Constant) -> !this",
"!doc": "Using the beginShape() and endShape() functions allow creating more\ncomplex forms. beginShape() begins recording vertices for a shape and\nendShape() stops recording. The value of the kind parameter tells it which\ntypes of shapes to create from the provided vertices. With no mode\nspecified, the shape can be any irregular polygon.\n<br><br>\nThe parameters available for beginShape() are POINTS, LINES, TRIANGLES,\nTRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the\nbeginShape() function, a series of vertex() commands must follow. To stop\ndrawing the shape, call endShape(). Each shape will be outlined with the\ncurrent stroke color and filled with the fill color.\n<br><br>\nTransformations such as translate(), rotate(), and scale() do not work\nwithin beginShape(). It is also not possible to use other shapes, such as\nellipse() or rect() within beginShape().\n",
"!url": "https://p5js.org/reference/#/p5/beginShape"
},
"bezierVertex": {
"!type": "fn(x2: number, y2: number, x3: number, y3: number, x4: number, y4: number) -> !this",
"!doc": "Specifies vertex coordinates for Bezier curves. Each call to\nbezierVertex() defines the position of two control points and\none anchor point of a Bezier curve, adding a new segment to a\nline or shape.\n<br><br>\nThe first time bezierVertex() is used within a\nbeginShape() call, it must be prefaced with a call to vertex()\nto set the first anchor point. This function must be used between\nbeginShape() and endShape() and only when there is no MODE\nparameter specified to beginShape().\n",
"!url": "https://p5js.org/reference/#/p5/bezierVertex"
},
"curveVertex": {
"!type": "fn(x: number, y: number) -> !this",
"!doc": "Specifies vertex coordinates for curves. This function may only\nbe used between beginShape() and endShape() and only when there\nis no MODE parameter specified to beginShape().\n<br><br>\nThe first and last points in a series of curveVertex() lines will be used to\nguide the beginning and end of a the curve. A minimum of four\npoints is required to draw a tiny curve between the second and\nthird points. Adding a fifth point with curveVertex() will draw\nthe curve between the second, third, and fourth points. The\ncurveVertex() function is an implementation of Catmull-Rom\nsplines.\n",
"!url": "https://p5js.org/reference/#/p5/curveVertex"
},
"endContour": {
"!type": "fn() -> !this",
"!doc": "Use the beginContour() and endContour() functions to create negative\nshapes within shapes such as the center of the letter &#39;O&#39;. beginContour()\nbegins recording vertices for the shape and endContour() stops recording.\nThe vertices that define a negative shape must &quot;wind&quot; in the opposite\ndirection from the exterior shape. First draw vertices for the exterior\nclockwise order, then for internal shapes, draw vertices\nshape in counter-clockwise.\n<br><br>\nThese functions can only be used within a beginShape()/endShape() pair and\ntransformations such as translate(), rotate(), and scale() do not work\nwithin a beginContour()/endContour() pair. It is also not possible to use\nother shapes, such as ellipse() or rect() within.\n",
"!url": "https://p5js.org/reference/#/p5/endContour"
},
"endShape": {
"!type": "fn(mode?: Constant) -> !this",
"!doc": "The endShape() function is the companion to beginShape() and may only be\ncalled after beginShape(). When endshape() is called, all of image data\ndefined since the previous call to beginShape() is written into the image\nbuffer. The constant CLOSE as the value for the MODE parameter to close\nthe shape (to connect the beginning and the end).\n",
"!url": "https://p5js.org/reference/#/p5/endShape"
},
"quadraticVertex": {
"!type": "fn(cx: number, cy: number, x3: number, y3: number) -> !this",
"!doc": "Specifies vertex coordinates for quadratic Bezier curves. Each call to\nquadraticVertex() defines the position of one control points and one\nanchor point of a Bezier curve, adding a new segment to a line or shape.\nThe first time quadraticVertex() is used within a beginShape() call, it\nmust be prefaced with a call to vertex() to set the first anchor point.\nThis function must be used between beginShape() and endShape() and only\nwhen there is no MODE parameter specified to beginShape().\n",
"!url": "https://p5js.org/reference/#/p5/quadraticVertex"
},
"vertex": {
"!type": "fn(x: number, y: number, z?: number) -> !this",
"!doc": "All shapes are constructed by connecting a series of vertices. vertex()\nis used to specify the vertex coordinates for points, lines, triangles,\nquads, and polygons. It is used exclusively within the beginShape() and\nendShape() functions.\n",
"!url": "https://p5js.org/reference/#/p5/vertex"
},
"loadModel": {
"!type": "fn() -> +Lights, Camera.p5.Geometry",
"!doc": "Load a 3d model from an OBJ file.\n<br><br>\nOne of the limitations of the OBJ format is that it doesn&#39;t have a built-in\nsense of scale. This means that models exported from different programs might\nbe very different sizes. If your model isn&#39;t displaying, try calling\nloadModel() with the normalized parameter set to true. This will resize the\nmodel to a scale appropriate for p5. You can also make additional changes to\nthe final size of your model with the scale() function.\n",
"!url": "https://p5js.org/reference/#/p5/loadModel"
},
"model": {
"!type": "fn(model: Lights, Camera.p5.Geometry)",
"!doc": "Render a 3d model to the screen.\n",
"!url": "https://p5js.org/reference/#/p5/model"
},
"plane": {
"!type": "fn(width: number, height: number, detailX?: number, detailY?: number) -> +P5",
"!doc": "Draw a plane with given a width and height\n",
"!url": "https://p5js.org/reference/#/p5/plane"
},
"box": {
"!type": "fn(width: number, Height?: number, depth?: number, detailX?: number, detailY?: number) -> !this",
"!doc": "Draw a box with given width, height and depth\n",
"!url": "https://p5js.org/reference/#/p5/box"
},
"sphere": {
"!type": "fn(radius: number, detailX?: number, detailY?: number) -> !this",
"!doc": "Draw a sphere with given radius\n",
"!url": "https://p5js.org/reference/#/p5/sphere"
},
"cylinder": {
"!type": "fn(radius: number, height: number, detailX?: number, detailY?: number) -> !this",
"!doc": "Draw a cylinder with given radius and height\n",
"!url": "https://p5js.org/reference/#/p5/cylinder"
},
"cone": {
"!type": "fn(radius: number, height: number, detailX?: number, detailY?: number) -> !this",
"!doc": "Draw a cone with given radius and height\n",
"!url": "https://p5js.org/reference/#/p5/cone"
},
"ellipsoid": {
"!type": "fn(radiusx: number, radiusy: number, radiusz: number, detailX?: number, detailY?: number) -> !this",
"!doc": "Draw an ellipsoid with given radius\n",
"!url": "https://p5js.org/reference/#/p5/ellipsoid"
},
"torus": {
"!type": "fn(radius: number, tubeRadius: number, detailX?: number, detailY?: number) -> !this",
"!doc": "Draw a torus with given radius and tube radius\n",
"!url": "https://p5js.org/reference/#/p5/torus"
}
}
}
},
"Constants": {
"p5": {
"!type": "fn()",
"!url": "https://p5js.org/reference/#/p5/p5",
"prototype": {
"P2D": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/P2D"
},
"WEBGL": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/WEBGL"
},
"HALF_PI": {
"!type": "number",
"!doc": "HALF_PI is a mathematical constant with the value\n1.57079632679489661923. It is half the ratio of the\ncircumference of a circle to its diameter. It is useful in\ncombination with the trigonometric functions sin() and cos().\n",
"!url": "https://p5js.org/reference/#/p5/HALF_PI"
},
"PI": {
"!type": "number",
"!doc": "PI is a mathematical constant with the value\n3.14159265358979323846. It is the ratio of the circumference\nof a circle to its diameter. It is useful in combination with\nthe trigonometric functions sin() and cos().\n",
"!url": "https://p5js.org/reference/#/p5/PI"
},
"QUARTER_PI": {
"!type": "number",
"!doc": "QUARTER_PI is a mathematical constant with the value 0.7853982.\nIt is one quarter the ratio of the circumference of a circle to\nits diameter. It is useful in combination with the trigonometric\nfunctions sin() and cos().\n",
"!url": "https://p5js.org/reference/#/p5/QUARTER_PI"
},
"TAU": {
"!type": "number",
"!doc": "TAU is an alias for TWO_PI, a mathematical constant with the\nvalue 6.28318530717958647693. It is twice the ratio of the\ncircumference of a circle to its diameter. It is useful in\ncombination with the trigonometric functions sin() and cos().\n",
"!url": "https://p5js.org/reference/#/p5/TAU"
},
"TWO_PI": {
"!type": "number",
"!doc": "TWO_PI is a mathematical constant with the value\n6.28318530717958647693. It is twice the ratio of the\ncircumference of a circle to its diameter. It is useful in\ncombination with the trigonometric functions sin() and cos().\n",
"!url": "https://p5js.org/reference/#/p5/TWO_PI"
},
"DEGREES": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/DEGREES"
},
"RADIANS": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/RADIANS"
},
"CORNER": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/CORNER"
},
"CORNERS": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/CORNERS"
},
"RADIUS": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/RADIUS"
},
"RIGHT": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/RIGHT"
},
"LEFT": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/LEFT"
},
"CENTER": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/CENTER"
},
"TOP": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/TOP"
},
"BOTTOM": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/BOTTOM"
},
"BASELINE": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/BASELINE"
},
"POINTS": {
"!type": "number",
"!url": "https://p5js.org/reference/#/p5/POINTS"
},
"LINES": {
"!type": "number",
"!url": "https://p5js.org/reference/#/p5/LINES"
},
"LINE_STRIP": {
"!type": "number",
"!url": "https://p5js.org/reference/#/p5/LINE_STRIP"
},
"LINE_LOOP": {
"!type": "number",
"!url": "https://p5js.org/reference/#/p5/LINE_LOOP"
},
"TRIANGLES": {
"!type": "number",
"!url": "https://p5js.org/reference/#/p5/TRIANGLES"
},
"TRIANGLE_FAN": {
"!type": "number",
"!url": "https://p5js.org/reference/#/p5/TRIANGLE_FAN"
},
"TRIANGLE_STRIP": {
"!type": "number",
"!url": "https://p5js.org/reference/#/p5/TRIANGLE_STRIP"
},
"QUADS": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/QUADS"
},
"QUAD_STRIP": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/QUAD_STRIP"
},
"CLOSE": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/CLOSE"
},
"OPEN": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/OPEN"
},
"CHORD": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/CHORD"
},
"PIE": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/PIE"
},
"PROJECT": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/PROJECT"
},
"SQUARE": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/SQUARE"
},
"ROUND": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/ROUND"
},
"BEVEL": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/BEVEL"
},
"MITER": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/MITER"
},
"RGB": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/RGB"
},
"HSB": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/HSB"
},
"HSL": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/HSL"
},
"BLEND": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/BLEND"
},
"ADD": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/ADD"
},
"DARKEST": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/DARKEST"
},
"LIGHTEST": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/LIGHTEST"
},
"DIFFERENCE": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/DIFFERENCE"
},
"EXCLUSION": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/EXCLUSION"
},
"MULTIPLY": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/MULTIPLY"
},
"SCREEN": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/SCREEN"
},
"REPLACE": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/REPLACE"
},
"OVERLAY": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/OVERLAY"
},
"HARD_LIGHT": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/HARD_LIGHT"
},
"SOFT_LIGHT": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/SOFT_LIGHT"
},
"DODGE": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/DODGE"
},
"BURN": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/BURN"
},
"THRESHOLD": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/THRESHOLD"
},
"GRAY": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/GRAY"
},
"OPAQUE": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/OPAQUE"
},
"INVERT": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/INVERT"
},
"POSTERIZE": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/POSTERIZE"
},
"DILATE": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/DILATE"
},
"ERODE": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/ERODE"
},
"BLUR": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/BLUR"
},
"NORMAL": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/NORMAL"
},
"ITALIC": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/ITALIC"
},
"BOLD": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/BOLD"
},
"LANDSCAPE": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/LANDSCAPE"
},
"PORTRAIT": {
"!type": "string",
"!url": "https://p5js.org/reference/#/p5/PORTRAIT"
}
}
}
},
"Structure": {
"p5": {
"!type": "fn()",
"!url": "https://p5js.org/reference/#/p5/p5",
"prototype": {
"undefined": {
"!type": "fn(sketch: fn(), node?: HTMLElement, sync?: bool) -> +P5",
"!doc": "This is the p5 instance constructor.\nA p5 instance holds all the properties and methods related to\na p5 sketch. It expects an incoming sketch closure and it can also\ntake an optional node parameter for attaching the generated p5 canvas\nto a node. The sketch closure takes the newly created p5 instance as\nits sole argument and may optionally set preload(), setup(), and/or\ndraw() properties on it for running a sketch.\nA p5 sketch can run in &quot;global&quot; or &quot;instance&quot; mode:\n&quot;global&quot; - all properties and methods are attached to the window\n&quot;instance&quot; - all properties and methods are bound to this p5 object\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
},
"preload": {
"!type": "fn()",
"!doc": "Called directly before setup(), the preload() function is used to handle\nasynchronous loading of external files. If a preload function is\ndefined, setup() will wait until any load calls within have finished.\nNothing besides load calls should be inside preload (loadImage,\nloadJSON, loadFont, loadStrings, etc).<br><br>\nBy default the text &quot;loading...&quot; will be displayed. To make your own\nloading page, include an HTML element with id &quot;p5_loading&quot; in your\npage. More information <a href=\"http://bit.ly/2kQ6Nio\">here</a>.\n",
"!url": "https://p5js.org/reference/#/p5/preload"
},
"setup": {
"!type": "fn()",
"!doc": "The setup() function is called once when the program starts. It&#39;s used to\ndefine initial environment properties such as screen size and background\ncolor and to load media such as images and fonts as the program starts.\nThere can only be one setup() function for each program and it shouldn&#39;t\nbe called again after its initial execution.\n<br><br>\nNote: Variables declared within setup() are not accessible within other\nfunctions, including draw().\n",
"!url": "https://p5js.org/reference/#/p5/setup"
},
"draw": {
"!type": "fn()",
"!doc": "Called directly after setup(), the draw() function continuously executes\nthe lines of code contained inside its block until the program is stopped\nor noLoop() is called. Note if noLoop() is called in setup(), draw() will\nstill be executed once before stopping. draw() is called automatically and\nshould never be called explicitly.\n<br><br>\nIt should always be controlled with noLoop(), redraw() and loop(). After\nnoLoop() stops the code in draw() from executing, redraw() causes the\ncode inside draw() to execute once, and loop() will cause the code\ninside draw() to resume executing continuously.\n<br><br>\nThe number of times draw() executes in each second may be controlled with\nthe frameRate() function.\n<br><br>\nThere can only be one draw() function for each sketch, and draw() must\nexist if you want the code to run continuously, or to process events such\nas mousePressed(). Sometimes, you might have an empty call to draw() in\nyour program, as shown in the above example.\n<br><br>\nIt is important to note that the drawing coordinate system will be reset\nat the beginning of each draw() call. If any transformations are performed\nwithin draw() (ex: scale, rotate, translate, their effects will be\nundone at the beginning of draw(), so transformations will not accumulate\nover time. On the other hand, styling applied (ex: fill, stroke, etc) will\nremain in effect.\n",
"!url": "https://p5js.org/reference/#/p5/draw"
},
"remove": {
"!type": "fn()",
"!doc": "Removes the entire p5 sketch. This will remove the canvas and any\nelements created by p5.js. It will also stop the draw loop and unbind\nany properties or methods from the window global scope. It will\nleave a variable p5 in case you wanted to create a new p5 sketch.\nIf you like, you can set p5 = null to erase it.\n",
"!url": "https://p5js.org/reference/#/p5/remove"
},
"noLoop": {
"!type": "fn()",
"!doc": "Stops p5.js from continuously executing the code within draw().\nIf loop() is called, the code in draw() begins to run continuously again.\nIf using noLoop() in setup(), it should be the last line inside the block.\n<br><br>\nWhen noLoop() is used, it&#39;s not possible to manipulate or access the\nscreen inside event handling functions such as mousePressed() or\nkeyPressed(). Instead, use those functions to call redraw() or loop(),\nwhich will run draw(), which can update the screen properly. This means\nthat when noLoop() has been called, no drawing can happen, and functions\nlike saveFrame() or loadPixels() may not be used.\n<br><br>\nNote that if the sketch is resized, redraw() will be called to update\nthe sketch, even after noLoop() has been specified. Otherwise, the sketch\nwould enter an odd state until loop() was called.\n",
"!url": "https://p5js.org/reference/#/p5/noLoop"
},
"loop": {
"!type": "fn()",
"!doc": "By default, p5.js loops through draw() continuously, executing the code\nwithin it. However, the draw() loop may be stopped by calling noLoop().\nIn that case, the draw() loop can be resumed with loop().\n",
"!url": "https://p5js.org/reference/#/p5/loop"
},
"push": {
"!type": "fn()",
"!doc": "The push() function saves the current drawing style settings and\ntransformations, while pop() restores these settings. Note that these\nfunctions are always used together. They allow you to change the style\nand transformation settings and later return to what you had. When a new\nstate is started with push(), it builds on the current style and transform\ninformation. The push() and pop() functions can be embedded to provide\nmore control. (See the second example for a demonstration.)\n<br><br>\npush() stores information related to the current transformation state\nand style settings controlled by the following functions: fill(),\nstroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(),\nimageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(),\ntextFont(), textMode(), textSize(), textLeading().\n",
"!url": "https://p5js.org/reference/#/p5/push"
},
"pop": {
"!type": "fn()",
"!doc": "The push() function saves the current drawing style settings and\ntransformations, while pop() restores these settings. Note that these\nfunctions are always used together. They allow you to change the style\nand transformation settings and later return to what you had. When a new\nstate is started with push(), it builds on the current style and transform\ninformation. The push() and pop() functions can be embedded to provide\nmore control. (See the second example for a demonstration.)\n<br><br>\npush() stores information related to the current transformation state\nand style settings controlled by the following functions: fill(),\nstroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(),\nimageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(),\ntextFont(), textMode(), textSize(), textLeading().\n",
"!url": "https://p5js.org/reference/#/p5/pop"
},
"redraw": {
"!type": "fn(n?: Integer)",
"!doc": "Executes the code within draw() one time. This functions allows the\n program to update the display window only when necessary, for example\n when an event registered by mousePressed() or keyPressed() occurs.\n <br><br>\n In structuring a program, it only makes sense to call redraw() within\n events such as mousePressed(). This is because redraw() does not run\n draw() immediately (it only sets a flag that indicates an update is\n needed).\n <br><br>\n The redraw() function does not work properly when called inside draw().\n To enable/disable animations, use loop() and noLoop().\n <br><br>\n In addition you can set the number of redraws per method call. Just\n add an integer as single parameter for the number of redraws.\n",
"!url": "https://p5js.org/reference/#/p5/redraw"
}
}
}
},
"Environment": {
"p5": {
"!type": "fn()",
"!url": "https://p5js.org/reference/#/p5/p5",
"prototype": {
"print": {
"!type": "fn(contents: Any)",
"!doc": "The print() function writes to the console area of your browser.\nThis function is often helpful for looking at the data a program is\nproducing. This function creates a new line of text for each call to\nthe function. Individual elements can be\nseparated with quotes (&quot;&quot;) and joined with the addition operator (+).\n<br><br>\nWhile print() is similar to console.log(), it does not directly map to\nit in order to simulate easier to understand behavior than\nconsole.log(). Due to this, it is slower. For fastest results, use\nconsole.log().\n",
"!url": "https://p5js.org/reference/#/p5/print"
},
"frameCount": {
"!type": "number",
"!doc": "The system variable frameCount contains the number of frames that have\nbeen displayed since the program started. Inside setup() the value is 0,\nafter the first iteration of draw it is 1, etc.\n",
"!url": "https://p5js.org/reference/#/p5/frameCount"
},
"focused": {
"!type": "bool",
"!doc": "Confirms if the window a p5.js program is in is &quot;focused,&quot; meaning that\nthe sketch will accept mouse or keyboard input. This variable is\n&quot;true&quot; if the window is focused and &quot;false&quot; if not.\n",
"!url": "https://p5js.org/reference/#/p5/focused"
},
"cursor": {
"!type": "fn(type: string, x?: number, y?: number)",
"!doc": "Sets the cursor to a predefined symbol or an image, or makes it visible\nif already hidden. If you are trying to set an image as the cursor, the\nrecommended size is 16x16 or 32x32 pixels. It is not possible to load an\nimage as the cursor if you are exporting your program for the Web, and not\nall MODES work with all browsers. The values for parameters x and y must\nbe less than the dimensions of the image.\n",
"!url": "https://p5js.org/reference/#/p5/cursor"
},
"frameRate": {
"!type": "fn() -> !this",
"!doc": "Specifies the number of frames to be displayed every second. For example,\nthe function call frameRate(30) will attempt to refresh 30 times a second.\nIf the processor is not fast enough to maintain the specified rate, the\nframe rate will not be achieved. Setting the frame rate within setup() is\nrecommended. The default rate is 60 frames per second. This is the same as\nsetFrameRate(val).\n<br><br>\nCalling frameRate() with no arguments returns the current framerate. The\ndraw function must run at least once before it will return a value. This\nis the same as getFrameRate().\n<br><br>\nCalling frameRate() with arguments that are not of the type numbers\nor are non positive also returns current framerate.\n",
"!url": "https://p5js.org/reference/#/p5/frameRate"
},
"undefined": {
"!type": "fn()",
"!doc": "Prints out all the colors in the color pallete with white text.\nFor color blindness testing.\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
},
"noCursor": {
"!type": "fn()",
"!doc": "Hides the cursor from view.\n",
"!url": "https://p5js.org/reference/#/p5/noCursor"
},
"displayWidth": {
"!type": "number",
"!doc": "System variable that stores the width of the entire screen display. This\nis used to run a full-screen program on any display size.\n",
"!url": "https://p5js.org/reference/#/p5/displayWidth"
},
"displayHeight": {
"!type": "number",
"!doc": "System variable that stores the height of the entire screen display. This\nis used to run a full-screen program on any display size.\n",
"!url": "https://p5js.org/reference/#/p5/displayHeight"
},
"windowWidth": {
"!type": "number",
"!doc": "System variable that stores the width of the inner window, it maps to\nwindow.innerWidth.\n",
"!url": "https://p5js.org/reference/#/p5/windowWidth"
},
"windowHeight": {
"!type": "number",
"!doc": "System variable that stores the height of the inner window, it maps to\nwindow.innerHeight.\n",
"!url": "https://p5js.org/reference/#/p5/windowHeight"
},
"windowResized": {
"!type": "fn()",
"!doc": "The windowResized() function is called once every time the browser window\nis resized. This is a good place to resize the canvas or do any other\nadjustments to accommodate the new window size.\n",
"!url": "https://p5js.org/reference/#/p5/windowResized"
},
"width": {
"!type": "number",
"!doc": "System variable that stores the width of the drawing canvas. This value\nis set by the first parameter of the createCanvas() function.\nFor example, the function call createCanvas(320, 240) sets the width\nvariable to the value 320. The value of width defaults to 100 if\ncreateCanvas() is not used in a program.\n",
"!url": "https://p5js.org/reference/#/p5/width"
},
"height": {
"!type": "number",
"!doc": "System variable that stores the height of the drawing canvas. This value\nis set by the second parameter of the createCanvas() function. For\nexample, the function call createCanvas(320, 240) sets the height\nvariable to the value 240. The value of height defaults to 100 if\ncreateCanvas() is not used in a program.\n",
"!url": "https://p5js.org/reference/#/p5/height"
},
"fullscreen": {
"!type": "fn(val?: bool) -> bool",
"!doc": "If argument is given, sets the sketch to fullscreen or not based on the\nvalue of the argument. If no argument is given, returns the current\nfullscreen state. Note that due to browser restrictions this can only\nbe called on user input, for example, on mouse press like the example\nbelow.\n",
"!url": "https://p5js.org/reference/#/p5/fullscreen"
},
"pixelDensity": {
"!type": "fn(val?: number) -> number",
"!doc": "Sets the pixel scaling for high pixel density displays. By default\npixel density is set to match display density, call pixelDensity(1)\nto turn this off. Calling pixelDensity() with no arguments returns\nthe current pixel density of the sketch.\n",
"!url": "https://p5js.org/reference/#/p5/pixelDensity"
},
"displayDensity": {
"!type": "fn() -> number",
"!doc": "Returns the pixel density of the current display the sketch is running on.\n",
"!url": "https://p5js.org/reference/#/p5/displayDensity"
},
"getURL": {
"!type": "fn() -> string",
"!doc": "Gets the current URL.\n",
"!url": "https://p5js.org/reference/#/p5/getURL"
},
"getURLPath": {
"!type": "fn() -> [string]",
"!doc": "Gets the current URL path as an array.\n",
"!url": "https://p5js.org/reference/#/p5/getURLPath"
},
"getURLParams": {
"!type": "fn() -> +Object",
"!doc": "Gets the current URL params as an Object.\n",
"!url": "https://p5js.org/reference/#/p5/getURLParams"
}
}
},
"p5.Element": {
"!type": "fn(elt: string, pInst?: P5) -> +DOM.p5.Element",
"!doc": "Base class for all elements added to a sketch, including canvas,\ngraphics buffers, and other HTML elements. Methods in blue are\nincluded in the core functionality, methods in brown are added\nwith the <a href=\"http://p5js.org/reference/#/libraries/p5.dom\">p5.dom\nlibrary</a>.\nIt is not called directly, but p5.Element\nobjects are created by calling createCanvas, createGraphics,\nor in the p5.dom library, createDiv, createImg, createInput, etc.\n",
"!url": "https://p5js.org/reference/#/p5/p5.Element",
"prototype": {
"undefined": {
"!type": "fn() -> +Undefined",
"!doc": "_globalInit\nTODO: ???\nif sketch is on window\nassume &quot;global&quot; mode\nand instantiate p5 automatically\notherwise do nothing\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
}
}
}
},
"DOM": {
"p5.Element": {
"!type": "fn(elt: string, pInst?: P5) -> +DOM.p5.Element",
"!doc": "Base class for all elements added to a sketch, including canvas,\ngraphics buffers, and other HTML elements. Methods in blue are\nincluded in the core functionality, methods in brown are added\nwith the <a href=\"http://p5js.org/reference/#/libraries/p5.dom\">p5.dom\nlibrary</a>.\nIt is not called directly, but p5.Element\nobjects are created by calling createCanvas, createGraphics,\nor in the p5.dom library, createDiv, createImg, createInput, etc.\n",
"!url": "https://p5js.org/reference/#/p5/p5.Element",
"prototype": {
"elt": {
"!type": "?",
"!doc": "Underlying HTML element. All normal HTML methods can be called on this.\n",
"!url": "https://p5js.org/reference/#/p5/elt"
},
"parent": {
"!type": "fn() -> !this",
"!doc": "Attaches the element to the parent specified. A way of setting\n the container for the element. Accepts either a string ID, DOM\n node, or p5.Element. If no arguments given, parent node is returned.\n For more ways to position the canvas, see the\n <a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>\n positioning the canvas</a> wiki page.\n",
"!url": "https://p5js.org/reference/#/p5/parent"
},
"id": {
"!type": "fn() -> !this",
"!doc": "Sets the ID of the element. If no ID argument is passed in, it instead\n returns the current ID of the element.\n",
"!url": "https://p5js.org/reference/#/p5/id"
},
"class": {
"!type": "fn() -> !this",
"!doc": "Adds given class to the element. If no class argument is passed in, it\n instead returns a string containing the current class(es) of the element.\n",
"!url": "https://p5js.org/reference/#/p5/class"
},
"mousePressed": {
"!type": "fn(fxn: fn()) -> !this",
"!doc": "The .mousePressed() function is called once after every time a\nmouse button is pressed over the element. This can be used to\nattach element specific event listeners.\n",
"!url": "https://p5js.org/reference/#/p5/mousePressed"
},
"doubleClicked": {
"!type": "fn(fxn: fn()) -> +DOM.p5.Element",
"!doc": "The .doubleClicked() function is called once after every time a\nmouse button is pressed twice over the element. This can be used to\nattach element and action specific event listeners.\n",
"!url": "https://p5js.org/reference/#/p5/doubleClicked"
},
"mouseWheel": {
"!type": "fn(fxn: fn()) -> !this",
"!doc": "The .mouseWheel() function is called once after every time a\nmouse wheel is scrolled over the element. This can be used to\nattach element specific event listeners.\n<br><br>\nThe function accepts a callback function as argument which will be executed\nwhen the <code>wheel</code> event is triggered on the element, the callback function is\npassed one argument <code>event</code>. The <code>event.deltaY</code> property returns negative\nvalues if the mouse wheel is rotated up or away from the user and positive\nin the other direction. The <code>event.deltaX</code> does the same as <code>event.deltaY</code>\nexcept it reads the horizontal wheel scroll of the mouse wheel.\n<br><br>\nOn OS X with &quot;natural&quot; scrolling enabled, the <code>event.deltaY</code> values are\nreversed.\n",
"!url": "https://p5js.org/reference/#/p5/mouseWheel"
},
"mouseReleased": {
"!type": "fn(fxn: fn()) -> !this",
"!doc": "The .mouseReleased() function is called once after every time a\nmouse button is released over the element. This can be used to\nattach element specific event listeners.\n",
"!url": "https://p5js.org/reference/#/p5/mouseReleased"
},
"mouseClicked": {
"!type": "fn(fxn: fn()) -> !this",
"!doc": "The .mouseClicked() function is called once after a mouse button is\npressed and released over the element. This can be used to\nattach element specific event listeners.\n",
"!url": "https://p5js.org/reference/#/p5/mouseClicked"
},
"mouseMoved": {
"!type": "fn(fxn: fn()) -> !this",
"!doc": "The .mouseMoved() function is called once every time a\nmouse moves over the element. This can be used to attach an\nelement specific event listener.\n",
"!url": "https://p5js.org/reference/#/p5/mouseMoved"
},
"mouseOver": {
"!type": "fn(fxn: fn()) -> !this",
"!doc": "The .mouseOver() function is called once after every time a\nmouse moves onto the element. This can be used to attach an\nelement specific event listener.\n",
"!url": "https://p5js.org/reference/#/p5/mouseOver"
},
"changed": {
"!type": "fn(fxn: fn()) -> !this",
"!doc": "The .changed() function is called when the value of an\nelement is changed.\nThis can be used to attach an element specific event listener.\n",
"!url": "https://p5js.org/reference/#/p5/changed"
},
"input": {
"!type": "fn(fxn: fn()) -> !this",
"!doc": "The .input() function is called when any user input is\ndetected with an element. The input event is often used\nto detect keystrokes in a input element, or changes on a\nslider element. This can be used to attach an element specific\nevent listener.\n",
"!url": "https://p5js.org/reference/#/p5/input"
},
"mouseOut": {
"!type": "fn(fxn: fn()) -> !this",
"!doc": "The .mouseOut() function is called once after every time a\nmouse moves off the element. This can be used to attach an\nelement specific event listener.\n",
"!url": "https://p5js.org/reference/#/p5/mouseOut"
},
"touchStarted": {
"!type": "fn(fxn: fn()) -> !this",
"!doc": "The .touchStarted() function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.\n",
"!url": "https://p5js.org/reference/#/p5/touchStarted"
},
"touchMoved": {
"!type": "fn(fxn: fn()) -> !this",
"!doc": "The .touchMoved() function is called once after every time a touch move is\nregistered. This can be used to attach element specific event listeners.\n",
"!url": "https://p5js.org/reference/#/p5/touchMoved"
},
"touchEnded": {
"!type": "fn(fxn: fn()) -> !this",
"!doc": "The .touchEnded() function is called once after every time a touch is\nregistered. This can be used to attach element specific event listeners.\n",
"!url": "https://p5js.org/reference/#/p5/touchEnded"
},
"dragOver": {
"!type": "fn(fxn: fn()) -> !this",
"!doc": "The .dragOver() function is called once after every time a\nfile is dragged over the element. This can be used to attach an\nelement specific event listener.\n",
"!url": "https://p5js.org/reference/#/p5/dragOver"
},
"dragLeave": {
"!type": "fn(fxn: fn()) -> !this",
"!doc": "The .dragLeave() function is called once after every time a\ndragged file leaves the element area. This can be used to attach an\nelement specific event listener.\n",
"!url": "https://p5js.org/reference/#/p5/dragLeave"
},
"drop": {
"!type": "fn(callback: fn(), fxn: fn()) -> !this",
"!doc": "The .drop() function is called for each file dropped on the element.\nIt requires a callback that is passed a p5.File object. You can\noptionally pass two callbacks, the first one (required) is triggered\nfor each file dropped when the file is loaded. The second (optional)\nis triggered just once when a file (or files) are dropped.\n",
"!url": "https://p5js.org/reference/#/p5/drop"
},
"undefined": {
"!type": "fn()",
"!doc": "Helper fxn for sharing pixel methods\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
}
}
}
},
"Rendering": {
"p5.Renderer": {
"!type": "fn(elt: string, pInst?: P5, isMainCanvas?: bool) -> +Rendering.p5.Renderer",
"!proto": "DOM.p5.Element",
"!doc": "Main graphics and rendering context, as well as the base API\nimplementation for p5.js &quot;core&quot;. To be used as the superclass for\nRenderer2D and Renderer3D classes, respecitvely.\n",
"!url": "https://p5js.org/reference/#/p5/p5.Renderer",
"prototype": {
"undefined": {
"!type": "fn()",
"!doc": "Helper fxn to measure ascent and descent.\nAdapted from <a href=\"http://stackoverflow.com/a/25355178\">http://stackoverflow.com/a/25355178</a>\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
}
}
},
"p5": {
"!type": "fn()",
"!url": "https://p5js.org/reference/#/p5/p5",
"prototype": {
"undefined": {
"!type": "fn()",
"!doc": "shim for Uint8ClampedArray.slice\n(allows arrayCopy to work with pixels[])\nwith thanks to <a href=\"http://halfpapstudios.com/blog/tag/html5-canvas/\">http://halfpapstudios.com/blog/tag/html5-canvas/</a>\nEnumerable set to false to protect for...in from\nUint8ClampedArray.prototype pollution.\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
},
"createCanvas": {
"!type": "fn(w: number, h: number, renderer?: Constant) -> +HTMLCanvasElement",
"!doc": "Creates a canvas element in the document, and sets the dimensions of it\nin pixels. This method should be called only once at the start of setup.\nCalling createCanvas more than once in a sketch will result in very\nunpredicable behavior. If you want more than one drawing canvas\nyou could use createGraphics (hidden by default but it can be shown).\n<br><br>\nThe system variables width and height are set by the parameters passed\nto this function. If createCanvas() is not used, the window will be\ngiven a default size of 100x100 pixels.\n<br><br>\nFor more ways to position the canvas, see the\n<a href='https://github.com/processing/p5.js/wiki/Positioning-your-canvas'>\npositioning the canvas</a> wiki page.\n",
"!url": "https://p5js.org/reference/#/p5/createCanvas"
},
"resizeCanvas": {
"!type": "fn(w: number, h: number, noRedraw: bool)",
"!doc": "Resizes the canvas to given width and height. The canvas will be cleared\nand draw will be called immediately, allowing the sketch to re-render itself\nin the resized canvas.\n",
"!url": "https://p5js.org/reference/#/p5/resizeCanvas"
},
"noCanvas": {
"!type": "fn()",
"!doc": "Removes the default canvas for a p5 sketch that doesn&#39;t\nrequire a canvas\n",
"!url": "https://p5js.org/reference/#/p5/noCanvas"
},
"createGraphics": {
"!type": "fn(w: number, h: number, renderer?: Constant) -> +Rendering.p5.Graphics",
"!doc": "Creates and returns a new p5.Renderer object. Use this class if you need\nto draw into an off-screen graphics buffer. The two parameters define the\nwidth and height in pixels.\n",
"!url": "https://p5js.org/reference/#/p5/createGraphics"
},
"blendMode": {
"!type": "fn(mode: Constant)",
"!doc": "Blends the pixels in the display window according to the defined mode.\nThere is a choice of the following modes to blend the source pixels (A)\nwith the ones of pixels already in the display window (B):\n<ul>\n<li><code>BLEND</code> - linear interpolation of colours: C =\nA<em>factor + B. This is the default blending mode.</li>\n<li><code>ADD</code> - sum of A and B</li>\n<li><code>DARKEST</code> - only the darkest colour succeeds: C =\nmin(A</em>factor, B).</li>\n<li><code>LIGHTEST</code> - only the lightest colour succeeds: C =\nmax(A*factor, B).</li>\n<li><code>DIFFERENCE</code> - subtract colors from underlying image.</li>\n<li><code>EXCLUSION</code> - similar to <code>DIFFERENCE</code>, but less\nextreme.</li>\n<li><code>MULTIPLY</code> - multiply the colors, result will always be\ndarker.</li>\n<li><code>SCREEN</code> - opposite multiply, uses inverse values of the\ncolors.</li>\n<li><code>REPLACE</code> - the pixels entirely replace the others and\ndon&#39;t utilize alpha (transparency) values.</li>\n<li><code>OVERLAY</code> - mix of <code>MULTIPLY</code> and <code>SCREEN\n</code>. Multiplies dark values, and screens light values.</li>\n<li><code>HARD_LIGHT</code> - <code>SCREEN</code> when greater than 50%\ngray, <code>MULTIPLY</code> when lower.</li>\n<li><code>SOFT_LIGHT</code> - mix of <code>DARKEST</code> and\n<code>LIGHTEST</code>. Works like <code>OVERLAY</code>, but not as harsh.\n</li>\n<li><code>DODGE</code> - lightens light tones and increases contrast,\nignores darks.</li>\n<li><code>BURN</code> - darker areas are applied, increasing contrast,\nignores lights.</li>\n</ul>",
"!url": "https://p5js.org/reference/#/p5/blendMode"
}
}
}
},
"Transform": {
"p5": {
"!type": "fn()",
"!url": "https://p5js.org/reference/#/p5/p5",
"prototype": {
"applyMatrix": {
"!type": "fn(n00: number, n01: number, n02: number, n10: number, n11: number, n12: number) -> !this",
"!doc": "Multiplies the current matrix by the one specified through the parameters.\nThis is very slow because it will try to calculate the inverse of the\ntransform, so avoid it whenever possible.\n",
"!url": "https://p5js.org/reference/#/p5/applyMatrix"
},
"resetMatrix": {
"!type": "fn() -> !this",
"!doc": "Replaces the current matrix with the identity matrix.\n",
"!url": "https://p5js.org/reference/#/p5/resetMatrix"
},
"rotate": {
"!type": "fn(angle: number, axis?: Math.p5.Vector) -> !this",
"!doc": "Rotates a shape the amount specified by the angle parameter. This\nfunction accounts for angleMode, so angles can be entered in either\nRADIANS or DEGREES.\n<br><br>\nObjects are always rotated around their relative position to the\norigin and positive numbers rotate objects in a clockwise direction.\nTransformations apply to everything that happens after and subsequent\ncalls to the function accumulates the effect. For example, calling\nrotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI).\nAll tranformations are reset when draw() begins again.\n<br><br>\nTechnically, rotate() multiplies the current transformation matrix\nby a rotation matrix. This function can be further controlled by\nthe push() and pop().\n",
"!url": "https://p5js.org/reference/#/p5/rotate"
},
"rotateX": {
"!type": "fn(rad: number) -> !this",
"!doc": "Rotates around X axis.\n",
"!url": "https://p5js.org/reference/#/p5/rotateX"
},
"rotateY": {
"!type": "fn(rad: number) -> !this",
"!doc": "Rotates around Y axis.\n",
"!url": "https://p5js.org/reference/#/p5/rotateY"
},
"rotateZ": {
"!type": "fn(rad: number) -> !this",
"!doc": "Rotates around Z axis. Webgl mode only.\n",
"!url": "https://p5js.org/reference/#/p5/rotateZ"
},
"scale": {
"!type": "fn(s: number, y?: number, z?: number) -> !this",
"!doc": "Increases or decreases the size of a shape by expanding and contracting\nvertices. Objects always scale from their relative origin to the\ncoordinate system. Scale values are specified as decimal percentages.\nFor example, the function call scale(2.0) increases the dimension of a\nshape by 200%.\n<br><br>\nTransformations apply to everything that happens after and subsequent\ncalls to the function multiply the effect. For example, calling scale(2.0)\nand then scale(1.5) is the same as scale(3.0). If scale() is called\nwithin draw(), the transformation is reset when the loop begins again.\n<br><br>\nUsing this function with the z parameter is only available in WEBGL mode.\nThis function can be further controlled with push() and pop().\n",
"!url": "https://p5js.org/reference/#/p5/scale"
},
"shearX": {
"!type": "fn(angle: number) -> !this",
"!doc": "Shears a shape around the x-axis the amount specified by the angle\nparameter. Angles should be specified in the current angleMode.\nObjects are always sheared around their relative position to the origin\nand positive numbers shear objects in a clockwise direction.\n<br><br>\nTransformations apply to everything that happens after and subsequent\ncalls to the function accumulates the effect. For example, calling\nshearX(PI/2) and then shearX(PI/2) is the same as shearX(PI).\nIf shearX() is called within the draw(), the transformation is reset when\nthe loop begins again.\n<br><br>\nTechnically, shearX() multiplies the current transformation matrix by a\nrotation matrix. This function can be further controlled by the\npush() and pop() functions.\n",
"!url": "https://p5js.org/reference/#/p5/shearX"
},
"shearY": {
"!type": "fn(angle: number) -> !this",
"!doc": "Shears a shape around the y-axis the amount specified by the angle\nparameter. Angles should be specified in the current angleMode. Objects\nare always sheared around their relative position to the origin and\npositive numbers shear objects in a clockwise direction.\n<br><br>\nTransformations apply to everything that happens after and subsequent\ncalls to the function accumulates the effect. For example, calling\nshearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If\nshearY() is called within the draw(), the transformation is reset when\nthe loop begins again.\n<br><br>\nTechnically, shearY() multiplies the current transformation matrix by a\nrotation matrix. This function can be further controlled by the\npush() and pop() functions.\n",
"!url": "https://p5js.org/reference/#/p5/shearY"
},
"translate": {
"!type": "fn(x: number, y: number, z?: number) -> !this",
"!doc": "Specifies an amount to displace objects within the display window.\nThe x parameter specifies left/right translation, the y parameter\nspecifies up/down translation.\n<br><br>\nTransformations are cumulative and apply to everything that happens after\nand subsequent calls to the function accumulates the effect. For example,\ncalling translate(50, 0) and then translate(20, 0) is the same as\ntranslate(70, 0). If translate() is called within draw(), the\ntransformation is reset when the loop begins again. This function can be\nfurther controlled by using push() and pop().\n",
"!url": "https://p5js.org/reference/#/p5/translate"
}
}
}
},
"Data": {
"p5.TypedDict": {
"!type": "fn() -> +Data.p5.TypedDict",
"!doc": "Base class for all p5.Dictionary types. More specifically\n typed Dictionary objects inherit from this\n",
"!url": "https://p5js.org/reference/#/p5/p5.TypedDict",
"prototype": {
"createStringDict": {
"!type": "fn(key: string, value: string) -> +Data.p5.StringDict",
"!doc": "Creates a new instance of p5.StringDict using the key, value pair\n or object you provide.\n",
"!url": "https://p5js.org/reference/#/p5/createStringDict"
},
"createNumberDict": {
"!type": "fn(key: number, value: number) -> +Data.p5.NumberDict",
"!doc": "Creates a new instance of p5.NumberDict using the key, value pair\n or object you provide.\n",
"!url": "https://p5js.org/reference/#/p5/createNumberDict"
},
"size": {
"!type": "fn() -> number",
"!doc": "Returns the number of key-value pairs currently in Dictionary object\n",
"!url": "https://p5js.org/reference/#/p5/size"
},
"hasKey": {
"!type": "fn(key: number) -> bool",
"!doc": "Returns true if key exists in Dictionary\notherwise returns false\n",
"!url": "https://p5js.org/reference/#/p5/hasKey"
},
"get": {
"!type": "fn(key: number) -> number",
"!doc": "Returns value stored at supplied key.\n",
"!url": "https://p5js.org/reference/#/p5/get"
},
"set": {
"!type": "fn(key: number, value: number)",
"!doc": "Changes the value of key if in it already exists in\nin the Dictionary otherwise makes a new key-value pair\n",
"!url": "https://p5js.org/reference/#/p5/set"
},
"undefined": {
"!type": "fn()",
"!doc": "private helper function to ensure that the user passed in valid\nvalues for the Dictionary type\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
},
"create": {
"!type": "fn()",
"!doc": "Removes a key-value pair in the Dictionary\n",
"!url": "https://p5js.org/reference/#/p5/create"
},
"clear": {
"!type": "fn()",
"!doc": "Empties Dictionary of all key-value pairs\n",
"!url": "https://p5js.org/reference/#/p5/clear"
},
"remove": {
"!type": "fn(key: number)",
"!doc": "Removes a key-value pair in the Dictionary\n",
"!url": "https://p5js.org/reference/#/p5/remove"
},
"print": {
"!type": "fn()",
"!doc": "Logs the list of items currently in the Dictionary to the console\n",
"!url": "https://p5js.org/reference/#/p5/print"
},
"saveTable": {
"!type": "fn()",
"!doc": "Converts the Dictionary into a CSV file for local\nstorage.\n",
"!url": "https://p5js.org/reference/#/p5/saveTable"
},
"saveJSON": {
"!type": "fn()",
"!doc": "Converts the Dictionary into a JSON file for local\nstorage.\n",
"!url": "https://p5js.org/reference/#/p5/saveJSON"
}
}
},
"p5.NumberDict": {
"!type": "fn() -> +Data.p5.NumberDict",
"!proto": "Data.p5.TypedDict",
"!doc": "A simple Dictionary class for Numbers.\n",
"!url": "https://p5js.org/reference/#/p5/p5.NumberDict",
"prototype": {
"undefined": {
"!type": "fn()",
"!doc": "private helper function for finding lowest or highest key\nthe argument &#39;flip&#39; is used to flip the comparison arrow\nfrom &#39;less than&#39; to &#39;greater than&#39;\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
},
"add": {
"!type": "fn(Key: number, Amount: number)",
"!doc": "Add to a value stored at a certain key\nThe sum is stored in that location in the Dictionary.\n",
"!url": "https://p5js.org/reference/#/p5/add"
},
"sub": {
"!type": "fn(Key: number, Amount: number)",
"!doc": "Subtract from a value stored at a certain key\nThe difference is stored in that location in the Dictionary.\n",
"!url": "https://p5js.org/reference/#/p5/sub"
},
"mult": {
"!type": "fn(Key: number, Amount: number)",
"!doc": "Multiply a value stored at a certain key\nThe product is stored in that location in the Dictionary.\n",
"!url": "https://p5js.org/reference/#/p5/mult"
},
"div": {
"!type": "fn(Key: number, Amount: number)",
"!doc": "Divide a value stored at a certain key\nThe quotient is stored in that location in the Dictionary.\n",
"!url": "https://p5js.org/reference/#/p5/div"
},
"minValue": {
"!type": "fn() -> number",
"!doc": "Return the lowest value.\n",
"!url": "https://p5js.org/reference/#/p5/minValue"
},
"maxValue": {
"!type": "fn() -> number",
"!doc": "Return the highest value.\n",
"!url": "https://p5js.org/reference/#/p5/maxValue"
},
"minKey": {
"!type": "fn() -> number",
"!doc": "Return the lowest key.\n",
"!url": "https://p5js.org/reference/#/p5/minKey"
},
"maxKey": {
"!type": "fn() -> number",
"!doc": "Return the highest key.\n",
"!url": "https://p5js.org/reference/#/p5/maxKey"
}
}
},
"p5": {
"!type": "fn()",
"!url": "https://p5js.org/reference/#/p5/p5",
"prototype": {
"append": {
"!type": "fn(array: Array, value: Any)",
"!doc": "Adds a value to the end of an array. Extends the length of\nthe array by one. Maps to Array.push().\n",
"!url": "https://p5js.org/reference/#/p5/append"
},
"arrayCopy": {
"!type": "fn()",
"!doc": "Copies an array (or part of an array) to another array. The src array is\ncopied to the dst array, beginning at the position specified by\nsrcPosition and into the position specified by dstPosition. The number of\nelements to copy is determined by length. Note that copying values\noverwrites existing values in the destination array. To append values\ninstead of overwriting them, use concat().\n<br><br>\nThe simplified version with only two arguments, arrayCopy(src, dst),\ncopies an entire array to another of the same size. It is equivalent to\narrayCopy(src, 0, dst, 0, src.length).\n<br><br>\nUsing this function is far more efficient for copying array data than\niterating through a for() loop and copying each element individually.\n",
"!url": "https://p5js.org/reference/#/p5/arrayCopy"
},
"concat": {
"!type": "fn(a: Array, b: Array) -> +Array",
"!doc": "Concatenates two arrays, maps to Array.concat(). Does not modify the\ninput arrays.\n",
"!url": "https://p5js.org/reference/#/p5/concat"
},
"reverse": {
"!type": "fn(list: Array)",
"!doc": "Reverses the order of an array, maps to Array.reverse()\n",
"!url": "https://p5js.org/reference/#/p5/reverse"
},
"shorten": {
"!type": "fn(list: Array) -> +Array",
"!doc": "Decreases an array by one element and returns the shortened array,\nmaps to Array.pop().\n",
"!url": "https://p5js.org/reference/#/p5/shorten"
},
"shuffle": {
"!type": "fn(array: Array, bool?: bool) -> +Array",
"!doc": "Randomizes the order of the elements of an array. Implements\n<a href=\"http://Bost.Ocks.org/mike/shuffle/\" target=_blank>\nFisher-Yates Shuffle Algorithm</a>.\n",
"!url": "https://p5js.org/reference/#/p5/shuffle"
},
"sort": {
"!type": "fn(list: Array, count?: number)",
"!doc": "Sorts an array of numbers from smallest to largest, or puts an array of\nwords in alphabetical order. The original array is not modified; a\nre-ordered array is returned. The count parameter states the number of\nelements to sort. For example, if there are 12 elements in an array and\ncount is set to 5, only the first 5 elements in the array will be sorted.\n",
"!url": "https://p5js.org/reference/#/p5/sort"
},
"splice": {
"!type": "fn(list: Array, value: Any, position: number)",
"!doc": "Inserts a value or an array of values into an existing array. The first\nparameter specifies the initial array to be modified, and the second\nparameter defines the data to be inserted. The third parameter is an index\nvalue which specifies the array position from which to insert data.\n(Remember that array index numbering starts at zero, so the first position\nis 0, the second position is 1, and so on.)\n",
"!url": "https://p5js.org/reference/#/p5/splice"
},
"subset": {
"!type": "fn(list: Array, start: number, count?: number) -> +Array",
"!doc": "Extracts an array of elements from an existing array. The list parameter\ndefines the array from which the elements will be copied, and the start\nand count parameters specify which elements to extract. If no count is\ngiven, elements will be extracted from the start to the end of the array.\nWhen specifying the start, remember that the first array element is 0.\nThis function does not change the source array.\n",
"!url": "https://p5js.org/reference/#/p5/subset"
},
"float": {
"!type": "fn(str: string) -> number",
"!doc": "Converts a string to its floating point representation. The contents of a\nstring must resemble a number, or NaN (not a number) will be returned.\nFor example, float(&quot;1234.56&quot;) evaluates to 1234.56, but float(&quot;giraffe&quot;)\nwill return NaN.\nWhen an array of values is passed in, then an array of floats of the same\nlength is returned.\n",
"!url": "https://p5js.org/reference/#/p5/float"
},
"int": {
"!type": "fn() -> number",
"!doc": "Converts a boolean, string, or float to its integer representation.\nWhen an array of values is passed in, then an int array of the same length\nis returned.\n",
"!url": "https://p5js.org/reference/#/p5/int"
},
"str": {
"!type": "fn(n: string) -> string",
"!doc": "Converts a boolean, string or number to its string representation.\nWhen an array of values is passed in, then an array of strings of the same\nlength is returned.\n",
"!url": "https://p5js.org/reference/#/p5/str"
},
"boolean": {
"!type": "fn(n: string) -> bool",
"!doc": "Converts a number or string to its boolean representation.\nFor a number, any non-zero value (positive or negative) evaluates to true,\nwhile zero evaluates to false. For a string, the value &quot;true&quot; evaluates to\ntrue, while any other value evaluates to false. When an array of number or\nstring values is passed in, then a array of booleans of the same length is\nreturned.\n",
"!url": "https://p5js.org/reference/#/p5/boolean"
},
"byte": {
"!type": "fn() -> number",
"!doc": "Converts a number, string or boolean to its byte representation.\nA byte can be only a whole number between -128 and 127, so when a value\noutside of this range is converted, it wraps around to the corresponding\nbyte representation. When an array of number, string or boolean values is\npassed in, then an array of bytes the same length is returned.\n",
"!url": "https://p5js.org/reference/#/p5/byte"
},
"char": {
"!type": "fn() -> string",
"!doc": "Converts a number or string to its corresponding single-character\nstring representation. If a string parameter is provided, it is first\nparsed as an integer and then translated into a single-character string.\nWhen an array of number or string values is passed in, then an array of\nsingle-character strings of the same length is returned.\n",
"!url": "https://p5js.org/reference/#/p5/char"
},
"unchar": {
"!type": "fn() -> number",
"!doc": "Converts a single-character string to its corresponding integer\nrepresentation. When an array of single-character string values is passed\nin, then an array of integers of the same length is returned.\n",
"!url": "https://p5js.org/reference/#/p5/unchar"
},
"hex": {
"!type": "fn() -> string",
"!doc": "Converts a number to a string in its equivalent hexadecimal notation. If a\nsecond parameter is passed, it is used to set the number of characters to\ngenerate in the hexadecimal notation. When an array is passed in, an\narray of strings in hexadecimal notation of the same length is returned.\n",
"!url": "https://p5js.org/reference/#/p5/hex"
},
"unhex": {
"!type": "fn() -> number",
"!doc": "Converts a string representation of a hexadecimal number to its equivalent\ninteger value. When an array of strings in hexadecimal notation is passed\nin, an array of integers of the same length is returned.\n",
"!url": "https://p5js.org/reference/#/p5/unhex"
},
"join": {
"!type": "fn(list: Array, separator: string) -> string",
"!doc": "Combines an array of Strings into one String, each separated by the\ncharacter(s) used for the separator parameter. To join arrays of ints or\nfloats, it&#39;s necessary to first convert them to Strings using nf() or\nnfs().\n",
"!url": "https://p5js.org/reference/#/p5/join"
},
"match": {
"!type": "fn(str: string, regexp: string) -> [string]",
"!doc": "This function is used to apply a regular expression to a piece of text,\nand return matching groups (elements found inside parentheses) as a\nString array. If there are no matches, a null value will be returned.\nIf no groups are specified in the regular expression, but the sequence\nmatches, an array of length 1 (with the matched text as the first element\nof the array) will be returned.\n<br><br>\nTo use the function, first check to see if the result is null. If the\nresult is null, then the sequence did not match at all. If the sequence\ndid match, an array is returned.\n<br><br>\nIf there are groups (specified by sets of parentheses) in the regular\nexpression, then the contents of each will be returned in the array.\nElement [0] of a regular expression match returns the entire matching\nstring, and the match groups start at element [1] (the first group is [1],\nthe second [2], and so on).\n",
"!url": "https://p5js.org/reference/#/p5/match"
},
"matchAll": {
"!type": "fn(str: string, regexp: string) -> [string]",
"!doc": "This function is used to apply a regular expression to a piece of text,\nand return a list of matching groups (elements found inside parentheses)\nas a two-dimensional String array. If there are no matches, a null value\nwill be returned. If no groups are specified in the regular expression,\nbut the sequence matches, a two dimensional array is still returned, but\nthe second dimension is only of length one.\n<br><br>\nTo use the function, first check to see if the result is null. If the\nresult is null, then the sequence did not match at all. If the sequence\ndid match, a 2D array is returned.\n<br><br>\nIf there are groups (specified by sets of parentheses) in the regular\nexpression, then the contents of each will be returned in the array.\nAssuming a loop with counter variable i, element [i][0] of a regular\nexpression match returns the entire matching string, and the match groups\nstart at element [i][1] (the first group is [i][1], the second [i][2],\nand so on).\n",
"!url": "https://p5js.org/reference/#/p5/matchAll"
},
"nf": {
"!type": "fn() -> string",
"!doc": "Utility function for formatting numbers into strings. There are two\nversions: one for formatting floats, and one for formatting ints.\nThe values for the digits, left, and right parameters should always\nbe positive integers.\n",
"!url": "https://p5js.org/reference/#/p5/nf"
},
"nfc": {
"!type": "fn() -> string",
"!doc": "Utility function for formatting numbers into strings and placing\nappropriate commas to mark units of 1000. There are two versions: one\nfor formatting ints, and one for formatting an array of ints. The value\nfor the right parameter should always be a positive integer.\n",
"!url": "https://p5js.org/reference/#/p5/nfc"
},
"nfp": {
"!type": "fn() -> string",
"!doc": "Utility function for formatting numbers into strings. Similar to nf() but\nputs a &quot;+&quot; in front of positive numbers and a &quot;-&quot; in front of negative\nnumbers. There are two versions: one for formatting floats, and one for\nformatting ints. The values for left, and right parameters\nshould always be positive integers.\n",
"!url": "https://p5js.org/reference/#/p5/nfp"
},
"nfs": {
"!type": "fn() -> string",
"!doc": "Utility function for formatting numbers into strings. Similar to nf() but\nputs a &quot; &quot; (space) in front of positive numbers and a &quot;-&quot; in front of\nnegative numbers. There are two versions: one for formatting floats, and\none for formatting ints. The values for the digits, left, and right\nparameters should always be positive integers.\n",
"!url": "https://p5js.org/reference/#/p5/nfs"
},
"split": {
"!type": "fn(value: string, delim: string) -> [string]",
"!doc": "The split() function maps to String.split(), it breaks a String into\npieces using a character or string as the delimiter. The delim parameter\nspecifies the character or characters that mark the boundaries between\neach piece. A String[] array is returned that contains each of the pieces.\nThe splitTokens() function works in a similar fashion, except that it\nsplits using a range of characters instead of a specific character or\nsequence.\n",
"!url": "https://p5js.org/reference/#/p5/split"
},
"splitTokens": {
"!type": "fn(value: string, delim?: string) -> [string]",
"!doc": "The splitTokens() function splits a String at one or many character\ndelimiters or &quot;tokens.&quot; The delim parameter specifies the character or\ncharacters to be used as a boundary.\n<br><br>\nIf no delim characters are specified, any whitespace character is used to\nsplit. Whitespace characters include tab (\\t), line feed (\\n), carriage\nreturn (\\r), form feed (\\f), and space.\n",
"!url": "https://p5js.org/reference/#/p5/splitTokens"
},
"trim": {
"!type": "fn() -> string",
"!doc": "Removes whitespace characters from the beginning and end of a String. In\naddition to standard whitespace characters such as space, carriage return,\nand tab, this function also removes the Unicode &quot;nbsp&quot; character.\n",
"!url": "https://p5js.org/reference/#/p5/trim"
}
}
}
},
"Events": {
"p5": {
"!type": "fn()",
"!url": "https://p5js.org/reference/#/p5/p5",
"prototype": {
"deviceOrientation": {
"!type": "+Constant",
"!doc": "The system variable deviceOrientation always contains the orientation of\nthe device. The value of this variable will either be set &#39;landscape&#39;\nor &#39;portrait&#39;. If no data is available it will be set to &#39;undefined&#39;.\neither LANDSCAPE or PORTRAIT.\n",
"!url": "https://p5js.org/reference/#/p5/deviceOrientation"
},
"accelerationX": {
"!type": "number",
"!doc": "The system variable accelerationX always contains the acceleration of the\ndevice along the x axis. Value is represented as meters per second squared.\n",
"!url": "https://p5js.org/reference/#/p5/accelerationX"
},
"accelerationY": {
"!type": "number",
"!doc": "The system variable accelerationY always contains the acceleration of the\ndevice along the y axis. Value is represented as meters per second squared.\n",
"!url": "https://p5js.org/reference/#/p5/accelerationY"
},
"accelerationZ": {
"!type": "number",
"!doc": "The system variable accelerationZ always contains the acceleration of the\ndevice along the z axis. Value is represented as meters per second squared.\n",
"!url": "https://p5js.org/reference/#/p5/accelerationZ"
},
"pAccelerationX": {
"!type": "number",
"!doc": "The system variable pAccelerationX always contains the acceleration of the\ndevice along the x axis in the frame previous to the current frame. Value\nis represented as meters per second squared.\n",
"!url": "https://p5js.org/reference/#/p5/pAccelerationX"
},
"pAccelerationY": {
"!type": "number",
"!doc": "The system variable pAccelerationY always contains the acceleration of the\ndevice along the y axis in the frame previous to the current frame. Value\nis represented as meters per second squared.\n",
"!url": "https://p5js.org/reference/#/p5/pAccelerationY"
},
"pAccelerationZ": {
"!type": "number",
"!doc": "The system variable pAccelerationZ always contains the acceleration of the\ndevice along the z axis in the frame previous to the current frame. Value\nis represented as meters per second squared.\n",
"!url": "https://p5js.org/reference/#/p5/pAccelerationZ"
},
"rotationX": {
"!type": "number",
"!doc": "The system variable rotationX always contains the rotation of the\ndevice along the x axis. Value is represented as 0 to +/-180 degrees.\n<br><br>\nNote: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.\n",
"!url": "https://p5js.org/reference/#/p5/rotationX"
},
"rotationY": {
"!type": "number",
"!doc": "The system variable rotationY always contains the rotation of the\ndevice along the y axis. Value is represented as 0 to +/-90 degrees.\n<br><br>\nNote: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.\n",
"!url": "https://p5js.org/reference/#/p5/rotationY"
},
"rotationZ": {
"!type": "number",
"!doc": "The system variable rotationZ always contains the rotation of the\ndevice along the z axis. Value is represented as 0 to 359 degrees.\n<br><br>\nUnlike rotationX and rotationY, this variable is available for devices\nwith a built-in compass only.\n<br><br>\nNote: The order the rotations are called is important, ie. if used\ntogether, it must be called in the order Z-X-Y or there might be\nunexpected behaviour.\n",
"!url": "https://p5js.org/reference/#/p5/rotationZ"
},
"pRotationX": {
"!type": "number",
"!doc": "The system variable pRotationX always contains the rotation of the\ndevice along the x axis in the frame previous to the current frame. Value\nis represented as 0 to +/-180 degrees.\n<br><br>\npRotationX can also be used with rotationX to determine the rotate\ndirection of the device along the X-axis.\n",
"!url": "https://p5js.org/reference/#/p5/pRotationX"
},
"pRotationY": {
"!type": "number",
"!doc": "The system variable pRotationY always contains the rotation of the\ndevice along the y axis in the frame previous to the current frame. Value\nis represented as 0 to +/-90 degrees.\n<br><br>\npRotationY can also be used with rotationY to determine the rotate\ndirection of the device along the Y-axis.\n",
"!url": "https://p5js.org/reference/#/p5/pRotationY"
},
"pRotationZ": {
"!type": "number",
"!doc": "The system variable pRotationZ always contains the rotation of the\ndevice along the z axis in the frame previous to the current frame. Value\nis represented as 0 to 359 degrees.\n<br><br>\npRotationZ can also be used with rotationZ to determine the rotate\ndirection of the device along the Z-axis.\n",
"!url": "https://p5js.org/reference/#/p5/pRotationZ"
},
"setMoveThreshold": {
"!type": "fn(value: number)",
"!doc": "The setMoveThreshold() function is used to set the movement threshold for\nthe deviceMoved() function. The default threshold is set to 0.5.\n",
"!url": "https://p5js.org/reference/#/p5/setMoveThreshold"
},
"setShakeThreshold": {
"!type": "fn(value: number)",
"!doc": "The setShakeThreshold() function is used to set the movement threshold for\nthe deviceShaken() function. The default threshold is set to 30.\n",
"!url": "https://p5js.org/reference/#/p5/setShakeThreshold"
},
"deviceMoved": {
"!type": "fn()",
"!doc": "The deviceMoved() function is called when the device is moved by more than\nthe threshold value along X, Y or Z axis. The default threshold is set to\n0.5.\n",
"!url": "https://p5js.org/reference/#/p5/deviceMoved"
},
"deviceTurned": {
"!type": "fn()",
"!doc": "The deviceTurned() function is called when the device rotates by\nmore than 90 degrees continuously.\n<br><br>\nThe axis that triggers the deviceTurned() method is stored in the turnAxis\nvariable. The deviceTurned() method can be locked to trigger on any axis:\nX, Y or Z by comparing the turnAxis variable to &#39;X&#39;, &#39;Y&#39; or &#39;Z&#39;.\n",
"!url": "https://p5js.org/reference/#/p5/deviceTurned"
},
"deviceShaken": {
"!type": "fn()",
"!doc": "The deviceShaken() function is called when the device total acceleration\nchanges of accelerationX and accelerationY values is more than\nthe threshold value. The default threshold is set to 30.\n",
"!url": "https://p5js.org/reference/#/p5/deviceShaken"
},
"keyIsPressed": {
"!type": "bool",
"!doc": "The boolean system variable keyIsPressed is true if any key is pressed\nand false if no keys are pressed.\n",
"!url": "https://p5js.org/reference/#/p5/keyIsPressed"
},
"key": {
"!type": "string",
"!doc": "The system variable key always contains the value of the most recent\nkey on the keyboard that was typed. To get the proper capitalization, it\nis best to use it within keyTyped(). For non-ASCII keys, use the keyCode\nvariable.\n",
"!url": "https://p5js.org/reference/#/p5/key"
},
"keyCode": {
"!type": "number",
"!doc": "The variable keyCode is used to detect special keys such as BACKSPACE,\nDELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW,\nDOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.\nYou can also check for custom keys by looking up the keyCode of any key\non a site like this: <a href=\"http://keycode.info/\">keycode.info</a>.\n",
"!url": "https://p5js.org/reference/#/p5/keyCode"
},
"keyPressed": {
"!type": "fn()",
"!doc": "The keyPressed() function is called once every time a key is pressed. The\nkeyCode for the key that was pressed is stored in the keyCode variable.\n<br><br>\nFor non-ASCII keys, use the keyCode variable. You can check if the keyCode\nequals BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL,\nOPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.\n<br><br>\nFor ASCII keys that was pressed is stored in the key variable. However, it\ndoes not distinguish between uppercase and lowercase. For this reason, it\nis recommended to use keyTyped() to read the key variable, in which the\ncase of the variable will be distinguished.\n<br><br>\nBecause of how operating systems handle key repeats, holding down a key\nmay cause multiple calls to keyTyped() (and keyReleased() as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\nBrowsers may have different default\nbehaviors attached to various key events. To prevent any default\nbehavior for this event, add &quot;return false&quot; to the end of the method.\n",
"!url": "https://p5js.org/reference/#/p5/keyPressed"
},
"keyReleased": {
"!type": "fn()",
"!doc": "The keyReleased() function is called once every time a key is released.\nSee key and keyCode for more information.<br><br>\nBrowsers may have different default\nbehaviors attached to various key events. To prevent any default\nbehavior for this event, add &quot;return false&quot; to the end of the method.\n",
"!url": "https://p5js.org/reference/#/p5/keyReleased"
},
"keyTyped": {
"!type": "fn()",
"!doc": "The keyTyped() function is called once every time a key is pressed, but\naction keys such as Ctrl, Shift, and Alt are ignored. The most recent\nkey pressed will be stored in the key variable.\n<br><br>\nBecause of how operating systems handle key repeats, holding down a key\nwill cause multiple calls to keyTyped() (and keyReleased() as well). The\nrate of repeat is set by the operating system and how each computer is\nconfigured.<br><br>\nBrowsers may have different default behaviors attached to various key\nevents. To prevent any default behavior for this event, add &quot;return false&quot;\nto the end of the method.\n",
"!url": "https://p5js.org/reference/#/p5/keyTyped"
},
"undefined": {
"!type": "fn(canvas: Canvas)",
"!doc": "increases the bright areas in an image\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
},
"keyIsDown": {
"!type": "fn(code: number) -> bool",
"!doc": "The keyIsDown() function checks if the key is currently down, i.e. pressed.\nIt can be used if you have an object that moves, and you want several keys\nto be able to affect its behaviour simultaneously, such as moving a\nsprite diagonally. You can put in any number representing the keyCode of\nthe key, or use any of the variable keyCode names listed\n<a href=\"http://p5js.org/reference/#p5/keyCode\">here</a>.\n",
"!url": "https://p5js.org/reference/#/p5/keyIsDown"
},
"mouseX": {
"!type": "number",
"!doc": "The system variable mouseX always contains the current horizontal\nposition of the mouse, relative to (0, 0) of the canvas. If touch is\nused instead of mouse input, mouseX will hold the x value of the most\nrecent touch point.\n",
"!url": "https://p5js.org/reference/#/p5/mouseX"
},
"mouseY": {
"!type": "number",
"!doc": "The system variable mouseY always contains the current vertical position\nof the mouse, relative to (0, 0) of the canvas. If touch is\nused instead of mouse input, mouseY will hold the y value of the most\nrecent touch point.\n",
"!url": "https://p5js.org/reference/#/p5/mouseY"
},
"pmouseX": {
"!type": "number",
"!doc": "The system variable pmouseX always contains the horizontal position of\nthe mouse or finger in the frame previous to the current frame, relative to\n(0, 0) of the canvas.\n",
"!url": "https://p5js.org/reference/#/p5/pmouseX"
},
"pmouseY": {
"!type": "number",
"!doc": "The system variable pmouseY always contains the vertical position of the\nmouse or finger in the frame previous to the current frame, relative to\n(0, 0) of the canvas.\n",
"!url": "https://p5js.org/reference/#/p5/pmouseY"
},
"winMouseX": {
"!type": "number",
"!doc": "The system variable winMouseX always contains the current horizontal\nposition of the mouse, relative to (0, 0) of the window.\n",
"!url": "https://p5js.org/reference/#/p5/winMouseX"
},
"winMouseY": {
"!type": "number",
"!doc": "The system variable winMouseY always contains the current vertical\nposition of the mouse, relative to (0, 0) of the window.\n",
"!url": "https://p5js.org/reference/#/p5/winMouseY"
},
"pwinMouseX": {
"!type": "number",
"!doc": "The system variable pwinMouseX always contains the horizontal position\nof the mouse in the frame previous to the current frame, relative to\n(0, 0) of the window.\n",
"!url": "https://p5js.org/reference/#/p5/pwinMouseX"
},
"pwinMouseY": {
"!type": "number",
"!doc": "The system variable pwinMouseY always contains the vertical position of\nthe mouse in the frame previous to the current frame, relative to (0, 0)\nof the window.\n",
"!url": "https://p5js.org/reference/#/p5/pwinMouseY"
},
"mouseButton": {
"!type": "+Constant",
"!doc": "Processing automatically tracks if the mouse button is pressed and which\nbutton is pressed. The value of the system variable mouseButton is either\nLEFT, RIGHT, or CENTER depending on which button was pressed last.\nWarning: different browsers may track mouseButton differently.\n",
"!url": "https://p5js.org/reference/#/p5/mouseButton"
},
"mouseIsPressed": {
"!type": "bool",
"!doc": "The boolean system variable mouseIsPressed is true if the mouse is pressed\nand false if not.\n",
"!url": "https://p5js.org/reference/#/p5/mouseIsPressed"
},
"mouseMoved": {
"!type": "fn()",
"!doc": "The mouseMoved() function is called every time the mouse moves and a mouse\nbutton is not pressed.<br><br>\nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add &quot;return false&quot; to the end of the method.\n",
"!url": "https://p5js.org/reference/#/p5/mouseMoved"
},
"mouseDragged": {
"!type": "fn()",
"!doc": "The mouseDragged() function is called once every time the mouse moves and\na mouse button is pressed. If no mouseDragged() function is defined, the\ntouchMoved() function will be called instead if it is defined.<br><br>\nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add &quot;return false&quot; to the end of the method.\n",
"!url": "https://p5js.org/reference/#/p5/mouseDragged"
},
"mousePressed": {
"!type": "fn()",
"!doc": "The mousePressed() function is called once after every time a mouse button\nis pressed. The mouseButton variable (see the related reference entry)\ncan be used to determine which button has been pressed. If no\nmousePressed() function is defined, the touchStarted() function will be\ncalled instead if it is defined.<br><br>\nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add &quot;return false&quot; to the end of the method.\n",
"!url": "https://p5js.org/reference/#/p5/mousePressed"
},
"mouseReleased": {
"!type": "fn()",
"!doc": "The mouseReleased() function is called every time a mouse button is\nreleased. If no mouseReleased() function is defined, the touchEnded()\nfunction will be called instead if it is defined.<br><br>\nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add &quot;return false&quot; to the end of the method.\n",
"!url": "https://p5js.org/reference/#/p5/mouseReleased"
},
"mouseClicked": {
"!type": "fn()",
"!doc": "The mouseClicked() function is called once after a mouse button has been\npressed and then released.<br><br>\nBrowsers handle clicks differently, so this function is only guaranteed to be\nrun when the left mouse button is clicked. To handle other mouse buttons\nbeing pressed or released, see mousePressed() or mouseReleased().<br><br>\nBrowsers may have different default\nbehaviors attached to various mouse events. To prevent any default\nbehavior for this event, add &quot;return false&quot; to the end of the method.\n",
"!url": "https://p5js.org/reference/#/p5/mouseClicked"
},
"doubleClicked": {
"!type": "fn()",
"!doc": "The doubleClicked() function is executed every time a event\nlistener has detected a dblclick event which is a part of the\nDOM L3 specification. The doubleClicked event is fired when a\npointing device button (usually a mouse&#39;s primary button)\nis clicked twice on a single element. For more info on the\ndblclick event refer to mozilla&#39;s documentation here:\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/Events/dblclick\">https://developer.mozilla.org/en-US/docs/Web/Events/dblclick</a>\n",
"!url": "https://p5js.org/reference/#/p5/doubleClicked"
},
"mouseWheel": {
"!type": "fn()",
"!doc": "The function mouseWheel() is executed every time a vertical mouse wheel\nevent is detected either triggered by an actual mouse wheel or by a\ntouchpad.<br><br>\nThe event.delta property returns the amount the mouse wheel\nhave scrolled. The values can be positive or negative depending on the\nscroll direction (on OS X with &quot;natural&quot; scrolling enabled, the signs\nare inverted).<br><br>\nBrowsers may have different default behaviors attached to various\nmouse events. To prevent any default behavior for this event, add\n&quot;return false&quot; to the end of the method.<br><br>\nDue to the current support of the &quot;wheel&quot; event on Safari, the function\nmay only work as expected if &quot;return false&quot; is included while using Safari.\n",
"!url": "https://p5js.org/reference/#/p5/mouseWheel"
},
"touches": {
"!type": "[+Object]",
"!doc": "The system variable touches[] contains an array of the positions of all\ncurrent touch points, relative to (0, 0) of the canvas, and IDs identifying a\nunique touch as it moves. Each element in the array is an object with x, y,\nand id properties.\nThe touches[] array is not supported on Safari and IE on touch-based\ndesktops (laptops).\n",
"!url": "https://p5js.org/reference/#/p5/touches"
},
"touchStarted": {
"!type": "fn()",
"!doc": "The touchStarted() function is called once after every time a touch is\nregistered. If no touchStarted() function is defined, the mousePressed()\nfunction will be called instead if it is defined.<br><br>\nBrowsers may have different default behaviors attached to various touch\nevents. To prevent any default behavior for this event, add &quot;return false&quot;\nto the end of the method.\n",
"!url": "https://p5js.org/reference/#/p5/touchStarted"
},
"touchMoved": {
"!type": "fn()",
"!doc": "The touchMoved() function is called every time a touch move is registered.\nIf no touchMoved() function is defined, the mouseDragged() function will\nbe called instead if it is defined.<br><br>\nBrowsers may have different default behaviors attached to various touch\nevents. To prevent any default behavior for this event, add &quot;return false&quot;\nto the end of the method.\n",
"!url": "https://p5js.org/reference/#/p5/touchMoved"
},
"touchEnded": {
"!type": "fn()",
"!doc": "The touchEnded() function is called every time a touch ends. If no\ntouchEnded() function is defined, the mouseReleased() function will be\ncalled instead if it is defined.<br><br>\nBrowsers may have different default behaviors attached to various touch\nevents. To prevent any default behavior for this event, add &quot;return false&quot;\nto the end of the method.\n",
"!url": "https://p5js.org/reference/#/p5/touchEnded"
}
}
}
},
"Image": {
"p5": {
"!type": "fn()",
"!url": "https://p5js.org/reference/#/p5/p5",
"prototype": {
"undefined": {
"!type": "fn(The: Image.p5.Image) -> +Canvas",
"!doc": "Apply the current tint color to the input image, return the resulting\ncanvas.\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
},
"createImage": {
"!type": "fn(width: Integer, height: Integer) -> +Image.p5.Image",
"!doc": "Creates a new p5.Image (the datatype for storing images). This provides a\nfresh buffer of pixels to play with. Set the size of the buffer with the\nwidth and height parameters.\n<br><br>\n.pixels gives access to an array containing the values for all the pixels\nin the display window.\nThese values are numbers. This array is the size (including an appropriate\nfactor for the pixelDensity) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. See .pixels for\nmore info. It may also be simpler to use set() or get().\n<br><br>\nBefore accessing the pixels of an image, the data must loaded with the\nloadPixels() function. After the array data has been modified, the\nupdatePixels() function must be run to update the changes.\n",
"!url": "https://p5js.org/reference/#/p5/createImage"
},
"saveCanvas": {
"!type": "fn()",
"!doc": "Save the current canvas as an image. In Safari, this will open the\nimage in the window and the user must provide their own\nfilename on save-as. Other browsers will either save the\nfile immediately, or prompt the user with a dialogue window.\n",
"!url": "https://p5js.org/reference/#/p5/saveCanvas"
},
"saveFrames": {
"!type": "fn(filename: string, extension: string, duration: number, framerate: number, callback?: fn())",
"!doc": "Capture a sequence of frames that can be used to create a movie.\nAccepts a callback. For example, you may wish to send the frames\nto a server where they can be stored or converted into a movie.\nIf no callback is provided, the browser will pop up save dialogues in an\nattempt to download all of the images that have just been created. With the\ncallback provided the image data isn&#39;t saved by default but instead passed\nas an argument to the callback function as an array of objects, with the\nsize of array equal to the total number of frames.\n",
"!url": "https://p5js.org/reference/#/p5/saveFrames"
},
"loadImage": {
"!type": "fn(path: string, successCallback?: fn(), failureCallback?: fn()) -> +Image.p5.Image",
"!doc": "Loads an image from a path and creates a p5.Image from it.\n<br><br>\nThe image may not be immediately available for rendering\nIf you want to ensure that the image is ready before doing\nanything with it, place the loadImage() call in preload().\nYou may also supply a callback function to handle the image when it&#39;s ready.\n<br><br>\nThe path to the image should be relative to the HTML file\nthat links in your sketch. Loading an image from a URL or other\nremote location may be blocked due to your browser&#39;s built-in\nsecurity.\n",
"!url": "https://p5js.org/reference/#/p5/loadImage"
},
"image": {
"!type": "fn()",
"!doc": "Draw an image to the main canvas of the p5js sketch\n",
"!url": "https://p5js.org/reference/#/p5/image"
},
"tint": {
"!type": "fn()",
"!doc": "Sets the fill value for displaying images. Images can be tinted to\nspecified colors or made transparent by including an alpha value.\n<br><br>\nTo apply transparency to an image without affecting its color, use\nwhite as the tint color and specify an alpha value. For instance,\ntint(255, 128) will make an image 50% transparent (assuming the default\nalpha range of 0-255, which can be changed with colorMode()).\n<br><br>\nThe value for the gray parameter must be less than or equal to the current\nmaximum value as specified by colorMode(). The default maximum value is\n255.\n",
"!url": "https://p5js.org/reference/#/p5/tint"
},
"noTint": {
"!type": "fn()",
"!doc": "Removes the current fill value for displaying images and reverts to\ndisplaying images with their original hues.\n",
"!url": "https://p5js.org/reference/#/p5/noTint"
},
"imageMode": {
"!type": "fn(mode: Constant)",
"!doc": "Set image mode. Modifies the location from which images are drawn by\nchanging the way in which parameters given to image() are interpreted.\nThe default mode is imageMode(CORNER), which interprets the second and\nthird parameters of image() as the upper-left corner of the image. If\ntwo additional parameters are specified, they are used to set the image&#39;s\nwidth and height.\n<br><br>\nimageMode(CORNERS) interprets the second and third parameters of image()\nas the location of one corner, and the fourth and fifth parameters as the\nopposite corner.\n<br><br>\nimageMode(CENTER) interprets the second and third parameters of image()\nas the image&#39;s center point. If two additional parameters are specified,\nthey are used to set the image&#39;s width and height.\n",
"!url": "https://p5js.org/reference/#/p5/imageMode"
},
"pixels": {
"!type": "[number]",
"!doc": "<a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference\n/Global_Objects/Uint8ClampedArray' target='_blank'>Uint8ClampedArray</a>\ncontaining the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for pixelDensity) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh density displays will have more pixels[] (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. On a\nretina display, there will be 160,000.\n<br><br>\nThe first four values (indices 0-3) in the array will be the R, G, B, A\nvalues of the pixel at (0, 0). The second four values (indices 4-7) will\ncontain the R, G, B, A values of the pixel at (1, 0). More generally, to\nset values for a pixel at (x, y):\n<code class=\"lang-javascript\">var d = pixelDensity;\nfor (var i = 0; i &lt; d; i++) {\n for (var j = 0; j &lt; d; j++) {\n // loop over\n idx = 4 * ((y * d + j) * width * d + (x * d + i));\n pixels[idx] = r;\n pixels[idx+1] = g;\n pixels[idx+2] = b;\n pixels[idx+3] = a;\n }\n}\n</code>\nWhile the above method is complex, it is flexible enough to work with\nany pixelDensity. Note that set() will automatically take care of\nsetting all the appropriate values in pixels[] for a given (x, y) at\nany pixelDensity, but the performance may not be as fast when lots of\nmodifications are made to the pixel array.\n<br><br>\nBefore accessing this array, the data must loaded with the loadPixels()\nfunction. After the array data has been modified, the updatePixels()\nfunction must be run to update the changes.\n<br><br>\nNote that this is not a standard javascript array. This means that\nstandard javascript functions such as <code>slice()</code> or\n<code>arrayCopy()</code> do not\nwork.",
"!url": "https://p5js.org/reference/#/p5/pixels"
},
"blend": {
"!type": "fn(srcImage: Image.p5.Image, sx: Integer, sy: Integer, sw: Integer, sh: Integer, dx: Integer, dy: Integer, dw: Integer, dh: Integer, blendMode: Integer)",
"!doc": "Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.<br><br>\nAvailable blend modes are: BLEND | DARKEST | LIGHTEST | DIFFERENCE |\nMULTIPLY| EXCLUSION | SCREEN | REPLACE | OVERLAY | HARD_LIGHT |\nSOFT_LIGHT | DODGE | BURN | ADD | NORMAL\n",
"!url": "https://p5js.org/reference/#/p5/blend"
},
"copy": {
"!type": "fn(srcImage: Image.p5.Image, sx: Integer, sy: Integer, sw: Integer, sh: Integer, dx: Integer, dy: Integer, dw: Integer, dh: Integer)",
"!doc": "Copies a region of the canvas to another region of the canvas\nand copies a region of pixels from an image used as the srcImg parameter\ninto the canvas srcImage is specified this is used as the source. If\nthe source and destination regions aren&#39;t the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.\n",
"!url": "https://p5js.org/reference/#/p5/copy"
},
"filter": {
"!type": "fn(filterType: Constant, filterParam: number)",
"!doc": "Applies a filter to the canvas.\n<br><br>\nThe presets options are:\n<br><br>\nTHRESHOLD\nConverts the image to black and white pixels depending if they are above or\nbelow the threshold defined by the level parameter. The parameter must be\nbetween 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.\n<br><br>\nGRAY\nConverts any colors in the image to grayscale equivalents. No parameter\nis used.\n<br><br>\nOPAQUE\nSets the alpha channel to entirely opaque. No parameter is used.\n<br><br>\nINVERT\nSets each pixel to its inverse value. No parameter is used.\n<br><br>\nPOSTERIZE\nLimits each channel of the image to the number of colors specified as the\nparameter. The parameter can be set to values between 2 and 255, but\nresults are most noticeable in the lower ranges.\n<br><br>\nBLUR\nExecutes a Guassian blur with the level parameter specifying the extent\nof the blurring. If no parameter is used, the blur is equivalent to\nGuassian blur of radius 1. Larger values increase the blur.\n<br><br>\nERODE\nReduces the light areas. No parameter is used.\n<br><br>\nDILATE\nIncreases the light areas. No parameter is used.\n",
"!url": "https://p5js.org/reference/#/p5/filter"
},
"get": {
"!type": "fn(x?: number, y?: number, w?: number, h?: number) -> [number]",
"!doc": "Returns an array of [R,G,B,A] values for any pixel or grabs a section of\nan image. If no parameters are specified, the entire image is returned.\nUse the x and y parameters to get the value of one pixel. Get a section of\nthe display window by specifying additional w and h parameters. When\ngetting an image, the x and y parameters define the coordinates for the\nupper-left corner of the image, regardless of the current imageMode().\n<br><br>\nIf the pixel requested is outside of the image window, [0,0,0,255] is\nreturned. To get the numbers scaled according to the current color ranges\nand taking into account colorMode, use getColor instead of get.\n<br><br>\nGetting the color of a single pixel with get(x, y) is easy, but not as fast\nas grabbing the data directly from pixels[]. The equivalent statement to\nget(x, y) using pixels[] with pixel density d is\n<code>\nvar off = (y <em> width + x) </em> d * 4;\n[pixels[off],\npixels[off+1],\npixels[off+2],\npixels[off+3]]</code>\n<br><br>\nSee the reference for pixels[] for more information.\n",
"!url": "https://p5js.org/reference/#/p5/get"
},
"loadPixels": {
"!type": "fn()",
"!doc": "Loads the pixel data for the display window into the pixels[] array. This\nfunction must always be called before reading from or writing to pixels[].\nNote that only changes made with set() or direct manipulation of pixels[]\nwill occur.\n",
"!url": "https://p5js.org/reference/#/p5/loadPixels"
},
"set": {
"!type": "fn(x: number, y: number, c: number)",
"!doc": "Changes the color of any pixel, or writes an image directly to the\ndisplay window.\nThe x and y parameters specify the pixel to change and the c parameter\nspecifies the color value. This can be a p5.Color object, or [R, G, B, A]\npixel array. It can also be a single grayscale value.\nWhen setting an image, the x and y parameters define the coordinates for\nthe upper-left corner of the image, regardless of the current imageMode().\n\n\nAfter using set(), you must call updatePixels() for your changes to appear.\nThis should be called once all pixels have been set, and must be called before\ncalling .get() or drawing the image.\n\nSetting the color of a single pixel with set(x, y) is easy, but not as\nfast as putting the data directly into pixels[]. Setting the pixels[]\nvalues directly may be complicated when working with a retina display,\nbut will perform better when lots of pixels need to be set directly on\nevery loop.\nSee the reference for pixels[] for more information.",
"!url": "https://p5js.org/reference/#/p5/set"
},
"updatePixels": {
"!type": "fn(x?: number, y?: number, w?: number, h?: number)",
"!doc": "Updates the display window with the data in the pixels[] array.\nUse in conjunction with loadPixels(). If you&#39;re only reading pixels from\nthe array, there&#39;s no need to call updatePixels() — updating is only\nnecessary to apply changes. updatePixels() should be called anytime the\npixels array is manipulated or set() is called, and only changes made with\nset() or direct changes to pixels[] will occur.\n",
"!url": "https://p5js.org/reference/#/p5/updatePixels"
}
}
},
"p5.Image": {
"!type": "fn(width: number, height: number) -> +Image.p5.Image",
"!doc": "Creates a new p5.Image. A p5.Image is a canvas backed representation of an\nimage.\n<br><br>\np5 can display .gif, .jpg and .png images. Images may be displayed\nin 2D and 3D space. Before an image is used, it must be loaded with the\nloadImage() function. The p5.Image class contains fields for the width and\nheight of the image, as well as an array called pixels[] that contains the\nvalues for every pixel in the image.\n<br><br>\nThe methods described below allow easy access to the image&#39;s pixels and\nalpha channel and simplify the process of compositing.\n<br><br>\nBefore using the pixels[] array, be sure to use the loadPixels() method on\nthe image to make sure that the pixel data is properly loaded.\n",
"!url": "https://p5js.org/reference/#/p5/p5.Image",
"prototype": {
"undefined": {
"!type": "fn()",
"!doc": "Helper fxn for sharing pixel methods\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
},
"width": {
"!type": "number",
"!doc": "Image width.\n",
"!url": "https://p5js.org/reference/#/p5/width"
},
"height": {
"!type": "number",
"!doc": "Image height.\n",
"!url": "https://p5js.org/reference/#/p5/height"
},
"pixels": {
"!type": "[number]",
"!doc": "Array containing the values for all the pixels in the display window.\nThese values are numbers. This array is the size (include an appropriate\nfactor for pixelDensity) of the display window x4,\nrepresenting the R, G, B, A values in order for each pixel, moving from\nleft to right across each row, then down each column. Retina and other\nhigh denisty displays may have more pixels[] (by a factor of\npixelDensity^2).\nFor example, if the image is 100x100 pixels, there will be 40,000. With\npixelDensity = 2, there will be 160,000. The first four values\n(indices 0-3) in the array will be the R, G, B, A values of the pixel at\n(0, 0). The second four values (indices 4-7) will contain the R, G, B, A\nvalues of the pixel at (1, 0). More generally, to set values for a pixel\nat (x, y):\n<code class=\"lang-javascript\">var d = pixelDensity;\nfor (var i = 0; i &lt; d; i++) {\n for (var j = 0; j &lt; d; j++) {\n // loop over\n idx = 4 * ((y * d + j) * width * d + (x * d + i));\n pixels[idx] = r;\n pixels[idx+1] = g;\n pixels[idx+2] = b;\n pixels[idx+3] = a;\n }\n}\n</code>\n<br><br>\nBefore accessing this array, the data must loaded with the loadPixels()\nfunction. After the array data has been modified, the updatePixels()\nfunction must be run to update the changes.\n",
"!url": "https://p5js.org/reference/#/p5/pixels"
},
"loadPixels": {
"!type": "fn()",
"!doc": "Loads the pixels data for this image into the [pixels] attribute.\n",
"!url": "https://p5js.org/reference/#/p5/loadPixels"
},
"updatePixels": {
"!type": "fn()",
"!doc": "Updates the backing canvas for this image with the contents of\nthe [pixels] array.\n",
"!url": "https://p5js.org/reference/#/p5/updatePixels"
},
"get": {
"!type": "fn(x?: number, y?: number, w?: number, h?: number) -> [number]",
"!doc": "Get a region of pixels from an image.\nIf no params are passed, those whole image is returned,\nif x and y are the only params passed a single pixel is extracted\nif all params are passed a rectangle region is extracted and a p5.Image\nis returned.\nReturns undefined if the region is outside the bounds of the image\n",
"!url": "https://p5js.org/reference/#/p5/get"
},
"set": {
"!type": "fn(x: number, y: number, a: number)",
"!doc": "Set the color of a single pixel or write an image into\nthis p5.Image.\nNote that for a large number of pixels this will\nbe slower than directly manipulating the pixels array\nand then calling updatePixels().\n",
"!url": "https://p5js.org/reference/#/p5/set"
},
"resize": {
"!type": "fn(width: number, height: number)",
"!doc": "Resize the image to a new width and height. To make the image scale\nproportionally, use 0 as the value for the wide or high parameter.\nFor instance, to make the width of an image 150 pixels, and change\nthe height using the same proportion, use resize(150, 0).\n",
"!url": "https://p5js.org/reference/#/p5/resize"
},
"copy": {
"!type": "fn(srcImage: Image.p5.Image, sx: Integer, sy: Integer, sw: Integer, sh: Integer, dx: Integer, dy: Integer, dw: Integer, dh: Integer)",
"!doc": "Copies a region of pixels from one image to another. If no\nsrcImage is specified this is used as the source. If the source\nand destination regions aren&#39;t the same size, it will\nautomatically resize source pixels to fit the specified\ntarget region.\n",
"!url": "https://p5js.org/reference/#/p5/copy"
},
"mask": {
"!type": "fn(srcImage: Image.p5.Image)",
"!doc": "Masks part of an image from displaying by loading another\nimage and using it&#39;s alpha channel as an alpha channel for\nthis image.\n",
"!url": "https://p5js.org/reference/#/p5/mask"
},
"filter": {
"!type": "fn(operation: string, value: number)",
"!doc": "Applies an image filter to a p5.Image\n",
"!url": "https://p5js.org/reference/#/p5/filter"
},
"blend": {
"!type": "fn(srcImage: Image.p5.Image, sx: Integer, sy: Integer, sw: Integer, sh: Integer, dx: Integer, dy: Integer, dw: Integer, dh: Integer, blendMode: Integer)",
"!doc": "Copies a region of pixels from one image to another, using a specified\nblend mode to do the operation.\n",
"!url": "https://p5js.org/reference/#/p5/blend"
},
"save": {
"!type": "fn(filename: string, extension: string)",
"!doc": "Saves the image to a file and force the browser to download it.\nAccepts two strings for filename and file extension\nSupports png (default) and jpg.\n",
"!url": "https://p5js.org/reference/#/p5/save"
}
}
}
},
"IO": {
"p5": {
"!type": "fn()",
"!url": "https://p5js.org/reference/#/p5/p5",
"prototype": {
"loadJSON": {
"!type": "fn(path: string, jsonpOptions?: Object, datatype?: string, callback?: fn(), errorCallback?: fn()) -> +Object",
"!doc": "Loads a JSON file from a file or a URL, and returns an Object or Array.\nThis method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. JSONP is supported via a polyfill and you\ncan pass in as the second argument an object with definitions of the json\ncallback following the syntax specified <a href=\"https://github.com/camsong/\nfetch-jsonp\">here</a>.\n",
"!url": "https://p5js.org/reference/#/p5/loadJSON"
},
"loadStrings": {
"!type": "fn(filename: string, callback?: fn(), errorCallback?: fn()) -> [string]",
"!doc": "Reads the contents of a file and creates a String array of its individual\nlines. If the name of the file is used as the parameter, as in the above\nexample, the file must be located in the sketch directory/folder.\n<br><br>\nAlternatively, the file maybe be loaded from anywhere on the local\ncomputer using an absolute path (something that starts with / on Unix and\nLinux, or a drive letter on Windows), or the filename parameter can be a\nURL for a file found on a network.\n<br><br>\nThis method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed.\n",
"!url": "https://p5js.org/reference/#/p5/loadStrings"
},
"loadTable": {
"!type": "fn(filename: string, options?: string, callback?: fn(), errorCallback?: fn()) -> +Object",
"!doc": "Reads the contents of a file or URL and creates a p5.Table object with\nits values. If a file is specified, it must be located in the sketch&#39;s\n&quot;data&quot; folder. The filename parameter can also be a URL to a file found\nonline. By default, the file is assumed to be comma-separated (in CSV\nformat). Table only looks for a header row if the &#39;header&#39; option is\nincluded.\n\nPossible options include:\n<ul>\n<li>csv - parse the table as comma-separated values</li>\n<li>tsv - parse the table as tab-separated values</li>\n<li>header - this table has a header (title) row</li>\n</ul>\n\n\nWhen passing in multiple options, pass them in as separate parameters,\nseperated by commas. For example:\n<br><br>\n<code>\n loadTable(&quot;my_csv_file.csv&quot;, &quot;csv&quot;, &quot;header&quot;)\n</code>\n\n\n All files loaded and saved use UTF-8 encoding.\n\nThis method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling loadTable() inside preload()\nguarantees to complete the operation before setup() and draw() are called.\nOutside of preload(), you may supply a callback function to handle the\nobject:\n",
"!url": "https://p5js.org/reference/#/p5/loadTable"
},
"loadXML": {
"!type": "fn(filename: string, callback?: fn(), errorCallback?: fn()) -> +Object",
"!doc": "Reads the contents of a file and creates an XML object with its values.\nIf the name of the file is used as the parameter, as in the above example,\nthe file must be located in the sketch directory/folder.\nAlternatively, the file maybe be loaded from anywhere on the local\ncomputer using an absolute path (something that starts with / on Unix and\nLinux, or a drive letter on Windows), or the filename parameter can be a\nURL for a file found on a network.\nThis method is asynchronous, meaning it may not finish before the next\nline in your sketch is executed. Calling loadXML() inside preload()\nguarantees to complete the operation before setup() and draw() are called.\nOutside of preload(), you may supply a callback function to handle the\nobject.\n",
"!url": "https://p5js.org/reference/#/p5/loadXML"
},
"httpGet": {
"!type": "fn(path: string, datatype?: string, data?: Object, callback?: fn(), errorCallback?: fn())",
"!doc": "Method for executing an HTTP GET request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text. This is equivalent to\ncalling <code>httpDo(path, &#39;GET&#39;)</code>.\n",
"!url": "https://p5js.org/reference/#/p5/httpGet"
},
"httpPost": {
"!type": "fn(path: string, datatype?: string, data?: Object, callback?: fn(), errorCallback?: fn())",
"!doc": "Method for executing an HTTP POST request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text. This is equivalent to\ncalling <code>httpDo(path, &#39;POST&#39;)</code>.\n",
"!url": "https://p5js.org/reference/#/p5/httpPost"
},
"httpDo": {
"!type": "fn()",
"!doc": "Method for executing an HTTP request. If data type is not specified,\np5 will try to guess based on the URL, defaulting to text.<br><br>\nFor more advanced use, you may also pass in the path as the first argument\nand a object as the second argument, the signature follows the one specified\nin the Fetch API specification.\n",
"!url": "https://p5js.org/reference/#/p5/httpDo"
},
"save": {
"!type": "fn(objectOrFilename?: Object, filename?: string, options?: bool)",
"!doc": "Save an image, text, json, csv, wav, or html. Prompts download to\nthe client&#39;s computer. <b>Note that it is not recommended to call save()\nwithin draw if it&#39;s looping, as the save() function will open a new save\ndialog every frame.</b>\nThe default behavior is to save the canvas as an image. You can\noptionally specify a filename.\nFor example:\n<code>\nsave();\nsave(&#39;myCanvas.jpg&#39;); // save a specific canvas with a filename\n</code>\n\nAlternately, the first parameter can be a pointer to a canvas\np5.Element, an Array of Strings,\nan Array of JSON, a JSON object, a p5.Table, a p5.Image, or a\np5.SoundFile (requires p5.sound). The second parameter is a filename\n(including extension). The third parameter is for options specific\nto this type of object. This method will save a file that fits the\ngiven paramaters. For example:\n\n<code>\n\nsave('myCanvas.jpg'); // Saves canvas as an image\n\nvar cnv = createCanvas(100, 100);\nsave(cnv, 'myCanvas.jpg'); // Saves canvas as an image\n\nvar gb = createGraphics(100, 100);\nsave(gb, 'myGraphics.jpg'); // Saves p5.Renderer object as an image\n\nsave(myTable, 'myTable.html'); // Saves table as html file\nsave(myTable, 'myTable.csv',); // Comma Separated Values\nsave(myTable, 'myTable.tsv'); // Tab Separated Values\n\nsave(myJSON, 'my.json'); // Saves pretty JSON\nsave(myJSON, 'my.json', true); // Optimizes JSON filesize\n\nsave(img, 'my.png'); // Saves pImage as a png image\n\nsave(arrayOfStrings, 'my.txt'); // Saves strings to a text file with line\n // breaks after each item in the array\n</code>",
"!url": "https://p5js.org/reference/#/p5/save"
},
"saveJSON": {
"!type": "fn(json: Array, filename: string, optimize?: bool)",
"!doc": "Writes the contents of an Array or a JSON object to a .json file.\nThe file saving process and location of the saved file will\nvary between web browsers.\n",
"!url": "https://p5js.org/reference/#/p5/saveJSON"
},
"saveStrings": {
"!type": "fn(list: Array, filename: string)",
"!doc": "Writes an array of Strings to a text file, one line per String.\nThe file saving process and location of the saved file will\nvary between web browsers.\n",
"!url": "https://p5js.org/reference/#/p5/saveStrings"
},
"saveTable": {
"!type": "fn(Table: IO.p5.Table, filename: string, options?: string)",
"!doc": "Writes the contents of a Table object to a file. Defaults to a\ntext file with comma-separated-values (&#39;csv&#39;) but can also\nuse tab separation (&#39;tsv&#39;), or generate an HTML table (&#39;html&#39;).\nThe file saving process and location of the saved file will\nvary between web browsers.\n",
"!url": "https://p5js.org/reference/#/p5/saveTable"
},
"undefined": {
"!type": "fn(href: string, filename: [String], extension: [String])",
"!doc": "Forces download. Accepts a url to filedata/blob, a filename,\nand an extension (optional).\nThis is a private function because it does not do any formatting,\nbut it is used by saveStrings, saveJSON, saveTable etc.\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
},
"day": {
"!type": "fn() -> number",
"!doc": "p5.js communicates with the clock on your computer. The day() function\nreturns the current day as a value from 1 - 31.\n",
"!url": "https://p5js.org/reference/#/p5/day"
},
"hour": {
"!type": "fn() -> number",
"!doc": "p5.js communicates with the clock on your computer. The hour() function\nreturns the current hour as a value from 0 - 23.\n",
"!url": "https://p5js.org/reference/#/p5/hour"
},
"minute": {
"!type": "fn() -> number",
"!doc": "p5.js communicates with the clock on your computer. The minute() function\nreturns the current minute as a value from 0 - 59.\n",
"!url": "https://p5js.org/reference/#/p5/minute"
},
"millis": {
"!type": "fn() -> number",
"!doc": "Returns the number of milliseconds (thousandths of a second) since\nstarting the program. This information is often used for timing events and\nanimation sequences.\n",
"!url": "https://p5js.org/reference/#/p5/millis"
},
"month": {
"!type": "fn() -> number",
"!doc": "p5.js communicates with the clock on your computer. The month() function\nreturns the current month as a value from 1 - 12.\n",
"!url": "https://p5js.org/reference/#/p5/month"
},
"second": {
"!type": "fn() -> number",
"!doc": "p5.js communicates with the clock on your computer. The second() function\nreturns the current second as a value from 0 - 59.\n",
"!url": "https://p5js.org/reference/#/p5/second"
},
"year": {
"!type": "fn() -> number",
"!doc": "p5.js communicates with the clock on your computer. The year() function\nreturns the current year as an integer (2014, 2015, 2016, etc).\n",
"!url": "https://p5js.org/reference/#/p5/year"
}
}
},
"p5.Table": {
"!type": "fn(rows?: [IO.p5.TableRow]) -> +IO.p5.Table",
"!doc": "Table objects store data with multiple rows and columns, much\nlike in a traditional spreadsheet. Tables can be generated from\nscratch, dynamically, or using data from an existing file.\n",
"!url": "https://p5js.org/reference/#/p5/p5.Table",
"prototype": {
"undefined": {
"!type": "fn() -> number",
"!doc": "Returns the total number of columns in a Table.\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
},
"columns": {
"!type": "[string]",
"!url": "https://p5js.org/reference/#/p5/columns"
},
"rows": {
"!type": "[+IO.p5.TableRow]",
"!url": "https://p5js.org/reference/#/p5/rows"
},
"addRow": {
"!type": "fn(row?: IO.p5.TableRow)",
"!doc": "Use addRow() to add a new row of data to a p5.Table object. By default,\nan empty row is created. Typically, you would store a reference to\nthe new row in a TableRow object (see newRow in the example above),\nand then set individual values using set().\nIf a p5.TableRow object is included as a parameter, then that row is\nduplicated and added to the table.\n",
"!url": "https://p5js.org/reference/#/p5/addRow"
},
"removeRow": {
"!type": "fn(id: number)",
"!doc": "Removes a row from the table object.\n",
"!url": "https://p5js.org/reference/#/p5/removeRow"
},
"getRow": {
"!type": "fn(rowID: number) -> +IO.p5.TableRow",
"!doc": "Returns a reference to the specified p5.TableRow. The reference\ncan then be used to get and set values of the selected row.\n",
"!url": "https://p5js.org/reference/#/p5/getRow"
},
"getRows": {
"!type": "fn() -> [+IO.p5.TableRow]",
"!doc": "Gets all rows from the table. Returns an array of p5.TableRows.\n",
"!url": "https://p5js.org/reference/#/p5/getRows"
},
"findRow": {
"!type": "fn(value: string, column: number) -> +IO.p5.TableRow",
"!doc": "Finds the first row in the Table that contains the value\nprovided, and returns a reference to that row. Even if\nmultiple rows are possible matches, only the first matching\nrow is returned. The column to search may be specified by\neither its ID or title.\n",
"!url": "https://p5js.org/reference/#/p5/findRow"
},
"findRows": {
"!type": "fn(value: string, column: number) -> [+IO.p5.TableRow]",
"!doc": "Finds the rows in the Table that contain the value\nprovided, and returns references to those rows. Returns an\nArray, so for must be used to iterate through all the rows,\nas shown in the example above. The column to search may be\nspecified by either its ID or title.\n",
"!url": "https://p5js.org/reference/#/p5/findRows"
},
"matchRow": {
"!type": "fn(regexp: string, column: string) -> +IO.p5.TableRow",
"!doc": "Finds the first row in the Table that matches the regular\nexpression provided, and returns a reference to that row.\nEven if multiple rows are possible matches, only the first\nmatching row is returned. The column to search may be\nspecified by either its ID or title.\n",
"!url": "https://p5js.org/reference/#/p5/matchRow"
},
"matchRows": {
"!type": "fn(regexp: string, column?: string) -> [+IO.p5.TableRow]",
"!doc": "Finds the rows in the Table that match the regular expression provided,\nand returns references to those rows. Returns an array, so for must be\nused to iterate through all the rows, as shown in the example. The\ncolumn to search may be specified by either its ID or title.\n",
"!url": "https://p5js.org/reference/#/p5/matchRows"
},
"getColumn": {
"!type": "fn(column: string) -> +Array",
"!doc": "Retrieves all values in the specified column, and returns them\nas an array. The column may be specified by either its ID or title.\n",
"!url": "https://p5js.org/reference/#/p5/getColumn"
},
"clearRows": {
"!type": "fn()",
"!doc": "Removes all rows from a Table. While all rows are removed,\ncolumns and column titles are maintained.\n",
"!url": "https://p5js.org/reference/#/p5/clearRows"
},
"addColumn": {
"!type": "fn(title?: string)",
"!doc": "Use addColumn() to add a new column to a Table object.\nTypically, you will want to specify a title, so the column\nmay be easily referenced later by name. (If no title is\nspecified, the new column&#39;s title will be null.)\n",
"!url": "https://p5js.org/reference/#/p5/addColumn"
},
"getRowCount": {
"!type": "fn() -> number",
"!doc": "Returns the total number of rows in a Table.\n",
"!url": "https://p5js.org/reference/#/p5/getRowCount"
},
"removeTokens": {
"!type": "fn(chars: string, column?: string)",
"!doc": "Removes any of the specified characters (or &quot;tokens&quot;).\n\nIf no column is specified, then the values in all columns and\nrows are processed. A specific column may be referenced by\neither its ID or title.",
"!url": "https://p5js.org/reference/#/p5/removeTokens"
},
"trim": {
"!type": "fn(column: string)",
"!doc": "Trims leading and trailing whitespace, such as spaces and tabs,\nfrom String table values. If no column is specified, then the\nvalues in all columns and rows are trimmed. A specific column\nmay be referenced by either its ID or title.\n",
"!url": "https://p5js.org/reference/#/p5/trim"
},
"removeColumn": {
"!type": "fn(column: string)",
"!doc": "Use removeColumn() to remove an existing column from a Table\nobject. The column to be removed may be identified by either\nits title (a String) or its index value (an int).\nremoveColumn(0) would remove the first column, removeColumn(1)\nwould remove the second column, and so on.\n",
"!url": "https://p5js.org/reference/#/p5/removeColumn"
},
"set": {
"!type": "fn(column: string, value: string)",
"!doc": "Stores a value in the Table&#39;s specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.\n",
"!url": "https://p5js.org/reference/#/p5/set"
},
"setNum": {
"!type": "fn(row: number, column: string, value: number)",
"!doc": "Stores a Float value in the Table&#39;s specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.\n",
"!url": "https://p5js.org/reference/#/p5/setNum"
},
"setString": {
"!type": "fn(row: number, column: string, value: string)",
"!doc": "Stores a String value in the Table&#39;s specified row and column.\nThe row is specified by its ID, while the column may be specified\nby either its ID or title.\n",
"!url": "https://p5js.org/reference/#/p5/setString"
},
"get": {
"!type": "fn(row: number, column: string) -> string",
"!doc": "Retrieves a value from the Table&#39;s specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.\n",
"!url": "https://p5js.org/reference/#/p5/get"
},
"getNum": {
"!type": "fn(row: number, column: string) -> number",
"!doc": "Retrieves a Float value from the Table&#39;s specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.\n",
"!url": "https://p5js.org/reference/#/p5/getNum"
},
"getString": {
"!type": "fn(row: number, column: string) -> string",
"!doc": "Retrieves a String value from the Table&#39;s specified row and column.\nThe row is specified by its ID, while the column may be specified by\neither its ID or title.\n",
"!url": "https://p5js.org/reference/#/p5/getString"
},
"getObject": {
"!type": "fn(headerColumn: string) -> +Object",
"!doc": "Retrieves all table data and returns as an object. If a column name is\npassed in, each row object will be stored with that attribute as its\ntitle.\n",
"!url": "https://p5js.org/reference/#/p5/getObject"
},
"getArray": {
"!type": "fn() -> +Array",
"!doc": "Retrieves all table data and returns it as a multidimensional array.\n",
"!url": "https://p5js.org/reference/#/p5/getArray"
}
}
},
"p5.TableRow": {
"!type": "fn(str?: string, separator?: string) -> +IO.p5.TableRow",
"!doc": "A TableRow object represents a single row of data values,\nstored in columns, from a table.\nA Table Row contains both an ordered array, and an unordered\nJSON object.\n",
"!url": "https://p5js.org/reference/#/p5/p5.TableRow",
"prototype": {
"set": {
"!type": "fn(column: string, value: string)",
"!doc": "Stores a value in the TableRow&#39;s specified column.\nThe column may be specified by either its ID or title.\n",
"!url": "https://p5js.org/reference/#/p5/set"
},
"setNum": {
"!type": "fn(column: string, value: number)",
"!doc": "Stores a Float value in the TableRow&#39;s specified column.\nThe column may be specified by either its ID or title.\n",
"!url": "https://p5js.org/reference/#/p5/setNum"
},
"setString": {
"!type": "fn(column: string, value: string)",
"!doc": "Stores a String value in the TableRow&#39;s specified column.\nThe column may be specified by either its ID or title.\n",
"!url": "https://p5js.org/reference/#/p5/setString"
},
"get": {
"!type": "fn(column: string) -> string",
"!doc": "Retrieves a value from the TableRow&#39;s specified column.\nThe column may be specified by either its ID or title.\n",
"!url": "https://p5js.org/reference/#/p5/get"
},
"getNum": {
"!type": "fn(column: string) -> number",
"!doc": "Retrieves a Float value from the TableRow&#39;s specified\ncolumn. The column may be specified by either its ID or\ntitle.\n",
"!url": "https://p5js.org/reference/#/p5/getNum"
},
"getString": {
"!type": "fn(column: string) -> string",
"!doc": "Retrieves an String value from the TableRow&#39;s specified\ncolumn. The column may be specified by either its ID or\ntitle.\n",
"!url": "https://p5js.org/reference/#/p5/getString"
}
}
},
"p5.XML": {
"!type": "fn() -> +IO.p5.XML",
"!doc": "XML is a representation of an XML object, able to parse XML code. Use\nloadXML() to load external XML files and create XML objects.\n",
"!url": "https://p5js.org/reference/#/p5/p5.XML",
"prototype": {
"getParent": {
"!type": "fn() -> +IO.p5.XML",
"!doc": "Gets a copy of the element&#39;s parent. Returns the parent as another\np5.XML object.\n",
"!url": "https://p5js.org/reference/#/p5/getParent"
},
"getName": {
"!type": "fn() -> string",
"!doc": "Gets the element&#39;s full name, which is returned as a String.\n",
"!url": "https://p5js.org/reference/#/p5/getName"
},
"setName": {
"!type": "fn(the: string)",
"!doc": "Sets the element&#39;s name, which is specified as a String.\n",
"!url": "https://p5js.org/reference/#/p5/setName"
},
"hasChildren": {
"!type": "fn() -> bool",
"!doc": "Checks whether or not the element has any children, and returns the result\nas a boolean.\n",
"!url": "https://p5js.org/reference/#/p5/hasChildren"
},
"listChildren": {
"!type": "fn() -> [string]",
"!doc": "Get the names of all of the element&#39;s children, and returns the names as an\narray of Strings. This is the same as looping through and calling getName()\non each child element individually.\n",
"!url": "https://p5js.org/reference/#/p5/listChildren"
},
"getChildren": {
"!type": "fn(name?: string) -> [+IO.p5.XML]",
"!doc": "Returns all of the element&#39;s children as an array of p5.XML objects. When\nthe name parameter is specified, then it will return all children that match\nthat name.\n",
"!url": "https://p5js.org/reference/#/p5/getChildren"
},
"getChild": {
"!type": "fn(name: string) -> +IO.p5.XML",
"!doc": "Returns the first of the element&#39;s children that matches the name parameter\nor the child of the given index.It returns undefined if no matching\nchild is found.\n",
"!url": "https://p5js.org/reference/#/p5/getChild"
},
"addChild": {
"!type": "fn(a: IO.p5.XML)",
"!doc": "Appends a new child to the element. The child can be specified with\neither a String, which will be used as the new tag&#39;s name, or as a\nreference to an existing p5.XML object.\nA reference to the newly created child is returned as an p5.XML object.\n",
"!url": "https://p5js.org/reference/#/p5/addChild"
},
"removeChild": {
"!type": "fn(name: string)",
"!doc": "Removes the element specified by name or index.\n",
"!url": "https://p5js.org/reference/#/p5/removeChild"
},
"getAttributeCount": {
"!type": "fn() -> number",
"!doc": "Counts the specified element&#39;s number of attributes, returned as an Number.\n",
"!url": "https://p5js.org/reference/#/p5/getAttributeCount"
},
"listAttributes": {
"!type": "fn() -> [string]",
"!doc": "Gets all of the specified element&#39;s attributes, and returns them as an\narray of Strings.\n",
"!url": "https://p5js.org/reference/#/p5/listAttributes"
},
"hasAttribute": {
"!type": "fn(the: string) -> bool",
"!doc": "Checks whether or not an element has the specified attribute.\n",
"!url": "https://p5js.org/reference/#/p5/hasAttribute"
},
"getNum": {
"!type": "fn(name: string, defaultValue?: number) -> number",
"!doc": "Returns an attribute value of the element as an Number. If the defaultValue\nparameter is specified and the attribute doesn&#39;t exist, then defaultValue\nis returned. If no defaultValue is specified and the attribute doesn&#39;t\nexist, the value 0 is returned.\n",
"!url": "https://p5js.org/reference/#/p5/getNum"
},
"getString": {
"!type": "fn(name: string, defaultValue?: number) -> number",
"!doc": "Returns an attribute value of the element as an String. If the defaultValue\nparameter is specified and the attribute doesn&#39;t exist, then defaultValue\nis returned. If no defaultValue is specified and the attribute doesn&#39;t\nexist, null is returned.\n",
"!url": "https://p5js.org/reference/#/p5/getString"
},
"setAttribute": {
"!type": "fn(name: string, value: number)",
"!doc": "Sets the content of an element&#39;s attribute. The first parameter specifies\nthe attribute name, while the second specifies the new content.\n",
"!url": "https://p5js.org/reference/#/p5/setAttribute"
},
"getContent": {
"!type": "fn(defaultValue?: string) -> string",
"!doc": "Returns the content of an element. If there is no such content,\ndefaultValue is returned if specified, otherwise null is returned.\n",
"!url": "https://p5js.org/reference/#/p5/getContent"
},
"setContent": {
"!type": "fn(text: string)",
"!doc": "Sets the element&#39;s content.\n",
"!url": "https://p5js.org/reference/#/p5/setContent"
},
"undefined": {
"!type": "fn()",
"!doc": "This method is called while the parsing of XML (when loadXML() is\ncalled). The XML node is passed and its attributes are stored in the\np5.XML&#39;s attribute Object.\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
}
}
}
},
"Math": {
"p5": {
"!type": "fn()",
"!url": "https://p5js.org/reference/#/p5/p5",
"prototype": {
"abs": {
"!type": "fn(n: number) -> number",
"!doc": "Calculates the absolute value (magnitude) of a number. Maps to Math.abs().\nThe absolute value of a number is always positive.\n",
"!url": "https://p5js.org/reference/#/p5/abs"
},
"ceil": {
"!type": "fn(n: number) -> number",
"!doc": "Calculates the closest int value that is greater than or equal to the\nvalue of the parameter. Maps to Math.ceil(). For example, ceil(9.03)\nreturns the value 10.\n",
"!url": "https://p5js.org/reference/#/p5/ceil"
},
"constrain": {
"!type": "fn(n: number, low: number, high: number) -> number",
"!doc": "Constrains a value between a minimum and maximum value.\n",
"!url": "https://p5js.org/reference/#/p5/constrain"
},
"dist": {
"!type": "fn() -> number",
"!doc": "Calculates the distance between two points.\n",
"!url": "https://p5js.org/reference/#/p5/dist"
},
"exp": {
"!type": "fn(n: number) -> number",
"!doc": "Returns Euler&#39;s number e (2.71828...) raised to the power of the n\nparameter. Maps to Math.exp().\n",
"!url": "https://p5js.org/reference/#/p5/exp"
},
"floor": {
"!type": "fn(n: number) -> number",
"!doc": "Calculates the closest int value that is less than or equal to the\nvalue of the parameter. Maps to Math.floor().\n",
"!url": "https://p5js.org/reference/#/p5/floor"
},
"lerp": {
"!type": "fn(start: number, stop: number, amt: number) -> number",
"!doc": "Calculates a number between two numbers at a specific increment. The amt\nparameter is the amount to interpolate between the two values where 0.0\nequal to the first point, 0.1 is very near the first point, 0.5 is\nhalf-way in between, etc. The lerp function is convenient for creating\nmotion along a straight path and for drawing dotted lines.\n",
"!url": "https://p5js.org/reference/#/p5/lerp"
},
"log": {
"!type": "fn(n: number) -> number",
"!doc": "Calculates the natural logarithm (the base-e logarithm) of a number. This\nfunction expects the n parameter to be a value greater than 0.0. Maps to\nMath.log().\n",
"!url": "https://p5js.org/reference/#/p5/log"
},
"mag": {
"!type": "fn(a: number, b: number) -> number",
"!doc": "Calculates the magnitude (or length) of a vector. A vector is a direction\nin space commonly used in computer graphics and linear algebra. Because it\nhas no &quot;start&quot; position, the magnitude of a vector can be thought of as\nthe distance from the coordinate 0,0 to its x,y value. Therefore, mag() is\na shortcut for writing dist(0, 0, x, y).\n",
"!url": "https://p5js.org/reference/#/p5/mag"
},
"map": {
"!type": "fn(value: number, start1: number, stop1: number, start2: number, stop2: number) -> number",
"!doc": "Re-maps a number from one range to another.\n<br><br>\nIn the first example above, the number 25 is converted from a value in the\nrange of 0 to 100 into a value that ranges from the left edge of the\nwindow (0) to the right edge (width).\n",
"!url": "https://p5js.org/reference/#/p5/map"
},
"max": {
"!type": "fn(n0: number) -> number",
"!doc": "Determines the largest value in a sequence of numbers, and then returns\nthat value. max() accepts any number of Number parameters, or an Array\nof any length.\n",
"!url": "https://p5js.org/reference/#/p5/max"
},
"min": {
"!type": "fn(n0: number) -> number",
"!doc": "Determines the smallest value in a sequence of numbers, and then returns\nthat value. min() accepts any number of Number parameters, or an Array\nof any length.\n",
"!url": "https://p5js.org/reference/#/p5/min"
},
"norm": {
"!type": "fn(value: number, start: number, stop: number) -> number",
"!doc": "Normalizes a number from another range into a value between 0 and 1.\nIdentical to map(value, low, high, 0, 1).\nNumbers outside of the range are not clamped to 0 and 1, because\nout-of-range values are often intentional and useful. (See the second\nexample above.)\n",
"!url": "https://p5js.org/reference/#/p5/norm"
},
"pow": {
"!type": "fn(n: number, e: number) -> number",
"!doc": "Facilitates exponential expressions. The pow() function is an efficient\nway of multiplying numbers by themselves (or their reciprocals) in large\nquantities. For example, pow(3, 5) is equivalent to the expression\n3<em>3</em>3<em>3</em>3 and pow(3, -5) is equivalent to 1 / 3<em>3</em>3<em>3</em>3. Maps to\nMath.pow().\n",
"!url": "https://p5js.org/reference/#/p5/pow"
},
"round": {
"!type": "fn(n: number) -> number",
"!doc": "Calculates the integer closest to the n parameter. For example,\nround(133.8) returns the value 134. Maps to Math.round().\n",
"!url": "https://p5js.org/reference/#/p5/round"
},
"sq": {
"!type": "fn(n: number) -> number",
"!doc": "Squares a number (multiplies a number by itself). The result is always a\npositive number, as multiplying two negative numbers always yields a\npositive result. For example, -1 * -1 = 1.\n",
"!url": "https://p5js.org/reference/#/p5/sq"
},
"sqrt": {
"!type": "fn(n: number) -> number",
"!doc": "Calculates the square root of a number. The square root of a number is\nalways positive, even though there may be a valid negative root. The\nsquare root s of number a is such that s*s = a. It is the opposite of\nsquaring. Maps to Math.sqrt().\n",
"!url": "https://p5js.org/reference/#/p5/sqrt"
},
"createVector": {
"!type": "fn(x?: number, y?: number, z?: number) -> +Math.p5.Vector",
"!doc": "Creates a new p5.Vector (the datatype for storing vectors). This provides a\ntwo or three dimensional vector, specifically a Euclidean (also known as\ngeometric) vector. A vector is an entity that has both magnitude and\ndirection.\n",
"!url": "https://p5js.org/reference/#/p5/createVector"
},
"noise": {
"!type": "fn(x: number, y?: number, z?: number) -> number",
"!doc": "Returns the Perlin noise value at specified coordinates. Perlin noise is\na random sequence generator producing a more natural ordered, harmonic\nsuccession of numbers compared to the standard <b>random()</b> function.\nIt was invented by Ken Perlin in the 1980s and been used since in\ngraphical applications to produce procedural textures, natural motion,\nshapes, terrains etc.<br /><br /> The main difference to the\n<b>random()</b> function is that Perlin noise is defined in an infinite\nn-dimensional space where each pair of coordinates corresponds to a\nfixed semi-random value (fixed only for the lifespan of the program; see\nthe noiseSeed() function). p5.js can compute 1D, 2D and 3D noise,\ndepending on the number of coordinates given. The resulting value will\nalways be between 0.0 and 1.0. The noise value can be animated by moving\nthrough the noise space as demonstrated in the example above. The 2nd\nand 3rd dimension can also be interpreted as time.<br /><br />The actual\nnoise is structured similar to an audio signal, in respect to the\nfunction&#39;s use of frequencies. Similar to the concept of harmonics in\nphysics, perlin noise is computed over several octaves which are added\ntogether for the final result. <br /><br />Another way to adjust the\ncharacter of the resulting sequence is the scale of the input\ncoordinates. As the function works within an infinite space the value of\nthe coordinates doesn&#39;t matter as such, only the distance between\nsuccessive coordinates does (eg. when using <b>noise()</b> within a\nloop). As a general rule the smaller the difference between coordinates,\nthe smoother the resulting noise sequence will be. Steps of 0.005-0.03\nwork best for most applications, but this will differ depending on use.\n",
"!url": "https://p5js.org/reference/#/p5/noise"
},
"noiseDetail": {
"!type": "fn(lod: number, falloff: number)",
"!doc": "Adjusts the character and level of detail produced by the Perlin noise\n function. Similar to harmonics in physics, noise is computed over\n several octaves. Lower octaves contribute more to the output signal and\n as such define the overall intensity of the noise, whereas higher octaves\n create finer grained details in the noise sequence.\n <br><br>\n By default, noise is computed over 4 octaves with each octave contributing\n exactly half than its predecessor, starting at 50% strength for the 1st\n octave. This falloff amount can be changed by adding an additional function\n parameter. Eg. a falloff factor of 0.75 means each octave will now have\n 75% impact (25% less) of the previous lower octave. Any value between\n 0.0 and 1.0 is valid, however note that values greater than 0.5 might\n result in greater than 1.0 values returned by <b>noise()</b>.\n <br><br>\n By changing these parameters, the signal created by the <b>noise()</b>\n function can be adapted to fit very specific needs and characteristics.\n",
"!url": "https://p5js.org/reference/#/p5/noiseDetail"
},
"noiseSeed": {
"!type": "fn(seed: number)",
"!doc": "Sets the seed value for <b>noise()</b>. By default, <b>noise()</b>\nproduces different results each time the program is run. Set the\n<b>value</b> parameter to a constant to return the same pseudo-random\nnumbers each time the software is run.\n",
"!url": "https://p5js.org/reference/#/p5/noiseSeed"
},
"randomSeed": {
"!type": "fn(seed: number)",
"!doc": "Sets the seed value for random().\nBy default, random() produces different results each time the program\nis run. Set the seed parameter to a constant to return the same\npseudo-random numbers each time the software is run.\n",
"!url": "https://p5js.org/reference/#/p5/randomSeed"
},
"random": {
"!type": "fn() -> number",
"!doc": "Return a random floating-point number.\nTakes either 0, 1 or 2 arguments.\nIf no argument is given, returns a random number from 0\nup to (but not including) 1.\nIf one argument is given and it is a number, returns a random number from 0\nup to (but not including) the number.\nIf one argument is given and it is an array, returns a random element from\nthat array.\nIf two arguments are given, returns a random number from the\nfirst argument up to (but not including) the second argument.\n",
"!url": "https://p5js.org/reference/#/p5/random"
},
"randomGaussian": {
"!type": "fn(mean: number, sd: number) -> number",
"!doc": "Returns a random number fitting a Gaussian, or\n normal, distribution. There is theoretically no minimum or maximum\n value that randomGaussian() might return. Rather, there is\n just a very low probability that values far from the mean will be\n returned; and a higher probability that numbers near the mean will\n be returned.\n <br><br>\n Takes either 0, 1 or 2 arguments.<br>\n If no args, returns a mean of 0 and standard deviation of 1.<br>\n If one arg, that arg is the mean (standard deviation is 1).<br>\n If two args, first is mean, second is standard deviation.\n",
"!url": "https://p5js.org/reference/#/p5/randomGaussian"
},
"acos": {
"!type": "fn(value: number) -> number",
"!doc": "The inverse of cos(), returns the arc cosine of a value. This function\nexpects the values in the range of -1 to 1 and values are returned in\nthe range 0 to PI (3.1415927).\n",
"!url": "https://p5js.org/reference/#/p5/acos"
},
"asin": {
"!type": "fn(value: number) -> number",
"!doc": "The inverse of sin(), returns the arc sine of a value. This function\nexpects the values in the range of -1 to 1 and values are returned\nin the range -PI/2 to PI/2.\n",
"!url": "https://p5js.org/reference/#/p5/asin"
},
"atan": {
"!type": "fn(value: number) -> number",
"!doc": "The inverse of tan(), returns the arc tangent of a value. This function\nexpects the values in the range of -Infinity to Infinity (exclusive) and\nvalues are returned in the range -PI/2 to PI/2.\n",
"!url": "https://p5js.org/reference/#/p5/atan"
},
"atan2": {
"!type": "fn(y: number, x: number) -> number",
"!doc": "Calculates the angle (in radians) from a specified point to the coordinate\norigin as measured from the positive x-axis. Values are returned as a\nfloat in the range from PI to -PI. The atan2() function is most often used\nfor orienting geometry to the position of the cursor.\n<br><br>\nNote: The y-coordinate of the point is the first parameter, and the\nx-coordinate is the second parameter, due the the structure of calculating\nthe tangent.\n",
"!url": "https://p5js.org/reference/#/p5/atan2"
},
"cos": {
"!type": "fn(angle: number) -> number",
"!doc": "Calculates the cosine of an angle. This function takes into account the\ncurrent angleMode. Values are returned in the range -1 to 1.\n",
"!url": "https://p5js.org/reference/#/p5/cos"
},
"sin": {
"!type": "fn(angle: number) -> number",
"!doc": "Calculates the sine of an angle. This function takes into account the\ncurrent angleMode. Values are returned in the range -1 to 1.\n",
"!url": "https://p5js.org/reference/#/p5/sin"
},
"tan": {
"!type": "fn(angle: number) -> number",
"!doc": "Calculates the tangent of an angle. This function takes into account\nthe current angleMode. Values are returned in the range -1 to 1.\n",
"!url": "https://p5js.org/reference/#/p5/tan"
},
"degrees": {
"!type": "fn(radians: number) -> number",
"!doc": "Converts a radian measurement to its corresponding value in degrees.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964.\n",
"!url": "https://p5js.org/reference/#/p5/degrees"
},
"radians": {
"!type": "fn(degrees: number) -> number",
"!doc": "Converts a degree measurement to its corresponding value in radians.\nRadians and degrees are two ways of measuring the same thing. There are\n360 degrees in a circle and 2*PI radians in a circle. For example,\n90° = PI/2 = 1.5707964.\n",
"!url": "https://p5js.org/reference/#/p5/radians"
},
"angleMode": {
"!type": "fn(mode: Constant)",
"!doc": "Sets the current mode of p5 to given mode. Default mode is RADIANS.\n",
"!url": "https://p5js.org/reference/#/p5/angleMode"
}
}
},
"p5.Vector": {
"!type": "fn(x?: number, y?: number, z?: number) -> +Math.p5.Vector",
"!doc": "A class to describe a two or three dimensional vector, specifically\na Euclidean (also known as geometric) vector. A vector is an entity\nthat has both magnitude and direction. The datatype, however, stores\nthe components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude\nand direction can be accessed via the methods mag() and heading().\n<br><br>\nIn many of the p5.js examples, you will see p5.Vector used to describe a\nposition, velocity, or acceleration. For example, if you consider a rectangle\nmoving across the screen, at any given instant it has a position (a vector\nthat points from the origin to its location), a velocity (the rate at which\nthe object&#39;s position changes per time unit, expressed as a vector), and\nacceleration (the rate at which the object&#39;s velocity changes per time\nunit, expressed as a vector).\n<br><br>\nSince vectors represent groupings of values, we cannot simply use\ntraditional addition/multiplication/etc. Instead, we&#39;ll need to do some\n&quot;vector&quot; math, which is made easy by the methods inside the p5.Vector class.\n",
"!url": "https://p5js.org/reference/#/p5/p5.Vector",
"prototype": {
"x": {
"!type": "number",
"!doc": "The x component of the vector\n",
"!url": "https://p5js.org/reference/#/p5/x"
},
"y": {
"!type": "number",
"!doc": "The y component of the vector\n",
"!url": "https://p5js.org/reference/#/p5/y"
},
"z": {
"!type": "number",
"!doc": "The z component of the vector\n",
"!url": "https://p5js.org/reference/#/p5/z"
},
"toString": {
"!type": "fn()",
"!doc": "Returns a string representation of a vector v by calling String(v)\nor v.toString(). This method is useful for logging vectors in the\nconsole.\n",
"!url": "https://p5js.org/reference/#/p5/toString"
},
"set": {
"!type": "fn(x?: number, y?: number, z?: number) -> !this",
"!doc": "Sets the x, y, and z component of the vector using two or three separate\nvariables, the data from a p5.Vector, or the values from a float array.\n",
"!url": "https://p5js.org/reference/#/p5/set"
},
"copy": {
"!type": "fn() -> +Math.p5.Vector",
"!doc": "Gets a copy of the vector, returns a p5.Vector object.\n",
"!url": "https://p5js.org/reference/#/p5/copy"
},
"add": {
"!type": "fn() -> !this",
"!doc": "Adds x, y, and z components to a vector, adds one vector to another, or\nadds two independent vectors together. The version of the method that adds\ntwo vectors together is a static method and returns a p5.Vector, the others\nacts directly on the vector. See the examples for more context.\n",
"!url": "https://p5js.org/reference/#/p5/add"
},
"sub": {
"!type": "fn() -> !this",
"!doc": "Subtracts x, y, and z components from a vector, subtracts one vector from\nanother, or subtracts two independent vectors. The version of the method\nthat subtracts two vectors is a static method and returns a p5.Vector, the\nother acts directly on the vector. See the examples for more context.\n",
"!url": "https://p5js.org/reference/#/p5/sub"
},
"mult": {
"!type": "fn() -> !this",
"!doc": "Multiply the vector by a scalar. The static version of this method\ncreates a new p5.Vector while the non static version acts on the vector\ndirectly. See the examples for more context.\n",
"!url": "https://p5js.org/reference/#/p5/mult"
},
"div": {
"!type": "fn() -> !this",
"!doc": "Divide the vector by a scalar. The static version of this method creates a\nnew p5.Vector while the non static version acts on the vector directly.\nSee the examples for more context.\n",
"!url": "https://p5js.org/reference/#/p5/div"
},
"mag": {
"!type": "fn() -> number",
"!doc": "Calculates the magnitude (length) of the vector and returns the result as\na float (this is simply the equation sqrt(x<em>x + y</em>y + z*z).)\n",
"!url": "https://p5js.org/reference/#/p5/mag"
},
"magSq": {
"!type": "fn() -> number",
"!doc": "Calculates the squared magnitude of the vector and returns the result\nas a float (this is simply the equation <em>(x<em>x + y</em>y + z*z)</em>.)\nFaster if the real length is not required in the\ncase of comparing vectors, etc.\n",
"!url": "https://p5js.org/reference/#/p5/magSq"
},
"dot": {
"!type": "fn() -> number",
"!doc": "Calculates the dot product of two vectors. The version of the method\nthat computes the dot product of two independent vectors is a static\nmethod. See the examples for more context.\n",
"!url": "https://p5js.org/reference/#/p5/dot"
},
"cross": {
"!type": "fn() -> +Math.p5.Vector",
"!doc": "Calculates and returns a vector composed of the cross product between\ntwo vectors. Both the static and non static methods return a new p5.Vector.\nSee the examples for more context.\n",
"!url": "https://p5js.org/reference/#/p5/cross"
},
"dist": {
"!type": "fn() -> number",
"!doc": "Calculates the Euclidean distance between two points (considering a\npoint as a vector object).\n",
"!url": "https://p5js.org/reference/#/p5/dist"
},
"normalize": {
"!type": "fn() -> +Math.p5.Vector",
"!doc": "Normalize the vector to length 1 (make it a unit vector).\n",
"!url": "https://p5js.org/reference/#/p5/normalize"
},
"limit": {
"!type": "fn(max: number) -> !this",
"!doc": "Limit the magnitude of this vector to the value used for the <b>max</b>\nparameter.\n",
"!url": "https://p5js.org/reference/#/p5/limit"
},
"setMag": {
"!type": "fn(len: number) -> !this",
"!doc": "Set the magnitude of this vector to the value used for the <b>len</b>\nparameter.\n",
"!url": "https://p5js.org/reference/#/p5/setMag"
},
"heading": {
"!type": "fn() -> number",
"!doc": "Calculate the angle of rotation for this vector (only 2D vectors)\n",
"!url": "https://p5js.org/reference/#/p5/heading"
},
"rotate": {
"!type": "fn(angle: number) -> !this",
"!doc": "Rotate the vector by an angle (only 2D vectors), magnitude remains the\nsame\n",
"!url": "https://p5js.org/reference/#/p5/rotate"
},
"angleBetween": {
"!type": "fn(the: Math.p5.Vector) -> number",
"!doc": "Calculates and returns the angle (in radians) between two vectors.\n",
"!url": "https://p5js.org/reference/#/p5/angleBetween"
},
"lerp": {
"!type": "fn() -> !this",
"!doc": "Linear interpolate the vector to another vector\n",
"!url": "https://p5js.org/reference/#/p5/lerp"
},
"array": {
"!type": "fn() -> [number]",
"!doc": "Return a representation of this vector as a float array. This is only\nfor temporary use. If used in any other fashion, the contents should be\ncopied by using the <b>p5.Vector.copy()</b> method to copy into your own\narray.\n",
"!url": "https://p5js.org/reference/#/p5/array"
},
"equals": {
"!type": "fn(x?: number, y?: number, z?: number) -> bool",
"!doc": "Equality check against a p5.Vector\n",
"!url": "https://p5js.org/reference/#/p5/equals"
},
"undefined": {
"!type": "fn()",
"!doc": "Linear interpolate a vector to another vector and return the result as a\nnew vector.\n",
"!url": "https://p5js.org/reference/#/p5/undefined"
}
},
"fromAngle": {
"!type": "fn(angle: number) -> +Math.p5.Vector",
"!doc": "Make a new 2D unit vector from an angle\n",
"!url": "https://p5js.org/reference/#/p5/fromAngle"
},
"random2D": {
"!type": "fn() -> +Math.p5.Vector",
"!doc": "Make a new 2D unit vector from a random angle\n",
"!url": "https://p5js.org/reference/#/p5/random2D"
},
"random3D": {
"!type": "fn() -> +Math.p5.Vector",
"!doc": "Make a new random 3D unit vector.\n",
"!url": "https://p5js.org/reference/#/p5/random3D"
}
}
},
"Typography": {
"p5": {
"!type": "fn()",
"!url": "https://p5js.org/reference/#/p5/p5"