P5.js: A creative JS library

Prakhar gupta

Published in

The Techie Trio

5 min readOct 12, 2020

Introduction: What is P5.js?

P5.js is a JavaScript library based on Processing for creative coding with a full set of drawing functionality.

But now what is “Processing”??

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts.

What exactly we do here is we draw shapes, different and lots of shapes. Play with them and make them do exciting things and make gleamingly beautiful art. So after the definitions I think, lets now dive a little to the coding part!

We assume you have done some programming in javascript(or at least know the syntax of javascript). But before that remember to download p5.js here .

Help in downloading: There are two ways of downloading and coding with p5:-

You can use the p5.js web editor which has an inbuilt p5 library so you just need to open it and start coding. You can even save your work and share it with others.
And the second way is to set up your own text editor(VS code, sublime, or any other), in order to code in p5.js. Do the following for setup:

In the case of Option 2 from above follow the steps:

Make an HTML file, index.html, and add the javascript file in the script tag as below(put your file name instead <name>) and straightaway open it on your browser.

<!DOCTYPE html><html><head><title>Project</title><script language=”javascript” type=”text/javascript” src=”./p5/p5.js”></script><script language=”javascript” type=”text/javascript” src=”./<name>.js”></script></head><body></body></html>

But it’s better to use build-in python SimpleHttpServer if you are on Linux/Windows and open index.html through the server as it’s important to do so for some functionalities of p5.js.To do that, go to the directory where your index.html file exists and run the command :

python -m SimpleHTTPServer

Now open browser and type:

localhost:8000

Function preload, setup, and draw

As we indicated above, we would draw a few simple shapes on our screen to get familiar with p5.js.

But every painter needs a canvas(say a paper to draw on) so does we and to do that we on earth have a function named createCanvas(width, height). In p5.js there is a setup() function which is used to set up things to be later used in the draw() function which is called repetitively and rendered on screen. Let us see how things work with an example:

Ex. Let’s draw a rectangle of 10 units height and width on a canvas of 300 by 300 !

index.js

function setup(){createCanvas(300, 300);}function draw(){background(0,0,255);fill(0,0,0);rect(10,10,20,20);}

index.html

<!DOCTYPE html><html><head><title>Example</title><script language=”javascript” type=”text/javascript” src=”./p5/p5.min.js”></script><script language=”javascript” type=”text/javascript” src=”./index.js”></script></head><body></body></html>

Note: We had p5.min.js file downloaded beforehand.

Output:

Tadaa!!

Again, what happens in setup() function is called once and then draw() function is called repetitively.

So what we did, or what p5.js did!

In setup() function, we created a canvas by createCanvas()- this method runs a single time!

In draw() function, we gave the background a blue color(RGB format) and created a rectangle at (10,10) coordinate of height and width equal to 20 units-this method runs again and again until stopped externally using noLoop() method.

Now, To demonstrate that draw function runs repeatedly and how it can be used see the below result!

Index.js for this:

var x=0,y=0;function setup(){createCanvas(300, 300);}function draw(){background(0,0,255);fill(0,0,0);rect(x,y,20,20);x++;y++;}

Every time draw() is called x and y are incremented and so the position of the rectangle changes resulting in a moving effect!

Similar to rect(parameters), there is a line or an ellipse in 2-d while in 3-d there are box, sphere, etc.

But what about function preload()!

This is a function called before setup() and can be used to load different files, for instance, an audio file, font styles, etc.

Enabling input control :

The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable.

For non-ASCII keys, use the keyCode variable. You can check if the keyCode equals BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.

Example Code :

let value = 0;
function draw() {
 fill(value);
 rect(25, 25, 50, 50);
}
function keyPressed() {
 if (keyCode === UP_ARROW) {
 value = 255;
 } else if (keyCode === DOWN_ARROW) {
 value = 0;
 }
}

Shapes that can be drawn :

A number of 2D shapes like, arc(), ellipse(),circle(),line(), point() , or 3D Primitives like box(), sphere(), cylinder() can be drawn.

Other Key points :

noLoop() can be used to stop the draw function to run repetitively.
loop() can be used to resume from noLoop().
isLooping() can be used to check if loop is running or not.
displayWidth and displayHeight are system variable that stores the width of the screen display according to The default pixelDensity.
Similarly, windowWidth and windowHeight are system variable that stores the Width or height of the inner window.
Rotation and Translation of shapes can be performed using Transform functions available in P5.js such as rotate() etc.
Keyboard and Mouse functions available can be used to note different events related to them eg. mouseX, keyPressed(), etc.
Math and Time function are also available in the library.
The Camera and lights can be controlled, especially in the case of 3D objects using different Camera and lights functions eg. camera(), perspective(), pointLight(), etc.