Drawing with JavaScript: an introduction to p5.js

p5.js is a JavaScript library that offers a direct and simple interface for creating sketches and animations. It’s a successor of processing, which offers a similar functionality but is implemented in Java.

Content

Why p5.js?
Basic struct ure
Getting started
Setting up p5.js locally
More information

Why p5.js?

p5.js offers straight-forward functions to easily create drawings or animations that are rendered on the browser. Besides its ease of use, it allows a great deal of interaction with other elements of the browser (it has a DOM library and a sound library, among others). Finally, it imposes no limit on JavaScript’s inherent functionalities and can be combined with other JS libraries.

All of those characteristics make p5.js great for:

Learning to program.
Learning JavaScript.
Creative and artistic coding (examples).

The instantaneous visual feedback, and the possibility of using it online (without the need of setting up an IDE or code editor), make p5.js particularly appealing for learning.

Basic structure

There are two main functions that make the core of p5.js:

setup().
draw().

setup is called only once, at the beginning of the program. It executes all of the instructions inside of its body and it’s never called again. Some example uses include setting the dimensions of the sketch, and loading files.

function setup() {
  createCanvas(400, 400);
}

The code block above will create a blank sketch of size 400×400 pixels.

draw is called just after setup. Just like movies are a succession of images, draw creates the illusion of movement by updating the contents of the canvas multiple times each second. We can pass draw instructions to modify the sketch in tiny steps to create smooth animations.

function draw() {
  background(0);
  circle(x, y, 50);
  // modify the value of x and y
}

The code block above will draw a circle of diameter 50 at locations x and y. If we modify the values of x and y, the circle will be drawn at different positions on each draw call. background paints the background of the canvas a certain color. If we didn’t include it, the circles from previous draw calls would remain on the canvas (which might be intended in some situations!).

Besides these two core functions, p5.js includes many functions for drawing and other uses, such as triangle, line, etc. A complete list of them can be found on the reference.

Getting started

The online editor can be used from any browser with no setup or any installation. The code editor is on the left pane. Pressing on the red play button will render it on the right pane.

function setup() {
  createCanvas(401, 401);
}

let x=0;
function draw() {
  if (x<401) {
    background(255);
    circle(200, 200, x);
    x += 1;
  } 
}

You can copy the code above on the online editor and run it to see an example.

Setting up p5.js locally

Additionally, p5.js can be run locally quite easily.

We start by creating a HTML file with a basic structure. Let’s call it index.html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"></script>
  </head>
  <body>
    <script src="mysketch.js"></script>
  </body>
</html>

The only lines that are specific to p5.js are the ones with the script tags. At line 5, we import the p5.js library from an online server. Alternatively, we can download the p5.js library locally and place the p5.js file in the same folder as index.html. Then we can load it locally by changing line 5 to: <script src="p5.js"></script>.

Line 8 loads the mysketch.js file to the HTML page. This is the file where we include our p5.js code (we can give it any other name). For example, we could copy the content of the code block from the Getting started section.

With all of the files in the same folder, index.html, mysketch.js, and p5.js (if run locally), we open index.html with our preferred browser. It will render the animation as a normal web-page.