P5.js is a community-driven, JavaScript library, created for creative coding.
Compared to classic JavaScript, P5.js proposes lots of built-in variables and helper functions to easily prototype visual interactive sketches.
Sketching with p5.js can be done via their web-editor or locally via your Visual Studio Code Environment
In VSCode, an extension can be used to help you set things up and running
P5.js Installation for VSCode
- Install VSCode, and this extension
- On VSCode, select
viewfrom the top toolbar andCommand Paletteor presscmd+shift+p - Type
Create a new p5.js 2.x Projectin the search bar modal - Select the folder where to create the project
Preview your p5.js sketch
- Right click your
index.htmlthen selectOpen with Live Serveror in the bottom right of your VSCode window, clickGo Live
Anatomy of a p5.js sketch file
A p5.js sketch is essential a JavaScript file, named sketch.js by default. The difference is it needs the p5.js library to be loaded before-hand.
If creating a P5 project from scratch, make sure in your index.html that the P5 library is loaded before linking to your sketch.js:
<head>
<!-- if you load p5 from their CDN -->
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.3/lib/p5.min.js"></script>
<!-- if you have a local copy of p5 -->
<script src="./p5.min.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>At the minimum, the sketch consists of two functions: setup() and draw().
// This runs once at start
function setup() {
createCanvas(400, 400);
}
// This runs continuously at every frame!
function draw() {
background(220);
}
In the setup() function, the visual sketch is rendered by the createCanvas() function, with two values (in this case numbers), the width, and height, passed as parameters of the function.
Any values placed inside parenthesis of a function are called parameters. We use them to customize functions.
In the draw() function, another function background() allows to draw a light grey background to the created canvas.
We can start by changing the parameters values in both functions, first to resize the canvas, then to change the background color:
To learn more, visit the p5.js reference pages for background() & color.
Drawing your first shape
No we have a circle centered within the canvas. This circle is drawn from the center (half of the width: 300, half of the height: 150), and has a size of 100.
P5.js reference guide on shapes
Make it interactive!
By using built-in P5 variables such as windowWidth and windowHeight when creating the canvas, we ensure the canvas always fits the full size of the window.
Now, the circle follows my mouse (by replacing static position values with dynamic built-in P5 variables mouseX and mouseY), and whenever I press the mouse, the circle fills with white background.
Organizing your code
Organizing your code is key to build more complex sketches. This is where creating your own variables and functions come in, to make your code more modular, to avoid code repetition, and to improve human-readability. It is essential to organize code progressively, both for you, future you, and others.
Custom variables
P5 has plenty of built-in variables, while they are useful, they only get us so far. Variables allows to store information for later re-use. To create one, we need to declare it:
let variableName = value;
const otherVariableName = value;The let keyword allows for reassigning different values, while const prevents it: its initial value cannot be reassigned.
let variableName = value;
variableName = otherValue // it works!
const otherVariableName = value;
otherVariableName = otherValue // error
You are free to choose how to name your variables, but make sure they help understand why they are for.
`let` variables can be declared without any explicit initial value. Its value therefore remains `undefined` until proper assignment It is common to see:
```js
let variableName;
console.log(variableName) // logs: undefined
//[…]
variableName = value;The = sign is the assignment operator, by which a value is assigned to a variable. It is important to distinguish it from equality. Think of the variable as a labelled box within which we store something in it: the value.
The value can be any sort of datatype, e.g. a number, a string of text, etc.
An important concept about a variable is its scope, e.g. where it is declared influences where it can be used.
In P5 it is very frequent to declare global variables at the top of our sketch file, outside of setup() and draw(). This way, we say those kind of variables have a global scope: it is accessible anywhere within our sketch file:
let myVariable = something;
function setup(){
// myVariable can be used here!
}
function draw(){
// myVariable can be used here too!
}If you were to declare variables inside a function, such as setup() or draw(), they would have a local scope, only to be used within the block or the function where they are declared.
// myVariable CANNOT be used here!
function setup(){
let myVariable = something;
// myVariable can be used here!
}
function draw(){
// myVariable CANNOT be used here!
}Here is an interactive sketch about variable scopes.
Custom functions
setup() and draw() are the basic built-in functions in any p5.js sketches. We already know these functions have a defined task: setup() runs only once at the start, while draw() runs in a loop at everyframe.
Functions are first declared:
function setup(){
}For the function to be used, we usually say the function is called. You don’t have to worry about calling setup() and draw() as this is already handled by P5. But for any other functions, this would look like this:
function setup(){
}
function draw(){
// calling the custom function
myOwnFunction();
}
//declaring the custom function
function myOwnFunction(){
// do something
}Placing functions
It is best to place custom functions after your
setup()anddraw()functions.