1. Javascript - OSC Communicatie

---

* Uitgedeeld op 6 februari 2025.
* Deadline: aftekenen in de les, uiterlijk 27 februari 2025.
* Met deze opdracht denken we dat je zo'n 1 - 3 uur bezig bent. Voor verdere stappen ben je waarschijnlijk wat meer tijd kwijt.
* Bronnen bij deze opdracht: Syllabus | P5.js reference

Het doel van deze opdracht is om OSC-communicatie te verwerken in een P5.js-sketch. Dit doe je in combinatie met Max. Je gaat data van P5.js naar Max versturen en van Max naar P5.js.

a. OSC documentatie & test

• lees de documentatie over OSC goed door. Deze kan je vinden in de Syllabus.
• Bij het installeren van csdosc aan het begin van dit jaar zijn er buiten empty example nog twee andere voorbeelden meegekomen: example_client en example_server
  • Start csdosc op
  • Ga naar localhost:8001
  • Open in een venster example_client en in een ander venster example_server
  • Zet de vensters naast elkaar en kijk of het balletje dat je in example_client beweegt meegaat in example_server
  • Werkt dit? Ga door naar het volgende deel, zo niet ga naar een docent of student-assistent

b. OSC implementeren

• Maak een nieuwe sketch aan en teken een horizontale lijn over de breedte van het canvas, in het midden van de y-as.
• Zorg dat bij elke druk op de spatiebalk de lijn een nieuwe willekeurige plek op de y-as krijgt.
• Voeg een OSC-client toe aan de sketch, gebruik de example_client als voorbeeld.
• Stuur bij elke druk op de spatiebalk de y-positie van de lijn door via OSC naar Max. Geef het OSC-bericht de naam /yPos mee.
• Haal de y-as waarde in Max binnen met [udpreceive] en [route] de waarde.
• [print] de waarde naar de max-console.

c. Geluid toevoegen (in Max)

• schaal de waarde die je via OSC verstuurt in P5js eerst naar een bruikbare midi-noot.
  • zorg dat als de lijn onderaan het scherm staat, midi-noot 60 klinkt
  • zorg dat als de lijn bovenaan het scherm staat, midi-noot 72 klinkt
  • staat de lijn ergens ertussen, laat dan een toon tussen midi-noot 60 en 72 klinken.
• Werk vervolgens in Max de audio uit:
  • gebruik [mtof], [cycle~] of [saw~], [(live.)gain~] en [ezdac~] om de tonen te laten horen

d. Voeg een envelope toe aan geluid

• Voegen een envelope toe aan het geluid, gebruik hiervoor het [line~] en [*~] object.
• Kies een attack- en releasetijd voor de envelope en stuur die met een message.
• Trigger de envelope als er een OSC-waarde binnenkomt via [udpreceive].

e. OSC terugsturen

Het [line~]-object heeft twee outlets. Uit de linker komt het signaal, uit de rechter komt een bang als de line~ is afgelopen.

• stuur een OSC-bericht naar P5.js terug als de line~ klaar is. Gebruik daarvoor het [udpsend] object.
• Gebruik daar ook een adresnaam voor: bijvoorbeeld met de message /retrigger $1.
• implementeer een OSC-server in de P5-sketch, gebruik example_server als voorbeeld.
  • let op in het example_server wordt gebruik gemaakt van poort 9000, net als in example_client. Dit omdat je van het ene naar het andere voorbeeld stuurt. Voor dit voorbeeld heb je twee verschillende poorten nodig, je stuurt van P5.js naar Max, daar gebruik je poort 9000 voor, voor data van Max naar P5.js gebruik je poort 9001.
• zorg dat er een nieuwe positie van de lijn in P5 wordt gekozen en de y-positie door wordt gestuurd als er een OSC-bericht vanuit Max binnenkomt.
  • gebruik hiervoor dezelfde functionaliteit als je in deel b hebt gebruikt.

f. Doorbreek de loop

Er is nu een loop ontstaan waarbij het eind van de [line~] weer een nieuwe trigger genereert voor zichzelf, via de P5-sketch.

• Verzin een manier (dat mag zowel in Max als in P5.js) om deze loop te onderbreken en weer op te starten.

(beoordeling: voldoende)

g. Stuur envelope-data terug naar P5.js

Stuur naast de trigger (als de [line~] aan het eind is) ook de waarde van de linker outlet van de [line~] door. Dit is een signaal en kan je niet zomaar via OSC versturen. Dit moet je eerst omzetten naar het data-domein. Gebruik hier het [snapshot~]-object voor.

• kies een zinvolle waarde voor [snapshot~], om de hoeveel milliseconden moet er een "snapshot" van het signaal gestuurd worden?
• koppel deze waarde in P5.js aan bijvoorbeeld de dikte van de lijn of de achtergrondkleur.
  • Let op: de waarde uit het [line~]-object is tussen 0. en 1., schaal het naar een bruikbare waarde in Max of in P5.

(beoordeling: goed)

f. Wees creatief

Ga los! Maak het zo uitgebreid als je zelf wilt en werk je OSC implementatie uit naar je eigen inzicht. Voeg meer geluidsbronnen toe in Max, stuur meer data heen en weer, gebruik classes en objecten om meerdere objecten te tekenen in P5.js. Kortom, leef je uit!

(beoordeling: zeer goed)