To make our website more attractive, we often try to add some visualization to it.
However, only with vanilla html, css and javascript, it'll be so hard to do and it it the time p5.js comes in!
In this article, you will know a brief knowledge about p5.js.

Set up your first p5.js

p5.js is a javascript library. That means you can apply it to your project just by adding CDN.
First, visit to p5.js site and copy the script tag for CDN and just paste it inside your header tag.

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

And then your p5.js is ready!
Now you create your own javascript file for the html and start writing your canvas.

Create Canvas

5p.js has some reserved functions and setup() is one of them.

function setup() {}

Once you define this function, you don't need to call it. p5.js automatically invokes the function and code inside the function block will be run when html file is loaded.
Inside the function, we first need to create new canvas using by createCanvas(). It takes two argument: width and height.
If you want to make the canvas having 800px width and 600px height, you just call the function like below.

function setup() {
  createCanvas(800, 600);
}

By this code, p5.js make new html new canvas tags and append it to html body.

Also, you can change background color of the canvas by calling background(). It takes color value as its parameter such as RGBA or hex color.

function setup() {
  createCanvas(800, 600);
  background(255, 0, 0); // "#ff0000" also sets background color red.
}

Set background color

Now, you have created brand new canvas. Let's draw something inside of it!
When you want to draw something in canvas, you call draw() function. As the name says, it draws in your canvas. For example, for drawing a line, you just call line() inside your canvas:

function draw() {
  line(0, 0, width, height);
}

You can see a line goes through the canvas now. line() function takes starting x and y coordinate of the line in first and second parameters and end points as third and fourth.
By default, you can point a position of the canvas by x and y coordinate. They starts from top left corner of the canvas.
That means origin and value of x increases as it goes to right and y goes to bottom. width and heigh variables are both predefined by p5.js. When you call createCanvas(800, 600) in setup(), these arguments are stored to each width and height.

Move line

p5.js is library for creativity. So it has a functionality for this!
Refactor your code inside your function to this and let's see the result.

function draw() {
 line(0 + frameCount, 0, width + frameCount, height);
}

The black object appearing! But why? In this code, frameCount also a reserved variable that has number of how many times the canvas rendered since the canvas html tag created.
That means, yes, the canvas is rendered many of times! By default, 5p.js renders the canvas 60 times per second. And draw() function runs the code inside of it in every that time.
So if you want to move line, you need to refresh the canvas in each rendering by call background().

function draw() {
 background(0, 0, 0); // Reset background to white in each rendering.
 line(0 + frameCount, 0, width + frameCount, height); // On refreshed background, line is rendered.
}

background() function also accepts alpha value as a fourth value.

function draw() {
 background(0, 0, 0, 10); // alpha value between 0 - 255
 line(0 + frameCount, 0, width + frameCount, height);
}

The line has ghost effect as moving!

Web Editor

Now you have understood the very basic of p5.js! If you fell to try, there is a web editor and there are plenty more functions for your creativity.