Classes

Classes in javascript are objects (as with everything else). I will use the word "class" to be more faithful to the general programming concepts, but you might find the two terms used interchangeably (and wrongly) across the web when people talk about javascript.

Class is an extensible program-code-template for creating objects, providing initial values for state and implementations of behavior. When an object is created by a constructor of the class, the resulting object is called an instance of the class. From Wikipedia

A simple example of a class:


// Define a class named Area
class Area {
  constructor(w, h) {
    this.w = w;
    this.h = h;
  }
  calculateSurface() {
    return this.w * this.h;
  }
}

// Create a new instance of the Area class
// with two parameters
let rect = new Area(3, 4);

// Call a function of the class
let surface = rect.calculateSurface();

// Prints 12
print(surface);

Now, let's create something more useful in p5.js. Imagine that we want to have some balls that bounce from the edges of the screen. If we were to write this without a class, we would have to keep track of each ball's position in global arrays, which might get complicated quite quickly.

Additionally, if we wanted to add more functionality like changing color when they bounce, or something else, it'll further complicate our code.


class Ball {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

Let's initiate setup in p5.js:


let ballCount = 20;
let balls = [];

function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < ballCount; i++) {
    // Create an instance of the class
    let b = new Ball(random(width), random(height));
    // Add the instance to the global array to reference it later
    balls.push(b);
  }
}

Now, we should draw them on the screen:


function draw() {
  background(255);
  for (let i = 0; i < balls.length; i++) {
    balls[i].show();
    // This show function doesn't exist in the class
    // We will add it in the next step
  }
}

Following is what we have so far. 20 balls randomly placed on the canvas:

sketch is paused

Then, let's move them:


class Ball {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 10;
    this.speedx = 1;
    this.speedy = 1;
  }
  show() {
    // Draw the circle
    circle(this.x, this.y, this.size);

    // Move the circle
    this.move();
  }

  move() {
    this.x += this.speedx;
    this.y += this.speedy;
  }
}

Play the sketch below, and you'll see that they are moving in one direction and going out of the screen:

sketch is paused

Finally, let's make them bounce from edges of the canvas:


class Ball {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 10;
    this.speedx = 1;
    this.speedy = 1;
  }
  show() {
    // Draw the circle
    circle(this.x, this.y, this.size);

    // Move the circle
    this.move();

    // Bounce from the edges
    this.bounce();
  }

  move() {
    this.x += this.speedx;
    this.y += this.speedy;
  }
  bounce() {
    // Check if current x position is higher than width OR smaller than 0
    // if true, then reverse the x speed
    if (this.x > width || this.x < 0) {
      this.speedx *= -1;
    }
    // Same for y
    if (this.y > height || this.y < 0) {
      this.speedy *= -1;
    }
  }
}

sketch is paused

You can add more functionality by adding different behaviors, functions to the class.

Classes help us separate repeated logic. The amazing thing is that if you write your classes in a clean, structured, and isolated way, you can re-use them in your future sketches.

Classes reference at MDN

Classes

Read More