Objecten gebruiken: gegevens en gedrag bij elkaar¶

Doel¶

Je leert wat een object is, waarom het handig is, en hoe je het kunt toepassen in p5.js. Objecten helpen je om gegevens en gedrag die bij elkaar horen samen te voegen. Zo wordt je code overzichtelijker en makkelijker aan te passen.

1. Het probleem: teveel losse arrays¶

In het artikel code structuur heb je geleerd om meerdere waarden op te slaan in arrays. Maar als je veel eigenschappen per object wilt bijhouden, wordt het snel rommelig:

let x = [50, 100, 150];
let y = [100, 120, 140];
let speed = [1, 2, 1.5];
let color = ['red', 'blue', 'green'];

function draw() {
  background(220);
  for (let i = 0; i < x.length; i++) {
    x[i] += speed[i];
    fill(color[i]);
    circle(x[i], y[i], 20);
  }
}

Elke bal bestaat nu uit losse stukjes informatie die verspreid staan over vier arrays. Als er iets misgaat, is het lastig te begrijpen welke gegevens bij elkaar horen.

Denkvraag

Wat hoort er allemaal bij één bal? Hoe kun je dat logisch groeperen?

2. Introductie van objecten¶

Een object groepeert alle eigenschappen en functies die bij één ding horen.

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

Nu zitten alle gegevens en gedragingen van één bal netjes bij elkaar.

Mini-opdracht

Kopieer de code hierboven en roep in draw() de functies ball.move() en ball.show() aan.
Voeg een tweede bal toe met een andere kleur en snelheid.

3. Meerdere objecten in een array¶

Je kunt ook meerdere objecten tegelijk beheren door ze in een array te stoppen.

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

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

Mini-opdracht

Voeg nog een bal toe aan de array.
Laat elke bal van richting veranderen als hij de rand raakt.

Merk op dat elk object dezelfde functies heeft. Dit is een teken dat je later een class kunt gebruiken.

4. Gedrag uitbreiden¶

Je kunt binnen objecten extra functies toevoegen om gedrag aan te passen:

let ball = {
  x: 200,
  y: 150,
  speed: 2,
  color: 'purple',
  move() {
    this.x += this.speed;
    if (this.x > width || this.x < 0) {
      this.speed *= -1;
      this.changeColor();
    }
  },
  show() {
    fill(this.color);
    circle(this.x, this.y, 20);
  },
  changeColor() {
    this.color = color(random(255), random(255), random(255));
  }
};

Mini-opdracht

Laat de kleur veranderen telkens als de bal stuitert.
Voeg eventueel geluid toe bij elke botsing.

5. Reflectie¶

Wat heb je geleerd:

Een object bundelt alle data en functies die bij elkaar horen.
Je kunt meerdere objecten opslaan in een array.
Objecten helpen om chaos te vermijden als je project groter wordt.

Vooruitblik: Als je merkt dat je veel objecten met dezelfde structuur maakt, kun je een class gebruiken. Een class is een blauwdruk waarmee je snel meerdere objecten kunt aanmaken zonder copy-paste.

Begrippen¶

Object: bundeling van gegevens (properties) en gedrag (methods).
Property: variabele die bij een object hoort.
Method: functie die binnen een object hoort.
this: verwijst naar het object zelf.
Encapsulatie: het idee dat gegevens en functies samen horen en niet los moeten liggen.