Classes: blauwdrukken voor objecten

Doel

Je leert hoe je met classes meerdere objecten kunt maken zonder steeds dezelfde code te herhalen. Een class is een blauwdruk voor objecten die allemaal dezelfde structuur en gedrag delen.

---

1. Het probleem: copy-paste objecten

In de vorige les maakte je meerdere objecten met dezelfde eigenschappen en functies.

let ball1 = { x: 50, y: 100, speed: 2, color: 'red', move() { this.x += this.speed; }, show() { fill(this.color); circle(this.x, this.y, 20); } };
let ball2 = { x: 100, y: 130, speed: 1.5, color: 'blue', move() { this.x += this.speed; }, show() { fill(this.color); circle(this.x, this.y, 20); } };

Dat werkt, maar is niet handig. Als je iets wilt aanpassen (zoals de manier waarop een bal beweegt), moet je alle objecten handmatig bijwerken.

Denkvraag

Wat zou er gebeuren als je 50 ballen had?

---

2. De oplossing: een class als blauwdruk

Met een class beschrijf je één keer hoe een bepaald type object eruitziet en zich gedraagt.

class Ball {
  constructor(x, y, speed, color) {
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.color = color;
  }

  move() {
    this.x += this.speed;
    if (this.x > width || this.x < 0) {
      this.speed *= -1;
    }
  }

  show() {
    fill(this.color);
    circle(this.x, this.y, 20);
  }
}

De class zelf maakt nog niets zichtbaar. Je moet eerst objecten aanmaken met het sleutelwoord new:

let b1 = new Ball(50, 100, 2, 'red');
let b2 = new Ball(100, 130, 1.5, 'blue');

En dan roep je hun functies aan:

function draw() {
  background(220);
  b1.move();
  b1.show();
  b2.move();
  b2.show();
}

Tip

De constructor() is een functie die wordt automatisch uitgevoerd als je new Ball(...) gebruikt.

Classes in meerdere bestanden

Je kunt classes in meerdere bestanden plaatsen. Dit is handig als je je code in je project wilt opsplitsen en zo overzichtelijker te maken. Zorg dat je de classes in de juiste volgorde in je HTML-bestand aanroept.

Als je de class Ball nodig hebt in het programma sketch.js, dan moet je eerst de class Ball in het bestand ball.js inladen in je HTML-bestand.

<script src="ball.js"></script>
<script src="sketch.js"></script>

---

3. Veel objecten tegelijk beheren

Gebruik een array om veel objecten tegelijk aan te maken:

let balls = [];

function setup() {
  createCanvas(400, 200);
  for (let i = 0; i < 10; i++) {
    let ballColor = color(random(255), random(255), random(255));
    balls.push(new Ball(random(width), random(height), random(1, 3), ballColor));
  }
}

function draw() {
  background(220);
  for (let oneBall of balls) {
    oneBall.move();
    oneBall.show();
  }
}

Mini-opdracht

• Voeg een bounce() functie toe die zorgt dat de bal stuitert tegen de randen.
• Voeg een changeColor() functie toe die de kleur verandert bij elke botsing.

---

4. Eigenschappen uitbreiden

Je kunt de class aanpassen om meer gedrag toe te voegen zonder andere code aan te raken.

class Ball {
  constructor(x, y, speed, color, radius) {
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.color = color;
    this.radius = radius;
  }

  move() {
    this.x += this.speed;
    if (this.x > width - this.radius || this.x < this.radius) {
      this.speed *= -1;
    }
  }

  show() {
    fill(this.color);
    circle(this.x, this.y, this.radius * 2);
  }
}

Nu kun je eenvoudig ballen met verschillende groottes maken:

balls.push(new Ball(200, 150, 3, 'green', 30));

Denkvraag

Waarom is het handiger om de radius in de class op te slaan in plaats van in een losse variabele?

---

5. Vooruitblik: overerving (inheritance)

Soms wil je dat een class voortbouwt op een andere class. Bijvoorbeeld: je hebt gewone ballen, maar je wilt er één die beweegt met zwaartekracht.

class GravityBall extends Ball {
  constructor(x, y, speed, color, radius, gravity) {
    super(x, y, speed, color, radius);
    this.gravity = gravity;
  }

  move() {
    this.y += this.gravity;
    super.move(); // gebruik de move() van Ball
  }
}

Nu kun je gewone en speciale ballen combineren:

let g = new GravityBall(100, 50, 2, 'purple', 20, 1);

Mini-opdracht: Maak een GravityBall en een gewone Ball en laat ze samen op het canvas bewegen. Wat merk je op?

Tip

extends betekent dat een class de eigenschappen en functies van een andere class overneemt. Zo kun je logica hergebruiken en uitbreiden.

---

6. Vergelijking: object vs. class vs. inheritance

Aspect	Object	Class	Subclass (Inheritance)
Structuur	Eén specifiek ding	Blauwdruk voor meerdere dingen	Breidt een andere class uit
Hergebruik	Slecht (copy-paste)	Goed	Uitstekend (gedrag overnemen)
Aanmaak	Handmatig	Met new	Met new (inclusief parent-functies)

---

7. Reflectie

Met classes:

• Schrijf je minder herhalende code.
• Kun je makkelijk veel objecten beheren.
• Kun je gedrag uitbreiden met inheritance.

Mini-opdracht: Gebruik een Ball- en GravityBall-class in één animatie. Laat de ene stuiteren en de andere vallen.

---

Begrippen

• Class: blauwdruk voor objecten met dezelfde structuur en gedrag.
• Constructor: speciale functie binnen een class die startwaarden instelt.
• Instance: concreet object dat gemaakt is met new.
• Method: functie die bij een class hoort.
• Encapsulatie: samenbrengen van data en gedrag binnen een logische eenheid.
• Inheritance (overerving): een class kan voortbouwen op een andere class en zo gedrag overnemen en uitbreiden.