p5.js Touch touchStarted() Last Updated : 18 Aug, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report The touchStarted() function in p5.js is called once after every time a touch is registered. If touchStarted() function is not defined, the mousePressed() function will be called instead if it is defined. Syntax: touchStarted([Event]) Below program illustrates the touchStarted() function in p5.js: Example-1: javascript let valueX; let valueY; function setup() { // Create Canvas of size 500*500 createCanvas(500, 500); } function draw() { // set background color background(200); fill('green'); // set text and text size textSize(25); text('Touch to change color', 30, 30); // fill color according to touchStarted() fill(valueX, 255 - valueY, 255 - valueX); // draw ellipse ellipse(mouseX, mouseY, 115, 115); } function touchStarted() { valueX = mouseX % 255; valueY = mouseY % 255; } Output: Example-2: javascript let valueX; let valueY; function setup() { // Create Canvas of size 500*500 createCanvas(500, 500); } function draw() { // set background color background(200); fill('green'); // set text and text size textSize(25); text('Touch to change color', 30, 30); // fill color according to mouseMoved() fill(valueX, 255 - valueY, 255 - valueX); // draw rectangle rect(mouseX, mouseY, 115, 115); fill(valueY, 255 - valueX, 255 - valueX); rect(mouseX, mouseY + 115, 115, 115); fill(255 - valueY, 255 - valueX, 255 - valueY); rect(mouseX - 115, mouseY, 115, 115); fill(255 - valueY, 255 - valueY, 255 - valueY); rect(mouseX - 115, mouseY + 115, 115, 115); } function touchStarted() { valueX = mouseX % 255; valueY = mouseY % 255; } Output: Reference: https://p5js.org/reference/#/p5/touchStarted Comment More infoAdvertise with us Next Article p5.js Touch touchEnded() S sarthak_ishu11 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-p5.js Similar Reads p5.js p5.js is a JavaScript library for creative coding, with attention to making code accessible and inclusive for artists, designers, educators, beginners, and anyone else. It is a free and open-source library i.e. it can be accessible to everyone. In this p5.js tutorial, we will learn the essential kno 2 min read p5.js Introduction p5.js is a JavaScript library used for creative coding. It is based on Processing which is a creative coding environment. The main focus of processing is to make it easy as possible for beginners to learn how to program interactive, graphical applications, to make a programming language more user-fr 2 min read p5.js Environmentp5.js print() functionThe print() function in p5.js writes the content on console area of the web browser. It is helpful for looking at the data a program is producing which helps in debugging the code. The elements can be separated by using quotes ("") and joined with the addition operator (+). Use print('\n') to displa 1 min read p5.js cursor() FunctionThe cursor() function in p5.js is used to set the cursor to a predefined symbol or an image or it makes visible if already hidden. 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. Syntax: cu 1 min read p5.js frameRate() FunctionThe frameRate() function in p5.js is used to specify the number of frames to be displayed every second. Calling frameRate() with no arguments returns the current framerate. The draw function must run at least once before it will return a value. This function is same as getFrameRate() function. Synta 1 min read p5.js noCursor() functionThe noCursor() function in p5.js is used to hide the cursor from view. Syntax noCursor() Parameters: This function does not accept any parameter. Below program illustrates the noCursor() function in p5.js: Example-1: javascript function setup() { createCanvas(1000, 400); // Set text size to 40px tex 1 min read p5.js displayWidth VariableThe displayWidth variable in p5.js is used to store the width of the screen display of the device and it is according to The default pixelDensity. This variable is used to run a full-screen program on any display size. Multiply this by pixelDensity to return actual screen size. Syntax: displayWidth( 1 min read p5.js displayHeight VariableThe displayHeight variable in p5.js is used to store the height of the screen display of the device. The value of height is stored according to the default pixelDensity. This variable is used to run a full-screen program on any display size. Multiply it with pixelDensity to return the actual screen 1 min read p5.js windowWidthThe windowWidth variable in p5.js is a system variable that is used to store the width of the inner window and it maps to window.innerWidth. Syntax: windowWidth Parameters: This function does not accept any parameter. Below program illustrates the windowWidth variable in p5.js: Example-1: javascript 1 min read p5.js windowHeightThe windowHeight in p5.js is a system variable that is used to store the height of the inner window and it maps to window.innerHeight. Syntax windowHeight Parameters: This function does not accept any parameter. Below program illustrates the windowHeight variable in p5.js: Example-1: javascript func 1 min read p5.js windowResized() functionThe windowResized() function in p5.js is called once every time the browser window is resized. It adjusts it height and width automatically whenever the size of the window is increased. This function is invoked automatically as soon as window is resized and then create a new canvas corresponding to 1 min read p5.js width variableThe width variable in p5.js is a system variable that stores the width of the drawing canvas. This value is automatically initialised by the first parameter of the createCanvas() function as soon as the code is executed. Syntax: width Parameters: This function does not accept any parameter. Below pr 1 min read p5.js height variableThe height variable in p5.js is a system variable which stores the height of the drawing canvas. It sets the second parameter of createCanvas() function. Syntax: height Below programs illustrate the height variable in p5.js: Example 1: This example uses height variable to display the height of canva 1 min read p5.js fullscreen() functionThe fullscreen() function in p5.js is used to get the current fullscreen state of the user's browser window. If an 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 restr 1 min read p5.js pixelDensity() functionThe pixelDensity() function in p5.js is used to set the pixel scaling for high pixel density displays. The default value of pixel density is set to match display density. The pixelDensity(1) is used to turn off display density. The pixelDensity() function without arguments returns the current pixel 2 min read p5.js displayDensity() FunctionThe displayDensity() function in p5.js is used to return the pixel density of the current display the sketch. Syntax: pixelDensity(density) Parameters: This function accepts single parameter density which stores the display density. Below program illustrates the displayDensity() function in p5.js: E 1 min read p5.js Environment Complete ReferenceFunction Description print()It writes the content on console area of the web browser. cursor()It sets the cursor to a predefined symbol or an image. frameRate()It specifies the number of frames to be displayed every second. noCursor()It is used to hide the cursor from view. displayWidthIt stores the 1 min read p5.js Colorp5.js alpha() functionThe alpha() function in p5.js is used to extract the alpha value from a color or pixel array. Syntax: alpha(c) Parameters: The function accepts single parameter as mentioned above and described below: c : This parameter stores the p5.Color object, color components, or CSS color. Below program illust 1 min read p5.js blue() functionThe blue() function in p5.js is used to extract the blue value from a color or pixel array. Syntax: blue(c) Parameters: This function accepts single parameter c which stores the p5.Color object, color components, or CSS color. Below programs illustrate the blue() function in p5.js: Example 1: This e 2 min read p5.js brightness() functionThe brightness() function in p5.js is used to extract the HSB brightness value from a color or pixel array. Syntax: brightness(c) Parameters: This function accepts single parameter c which stores the p5.Color object, color components, or CSS color. Below programs illustrate the brightness() function 2 min read p5.js color() FunctionThe color() function is used to create color and store it into variables. The parameters of color function are RGB or HSB value depending on the current colorMode() function. The default mode of color() function is RGB value from 0 to 255. Therefore, the function color(255, 204, 0) will return a bri 2 min read p5.js green() functionThe green() function in p5.js is used to extract the green value from a color or pixel array. Syntax:green(c)Parameters:This function accepts single parameter c which stores the p5.Color object, color components, or CSS color. Example 1: This example uses green() function to extract the green value 2 min read p5.js hue() functionThe hue() function in p5.js is used to extract the HSB and HSL hue value from a color or pixel array. Syntax: hue(c) Parameters: This function accepts single parameter c which stores the p5.Color object, color components, or CSS color. Below programs illustrate the hue() function in p5.js: Example 1 2 min read p5.js lerpColor() FunctionThe lerpColor() function is used to interpolate two colors to find a third color between them. The amount of interpolation between the two colors can be set using the amt parameters. The color interpolation depends on the current color mode. Syntax: lerpColor(c1, c2, amt) Parameters: This function a 2 min read p5.js lightness() functionThe lightness() function in p5.js is used to extract the HSL lightness value from a color or pixel array. Syntax: lightness(c) Parameters: This function accepts single parameter c which stores the p5.Color object, color components, or CSS color. Below programs illustrate the lightness() function in 2 min read p5.js red() functionThe red() function in p5.js is used to extract the red value from a color or pixel array. Syntax: red(c) Parameters: This function accepts single parameter c which stores the p5.Color object, color components, or CSS color. Below programs illustrates the red() function in p5.js: Example 1: This exam 2 min read p5.js saturation() functionThe saturation() function in p5.js is used to extract the HSL and HSB saturation value from a color or pixel array. Syntax: saturation(c) Parameters: ThIS function accepts single parameter c which stores the p5.Color object, color components, or CSS color. Below programs illustrate the saturation() 2 min read p5.js background() functionThe background() function in p5.js is used to set the color used for the background of the p5.js canvas. The default background is transparent. The color accepted by this function can be of the RGB, HSB, or HSL color depending on the current colorMode. Syntax: background(c) Parameters: This function 1 min read p5.js clear() functionThe clear() function in p5.js is used to clear the pixels within a buffer. This function only clears the canvas. This function clears everything to make all of the pixels 100% transparent. It can be used to reset the drawing canvas. Syntax: clear() Parameters: This function does not accept any param 1 min read p5.js fill() Functionp5.js fill() function is used to fill the color of the shapes. This function supports all types of color objects. For example RGB, RGBA, Hex CSS color, and all named color strings. The color object can also be set as a string in terms of RGB, RGBA, Hex CSS color, or a named color string. Syntax: fil 2 min read p5.js noFill() FunctionThe noFill() function is used to disable the filling geometry. If noStroke() and noFill() function are called simultaneously then nothing will be drawn on the screen. Syntax: noFill() Parameters: This function does not accept any parameter. Below examples illustrate the noFill() function in p5.js: E 1 min read p5.js Color Complete ReferenceCreate color and store it into variables of color datatype. The parameters of color are RGB or HSB value depending on the current colorMode() function. Function Description alpha()It is used to extract the alpha value from a color or pixel array. blue()It is used to extract the blue value from a col 2 min read p5.js Shapep5.js arc() FunctionThe arc() function is an inbuilt function in p5.js which is used to draw an arc. This function accepts seven parameters which are x-ordinate, y-ordinate, width, height, start, stop and an optional parameter mode. Syntax: arc(x, y, w, h, start, stop, mode) Parameters: This function accepts seven para 2 min read p5.js ellipse() FunctionThe ellipse() function is an inbuilt function in p5.js which is used to draw an ellipse. Syntax: ellipse(x, y, w, h) ellipse(x, y, w, h, detail) Parameters: This function accepts five parameters as mentioned above and described below: x: This parameter takes the x-coordinate of the ellipse. y: This 1 min read p5.js circle() FunctionThe circle() function is used to draw the circle on the screen. A circle is the closed shape. A circle can be created by using the center and radius of the circle. Syntax: circle(x, y, d) Parameters: x: It is used to set the x-coordinate of the center of the circle. y: It is used to set the y-coordi 1 min read p5.js line() FunctionThe line() function is an inbuilt function in p5.js which is used to draw a line. In order to change the color of the line stroke() function is used and in order to change the width of the line strokeWeight() function is used. Syntax: line(x1, y1, x2, y2) or line(x1, y1, z1, x2, y2, z2) Parameters: 2 min read p5.js point() FunctionThe point() function is an inbuilt function in p5.js which is used to draw the point in a given coordinate position. Syntax: point( x, y, [z]) Parameters: This function accept three parameters which are described below x: It is used to set the x-coordinate of point. y: It is used to set the y-coordi 1 min read p5.js ellipseMode() FunctionThe ellipseMode() function is an inbuilt function in p5.js which is used to set the location where the ellipses are drawn by changing the way. The default mode of this function is ellipseMode(CENTER). Syntax: ellipseMode( mode ) Parameters: This function accepts single parameter as mentioned above a 1 min read p5.js rectMode() FunctionThe rectMode() function in p5.js is used to change the way in which the parameters given to the rect() function are interpreted. This modifies the location from where the rectangle is drawn. This function can be given four modes: CORNER: This mode interprets the first two parameters as the upper-lef 3 min read p5.js smooth() FunctionThe smooth() function is an inbuilt function in p5.js library. This function is used to get smooth Amplitude analysis by averaging with the last analysis frame by default it is off. Syntax: smooth(channel) Note: All the sound-related functions only work when the sound library is included in the head 1 min read p5.js strokeCap() FunctionThe strokeCap() function in p5.js is used to set the style of line endings. The ends of line can be rounded, squared or extended based on their parameters SQUARE, PROJECT, and ROUND. The default value is ROUND. Syntax: strokeCap( cap ) Parameters: This function accepts single parameter cap which hol 1 min read p5.js bezier() functionThe bezier() function in p5.js is used to draw cubic Bezier curve on the screen. These curves are defined by a series of anchor and control points. Syntax: bezier( x1, y1, x2, y2, x3, y3, x4, y4 ) or bezier( x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4 ) Parameters: The function accepts twelve par 2 min read p5.js bezierDetail() functionThe bezierDetail() function in p5.js is used to set the resolution at which Beziers display. In order to use it we must use WEBGL render parameter. Syntax: bezierDetail( detail ) Parameters: The function accepts single parameter detail which stores the resolution of the curves. Below programs illust 1 min read p5.js beginContour() FunctionThe beginContour() function in p5.js is used to create negative shapes in other shapes, that is, it can be used to remove a portion of a shape with the given vertices. This function starts the recording of the shape that has to be removed. It is used with the endContour() function that stops the rec 2 min read p5.js plane() functionThe plane() function in p5.js is used to draw a plane according to the given height and width. Syntax: plane( width, height, detailX, detailY ) Parameters: The function accepts four parameters as mentioned above and described below: width: This parameter holds the width of the plane to drawn. height 1 min read p5.js loadModel() FunctionThe loadModel() function is used to load a 3d model from file, and return it as a p5.Geometry Object. This model can be loaded with the formats .obj or .stl. The OBJ and STL loaded files do not have any sense of scale, hence it may be required to use the normalized parameter so that the model is aut 2 min read p5.js Shape Complete ReferenceThe p5.js Shape used to draw different types of shapes in 2D and 3D models. All the functions are mentioned below. 2D Primitives Description arc()It is used to draw an arc. ellipse()It is used to draw an ellipse. circle()It is used to draw the circle on the screen. line()It is used to draw a line. p 3 min read p5.js Constants and Structurep5.js Constants HALF_PIThe HALF_PI is a mathematical constant and its value is 1.57079632679489661923. The HALF_PI is the half ratio of the circumference of a circle to its diameter. Syntax: HALF_PI Below program illustrates the usage of HALF_PI in p5.js: Example: javascript function setup() { // Create Canvas of size 300 1 min read p5.js Constants PIThe PI is a mathematical constant with the value 3.14159265358979323846. It is the circumference's ratio of a circle to its diameter. Syntax PI Below program illustrates the usage of PI in p5.js: Example: javascript function setup() { //create Canvas of size 880*200 createCanvas(880, 300); } functio 1 min read p5.js Constants QUARTER_PIThe QUARTER_PI is a mathematical constant with the value 0.7853982. It is one quarter the ratio of the circumference of a circle to its diameter. Syntax: QUARTER_PI Below program illustrates the QUARTER_PI constant in p5.js: Example: This example describes the QUARTER_PI constant. javascript functio 1 min read p5.js Constants TAUThe TAU is a mathematical constant and it is the alias of TWO_PI. The value of TAU is 6.28318530717958647693. It is twice the ratio of the circumference of a circle to its diameter. Syntax: TAU Below program illustrates the usage of TAU in p5.js: Example: This example illustrates the TAU constant. j 1 min read p5.js Constants TWO_PIThe TWO_PI is a mathematical constant with the value 6.28318530717958647693. It is twice the ratio of the circumference of a circle to its diameter. Syntax: TWO_PI Below program illustrates the usage of TWO_PI in p5.js: Example: javascript function setup() { // Create Canvas of size 880*300 createCa 1 min read p5.js degrees() functionThe degrees() function in p5.js is used to convert a given radian measurement value to its corresponding value in degrees. Syntax: degrees( radian ) Parameters: This function accepts single parameter radian which is to be converted into degrees. Return Value: It returns the converted angle into degr 2 min read p5.js radians() FunctionThe radians() function in p5.js is used to convert a given degree measurement value to its corresponding value in radians. Syntax: radians( degrees ) Parameters: This function accepts single parameter degrees which is to be converted into radians. Return Value: It returns the converted radians value 2 min read p5.js setup() FunctionThe setup() function runs when the program starts. It is used to set the initial environment properties such as text-color, screen size, background-color and load the media file such as images and fonts. The program contains only one setup() function. The setup() function can not be called again aft 2 min read p5.js draw() FunctionThe draw() function is called after setup() function. The draw() function is used to executes the code inside the block until the program is stopped or noLoop() is called. If the program does not contain noLoop() function within setup() function then draw() function will still be executed once befor 1 min read p5.js remove() FunctionThe remove() function is an inbuilt function which is used to remove the element and deregister all listeners. This function requires p5.dom library. So add the following line in the head section of the index.html file. javascript <script language="javascript" type="text/javascript 2 min read p5.js disableFriendlyErrors PropertyThe friendly error system (FES) is used to warn the user when the non-minified p5.js file (and not p5.min.js) is used. These friendly errors are not critical in nature, however having them in the console is disturbing. These can be turned off with the help of the disableFriendlyErrors property. This 2 min read p5.js noLoop() FunctionThe noLoop() function is used to stop the program after executing the draw() function. The loop() function runs the draw() function again and again. If noLoop() function is used in setup() function then it should be the last line inside the block. If noLoop() function is used then it is not possible 1 min read p5.js loop() FunctionThe loop() function is used to call draw() function continuously. The loop() function can be stopped using noLoop() function. Syntax: loop() Below example illustrates the loop() function in p5.js: Example: javascript let l = 0; function setup() { // Create canvas of given size createCanvas(500, 300) 1 min read p5.js isLooping() FunctionThe isLooping() function is an inbuilt function of p5.sound library that verifies that the loop() function performed successfully, if that loop was successful then this function will return true else false. That means it returns a Boolean value.Syntax: isLooping() Note: All the sound-related functi 2 min read p5.js Constants and Structure Complete ReferenceLike a variable created with let, const keyword to define a new variable. The difference in const variable declaration than others is that it cannot be reassigned. And the structure are the inbuilt function used while execution. The methods are mentioned below. Constants Description HALF_PIIt is a m 1 min read p5.js DOM and Renderingp5.js select() FunctionThe select() function is used to search an element in the page with the given id, class or tag name and return it as a p5.element. It has a syntax similar to the CSS selector. An optional parameter is available that can be used to search within a given element. This method only returns the first ele 2 min read p5.js selectAll() FunctionThe selectAll() function is used to search for elements with the given id, class or tag name and return it as a p5.Element array. It has a syntax similar to the CSS selector. An optional parameter is available that can be used to search within a given element. This method returns all the elements th 2 min read p5.js removeElements() FunctionThe removeElements() function is used to remove all the elements currently present that are created by p5, except those that are created using the createCanvas() function or createGraphics() function. The elements are removed from the DOM along with their event handlers. Syntax: removeElements() Par 1 min read p5.js changed() FunctionThe changed() function is fired whenever the value of an element gets changed. It can be used to detect changes in checkbox elements or select elements. It can also be used to attach an event listener to an element. Syntax: changed(fxn) Parameters: This function accepts a single parameter as mention 2 min read p5.js input() FunctionThe input() function is invoked whenever user input is detected on the element. It can be used to detect keystrokes or changes in the values of a slider. It can also be used to attach an event listener to an element. Syntax: input(fxn) Parameters: This function accepts a single parameter as mentione 1 min read p5.js createSpan() FunctionThe createSpan() function is used to create a span element in the DOM with the given optional inner html. Syntax: createSpan([html]) Parameters: This function accepts a single parameter as mentioned above and described below: html: It is a string with the innerHTML of the span element. It 1 min read p5.js createSlider() FunctionThe createSlider() function in p5.js is used to create a slider (input) element in the DOM (Document Object Model). This function includes the p5.dom library. Add the following syntax in the head section. html <script src= "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.mi 1 min read p5.js createButton() FunctionThe createButton() function is used to create a button element in the DOM (Document Object Model). The .size() function is used to set the size of button element. The .mousePressed() function is used to specify the behavior of mouse button when pressing it. Note: This function requires the p5.dom li 2 min read p5.js createCheckbox() FunctionThe createCheckbox() function in p5.js is used to create a checkbox element in the DOM (Document Object Model). This function includes the p5.dom library. Add the following syntax in the head section. html <script src= "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js" 1 min read p5.js createSelect() FunctionThe createSelect() function in p5.js is used to create a dropdown menu element in the DOM (Document Object Model) for taking input. The .value() method is used to get the selected option. This function includes the p5.dom library. Add the following syntax in the head section. Note: This function req 1 min read p5.js createRadio() FunctionThe createRadio() function is used to create a radio-button element in the DOM (Document Object Model). The .option() method is used to set the options for the radio. This function requires p5.dom library. So add the following line in the head section of the index.html file. html <script src= "h 1 min read p5.js resizeCanvas() FunctionThe resizeCanvas() function is used to resize the canvas to the height and width given as parameters. The canvas is immediately redrawn after the resize takes place unless the optional 'noRedraw' parameter is set to true. Syntax: resizeCanvas(w, h, [noRedraw]) Parameters: This function accepts three 2 min read p5.js noCanvas() FunctionThe noCanvas() function in p5.js is used to remove the default canvas that is created by p5.js. This can be used for sketches that don't require a canvas. It accepts no parameters. Syntax: noCanvas() Parameters: This function accepts no parameters. The program below illustrates the noCanvas() functi 1 min read p5.js blendMode() FunctionThe blendMode() function is used to blend two pixels according to the given blending mode. The different types of blending modes have different methods of mixing the source pixels with the ones present in the display window, to produce the resulting pixel. Syntax: blendMode( mode ) Parameters: This 3 min read p5.js DOM and Rendering Complete ReferenceDOM is a way to represent the webpage in a structured hierarchical way so that it will become easier for programmers and users to glide through the document. The functions used in p5.js are mentioned below. DOM Description select()It searchs an element in the page with the given id, class or tag nam 2 min read p5.js Transformp5.js rotate() functionThe rotate() function in p5.js is used to rotate a shape or the object using p5.js to a specified axis over a specified angle. Syntax: rotate(angle, [axis]) Parameters: The function accepts single parameter as mentioned above and described below: angle: The angle of rotation which specified in radia 1 min read p5.js rotateX() functionThe rotateX() function in p5.js is used to rotate the shape or an object around the x-axis.Syntax: rotateX(angle) Parameters: This function accepts single parameter angle which stores the angle by which rotation is to be done.Below programs illustrate the rotateX() function in p5.js:Example 1: This 1 min read p5.js rotateY() functionThe rotateY() function in p5.js is used to rotate the shape or an object around the y-axis. Syntax: rotateY(angle) Parameters: This function accepts single parameter angle which stores the angle by which rotation is to be done. Below programs illustrate the rotateY() function in p5.js: Example 1: T 1 min read p5.js rotateZ() functionThe rotateZ() function in p5.js is used to rotate the shape or an object around the z-axis. Syntax:  rotateZ(angle) Parameters: This function accepts single parameter angle which stores the angle by which rotation is to be done. Below programs illustrate the rotateZ() function in p5.js:Example 1: 1 min read p5.js scale() FunctionThe scale() function in p5.js is used to increase or decrease the size of a shape or model by expanding or contracting its vertices. The scale values are specified as decimal percentages, that is, a scale value of "2.0" would increase the dimensions of the shape by 200%. Similarly, a negative of "-2 3 min read p5.js Typography shearX() FunctionThe shearX() function in p5.js is used to shear a shape or object around the x-axis. The object is sheared by the amount specified by the angle parameter. For proper functioning of angles should be specified in the current angleMode. The objects are always sheared around their relative position to t 2 min read p5.js Typography shearY() FunctionThe shearY() function in p5.js is used to shear a shape or object around the y-axis. The object is sheared by the amount specified by the angle parameter. For proper functioning of angles should be specified in the current angleMode. The objects are always sheared around their relative position to t 2 min read p5.js translate() functionThe translate() function in p5.js is used to specify the amount to displace objects within the display window. The x parameter is used to specify the left/right translation and y parameter is used to specify up/down translation. Syntax: translate(x, y, [z]) or translate(vector) Parameters: This func 2 min read p5.js Transform Complete ReferenceThe p5.js Transform Function is used to transform a shape or the object to a specified axis over a specified angle. All the transform functions are mentioned below. Function Description rotate()It rotates a shape or the object using p5.js to a specified axis over a specified angle. rotateX()It rotat 1 min read p5.js Datap5.js storeItem() FunctionThe storeItem() function is used to store a given value under a key name in the local storage of the browser. The local storage persists between browsing sessions and can store values even after reloading the page. It can be used to save non-sensitive information, such as user preferences. Sensitive 2 min read p5.js getItem() FunctionThe getItem() function is used to retrieve the value that has been stored using the storeItem() function under the given key name from the local storage of the browser. It returns a null value if the key is not found. The local storage persists between browsing sessions and can store the values even 2 min read p5.js clearStorage() FunctionThe clearStorage() function in p5.js is used to clear all items present in the local storage set using the storeItem() function. The items are removed for the current domain. Trying to retrieve any item using the getItem() function would now return null. It accepts no parameters. Syntax: clearStorag 2 min read p5.js removeItem() FunctionThe removeItem() function is used to remove the item that has been stored using the storeItem() function. It removes the value under the given key name from the local storage of the browser. Syntax: removeItem(key) Parameters: This function accept a single parameter as mentioned above and described 2 min read p5.js createStringDict() FunctionThe createStringDict() function is used to create a p5.StringDict instance with the given data. The data can be individually passed as a key-value pair or given as a collection of values using an object. Syntax:  createStringDict(key, value) or  createStringDict(object) Parameters:  key: It spec 2 min read p5.js createNumberDict() FunctionThe createNumberDict() function is used to create a p5.NumberDict instance with the given data. The data can be individually passed a key-value pair or given as a collection of values using an object. Syntax: createNumberDict(key, value) or createNumberDict(object) Parameters: key: It specifies the 2 min read p5.js TypedDict create() MethodThe create() method of p5.TypedDict in p5.js is used to add the given key-value pair or collection of pairs to the dictionary. A key-value pair is a set of two values that are mapped to each other. These values can be accessed by querying this dictionary using the key portion of the pair. A dictiona 3 min read p5.js NumberDict add() MethodThe add() method of p5.NumberDict in p5.js adds the given value to the value at the given key and stores the updated value at the same key. A key-value pair is a set of two values that are mapped to each other. These values can be accessed by querying this dictionary using the key portion of the pai 3 min read p5.js append() functionThe append() function in p5.js is used to add value at the end of a given array i.e, it increases the length of the original array by one. Syntax: append(Array, Value) Parameters: This function accepts two parameters as mentioned above and described below: Array: It is the original input array to wh 2 min read p5.js arrayCopy() functionThe arrayCopy() function in p5.js is used to copy a part of source array elements to another destination array. This function is depreciated from future versions.  Syntax:  arrayCopy( src, src_pos, dst, dst_pos, length ) Parameters: This function accepts five parameters as mentioned above and desc 3 min read p5.js concat() functionThe concat() function in p5.js is used to concatenate the two given arrays. This function is depreciated from future versions and uses First_array.concat(Second_array) instead. Syntax: concat(First_array, Second_array) Parameters: This function accepts two parameters as mentioned above and describe 1 min read p5.js float() functionThe float() function in p5.js is used to get the floating point representation of the given string as a parameter. Syntax: float(String) Parameters: This function accepts a single parameter String which is used to be converted into its floating point representation. Return Value: It returns the conv 2 min read p5.js int() functionThe int() function in p5.js is used to convert the given boolean, integer, and float value into its integer representation. Syntax: int(ns) or int(n, radix) Parameters: This function accepts three types of the parameter which are listed below: n: It stores the value which needs to converts into i 3 min read p5.js join() functionThe join() function in p5.js is used to join the input array of strings into a single string using separator. This separator might be any character which gets their position in between two strings of the input array. Syntax: join(Array, Separator) Parameters: This function accepts two parameters as 2 min read p5.js Data Complete ReferenceIn the p5.js Data, URL string containing either image data and the text contents of the file or a parsed object if the file is JSON and p5.XML if XML. Local Storage Description storeItem()It stores a given value under a key name in the local storage of the browser. getItem()It is used to retrieve th 4 min read p5.js Eventsp5.js Keyboard keyIsPressedThe keyIsPressed variable in p5.js is true if any key is pressed and false if no keys are pressed. Syntax: keyIsPressed The below program illustrates the key is pressed variable in p5.js. Example-1: javascript let valueX; let valueY; function setup() { // Create Canvas of size 500*500 createCanvas 2 min read p5.js Keyboard keyThe key variable in p5.js always contains the value of the key which is recently pressed. To get the proper capitalisation, it is best to use it within keyTyped(). Use the keyCode variable For non-ASCII keys. Syntax: key Below program illustrates the key variable in p5.js: Example-1: javascript let 1 min read p5.js Keyboard keyCodeThe keyCode variable in p5.js always contains the key code of the key that is recently pressed. This key code is recommended to be used when finding out if the user if pressing a modifier key, like the Shift, Control, the Caps Lock key, or the Function keys. Syntax: keyCode The program below illust 1 min read p5.js keyPressed() FunctionThe keyPressed() function is invoked whenever a key is pressed. The most recently typed ASCII key is stored into the 'key' variable, however it does not distinguish between uppercase and lowercase characters. The non-ASCII character codes can be accessed in the 'keyCode' variable with their respecti 2 min read p5.js keyReleased() FunctionThe keyReleased() function is invoked whenever a key is called every time when a key is pressed. The most recently typed ASCII key is stored into the 'key' variable, however, it does not distinguish between uppercase and lowercase characters. The non-ASCII characters can be accessed in the 'keyCode' 1 min read p5.js Mouse mouseIsPressedThe mouseIsPressed system variable in p5.js is used to store the boolean value. If the mouse is pressed then it stores True otherwise stores False. Syntax:mouseIsPressedCDN link: <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js"></script>Example 1: This example uses 2 min read p5.js mouseMoved() FunctionThe mouseMoved() function in p5.js is called every time the mouse moves and a mouse button is not pressed. Syntax: mouseMoved(Event) Parameters: This function accepts single parameter Event which is optional. Below programs illustrate the mouseMoved() function in p5.js: Example 1: This example uses 2 min read p5.js mouseDragged() FunctionThe mouseDragged() function in p5.js is used to check the mouse drags (mouse moves and mouse button pressed). It is invoked each time when the mouse drags. If mouseDragged() function is not defined, then touchMoved() function will be used instead of mouseDragged() function. Syntax: mouseDragged(Even 2 min read p5.js mousePressed() FunctionThe mousePressed() function in p5.js works when mouse clicked on the document. The mouseButton variable is used to specify which button is pressed. The touchStarted() function is used instead of mousePressed() function if mousePressed() function is not defined. Syntax: mousePressed(Event) Below prog 2 min read p5.js mouseReleased() FunctionThe mouseReleased() function in p5.js works when mouse button released. The touchEnded() function is used instead of mouseReleased() function when mouseReleased() function is not defined. Syntax: mouseReleased(Event) Below programs illustrate the mouseReleased() function in p5.js: Example 1: This ex 2 min read p5.js doubleClicked() FunctionThe doubleClicked() function is invoked whenever a mouse or pointing device causes a dblclick event. This happens when the pointing device is clicked twice in quick succession on a single element. The MouseEvent callback argument could be used to access the details of the click. Syntax: doubleClicke 2 min read p5.js mouseWheel() FunctionThe mouseWheel() function is invoked whenever a mouse or touchpad scroll causes a vertical mouse wheel event. This event can be accessed to determine the properties of the scroll. The delta property returns the amount of the scroll that took place. This value can be positive or negative depending on 2 min read p5.js Touch touchStarted()The touchStarted() function in p5.js is called once after every time a touch is registered. If touchStarted() function is not defined, the mousePressed() function will be called instead if it is defined. Syntax: touchStarted([Event]) Below program illustrates the touchStarted() function in p5.js: Ex 2 min read p5.js Touch touchEnded()The touchEnded() function in p5.js is called when a touch ends. If no touchEnded() function is defined, the mouseReleased() function will be called instead if it is defined. Syntax: touchEnded([Event]) Below program illustrates the touchEnded() function in p5.js: Example-1: javascript let valueX; le 2 min read p5.js Events Complete ReferenceThe p5.js events used to provide a dynamic interface to a webpage. These events are hooked to elements in the Document Object Model(DOM). Keyboard Description keyIsPressedIt is true if any key is pressed and false if no keys are pressed. keyIt always contains the value of the key which is recently p 1 min read Like