09 - Zvuk - body interface
V posledné lekcie sme sa ponárali do práce so zvukom. Poďme teraz skúsiť využiť potenciál p5.js v trocha inom kontexte - zapojiť na ovládanie "zvukov" viac ľudský interface.
Last updated
V posledné lekcie sme sa ponárali do práce so zvukom. Poďme teraz skúsiť využiť potenciál p5.js v trocha inom kontexte - zapojiť na ovládanie "zvukov" viac ľudský interface.
Last updated
Budeme vychádzať so sketchu z predminulej lekcie - kde máme klávesy ovládatelné klávesnicou.
Prípadne "upravenú" verziu s objektami -> https://editor.p5js.org/igor-kamil/sketches/y5r9owaNa
Plán je rozdeliť sa do tímov. Každý tím si vyberie vlastný interface, pre ovládanie zvuku - cieľom je vytvoriť viac "body interface" - mať medzi sebou a generovaným zvukom čo. Nižšie sú "recepty" na každý z nich. Výsledkom je 3-min performance pred spolužiakmi na konci semináru.
Interfacy:
webcam - detekcia pohybu (frame differencing)
webcam - ovládanie svetlom (brightest point)
playtronica - and now something completely different
framedifferencing v p5.js -> example https://editor.p5js.org/lisajamhoury/sketches/xQRUJkKcC
nastaviť prah citlivosti (koľko pixlov v danom klávese má byť zmenených)
pro tip -> miesto polysynth posielať midi (napr. do garageband / ableton) -> example https://editor.p5js.org/igor-kamil/sketches/8Pruz9o4Z
Zapojiť playtronicu.
Od nej pre zmenu dostávaš midi signlál.
Použiť knižnicu https://webmidijs.org/docs/
Zachyť midi signál a zobraz ho na "klávesnici" a zahraj
Alebo pre daný signál zahraj nejaký sample - alebo ho pošli ďalej do ableton/garageband -> ponechaj vizualizáciu v p5.js
Kreslenie svetlom
Opäť práca s webcam (pridať filter pred šošovku pre odfiltrovanie mimo IR spektra)
"find brightest point" -> example https://editor.p5js.org/Luxapodular/sketches/SJGvMgK57
použiť tento pixel (ideálne nájsť jeho stred) ako kurzor myši - ktorý spúšťa klávesy
zapojiť treshold (vždy sa nájde nejaký najjasnejší bod ... ale len ak je svetielko zapnuté, má byť trackované)
