les 12 - Classes & Objecten

---

Hier de presentatie van de les van 30 november 2023: Javascript les 12 - classes & objecten.pdf

Hieronder de code uit de les:

//maak een array aan waar de objecten in worden opgeslagen
let noten = [];

//bepaal hoeveel noten er getekend moeten worden.
let aantalNoten = 10;
function setup() {
  createCanvas(800,600);
  background(255);
  //vul met behulp van een for-loop de array met nieuwe objecten
  for(let i = 0; i < aantalNoten; i++) {
    //met new en daarna de naam van de class maak je een nieuw object
    noten[i] = new Note();
  }
}

function draw() {
  //roep met behulp van een for-loop alle teken-methods aan
  //met noten.length zorg je dat ongeacht de lengte van de array
  //alle noten worden afgespeeld
  for (let i = 0; i < noten.length; i++) {
    noten[i].teken();
  }
}

function mousePressed() {
  //voeg een noot toe als er op de muis wordt geklikt
  noten.push(new Note());
}

class Note {
  //de constructor wordt bij maken van het object uitgevoerd
  constructor() {
    //deze variabelen zijn uniek voor het object dat je maakt
    this.x = random(10,700);
    this.y = random(100,600);
    this.s = random(10,20);
    console.log("hallo!");
  }
  //deze method (vergelijkbaar met functie) zorgt
  //dat de noot getekend wordt.
  teken() {
    fill('darkgreen');
    stroke('darkgreen');
    ellipse(this.x,this.y,this.s);
    line(this.x+(this.s/2), this.y, this.x+(this.s/2), this.y-(2.5*this.s));
  }
}