Les 8 - Functies

---

Hieronder de presentatie van de les over functies: Javascript-les-8-functies.pdf

---

Hieronder de code uit de tweede les, met commentaar.

//maak twee verschillende lijsten met midi-noten
let noten = [0,3,6,8,11];
let nogMeerNoten = [2,6,3,11,9];

//maak een counter-variabele om door de noten-lijst te lopen
let teller = 0;

//maak een lege lijst voor tijdsintervallen
let timeList;

//maak een couter-variabele om door de tijdsinterval-lijst te lopen
let lengthTeller = 0;

function setup() {
  createCanvas(800,600);
  background(255);
  textSize(48);

  //roep hier de onderaan de pagina aangemaakte generateTimes-functie aan
  //het resultaat daarvan wordt in de variabele timeList opgeslagen. 
  timeList = generateTimes(1,100,200);
}

function draw() {
  //plaats hier de code die continue herhaald moet worden.
  background(255);

  //roep de functie everyXFrames aan die onderaan de pagina is gemaakt
  //deze functie geeft elke 500 frames een true. 
  //in dat geval wordt er één opgeteld bij lengthTeller.
  if (everyXFrames(500)) {
    lengthTeller++;
  }

  //maak een variabele die aangeeft om de hoeveel frames 
  //de noot moeten worden afgespeeld.
  //doe dit door uit de timeList een variabele te halen
  //zorg daarbij dat de lengthTeller nooit groter wordt dan de timeList
  let frameVar = timeList[lengthTeller%timeList.length];

  //roep de functie everyXFrames aan die onderaan de pagina is gemaakt
  //deze functie geeft elke x frames een true. 
  //x wordt bepaald door de timeList
  if (everyXFrames(frameVar)) {

    //speel een noot uit de lijst noten, tel daar 60 bij op.
    makeNote(noten[teller%noten.length]+60,0.8,1000);
    teller++;
  }

  //doe hetzelfde als hierboven bij frameVar, maar pak dan 1 element 
  //verder uit de lijst. dus als frameVar het 2e element uit de lijst is, 
  //dan wordt secondFrameVar het 3e element uit de lijst.
  let secondFrameVar = timeList[lengthTeller+1%timeList.length]

  if (everyXFrames (secondFrameVar)) {

    //speel een noot uit de lijst nogMeerNoten, tel daar 48 bij op
    makeNote(nogMeerNoten[teller%nogMeerNoten.length]+48,0.3,200);
    teller++;
  }

  //laat de teller in het scherm zien. 
  text(teller,width/2,height/2);
}

//zelfgemaakte functie die een true teruggeeft elke keer als 
//de modulo van de frameCount en het getal dat je als argument (frame)
//meegeeft gelijk is aan 0.
//anders geeft ie false terug.
function everyXFrames(frame) {
  if (frameCount % frame === 0) {
    return true;
  }
  return false;
}

//zelfgemaakte functie die een lijst met intervaltijden genereert
//verwachtte argumenten: 
// - aantal, hoeveel waardes komen eruit
// - min, wat is de minimale waarde
// - max, wat is de maximale waarde
function generateTimes(aantal,min,max) {

  //een tijdelijke, lege lijst om de waardes in op te slaan
  let tempArray = [];

  //bepaalde range van wat het getal mag zijn
  let range = max - min; 

  //laat een for-loop zoveel keer loopen als er in aantal is ingevuld
  for (let i = 0; i < aantal; i++) {

    //voeg een getal aan de tijdelijke array toe
    //dit getal is als volgt opgebouwd:
    // - de range wordt gedeeld door het totale aantal
    // - het getal dat daaruit komt wordt vermenigvuldigd met i
    // - daarbij wordt de helft van de range / het aantal toegevoegd
    // - dit om een offset te geven, zodat het evenredig verdeeld wordt
    // - voeg daar de minimum-waarde aan toe.
    tempArray.push((range/aantal * i) + (range/aantal)/2 + min);
  }

  //de tempArray wordt teruggegeven naar daar waar de functie werd 
  //aangeroepen in dit geval in de setup-functie.
  return tempArray;
}