Opdracht 4
Sequencer
Uitgedeeld op 29 oktober 2020
Deadline: aftekenen in de les, uiterlijk 26 november
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.
Typ vervolgens update
om de code te updaten om gebruik te kunnen maken van nieuwe csdosc-functies.
Stap 2:
Teken 6 vierkantjes op gelijke afstand van elkaar, netjes gecentreerd in het midden van de sketch. Gebruik hiervoor een for-loop.
Je kunt meer informatie vinden over for-loops in de syllabus en de video van Nathan.
Stap 3:
Maak een array met aan/uit-waardes voor iedere stap en geef de stappen die aan staan een andere kleur dan de stappen die uit staan.
Je kunt meer informatie vinden over arrays in de syllabus en de video van Nathan.
Stap 4:
Maak een waarde aan om bij te houden op welke stap de sequencer is en zorg ervoor dat de waarde iedere x-aantal frames met 1 omhoog gaat.
Let op: deze waarde mag nooit groter worden dan het aantal stappen in de sequencer.
Zorg er vervolgens voor dat er visueel duidelijk is bij welke stap de sequencer is.
mogelijk handig om te gebruiken: %(modulo), frameCount
Stap 5:
Laat een noot klinken met behulp van de makeNote functie of laat een sample klinken als de sequencer aangekomen is bij een stap die aan staat.
Maak vervolgens een lijst met nootwaarden of samples zodat er bij iedere stap een andere noot of sample klinkt.
Stap 6:
Zorg ervoor dat je als gebruiker een stap aan of uit kan zetten
mogelijk handig om te gebruiken: mousePressed(), mouseReleased(), mouseX, mouseY
Extra's:
- Maak een functie die een sequencer automatisch volgens een bepaald algoritme vult (aan/uit-status, noot/sample-informatie)
- Maak een optie om het aantal stappen in de sequencer dynamisch aan te passen
- Maak een optie om het tempo aan te passen en als BPM in te vullen
- Maak een interessante visualisatie bij de sequencer
- Maak meedere sequencers onder elkaar om zo een drumcomputer na te maken
Voor gebruikersinteractie kan je kijken naar de P5js-DOM-functionaliteiten