{ "HALF_PI": { "body": [ "HALF_PI" ], "description": "HALF_PI is a mathematical constant with the value 1.57079632679489661923. It is half the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos().", "prefix": "HALF_PI" }, "PI": { "body": [ "PI" ], "description": "PI is a mathematical constant with the value 3.14159265358979323846. It is the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos().", "prefix": "PI" }, "QUARTER_PI": { "body": [ "QUARTER_PI" ], "description": "QUARTER_PI is a mathematical constant with the value 0.7853982. It is one quarter the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos().", "prefix": "QUARTER_PI" }, "TAU": { "body": [ "TAU" ], "description": "TAU is an alias for TWO_PI, a mathematical constant with the value 6.28318530717958647693. It is twice the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos().", "prefix": "TAU" }, "TWO_PI": { "body": [ "TWO_PI" ], "description": "TWO_PI is a mathematical constant with the value 6.28318530717958647693. It is twice the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos().", "prefix": "TWO_PI" }, "abs": { "body": [ "abs(${1:n})" ], "description": "Calculates the absolute value (magnitude) of a number. Maps to Math.abs(). The absolute value of a number is always positive.", "prefix": "abs" }, "accelerationX": { "body": [ "accelerationX" ], "description": "The system variable accelerationX always contains the acceleration of the device along the x axis. Value is represented as meters per second squared.", "prefix": "accelerationX" }, "accelerationY": { "body": [ "accelerationY" ], "description": "The system variable accelerationY always contains the acceleration of the device along the y axis. Value is represented as meters per second squared.", "prefix": "accelerationY" }, "accelerationZ": { "body": [ "accelerationZ" ], "description": "The system variable accelerationZ always contains the acceleration of the device along the z axis. Value is represented as meters per second squared.", "prefix": "accelerationZ" }, "acos": { "body": [ "acos(${1:value})" ], "description": "The inverse of cos(), returns the arc cosine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range 0 to PI (3.1415927).", "prefix": "acos" }, "alpha": { "body": [ "alpha(${1:obj})" ], "description": "Extracts the alpha value from a color or pixel array.", "prefix": "alpha" }, "ambientLight": { "body": [ "ambientLight(${1:v1}, ${2:[v2]}, ${3:[v3]}, ${4:[a]})" ], "description": "Creates an ambient light with a color", "prefix": "ambientLight" }, "ambientMaterial": { "body": [ "ambientMaterial(${1:v1}, ${2:[v2]}, ${3:[v3]}, ${4:[a]})" ], "description": "Ambient material for geometry with a given color. You can view all possible materials in this example.", "prefix": "ambientMaterial" }, "angleMode": { "body": [ "angleMode(${1:mode})" ], "description": "Sets the current mode of p5 to given mode. Default mode is RADIANS.", "prefix": "angleMode" }, "append": { "body": [ "append(${1:array}, ${2:value})" ], "description": "Adds a value to the end of an array. Extends the length of the array by one. Maps to Array.push().", "prefix": "append" }, "applyMatrix": { "body": [ "applyMatrix(${1:n00}, ${2:n01}, ${3:n02}, ${4:n10}, ${5:n11}, ${6:n12})" ], "description": "Multiplies the current matrix by the one specified through the parameters. This is very slow because it will try to calculate the inverse of the transform, so avoid it whenever possible.", "prefix": "applyMatrix" }, "arc": { "body": [ "arc(${1:a}, ${2:b}, ${3:c}, ${4:d}, ${5:start}, ${6:stop}, ${7:[mode]})" ], "description": "Draw an arc to the screen. If called with only a, b, c, d, start, and stop, the arc will be drawn as an open pie. If mode is provided, the arc will be drawn either open, as a chord, or as a pie as specified. The origin may be changed with the ellipseMode() function. Note that drawing a full circle (ex: 0 to TWO_PI) will appear blank because 0 and TWO_PI are the same position on the unit circle. The best way to handle this is by using the ellipse() function instead to create a closed ellipse, and to use the arc() function only to draw parts of an ellipse.", "prefix": "arc" }, "arrayCopy": { "body": [ "arrayCopy(${1:src}, ${2:[srcPosition]}, ${3:dst}, ${4:[dstPosition]}, ${5:[length]})" ], "description": "Copies an array (or part of an array) to another array. The src array is copied to the dst array, beginning at the position specified by srcPosition and into the position specified by dstPosition. The number of elements to copy is determined by length. Note that copying values overwrites existing values in the destination array. To append values instead of overwriting them, use concat(). The simplified version with only two arguments, arrayCopy(src, dst), copies an entire array to another of the same size. It is equivalent to arrayCopy(src, 0, dst, 0, src.length). Using this function is far more efficient for copying array data than iterating through a for() loop and copying each element individually.", "prefix": "arrayCopy" }, "asin": { "body": [ "asin(${1:value})" ], "description": "The inverse of sin(), returns the arc sine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range -PI/2 to PI/2.", "prefix": "asin" }, "atan": { "body": [ "atan(${1:value})" ], "description": "The inverse of tan(), returns the arc tangent of a value. This function expects the values in the range of -Infinity to Infinity (exclusive) and values are returned in the range -PI/2 to PI/2.", "prefix": "atan" }, "atan2": { "body": [ "atan2(${1:y}, ${2:x})" ], "description": "Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis. Values are returned as a float in the range from PI to -PI. The atan2() function is most often used for orienting geometry to the position of the cursor. Note: The y-coordinate of the point is the first parameter, and the x-coordinate is the second parameter, due the the structure of calculating the tangent.", "prefix": "atan2" }, "background": { "body": [ "background(${1:color}, ${2:[a]})" ], "description": "The background() function sets the color used for the background of the p5.js canvas. The default background is light gray. This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the background need only be set once.", "prefix": "background" }, "beginContour": { "body": [ "beginContour()" ], "description": "Use the beginContour() and endContour() functions to create negative shapes within shapes such as the center of the letter 'O'. beginContour() begins recording vertices for the shape and endContour() stops recording. The vertices that define a negative shape must \"wind\" in the opposite direction from the exterior shape. First draw vertices for the exterior clockwise order, then for internal shapes, draw vertices shape in counter-clockwise. These functions can only be used within a beginShape()/endShape() pair and transformations such as translate(), rotate(), and scale() do not work within a beginContour()/endContour() pair. It is also not possible to use other shapes, such as ellipse() or rect() within.", "prefix": "beginContour" }, "beginShape": { "body": [ "beginShape(${1:kind})" ], "description": "Using the beginShape() and endShape() functions allow creating more complex forms. beginShape() begins recording vertices for a shape and endShape() stops recording. The value of the kind parameter tells it which types of shapes to create from the provided vertices. With no mode specified, the shape can be any irregular polygon. The parameters available for beginShape() are POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the beginShape() function, a series of vertex() commands must follow. To stop drawing the shape, call endShape(). Each shape will be outlined with the current stroke color and filled with the fill color. Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape().", "prefix": "beginShape" }, "bezier": { "body": [ "bezier(${1:x1}, ${2:y1}, ${3:x2}, ${4:y2}, ${5:x3}, ${6:y3}, ${7:x4}, ${8:y4})" ], "description": "Draws a cubic Bezier curve on the screen. These curves are defined by a series of anchor and control points. The first two parameters specify the first anchor point and the last two parameters specify the other anchor point, which become the first and last points on the curve. The middle parameters specify the two control points which define the shape of the curve. Approximately speaking, control points \"pull\" the curve towards them.Bezier curves were developed by French automotive engineer Pierre Bezier, and are commonly used in computer graphics to define gently sloping curves. See also curve().", "prefix": "bezier" }, "bezierPoint": { "body": [ "bezierPoint(${1:a}, ${2:b}, ${3:c}, ${4:d}, ${5:t})" ], "description": "Evaluates the Bezier at position t for points a, b, c, d. The parameters a and d are the first and last points on the curve, and b and c are the control points. The final parameter t varies between 0 and 1. This can be done once with the x coordinates and a second time with the y coordinates to get the location of a bezier curve at t.", "prefix": "bezierPoint" }, "bezierTangent": { "body": [ "bezierTangent(${1:a}, ${2:b}, ${3:c}, ${4:d}, ${5:t})" ], "description": "Evaluates the tangent to the Bezier at position t for points a, b, c, d. The parameters a and d are the first and last points on the curve, and b and c are the control points. The final parameter t varies between 0 and 1.", "prefix": "bezierTangent" }, "bezierVertex": { "body": [ "bezierVertex(${1:x2}, ${2:y2}, ${3:x3}, ${4:y3}, ${5:x4}, ${6:y4})" ], "description": "Specifies vertex coordinates for Bezier curves. Each call to bezierVertex() defines the position of two control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. The first time bezierVertex() is used within a beginShape() call, it must be prefaced with a call to vertex() to set the first anchor point. This function must be used between beginShape() and endShape() and only when there is no MODE parameter specified to beginShape().", "prefix": "bezierVertex" }, "blend": { "body": [ "blend(${1:srcImage}, ${2:sx}, ${3:sy}, ${4:sw}, ${5:sh}, ${6:dx}, ${7:dy}, ${8:dw}, ${9:dh}, ${10:blendMode})" ], "description": "Copies a region of pixels from one image to another, using a specified blend mode to do the operation. Available blend modes are: BLEND | DARKEST | LIGHTEST | DIFFERENCE | MULTIPLY| EXCLUSION | SCREEN | REPLACE | OVERLAY | HARD_LIGHT | SOFT_LIGHT | DODGE | BURN | ADD | NORMAL", "prefix": "blend" }, "blendMode": { "body": [ "blendMode(${1:mode})" ], "description": "Blends the pixels in the display window according to the defined mode. There is a choice of the following modes to blend the source pixels (A) with the ones of pixels already in the display window (B): BLEND - linear interpolation of colours: C = Afactor + B. This is the default blending mode. ADD - sum of A and B DARKEST - only the darkest colour succeeds: C = min(Afactor, B). LIGHTEST - only the lightest colour succeeds: C = max(A*factor, B). DIFFERENCE - subtract colors from underlying image. EXCLUSION - similar to DIFFERENCE, but less extreme. MULTIPLY - multiply the colors, result will always be darker. SCREEN - opposite multiply, uses inverse values of the colors. REPLACE - the pixels entirely replace the others and don't utilize alpha (transparency) values. OVERLAY - mix of MULTIPLY and SCREEN . Multiplies dark values, and screens light values. HARD_LIGHT - SCREEN when greater than 50% gray, MULTIPLY when lower. SOFT_LIGHT - mix of DARKEST and LIGHTEST. Works like OVERLAY, but not as harsh. DODGE - lightens light tones and increases contrast, ignores darks. BURN - darker areas are applied, increasing contrast, ignores lights.", "prefix": "blendMode" }, "blue": { "body": [ "blue(${1:obj})" ], "description": "Extracts the blue value from a color or pixel array.", "prefix": "blue" }, "boolean": { "body": [ "boolean(${1:n})" ], "description": "Converts a number or string to its boolean representation. For a number, any non-zero value (positive or negative) evaluates to true, while zero evaluates to false. For a string, the value \"true\" evaluates to true, while any other value evaluates to false. When an array of number or string values is passed in, then a array of booleans of the same length is returned.", "prefix": "boolean" }, "box": { "body": [ "box(${1:width}, ${2:Height}, ${3:depth}, ${4:[detailX]}, ${5:[detailY]})" ], "description": "Draw a box with given width, height and depth", "prefix": "box" }, "brightness": { "body": [ "brightness(${1:color})" ], "description": "Extracts the HSB brightness value from a color or pixel array.", "prefix": "brightness" }, "byte": { "body": [ "byte(${1:n})" ], "description": "Converts a number, string or boolean to its byte representation. A byte can be only a whole number between -128 and 127, so when a value outside of this range is converted, it wraps around to the corresponding byte representation. When an array of number, string or boolean values is passed in, then an array of bytes the same length is returned.", "prefix": "byte" }, "camera": { "body": [ "camera(${1:x}, ${2:y}, ${3:z})" ], "description": "Sets camera position", "prefix": "camera" }, "ceil": { "body": [ "ceil(${1:n})" ], "description": "Calculates the closest int value that is greater than or equal to the value of the parameter. Maps to Math.ceil(). For example, ceil(9.03) returns the value 10.", "prefix": "ceil" }, "char": { "body": [ "char(${1:n})" ], "description": "Converts a number or string to its corresponding single-character string representation. If a string parameter is provided, it is first parsed as an integer and then translated into a single-character string. When an array of number or string values is passed in, then an array of single-character strings of the same length is returned.", "prefix": "char" }, "clear": { "body": [ "clear()" ], "description": "Clears the pixels within a buffer. This function only works on p5.Canvas objects created with the createCanvas() function; it won't work with the main display window. Unlike the main graphics context, pixels in additional graphics areas created with createGraphics() can be entirely or partially transparent. This function clears everything to make all of the pixels 100% transparent.", "prefix": "clear" }, "color": { "body": [ "color(${1:gray}, ${2:[alpha]})" ], "description": "Creates colors for storing in variables of the color datatype. The parameters are interpreted as RGB or HSB values depending on the current colorMode(). The default mode is RGB values from 0 to 255 and, therefore, the function call color(255, 204, 0) will return a bright yellow color. Note that if only one value is provided to color(), it will be interpreted as a grayscale value. Add a second value, and it will be used for alpha transparency. When three values are specified, they are interpreted as either RGB or HSB values. Adding a fourth value applies alpha transparency. If a single string parameter is provided it will be interpreted as a CSS-compatible color string. Colors are stored as Numbers or Arrays.", "prefix": "color" }, "colorMode": { "body": [ "colorMode(${1:mode}, ${2:[max1]}, ${3:[max2]}, ${4:[max3]}, ${5:[maxA]})" ], "description": "colorMode() changes the way p5.js interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using the RGB color model. This is equivalent to setting colorMode(RGB, 255). Setting colorMode(HSB) lets you use the HSB system instead. By default, this is colorMode(HSB, 360, 100, 100, 1). You can also use HSL. Note: existing color objects remember the mode that they were created in, so you can change modes as you like without affecting their appearance.", "prefix": "colorMode" }, "concat": { "body": [ "concat(${1:a}, ${2:b})" ], "description": "Concatenates two arrays, maps to Array.concat(). Does not modify the input arrays.", "prefix": "concat" }, "cone": { "body": [ "cone(${1:radius}, ${2:height}, ${3:[detailX]}, ${4:[detailY]})" ], "description": "Draw a cone with given radius and height", "prefix": "cone" }, "constrain": { "body": [ "constrain(${1:n}, ${2:low}, ${3:high})" ], "description": "Constrains a value between a minimum and maximum value.", "prefix": "constrain" }, "copy": { "body": [ "copy(${1:srcImage}, ${2:sx}, ${3:sy}, ${4:sw}, ${5:sh}, ${6:dx}, ${7:dy}, ${8:dw}, ${9:dh})" ], "description": "Copies a region of the canvas to another region of the canvas and copies a region of pixels from an image used as the srcImg parameter into the canvas srcImage is specified this is used as the source. If the source and destination regions aren't the same size, it will automatically resize source pixels to fit the specified target region.", "prefix": "copy" }, "cos": { "body": [ "cos(${1:angle})" ], "description": "Calculates the cosine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1.", "prefix": "cos" }, "createCanvas": { "body": [ "createCanvas(${1:w}, ${2:h}, ${3:[renderer]})" ], "description": "Creates a canvas element in the document, and sets the dimensions of it in pixels. This method should be called only once at the start of setup. Calling createCanvas more than once in a sketch will result in very unpredicable behavior. If you want more than one drawing canvas you could use createGraphics (hidden by default but it can be shown). The system variables width and height are set by the parameters passed to this function. If createCanvas() is not used, the window will be given a default size of 100x100 pixels. For more ways to position the canvas, see the positioning the canvas wiki page.", "prefix": "createCanvas" }, "createGraphics": { "body": [ "createGraphics(${1:w}, ${2:h}, ${3:[renderer]})" ], "description": "Creates and returns a new p5.Renderer object. Use this class if you need to draw into an off-screen graphics buffer. The two parameters define the width and height in pixels.", "prefix": "createGraphics" }, "createImage": { "body": [ "createImage(${1:width}, ${2:height})" ], "description": "Creates a new p5.Image (the datatype for storing images). This provides a fresh buffer of pixels to play with. Set the size of the buffer with the width and height parameters. .pixels gives access to an array containing the values for all the pixels in the display window. These values are numbers. This array is the size (including an appropriate factor for the pixelDensity) of the display window x4, representing the R, G, B, A values in order for each pixel, moving from left to right across each row, then down each column. See .pixels for more info. It may also be simpler to use set() or get(). Before accessing the pixels of an image, the data must loaded with the loadPixels() function. After the array data has been modified, the updatePixels() function must be run to update the changes.", "prefix": "createImage" }, "createVector": { "body": [ "createVector(${1:[x]}, ${2:[y]}, ${3:[z]})" ], "description": "Creates a new p5.Vector (the datatype for storing vectors). This provides a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction.", "prefix": "createVector" }, "cursor": { "body": [ "cursor(${1:type}, ${2:[x]}, ${3:[y]})" ], "description": "Sets the cursor to a predefined symbol or an image, or makes it visible if already hidden. If you are trying to set an image as the cursor, the recommended size is 16x16 or 32x32 pixels. It is not possible to load an image as the cursor if you are exporting your program for the Web, and not all MODES work with all browsers. The values for parameters x and y must be less than the dimensions of the image.", "prefix": "cursor" }, "curve": { "body": [ "curve(${1:x1}, ${2:y1}, ${3:x2}, ${4:y2}, ${5:x3}, ${6:y3}, ${7:x4}, ${8:y4})" ], "description": "Draws a curved line on the screen between two points, given as the middle four parameters. The first two parameters are a control point, as if the curve came from this point even though it's not drawn. The last two parameters similarly describe the other control point. Longer curves can be created by putting a series of curve() functions together or using curveVertex(). An additional function called curveTightness() provides control for the visual quality of the curve. The curve() function is an implementation of Catmull-Rom splines.", "prefix": "curve" }, "curvePoint": { "body": [ "curvePoint(${1:a}, ${2:b}, ${3:c}, ${4:d}, ${5:t})" ], "description": "Evaluates the curve at position t for points a, b, c, d. The parameter t varies between 0 and 1, a and d are points on the curve, and b and c are the control points. This can be done once with the x coordinates and a second time with the y coordinates to get the location of a curve at t.", "prefix": "curvePoint" }, "curveTangent": { "body": [ "curveTangent(${1:a}, ${2:b}, ${3:c}, ${4:d}, ${5:t})" ], "description": "Evaluates the tangent to the curve at position t for points a, b, c, d. The parameter t varies between 0 and 1, a and d are points on the curve, and b and c are the control points.", "prefix": "curveTangent" }, "curveTightness": { "body": [ "curveTightness(${1:amount})" ], "description": "Modifies the quality of forms created with curve() and curveVertex(). The parameter tightness determines how the curve fits to the vertex points. The value 0.0 is the default value for tightness (this value defines the curves to be Catmull-Rom splines) and the value 1.0 connects all the points with straight lines. Values within the range -5.0 and 5.0 will deform the curves but will leave them recognizable and as values increase in magnitude, they will continue to deform.", "prefix": "curveTightness" }, "curveVertex": { "body": [ "curveVertex(${1:x}, ${2:y})" ], "description": "Specifies vertex coordinates for curves. This function may only be used between beginShape() and endShape() and only when there is no MODE parameter specified to beginShape(). The first and last points in a series of curveVertex() lines will be used to guide the beginning and end of a the curve. A minimum of four points is required to draw a tiny curve between the second and third points. Adding a fifth point with curveVertex() will draw the curve between the second, third, and fourth points. The curveVertex() function is an implementation of Catmull-Rom splines.", "prefix": "curveVertex" }, "cylinder": { "body": [ "cylinder(${1:radius}, ${2:height}, ${3:[detailX]}, ${4:[detailY]})" ], "description": "Draw a cylinder with given radius and height", "prefix": "cylinder" }, "day": { "body": [ "day()" ], "description": "p5.js communicates with the clock on your computer. The day() function returns the current day as a value from 1 - 31.", "prefix": "day" }, "degrees": { "body": [ "degrees(${1:radians})" ], "description": "Converts a radian measurement to its corresponding value in degrees. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964.", "prefix": "degrees" }, "deviceMoved": { "body": [ "deviceMoved()" ], "description": "The deviceMoved() function is called when the device is moved by more than the threshold value along X, Y or Z axis. The default threshold is set to 0.5.", "prefix": "deviceMoved" }, "deviceOrientation": { "body": [ "deviceOrientation" ], "description": "The system variable deviceOrientation always contains the orientation of the device. The value of this variable will either be set 'landscape' or 'portrait'. If no data is available it will be set to 'undefined'.", "prefix": "deviceOrientation" }, "deviceShaken": { "body": [ "deviceShaken()" ], "description": "The deviceShaken() function is called when the device total acceleration changes of accelerationX and accelerationY values is more than the threshold value. The default threshold is set to 30.", "prefix": "deviceShaken" }, "deviceTurned": { "body": [ "deviceTurned()" ], "description": "The deviceTurned() function is called when the device rotates by more than 90 degrees continuously. The axis that triggers the deviceTurned() method is stored in the turnAxis variable. The deviceTurned() method can be locked to trigger on any axis: X, Y or Z by comparing the turnAxis variable to 'X', 'Y' or 'Z'.", "prefix": "deviceTurned" }, "directionalLight": { "body": [ "directionalLight(${1:v1}, ${2:[v2]}, ${3:[v3]}, ${4:[a]}, ${5:x}, ${6:[y]}, ${7:[z]})" ], "description": "Creates a directional light with a color and a direction", "prefix": "directionalLight" }, "displayDensity": { "body": [ "displayDensity()" ], "description": "Returns the pixel density of the current display the sketch is running on.", "prefix": "displayDensity" }, "displayHeight": { "body": [ "displayHeight" ], "description": "System variable that stores the height of the entire screen display. This is used to run a full-screen program on any display size.", "prefix": "displayHeight" }, "displayWidth": { "body": [ "displayWidth" ], "description": "System variable that stores the width of the entire screen display. This is used to run a full-screen program on any display size.", "prefix": "displayWidth" }, "dist": { "body": [ "dist(${1:x1}, ${2:y1}, ${3:[z1]}, ${4:x2}, ${5:y2}, ${6:[z2]})" ], "description": "Calculates the distance between two points.", "prefix": "dist" }, "draw": { "body": [ "draw()" ], "description": "Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called. Note if noLoop() is called in setup(), draw() will still be executed once before stopping. draw() is called automatically and should never be called explicitly. It should always be controlled with noLoop(), redraw() and loop(). After noLoop() stops the code in draw() from executing, redraw() causes the code inside draw() to execute once, and loop() will cause the code inside draw() to resume executing continuously. The number of times draw() executes in each second may be controlled with the frameRate() function. There can only be one draw() function for each sketch, and draw() must exist if you want the code to run continuously, or to process events such as mousePressed(). Sometimes, you might have an empty call to draw() in your program, as shown in the above example. It is important to note that the drawing coordinate system will be reset at the beginning of each draw() call. If any transformations are performed within draw() (ex: scale, rotate, translate, their effects will be undone at the beginning of draw(), so transformations will not accumulate over time. On the other hand, styling applied (ex: fill, stroke, etc) will remain in effect.", "prefix": "draw" }, "ellipse": { "body": [ "ellipse(${1:x}, ${2:y}, ${3:w}, ${4:[h]})" ], "description": "Draws an ellipse (oval) to the screen. An ellipse with equal width and height is a circle. By default, the first two parameters set the location, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken. The origin may be changed with the ellipseMode() function.", "prefix": "ellipse" }, "ellipseMode": { "body": [ "ellipseMode(${1:mode})" ], "description": "Modifies the location from which ellipses are drawn by changing the way in which parameters given to ellipse() are interpreted. The default mode is ellipseMode(CENTER), which interprets the first two parameters of ellipse() as the shape's center point, while the third and fourth parameters are its width and height. ellipseMode(RADIUS) also uses the first two parameters of ellipse() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height. ellipseMode(CORNER) interprets the first two parameters of ellipse() as the upper-left corner of the shape, while the third and fourth parameters are its width and height. ellipseMode(CORNERS) interprets the first two parameters of ellipse() as the location of one corner of the ellipse's bounding box, and the third and fourth parameters as the location of the opposite corner. The parameter must be written in ALL CAPS because Javascript is a case-sensitive language.", "prefix": "ellipseMode" }, "ellipsoid": { "body": [ "ellipsoid(${1:radiusx}, ${2:radiusy}, ${3:radiusz}, ${4:[detailX]}, ${5:[detailY]})" ], "description": "Draw an ellipsoid with given radius", "prefix": "ellipsoid" }, "endContour": { "body": [ "endContour()" ], "description": "Use the beginContour() and endContour() functions to create negative shapes within shapes such as the center of the letter 'O'. beginContour() begins recording vertices for the shape and endContour() stops recording. The vertices that define a negative shape must \"wind\" in the opposite direction from the exterior shape. First draw vertices for the exterior clockwise order, then for internal shapes, draw vertices shape in counter-clockwise. These functions can only be used within a beginShape()/endShape() pair and transformations such as translate(), rotate(), and scale() do not work within a beginContour()/endContour() pair. It is also not possible to use other shapes, such as ellipse() or rect() within.", "prefix": "endContour" }, "endShape": { "body": [ "endShape(${1:mode})" ], "description": "The endShape() function is the companion to beginShape() and may only be called after beginShape(). When endshape() is called, all of image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE as the value for the MODE parameter to close the shape (to connect the beginning and the end).", "prefix": "endShape" }, "exp": { "body": [ "exp(${1:n})" ], "description": "Returns Euler's number e (2.71828...) raised to the power of the n parameter. Maps to Math.exp().", "prefix": "exp" }, "fill": { "body": [ "fill(${1:v1}, ${2:[v2]}, ${3:[v3]}, ${4:[a]})" ], "description": "Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all subsequent shapes will be filled with orange. This color is either specified in terms of the RGB or HSB color depending on the current colorMode(). (The default color space is RGB, with each value in the range from 0 to 255). If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. A p5 Color object can also be provided to set the fill color.", "prefix": "fill" }, "filter": { "body": [ "filter(${1:filterType}, ${2:filterParam})" ], "description": "Applies a filter to the canvas. The presets options are: THRESHOLD Converts the image to black and white pixels depending if they are above or below the threshold defined by the level parameter. The parameter must be between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used. GRAY Converts any colors in the image to grayscale equivalents. No parameter is used. OPAQUE Sets the alpha channel to entirely opaque. No parameter is used. INVERT Sets each pixel to its inverse value. No parameter is used. POSTERIZE Limits each channel of the image to the number of colors specified as the parameter. The parameter can be set to values between 2 and 255, but results are most noticeable in the lower ranges. BLUR Executes a Guassian blur with the level parameter specifying the extent of the blurring. If no parameter is used, the blur is equivalent to Guassian blur of radius 1. Larger values increase the blur. ERODE Reduces the light areas. No parameter is used. DILATE Increases the light areas. No parameter is used.", "prefix": "filter" }, "float": { "body": [ "float(${1:str})" ], "description": "Converts a string to its floating point representation. The contents of a string must resemble a number, or NaN (not a number) will be returned. For example, float(\"1234.56\") evaluates to 1234.56, but float(\"giraffe\") will return NaN. When an array of values is passed in, then an array of floats of the same length is returned.", "prefix": "float" }, "floor": { "body": [ "floor(${1:n})" ], "description": "Calculates the closest int value that is less than or equal to the value of the parameter. Maps to Math.floor().", "prefix": "floor" }, "focused": { "body": [ "focused" ], "description": "Confirms if the window a p5.js program is in is \"focused,\" meaning that the sketch will accept mouse or keyboard input. This variable is \"true\" if the window is focused and \"false\" if not.", "prefix": "focused" }, "frameCount": { "body": [ "frameCount" ], "description": "The system variable frameCount contains the number of frames that have been displayed since the program started. Inside setup() the value is 0, after the first iteration of draw it is 1, etc.", "prefix": "frameCount" }, "frameRate": { "body": [ "frameRate(${1:[fps]})" ], "description": "Specifies the number of frames to be displayed every second. For example, the function call frameRate(30) will attempt to refresh 30 times a second. If the processor is not fast enough to maintain the specified rate, the frame rate will not be achieved. Setting the frame rate within setup() is recommended. The default rate is 60 frames per second. This is the same as setFrameRate(val). Calling frameRate() with no arguments returns the current framerate. This is the same as getFrameRate(). Calling frameRate() with arguments that are not of the type numbers or are non positive also returns current framerate.", "prefix": "frameRate" }, "fullscreen": { "body": [ "fullscreen(${1:[val]})" ], "description": "If argument is given, sets the sketch to fullscreen or not based on the value of the argument. If no argument is given, returns the current fullscreen state. Note that due to browser restrictions this can only be called on user input, for example, on mouse press like the example below.", "prefix": "fullscreen" }, "get": { "body": [ "get(${1:[x]}, ${2:[y]}, ${3:[w]}, ${4:[h]})" ], "description": "Returns an array of [R,G,B,A] values for any pixel or grabs a section of an image. If no parameters are specified, the entire image is returned. Use the x and y parameters to get the value of one pixel. Get a section of the display window by specifying additional w and h parameters. When getting an image, the x and y parameters define the coordinates for the upper-left corner of the image, regardless of the current imageMode(). If the pixel requested is outside of the image window, [0,0,0,255] is returned. To get the numbers scaled according to the current color ranges and taking into account colorMode, use getColor instead of get. Getting the color of a single pixel with get(x, y) is easy, but not as fast as grabbing the data directly from pixels[]. The equivalent statement to get(x, y) using pixels[] with pixel density d is var off = (y width + x) d * 4; [pixels[off], pixels[off+1], pixels[off+2], pixels[off+3]] See the reference for pixels[] for more information.", "prefix": "get" }, "getURL": { "body": [ "getURL()" ], "description": "Gets the current URL.", "prefix": "getURL" }, "getURLParams": { "body": [ "getURLParams()" ], "description": "Gets the current URL params as an Object.", "prefix": "getURLParams" }, "getURLPath": { "body": [ "getURLPath()" ], "description": "Gets the current URL path as an array.", "prefix": "getURLPath" }, "green": { "body": [ "green(${1:color})" ], "description": "Extracts the green value from a color or pixel array.", "prefix": "green" }, "height": { "body": [ "height" ], "description": "System variable that stores the height of the drawing canvas. This value is set by the second parameter of the createCanvas() function. For example, the function call createCanvas(320, 240) sets the height variable to the value 240. The value of height defaults to 100 if createCanvas() is not used in a program.", "prefix": "height" }, "hex": { "body": [ "hex(${1:n})" ], "description": "Converts a number to a string in its equivalent hexadecimal notation. If a second parameter is passed, it is used to set the number of characters to generate in the hexadecimal notation. When an array is passed in, an array of strings in hexadecimal notation of the same length is returned.", "prefix": "hex" }, "hour": { "body": [ "hour()" ], "description": "p5.js communicates with the clock on your computer. The hour() function returns the current hour as a value from 0 - 23.", "prefix": "hour" }, "httpDo": { "body": [ "httpDo(${1:path}, ${2:[method]}, ${3:[data]}, ${4:[datatype]}, ${5:[callback]}, ${6:[errorCallback]})" ], "description": "Method for executing an HTTP request. If data type is not specified, p5 will try to guess based on the URL, defaulting to text. You may also pass a single object specifying all parameters for the request following the examples inside the reqwest() calls here: https://github.com/ded/reqwest#api", "prefix": "httpDo" }, "httpGet": { "body": [ "httpGet(${1:path}, ${2:[data]}, ${3:[datatype]}, ${4:[callback]}, ${5:[errorCallback]})" ], "description": "Method for executing an HTTP GET request. If data type is not specified, p5 will try to guess based on the URL, defaulting to text.", "prefix": "httpGet" }, "httpPost": { "body": [ "httpPost(${1:path}, ${2:[data]}, ${3:[datatype]}, ${4:[callback]}, ${5:[errorCallback]})" ], "description": "Method for executing an HTTP POST request. If data type is not specified, p5 will try to guess based on the URL, defaulting to text.", "prefix": "httpPost" }, "hue": { "body": [ "hue(${1:color})" ], "description": "Extracts the hue value from a color or pixel array. Hue exists in both HSB and HSL. This function will return the HSB-normalized hue when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL-normalized hue otherwise. (The values will only be different if the maximum hue setting for each system is different.)", "prefix": "hue" }, "image": { "body": [ "image(${1:img}, ${2:x}, ${3:y}, ${4:width}, ${5:height})" ], "description": "Draw an image to the main canvas of the p5js sketch", "prefix": "image" }, "imageMode": { "body": [ "imageMode(${1:mode})" ], "description": "Set image mode. Modifies the location from which images are drawn by changing the way in which parameters given to image() are interpreted. The default mode is imageMode(CORNER), which interprets the second and third parameters of image() as the upper-left corner of the image. If two additional parameters are specified, they are used to set the image's width and height. imageMode(CORNERS) interprets the second and third parameters of image() as the location of one corner, and the fourth and fifth parameters as the opposite corner. imageMode(CENTER) interprets the second and third parameters of image() as the image's center point. If two additional parameters are specified, they are used to set the image's width and height.", "prefix": "imageMode" }, "int": { "body": [ "int(${1:n})" ], "description": "Converts a boolean, string, or float to its integer representation. When an array of values is passed in, then an int array of the same length is returned.", "prefix": "int" }, "join": { "body": [ "join(${1:list}, ${2:separator})" ], "description": "Combines an array of Strings into one String, each separated by the character(s) used for the separator parameter. To join arrays of ints or floats, it's necessary to first convert them to Strings using nf() or nfs().", "prefix": "join" }, "key": { "body": [ "key" ], "description": "The system variable key always contains the value of the most recent key on the keyboard that was typed. To get the proper capitalization, it is best to use it within keyTyped(). For non-ASCII keys, use the keyCode variable.", "prefix": "key" }, "keyCode": { "body": [ "keyCode" ], "description": "The variable keyCode is used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. You can also check for custom keys by looking up the keyCode of any key on a site like this: keycode.info.", "prefix": "keyCode" }, "keyIsDown": { "body": [ "keyIsDown(${1:code})" ], "description": "The keyIsDown() function checks if the key is currently down, i.e. pressed. It can be used if you have an object that moves, and you want several keys to be able to affect its behaviour simultaneously, such as moving a sprite diagonally. You can put in any number representing the keyCode of the key, or use any of the variable keyCode names listed here.", "prefix": "keyIsDown" }, "keyIsPressed": { "body": [ "keyIsPressed" ], "description": "The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed.", "prefix": "keyIsPressed" }, "keyPressed": { "body": [ "keyPressed()" ], "description": "The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable. For non-ASCII keys, use the keyCode variable. You can check if the keyCode equals BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. For ASCII keys that was pressed is stored in the key variable. However, it does not distinguish between uppercase and lowercase. For this reason, it is recommended to use keyTyped() to read the key variable, in which the case of the variable will be distinguished. Because of how operating systems handle key repeats, holding down a key may cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add \"return false\" to the end of the method.", "prefix": "keyPressed" }, "keyReleased": { "body": [ "keyReleased()" ], "description": "The keyReleased() function is called once every time a key is released. See key and keyCode for more information. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add \"return false\" to the end of the method.", "prefix": "keyReleased" }, "keyTyped": { "body": [ "keyTyped()" ], "description": "The keyTyped() function is called once every time a key is pressed, but action keys such as Ctrl, Shift, and Alt are ignored. The most recent key pressed will be stored in the key variable. Because of how operating systems handle key repeats, holding down a key will cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured. Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add \"return false\" to the end of the method.", "prefix": "keyTyped" }, "lerp": { "body": [ "lerp(${1:start}, ${2:stop}, ${3:amt})" ], "description": "Calculates a number between two numbers at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, etc. The lerp function is convenient for creating motion along a straight path and for drawing dotted lines.", "prefix": "lerp" }, "lerpColor": { "body": [ "lerpColor(${1:c1}, ${2:c2}, ${3:amt})" ], "description": "Blends two colors to find a third color somewhere between them. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first color, 0.1 is very near the first color, 0.5 is halfway in between, etc. An amount below 0 will be treated as 0. Likewise, amounts above 1 will be capped at 1. This is different from the behavior of lerp(), but necessary because otherwise numbers outside the range will produce strange and unexpected colors. The way that colours are interpolated depends on the current color mode.", "prefix": "lerpColor" }, "lightness": { "body": [ "lightness(${1:color})" ], "description": "Extracts the HSL lightness value from a color or pixel array.", "prefix": "lightness" }, "line": { "body": [ "line(${1:x1}, ${2:y1}, ${3:x2}, ${4:y2})" ], "description": "Draws a line (a direct path between two points) to the screen. The version of line() with four parameters draws the line in 2D. To color a line, use the stroke() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. 2D lines are drawn with a width of one pixel by default, but this can be changed with the strokeWeight() function.", "prefix": "line" }, "loadFont": { "body": [ "loadFont(${1:path}, ${2:[callback]})" ], "description": "Loads an opentype font file (.otf, .ttf) from a file or a URL, and returns a PFont Object. This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. The path to the font should be relative to the HTML file that links in your sketch. Loading an from a URL or other remote location may be blocked due to your browser's built-in security.", "prefix": "loadFont" }, "loadImage": { "body": [ "loadImage(${1:path}, ${2:[successCallback]}, ${3:[failureCallback]})" ], "description": "Loads an image from a path and creates a p5.Image from it. The image may not be immediately available for rendering If you want to ensure that the image is ready before doing anything with it, place the loadImage() call in preload(). You may also supply a callback function to handle the image when it's ready. The path to the image should be relative to the HTML file that links in your sketch. Loading an from a URL or other remote location may be blocked due to your browser's built-in security.", "prefix": "loadImage" }, "loadJSON": { "body": [ "loadJSON(${1:path}, ${2:[callback]}, ${3:[errorCallback]}, ${4:[datatype]})" ], "description": "Loads a JSON file from a file or a URL, and returns an Object or Array. This method is asynchronous, meaning it may not finish before the next line in your sketch is executed.", "prefix": "loadJSON" }, "loadModel": { "body": [ "loadModel(${1:path}, ${2:[normalize]}, ${3:[successCallback]}, ${4:[failureCallback]})" ], "description": "Load a 3d model from an OBJ file. One of the limitations of the OBJ format is that it doesn't have a built-in sense of scale. This means that models exported from different programs might be very different sizes. If your model isn't displaying, try calling loadModel() with the normalized parameter set to true. This will resize the model to a scale appropriate for p5. You can also make additional changes to the final size of your model with the scale() function.", "prefix": "loadModel" }, "loadPixels": { "body": [ "loadPixels()" ], "description": "Loads the pixel data for the display window into the pixels[] array. This function must always be called before reading from or writing to pixels[].", "prefix": "loadPixels" }, "loadStrings": { "body": [ "loadStrings(${1:filename}, ${2:[callback]}, ${3:[errorCallback]})" ], "description": "Reads the contents of a file and creates a String array of its individual lines. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder. Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network. This method is asynchronous, meaning it may not finish before the next line in your sketch is executed.", "prefix": "loadStrings" }, "loadTable": { "body": [ "loadTable(${1:filename}, ${2:[options]}, ${3:[callback]})" ], "description": "Reads the contents of a file or URL and creates a p5.Table object with its values. If a file is specified, it must be located in the sketch's \"data\" folder. The filename parameter can also be a URL to a file found online. By default, the file is assumed to be comma-separated (in CSV format). Table only looks for a header row if the 'header' option is included. Possible options include: csv - parse the table as comma-separated values tsv - parse the table as tab-separated values header - this table has a header (title) row When passing in multiple options, pass them in as separate parameters, seperated by commas. For example: loadTable(\"my_csv_file.csv\", \"csv\", \"header\") All files loaded and saved use UTF-8 encoding. This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. Calling loadTable() inside preload() guarantees to complete the operation before setup() and draw() are called. Outside of preload(), you may supply a callback function to handle the object:", "prefix": "loadTable" }, "loadXML": { "body": [ "loadXML(${1:filename}, ${2:[callback]}, ${3:[errorCallback]})" ], "description": "Reads the contents of a file and creates an XML object with its values. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder. Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network. This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. Calling loadXML() inside preload() guarantees to complete the operation before setup() and draw() are called. Outside of preload(), you may supply a callback function to handle the object:", "prefix": "loadXML" }, "log": { "body": [ "log(${1:n})" ], "description": "Calculates the natural logarithm (the base-e logarithm) of a number. This function expects the n parameter to be a value greater than 0.0. Maps to Math.log().", "prefix": "log" }, "loop": { "body": [ "loop()" ], "description": "By default, p5.js loops through draw() continuously, executing the code within it. However, the draw() loop may be stopped by calling noLoop(). In that case, the draw() loop can be resumed with loop().", "prefix": "loop" }, "mag": { "body": [ "mag(${1:a}, ${2:b})" ], "description": "Calculates the magnitude (or length) of a vector. A vector is a direction in space commonly used in computer graphics and linear algebra. Because it has no \"start\" position, the magnitude of a vector can be thought of as the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is a shortcut for writing dist(0, 0, x, y).", "prefix": "mag" }, "map": { "body": [ "map(${1:value}, ${2:start1}, ${3:stop1}, ${4:start2}, ${5:stop2})" ], "description": "Re-maps a number from one range to another. In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width).", "prefix": "map" }, "match": { "body": [ "match(${1:str}, ${2:regexp})" ], "description": "This function is used to apply a regular expression to a piece of text, and return matching groups (elements found inside parentheses) as a String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, an array of length 1 (with the matched text as the first element of the array) will be returned. To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, an array is returned. If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Element [0] of a regular expression match returns the entire matching string, and the match groups start at element [1] (the first group is [1], the second [2], and so on).", "prefix": "match" }, "matchAll": { "body": [ "matchAll(${1:str}, ${2:regexp})" ], "description": "This function is used to apply a regular expression to a piece of text, and return a list of matching groups (elements found inside parentheses) as a two-dimensional String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, a two dimensional array is still returned, but the second dimension is only of length one. To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, a 2D array is returned. If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Assuming a loop with counter variable i, element [i][0] of a regular expression match returns the entire matching string, and the match groups start at element [i][1] (the first group is [i][1], the second [i][2], and so on).", "prefix": "matchAll" }, "max": { "body": [ "max(${1:n0})" ], "description": "Determines the largest value in a sequence of numbers, and then returns that value. max() accepts any number of Number parameters, or an Array of any length.", "prefix": "max" }, "millis": { "body": [ "millis()" ], "description": "Returns the number of milliseconds (thousandths of a second) since starting the program. This information is often used for timing events and animation sequences.", "prefix": "millis" }, "min": { "body": [ "min(${1:n0})" ], "description": "Determines the smallest value in a sequence of numbers, and then returns that value. min() accepts any number of Number parameters, or an Array of any length.", "prefix": "min" }, "minute": { "body": [ "minute()" ], "description": "p5.js communicates with the clock on your computer. The minute() function returns the current minute as a value from 0 - 59.", "prefix": "minute" }, "model": { "body": [ "model(${1:model})" ], "description": "Render a 3d model to the screen.", "prefix": "model" }, "month": { "body": [ "month()" ], "description": "p5.js communicates with the clock on your computer. The month() function returns the current month as a value from 1 - 12.", "prefix": "month" }, "mouseButton": { "body": [ "mouseButton" ], "description": "Processing automatically tracks if the mouse button is pressed and which button is pressed. The value of the system variable mouseButton is either LEFT, RIGHT, or CENTER depending on which button was pressed last. Warning: different browsers may track mouseButton differently.", "prefix": "mouseButton" }, "mouseClicked": { "body": [ "mouseClicked()" ], "description": "The mouseClicked() function is called once after a mouse button has been pressed and then released. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method.", "prefix": "mouseClicked" }, "mouseDragged": { "body": [ "mouseDragged()" ], "description": "The mouseDragged() function is called once every time the mouse moves and a mouse button is pressed. If no mouseDragged() function is defined, the touchMoved() function will be called instead if it is defined. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method.", "prefix": "mouseDragged" }, "mouseIsPressed": { "body": [ "mouseIsPressed" ], "description": "The boolean system variable mouseIsPressed is true if the mouse is pressed and false if not.", "prefix": "mouseIsPressed" }, "mouseMoved": { "body": [ "mouseMoved()" ], "description": "The mouseMoved() function is called every time the mouse moves and a mouse button is not pressed. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method.", "prefix": "mouseMoved" }, "mousePressed": { "body": [ "mousePressed()" ], "description": "The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been pressed. If no mousePressed() function is defined, the touchStarted() function will be called instead if it is defined. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method.", "prefix": "mousePressed" }, "mouseReleased": { "body": [ "mouseReleased()" ], "description": "The mouseReleased() function is called every time a mouse button is released. If no mouseReleased() function is defined, the touchEnded() function will be called instead if it is defined. Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method.", "prefix": "mouseReleased" }, "mouseWheel": { "body": [ "mouseWheel()" ], "description": "The function mouseWheel() is executed every time a vertical mouse wheel event is detected either triggered by an actual mouse wheel or by a touchpad. The event.delta property returns the amount the mouse wheel have scrolled. The values can be positive or negative depending on the scroll direction (on OS X with \"natural\" scrolling enabled, the signs are inverted). Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add \"return false\" to the end of the method. Due to the current support of the \"wheel\" event on Safari, the function may only work as expected if \"return false\" is included while using Safari.", "prefix": "mouseWheel" }, "mouseX": { "body": [ "mouseX" ], "description": "The system variable mouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseX will hold the x value of the most recent touch point.", "prefix": "mouseX" }, "mouseY": { "body": [ "mouseY" ], "description": "The system variable mouseY always contains the current vertical position of the mouse, relative to (0, 0) of the canvas. If touch is used instead of mouse input, mouseY will hold the y value of the most recent touch point.", "prefix": "mouseY" }, "nf": { "body": [ "nf(${1:num}, ${2:[left]}, ${3:[right]})" ], "description": "Utility function for formatting numbers into strings. There are two versions: one for formatting floats, and one for formatting ints. The values for the digits, left, and right parameters should always be positive integers.", "prefix": "nf" }, "nfc": { "body": [ "nfc(${1:num}, ${2:[right]})" ], "description": "Utility function for formatting numbers into strings and placing appropriate commas to mark units of 1000. There are two versions: one for formatting ints, and one for formatting an array of ints. The value for the right parameter should always be a positive integer.", "prefix": "nfc" }, "nfp": { "body": [ "nfp(${1:num}, ${2:[left]}, ${3:[right]})" ], "description": "Utility function for formatting numbers into strings. Similar to nf() but puts a \"+\" in front of positive numbers and a \"-\" in front of negative numbers. There are two versions: one for formatting floats, and one for formatting ints. The values for left, and right parameters should always be positive integers.", "prefix": "nfp" }, "nfs": { "body": [ "nfs(${1:num}, ${2:[left]}, ${3:[right]})" ], "description": "Utility function for formatting numbers into strings. Similar to nf() but puts a \" \" (space) in front of positive numbers and a \"-\" in front of negative numbers. There are two versions: one for formatting floats, and one for formatting ints. The values for the digits, left, and right parameters should always be positive integers.", "prefix": "nfs" }, "noCanvas": { "body": [ "noCanvas()" ], "description": "Removes the default canvas for a p5 sketch that doesn't require a canvas", "prefix": "noCanvas" }, "noCursor": { "body": [ "noCursor()" ], "description": "Hides the cursor from view.", "prefix": "noCursor" }, "noFill": { "body": [ "noFill()" ], "description": "Disables filling geometry. If both noStroke() and noFill() are called, nothing will be drawn to the screen.", "prefix": "noFill" }, "noLoop": { "body": [ "noLoop()" ], "description": "Stops p5.js from continuously executing the code within draw(). If loop() is called, the code in draw() begins to run continuously again. If using noLoop() in setup(), it should be the last line inside the block. When noLoop() is used, it's not possible to manipulate or access the screen inside event handling functions such as mousePressed() or keyPressed(). Instead, use those functions to call redraw() or loop(), which will run draw(), which can update the screen properly. This means that when noLoop() has been called, no drawing can happen, and functions like saveFrame() or loadPixels() may not be used. Note that if the sketch is resized, redraw() will be called to update the sketch, even after noLoop() has been specified. Otherwise, the sketch would enter an odd state until loop() was called.", "prefix": "noLoop" }, "noSmooth": { "body": [ "noSmooth()" ], "description": "Draws all geometry with jagged (aliased) edges. Note that smooth() is active by default, so it is necessary to call noSmooth() to disable smoothing of geometry, images, and fonts.", "prefix": "noSmooth" }, "noStroke": { "body": [ "noStroke()" ], "description": "Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen.", "prefix": "noStroke" }, "noTint": { "body": [ "noTint()" ], "description": "Removes the current fill value for displaying images and reverts to displaying images with their original hues.", "prefix": "noTint" }, "noise": { "body": [ "noise(${1:x}, ${2:y}, ${3:z})" ], "description": "Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more natural ordered, harmonic succession of numbers compared to the standard random() function. It was invented by Ken Perlin in the 1980s and been used since in graphical applications to produce procedural textures, natural motion, shapes, terrains etc. The main difference to the random() function is that Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value (fixed only for the lifespan of the program; see the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise, depending on the number of coordinates given. The resulting value will always be between 0.0 and 1.0. The noise value can be animated by moving through the noise space as demonstrated in the example above. The 2nd and 3rd dimension can also be interpreted as time.The actual noise is structured similar to an audio signal, in respect to the function's use of frequencies. Similar to the concept of harmonics in physics, perlin noise is computed over several octaves which are added together for the final result. Another way to adjust the character of the resulting sequence is the scale of the input coordinates. As the function works within an infinite space the value of the coordinates doesn't matter as such, only the distance between successive coordinates does (eg. when using noise() within a loop). As a general rule the smaller the difference between coordinates, the smoother the resulting noise sequence will be. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use.", "prefix": "noise" }, "noiseDetail": { "body": [ "noiseDetail(${1:lod}, ${2:falloff})" ], "description": "Adjusts the character and level of detail produced by the Perlin noise function. Similar to harmonics in physics, noise is computed over several octaves. Lower octaves contribute more to the output signal and as such define the overall intensity of the noise, whereas higher octaves create finer grained details in the noise sequence. By default, noise is computed over 4 octaves with each octave contributing exactly half than its predecessor, starting at 50% strength for the 1st octave. This falloff amount can be changed by adding an additional function parameter. Eg. a falloff factor of 0.75 means each octave will now have 75% impact (25% less) of the previous lower octave. Any value between 0.0 and 1.0 is valid, however note that values greater than 0.5 might result in greater than 1.0 values returned by noise(). By changing these parameters, the signal created by the noise() function can be adapted to fit very specific needs and characteristics.", "prefix": "noiseDetail" }, "noiseSeed": { "body": [ "noiseSeed(${1:seed})" ], "description": "Sets the seed value for noise(). By default, noise() produces different results each time the program is run. Set the value parameter to a constant to return the same pseudo-random numbers each time the software is run.", "prefix": "noiseSeed" }, "norm": { "body": [ "norm(${1:value}, ${2:start}, ${3:stop})" ], "description": "Normalizes a number from another range into a value between 0 and 1. Identical to map(value, low, high, 0, 1). Numbers outside of the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. (See the second example above.)", "prefix": "norm" }, "normalMaterial": { "body": [ "normalMaterial()" ], "description": "Normal material for geometry. You can view all possible materials in this example.", "prefix": "normalMaterial" }, "ortho": { "body": [ "ortho(${1:left}, ${2:right}, ${3:bottom}, ${4:top}, ${5:near}, ${6:far})" ], "description": "Setup ortho camera", "prefix": "ortho" }, "pAccelerationX": { "body": [ "pAccelerationX" ], "description": "The system variable pAccelerationX always contains the acceleration of the device along the x axis in the frame previous to the current frame. Value is represented as meters per second squared.", "prefix": "pAccelerationX" }, "pAccelerationY": { "body": [ "pAccelerationY" ], "description": "The system variable pAccelerationY always contains the acceleration of the device along the y axis in the frame previous to the current frame. Value is represented as meters per second squared.", "prefix": "pAccelerationY" }, "pAccelerationZ": { "body": [ "pAccelerationZ" ], "description": "The system variable pAccelerationZ always contains the acceleration of the device along the z axis in the frame previous to the current frame. Value is represented as meters per second squared.", "prefix": "pAccelerationZ" }, "pRotationX": { "body": [ "pRotationX" ], "description": "The system variable pRotationX always contains the rotation of the device along the x axis in the frame previous to the current frame. Value is represented as 0 to +/-180 degrees. pRotationX can also be used with rotationX to determine the rotate direction of the device along the X-axis.", "prefix": "pRotationX" }, "pRotationY": { "body": [ "pRotationY" ], "description": "The system variable pRotationY always contains the rotation of the device along the y axis in the frame previous to the current frame. Value is represented as 0 to +/-90 degrees. pRotationY can also be used with rotationY to determine the rotate direction of the device along the Y-axis.", "prefix": "pRotationY" }, "pRotationZ": { "body": [ "pRotationZ" ], "description": "The system variable pRotationZ always contains the rotation of the device along the z axis in the frame previous to the current frame. Value is represented as 0 to 359 degrees. pRotationZ can also be used with rotationZ to determine the rotate direction of the device along the Z-axis.", "prefix": "pRotationZ" }, "perspective": { "body": [ "perspective(${1:fovy}, ${2:aspect}, ${3:near}, ${4:far})" ], "description": "Sets perspective camera", "prefix": "perspective" }, "pixelDensity": { "body": [ "pixelDensity(${1:[val]})" ], "description": "Sets the pixel scaling for high pixel density displays. By default pixel density is set to match display density, call pixelDensity(1) to turn this off. Calling pixelDensity() with no arguments returns the current pixel density of the sketch.", "prefix": "pixelDensity" }, "pixels[]": { "body": [ "pixels[]" ], "description": "\u003ca href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /Global_Objects/Uint8ClampedArray' target='_blank'\u003eUint8ClampedArray containing the values for all the pixels in the display window. These values are numbers. This array is the size (include an appropriate factor for pixelDensity) of the display window x4, representing the R, G, B, A values in order for each pixel, moving from left to right across each row, then down each column. Retina and other high denisty displays will have more pixels[] (by a factor of pixelDensity^2). For example, if the image is 100x100 pixels, there will be 40,000. On a retina display, there will be 160,000. The first four values (indices 0-3) in the array will be the R, G, B, A values of the pixel at (0, 0). The second four values (indices 4-7) will contain the R, G, B, A values of the pixel at (1, 0). More generally, to set values for a pixel at (x, y): var d = pixelDensity; for (var i = 0; i \u003c d; i++) { for (var j = 0; j \u003c d; j++) { // loop over idx = 4 * ((y * d + j) * width * d + (x * d + i)); pixels[idx] = r; pixels[idx+1] = g; pixels[idx+2] = b; pixels[idx+3] = a; } } While the above method is complex, it is flexible enough to work with any pixelDensity. Note that set() will automatically take care of setting all the appropriate values in pixels[] for a given (x, y) at any pixelDensity, but the performance may not be as fast when lots of modifications are made to the pixel array. Before accessing this array, the data must loaded with the loadPixels() function. After the array data has been modified, the updatePixels() function must be run to update the changes. Note that this is not a standard javascript array. This means that standard javascript functions such as slice() or arrayCopy() do not work.", "prefix": "pixels[]" }, "plane": { "body": [ "plane(${1:width}, ${2:height}, ${3:[detailX]}, ${4:[detailY]})" ], "description": "Draw a plane with given a width and height", "prefix": "plane" }, "pmouseX": { "body": [ "pmouseX" ], "description": "The system variable pmouseX always contains the horizontal position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas.", "prefix": "pmouseX" }, "pmouseY": { "body": [ "pmouseY" ], "description": "The system variable pmouseY always contains the vertical position of the mouse or finger in the frame previous to the current frame, relative to (0, 0) of the canvas.", "prefix": "pmouseY" }, "point": { "body": [ "point(${1:x}, ${2:y})" ], "description": "Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second value is the vertical value for the point. The color of the point is determined by the current stroke.", "prefix": "point" }, "pointLight": { "body": [ "pointLight(${1:v1}, ${2:[v2]}, ${3:[v3]}, ${4:[a]}, ${5:x}, ${6:[y]}, ${7:[z]})" ], "description": "Creates a point light with a color and a light position", "prefix": "pointLight" }, "pop": { "body": [ "pop()" ], "description": "The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.) push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textMode(), textSize(), textLeading().", "prefix": "pop" }, "pow": { "body": [ "pow(${1:n}, ${2:e})" ], "description": "Facilitates exponential expressions. The pow() function is an efficient way of multiplying numbers by themselves (or their reciprocals) in large quantities. For example, pow(3, 5) is equivalent to the expression 33333 and pow(3, -5) is equivalent to 1 / 33333. Maps to Math.pow().", "prefix": "pow" }, "preload": { "body": [ "preload()" ], "description": "Called directly before setup(), the preload() function is used to handle asynchronous loading of external files. If a preload function is defined, setup() will wait until any load calls within have finished. Nothing besides load calls should be inside preload (loadImage, loadJSON, loadFont, loadStrings, etc). By default the text \"loading...\" will be displayed. To make your own loading page, include an HTML element with id \"p5_loading\" in your page. More information here.", "prefix": "preload" }, "print": { "body": [ "print(${1:contents})" ], "description": "The print() function writes to the console area of your browser. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes (\"\") and joined with the addition operator (+). While print() is similar to console.log(), it does not directly map to it in order to simulate easier to understand behavior than console.log(). Due to this, it is slower. For fastest results, use console.log().", "prefix": "print" }, "push": { "body": [ "push()" ], "description": "The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.) push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textMode(), textSize(), textLeading().", "prefix": "push" }, "pwinMouseX": { "body": [ "pwinMouseX" ], "description": "The system variable pwinMouseX always contains the horizontal position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window.", "prefix": "pwinMouseX" }, "pwinMouseY": { "body": [ "pwinMouseY" ], "description": "The system variable pwinMouseY always contains the vertical position of the mouse in the frame previous to the current frame, relative to (0, 0) of the window.", "prefix": "pwinMouseY" }, "quad": { "body": [ "quad(${1:x1}, ${2:y1}, ${3:x2}, ${4:y2}, ${5:x3}, ${6:y3}, ${7:x4}, ${8:y4})" ], "description": "Draw a quad. A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape.", "prefix": "quad" }, "quadraticVertex": { "body": [ "quadraticVertex(${1:cx}, ${2:cy}, ${3:x3}, ${4:y3})" ], "description": "Specifies vertex coordinates for quadratic Bezier curves. Each call to quadraticVertex() defines the position of one control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. The first time quadraticVertex() is used within a beginShape() call, it must be prefaced with a call to vertex() to set the first anchor point. This function must be used between beginShape() and endShape() and only when there is no MODE parameter specified to beginShape().", "prefix": "quadraticVertex" }, "radians": { "body": [ "radians(${1:degrees})" ], "description": "Converts a degree measurement to its corresponding value in radians. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964.", "prefix": "radians" }, "random": { "body": [ "random(${1:[min]}, ${2:[max]})" ], "description": "Return a random floating-point number. Takes either 0, 1 or 2 arguments. If no argument is given, returns a random number from 0 up to (but not including) 1. If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number. If one argument is given and it is an array, returns a random element from that array. If two arguments are given, returns a random number from the first argument up to (but not including) the second argument.", "prefix": "random" }, "randomGaussian": { "body": [ "randomGaussian(${1:mean}, ${2:sd})" ], "description": "Returns a random number fitting a Gaussian, or normal, distribution. There is theoretically no minimum or maximum value that randomGaussian() might return. Rather, there is just a very low probability that values far from the mean will be returned; and a higher probability that numbers near the mean will be returned. Takes either 0, 1 or 2 arguments. If no args, returns a mean of 0 and standard deviation of 1. If one arg, that arg is the mean (standard deviation is 1). If two args, first is mean, second is standard deviation.", "prefix": "randomGaussian" }, "randomSeed": { "body": [ "randomSeed(${1:seed})" ], "description": "Sets the seed value for random(). By default, random() produces different results each time the program is run. Set the seed parameter to a constant to return the same pseudo-random numbers each time the software is run.", "prefix": "randomSeed" }, "rect": { "body": [ "rect(${1:x}, ${2:y}, ${3:w}, ${4:h}, ${5:[tl]}, ${6:[tr]}, ${7:[br]}, ${8:[bl]})" ], "description": "Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted, however, may be changed with the rectMode() function. The fifth, sixth, seventh and eighth parameters, if specified, determine corner radius for the top-right, top-left, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list.", "prefix": "rect" }, "rectMode": { "body": [ "rectMode(${1:mode})" ], "description": "Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are interpreted. The default mode is rectMode(CORNER), which interprets the first two parameters of rect() as the upper-left corner of the shape, while the third and fourth parameters are its width and height. rectMode(CORNERS) interprets the first two parameters of rect() as the location of one corner, and the third and fourth parameters as the location of the opposite corner. rectMode(CENTER) interprets the first two parameters of rect() as the shape's center point, while the third and fourth parameters are its width and height. rectMode(RADIUS) also uses the first two parameters of rect() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height. The parameter must be written in ALL CAPS because Javascript is a case-sensitive language.", "prefix": "rectMode" }, "red": { "body": [ "red(${1:obj})" ], "description": "Extracts the red value from a color or pixel array.", "prefix": "red" }, "redraw": { "body": [ "redraw(${1:[n]})" ], "description": "Executes the code within draw() one time. This functions allows the program to update the display window only when necessary, for example when an event registered by mousePressed() or keyPressed() occurs. In structuring a program, it only makes sense to call redraw() within events such as mousePressed(). This is because redraw() does not run draw() immediately (it only sets a flag that indicates an update is needed). The redraw() function does not work properly when called inside draw(). To enable/disable animations, use loop() and noLoop(). In addition you can set the number of redraws per method call. Just add an integer as single parameter for the number of redraws.", "prefix": "redraw" }, "remove": { "body": [ "remove()" ], "description": "Removes the entire p5 sketch. This will remove the canvas and any elements created by p5.js. It will also stop the draw loop and unbind any properties or methods from the window global scope. It will leave a variable p5 in case you wanted to create a new p5 sketch. If you like, you can set p5 = null to erase it.", "prefix": "remove" }, "resetMatrix": { "body": [ "resetMatrix()" ], "description": "Replaces the current matrix with the identity matrix.", "prefix": "resetMatrix" }, "resizeCanvas": { "body": [ "resizeCanvas()" ], "description": "Resizes the canvas to given width and height. The canvas will be cleared and draw will be called immediately, allowing the sketch to re-render itself in the resized canvas.", "prefix": "resizeCanvas" }, "reverse": { "body": [ "reverse(${1:list})" ], "description": "Reverses the order of an array, maps to Array.reverse()", "prefix": "reverse" }, "rotate": { "body": [ "rotate(${1:angle})" ], "description": "Rotates a shape the amount specified by the angle parameter. This function accounts for angleMode, so angles can be entered in either RADIANS or DEGREES. Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). All tranformations are reset when draw() begins again. Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop().", "prefix": "rotate" }, "rotateX": { "body": [ "rotateX(${1:rad})" ], "description": "Rotates around X axis.", "prefix": "rotateX" }, "rotateY": { "body": [ "rotateY(${1:rad})" ], "description": "Rotates around Y axis.", "prefix": "rotateY" }, "rotateZ": { "body": [ "rotateZ(${1:rad})" ], "description": "Rotates around Z axis. Webgl mode only.", "prefix": "rotateZ" }, "rotationX": { "body": [ "rotationX" ], "description": "The system variable rotationX always contains the rotation of the device along the x axis. Value is represented as 0 to +/-180 degrees. Note: The order the rotations are called is important, ie. if used together, it must be called in the order Z-X-Y or there might be unexpected behaviour.", "prefix": "rotationX" }, "rotationY": { "body": [ "rotationY" ], "description": "The system variable rotationY always contains the rotation of the device along the y axis. Value is represented as 0 to +/-90 degrees. Note: The order the rotations are called is important, ie. if used together, it must be called in the order Z-X-Y or there might be unexpected behaviour.", "prefix": "rotationY" }, "rotationZ": { "body": [ "rotationZ" ], "description": "The system variable rotationZ always contains the rotation of the device along the z axis. Value is represented as 0 to 359 degrees. Unlike rotationX and rotationY, this variable is available for devices with a built-in compass only. Note: The order the rotations are called is important, ie. if used together, it must be called in the order Z-X-Y or there might be unexpected behaviour.", "prefix": "rotationZ" }, "round": { "body": [ "round(${1:n})" ], "description": "Calculates the integer closest to the n parameter. For example, round(133.8) returns the value 134. Maps to Math.round().", "prefix": "round" }, "saturation": { "body": [ "saturation(${1:color})" ], "description": "Extracts the saturation value from a color or pixel array. Saturation is scaled differently in HSB and HSL. This function will return the HSB saturation when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL saturation otherwise.", "prefix": "saturation" }, "save": { "body": [ "save(${1:objectOrFilename}, ${2:filename}, ${3:options})" ], "description": "Save an image, text, json, csv, wav, or html. Prompts download to the client's computer. Note that it is not recommended to call save() within draw if it's looping, as the save() function will open a new save dialog every frame. The default behavior is to save the canvas as an image. You can optionally specify a filename. For example: save(); save('myCanvas.jpg'); // save a specific canvas with a filename Alternately, the first parameter can be a pointer to a canvas p5.Element, an Array of Strings, an Array of JSON, a JSON object, a p5.Table, a p5.Image, or a p5.SoundFile (requires p5.sound). The second parameter is a filename (including extension). The third parameter is for options specific to this type of object. This method will save a file that fits the given paramaters. For example: save('myCanvas.jpg'); // Saves canvas as an image var cnv = createCanvas(100, 100); save(cnv, 'myCanvas.jpg'); // Saves canvas as an image var gb = createGraphics(100, 100); save(gb, 'myGraphics.jpg'); // Saves p5.Renderer object as an image save(myTable, 'myTable.html'); // Saves table as html file save(myTable, 'myTable.csv',); // Comma Separated Values save(myTable, 'myTable.tsv'); // Tab Separated Values save(myJSON, 'my.json'); // Saves pretty JSON save(myJSON, 'my.json', true); // Optimizes JSON filesize save(img, 'my.png'); // Saves pImage as a png image save(arrayOfStrings, 'my.txt'); // Saves strings to a text file with line // breaks after each item in the array", "prefix": "save" }, "saveCanvas": { "body": [ "saveCanvas(${1:canvas}, ${2:filename}, ${3:extension})" ], "description": "Save the current canvas as an image. In Safari, this will open the image in the window and the user must provide their own filename on save-as. Other browsers will either save the file immediately, or prompt the user with a dialogue window.", "prefix": "saveCanvas" }, "saveFrames": { "body": [ "saveFrames(${1:filename}, ${2:extension}, ${3:duration}, ${4:framerate}, ${5:[callback]})" ], "description": "Capture a sequence of frames that can be used to create a movie. Accepts a callback. For example, you may wish to send the frames to a server where they can be stored or converted into a movie. If no callback is provided, the browser will pop up save dialogues in an attempt to download all of the images that have just been created. With the callback provided the image data isn't saved by default but instead passed as an argument to the callback function as an array of objects, with the size of array equal to the total number of frames.", "prefix": "saveFrames" }, "saveJSON": { "body": [ "saveJSON(${1:json}, ${2:filename}, ${3:[optimize]})" ], "description": "Writes the contents of an Array or a JSON object to a .json file. The file saving process and location of the saved file will vary between web browsers.", "prefix": "saveJSON" }, "saveStrings": { "body": [ "saveStrings(${1:list}, ${2:filename})" ], "description": "Writes an array of Strings to a text file, one line per String. The file saving process and location of the saved file will vary between web browsers.", "prefix": "saveStrings" }, "saveTable": { "body": [ "saveTable(${1:Table}, ${2:filename}, ${3:[options]})" ], "description": "Writes the contents of a Table object to a file. Defaults to a text file with comma-separated-values ('csv') but can also use tab separation ('tsv'), or generate an HTML table ('html'). The file saving process and location of the saved file will vary between web browsers.", "prefix": "saveTable" }, "scale": { "body": [ "scale(${1:s}, ${2:[y]}, ${3:[z]})" ], "description": "Increases or decreases the size of a shape by expanding and contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call scale(2.0) increases the dimension of a shape by 200%. Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0). If scale() is called within draw(), the transformation is reset when the loop begins again. Using this function with the z parameter is only available in WEBGL mode. This function can be further controlled with push() and pop().", "prefix": "scale" }, "second": { "body": [ "second()" ], "description": "p5.js communicates with the clock on your computer. The second() function returns the current second as a value from 0 - 59.", "prefix": "second" }, "set": { "body": [ "set(${1:x}, ${2:y}, ${3:c})" ], "description": "Changes the color of any pixel, or writes an image directly to the display window. The x and y parameters specify the pixel to change and the c parameter specifies the color value. This can be a p5.Color object, or [R, G, B, A] pixel array. It can also be a single grayscale value. When setting an image, the x and y parameters define the coordinates for the upper-left corner of the image, regardless of the current imageMode(). After using set(), you must call updatePixels() for your changes to appear. This should be called once all pixels have been set. Setting the color of a single pixel with set(x, y) is easy, but not as fast as putting the data directly into pixels[]. Setting the pixels[] values directly may be complicated when working with a retina display, but will perform better when lots of pixels need to be set directly on every loop. See the reference for pixels[] for more information.", "prefix": "set" }, "setMoveThreshold": { "body": [ "setMoveThreshold(${1:value})" ], "description": "The setMoveThreshold() function is used to set the movement threshold for the deviceMoved() function. The default threshold is set to 0.5.", "prefix": "setMoveThreshold" }, "setShakeThreshold": { "body": [ "setShakeThreshold(${1:value})" ], "description": "The setShakeThreshold() function is used to set the movement threshold for the deviceShaken() function. The default threshold is set to 30.", "prefix": "setShakeThreshold" }, "setup": { "body": [ "setup()" ], "description": "The setup() function is called once when the program starts. It's used to define initial environment properties such as screen size and background color and to load media such as images and fonts as the program starts. There can only be one setup() function for each program and it shouldn't be called again after its initial execution. Note: Variables declared within setup() are not accessible within other functions, including draw().", "prefix": "setup" }, "shearX": { "body": [ "shearX(${1:angle})" ], "description": "Shears a shape around the x-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI). If shearX() is called within the draw(), the transformation is reset when the loop begins again. Technically, shearX() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions.", "prefix": "shearX" }, "shearY": { "body": [ "shearY(${1:angle})" ], "description": "Shears a shape around the y-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If shearY() is called within the draw(), the transformation is reset when the loop begins again. Technically, shearY() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions.", "prefix": "shearY" }, "shorten": { "body": [ "shorten(${1:list})" ], "description": "Decreases an array by one element and returns the shortened array, maps to Array.pop().", "prefix": "shorten" }, "shuffle": { "body": [ "shuffle(${1:array}, ${2:[bool]})" ], "description": "Randomizes the order of the elements of an array. Implements \u003ca href=\"http://Bost.Ocks.org/mike/shuffle/\" target=_blank\u003e Fisher-Yates Shuffle Algorithm.", "prefix": "shuffle" }, "sin": { "body": [ "sin(${1:angle})" ], "description": "Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1.", "prefix": "sin" }, "smooth": { "body": [ "smooth()" ], "description": "Draws all geometry with smooth (anti-aliased) edges. smooth() will also improve image quality of resized images. Note that smooth() is active by default; noSmooth() can be used to disable smoothing of geometry, images, and fonts.", "prefix": "smooth" }, "sort": { "body": [ "sort(${1:list}, ${2:[count]})" ], "description": "Sorts an array of numbers from smallest to largest, or puts an array of words in alphabetical order. The original array is not modified; a re-ordered array is returned. The count parameter states the number of elements to sort. For example, if there are 12 elements in an array and count is set to 5, only the first 5 elements in the array will be sorted.", "prefix": "sort" }, "specularMaterial": { "body": [ "specularMaterial(${1:v1}, ${2:[v2]}, ${3:[v3]}, ${4:[a]})" ], "description": "Specular material for geometry with a given color. You can view all possible materials in this example.", "prefix": "specularMaterial" }, "sphere": { "body": [ "sphere(${1:radius}, ${2:[detailX]}, ${3:[detailY]})" ], "description": "Draw a sphere with given radius", "prefix": "sphere" }, "splice": { "body": [ "splice(${1:list}, ${2:value}, ${3:position})" ], "description": "Inserts a value or an array of values into an existing array. The first parameter specifies the initial array to be modified, and the second parameter defines the data to be inserted. The third parameter is an index value which specifies the array position from which to insert data. (Remember that array index numbering starts at zero, so the first position is 0, the second position is 1, and so on.)", "prefix": "splice" }, "split": { "body": [ "split(${1:value}, ${2:delim})" ], "description": "The split() function maps to String.split(), it breaks a String into pieces using a character or string as the delimiter. The delim parameter specifies the character or characters that mark the boundaries between each piece. A String[] array is returned that contains each of the pieces. The splitTokens() function works in a similar fashion, except that it splits using a range of characters instead of a specific character or sequence.", "prefix": "split" }, "splitTokens": { "body": [ "splitTokens(${1:value}, ${2:[delim]})" ], "description": "The splitTokens() function splits a String at one or many character delimiters or \"tokens.\" The delim parameter specifies the character or characters to be used as a boundary. If no delim characters are specified, any whitespace character is used to split. Whitespace characters include tab (\\t), line feed (\\n), carriage return (\\r), form feed (\\f), and space.", "prefix": "splitTokens" }, "sq": { "body": [ "sq(${1:n})" ], "description": "Squares a number (multiplies a number by itself). The result is always a positive number, as multiplying two negative numbers always yields a positive result. For example, -1 * -1 = 1.", "prefix": "sq" }, "sqrt": { "body": [ "sqrt(${1:n})" ], "description": "Calculates the square root of a number. The square root of a number is always positive, even though there may be a valid negative root. The square root s of number a is such that s*s = a. It is the opposite of squaring. Maps to Math.sqrt().", "prefix": "sqrt" }, "str": { "body": [ "str(${1:n})" ], "description": "Converts a boolean, string or number to its string representation. When an array of values is passed in, then an array of strings of the same length is returned.", "prefix": "str" }, "stroke": { "body": [ "stroke(${1:v1}, ${2:[v2]}, ${3:[v3]}, ${4:[a]})" ], "description": "Sets the color used to draw lines and borders around shapes. This color is either specified in terms of the RGB or HSB color depending on the current colorMode() (the default color space is RGB, with each value in the range from 0 to 255). If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. A p5 Color object can also be provided to set the stroke color.", "prefix": "stroke" }, "strokeCap": { "body": [ "strokeCap(${1:cap})" ], "description": "Sets the style for rendering line endings. These ends are either squared, extended, or rounded, each of which specified with the corresponding parameters: SQUARE, PROJECT, and ROUND. The default cap is ROUND.", "prefix": "strokeCap" }, "strokeJoin": { "body": [ "strokeJoin(${1:join})" ], "description": "Sets the style of the joints which connect line segments. These joints are either mitered, beveled, or rounded and specified with the corresponding parameters MITER, BEVEL, and ROUND. The default joint is MITER.", "prefix": "strokeJoin" }, "strokeWeight": { "body": [ "strokeWeight(${1:weight})" ], "description": "Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels.", "prefix": "strokeWeight" }, "subset": { "body": [ "subset(${1:list}, ${2:start}, ${3:[count]})" ], "description": "Extracts an array of elements from an existing array. The list parameter defines the array from which the elements will be copied, and the start and count parameters specify which elements to extract. If no count is given, elements will be extracted from the start to the end of the array. When specifying the start, remember that the first array element is 0. This function does not change the source array.", "prefix": "subset" }, "tan": { "body": [ "tan(${1:angle})" ], "description": "Calculates the tangent of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1.", "prefix": "tan" }, "text": { "body": [ "text(${1:str}, ${2:x}, ${3:y}, ${4:x2}, ${5:y2})" ], "description": "Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is set with the textFont() function and a default size will be used unless a font is set with textSize(). Change the color of the text with the fill() function. Change the outline of the text with the stroke() and strokeWeight() functions. The text displays in relation to the textAlign() function, which gives the option to draw to the left, right, and center of the coordinates. The x2 and y2 parameters define a rectangular area to display within and may only be used with string data. When these parameters are specified, they are interpreted based on the current rectMode() setting. Text that does not fit completely within the rectangle specified will not be drawn to the screen.", "prefix": "text" }, "textAlign": { "body": [ "textAlign(${1:horizAlign}, ${2:vertAlign})" ], "description": "Sets the current alignment for drawing text. Accepts two arguments: horizAlign (LEFT, CENTER, or RIGHT) and vertAlign (TOP, BOTTOM, CENTER, or BASELINE). The horizAlign parameter is in reference to the x value of the text() function, while the vertAlign parameter is in reference to the y value. So if you write textAlign(LEFT), you are aligning the left edge of your text to the x value you give in text(). If you write textAlign(RIGHT, TOP), you are aligning the right edge of your text to the x value and the top of edge of the text to the y value.", "prefix": "textAlign" }, "textFont": { "body": [ "textFont(${1:f})" ], "description": "Sets the current font that will be drawn with the text() function.", "prefix": "textFont" }, "textLeading": { "body": [ "textLeading(${1:leading})" ], "description": "Sets/gets the spacing, in pixels, between lines of text. This setting will be used in all subsequent calls to the text() function.", "prefix": "textLeading" }, "textSize": { "body": [ "textSize(${1:theSize})" ], "description": "Sets/gets the current font size. This size will be used in all subsequent calls to the text() function. Font size is measured in pixels.", "prefix": "textSize" }, "textStyle": { "body": [ "textStyle(${1:theStyle})" ], "description": "Sets/gets the style of the text for system fonts to NORMAL, ITALIC, or BOLD. Note: this may be is overridden by CSS styling. For non-system fonts (opentype, truetype, etc.) please load styled fonts instead.", "prefix": "textStyle" }, "textWidth": { "body": [ "textWidth(${1:theText})" ], "description": "Calculates and returns the width of any character or text string.", "prefix": "textWidth" }, "texture": { "body": [ "texture(${1:tex})" ], "description": "Texture for geometry. You can view other possible materials in this example.", "prefix": "texture" }, "tint": { "body": [ "tint(${1:v1}, ${2:[v2]}, ${3:[v3]}, ${4:[a]})" ], "description": "Sets the fill value for displaying images. Images can be tinted to specified colors or made transparent by including an alpha value. To apply transparency to an image without affecting its color, use white as the tint color and specify an alpha value. For instance, tint(255, 128) will make an image 50% transparent (assuming the default alpha range of 0-255, which can be changed with colorMode()). The value for the gray parameter must be less than or equal to the current maximum value as specified by colorMode(). The default maximum value is 255.", "prefix": "tint" }, "torus": { "body": [ "torus(${1:radius}, ${2:tubeRadius}, ${3:[detailX]}, ${4:[detailY]})" ], "description": "Draw a torus with given radius and tube radius", "prefix": "torus" }, "touchEnded": { "body": [ "touchEnded()" ], "description": "The touchEnded() function is called every time a touch ends. If no touchEnded() function is defined, the mouseReleased() function will be called instead if it is defined. Browsers may have different default behaviors attached to various touch events. To prevent any default behavior for this event, add \"return false\" to the end of the method.", "prefix": "touchEnded" }, "touchMoved": { "body": [ "touchMoved()" ], "description": "The touchMoved() function is called every time a touch move is registered. If no touchMoved() function is defined, the mouseDragged() function will be called instead if it is defined. Browsers may have different default behaviors attached to various touch events. To prevent any default behavior for this event, add \"return false\" to the end of the method.", "prefix": "touchMoved" }, "touchStarted": { "body": [ "touchStarted()" ], "description": "The touchStarted() function is called once after every time a touch is registered. If no touchStarted() function is defined, the mousePressed() function will be called instead if it is defined. Browsers may have different default behaviors attached to various touch events. To prevent any default behavior for this event, add \"return false\" to the end of the method.", "prefix": "touchStarted" }, "touches[]": { "body": [ "touches[]" ], "description": "The system variable touches[] contains an array of the positions of all current touch points, relative to (0, 0) of the canvas, and IDs identifying a unique touch as it moves. Each element in the array is an object with x, y, and id properties.", "prefix": "touches[]" }, "translate": { "body": [ "translate(${1:x}, ${2:y}, ${3:[z]})" ], "description": "Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation. Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). If translate() is called within draw(), the transformation is reset when the loop begins again. This function can be further controlled by using push() and pop().", "prefix": "translate" }, "triangle": { "body": [ "triangle(${1:x1}, ${2:y1}, ${3:x2}, ${4:y2}, ${5:x3}, ${6:y3})" ], "description": "A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point.", "prefix": "triangle" }, "trim": { "body": [ "trim(${1:str})" ], "description": "Removes whitespace characters from the beginning and end of a String. In addition to standard whitespace characters such as space, carriage return, and tab, this function also removes the Unicode \"nbsp\" character.", "prefix": "trim" }, "unchar": { "body": [ "unchar(${1:n})" ], "description": "Converts a single-character string to its corresponding integer representation. When an array of single-character string values is passed in, then an array of integers of the same length is returned.", "prefix": "unchar" }, "unhex": { "body": [ "unhex(${1:n})" ], "description": "Converts a string representation of a hexadecimal number to its equivalent integer value. When an array of strings in hexadecimal notation is passed in, an array of integers of the same length is returned.", "prefix": "unhex" }, "updatePixels": { "body": [ "updatePixels(${1:[x]}, ${2:[y]}, ${3:[w]}, ${4:[w]})" ], "description": "Updates the display window with the data in the pixels[] array. Use in conjunction with loadPixels(). If you're only reading pixels from the array, there's no need to call updatePixels() — updating is only necessary to apply changes. updatePixels() should be called anytime the pixels array is manipulated or set() is called.", "prefix": "updatePixels" }, "vertex": { "body": [ "vertex(${1:x}, ${2:y})" ], "description": "All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons. It is used exclusively within the beginShape() and endShape() functions.", "prefix": "vertex" }, "width": { "body": [ "width" ], "description": "System variable that stores the width of the drawing canvas. This value is set by the first parameter of the createCanvas() function. For example, the function call createCanvas(320, 240) sets the width variable to the value 320. The value of width defaults to 100 if createCanvas() is not used in a program.", "prefix": "width" }, "winMouseX": { "body": [ "winMouseX" ], "description": "The system variable winMouseX always contains the current horizontal position of the mouse, relative to (0, 0) of the window.", "prefix": "winMouseX" }, "winMouseY": { "body": [ "winMouseY" ], "description": "The system variable winMouseY always contains the current vertical position of the mouse, relative to (0, 0) of the window.", "prefix": "winMouseY" }, "windowHeight": { "body": [ "windowHeight" ], "description": "System variable that stores the height of the inner window, it maps to window.innerHeight.", "prefix": "windowHeight" }, "windowResized": { "body": [ "windowResized()" ], "description": "The windowResized() function is called once every time the browser window is resized. This is a good place to resize the canvas or do any other adjustments to accommodate the new window size.", "prefix": "windowResized" }, "windowWidth": { "body": [ "windowWidth" ], "description": "System variable that stores the width of the inner window, it maps to window.innerWidth.", "prefix": "windowWidth" }, "year": { "body": [ "year()" ], "description": "p5.js communicates with the clock on your computer. The year() function returns the current year as an integer (2014, 2015, 2016, etc).", "prefix": "year" } }