Sequencer
* Uitgedeeld op 11 november 2022.
* Deadline: aftekenen in de les, uiterlijk 1 december 2022.
* Met deze opdracht denken we dat je zo'n 1 - 3 uur bezig bent tot stap 6. Voor verdere stappen ben je waarschijnlijk wat meer tijd kwijt.
* Bronnen bij deze opdracht: Syllabus | P5.js reference
Stap 1:
Maak een nieuw project in je CSDOSC map door empty-example
te kopiΓ«ren en een naam te geven als opdracht4_sequencer
.
Start csdosc door in de terminal npm start
te typen in de csdosc map.
Stap 2:
-
Maak drie array's aan:
- Een array met een x-aantal midinoten.
- Een array met een gelijk aantal amplitude-waarden tussen de 0. en de 1.
- Een array met een gelijk aantal nootlengten in miliseconden
-
Maak ook een variabele
counter
aan die je kan gebruiken om door de elementen in de arrays te lopen.
Stap 3:
-
Zorg dat de waarde counter-variabele elke x-aantal frames optelt, je hebt hier onder andere
frameCount
bij nodig.LET OPhet 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
- Laat als de counter optelt een noot afspelen met de overeenkomende midi- / amplitude- & duurwaarden uit de arrays
- Zorg dat er een functie komt waarmee je de sequence met de spatiebalk kan stoppen en starten
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
Stap 4:
- Maak een functie die alle elementen uit de lijst 1 positie naar rechts verschuift. Bedenk welke array-functies die je hier in de syllabus vindt je daar bij nodig hebt.
bijvoorbeeld:
console.log(rotate_right([1, 2, 3, 4])); //output is [4, 1, 2, 3]
-
Maak een functie die alle elementen uit de lijst 1 positie naar links verschuift. Bedenk welke array-functies die je hier in de syllabus vindt je daar bij nodig hebt. bijvoorbeeld:
console.log(rotate_left([1, 2, 3, 4])); //output is [2, 3, 4, 1]
Zorg ervoor dat je deze functies kan uitvoeren door op een toets op je toetsenbord te drukken. Handig hiervoor is de functie
keyPressed()
en de variabelekeyCode
enkey
Stap 5:
- Zorg samen met de functies uit stap 4, reverse() en shuffle() dat bij een druk op een van de volgende toetsen:
- de n: de midinoten veranderen
- de d: de duur verandert
- de a: de amplitude verandert
Stap 6:
zie voor meer informatie voor deze stap: Functies maken in Javascript, kijk specifiek naar het kopje 'Verder werken met het resultaat van een functie' en de subkop 'een array teruggeven uit een functie'
- Maak een functie die met behulp van een for-loop ofwel de midi-, amplitude- of duurwaarden willekeurig in een array zet
let noteArray = fillNotes(10) //10 geeft aan hoeveel noten je wil let ampArray = fillAmp(10) //10 geeft aan hoeveel noten je wil let durArray = fillDuration(10) //10 geeft aan hoeveel noten je wil
Deze functie kan de waarden die je eerder in je array hebt gezet overschrijven.
- Kan je de functie ook zo maken dat afhankelijk van welke argumenten je de functie meegeeft er midi-, amplitude of duurwaarden uitkomen:
let noteArray = fillArray(10,"notes"); let ampArray = fillArray(10,"amp"); let durArray = fillArray(10,"dur");
Extra's:
- Kan je de
reverse()
-functie zelf namaken? - Kan je de
shuffle()
-functie zelf namaken? Probeer het zonder op internet de oplossing op te zoeken Maak mooie visuals bij je sequencer Zorg dat je mooie melodietjes kan maken op een muzikale manier Kan je zorgen dat je het tempo van de sequencer kan aanpassen? Kan je een functie maken die alle noten in je sequence transponeert?