Getting started with p5.js

What is it?

p5.js is a JavaScript library that can help you work with graphics and animation with ease. It is completely web based, so you can run your code everywhere and even within existing web pages.

How to use it?

Note: In order to get the most from this article you need a basic understanding of JavaScript.

There are several ways to get started with it. You can even try it online using p5.js Web Editor.

https://editor.p5js.org/

Other option is to download the p5.js JavaScript library and include it in your web page. You can find the download link below.

https://p5js.org/download/

Examples

So now we know how to run p5.js code, let's focus on some simple examples in order to see what p5.js has to offer and how easy it is to do it.

Simple Example

Here is basic template for gettinging started. We need these 2 functions to create a simple sketch and these functions are setup and draw. The purpose of setup is run this code one time at startup, and draw function is executed for every frame.

function setup() {
  createCanvas(760, 300);
}

function draw() {
  background(220);
}

Here is the output for above code.

Shapes Example

Now let's try something more interesting.
(This code is taken from shapes demo)

function setup() {
  // Create the canvas
  createCanvas(760, 300);
  background(200);

  // Set colors
  fill(204, 101, 192, 127);
  stroke(127, 63, 120);

  // A rectangle
  rect(40, 120, 120, 40);
  // An ellipse
  ellipse(240, 240, 80, 80);
  // A triangle
  triangle(300, 100, 320, 100, 310, 80);

  // A design for a simple flower
  translate(580, 200);
  noStroke();
  for (let i = 0; i < 10; i ++) {
    ellipse(0, 30, 20, 80);
    rotate(PI/5);
  }
}

Here is the output, we can see our custom background and shapes.

Color Example
Let's see how to work with colors in this simple example. I am using fill function to set the fill color of shapes.

function setup() {
  createCanvas(760, 300);
}

function draw() {
  background(220);
  
  fill(255, 0, 0);
  rect(10,100,50,50);
  
  fill(0, 255, 0);
  rect(70,100,50,50);
  
  fill(0, 0, 255);
  rect(130,100,50,50);
}

Text Example
Here is our text example. A simple text output, but using graphics.

function setup() {
  createCanvas(760, 300);
}
function draw() {
  background(220);  
  translate(width/2, height/2);
  fill(237, 34, 93);  
  textSize(48);
  textAlign(CENTER, CENTER);
  text('Hello, World!', 0, 0)
}

Here is the output.

3D Example
p5.js also supports 3D graphics using WebGL. Here is a simple demo in order to see how it works.

function setup() {
  createCanvas(760, 300, WEBGL);
}

function draw() {
  background(220);
  normalMaterial();
  rotateX(100);
  rotateY(100);
  box(100, 100, 100);
}

Output

Final words

So by this point you have seen what p5.js has to offer and how easy it is to setup and get started. p5.js provides you all the tools neccessary to build graphics applications with ease. Once the basics are taken care of then it is up to the user to make there ideas come to life.

p5.js also has support for audio/video, input events (mouse, keyboard, mobile supported events like touch and tilt), and animation. Those are not covered in this article because my goal was to focus on the absolute basics for easy understanding.

Here are some useful resources for further study.

p5.js Reference
p5.js Examples
p5.sound library

I hope this was helpful. Looking forward to your comments and creations. Happy Coding!