Classes are one of the most important programming constructs 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 an 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.
Child classes - Keyword 'extends'
A class can be derived from another class, keeping all the original's qualities and allowing us to make new ones. This new class inherits the methods and attributes of 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 (in the case of a child class), the keyword 'super' is used.
The structure of the child class:
class className extends basicClass
{
[Attributes - Variables]
[Constructor – Initialising function]
[Methods- Functions]
}
Example BallClass
Note, that this example file uses tabs and multiple files for the first time. These are just to help us organise our code. When we run our program p5.js access the classes and treats them as a part of the main code. As general rule, use a seperate file for each class, using the name of the class as the file name.
var ball1;
var ball2;
var p1;
var p2;
var drag = false;
function setup()
{
createCanvas(800,600);
p1= createVector();
p2= createVector();
ball1 = new BouncingBall(100,100);
ball2 = new BouncingBall(50,50);
imageMode(CENTER);
smooth();
}
function draw()
{
background(255);
fill(255,255,255,60);
rect(0,0,width,height);
if(drag)
{ // draw the direction of shoot
p1.set(ball1._pos.x,ball1._pos.y,0);
line(p1.x,p1.y,p2.x,p2.y);
}
// draw the balls
ball1.draw();
ball2.draw();
}
function mousePressed()
{
drag = true;
p1.set(ball1._pos.x,ball1._pos.y,0);
p2.set(mouseX,mouseY,0);
}
function mouseDragged()
{
p2.set(mouseX,mouseY,0);
}
function mouseReleased()
{
drag = false;
// shooting direction calculation.
var dir = p5.Vector.sub(p2,p1);
// shorten the length
dir.mult(0.09);
//the ball is given a new direction
ball1.set(p1,dir,0.993);
ball2.set(p2,dir,0.95);
}
Example BouncingBall
class BouncingBall
{
// constructor
constructor(shapeWidth, shapeHeight)
{
this._pos = createVector(width/2, height/2);
this._dir = createVector(0,0);
this._dampV = 1;
this._w = shapeWidth;
this._h = shapeHeight;
this._shape = loadImage("ball.png");
}
// set the new position + direction + dampening
set(pos,dir,dampV)
{
this._pos = pos;
this._dir.add(dir);
this._dampV = dampV;
}
// update the current position
calcPos()
{
// curent position shifted
this._pos.add(this._dir);
// movement vector modified
this._dir.mult(this._dampV);
// test horisontal
if(this._pos.x + this._w/2 > width)
{
this._dir.x *= -1;
this._pos.x = width - this._w/2;
}
else if(this._pos.x - this._w/2 < 0)
{
this._dir.x *= -1;
this._pos.x = this._w/2;
}
// test vertical
if(this._pos.y + this._h/2 > height)
{
this._dir.y *= -1;
this._pos.y = height - this._w/2;
}
else if(this._pos.y - this._h/2 < 0)
{
this._dir.y *= -1;
this._pos.y = this._h/2;
}
}
// draw the ball
draw()
{
this.calcPos();
image(this._shape,this._pos.x,this._pos.y,this._w,this._h);
}
}
Exercise A
Modify the program, so that several balls can be placed independently of each other.
Exercise B
Extend the class again to make a third kind of ball. Modify its attributes and methods to create new kinds of behavior.
Example BallClass Extended
class BallEx extends BouncingBall
{
constructor(size)
{
super(size,size);
}
function draw()
{
super.draw();
line(0, 0 , this._pos.x,this._pos.y);
}
}