Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • p5.js-Environment
  • p5.js-Color
  • p5.js-Shape
  • p5.js-Constants and Structure
  • p5.js-DOM and Rendering
  • p5.js-Transform
  • p5.js-Data
  • p5.js-Events
  • p5.js-Image
  • p5.js-IO
  • p5.js-Math
  • p5.js-Typography
  • p5.js-Lights & Camera
  • JavaScript
  • Web Technology
Open In App
Next Article:
p5.js Keyboard keyIsPressed
Next article icon

p5.js Data Complete Reference

Last Updated : 22 Aug, 2023
Comments
Improve
Suggest changes
Like Article
Like
Report

In 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 the value that has been stored using the storeItem() function.
clearStorage()It clears all items present in the local storage set using the storeItem() function.
removeItem()It removes the item that has been stored using the storeItem() function.

Dictionary

Description
createStringDict()It is used to create a p5.StringDict instance with the given data.
createNumberDict()It is used to create a p5.NumberDict instance with the given data.

p5.TypedDict

Description
create()It is used to add the given key-value pair or collection of pairs to the dictionary.
set()It is used to add or modify the value at the given key of the dictionary.
print()It is used to print out all the key-value pairs currently present in the dictionary to the console.
get()It is used to return the value at the given key of the dictionary.
size()size() method is used to get the current size of the dictionary.
clear()It is used to remove all the key-value pairs in the typed dictionary.
remove()It is used to remove the given key-value pair from the typed dictionary.
hasKey()It is used to check if the given key exists in the typed dictionary.

p5.NumberDict

Description
add()It adds the given value to the value at the given key and stores the updated value at the same key.
mult()It multiplies the given value to the value at the given key and stores the updated value at the same key.
div()It divides the value at the given key with the given value and stores the updated result at the same key.
minKey()It is used to find the lowest value of key in a number dictionary.
minValue()It is used to find the lowest value in a number dictionary.
maxValue()It is used to find the highest value in a number dictionary.

Array Functions

Description
append()It increases the length of the original array by one.
arrayCopy()It is used to copy a part of source array elements to another destination array.
concat()concat() function is used to concatenate the two given arrays.
reverse()reverse() function is used to reverse the order of the given array element.
shorten()shorten() function is used to decrease the number of elements of the given array by one.
shuffle()shuffle() function is used to shuffle the order of given array elements.
sort()sort() function is used to sort the array elements.
splice()splice() function is used to insert values or array elements in the given array.
subset()subset() function is used to get the subset of the given array elements.

Conversion

Description
float()It is used to get the floating point representation of the given string as a parameter.
int()It is used to convert the given boolean, integer, and float value into its integer representation.
str()It is used to convert the given boolean, string and number value into its string representation.
boolean()It is used to convert the given string and number value into its boolean representation.
byte()It converts the given string of number, number value or boolean into its byte representation.
char()It converts the given string or number value into its corresponding single-character string representation.
unchar()It converts a single-character string into its corresponding integer representation.
hex()hex() function is used to convert a number into its hexadecimal notation.
unhex()It converts a string representation of any input hexadecimal number to its equivalent integer value.

String Functions

Description
join()It is used to join the input array of strings into a single string using separator.
nf()nf() function is used to format the input numbers (integers or floats) into strings.
nfc()It formats the input numbers into strings as well as it places appropriate commas to mark the unit of 1000.
nfp()It formats the input numbers into strings as well as it gives (+) and (-) sign according to the sign of input numbers.
nfs()It adds ” ” (space) in front of positive input numbers and add (-) sign in front of negative input numbers.
split()split() function is used to break the input string into pieces using a delimiter.
splitTokens()It is used to break the input string into pieces of data using a delimiter.
trim()It is used to remove whitespace characters and tab from the beginning and end of an input String.

Next Article
p5.js Keyboard keyIsPressed
author
kartik
Improve
Article Tags :
  • JavaScript
  • Web Technologies
  • JavaScript-p5.js
  • p5.js-Data

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 Environment

    • p5.js print() function
      The 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() Function
      The 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() Function
      The 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() function
      The 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: function setup() { createCanvas(1000, 400); // Set text size to 40px textSize(20);
      1 min read
    • p5.js displayWidth Variable
      The 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 Variable
      The 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 windowWidth
      The 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: function s
      1 min read
    • p5.js windowHeight
      The 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: function setup(
      1 min read
    • p5.js windowResized() function
      The 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 variable
      The 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 variable
      The 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() function
      The 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() function
      The 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() Function
      The 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 Reference
      Function 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 Color

    • p5.js alpha() function
      The 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() function
      The 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() function
      The 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() Function
      The 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() function
      The 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() function
      The 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() Function
      The 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() function
      The 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() function
      The 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() function
      The 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() function
      The 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() function
      The 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() Function
      p5.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() Function
      The 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 Reference
      Create 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 Shape

    • p5.js arc() Function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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() function
      The 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() function
      The 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() Function
      The 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() function
      The 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() Function
      The 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 Reference
      The 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 Structure

    • p5.js Constants HALF_PI
      The 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: function setup() { // Create Canvas of size 300*200 create
      1 min read
    • p5.js Constants PI
      The 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: function setup() { //create Canvas of size 880*200 createCanvas(880, 300); } function draw() {
      1 min read
    • p5.js Constants QUARTER_PI
      The 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. function setup() {
      1 min read
    • p5.js Constants TAU
      The 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. f
      1 min read
    • p5.js Constants TWO_PI
      The 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: function setup() { // Create Canvas of size 880*300 createCanvas(880, 3
      1 min read
    • p5.js degrees() function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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. <script language="javascript" type="text/javascript" src=
      2 min read
    • p5.js disableFriendlyErrors Property
      The 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() Function
      The 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() Function
      The 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: let l = 0; function setup() { // Create canvas of given size createCanvas(500, 300); // Set th
      1 min read
    • p5.js isLooping() Function
      The 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 Reference
      Like 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 Rendering

    • p5.js select() Function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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. <script src= "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js
      1 min read
    • p5.js createButton() Function
      The 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() Function
      The 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.  [GFGTABS] html <script src= "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5
      1 min read
    • p5.js createSelect() Function
      The 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() Function
      The 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.  [GFGTABS] html <scri
      1 min read
    • p5.js resizeCanvas() Function
      The 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() Function
      The 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() Function
      The 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 Reference
      DOM 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 Transform

    • p5.js rotate() function
      The 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() function
      The 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() function
      The 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() function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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() function
      The 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 Reference
      The 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 Data

    • p5.js storeItem() Function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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() Method
      The 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() Method
      The 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() function
      The 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() function
      The 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() function
      The 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() function
      The 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() function
      The 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() function
      The 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 Reference
      In 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 Events

    • p5.js Keyboard keyIsPressed
      The 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:  [GFGTABS] javascript let valueX; let valueY; function setup() { // Create Canvas of size 500*500 cr
      2 min read
    • p5.js Keyboard key
      The 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: let valueX; let
      1 min read
    • p5.js Keyboard keyCode
      The 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() Function
      The 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() Function
      The 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 mouseIsPressed
      The 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() Function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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() Function
      The 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: let valueX; let valueY; f
      2 min read
    • p5.js Events Complete Reference
      The 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
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences