Introduction to p5
For this tutorial series, we will be using JavaScript with the p5 library. p5.js is a JavaScript library which has a tonne of drawing functionality that we can use to make developing 2D games nice and easy.
We will be using the p5.js editor to implement these games as it requires minimal setup, meaning we have more time to make the stuff we want.. Which is bloody marvellous.
Sketch.js
The first thing you’ll see when opening up the editor is a file called sketch.js this is where all the magic happens! The file has a setup() and draw() function, the concept is very simple, setup is executed once and draw is executed continuously until the termination of the program. By default the framerate (The number of times the draw() function is called) is 60.
[code lang="javascript"]
// this executes once
function setup() {
createCanvas(400, 400);
}
// this executes 60 times per second
function draw() {
background(220);
}
[/code]What is createCanvas(400, 400) and background(220)?
This creates a canvas element with the width and height of 400px. Basically, the canvas element is part of HTML5 which allows us to make our shit hot games. So the canvas is what we’re drawing on!
The background function colours in the canvas, If you specify just one value as an argument like background(220) it is grayscale, but you can choose any colour you wish using RGB arguments, background(255, 204, 0) would give you a funky yellow for example. Each value is in the range of 0 to 255. More information can be found here.
What is this Index.html thingy?
Okay, so if you’ve opened up the p5.js web editor and you’ve spotted in your directory structure there’s this strange looking index.html file. The index.html page is the most common name used for the default page shown on a website so you may have heard of it!
What we use it for is to pull in the p5.js libraries and specify our JavaScript files! Notice how within the <head> tag there are these strange looking links to websites, go ahead, copy and paste one into your search bar, it’ll give you a load of minified javascript, but that’s not too important, just know it gives us the libraries we need!
[code lange="html"]
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
[/code]Let’s make our first drawing!
I think the best way to learn is by doing, so let’s jump in and code something. So what we’re going to do is code a ball that bounces off the wall, it’s gonna be brilliant! This may come in handy for when we code up pong later.
Drawing the ball
[code lang="javascript"]
let x;
let y;
function setup() {
createCanvas(400, 400);
x = width / 2;
y = height / 2;
}
function draw() {
background(220);
fill(100, 123, 255);
ellipse(x, y, 50, 50);
}
[/code]In the code snippet, you’ll notice that x and y have been defined, these are variables which are going to store the x and y location of our little bouncy ball. The let keyword is used to declare variables in javascript, you can also use var but var uses this horrible thing called hoisting that we won’t get into, just know that we will be using let and not var!
So, x and y are defined at the top of the file so that when we want to assign the variable in setup() and access the variable in draw() we can! It is in scope!
When you have created your canvas using createCanvas(width, height) you now have access to the p5.js variable width and height. So in our example width = 400 and height = 400.
- fill(r, g, b) – Is very similar to the background function, however, it is used to change the colour of shapes, so any shape defined under the fill() function will be that colour. Notice how our ball is blue!
- ellipse(x, y, width, height) – Draws an ellipse at a specified x and y location with a given width and height, very simple!
Below is what executing the code looks like! Go ahead and copy the code into the p5.js editor and try it for yourself. I encourage you to play with the numbers and get a feel for it!
Moving the ball!
[code lang="javascript"]
let x;
let y;
let radius = 25;
let xSpeed;
let ySpeed;
function setup() {
createCanvas(400, 400);
x = width / 2;
y = height / 2;
xSpeed = random(2, 5);
ySpeed = random(2, 5);
}
function draw() {
background(220);
fill(100, 123, 255);
ellipse(x, y, radius * 2, radius * 2);
x += xSpeed;
y += ySpeed;
if (x > width - radius || x < radius) {
xSpeed = -xSpeed;
}
if (y > height - radius || y < radius) {
ySpeed = -ySpeed;
}
}
[/code]In the code above you can see we’ve added two new variables xSpeed and ySpeed these are initialised with a random number between 2 and 5: random(2, 5) which is also a p5 function. This xSpeed and ySpeed are going to be added to the x and y coordinates each frame: x += xSpeed and y += ySpeed.
A new variable called radius has been added for our ellipse, this is so we can use this information when determining when the ball hits the wall!
If statements have been added to check whether a ball has hit a wall, if it has hit a wall it changes direction, so we essentially inverse the xSpeed if it hits the left or right wall and inverse the ySpeed if it hits the top or bottom wall.
In order to help you understand how the hit detection works I’ve made an illustration of a ball going from right to left and hitting the left wall.
And there we have it, an absolutely bloody fantastic little sketch! You’ll be surprised at how far just using just these very simple features of the p5.js library can get you.
I recommend you copying the code into the p5 editor and playing around, here are some ideas:
- Add another ball! Maybe make them collide together.
- Maybe increase the speed of the ball the longer the sketch goes on.
- Rather than the ball bouncing off the wall, make it go through the wall and come out the other side.
Use your imagination and have some fun!
Some p5.js functions I regularly use
I would recommend having a look at the p5.Js reference, but there are a lot of functions that you probably won’t use. Here are all of the p5.js functions I have used in my game so far at Spaceheir! (Github)
[…] The idea of this series is to go along with the evolution of games, so we’re starting from the beginning with pong. Each week I’m going to release a blog tutorial on how to create a game newer than the last, eventually, the blog in approximately 50 weeks time will be “How to code Fortnite! (2017) -51″, or not. Note, if you’re unfamiliar with p5.js and its syntax, check out my previous blog! […]
[…] In my example I’ll be using the p5js Editor so I can provide a link to the code if you get stuck at any point. This implementation by no means requires the p5js framework, as I’ll be making very little use of its APIs, but just for ease, I’ll go with it. If you want to learn more about p5js, check out my introductory blog to p5js. […]
[…] (JS), well, p5.js is just a JavaScript library — an extension of the language — that has a tonne of drawing functionality that we can use to develop 2D […]
[…] going to be using p5.js to implement this, all the code can be found […]
[…] a beginner, but if you haven’t read it, no worries, you should be fine. We’ll be using p5.js to code the game for ease of interaction with the HTML canvas – to jump right in, I’d […]
[…] used a two dimensional array to try and visualise it using p5.js, similar to other blogs where I implement sorting […]