les 10 - Classes & Objecten


Hier de presentatie van de les van 28 november 2024: Javascript-les-10.pdf

Een afbeelding van de 1000-noten:

Screenshot%202024-11-28%20at%2012.12.46

En hieronder de code uit de les:

//een lege array voor alle noten
let arr = []

function setup() {
  createCanvas(windowWidth,windowHeight);
  background(255);
  for(let i = 0; i <10;i++) {
    //zet 10 noten op willekeurige plekken
    arr.push(new Noot(random(width),random(height)));
  }
}

function draw() {
  //teken zoveel noten als er in de array zitten
  for(let i = 0; i < arr.length;i++) {
    arr[i].teken();
  }
}

function mousePressed() {
  //voeg een noot toe bij een klik op de muis
  //de x- en y-positie nemen de x- en y-positie
  //van de muis over
  arr.push(new Noot(mouseX,mouseY));
}
//maak een classbeschrijving
class Noot {
  //constructor wordt altijd uitgevoerd bij aanmaken van het object
  //je kan parameters meegeven aan de constructor
  constructor(x,y) {
    this.x = x;
    this.y = y;
    this.s = random(10,30);
  }
  //beschrijf de tekenfunctie voor de noot.
  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 - 75
    );
  }
}