Les 13a - classes deel 2

---

Hier de presentatie uit de les: Javascript-les-13-classes-herhaling.pdf

hieronder de voorbeeldcode uit de les:

/*
-> We maken een classomschrijving om een noot te tekenen
-> Bij opstarten van de code verschijnen er een 
   x-aantal willekeurig op het scherm
-> Er is 50% kans op een kwartnoot, 30% kans op 
   een halve noot en 20% kans op een hele noot.
-> Bij klikken op de muis verschijnt een nieuwe noot op 
   de positie van de muis
*/
//array voor noten die we willen gebruiken
let noten = [];
//aantal noten dat initieel worden gemaakt
let aantalNoten;
//lijstje dat de nootnamen aangeeft
let nootNamen = ["kwart","half","heel"];

function setup() {

  createCanvas(800,600);
  background(255);

  //random aantal noten  
  aantalNoten = floor(random(1,25));

  //for-loop dat aantal noten maakt
  //elke noot krijgt unieke x-y-positie
  for (let i = 0; i < aantalNoten; i++) {
    let newX = random(10,width-10);
    let newY = random(10,height-10);
    noten.push(new Noot(newX, newY));
  }
}

function draw() {
  //teken alle noten die in de array staan.
  for (let i = 0;i < noten.length; i++) {
    noten[i].teken();
  }
}

//als de muis geklikt wordt, voeg een noot toe
//op de muispositie
function mousePressed() {
  noten.push(new Noot(mouseX, mouseY));
}

//als je met de muis sleept, voeg een noot toe
//op de muispositie
function mouseDragged() {
  noten.push(new Noot(mouseX, mouseY));
}

//de class met noot-informatie
class Noot {
  //startX en startY komen mee vanaf het moment
  //dat het object aangemaakt wordt
  constructor(startX, startY) {

    this.x = startX;
    this.y = startY;
    this.s = random(10,20);
    //0 = kwart, 1 = half, 2 = heel
    //type is default 0
    this.type = 0;
    let chance = random(100)
    //30% kans op halve noot
    if (chance >= 50 && chance < 80) {
      this.type = 1;
    }
    //20% kans op kwartnoot
    else if (chance >= 80) {
      this.type = 2;
    }
    //laat zien welk type er gemaakt is.
    console.log(nootNamen[this.type]);    
  }
  teken() {
    //default witte noot
    noFill();
    //als kwart of halve noot
    //teken stok
    if(this.type <= 1) {
      line(this.x + this.s/2, this.y,this.x + this.s/2,this.y-this.s*3);      
    }
    //als kwartnoot, maak zwart
    if (this.type == 0) {
      fill(0);
    }
    //teken de bol
    ellipse(this.x,this.y,this.s);
  }
}