p5.js is a Javascript library that starts with the goal of Processing, to make coding accessible for artist, designers, creators, and beginners, and reinterperets this for todays javascript-heavy web environment.

Think of p5.j5 as sketchbook that allows you to draw with code in your browser simply by loading an html file. However thats not all p5.js has to offer. p5.js has addon libaries that allow manipulation of other HTML5 elements, work with physics engines, create neural networks, and manipulate sound!

p5.js sketches are displayed from an index.html file that is opened in the browser.

Simply add the p5.js libraries to your project using the following script links:

Alternatively, you can use the newly launched p5.js Web Editor to get started right away

The index.html is what you open in the brower to see your project, but the actual code is written in the sketch.js javascript file.

p5.js has 2 basic functions that are executed when the program runs

The setup() function runs once at the beginning, this is where you should put pieces of code that you only want to happen once

Alternatively, the draw() fucntion runs on a loop and is executed many times a second according to given framerate (which you can adjust!)

The base element for a p5.js sketch is the canvas this, is where your sketch will be displayed on the page.

Here is an example sketch.js that creates a 400px wide, 400px tallcanvas inside the setup function, and sets the background to grey.

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

  function draw() {
    background(220);
  }
          
        

Lets take a look at how to add some basic shapes to our project

p5.js has many ways to draw different shapes, but the 2 easiest built in ones are what you might expect: the rectangle and the ellipse.

Here are the functions for drawing a rectangle and an ellipse, along with the arguments they take:

• Rectangle: rect(x1, y1, x2, y2)
  

  Where (x1,y1) is the positoin of the bottom left corner, and (x2,y2) the position of the top right corner

• Circle: ellipse(x, y, width, height)
  

  The first 2 arguments denote the position, and the width and height aruments are the major and minor axis of the ellipse. If the width an height are the same it is a circle.

The backgroud color has a default value of #ffffff, which is white, and the drawing color has a default value of #000000 , or black.

To change the background color, you can use the handy background(color) function like in the example above

p5.js has several different ways it can interperet color values, here are the most common:

• Single integer value between 0-255, where 0 is black and 255 is white
• A triplet of values represneting the amount of red, blue, and green like this:

  
      background(255,0,0); //red background
      background(0,255,0); //blue background
      background(0,0,255); //green background
                    
                  

• A color object, which store the color for later use:
  var c = new Color(50, 150, 75);
background(c);

To add color to a shape, use the fill(color) function

This function tells p5.js to fill shapes with whatever color you give it

Animating elements in p5.js is simply a matter of changing where they are drawn on the canvas every time draw loops!

Here is an example of a sketch that draws a red circle in the middle of the white canvas, and uses a global variable that is increased every time through draw()

This results in the circle appearing as moving to the right

Be careful to redraw the brackground each time through draw() as well, otherwise your circle will leave a trail

            
    var x = 200;

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

    fuction draw(){
      background(255);
      fill(255,0,0);
      ellipse(x,200,25,25);
    }
              
                

p5.js has many addon libraries you can use to do all sorts of cool things but you can use any other javascript libary you want in you project if you need to, but you make have to do some digging to make it work nicely

Here are a few:

• Implement a physics engine with Moment.js
• Play around with audio with p5.sound.js
• Build a neural network with TensorFlow.js

For a better articulated and much more complete reference on p5.js, including tutorials, examples, and a wealth of information , visit the actual reference here