inheritance.md

Example of Object-oriented Programming (OOP) and Inheritance in JavaScript

v1 - Using object literals

// object to store circle data
const circ1 = {
  x: 200,
  y: 200,
  r: 50
};

// object to store circle data
const circ2 = {
  x: 250,
  y: 250,
  r: 20
};

// Runs once at startup
function setup() {
  createCanvas(400, 400);
}

// Runs repeatedly 
function draw() {
  // 'Wipe' the canvas
  background(0);
  stroke(255);
  strokeWeight(3);

  // Move the circles a little and draw them both
  circ1.x += random(-5,5);
  circ1.y += random(-5,5);
  ellipse(circ1.x, circ1.y, circ1.r);

  circ2.x += random(-5,5);
  circ2.y += random(-5,5);
  ellipse(circ2.x, circ2.y, circ2.r);
}

v2 - Adding a draw function

const circ1 = {
  x: 200,
  y: 200,
  r: 50
};

const circ2 = {
  x: 250,
  y: 250,
  r: 20
};

function drawCircle(circ) {
  circ.x += random(-5,5);
  circ.y += random(-5,5);
  ellipse(circ.x, circ.y, circ.r);
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);
  stroke(255);
  strokeWeight(3);

  drawCircle(circ1);
  drawCircle(circ2);

}

v3 - Moving the function into the objects

const circ1 = {
  x: 200,
  y: 200,
  r: 50,
  draw: function() {
    this.x += random(-5,5);
    this.y += random(-5,5);
    ellipse(this.x, this.y, this.r);
  }
};

const circ2 = {
  x: 250,
  y: 250,
  r: 20,
  draw: function() {
    this.x += random(-5,5);
    this.y += random(-5,5);
    ellipse(this.x, this.y, this.r);
  }
};

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);
  stroke(255);
  strokeWeight(3);

  circ1.draw();
  circ2.draw();

}

v4 - constructor function added

Note that runnning circ1 in the browser console will result in Circle {x: 203.24850506809761, y: 270.9573902749758, r: 43.51953829977926, draw: ƒ}. This shows that the function is part of the circ1 object.

let circ1;
let circ2;

function Circle() {
  this.x = random(width);
  this.y = random(height);
  this.r = random(10,60);

  this.draw = function() {
    this.x += random(-5,5);
    this.y += random(-5,5);
    ellipse(this.x, this.y, this.r);
  };
}

function setup() {
  createCanvas(400, 400);
  circ1 = new Circle();
  circ2 = new Circle();
}

function draw() {
  background(0);
  stroke(255);
  strokeWeight(3);
  circ1.draw();
  circ2.draw();
}

v5 - draw method linked to the prototype of Circle

Note that runnning circ1 in the browser console will result in Circle {x: 203.24850506809761, y: 270.9573902749758, r: 43.51953829977926}. The draw function is now attached to the protoype object (Circle) and not the object itself.

let circ1;
let circ2;

function Circle() {
  this.x = random(width);
  this.y = random(height);
  this.r = random(10,60);
}

Circle.prototype.draw = function() {
  this.x += random(-5,5);
  this.y += random(-5,5);
  ellipse(this.x, this.y, this.r);
};

function setup() {
  createCanvas(400, 400);
  circ1 = new Circle();
  circ2 = new Circle();
}

function draw() {
  background(0);
  stroke(255);
  strokeWeight(3);
  circ1.draw();
  circ2.draw();
}

v6 - array added to store multiple Circle objects

let circles = [];

function Circle() {
  this.x = random(width);
  this.y = random(height);
  this.r = random(10,60);
}
Circle.prototype.draw = function() {
  this.x += random(-5,5);
  this.y += random(-5,5);
  ellipse(this.x, this.y, this.r);
};

function setup() {
  createCanvas(400, 400);
  for(let i = 0; i < 25; i++) {
    circles.push(new Circle());
  }
}

function draw() {
  background(0);
  stroke(255);
  strokeWeight(3);
  circles.forEach(function(c) {
    c.draw();
  });
}

v7 - classical inheritance

let circles = [];

function Circle() {
  this.x = random(width);
  this.y = random(height);
  this.r = random(10,60);
}
Circle.prototype.draw = function() {
  this.x += random(-5,5);
  this.y += random(-5,5);
  ellipse(this.x, this.y, this.r);
};

function ColorfulCircle() {
  Circle.call(this);
  this.colour = color(random(255),0,0);
}

ColorfulCircle.prototype = Object.create(Circle.prototype);
ColorfulCircle.prototype.constructor = ColorfulCircle;
ColorfulCircle.prototype.draw = function() {
  fill(this.colour);
  Circle.prototype.draw.call(this);
  noFill();
};

function setup() {
  createCanvas(400, 400);
  for(let i = 0; i < 25; i++) {
    i % 2 === 0 ? circles.push(new ColorfulCircle()) : circles.push(new Circle());
  }
}

function draw() {
  background(0);
  stroke(255);
  strokeWeight(3);
  circles.forEach(function(c) {
    c.draw();
  });
}

v6 - changed to use ES6 class syntax

let circles = [];

class Circle {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.r = random(10,60);
  }

  draw() {
    this.x += random(-5,5);
    this.y += random(-5,5);
    ellipse(this.x, this.y, this.r);
  }
}

function setup() {
  createCanvas(400, 400);
  for(let i = 0; i < 25; i++) {
    circles.push(new Circle());
  }
}

function draw() {
  background(0);
  stroke(255);
  strokeWeight(3);
  circles.forEach(function(c) {
    c.draw();
  });
}

v7 - changed to use ES6 class and extends syntax

let circles = [];

class Circle {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.r = random(10,60);
  }

  draw() {
    this.x += random(-5,5);
    this.y += random(-5,5);
    stroke(255);
    strokeWeight(3);
    ellipse(this.x, this.y, this.r);
  }
}

class ColorfulCircle extends Circle {
  constructor() {
    super();
    this.colour = color(random(255),0,0);
  }

  draw() {
    fill(this.colour);
    super.draw();
    noFill();
  }
}

function setup() {
  createCanvas(400, 400);
  for(let i = 0; i < 25; i++) {
    i % 2 === 0 ? circles.push(new ColorfulCircle()) : circles.push(new Circle());
  }
}

function draw() {
  background(0);
  circles.forEach(function(c) {
    c.draw();
  });
}