Skip to content
geeksforgeeks
  • Tutorials
    • Python
    • Java
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
    • Practice Coding Problems
  • 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
  • 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 Introduction
Next article icon

p5.js

Last Updated : 17 Jun, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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 knowledge to understand creative coding fundamentals, explore core functionalities, and guide you through building your first interactive p5.js project.

p5.js Tutorial

Using the analogy of a sketch, p5.js features a full set of drawing functionality. However, you’re not limited to your drawing canvas. You'll consider your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound.

What is p5.js?

p5.js is an open-source library that simplifies coding for creative projects on the web. It bridges the gap between creative expression and programming, allowing individuals with little to no coding experience to create animations, generate interactive graphics, and build data visualizations.

Features of p5.js

Here's what makes p5.js so special:

  • Easy to Learn: p5.js uses a simplified syntax, making it an approachable gateway into the world of coding, especially for those from design backgrounds.
  • Visually Oriented: p5.js focuses on manipulating graphics and animations, allowing you to see the results of your code in real-time.
  • Open Source & Free: Being open-source, p5.js is free to use and offers a vast community of creators for support and inspiration.

Getting Started with p5.js

1. Steps to Download & Install p5.js Library

It is the easiest way to download and install the p5.js library to run code locally. Visit the website https://p5js.org/download/ to download the file and set up a local server. Then run the local server within the download folder and go to the link http://localhost:{your-port-num}/empty-example. After installing the library, you need to include a js file inside <head> section.

<script src="../p5.min.js"></script>

2. Using CDN Link

It is an alternative to download p5.js library. You can use CDN link inside head section to run the code without installing it.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>

Example:

HTML 
<!DOCTYPE html> <html>  <head>     <script src= "https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js">     </script> </head>  <body>     <script>         function setup() {                       // Canvas size 400*400             createCanvas(400, 400);         }                     function draw() {                         // Background color blue             background('blue');         }     </script> </body>  </html>

Output:

output image

Learn More About p5.js

  • Introduction
  • Environment Complete Reference
  • Color Complete Reference
  • Shape Complete Reference
  • Constants and Structure Complete Reference
  • DOM and Rendering Complete Reference
  • Transform Complete Reference
  • Data Complete Reference
  • Events Complete Reference
  • Image Complete Reference
  • IO Complete Reference
  • Math Complete Reference
  • Typography Complete Reference
  • Lights, Camera Complete Reference

Next Article
p5.js Introduction

H
hardiksm73
Improve
Article Tags :
  • JavaScript
  • Web Technologies
  • JavaScript-p5.js
  • Tutorials
  • Web-Tech Tutorials

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: javascript function setup() { createCanvas(1000, 400); // Set text size to 40px tex
    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: javascript
    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: javascript func
    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: javascript function setup() { // Create Canvas of size 300
    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: javascript function setup() { //create Canvas of size 880*200 createCanvas(880, 300); } functio
    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. javascript functio
    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. j
    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: javascript function setup() { // Create Canvas of size 880*300 createCa
    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. javascript <script language="javascript" type="text/javascript
    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: javascript let l = 0; function setup() { // Create canvas of given size createCanvas(500, 300)
    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. html <script src= "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.mi
    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.  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() 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.  html <script src= "h
    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:  javascript let valueX; let valueY; function setup() { // Create Canvas of size 500*500 createCanvas
    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: javascript 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: javascript let valueX; le
    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