Classes are one of the most important programming constructs in many programming languages. They are the abstract model or blueprint for an object. We can also understand classes as extended data types. Unlike the primitive data types we have already looked at, classes define both variables and functions. Programmers call class variables attributes and class functions methods, but otherwise, they work pretty much the same as the variables and functions we already know. In order to get access to these attributes and methods, we need to use a dot syntax, i.e. "." must be placed after the object name, followed by the name of the attribute or the method.

The structure of a class:

class className {

[Attributes - Variables]
[Constructor – Initialising function]

[Methods- Functions]

}

Constructor

The constructor is the initialisation function of a class. This function is called when a new instance (a new object) of a class is created. An object is created with the command 'new' and the subsequent call to the constructor.

Attribute

Attributes are the variables of a class.

Methods

Methods are the functions of a class.

Example BallClass

Below the draw function, you will find the BouncingBall class. It’s common practice to separate classes into their own file, to help keep code organised.

var ball1;
var ball2;
 
 
function setup()
{
  createCanvas(800,600);
  ball1 = new BouncingBall(100,100, 30);
  ball2 = new BouncingBall(50,50, 10);
}
 
function draw()
{
  background(255);
  fill(255,255,255,60);
 
  // draw the balls
  ball1.draw();
  ball2.draw();
}
 
function mouseClicked() {
	ball1.setDirection(mouseX, mouseY);
  ball2.setDirection(mouseX, mouseY);
}


class BouncingBall
{
  // constructor 
  constructor(x,y,radius)
  {
    this.x = x;
    this.y = y;
		this.velocityX = 1;
		this.velocityY = 1;
    this._dampV = 0.99;
		this.gravity = 1.9;
    this.r = radius;
  }
   
  // set the new position + direction + dampening
  setDirection(targetX,targetY)
  {
		let newVelocityX = targetX-this.x
		let newVelocityY = targetY-this.y
  	this.velocityX =  newVelocityX *0.10;
  	this.velocityY =  newVelocityY*0.10;
  }
   
  // update the current position
  calcPos()
  {
		
		// add gravity 
		this.velocityY += this.gravity;
		
    // apply friction to velocity
   this.velocityX =  this.velocityX * this._dampV;
  this.velocityY =  this.velocityY * this._dampV;
		  
		// add velocity to position
    this.x += this.velocityX;
    this.y += this.velocityY;
		
    // test horisontal 
    if(this.x + this.r > width)
    {
      this.velocityX *= -1;
      this.x = width - this.r;
    }
    else if(this.x - this.r < 0)
    {
      this.velocityX *= -1;
      this.x = this.r;
    }
     
    // test vertical 
    if(this.y + this.r > height)
    {
      this.velocityY *= -1;
      this.y = height - this.r;
    }
    else if(this.y - this.r < 0)
    {
      this.velocityY *= -1;
      this.y = this.r;
    }

  }
   
  // draw the ball
  draw(){
    this.calcPos();
    circle(this.x,this.y,this.r);
  }
}

Exercise A

Modify the program so that many new balls are placed on the screen. Using an array and a for loop, it’s possible to quickly add hundreds balls!

Child classes - Keyword 'extends'

A class can be derived from another class, keeping all the originald qualities and allowing us to make new ones. This new class inherits the methods and attributes of the base class. However, if new methods or attributes in the child class have the same names as those in the base class, the base class properties are overwritten. To call the constructor of a base class from child class, the keyword 'super' is used.

The structure of the child class:

class className extends basicClass
{