p5.js is a Javascript library designed to make coding easier for designers, artists, musicians, beginners. It’s built upon Processing, a Java based tool, with p5.js now allowing us to use the Processing approach within our web browser.
I’ve used both Processing and p5.js as tools to create audio-visual programs, interactive media and musical tools, although it was a few years ago. I’m aiming to write a series of posts as a way of revision, whilst also sharing some of the capabilities of p5.js.
Disclaimer: I’m not a professional programmer, I’m just sharing what I enjoy, be nice to me
Here's an example of what we'll be creating - https://matthewgreasley.co.uk/p5/rectangles/
So let's begin. We’re going to download a copy of the p5.js library from https://p5js.org/download/. We’ll download the Complete Library, as that give us other useful elements to play with including the sound library.
The download, once unpacked gives us the following files...
p5.js file
p5.min.js file
addons folder
p5.sound.js
p5.sound.min.js
empty-example folder
index.html
sketch.js
The editable files we need to concern ourselves with are in the empty-example folder. Index.html is as follows:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="../p5.js"></script>
<script src="sketch.js"></script>
</head>
<body>
<main>
</main>
</body>
</html>
We can edit this html file if we choose to, to change how our script is utilized within the webpage. If we leave it as it is, the page will firstly call the p5.js script, will then call the sketch.js script. You will notice that the option to call p5.sound.js is commented out. We can uncomment this line to utilise the p5 audio library if we wish.
Simply put, the index.html page is a holding place for our p5.js script. The real work is done in sketch.js. When we first open up the file it’s as shown below:
function setup() {
// put setup code here
}
function draw() {
// put drawing code here
}
That’s enough of an introduction to how we get started. I’m not going to explain everything as I go, that would be laborious, I probably just be sketching out some ideas, discussing the code a little, and linking to working examples.
Here’s a little sketch just to get us started (see below). The createCanvas function allows us to set a workspace. At the end of the sketch we can use the resizeCanvas function whenever windowResized is triggered.
Within our draw function we’ve got a very simple layout of four rectangles, each of a different color, and positioned using width and height variables. This allows us to redraw the screen when it’s resized and still keep our shapes relative to one another.
function setup() {
createCanvas(windowWidth,windowHeight);
}
function draw() {
noStroke();
fill(22, 15, 19);
rect(0, 0, width/2, height/2);
fill(51, 43, 46);
rect(width/2, 0, width/2, height/2);
fill(25, 101, 104);
rect(0, height/2, width/2, height/2);
fill(88, 107, 33);
rect(width/2, height/2, width/2, height/2);
} // end of draw
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
If you want to properly learn p5.js you can start here - https://p5js.org/get-started/
Also, Daniel Schiffman is definitely someone to check out, his Coding Train series is fantastic, I know a little, but he’s a Grand Master! - https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA