6. Muzikaal canvas

* Uitgedeeld op 28 november 2024.
* Deadline: aftekenen in de les, uiterlijk 19 december 2024.
* Met deze opdracht denken we dat je zo'n 2 - 4 uur bezig bent tot en met stap 5.
* Bronnen bij deze opdracht: Syllabus | P5.js reference

Inleiding

We behandelen in deze opdracht alle lesstof die jullie afgelopen weken gehad hebben, inclusief het laatste onderdeel classes & objecten. In deze opdracht realiseer je een muzikaal canvas. Door te klikken of automatisch (volgens een bepaald patroon) verschijnen er visuele objecten op het scherm. Tegelijkertijd hoor je een geluid dat gekoppeld is aan dit visuele object. Dus de positie, grootte, kleur, etc. heeft een relatie tot de klank die je hoort. Na een bepaalde tijd verdwijnt het object en dus ook het geluid.
Bij deze opdracht is het verplicht gebruik te maken van classes en objecten en de p5-sound library.

a. Maak een classbeschrijving op papier

Je gaat straks een classomschrijving maken van het visuele object dat jij wil dat er gegenereerd moet worden. Voordat je dat doet is het goed om na te denken welke functies en eigenschappen je voor dit object gaat maken.

eigenschappen

Beschrijf eerst op papier wat de eigenschappen moeten zijn en hoe de waarde van deze eigenschappen bepaald moeten worden.

Een eigenschap is bijvoorbeeld de positie. Wordt deze willekeurig bepaald, of door waar de gebruiker in het canvas klikt?

functies

Beschrijf vervolgens ook de functies die het object moet krijgen.
Verplichte functies zijn verschijnen, geluid afspelen en verdwijnen. Je bent vrij om nog veel meer verschillende functies te bedenken.
Schrijf hierbij ook op:

laat deze papieren uitwerking ook zien bij de beoordeling

b. Werk de class uit in code - begin met de basis.

zie voor meer informatie voor deze stap: classes

c. Maak ÊÊn object uit de classbeschrijving.

zie voor meer informatie voor deze stap: objecten maken

Nu je de omschrijving van de class hebt kan je objecten gaan maken.
Zorg eerst dat er een object wordt aangemaakt in de setup()-functie en dat dit object wordt getekend in de draw()-functie.

d. Maak meerdere objecten.

zie voor meer informatie voor deze stap: objecten in array

Nu het gelukt is om ÊÊn object aan te maken ga je met behulp van een array meerdere objecten aanmaken. Doe dit op de manier zoals je in stap a hebt omschreven.

bijvoorbeeld als je kiest voor verschijnen bij klikken, voeg bij elke klik een object toe aan een lijst, zorg dat van alle objecten in de lijst de teken()-functie wordt aangeroepen

e. Laat de objecten weer verdwijnen.

Pas de classomschrijving zo aan dat de objecten na een bepaalde tijd niet meer zichtbaar zijn. Voer hierbij uit wat je in stap a hebt beschreven.

f. Voeg geluid toe

Voeg aan je classomschrijving toe dat er geluid wordt afgespeeld zodra een object verschijnt.
Dit kan een gesynthetiseerd geluid zijn of een sample die wordt afgespeeld of start met loopen.
Maak het een muzikaal geheel, dus probeer een onsamenhangende kakofonie bij het verschijnen van meerdere objecten te voorkomen.
let op, zorg dat het geluid maar ÊÊn keer getriggered wordt bij verschijnen en niet continu opnieuw wordt afgespeeld
let op, zorg dat het geluid in ieder geval weer gestopt is als het visuele object verdwenen is

(beoordeling: voldoende)

g. adaptief geluid

Laat het geluid meebewegen met het bewegen/verdwijnen van het visuele object. Je zou bijvoorbeeld de toonhoogte, een synthesizer parameter, de afspeelsnelheid van een sample of iets dergelijks aan, aan de hand van hoe het visuele object verdwijnt.

een voor de hand liggende optie zou zijn het geluid uitfaden als het object langzaam verdwijnt. Probeer vooral een creatieve manier te vinden

(beoordeling: goed)

h. geavanceerde opdrachten

(beoordeling: zeer goed)