U5 LA 1.2 Bouncing Ball als Class

Tot nu toe heb je vooral imperatief geprogrammeerd. Nu gaan we een stapje verder naar object-georiënteerd. Bij OO zitten functies en eigenschappen (variabelen) samengebald in 1 geheel: de class. Van deze class maak je telkens met new een nieuwe instantie (exemplaar)

Class bouncingBall

class bouncingBall {
  constructor(theX, theY, theXSpeed, theYSpeed, theColor, theImage) {
    this.myX = theX;
    this.myY = theY;
    this.myXSpeed = theXSpeed;
    this.myYSpeed = theYSpeed;
    this.myColor = theColor;
  }
  isBouncingX() {
    return this.myX <= 0 || this.myX > width;
  }
  isBouncingY() {
    return this.myY <= 0 || this.myY > height;
  }
  bounceX() {
    this.myXSpeed = this.myXSpeed * -1;
  }
  bounceY() {
    this.myYSpeed = this.myYSpeed * -1;
  }
  
  draw() {
    stroke("yellow");
    strokeWeight(5);
    this.myX = this.myX + this.myXSpeed;
    this.myY = this.myY + this.myYSpeed;
    fill(this.myColor);
    circle(this.myX, this.myY, 20);
    if (this.isBouncingX()) {
      this.bounceX();
    }
    if (this.isBouncingY()) {
      this.bounceY();
    }
  }
}

Wat zie je aan de Class?

• keyword class en {}
• constructor(). Bij het aanroepen van new bouncingBall(....) wordt deze constructor gebruikt.
• Had je 3 ballen? De code haalt ze niet door elkaar. Vandaar het trefwoord this.
• Functies heten geen function. bounceX e.d. heten hier methods. Ook geen keyword function dus.
• Eigenschappen ofwel properties zijn bijv. myX en myXSpeed

Een nieuwe instance

In de sketch.js kun je een code opnemen in de setup() als:

myBall = new bouncingBall(10,10,3,2,"purple","")

Vanzelfsprekend hoef je niet elke instance hard-coded te maken zoals in het voorbeeld. Typisch lees je in de database de data waarmee je dan automatisch, gescript, nieuwe instances maakt.

Waarom O.O.?

• De IT heeft het geprobeerd met de data / variabelen eerst en daarna de functies. En ook met eerst de functies en daarna de data / variabelen. Chaos bleef. Bij OO mag je bij de data (properties) komen via de functies (methods). De OO trend begon al in de jaren 90 en is dus niet meer weg te denken uit de IT.
• Hergebruik van code. Het is makkelijker een instance te maken voor een class die je in een aparte file hebt, dan stukken losse code als functies en functie-calls hergebruiken.

Opdracht Aanpassen bouncingBall

Maak je eigen versie van de bouncingBall class hierboven of in deze sketch met de volgende aanpassingen:

• voeg een extra property toe aan de constructor: myRadius. Dit is voor de grootte van de cirkel. Zorg dat de aanroep in sketch.js wordt aangepast.
• Maak meerdere ballen in verschillende kleuren met verschillende radius
• Pas de method bounceX aan zodat bij elke stuiter er een andere kleur is. Maak evt een nieuwe method setColor() zodat het netjes gebeurt.
• Pas de method bounceY() aan zodat bij elke stuiter de radius groter of kleiner wordt.