4. Functies

* Uitgedeeld op 23 oktober 2025.
* Deadline: aftekenen in de les, uiterlijk 20 november 2025.
* Met deze opdracht denken we dat je zo'n 1 a 2 uur bezig bent om een voldoende te scoren.
* Bronnen bij deze opdracht: Syllabus | P5.js reference

Inleiding

In deze opdracht ga je eigen functies maken en gebruiken. Functies maken je programmeerwerk overzichtelijker en eenvoudiger.

Samenvatting:

Teken een eenvoudig samengesteld object

Begin met een leeg voorbeeld door een kopie te maken van empty-example. De kopie noem je draw_notes.

Tot nu toe heb je voor het tekenen van objecten vooral gewerkt met de vormen die in P5js aanwezig zijn, zoals ellips, cirkel, rechte lijn en rechthoek. Maak eens een vorm die eruitziet als ÊÊn object, maar samengesteld is uit twee delen, bijvoorbeeld twee rechthoeken. Houd het simpel. De enige eis is dat het eruit ziet als ÊÊn object.

Teken een noot-symbool

Teken een muzieknoot die bestaat uit een bolletje waar een verticaal stokje aan vastzit, zoals een kwartnoot meestal getekend wordt. Het bolletje mag een cirkel of ellips zijn. Nu moet je gaan nadenken hoe je het stokje aan de rechterkant van het bolletje plakt.

Maak de kleur van de rand en de binnenkant van het bolletje hetzelfde als de kleur van de stok.

Teken de noot met een functie

Maak een functie drawNote() en verplaats alle tekenfuncties daar naartoe. Wanneer je dan binnen je draw()-loop de functie drawNote() aanroept moet je hetzelfde zien als daarnet.

Geef de noot een positie en teken er nog een paar

Wanneer je drawNote() twee keer aanroept zie je geen verschil omdat de objecten over elkaar heen getekend worden. Daarom gaan we de positie aan de functie vertellen. Voeg de parameters x en y toe: function drawNote(x,y)

Binnen de functie neem je x en y over naar de positie van het bolletje. De uiteinden van de stok bereken je dan ten opzichte van het bolletje zodat de stok meeschuift wanneer het bolletje op een andere plek komt.

Roep dan drawNote() twee keer aan met verschillende posities, bijvoorbeeld:

    drawNote(100,100);
    drawNote(300,100);

Ook leuk:

    drawNote(mouseX,mouseY);

Gebruik drawNote() in je sequencer

In de vorige opdracht heb je een sequencer gemaakt die noten afspeelt. Neem je nieuwe functie drawNote() over naar je sequencer zodat je daar met noot-symbolen kunt werken in plaats van simpele blokjes. Maak voor de zekerheid een kopie van je sequencer, zodat je altijd terug kan vallen op je oorspronkelijke versie

(Optioneel) Noten met vlaggen

Achtste noten hebben een vlaggetje of streepje. Probeer eens om binnen drawNote() zo'n vlaggetje toe te voegen. Dit mag met een rechte lijn Wil je een vloeiend lijntje, dan kun je eens kijken naar bezier curves https://p5js.org/reference/p5/bezier

(Optioneel) Toonhoogte zichtbaar

Zorg dat de y positie van elke noot afhangt van de toonhoogte van de noot.

Sequencer-control

Om je sequencer tijdens het afspelen interessanter te maken kun je de melodie transponeren of roteren. Maak hiervoor een functie transponeer() of een functie roteer(). Je mag kiezen welke van de twee je maakt.

Beide functies krijgen een array als input en geven een array als resultaat terug (met return). Bovendien moet je aangeven hoe ver en in welke richting je transponeert of roteert.

Beoordeling voldoende: drawNote() tekent noten in de sequencer en sequencer kan transponeren of roteren met de zelfgemaakte functies.

Beoordeling goed: bovenstaande + de klinkende noot ziet er anders uit dan de rest + transponeren/roteren is zichtbaar gemaakt + alle optionele subopdrachten uitgevoerd.

Beoordeling zeer goed: verrassende eigen toevoegingen