Introduction to p5
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.
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.
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!
[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
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!
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)