Game Prototyping using p5.js

Learning JavaScript can be an magical process ✨

With so many resources online, it’s easy to get lost in where to start. Many people start with a “learn the basics” approach, watching online courses with labs and lessons.

This is a great approach to learn conventions; there really is no shortcut to a good foundation.

Prototyping can also help support this process; building projects in JavaScript can be fun, produce satisfying results, and reinforce lesson learning.

Prototyping is the process of iteration through an array of ideas, creating new instances of the same project to test features and functionality.

Where to start? The p5.js libraries have a vast amount of functionality, and each one feels like it’s own spell book, each with their specialization.

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

Let’s look at some of the demos that a p5 library can make. On the libraries on the p5.js page, we can see that there is a p5.game library.

Let’s play with it!

First, download the p5.game example project. You can do this through the main page for p5.play, or you can fork/clone your project through github.

After that you will need to make sure that Node is installed on your machine. Go to the Node page to get the newest stable build.

Following the installation of Node, CD into the project folder of the example project and run the following code:

npm install
npm start

> p5.play@1.0.0 start /Users/MDN/js_api/p5.play
> http-server -o
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://10.39.110.226:8080
Hit CTRL-C to stop the server
[2019-10-29T17:46:06.338Z] "GET /" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36"
(node:65997) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated

This starts a webpage which allows you to test and view code for several example projects. Navigate to /examples.

This example shows us how to load and animate png files.

In this example we can see that there is no DOM, but in the setup() function the code is creating a canvas for the png files to animate. The draw() function contains another function, animation(), which refreshes 60/times a second.

In another example, we can see how to handle collisions:

pretty!

//Collision detection - Bouncing behavior
var circles;
var boxes;
function setup() {
  createCanvas(800, 400);
circles = new Group();
for(var i=0; i<20; i++)
  {
    var circle = createSprite(random(0, width), random(0, height));
    circle.addAnimation('normal', 'assets/asterisk_circle0006.png', 'assets/asterisk_circle0008.png');
    circle.setCollider('circle', -2, 2, 55);
    circle.setSpeed(random(2, 3), random(0, 360));
//scale affects the size of the collider
    circle.scale = random(0.5, 1);
    //mass determines the force exchange in case of bounce
    circle.mass = circle.scale;
    //restitution is the dispersion of energy at each bounce
    //if = 1 the circles will bounce forever
    //if < 1 the circles will slow down
    //if > 1 the circles will accelerate until they glitch
    //circle.restitution = 0.9;
    circles.add(circle);
  }
boxes = new Group();
for(var j=0; j<4; j++)
  {
    var box = createSprite(random(0, width), random(0, height));
    box.addAnimation('normal', 'assets/box0001.png', 'assets/box0003.png');
    //setting immovable to true makes the sprite immune to bouncing and displacements
    //as if with infinite mass
    box.immovable = true;
//rotation rotates the collider too but it will always be an axis oriented
    //bounding box, that is an orthogonal rectangle
    if(j%2==0)
      box.rotation = 90;
boxes.add(box);
  }
}
function draw() {
  background(255, 255, 255);
//circles bounce against each others and against boxes
  circles.bounce(circles);
  //boxes are "immovable"
  circles.bounce(boxes);
//all sprites bounce at the screen edges
  for(var i=0; i<allSprites.length; i++) {
    var s = allSprites[i];
    if(s.position.x<0) {
      s.position.x = 1;
      s.velocity.x = abs(s.velocity.x);
    }
if(s.position.x>width) {
      s.position.x = width-1;
      s.velocity.x = -abs(s.velocity.x);
    }
if(s.position.y<0) {
      s.position.y = 1;
      s.velocity.y = abs(s.velocity.y);
    }
if(s.position.y>height) {
      s.position.y = height-1;
      s.velocity.y = -abs(s.velocity.y);
    }
  }
drawSprites();
}

The code for this example assigns global variables “circles” and “boxes”, assigns arguments for instances, and creates behavior again in the draw() function.

I recommend anyone interested in using this library in their projects to start by working through an example project; it has good example code and practices for implementing in the view of a webpage.

processing/p5.js

reference | p5.js

p5.play - a game library for p5.js