p5.js

  • Last Updated : 10 Mar, 2023

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.

p5.js Tutorial

Using the metaphor 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.

Steps to Download & Install p5.js library: It is the easiest way to download and install 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>

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/p5@1.2.0/lib/p5.js”></script>

Example:

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js">
    </script>
    <script src="index.js"></script>
</head>

<body>
    <main>
    </main>
</body>

</html>

index.js

function setup() {

    // Canvas size 400*400
    createCanvas(400, 400);
}
  
function draw() {
  
    // Background color blue
    background('blue');
}

Output:

output image

Learn more about p5.js:

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above

My Personal Notes arrow_drop_up