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.

Budeme vychádzať so sketchu z predminulej lekcie - kde máme klávesy ovládatelné klávesnicou.

my keyboard by igor-kamil -p5.js Web Editoreditor.p5js.org

polysynth keyboard

Prípadne "upravenú" verziu s objektami -> https://editor.p5js.org/igor-kamil/sketches/y5r9owaNa

Ak sa ti nepáčia tóny idúce za sebou... skús aplikovať intervals -> napr. pentatonic s (pozri. https://github.com/chrisburnell/pentatonic )

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

Webcam

The-Body-Everywhere-and-Here-2021/syllabus.md at main · lisajamhoury/The-Body-Everywhere-and-Here-2021GitHub

• How to Turn Your Smartphone Into a Webcam

Recept 1:

• 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

Recept 2:

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

Recept 3:

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é)

https://p5js.org/examples/dom-video-capture.htmlp5js.org