Versions Compared

Version Old Version 4 New Version 5
Changes made by

paulina.zybinska

paulina.zybinska

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

[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.

...

Code Block
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

Code Block
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);
  }
}

Link to full exercise

Exercise

...

A

  • Modify the program, so that several balls can be placed independently of each

    other 

    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 

    of behavior.

Example BallClass Extended 

Code Block
languagejs
class BallEx extends BouncingBall
{
  constructor(size)
  {
     super(size,size);
  }
 
  function draw()
  {
    super.draw();
    line(0, 0 , this._pos.x,this._pos.y);
  }
 
}

...