3. Sequencer

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

a. Nieuwe sketch

Maak een nieuw project in je CSDOSC map door empty-example te kopiëren en een naam te geven als opdracht3_sequencer.

Start csdosc door in de terminal npm start te typen in de csdosc map.

b. array's met noot-informatie maken

Maak drie array's aan:
- Een array met een zelfgekozen aantal midinoten (tussen 0 en 127).
- Een array met een zelfde aantal amplitude-waarden (tussen de 0. en de 1.) als midinoten.
- Een array met een zelfde aantal nootlengten in miliseconden als midinoten.

c. een counter maken

Om een sequencer te kunnen maken heb je een oplopende counter nodig. In Max zit er standaard een counter-object die je met metro aan kan sturen, maar in P5.js zal je dit zelf moeten maken.

Maak een globale variabele counter waarmee je de waarde van de counter bij kan houden.
Zorg dat het getal in de counter-variabele elke x-aantal frames optelt, je hebt hier onder andere frameCount bij nodig. Bedenk hoe je - met de waarde van het aantal frames sinds het opstarten van de sketch - eens in de zoveel stappen iets kan doen.

LET OP het is NIET de bedoeling dat je de framerate van je sketch aanpast en op die manier een "clock" voor je sequencer hebt. Dus geen frameRate(2) in je setup om het BPM te bepalen.
Laat de counter-variabale niet groter worden dan de lengte van de in stap 2 aangemaakte arrays

d. noten afspelen en stoppen

Laat als de counter optelt een noot afspelen met de overeenkomende midi- / amplitude- & duurwaarden uit de arrays
tip: laat met behulp van text de waarde van de counter-variabele in het canvas zien, zodat je weet of die op de juiste manier optelt

tip: om noten af te spelen kan je gebruik maken van de functie makeNote(). Meer informatie hierover staat hier
Zorg dat er een functie komt waarmee je de sequence met de spatiebalk kan stoppen en starten.
tip: gebruik hiervoor de keyPressed()-functie en key of keyCode

e. visueel maken

Je gaat het aantal stappen dat de array met noten bevat visueel weergeven op het scherm, je bent vrij om zelf in te vullen hoe je dit doet, als er maar evenveel objecten zichtbaar zijn op het scherm als er noten in de lijst staan. En dat deze evenredig over het scherm verdeeld zijn. Gebruik hiervoor een for-loop.
Denk hierbij bijvoorbeeld aan een x-aantal cirkels op het scherm, of een x-aantal rechthoeken over de volle hoogte van het scherm. Zie onderaan het scherm voor een aantal voorbeelden
Beschrijf met de text-functie welke midinoot bij welk vlakje hoort en in welke stap de sequencer nu is.

(beoordeling: voldoende)

f. beweging zichtbaar maken

Geef visueel weer bij welke stap de sequencer op dit moment is, door bijvoorbeeld de kleur van het vakje te veranderen, de rand ervan aan te passen etc.

(beoordeling: goed)

g. stappen aan- en uitzetten

Kies een van (of allebei) de volgende opdrachten voor extra uitdaging.

Maak het mogelijk om door op de vlakken/cirkels/vierkanten die de stappen representeren te klikken om de betreffende stap aan of uit te zetten.
- Zorg daarbij ook dat deze stap vervolgens niet wordt afgespeeld als deze uit staat.
Maak de lijsten voor midi-noot, amplitude en nootlengten van verschillende lengtes en zorg op die manier dat er verschuivende patronen ontstaan.

(beoordeling: zeer goed.)

Voorbeeld

Hieronder een aantal ideeën over hoe het eruit kan zien: idee_1 idee_2