Statics§
- abs
Calculates the absolute value (magnitude) of a number. Maps to Math.abs(). The absolute value of a number is always positive.
Examples
- acos
The inverse of cos(), returns the arc cosine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range 0 to PI (3.1415927) if the angleMode is RADIANS or 0 to 180 if the angle mode is DEGREES.
Examples
- alpha
Extracts the alpha value from a color or pixel array.
Examples
- ambient
Light Creates an ambient light with a color. Ambient light is light that comes from everywhere on the canvas. It has no particular source.
Examples
- ambient
Material Ambient material for geometry with a given color. Ambient material defines the color the object reflects under any lighting. For example, if the ambient material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light. Here's an example containing all possible materials.
Examples
- angle
Mode Sets the current mode of p5 to given mode. Default mode is RADIANS.
Examples
- append
Adds a value to the end of an array. Extends the length of the array by one. Maps to Array.push().
Examples
- apply
Matrix Multiplies the current matrix by the one specified through the parameters. This is a powerful operation that can perform the equivalent of translate, scale, shear and rotate all at once. You can learn more about transformation matrices on Wikipedia.
The naming of the arguments here follows the naming of the WHATWG specification and corresponds to a transformation matrix of the form:
Examples
- arc
Draw an arc to the screen. If called with only x, y, w, h, start and stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc will be filled like an open semi-circle (OPEN), a closed semi-circle (CHORD), or as a closed pie segment (PIE). The origin may be changed with the ellipseMode() function.
The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse.Adding or subtracting TWO_PI to either angle does not change where they fall. If both start and stop fall at the same place, a full ellipse will be drawn. Be aware that the y-axis increases in the downward direction, therefore angles are measured clockwise from the positive x-direction ("3 o'clock").
Examples
- array
Copy 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.
Examples
- asin
The inverse of sin(), returns the arc sine of a value. This function expects the values in the range of -1 to 1 and values are returned in the range -PI/2 to PI/2 if the angleMode is RADIANS or -90 to 90 if the angle mode is DEGREES.
Examples
- atan
The inverse of tan(), returns the arc tangent of a value. This function expects the values in the range of -Infinity to Infinity (exclusive) and values are returned in the range -PI/2 to PI/2 if the angleMode is RADIANS or -90 to 90 if the angle mode is DEGREES.
Examples
- atan2
Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis. Values are returned as a float in the range from PI to -PI if the angleMode is RADIANS or 180 to -180 if the angleMode is DEGREES. The atan2() function is most often used for orienting geometry to the position of the cursor.
Note: The y-coordinate of the point is the first parameter, and the x-coordinate is the second parameter, due the the structure of calculating the tangent.
Examples
- background
The background() function sets the color used for the background of the p5.js canvas. The default background is transparent. This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the background need only be set once.
The color is either specified in terms of the RGB, HSB, or HSL color depending on the current colorMode. (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.
If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.
A p5.Color object can also be provided to set the background color.
A p5.Image can also be provided to set the background image.
Examples
- begin
Contour 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.
Examples
- begin
Shape 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, QUAD_STRIP, and TESS (WebGL only). 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().
Examples
- bezier
Draws a cubic Bezier curve on the screen. These curves are defined by a series of anchor and control points. The first two parameters specify the first anchor point and the last two parameters specify the other anchor point, which become the first and last points on the curve. The middle parameters specify the two control points which define the shape of the curve. Approximately speaking, control points "pull" the curve towards them.
Bezier curves were developed by French automotive engineer Pierre Bezier, and are commonly used in computer graphics to define gently sloping curves. See also curve().
Examples
- bezier
Detail Sets the resolution at which Bezier's curve is displayed. The default value is 20.
Note, This function is only useful when using the WEBGL renderer as the default canvas renderer does not use this information.
Examples
- bezier
Point Given the x or y co-ordinate values of control and anchor points of a bezier curve, it evaluates the x or y coordinate of the bezier at position t. The parameters a and d are the x or y coordinates of first and last points on the curve while b and c are of the control points.The final parameter t is the position of the resultant point which is given between 0 and 1. This can be done once with the x coordinates and a second time with the y coordinates to get the location of a bezier curve at t.
Examples
- bezier
Tangent 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.
Examples
- bezier
Vertex Specifies vertex coordinates for Bezier curves. Each call to bezierVertex() defines the position of two control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. For WebGL mode bezierVertex() can be used in 2D as well as 3D mode. 2D mode expects 6 parameters, while 3D mode expects 9 parameters (including z coordinates).
The first time bezierVertex() is used within a beginShape() call, it must be prefaced with a call to vertex() to set the first anchor point. This function must be used between beginShape() and endShape() and only when there is no MODE or POINTS parameter specified to beginShape().
Examples
- blend
Copies a region of pixels from one image to another, using a specified blend mode to do the operation.
Examples
- blend
Mode 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 = A\*factor + B. This is the default blending mode.ADD- sum of A and BDARKEST- only the darkest colour succeeds: C = min(A\*factor, B).LIGHTEST- only the lightest colour succeeds: C = max(A\*factor, B).DIFFERENCE- subtract colors from underlying image.EXCLUSION- similar toDIFFERENCE, 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.REMOVE- removes pixels from B with the alpha strength of A.OVERLAY- mix ofMULTIPLYandSCREEN. Multiplies dark values, and screens light values. (2D)HARD_LIGHT-SCREENwhen greater than 50% gray,MULTIPLYwhen lower. (2D)SOFT_LIGHT- mix ofDARKESTandLIGHTEST. Works likeOVERLAY, but not as harsh. (2D)DODGE- lightens light tones and increases contrast, ignores darks. (2D)BURN- darker areas are applied, increasing contrast, ignores lights. (2D)SUBTRACT- remainder of A and B (3D)
- blue
Extracts the blue value from a color or pixel array.
Examples
- boolean
Converts a number or string to its boolean representation. For a number, any non-zero value (positive or negative) evaluates to true, while zero evaluates to false. For a string, the value "true" evaluates to true, while any other value evaluates to false. When an array of number or string values is passed in, then a array of booleans of the same length is returned.
Examples
- box
Draw a box with given width, height and depth
Examples
- brightness
Extracts the HSB brightness value from a color or pixel array.
Examples
- byte
Converts a number, string representation of a number, or boolean to its byte representation. A byte can be only a whole number between -128 and 127, so when a value outside of this range is converted, it wraps around to the corresponding byte representation. When an array of number, string or boolean values is passed in, then an array of bytes the same length is returned.
Examples
- camera
Sets the camera position for a 3D sketch. Parameters for this function define the position for the camera, the center of the sketch (where the camera is pointing), and an up direction (the orientation of the camera).
This function simulates the movements of the camera, allowing objects to be viewed from various angles. Remember, it does not move the objects themselves but the camera instead. For example when centerX value is positive, the camera is rotating to the right side of the sketch, so the object would seem like moving to the left.
See this example to view the position of your camera.
When called with no arguments, this function creates a default camera equivalent to camera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);
Examples
- ceil
Calculates the closest int value that is greater than or equal to the value of the parameter. Maps to Math.ceil(). For example, ceil(9.03) returns the value 10.
Examples
- changed
The .changed() function is called when the value of an element changes. This can be used to attach an element specific event listener.
Examples
- char
Converts a number or string to its corresponding single-character string representation. If a string parameter is provided, it is first parsed as an integer and then translated into a single-character string. When an array of number or string values is passed in, then an array of single-character strings of the same length is returned.
Examples
- circle
Draws a circle to the screen. A circle is a simple closed shape.It is the set of all points in a plane that are at a given distance from a given point, the centre.This function is a special case of the ellipse() function, where the width and height of the ellipse are the same. Height and width of the ellipse correspond to the diameter of the circle. By default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle.
Examples
- clear
Clears the pixels within a buffer. This function only clears the canvas. It will not clear objects created by createX() methods such as createVideo() or createDiv(). Unlike the main graphics context, pixels in additional graphics areas created with createGraphics() can be entirely or partially transparent. This function clears everything to make all of the pixels 100% transparent.
Examples
- clear
Storage Clears all local storage items set with storeItem() for the current domain.
Examples
- color
Creates colors for storing in variables of the color datatype. The parameters are interpreted as RGB or HSB values depending on the current colorMode(). The default mode is RGB values from 0 to 255 and, therefore, the function call color(255, 204, 0) will return a bright yellow color.
Note that if only one value is provided to color(), it will be interpreted as a grayscale value. Add a second value, and it will be used for alpha transparency. When three values are specified, they are interpreted as either RGB or HSB values. Adding a fourth value applies alpha transparency.
If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.
Examples
- color
Mode 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.
Examples
- concat
Concatenates two arrays, maps to Array.concat(). Does not modify the input arrays.
Examples
- cone
Draw a cone with given radius and height
DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a cone. More subdivisions make the cone seem smoother. The recommended maximum value for detailX is 24. Using a value greater than 24 may cause a warning or slow down the browser.
Examples
- constrain
Constrains a value between a minimum and maximum value.
Examples
- copy
Copies a region of the canvas to another region of the canvas and copies a region of pixels from an image used as the srcImg parameter into the canvas srcImage is specified this is used as the source. If the source and destination regions aren't the same size, it will automatically resize source pixels to fit the specified target region.
Examples
- cos
Calculates the cosine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1.
Examples
- createA
Creates an element in the DOM for including a hyperlink.
Examples
- create
Audio Creates a hidden HTML5
Examples
- create
Button Creates a button element in the DOM. Use .size() to set the display size of the button. Use .mousePressed() to specify behavior on press.
Examples
- create
Camera Creates a new p5.Camera object and tells the renderer to use that camera. Returns the p5.Camera object.
Examples
- create
Canvas Creates a canvas element in the document, and sets the dimensions of it in pixels. This method should be called only once at the start of setup. Calling createCanvas more than once in a sketch will result in very unpredictable behavior. If you want more than one drawing canvas you could use createGraphics (hidden by default but it can be shown).
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.
Examples
- create
Capture Creates a new HTML5 video element that contains the audio/video feed from a webcam. The element is separate from the canvas and is displayed by default. The element can be hidden using .hide(). The feed can be drawn onto the canvas using image(). The loadedmetadata property can be used to detect when the element has fully loaded (see second example).
More specific properties of the feed can be passing in a Constraints object. See the W3C spec for possible properties. Note that not all of these are supported by all browsers.
Security note: A new browser security specification requires that getUserMedia, which is behind createCapture(), only works when you're running the code locally, or on HTTPS. Learn more here and here.
Examples
- create
Checkbox Creates a checkbox input element in the DOM. Calling .checked() on a checkbox returns if it is checked or not
Examples
- create
Color Picker Creates a colorPicker element in the DOM for color input. The .value() method will return a hex string (#rrggbb) of the color. The .color() method will return a p5.Color object with the current chosen color.
Examples
- create
Convolver Create a p5.Convolver. Accepts a path to a soundfile that will be used to generate an impulse response.
Examples
- create
Div Creates a
element in the DOM with given inner HTML.Examples
- create
Element Creates element with given tag in the DOM with given content.
Examples
- create
File Input Creates an input element in the DOM of type 'file'. This allows users to select local files for use in a sketch.
Examples
- create
Graphics 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.
Examples
- create
Image 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.
Examples
- create
Img Creates an
element in the DOM with given src and alternate text.
Examples
- create
Input Creates an input element in the DOM for text input. Use .size() to set the display length of the box.
Examples
- create
Number Dict Creates a new instance of p5.NumberDict using the key-value pair or object you provide.
Examples
- createP
Creates a
element in the DOM with given inner HTML. Used for paragraph length text.Examples
- create
Radio Creates a radio button element in the DOM.It also helps existing radio buttons assign methods of p5.Element.
.option(value, [label])can be used to create a new option for the element. If an option with a value already exists, it will be returned. Optionally, a label can be provided as second argument for the option..remove(value)can be used to remove an option for the element..value()method will return the currently selected value..selected()method will return the currently selected input element..selected(value)method will select the option and return it..disable(Boolean)method will enable/disable the whole radio button element.
Examples
- create
Select Creates a dropdown menu select element in the DOM. It also helps to assign select-box methods to p5.Element when selecting existing select box.
.option(name, [value])can be used to set options for the select after it is created..value()will return the currently selected option..selected()will return current dropdown element which is an instance of p5.Element.selected(value)can be used to make given option selected by default when the page first loads..disable()marks whole of dropdown element as disabled..disable(value)marks given option as disabled
Examples
- create
Shader - No description available
- create
Slider Creates a slider input element in the DOM. Use .size() to set the display length of the slider.
Examples
- create
Span Creates a element in the DOM with given inner HTML.
Examples
- create
String Dict Creates a new instance of p5.StringDict using the key-value pair or the object you provide.
Examples
- create
Vector 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.
Examples
- create
Video Creates an HTML5 video element in the DOM for simple playback of audio/video. Shown by default, can be hidden with .hide() and drawn into canvas using image(). The first parameter can be either a single string path to a video file, or an array of string paths to different formats of the same video. This is useful for ensuring that your video can play across different browsers, as each supports different formats. See this page for further information about supported formats.
Examples
- create
Writer - No description available
- cursor
Sets the cursor to a predefined symbol or an image, or makes it visible if already hidden. If you are trying to set an image as the cursor, the recommended size is 16x16 or 32x32 pixels. The values for parameters x and y must be less than the dimensions of the image.
Examples
- curve
Draws a curved line on the screen between two points, given as the middle four parameters. The first two parameters are a control point, as if the curve came from this point even though it's not drawn. The last two parameters similarly describe the other control point.
Longer curves can be created by putting a series of curve() functions together or using curveVertex(). An additional function called curveTightness() provides control for the visual quality of the curve. The curve() function is an implementation of Catmull-Rom splines.Examples
- curve
Detail Sets the resolution at which curves display. The default value is 20 while the minimum value is 3.
This function is only useful when using the WEBGL renderer as the default canvas renderer does not use this information.
Examples
- curve
Point Evaluates the curve at position t for points a, b, c, d. The parameter t varies between 0 and 1, a and d are control points of the curve, and b and c are the start and end points of the curve. This can be done once with the x coordinates and a second time with the y coordinates to get the location of a curve at t.
Examples
- curve
Tangent 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.
Examples
- curve
Tightness 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.
Examples
- curve
Vertex Specifies vertex coordinates for curves. This function may only be used between beginShape() and endShape() and only when there is no MODE parameter specified to beginShape(). For WebGL mode curveVertex() can be used in 2D as well as 3D mode. 2D mode expects 2 parameters, while 3D mode expects 3 parameters.
The first and last points in a series of curveVertex() lines will be used to guide the beginning and end of a the curve. A minimum of four points is required to draw a tiny curve between the second and third points. Adding a fifth point with curveVertex() will draw the curve between the second, third, and fourth points. The curveVertex() function is an implementation of Catmull-Rom splines.
Examples
- cylinder
Draw a cylinder with given radius and height
DetailX and detailY determines the number of subdivisions in the x-dimension and the y-dimension of a cylinder. More subdivisions make the cylinder seem smoother. The recommended maximum value for detailX is 24. Using a value greater than 24 may cause a warning or slow down the browser.
Examples
- day
p5.js communicates with the clock on your computer. The day() function returns the current day as a value from 1 - 31.
Examples
- debug
Mode debugMode() helps visualize 3D space by adding a grid to indicate where the ‘ground’ is in a sketch and an axes icon which indicates the +X, +Y, and +Z directions. This function can be called without parameters to create a default grid and axes icon, or it can be called according to the examples above to customize the size and position of the grid and/or axes icon. The grid is drawn using the most recently set stroke color and weight. To specify these parameters, add a call to stroke() and strokeWeight() just before the end of the draw() loop.
By default, the grid will run through the origin (0,0,0) of the sketch along the XZ plane and the axes icon will be offset from the origin. Both the grid and axes icon will be sized according to the current canvas size. Note that because the grid runs parallel to the default camera view, it is often helpful to use debugMode along with orbitControl to allow full view of the grid.
Examples
- degrees
Converts a radian measurement to its corresponding value in degrees. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode.
Examples
- describe
Creates a screen-reader accessible description for the canvas. The first parameter should be a string with a description of the canvas. The second parameter is optional. If specified, it determines how the description is displayed.
describe(text, LABEL)displays the description to all users as a tombstone or exhibit label/caption in aadjacent to the canvas. You can style it as you wish in your CSS.describe(text, FALLBACK)makes the description accessible to screen-reader users only, in a sub DOM inside the canvas element. If a second parameter is not specified, by default, the description will only be available to screen-reader users.Examples
- describe
Element This function creates a screen-reader accessible description for elements —shapes or groups of shapes that create meaning together— in the canvas. The first paramater should be the name of the element. The second parameter should be a string with a description of the element. The third parameter is optional. If specified, it determines how the element description is displayed.
describeElement(name, text, LABEL)displays the element description to all users as a tombstone or exhibit label/caption in aadjacent to the canvas. You can style it as you wish in your CSS.describeElement(name, text, FALLBACK)makes the element description accessible to screen-reader users only, in a sub DOM inside the canvas element. If a second parameter is not specified, by default, the element description will only be available to screen-reader users.Examples
- device
Moved The deviceMoved() function is called when the device is moved by more than the threshold value along X, Y or Z axis. The default threshold is set to 0.5. The threshold value can be changed using setMoveThreshold().
Examples
- device
Shaken The deviceShaken() function is called when the device total acceleration changes of accelerationX and accelerationY values is more than the threshold value. The default threshold is set to 30. The threshold value can be changed using setShakeThreshold().
Examples
- device
Turned 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'.
Examples
- directional
Light Creates a directional light with a color and a direction
A maximum of 5 directionalLight can be active at one time
Examples
- display
Density Returns the pixel density of the current display the sketch is running on.
Examples
- dist
Calculates the distance between two points, in either two or three dimensions.
Examples
- double
Clicked The doubleClicked() function is executed every time a event listener has detected a dblclick event which is a part of the DOM L3 specification. The doubleClicked event is fired when a pointing device button (usually a mouse's primary button) is clicked twice on a single element. For more info on the dblclick event refer to mozilla's documentation here: https://developer.mozilla.org/en-US/docs/Web/Events/dblclick
Examples
- ellipse
Draws an ellipse (oval) to the screen. By default, the first two parameters set the location of the center of the ellipse, and the third and fourth parameters set the shape's width and height. If no height is specified, the value of width is used for both the width and height. If a negative height or width is specified, the absolute value is taken.
An ellipse with equal width and height is a circle.The origin may be changed with the ellipseMode() function.
Examples
- ellipse
Mode Modifies the location from which ellipses are drawn by changing the way in which parameters given to ellipse(), circle() and arc() are interpreted.
The default mode is CENTER, in which the first two parameters are interpreted as the shape's center point's x and y coordinates respectively, while the third and fourth parameters are its width and height.
ellipseMode(RADIUS) also uses the first two parameters as the shape's center point's x and y coordinates, but uses the third and fourth parameters to specify half of the shapes's width and height.
ellipseMode(CORNER) interprets the first two parameters as the upper-left corner of the shape, while the third and fourth parameters are its width and height.
ellipseMode(CORNERS) interprets the first two parameters as the location of one corner of the ellipse's bounding box, and the third and fourth parameters as the location of the opposite corner.
The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language.
Examples
- ellipsoid
Draw an ellipsoid with given radius
DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a cone. More subdivisions make the ellipsoid appear to be smoother. Avoid detail number above 150, it may crash the browser.
Examples
- emissive
Material Sets the emissive color of the material used for geometry drawn to the screen. This is a misnomer in the sense that the material does not actually emit light that effects surrounding polygons. Instead, it gives the appearance that the object is glowing. An emissive material will display at full strength even if there is no light for it to reflect.
Examples
- endContour
Use the beginContour() and endContour() functions to create negative shapes within shapes such as the center of the letter 'O'. beginContour() begins recording vertices for the shape and endContour() stops recording. The vertices that define a negative shape must "wind" in the opposite direction from the exterior shape. First draw vertices for the exterior clockwise order, then for internal shapes, draw vertices shape in counter-clockwise.
These functions can only be used within a beginShape()/endShape() pair and transformations such as translate(), rotate(), and scale() do not work within a beginContour()/endContour() pair. It is also not possible to use other shapes, such as ellipse() or rect() within.
Examples
- endShape
The endShape() function is the companion to beginShape() and may only be called after beginShape(). When endShape() is called, all of image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE as the value for the MODE parameter to close the shape (to connect the beginning and the end).
Examples
- erase
All drawing that follows erase() will subtract from the canvas.Erased areas will reveal the web page underneath the canvas.Erasing can be canceled with noErase().
Drawing done with image() and background() in between erase() and noErase() will not erase the canvas but works as usual.
Examples
- exit
Pointer Lock The function exitPointerLock() exits a previously triggered pointer Lock for example to make ui elements usable etc
Examples
- exp
Returns Euler's number e (2.71828...) raised to the power of the n parameter. Maps to Math.exp().
Examples
- fill
Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all shapes drawn after the fill command will be filled with the color orange. This color is either specified in terms of the RGB or HSB color depending on the current colorMode(). (The default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.
If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.
A p5 Color object can also be provided to set the fill color.
Examples
- filter
Applies a filter to the canvas. The presets options are:
THRESHOLD Converts the image to black and white pixels depending if they are above or below the threshold defined by the level parameter. The parameter must be between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.
GRAY Converts any colors in the image to grayscale equivalents. No parameter is used.
OPAQUE Sets the alpha channel to entirely opaque. No parameter is used.
INVERT Sets each pixel to its inverse value. No parameter is used.
POSTERIZE Limits each channel of the image to the number of colors specified as the parameter. The parameter can be set to values between 2 and 255, but results are most noticeable in the lower ranges.
BLUR Executes a Gaussian blur with the level parameter specifying the extent of the blurring. If no parameter is used, the blur is equivalent to Gaussian blur of radius 1. Larger values increase the blur.
ERODE Reduces the light areas. No parameter is used.
DILATE Increases the light areas. No parameter is used.
filter() does not work in WEBGL mode. A similar effect can be achieved in WEBGL mode using custom shaders. Adam Ferriss has written a selection of shader examples that contains many of the effects present in the filter examples.
Examples
- float
Converts a string to its floating point representation. The contents of a string must resemble a number, or NaN (not a number) will be returned. For example, float("1234.56") evaluates to 1234.56, but float("giraffe") will return NaN.
When an array of values is passed in, then an array of floats of the same length is returned.
Examples
- floor
Calculates the closest int value that is less than or equal to the value of the parameter. Maps to Math.floor().
Examples
- fract
Calculates the fractional part of a number.
Examples
- frame
Rate Specifies the number of frames to be displayed every second. For example, the function call frameRate(30) will attempt to refresh 30 times a second. If the processor is not fast enough to maintain the specified rate, the frame rate will not be achieved. Setting the frame rate within setup() is recommended. The default frame rate is based on the frame rate of the display (here also called "refresh rate"), which is set to 60 frames per second on most computers. A frame rate of 24 frames per second (usual for movies) or above will be enough for smooth animations. This is the same as setFrameRate(val).
Calling frameRate() with no arguments returns the current framerate. The draw function must run at least once before it will return a value. This is the same as getFrameRate().
Calling frameRate() with arguments that are not of the type numbers or are non positive also returns current framerate.
Examples
- freq
ToMidi Returns the closest MIDI note value for a given frequency.
Parameters
- frustum
Sets a perspective matrix as defined by the parameters.
A frustum is a geometric form: a pyramid with its top cut off. With the viewer's eye at the imaginary top of the pyramid, the six planes of the frustum act as clipping planes when rendering a 3D view. Thus, any form inside the clipping planes is visible; anything outside those planes is not visible.
Setting the frustum changes the perspective of the scene being rendered. This can be achieved more simply in many cases by using perspective().
Examples
- fullscreen
If argument is given, sets the sketch to fullscreen or not based on the value of the argument. If no argument is given, returns the current fullscreen state. Note that due to browser restrictions this can only be called on user input, for example, on mouse press like the example below.
Examples
- get
Get a region of pixels, or a single pixel, from the canvas.
Returns an array of [R,G,B,A] values for any pixel or grabs a section of an image. If no parameters are specified, the entire image is returned. Use the x and y parameters to get the value of one pixel. Get a section of the display window by specifying additional w and h parameters. When getting an image, the x and y parameters define the coordinates for the upper-left corner of the image, regardless of the current imageMode().
Getting the color of a single pixel with get(x, y) is easy, but not as fast as grabbing the data directly from pixels[]. The equivalent statement to get(x, y) using pixels[] with pixel density d is
let x, y, d; // set these to the coordinates let off = (y * width + x) * d * 4; let components = [ pixels[off], pixels[off + 1], pixels[off + 2], pixels[off + 3] ]; print(components);See the reference for pixels[] for more information.
If you want to extract an array of colors or a subimage from an p5.Image object, take a look at p5.Image.get()
Examples
- getAudio
Context Returns the Audio Context for this sketch. Useful for users who would like to dig deeper into the Web Audio API .
- getItem
Returns the value of an item that was stored in local storage using storeItem()
Examples
- getURL
Gets the current URL.
Examples
- getURL
Params Gets the current URL params as an Object.
Examples
- getURL
Path Gets the current URL path as an array.
Examples
- green
Extracts the green value from a color or pixel array.
Examples
- hex
Converts a number to a string in its equivalent hexadecimal notation. If a second parameter is passed, it is used to set the number of characters to generate in the hexadecimal notation. When an array is passed in, an array of strings in hexadecimal notation of the same length is returned.
Examples
- hour
p5.js communicates with the clock on your computer. The hour() function returns the current hour as a value from 0 - 23.
Examples
- httpDo
Method for executing an HTTP request. If data type is not specified, p5 will try to guess based on the URL, defaulting to text.
For more advanced use, you may also pass in the path as the first argument and a object as the second argument, the signature follows the one specified in the Fetch API specification. This method is suitable for fetching files up to size of 64MB when "GET" is used.Examples
- httpGet
Method for executing an HTTP GET request. If data type is not specified, p5 will try to guess based on the URL, defaulting to text. This is equivalent to calling
httpDo(path, 'GET'). The 'binary' datatype will return a Blob object, and the 'arrayBuffer' datatype will return an ArrayBuffer which can be used to initialize typed arrays (such as Uint8Array).Examples
- http
Post Method for executing an HTTP POST request. If data type is not specified, p5 will try to guess based on the URL, defaulting to text. This is equivalent to calling
httpDo(path, 'POST').Examples
- hue
Extracts the hue value from a color or pixel array.
Hue exists in both HSB and HSL. This function will return the HSB-normalized hue when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL-normalized hue otherwise. (The values will only be different if the maximum hue setting for each system is different.)
Examples
- image
Draw an image to the p5.js canvas.
This function can be used with different numbers of parameters. The simplest use requires only three parameters: img, x, and y—where (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image.
This function can also be used with all eight Number parameters. To differentiate between all these parameters, p5.js uses the language of "destination rectangle" (which corresponds to "dx", "dy", etc.) and "source image" (which corresponds to "sx", "sy", etc.) below. Specifying the "source image" dimensions can be useful when you want to display a subsection of the source image instead of the whole thing. Here's a diagram to explain further:
Examples
- image
Mode 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.
Examples
- input
The .input() function is called when any user input is detected with an element. The input event is often used to detect keystrokes in a input element, or changes on a slider element. This can be used to attach an element specific event listener.
Examples
- int
Converts a boolean, string, or float to its integer representation. When an array of values is passed in, then an int array of the same length is returned.
Examples
- isLooping
By default, p5.js loops through draw() continuously, executing the code within it. If the sketch is stopped with noLoop() or resumed with loop(), isLooping() returns the current state for use within custom event handlers.
Examples
- join
Combines an array of Strings into one String, each separated by the character(s) used for the separator parameter. To join arrays of ints or floats, it's necessary to first convert them to Strings using nf() or nfs().
Examples
- keyIs
Down 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.
Examples
- keyPressed
The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable.
For non-ASCII keys, use the keyCode variable. You can check if the keyCode equals BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.
For ASCII keys, the key that was pressed is stored in the key variable. However, it does not distinguish between uppercase and lowercase. For this reason, it is recommended to use keyTyped() to read the key variable, in which the case of the variable will be distinguished.
Because of how operating systems handle key repeats, holding down a key may cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured.
Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method.Examples
- keyReleased
The keyReleased() function is called once every time a key is released. See key and keyCode for more information.
Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method.Examples
- keyTyped
The keyTyped() function is called once every time a key is pressed, but action keys such as Backspace, Delete, Ctrl, Shift, and Alt are ignored. If you are trying to detect a keyCode for one of these keys, use the keyPressed() function instead. The most recent key typed will be stored in the key variable.
Because of how operating systems handle key repeats, holding down a key will cause multiple calls to keyTyped() (and keyReleased() as well). The rate of repeat is set by the operating system and how each computer is configured.
Browsers may have different default behaviors attached to various key events. To prevent any default behavior for this event, add "return false" to the end of the method.Examples
- lerp
Calculates a number between two numbers at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, and 1.0 is equal to the second point. If the value of amt is more than 1.0 or less than 0.0, the number will be calculated accordingly in the ratio of the two given numbers. The lerp function is convenient for creating motion along a straight path and for drawing dotted lines.
Examples
- lerp
Color 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 colors are interpolated depends on the current color mode.
Examples
- light
Falloff Sets the falloff rates for point lights. It affects only the elements which are created after it in the code. The default value is lightFalloff(1.0, 0.0, 0.0), and the parameters are used to calculate the falloff with the following equation:
d = distance from light position to vertex position
falloff = 1 / (CONSTANT + d * LINEAR + ( d * d ) * QUADRATIC)
Examples
- lightness
Extracts the HSL lightness value from a color or pixel array.
Examples
- lights
Sets the default ambient and directional light. The defaults are ambientLight(128, 128, 128) and directionalLight(128, 128, 128, 0, 0, -1). Lights need to be included in the draw() to remain persistent in a looping program. Placing them in the setup() of a looping program will cause them to only have an effect the first time through the loop.
Examples
- line
Draws a line (a direct path between two points) to the screen. If called with only 4 parameters, it will draw a line in 2D with a default width of 1 pixel. This width can be modified by using the strokeWeight() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. So to color a line, use the stroke() function.
Examples
- load
Bytes This method is suitable for fetching files up to size of 64MB.
Examples
- load
Font Loads an opentype font file (.otf, .ttf) from a file or a URL, and returns a PFont Object. This method is asynchronous, meaning it may not finish before the next line in your sketch is executed.
The path to the font should be relative to the HTML file that links in your sketch. Loading fonts from a URL or other remote location may be blocked due to your browser's built-in security.
Examples
- load
Image Loads an image from a path and creates a p5.Image from it.
The image may not be immediately available for rendering. If you want to ensure that the image is ready before doing anything with it, place the loadImage() call in preload(). You may also supply a callback function to handle the image when it's ready.
The path to the image should be relative to the HTML file that links in your sketch. Loading an image from a URL or other remote location may be blocked due to your browser's built-in security.
You can also pass in a string of a base64 encoded image as an alternative to the file path. Remember to add "data:image/png;base64," in front of the string.
Examples
- loadJSON
Loads a JSON file from a file or a URL, and returns an Object. Note that even if the JSON file contains an Array, an Object will be returned with index numbers as keys.
This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. JSONP is supported via a polyfill and you can pass in as the second argument an object with definitions of the json callback following the syntax specified here.
This method is suitable for fetching files up to size of 64MB.
Examples
- load
Model Load a 3d model from an OBJ or STL file.
loadModel() should be placed inside of preload(). This allows the model to load fully before the rest of your code is run.
One of the limitations of the OBJ and STL format is that it doesn't have a built-in sense of scale. This means that models exported from different programs might be very different sizes. If your model isn't displaying, try calling loadModel() with the normalized parameter set to true. This will resize the model to a scale appropriate for p5. You can also make additional changes to the final size of your model with the scale() function.
Also, the support for colored STL files is not present. STL files with color will be rendered without color properties.
Examples
- load
Pixels Loads the pixel data for the display window into the pixels[] array. This function must always be called before reading from or writing to pixels[]. Note that only changes made with set() or direct manipulation of pixels[] will occur.
Examples
- load
Shader Loads a custom shader from the provided vertex and fragment shader paths. The shader files are loaded asynchronously in the background, so this method should be used in preload().
For now, there are three main types of shaders. p5 will automatically supply appropriate vertices, normals, colors, and lighting attributes if the parameters defined in the shader match the names.
Examples
- load
Sound loadSound() returns a new p5.SoundFile from a specified path. If called during preload(), the p5.SoundFile will be ready to play in time for setup() and draw(). If called outside of preload, the p5.SoundFile will not be ready immediately, so loadSound accepts a callback as the second parameter. Using a local server is recommended when loading external files.
Examples
- load
Strings Reads the contents of a file and creates a String array of its individual lines. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder.
Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.
This method is asynchronous, meaning it may not finish before the next line in your sketch is executed.
This method is suitable for fetching files up to size of 64MB.
Examples
- load
Table Reads the contents of a file or URL and creates a p5.Table object with its values. If a file is specified, it must be located in the sketch's "data" folder. The filename parameter can also be a URL to a file found online. By default, the file is assumed to be comma-separated (in CSV format). Table only looks for a header row if the 'header' option is included.
This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. Calling loadTable() inside preload() guarantees to complete the operation before setup() and draw() are called. Outside of preload(), you may supply a callback function to handle the object:
All files loaded and saved use UTF-8 encoding. This method is suitable for fetching files up to size of 64MB.
Examples
- loadXML
Reads the contents of a file and creates an XML object with its values. If the name of the file is used as the parameter, as in the above example, the file must be located in the sketch directory/folder.
Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.
This method is asynchronous, meaning it may not finish before the next line in your sketch is executed. Calling loadXML() inside preload() guarantees to complete the operation before setup() and draw() are called.
Outside of preload(), you may supply a callback function to handle the object.
This method is suitable for fetching files up to size of 64MB.
Examples
- log
Calculates the natural logarithm (the base-e logarithm) of a number. This function expects the n parameter to be a value greater than 0.0. Maps to Math.log().
Examples
- loop
By default, p5.js loops through draw() continuously, executing the code within it. However, the draw() loop may be stopped by calling noLoop(). In that case, the draw() loop can be resumed with loop().
Avoid calling loop() from inside setup().
Use isLooping() to check current state of loop().
Examples
- mag
Calculates the magnitude (or length) of a vector. A vector is a direction in space commonly used in computer graphics and linear algebra. Because it has no "start" position, the magnitude of a vector can be thought of as the distance from the coordinate 0,0 to its x,y value. Therefore, mag() is a shortcut for writing dist(0, 0, x, y).
Examples
- map
Re-maps a number from one range to another.
In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width).
Examples
- match
This function is used to apply a regular expression to a piece of text, and return matching groups (elements found inside parentheses) as a String array. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, an array of length 1 (with the matched text as the first element of the array) will be returned.
To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. If the sequence did match, an array is returned.
If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Element [0] of a regular expression match returns the entire matching string, and the match groups start at element [1] (the first group is [1], the second [2], and so on).
Examples
- match
All 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).
Examples
- max
Determines the largest value in a sequence of numbers, and then returns that value. max() accepts any number of Number parameters, or an Array of any length.
Examples
- midi
ToFreq Returns the frequency value of a MIDI note value. General MIDI treats notes as integers where middle C is 60, C# is 61, D is 62 etc. Useful for generating musical frequencies with oscillators.
Examples
- millis
Returns the number of milliseconds (thousandths of a second) since starting the sketch (when
setup()is called). This information is often used for timing events and animation sequences.Examples
- min
Determines the smallest value in a sequence of numbers, and then returns that value. min() accepts any number of Number parameters, or an Array of any length.
Examples
- minute
p5.js communicates with the clock on your computer. The minute() function returns the current minute as a value from 0 - 59.
Examples
- model
Render a 3d model to the screen.
Examples
- month
p5.js communicates with the clock on your computer. The month() function returns the current month as a value from 1 - 12.
Examples
- mouse
Clicked The mouseClicked() function is called once after a mouse button has been pressed and then released.
Browsers handle clicks differently, so this function is only guaranteed to be run when the left mouse button is clicked. To handle other mouse buttons being pressed or released, see mousePressed() or mouseReleased().
Browsers may have different default behaviors attached to various mouse events. To prevent any default behavior for this event, add "return false" to the end of the method.Examples
- mouse
Dragged 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.Examples
- mouse
Moved 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.Examples
- mouse
Pressed 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.Examples
- mouse
Released 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.Examples
- mouse
Wheel 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.Examples
- nf
Utility function for formatting numbers into strings. There are two versions: one for formatting floats, and one for formatting ints. The values for the digits, left, and right parameters should always be positive integers. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200.
Examples
- nfc
Utility function for formatting numbers into strings and placing appropriate commas to mark units of 1000. There are two versions: one for formatting ints, and one for formatting an array of ints. The value for the right parameter should always be a positive integer.
Examples
- nfp
Utility function for formatting numbers into strings. Similar to nf() but puts a "+" in front of positive numbers and a "-" in front of negative numbers. There are two versions: one for formatting floats, and one for formatting ints. The values for left, and right parameters should always be positive integers.
Examples
- nfs
Utility function for formatting numbers into strings. Similar to nf() but puts an additional "_" (space) in front of positive numbers just in case to align it with negative numbers which includes "-" (minus) sign. The main usecase of nfs() can be seen when one wants to align the digits (place values) of a non-negative number with some negative number (See the example to get a clear picture). There are two versions: one for formatting float, and one for formatting int. The values for the digits, left, and right parameters should always be positive integers. (IMP): The result on the canvas basically the expected alignment can vary based on the typeface you are using. (NOTE): Be cautious when using left and right parameters as it prepends numbers of 0's if the parameter if greater than the current length of the number. For example if number is 123.2 and left parameter passed is 4 which is greater than length of 123 (integer part) i.e 3 than result will be 0123.2. Same case for right parameter i.e. if right is 3 than the result will be 123.200.
Examples
- noCanvas
Removes the default canvas for a p5 sketch that doesn't require a canvas
Examples
- noCursor
Hides the cursor from view.
Examples
- noDebug
Mode Turns off debugMode() in a 3D sketch.
Examples
- noErase
Ends erasing that was started with erase(). The fill(), stroke(), and blendMode() settings will return to what they were prior to calling erase().
Examples
- noFill
Disables filling geometry. If both noStroke() and noFill() are called, nothing will be drawn to the screen.
Examples
- noLights
This function will remove all the lights from the sketch for the subsequent materials rendered. It affects all the subsequent methods. Calls to lighting methods made after noLights() will re-enable lights in the sketch.
Examples
- noLoop
Stops p5.js from continuously executing the code within draw(). If loop() is called, the code in draw() begins to run continuously again. If using noLoop() in setup(), it should be the last line inside the block.
When noLoop() is used, it's not possible to manipulate or access the screen inside event handling functions such as mousePressed() or keyPressed(). Instead, use those functions to call redraw() or loop(), which will run draw(), which can update the screen properly. This means that when noLoop() has been called, no drawing can happen, and functions like 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.
Use isLooping() to check current state of loop().
Examples
- noSmooth
Draws all geometry with jagged (aliased) edges. Note that smooth() is active by default in 2D mode, so it is necessary to call noSmooth() to disable smoothing of geometry, images, and fonts. In 3D mode, noSmooth() is enabled by default, so it is necessary to call smooth() if you would like smooth (antialiased) edges on your geometry.
Examples
- noStroke
Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen.
Examples
- noTint
Removes the current fill value for displaying images and reverts to displaying images with their original hues.
Examples
- noise
Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more naturally ordered, harmonic succession of numbers compared to the standard random() function. It was invented by Ken Perlin in the 1980s and been used since in graphical applications to produce procedural textures, natural motion, shapes, terrains etc.
The main difference to the random() function is that Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value (fixed only for the lifespan of the program; see the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise, depending on the number of coordinates given. The resulting value will always be between 0.0 and 1.0. The noise value can be animated by moving through the noise space as demonstrated in the example above. The 2nd and 3rd dimension can also be interpreted as time.
The actual noise is structured similar to an audio signal, in respect to the function's use of frequencies. Similar to the concept of harmonics in physics, perlin noise is computed over several octaves which are added together for the final result.
Another way to adjust the character of the resulting sequence is the scale of the input coordinates. As the function works within an infinite space the value of the coordinates doesn't matter as such, only the distance between successive coordinates does (eg. when using noise() within a loop). As a general rule the smaller the difference between coordinates, the smoother the resulting noise sequence will be. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use.Examples
- noise
Detail 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.
Examples
- noise
Seed 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.
Examples
- norm
Normalizes a number from another range into a value between 0 and 1. Identical to map(value, low, high, 0, 1). Numbers outside of the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. (See the example above.)
Examples
- normal
Material Normal material for geometry is a material that is not affected by light. It is not reflective and is a placeholder material often used for debugging. Surfaces facing the X-axis, become red, those facing the Y-axis, become green and those facing the Z-axis, become blue. You can view all possible materials in this example.
Examples
- orbit
Control Allows movement around a 3D sketch using a mouse or trackpad. Left-clicking and dragging will rotate the camera position about the center of the sketch, right-clicking and dragging will pan the camera position without rotation, and using the mouse wheel (scrolling) will move the camera closer or further from the center of the sketch. This function can be called with parameters dictating sensitivity to mouse movement along the X and Y axes. Calling this function without parameters is equivalent to calling orbitControl(1,1). To reverse direction of movement in either axis, enter a negative number for sensitivity.
Examples
- ortho
Sets an orthographic projection for the camera in a 3D sketch and defines a box-shaped viewing frustum within which objects are seen. In this projection, all objects with the same dimension appear the same size, regardless of whether they are near or far from the camera. The parameters to this function specify the viewing frustum where left and right are the minimum and maximum x values, top and bottom are the minimum and maximum y values, and near and far are the minimum and maximum z values. If no parameters are given, the default is used: ortho(-width/2, width/2, -height/2, height/2).
Examples
- p5
The
p5()constructor enables you to activate "instance mode" instead of normal "global mode". This is an advanced topic. A short description and example is included below. Please see Dan Shiffman's Coding Train video tutorial or this tutorial page for more info.By default, all p5.js functions are in the global namespace (i.e. bound to the window object), meaning you can call them simply
ellipse(),fill(), etc. However, this might be inconvenient if you are mixing with other JS libraries (synchronously or asynchronously) or writing long programs of your own. p5.js currently supports a way around this problem called "instance mode". In instance mode, all p5 functions are bound up in a single variable instead of polluting your global namespace.Optionally, you can specify a default container for the canvas and any other elements to append to with a second argument. You can give the ID of an element in your html, or an html node itself.
Note that creating instances like this also allows you to have more than one p5 sketch on a single web page, as they will each be wrapped up with their own set up variables. Of course, you could also use iframes to have multiple sketches in global mode.
Examples
- perspective
Sets a perspective projection for the camera in a 3D sketch. This projection represents depth through foreshortening: objects that are close to the camera appear their actual size while those that are further away from the camera appear smaller. The parameters to this function define the viewing frustum (the truncated pyramid within which objects are seen by the camera) through vertical field of view, aspect ratio (usually width/height), and near and far clipping planes.
When called with no arguments, the defaults provided are equivalent to perspective(PI/3.0, width/height, eyeZ/10.0, eyeZ10.0), where eyeZ is equal to ((height/2.0) / tan(PI60.0/360.0));
Examples
- pixel
Density 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.
Examples
- plane
Draw a plane with given a width and height
Examples
- point
Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second param is the vertical value for the point. The color of the point is changed with the stroke() function. The size of the point can be changed with the strokeWeight() function.
Examples
- point
Light Creates a point light with a color and a light position
A maximum of 5 pointLight can be active at one time
Examples
- pop
The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)
push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), noFill(), noStroke(), stroke(), tint(), noTint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(), applyMatrix(), resetMatrix(), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed().
In WEBGL mode additional style settings are stored. These are controlled by the following functions: setCamera(), ambientLight(), directionalLight(), pointLight(), texture(), specularMaterial(), shininess(), normalMaterial() and shader().
Examples
- pow
Facilitates exponential expressions. The pow() function is an efficient way of multiplying numbers by themselves (or their reciprocals) in large quantities. For example, pow(3, 5) is equivalent to the expression 3 × 3 × 3 × 3 × 3 and pow(3, -5) is equivalent to 1 / 3 × 3 × 3 × 3 × 3. Maps to Math.pow().
Examples
The print() function writes to the console area of your browser. This function is often helpful for looking at the data a program is producing. This function creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+).
Note that calling print() without any arguments invokes the window.print() function which opens the browser's print dialog. To print a blank line to console you can write print('\n').
Examples
- push
The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information. The push() and pop() functions can be embedded to provide more control. (See the second example for a demonstration.)
push() stores information related to the current transformation state and style settings controlled by the following functions: fill(), noFill(), noStroke(), stroke(), tint(), noTint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(), applyMatrix(), resetMatrix(), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed().
In WEBGL mode additional style settings are stored. These are controlled by the following functions: setCamera(), ambientLight(), directionalLight(), pointLight(), texture(), specularMaterial(), shininess(), normalMaterial() and shader().
Examples
- quad
Draws a quad on the canvas. A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape. z-arguments only work when quad() is used in WEBGL mode.
Examples
- quadratic
Vertex Specifies vertex coordinates for quadratic Bezier curves. Each call to quadraticVertex() defines the position of one control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. The first time quadraticVertex() is used within a beginShape() call, it must be prefaced with a call to vertex() to set the first anchor point. For WebGL mode quadraticVertex() can be used in 2D as well as 3D mode. 2D mode expects 4 parameters, while 3D mode expects 6 parameters (including z coordinates).
This function must be used between beginShape() and endShape() and only when there is no MODE or POINTS parameter specified to beginShape().
Examples
- radians
Converts a degree measurement to its corresponding value in radians. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. This function does not take into account the current angleMode.
Examples
- random
Return a random floating-point number.
Takes either 0, 1 or 2 arguments.
If no argument is given, returns a random number from 0 up to (but not including) 1.
If one argument is given and it is a number, returns a random number from 0 up to (but not including) the number.
If one argument is given and it is an array, returns a random element from that array.
If two arguments are given, returns a random number from the first argument up to (but not including) the second argument.
Examples
- random
Gaussian 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.Examples
- random
Seed 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.
Examples
- rect
Draws a rectangle on the canvas. A rectangle is a four-sided closed shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted, may be changed with the rectMode() function.
The fifth, sixth, seventh and eighth parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list.
Examples
- rect
Mode Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are interpreted.
The default mode is CORNER, which interprets the first two parameters as the upper-left corner of the shape, while the third and fourth parameters are its width and height.
rectMode(CORNERS) interprets the first two parameters as the location of one of the corners, and the third and fourth parameters as the location of the diagonally opposite corner. Note, the rectangle is drawn between the coordinates, so it is not neccesary that the first corner be the upper left corner.
rectMode(CENTER) interprets the first two parameters as the shape's center point, while the third and fourth parameters are its width and height.
rectMode(RADIUS) also uses the first two parameters as the shape's center point, but uses the third and fourth parameters to specify half of the shape's width and height respectively.
The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language.
Examples
- red
Extracts the red value from a color or pixel array.
Examples
- redraw
Executes the code within draw() one time. This function allows the program to update the display window only when necessary, for example when an event registered by mousePressed() or keyPressed() occurs.
In structuring a program, it only makes sense to call redraw() within events such as mousePressed(). This is because redraw() does not run draw() immediately (it only sets a flag that indicates an update is needed).
The redraw() function does not work properly when called inside draw().To enable/disable animations, use loop() and noLoop().
In addition you can set the number of redraws per method call. Just add an integer as single parameter for the number of redraws.
Examples
- remove
Elements Removes all elements created by p5, except any canvas / graphics elements created by createCanvas or createGraphics. Event handlers are removed, and element is removed from the DOM.
Examples
- remove
Item Removes an item that was stored with storeItem()
Examples
- request
Pointer Lock The function requestPointerLock() locks the pointer to its current position and makes it invisible. Use movedX and movedY to get the difference the mouse was moved since the last call of draw. Note that not all browsers support this feature. This enables you to create experiences that aren't limited by the mouse moving out of the screen even if it is repeatedly moved into one direction. For example, a first person perspective experience.
Examples
- reset
Matrix Replaces the current matrix with the identity matrix.
Examples
- reset
Shader This function restores the default shaders in WEBGL mode. Code that runs after resetShader() will not be affected by previously defined shaders. Should be run after shader().
- resize
Canvas 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.
Examples
- reverse
Reverses the order of an array, maps to Array.reverse()
Examples
- rotate
Rotates a shape by the amount specified by the angle parameter. This function accounts for angleMode, so angles can be entered in either RADIANS or DEGREES.
Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). All 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().
Examples
- rotateX
Rotates a shape around X axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES.
Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All tranformations are reset when draw() begins again.
Examples
- rotateY
Rotates a shape around Y axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES.
Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All tranformations are reset when draw() begins again.
Examples
- rotateZ
Rotates a shape around Z axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES.
This method works in WEBGL mode only.
Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All tranformations are reset when draw() begins again.
Examples
- round
Calculates the integer closest to the n parameter. For example, round(133.8) returns the value 134. Maps to Math.round().
Examples
- sample
Rate Returns a number representing the sample rate, in samples per second, of all sound objects in this audio context. It is determined by the sampling rate of your operating system's sound card, and it is not currently possile to change. It is often 44100, or twice the range of human hearing.
- saturation
Extracts the saturation value from a color or pixel array.
Saturation is scaled differently in HSB and HSL. This function will return the HSB saturation when supplied with an HSB color object (or when supplied with a pixel array while the color mode is HSB), but will default to the HSL saturation otherwise.
Examples
- save
Saves a given element(image, text, json, csv, wav, or html) to the client's computer. The first parameter can be a pointer to element we want to save. The element can be one of p5.Element,an Array of Strings, an Array of JSON, a JSON object, a p5.Table , a p5.Image, or a p5.SoundFile (requires p5.sound). The second parameter is a filename (including extension).The third parameter is for options specific to this type of object. This method will save a file that fits the given parameters. If it is called without specifying an element, by default it will save the whole canvas as an image file. You can optionally specify a filename as the first parameter in such a case. Note that it is not recommended to call this method within draw, as it will open a new save dialog on every render.
Examples
- save
Canvas Save the current canvas as an image. The browser will either save the file immediately, or prompt the user with a dialogue window.
Examples
- save
Frames Capture a sequence of frames that can be used to create a movie. Accepts a callback. For example, you may wish to send the frames to a server where they can be stored or converted into a movie. If no callback is provided, the browser will pop up save dialogues in an attempt to download all of the images that have just been created. With the callback provided the image data isn't saved by default but instead passed as an argument to the callback function as an array of objects, with the size of array equal to the total number of frames.
Note that saveFrames() will only save the first 15 frames of an animation. To export longer animations, you might look into a library like ccapture.js.
Examples
- saveJSON
Writes the contents of an Array or a JSON object to a .json file. The file saving process and location of the saved file will vary between web browsers.
Examples
- save
Sound Save a p5.SoundFile as a .wav file. The browser will prompt the user to download the file to their device. For uploading audio to a server, use
p5.SoundFile.saveBlob.Parameters
- save
Strings 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.
Examples
- save
Table 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.
Examples
- scale
Increases or decreases the size of a shape by expanding or contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call scale(2.0) increases the dimension of a shape by 200%.
Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0). If scale() is called within draw(), the transformation is reset when the loop begins again.
Using this function with the z parameter is only available in WEBGL mode. This function can be further controlled with push() and pop().
Examples
- second
p5.js communicates with the clock on your computer. The second() function returns the current second as a value from 0 - 59.
Examples
- select
Searches the page for the first element that matches the given CSS selector string (can be an ID, class, tag name or a combination) and returns it as a p5.Element. The DOM node itself can be accessed with .elt. Returns null if none found. You can also specify a container to search within.
Examples
- select
All Searches the page for elements that match the given CSS selector string (can be an ID a class, tag name or a combination) and returns them as p5.Elements in an array. The DOM node itself can be accessed with .elt. Returns an empty array if none found. You can also specify a container to search within.
Examples
- set
Changes the color of any pixel, or writes an image directly to the display window. The x and y parameters specify the pixel to change and the c parameter specifies the color value. This can be a p5.Color object, or [R, G, B, A] pixel array. It can also be a single grayscale value. When setting an image, the x and y parameters define the coordinates for the upper-left corner of the image, regardless of the current imageMode().
After using set(), you must call updatePixels() for your changes to appear. This should be called once all pixels have been set, and must be called before calling .get() or drawing the image.
Setting the color of a single pixel with set(x, y) is easy, but not as fast as putting the data directly into pixels[]. Setting the pixels[] values directly may be complicated when working with a retina display, but will perform better when lots of pixels need to be set directly on every loop. See the reference for pixels[] for more information.
Examples
- setAttributes
Set attributes for the WebGL Drawing context. This is a way of adjusting how the WebGL renderer works to fine-tune the display and performance.
Note that this will reinitialize the drawing context if called after the WebGL canvas is made.
If an object is passed as the parameter, all attributes not declared in the object will be set to defaults.
The available attributes are:
alpha - indicates if the canvas contains an alpha buffer default is truedepth - indicates whether the drawing buffer has a depth buffer of at least 16 bits - default is true
stencil - indicates whether the drawing buffer has a stencil buffer of at least 8 bits
antialias - indicates whether or not to perform anti-aliasing default is false (true in Safari)
premultipliedAlpha - indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha default is false
preserveDrawingBuffer - if true the buffers will not be cleared and and will preserve their values until cleared or overwritten by author (note that p5 clears automatically on draw loop) default is true
perPixelLighting - if true, per-pixel lighting will be used in the lighting shader otherwise per-vertex lighting is used. default is true.
Examples
- setBPM
Set the global tempo, in beats per minute, for all p5.Parts. This method will impact all active p5.Parts.
Parameters
- setCamera
Sets rendererGL's current camera to a p5.Camera object. Allows switching between multiple cameras.
Examples
- setMove
Threshold The setMoveThreshold() function is used to set the movement threshold for the deviceMoved() function. The default threshold is set to 0.5.
Examples
- setShake
Threshold The setShakeThreshold() function is used to set the movement threshold for the deviceShaken() function. The default threshold is set to 30.
Examples
- shader
The shader() function lets the user provide a custom shader to fill in shapes in WEBGL mode. Users can create their own shaders by loading vertex and fragment shaders with loadShader().
Examples
- shearX
Shears a shape around the x-axis by the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.
Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI). If shearX() is called within the draw(), the transformation is reset when the loop begins again.
Technically, shearX() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions.
Examples
- shearY
Shears a shape around the y-axis the amount specified by the angle parameter. Angles should be specified in the current angleMode. Objects are always sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction.
Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If shearY() is called within the draw(), the transformation is reset when the loop begins again.
Technically, shearY() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() functions.
Examples
- shininess
Sets the amount of gloss in the surface of shapes. Used in combination with specularMaterial() in setting the material properties of shapes. The default and minimum value is 1.
Examples
- shorten
Decreases an array by one element and returns the shortened array, maps to Array.pop().
Examples
- shuffle
Randomizes the order of the elements of an array. Implements Fisher-Yates Shuffle Algorithm.
Examples
- sin
Calculates the sine of an angle. This function takes into account the current angleMode. Values are returned in the range -1 to 1.
Examples
- smooth
Draws all geometry with smooth (anti-aliased) edges. smooth() will also improve image quality of resized images. Note that smooth() is active by default in 2D mode; noSmooth() can be used to disable smoothing of geometry, images, and fonts. In 3D mode, noSmooth() is enabled by default, so it is necessary to call smooth() if you would like smooth (antialiased) edges on your geometry.
Examples
- sort
Sorts an array of numbers from smallest to largest, or puts an array of words in alphabetical order. The original array is not modified; a re-ordered array is returned. The count parameter states the number of elements to sort. For example, if there are 12 elements in an array and count is set to 5, only the first 5 elements in the array will be sorted.
Examples
- sound
Formats List the SoundFile formats that you will include. LoadSound will search your directory for these extensions, and will pick a format that is compatable with the client's web browser. Here is a free online file converter.
Examples
- specular
Color Set's the color of the specular highlight when using a specular material and specular light.
This method can be combined with specularMaterial() and shininess() functions to set specular highlights. The default color is white, ie (255, 255, 255), which is used if this method is not called before specularMaterial(). If this method is called without specularMaterial(), There will be no effect.
Note: specularColor is equivalent to the processing function lightSpecular.
Examples
- specular
Material Specular material for geometry with a given color. Specular material is a shiny reflective material. Like ambient material it also defines the color the object reflects under ambient lighting. For example, if the specular material of an object is pure red, but the ambient lighting only contains green, the object will not reflect any light. For all other types of light like point and directional light, a specular material will reflect the color of the light source to the viewer. Here's an example containing all possible materials.
Overloads
- sphere
Draw a sphere with given radius.
DetailX and detailY determines the number of subdivisions in the x-dimension and the y-dimension of a sphere. More subdivisions make the sphere seem smoother. The recommended maximum values are both 24. Using a value greater than 24 may cause a warning or slow down the browser.
Examples
- splice
Inserts a value or an array of values into an existing array. The first parameter specifies the initial array to be modified, and the second parameter defines the data to be inserted. The third parameter is an index value which specifies the array position from which to insert data. (Remember that array index numbering starts at zero, so the first position is 0, the second position is 1, and so on.)
Examples
- split
The split() function maps to String.split(), it breaks a String into pieces using a character or string as the delimiter. The delim parameter specifies the character or characters that mark the boundaries between each piece. A String[] array is returned that contains each of the pieces.
The splitTokens() function works in a similar fashion, except that it splits using a range of characters instead of a specific character or sequence.
Examples
- split
Tokens 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.
Examples
- spot
Light Creates a spotlight with a given color, position, direction of light, angle and concentration. Here, angle refers to the opening or aperture of the cone of the spotlight, and concentration is used to focus the light towards the center. Both angle and concentration are optional, but if you want to provide concentration, you will also have to specify the angle.
A maximum of 5 spotLight can be active at one time
Examples
- sq
Squares a number (multiplies a number by itself). The result is always a positive number, as multiplying two negative numbers always yields a positive result. For example, -1 * -1 = 1.
Examples
- sqrt
Calculates the square root of a number. The square root of a number is always positive, even though there may be a valid negative root. The square root s of number a is such that s*s = a. It is the opposite of squaring. Maps to Math.sqrt().
Examples
- square
Draws a square to the screen. A square is a four-sided shape with every angle at ninety degrees, and equal side size. This function is a special case of the rect() function, where the width and height are the same, and the parameter is called "s" for side size. By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square. The way these parameters are interpreted, may be changed with the rectMode() function.
The fourth, fifth, sixth and seventh parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list.
Examples
- store
Item Stores a value in local storage under the key name. Local storage is saved in the browser and persists between browsing sessions and page reloads. The key can be the name of the variable but doesn't have to be. To retrieve stored items see getItem. Sensitive data such as passwords or personal information should not be stored in local storage.
Examples
- str
Converts a boolean, string or number to its string representation. When an array of values is passed in, then an array of strings of the same length is returned.
Examples
- stroke
Sets the color used to draw lines and borders around shapes. This color is either specified in terms of the RGB or HSB color depending on the current colorMode() (the default color space is RGB, with each value in the range from 0 to 255). The alpha range by default is also 0 to 255.
If a single string argument is provided, RGB, RGBA and Hex CSS color strings and all named color strings are supported. In this case, an alpha number value as a second argument is not supported, the RGBA form should be used.
A p5 Color object can also be provided to set the stroke color.
Examples
- stroke
Cap Sets the style for rendering line endings. These ends are either rounded, squared or extended, each of which specified with the corresponding parameters: ROUND, SQUARE and PROJECT. The default cap is ROUND.
The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language.
Examples
- stroke
Join Sets the style of the joints which connect line segments. These joints are either mitered, beveled or rounded and specified with the corresponding parameters MITER, BEVEL and ROUND. The default joint is MITER.
The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language.
Examples
- stroke
Weight Sets the width of the stroke used for lines, points and the border around shapes. All widths are set in units of pixels.
Examples
- subset
Extracts an array of elements from an existing array. The list parameter defines the array from which the elements will be copied, and the start and count parameters specify which elements to extract. If no count is given, elements will be extracted from the start to the end of the array. When specifying the start, remember that the first array element is 0. This function does not change the source array.
Examples
- tan
Calculates the tangent of an angle. This function takes into account the current angleMode. Values are returned in the range of all real numbers.
Examples
- text
Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is set with the textFont() function and a default size will be used unless a font is set with textSize(). Change the color of the text with the fill() function. Change the outline of the text with the stroke() and strokeWeight() functions.
The text displays in relation to the textAlign() function, which gives the option to draw to the left, right, and center of the coordinates.
The x2 and y2 parameters define a rectangular area to display within and may only be used with string data. When these parameters are specified, they are interpreted based on the current rectMode() setting. Text that does not fit completely within the rectangle specified will not be drawn to the screen. If x2 and y2 are not specified, the baseline alignment is the default, which means that the text will be drawn upwards from x and y.
WEBGL: Only opentype/truetype fonts are supported. You must load a font using the loadFont() method (see the example above). stroke() currently has no effect in webgl mode.
Examples
- text
Align 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.
Examples
- text
Ascent Returns the ascent of the current font at its current size. The ascent represents the distance, in pixels, of the tallest character above the baseline.
Examples
- text
Descent Returns the descent of the current font at its current size. The descent represents the distance, in pixels, of the character with the longest descender below the baseline.
Examples
- text
Font Sets the current font that will be drawn with the text() function.
WEBGL: Only fonts loaded via loadFont() are supported.
Examples
- text
Leading Sets/gets the spacing, in pixels, between lines of text. This setting will be used in all subsequent calls to the text() function.
Examples
- text
Size 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.
Examples
- text
Style Sets/gets the style of the text for system fonts to NORMAL, ITALIC, BOLD or BOLDITALIC. Note: this may be is overridden by CSS styling. For non-system fonts (opentype, truetype, etc.) please load styled fonts instead.
Examples
- text
Width Calculates and returns the width of any character or text string.
Examples
- texture
Texture for geometry. You can view other possible materials in this example.
Examples
- texture
Mode Sets the coordinate space for texture mapping. The default mode is IMAGE which refers to the actual coordinates of the image. NORMAL refers to a normalized space of values ranging from 0 to 1. This function only works in WEBGL mode.
With IMAGE, if an image is 100 x 200 pixels, mapping the image onto the entire size of a quad would require the points (0,0) (100, 0) (100,200) (0,200). The same mapping in NORMAL is (0,0) (1,0) (1,1) (0,1).
Examples
- texture
Wrap Sets the global texture wrapping mode. This controls how textures behave when their uv's go outside of the 0 - 1 range. There are three options: CLAMP, REPEAT, and MIRROR.
CLAMP causes the pixels at the edge of the texture to extend to the bounds REPEAT causes the texture to tile repeatedly until reaching the bounds MIRROR works similarly to REPEAT but it flips the texture with every new tile
REPEAT & MIRROR are only available if the texture is a power of two size (128, 256, 512, 1024, etc.).
This method will affect all textures in your sketch until a subsequent textureWrap call is made.
If only one argument is provided, it will be applied to both the horizontal and vertical axes.
Examples
- tint
Sets the fill value for displaying images. Images can be tinted to specified colors or made transparent by including an alpha value.
To apply transparency to an image without affecting its color, use white as the tint color and specify an alpha value. For instance, tint(255, 128) will make an image 50% transparent (assuming the default alpha range of 0-255, which can be changed with colorMode()).
The value for the gray parameter must be less than or equal to the current maximum value as specified by colorMode(). The default maximum value is 255.
Examples
- torus
Draw a torus with given radius and tube radius
DetailX and detailY determine the number of subdivisions in the x-dimension and the y-dimension of a torus. More subdivisions make the torus appear to be smoother. The default and maximum values for detailX and detailY are 24 and 16, respectively. Setting them to relatively small values like 4 and 6 allows you to create new shapes other than a torus.
Examples
- touch
Ended 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.Examples
- touch
Moved 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.Examples
- touch
Started 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.Examples
- translate
Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation.
Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). If translate() is called within draw(), the transformation is reset when the loop begins again. This function can be further controlled by using push() and pop().
Examples
- triangle
Draws a triangle to the canvas. A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point.
Examples
- trim
Removes whitespace characters from the beginning and end of a String. In addition to standard whitespace characters such as space, carriage return, and tab, this function also removes the Unicode "nbsp" character.
Examples
- unchar
Converts a single-character string to its corresponding integer representation. When an array of single-character string values is passed in, then an array of integers of the same length is returned.
Examples
- unhex
Converts a string representation of a hexadecimal number to its equivalent integer value. When an array of strings in hexadecimal notation is passed in, an array of integers of the same length is returned.
Examples
- update
Pixels Updates the display window with the data in the pixels[] array. Use in conjunction with loadPixels(). If you're only reading pixels from the array, there's no need to call updatePixels() — updating is only necessary to apply changes. updatePixels() should be called anytime the pixels array is manipulated or set() is called, and only changes made with set() or direct changes to pixels[] will occur.
Examples
- user
Start Audio It is not only a good practice to give users control over starting audio. This policy is enforced by many web browsers, including iOS and Google Chrome, which create the Web Audio API's Audio Context in a suspended state.
- vertex
All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons. It is used exclusively within the beginShape() and endShape() functions.
Examples
- window
Resized 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.
Examples
- year
p5.js communicates with the clock on your computer. The year() function returns the current year as an integer (2014, 2015, 2016, etc).
Examples