Les 11 - classes

---

Hier is de presentatie van de les over classes: Javascript les 11 - classes & objecten.pdf

//een lege array waar we een 
//x-aantal noten in kunnen opslaan
let noten = [];

function setup (){
  createCanvas(windowWidth,windowHeight);
  fullscreen();
  background(255);

  //met behulp van een for-loop kunnen we 
  //een x-aantal keer een nieuwe noot toevoegen
  //aan de noten-array.
  for (let i = 0;i < 10;i++) {
    //met de push-functie voeg je een element toe
    //aan het eind van de array.
    //
    //Het nieuwe object dat aangemaakt is vanuit 
    //de class-omschrijving wordt in de array gezet.
    //tegelijk wordt de constructor-method uit de
    //class-omschrijving uitgevoerd.
    noten.push(new Note())
  }

}

function draw() {

  //laat de for-loop zovaak herhalen als het aantal
  //elementen in de array.
  for (let i = 0; i < noten.length; i++) {
    //voer de teken-method uit de class-
    //omschrijving uit.
    noten[i].teken();
  }
}

function mousePressed() {
  //voeg een nieuwe noot aan het eind
  //van de array toe, elke keer als
  //er op de muis wordt geklikt.
  noten.push(new Note())
}

class Note {
  //deze constructor-method wordt uitgevoerd zodra er 
  //een nieuwe object vanuit deze class-omschrijving wordt
  //gemaakt.
  constructor() {
      //met this.x, this.y, etc. wordt er een unieke 
      //variabele gemaakt die alleen voor het object
      //dat wordt gemaakt geldt.
      this.x = random(20,width-20);
      this.y = random(60,height-20);
      this.s = random(3,20);
  }
  // je kan oneindig veel methods (functies binnen
  // een object) aanmaken in je class-
  // omschrijving. Deze teken()-method
  // zorgt ervoor dat een kwart-noot 
  // wordt getekend. 
  teken() {
    fill(0);
    ellipse(this.x,this.y,this.s);
    line(this.x+this.s/2,this.y,this.x+this.s/2,this.y-this.s*3);
  }
}