LifeinTECH

Software development is only for geeks, right?

Wrong! Software development is an incredibly powerful way for anyone to express themselves, whether you are an artist, designer, educator or simply someone who enjoys building stuff.

In 2001, Casey Reas and Benjamin Fry launched a project called “Processing”, which is an open source programming language built for the art and visual design communities. The goal is to teach the fundamentals of programming in a visual context, as well as to provide the foundation for electronic sketchbooks.

The Processing language is based on Java, however, in 2014, Lauren McCarthy created p5.js, which is a reinterpretation of Processing, built for the modern web in native JavaScript.

It is important to note that the p5.js JavaScript library is completely new, not an emulation or a port of the original Processing codebase, however it is officially endorsed by the Processing Foundation.

To demonstrate the power and simplicity of p5.js, I took inspiration from “The Coding Train” and implemented a version of the well-known game “Flappy Bird”.

The video below provides a quick demonstration of my Flappy Bird Clone in action, developed using p5.js and just one hundred lines of JavaScript (without any CSS or media assets).

As you can see from the video, the implementation is very simple, but does represent a fully functioning game that incorporates the core features from Flappy Bird.

The code itself is split across three files: “sketch.js”, “bird.js” and “pipe.js”. I have outlined each below, highlighting the simplicity of p5.js.

sketch.js

In Processing (and p5.js), an application is known as a sketch. The “sketch.js” file initialises the canvas and other foundational components of the game.

var bird;  
var pipes = [];  

function setup() {  
  createCanvas(400, 600);  
  bird = new Bird();  
  pipes.push(new Pipe());  
}  

function draw() {  
  background(0);  
  for (var i = pipes.length-1; i >= 0; i--) {  
    pipes[i].show();  
    pipes[i].update();  
    if (pipes[i].hits(bird)) {  
      console.log("HIT");  
    }  
    if (pipes[i].offscreen()) {  
      pipes.splice(i, 1);  
    }  
  }  
  bird.update();  
  bird.show();  
  if (frameCount % 100 == 0) {  
    pipes.push(new Pipe());  
  }  
}  

function keyPressed() {  
  if (key == ' ') {  
    bird.up();  
    //console.log("SPACE");  
  }  
}  

bird.js

The “bird.js” file includes the configuration of the bird, including size, lift, gravity and velocity.

function Bird() {  
  this.y = height/2;  
  this.x = 64;  

  this.gravity = 0.7;  
  this.lift = -15;  
  this.velocity = 0;  

  this.show = function() {  
    fill(255);  
    ellipse(this.x, this.y, 25, 25);  
  }  

  this.up = function() {  
    this.velocity += this.lift;  
  }  

  this.update = function() {  
    this.velocity += this.gravity;  
    this.velocity *= 0.9;  
    this.y += this.velocity;  

    if (this.y > height) {  
      this.y = height;  
      this.velocity = 0;  
    }  

    if (this.y < 0) {  
      this.y = 0;  
      this.velocity = 0;  
    }  
  }  
}  

pipe.js

The “pipe.js” file configures the pipes, including their size, position and the speed in which they appear.

var level = 4;  

function setLevel(levelNumber) {  
  level = levelNumber;  
}  

function Pipe() {  
  var spacing = random(30, height / 2);  
  var centre = random(spacing, height - spacing);  

  this.top =  centre - spacing / 2;  
  this.bottom = height - (centre + spacing / 2);  
  this.x = width;  
  this.w = 35;  
  this.speed = level;  

  this.highlight = false;  

  this.hits = function(bird) {  
    if (bird.y < this.top || bird.y > height - this.bottom) {  
      if (bird.x > this.x && bird.x < this.x + this.w) {  
        this.highlight = true;  
        return true;  
      }  
    }  
    this.highlight = false;  
    return false;  
  }  

  this.show = function() {  
    fill(255);  
    if (this.highlight) {  
      fill(255, 0, 0);  
    }  
    rect(this.x, 0, this.w, this.top);  
    rect(this.x, height-this.bottom, this.w, this.bottom);  
  }  

  this.update = function() {  
    this.x -= this.speed;  
  }  

  this.offscreen = function() {  
    if (this.x < -this.w) {  
      return true;  
    } else {  
      return false;  
    }  
  }  
}  

Finally, there is a single “index.html” file, which references the p5.js library and the three custom JavaScript files (sketch.js, bird.js and pipe.js). I also added the ability to increase the difficulty, however this feature is completely optional.

The full source code of my Flappy Bird Clone can be found on GitHub.

Conclusion

In summary, I hope this simple example demonstrates the flexibility and expressive nature of p5.js, allowing anyone to quickly and easily express their creativity via the web.

The p5.js website includes the JavaScript library, as well as comprehensive reference material, examples and getting started guides.