p5.js

Table of contents

Introduction

Getting Started

Basic Components

Introduction

p5.js is an innovative and creative coding library published for JavaScript that enables the users to facilitate the process of creating innovative visuals, apply visual arts easily and sketch with its pre-fixed codes that contains tools, drawing functionalities and other software to make design of visuals simpler.

p5.js is not an emulation or port, still in active development; it’s additional libraries makes it easier and efficient to implement images, videos, sounds, text, and HTML5 objects. p5.js uses HTML, CSS, and JavaScript - similar to almost all webprojects.

It eases the process of sketching and creating visuals with the functionalities pre-set by the library and thus simplifies it. p5.js can be thought of as a software sketchbook similar to the ‘Preprocessing’, where p5.js is a translation of ‘Preprocessing’ software.

Usage of p5.js

p5.js is a free and open-source Javascript library. Anyone who is interested in implementing creative visuals, or including sketches or graphical visuals on their software can use this library. Users can either create a project focused fully on the creative visuals or support their existing project with the visuals designs with the support of the p5.js library.

p5.js is also beginner-friendly. With its easy guides and tutorials everyone can learn how to use the p5.js library on their code.

p5.js can be used for educational purposes as well, since it is easy to use, it makes educating easier also (especially for subjects involving mathematics such as geometry - since p5.js includes features to easily create geometric objects and coordinate systems, lines and geometric objects on the coordinate systems).

p5.js users can utilize various options to enhance their coding project such as creating and setting up canvases, designing geometric shapes and coordinate systems with various color options : represented in various ways such as RGB, RGBA, gray value, hexadecimal , and HSBA.

p5.js users can either use the p5.js editor published from the official website of p5.js or can use their own desktop (if selected to use on personal desktop, have to first download the library to the desktop - following the download instructions).

p5.js users can include graphics, geometric motifs and shapes, and coordinate systems on their canvases - or even use a coordinate system as a canvas - which eases users to apply mathematical concepts and geometrical representations of images throughout their project.

p5.js users can include features that are responsive to mouse movements and mouse touches : whether the mouse is dragged, pressed, released, clicked or scrolled.

p5.js users can draw canvases with default functions set-up or load the canvas environment that the user wants to work on, to enhance the project that they are working on; with its easy to build set-up features users can create their canvases easily and time efficiently.

Getting Started

p5.js offers mainly 2 ways to use the library. User can either use the p5.js web editor provided by the library’s official website or locally set p5.js to work on their desktop.

Using p5.js web editor

Click here to access the web editor. Below code should appear in the default editor.

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

function draw() {
  background(220);
}

After making changes in the editor, click the pink play button to see your changes in the preview section.

Setting up p5.js editor locally

We will use Visual Studio Code as our code editor as it is one of the most used and easy to set up. Download visual studio code here and download the live server extension here by following the instructions under the “VS Code Live Server” section.

There are different ways to use p5.js on a user’s local computer.

Download a complete p5.js library

Download p5.js After clicking this page, scroll down and download “p5.js complete” project under Complete Library.

Open the downloaded folder using Visual Studio Code. Under the folder named “empty-example”, head to index.html and start the live server by clicking the “Go Live” button in the status bar or by ALT-L ALT-O. You will edit the sketch.js file and those changes will be reflected in the local browser.

Using hosted p5.js library

Instead of downloading the whole package, there is another option of using the p5.js file hosted online as all versions of p5.js are stored in a CDN. Create a folder and inside create index.html and sketch.js. In index.html place the below code and start the live server by clicking the “Go Live” button in the status bar or by ALT-L ALT-O.

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.9.1/lib/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

First Sketch

After setting up p5.js, write this code below in sketch.js to check if p5.js is working as intended.

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

function draw() {
  background(220);
  ellipse(50,50,80,80);
}

It should show a white ellipse with a black outline whose width and height are 80 pixels and located 50 pixels from the left and down from the top.

Basic Components

This library enables users to create and customize visual elements. A basic overview of the functions provided by this library can be summarized as follows, setting up, drawing primitive shapes and colouring them as desired. These functions will by categorically explained as follows:

Set-up

The set-up functions are used to perform tasks that only need to be executed once at the beginning of the sketch. They can be explained as follows:

// creates a canvas of width = 400, height = 300
// createCanvas is called within setup()
function setup() {
  createCanvas(400, 300); 
}

Drawing

The drawing functions allow the user to create various primitive shapes and other visual elements on the canvas. The default shapes have a black outline, and a white fill colour. Some of the most commonly used are as follows:

// draws a line, rectangle, ellipse, and triangle
function draw() {

  // draws a line from (50, 50) to (150, 100)
  line(50, 50, 150, 100);
  
  // draws a rectangle at (200, 50) with width 80 and height 120
  rect(200, 50, 80, 120);
  
  // draws an ellipse at (100, 200) with width 100 and height 80
  ellipse(100, 200, 100, 80);
  
  // draws a triangle with vertices at (250, 250), (300, 350), and (350, 250)\
  triangle(250, 250, 300, 350, 350, 250);
}

Colouring

The colouring functions allow the user to further customize the visual elements that they have created. The primitive shape functions listed previously do not account for colours.

The colouring functions take in a parameter called colour which determines the colour that will be assigned to the specified entity.

This parameter can be represented as a string containing the name (eg. “red”, “blue”), or it can be a string representing a hexadecimal code (e.g., “#FF0000” for red), or as an array containing RGB values (eg. [255, 0, 0] for red) or as an instance of the Color object which can be created with the function color( red, green, blue) which will be further explained. The following functions are some of the more common functions used:

// draws a blue ellipse
function draw() {
  fill(0, 0, 255);
  ellipse(100, 200, 100, 80);
}

// draws an ellipse with a blue outline
function draw() {
  stroke(0, 0, 255);
  ellipse(100, 200, 100, 80);
}

// draws a blue background
function draw() {
  background("blue")
}

// creates a canvas and sets colour mode to RGB
function setup() {
  createCanvas(400, 200); 
  colorMode(RGB); // default range of 255
  colourMode(RGB, 100) // where upper bounds each element are 100
}

// creates custom colours
let blue;
function setup() {
  createCanvas(400, 300);
  blue = color(0, 0, 255);
}

//usage: ellipse with Colour 'blue' = (0, 0, 255)
function draw() {
    fill(blue);
    ellipse(50, 50, 100, 100)
}

Reference