5. Synthese

* Uitgedeeld op 6 november 2025.
* Deadline: aftekenen in de les, uiterlijk 27 november 2025.
* Met deze opdracht denken we dat je zo'n 1 - 3 uur bezig bent tot deel d. Voor verdere stappen ben je waarschijnlijk wat meer tijd kwijt.
* Bronnen bij deze opdracht: Syllabus | P5.js Sound reference
* Schrijf commentaar bij de code die je maakt, zodat duidelijk wordt wat je doet.

Je gaat in deze opdracht een synthesizer bouwen met p5.js. Om deze synthesizer aan te sturen maak je een aantal vormen in je canvas. Door deze te versplaatsen met je muis pas je de geluiden aan.

a. simpele oscillator

Maak een functie die een oscillator met envelope afspeelt en roep die functie aan als je op de muis klikt. Vergeet niet default-parameters te geven aan de oscillator en de envelope. Zodat deze bijvoorbeeld op 330Hz klinkt, een amplitude heeft van 0.5, een attack-tijd van 100ms en een decaytijd van 1 seconde

function makeSound() {
    //hier die functionaliteit om een geluid af te spelen
}

function mousePressed() { 
    makeSound(); //hier roep je de functie aan.
}

b. frequentie aanpassen

Pas de functie zo aan, dat je als argument een MIDI-noot kan meegeven en deze omrekend naar de frequentie van de oscillator. Hiervoor kan je de midiToFreq-functie gebruiken. 

function makeSound(midi) {
    //hier die functionaliteit om een geluid af te spelen
}

function mousePressed() { 
    makeSound(60); //hier roep je de functie aan.
}

c. voeg een effect toe

Zorg dat je een effect toevoegt aan de oscillator. Dit kan een reverb, delay of filter zijn. Je bent vrij om te kiezen welke waarden je de parameters geeft.

d. teken een vorm

Je gaat een vorm tekenen op het canvas waarmee je de oscillator kan aansturen: Maak daarvoor eerst een array waarin je de x/y-coördinaten, hoogte en breedte voor een vorm opslaat, noem deze array controller. teken de vorm vervolgens in de Draw()-functie. Je mag zelf kiezen welke vorm deze controller krijgt. 

let controller = [x,y,h,b]

function draw() { 
    //teken hier de vorm
}

e. check een klik op de controller

Maak een functie die checkt of de muis binnen (of buiten) de hierboven gemaakte controller is. Speel de oscillator af als er op de controller geklikt wordt.

e1.

Maak een functie mouseInController(), en geef deze de mogelijkheid een argument te ontvangen. Dit argument is de array met informatie van de controller-vorm


function mouseInController(controllerArray) {

}
e2.

Zorg dat deze functie uiteindelijk true terugstuurt als de muis binnen de vorm is, en false als deze erbuiten is. Gebruik de informatie uit de array als argument voor de functie.

Om te bepalen of de muis binnen de vorm is zou je gebruik kunnen maken van de dist() functie, of door de positie en grootte van de vorm te vergelijken met de mouseX en mouseY van de muis.

e3.

Roep de functie mouseInController() aan in de mousePressed()-functie en zorg dat, als het resultaat van mouseInController() gelijk is aan true, de oscillator wordt afgespeeld.

f. versleep de vorm en pas parameter aan.

Gebruik de mouseInController()-functie om de positie van de "controller" te veranderen als je de muis sleept (dragged). Aan de hand van de positie van de controller pas je parameters van je oscillator aan. Dit kan de toonhoogte zijn, de delay-tijd, de reverb-dry/wet mix of de filter-cutoff. Afhankelijk van welk effect je in stap c gekozen hebt.

f1.

Maak een functie mouseDragged() en roep binnen deze functie de functie mouseInController() aan. De mouseDragged()-functie wordt automatisch aangeroepen zodra je met je muis sleept.

f2.

Zorg dat als er true uit mouseInController() komt, de positie van de controller-vorm wordt aangepast naar de positie van de muis, en daardoor de verplaatst kan worden op het scherm.

f3.

Maak dat de positie van het object de gewenste parameter aanpast. Je kan hiervoor de x- of y-positie van de muis gebruiken. Om van deze x- of y-positie een zinvolle waarde te maken voor de parameter die je aan wil passen zal je waarschijnlijk de map()-functie van p5 nodig hebben.

(Beoordeling: voldoende)

g. maak een tweede oscillator en controller

Maak een tweede array voor controller-array waarmee je een andere vorm kan tekenen op het scherm. Zorg dat deze een tweede oscillator kan aansturen.

(Beoordeling: goed)

h. geavanceerde opdrachten

Kies twee van onderstaande opdrachten voor een zeer goed

(Beoordeling: zeer goed)