Echoborn: nipistä ja soita

Taustaa

Echoborn on soitin jota soitetaan käsillä, selainvälilehdessä, sillä kameralla joka sinulla jo on. Nipistät ja soitat. Liikuta käsiäsi, niin ääni liikkuu mukana.

Tiliä ei ole, rekisteröitymistä ei ole eikä minkäänlaista backendiä ole. Sivu latautuu, kamera käynnistyy paikallisesti, eikä mikään sinua koskeva poistu koneelta, koska ei ole paikkaa jonne se menisi.

Ongelma

Selainsoittimista tulee melkein aina HTML:llä piirretty pianokoskettimisto, jota soitetaan hiirellä, yksi sävel kerrallaan. Se ei ole soitin. Se on kaavakuva soittimesta.

Eleillä ohjatussa musiikissa on päinvastainen ongelma. Demot näyttävät poikkeuksellisilta kolmenkymmenen sekunnin videolla ja ovat käytännössä soittokelvottomia, koska ne on rakennettu teknologiademoiksi eikä soittimiksi. Viivettä kohdellaan raportoitavana mittarina eikä sinä asiana joka ratkaisee onko esine ylipäätään musiikillinen. Kun fyysisen eleen ja sen aiheuttaman äänen välissä on suunnilleen yli kaksikymmentä tai kolmekymmentä millisekuntia, kehosi lakkaa uskomasta että ne kaksi liittyvät toisiinsa, etkä enää soita mitään. Käytät ohjauspaneelia joka pitää ääntä.

Halusin selvittää pääseekö selain tuon rajan alle rehellisesti, ilman natiivisovellusta ja ilman erillistä laitetta.

Oma roolini

Yksin, kuten kaikki muukin Nuitsissa. Vuorovaikutussuunnittelu, tekninen toteutus, ääni, visuaalit.

Kiinnostava työ ei ollut missään noista yksinään. Se oli niiden välisessä budjetissa: käsienseuranta, synteesi ja 3D-renderöinti haluavat kaikki pääsäikeen, haluavat kaikki näytönohjaimen, ja kaikki heikentävät soitinta jos ne jätetään nälkään. Koko työ oli sen päättämistä mikä saa olla kallista.

Lähestymistapa

Nipistyksestä tuli ele, koska sillä on yksiselitteinen binäärinen tila. Useimmat käsieleet elävät jatkumolla, mikä tarkoittaa kynnysarvoa, mikä tarkoittaa värinää kynnyksen kohdalla, mikä tarkoittaa että sävelet änkyttävät päälle ja pois vaikka käsi on paikallaan. Peukalon kärjen ja etusormen kärjen väli on etäisyys joka sulkeutuu päättäväisesti ja aukeaa päättäväisesti, ja se on liike jonka ihmiset ymmärtävät jo ilman ohjeita.

Kaikki muu kartoittuu jatkuvana. Sijainti, sormien leveys ja käden asento ohjaavat sävelkorkeutta, suodatinta ja tilaa. Tuo jako antaa ne kaksi asiaa joita soitin tarvitsee: selvän aloituksen jonka voi asettaa aikaan, ja ilmaisuvoimaisen hallinnan jota voi muovata aloituksen jälkeen.

Opastusta ei ole. Nostat kätesi ja jotain tapahtuu.

Toteutus

TanStack Start tarjoilee sen. Siinä on koko palvelintarina, koska palvelinlogiikkaa ei ole. Kokonaisuus on staattinen sivu jonka sisällä tapahtuu paljon.

Käsienseuranta on MediaPipe, ja nimenomaan niin että hand_landmarker.task -mallitiedosto on omalla palvelimellani eikä haettuna Googlen CDN:stä, minkä jokainen ekosysteemin esimerkki tekee. Kolme syytä, siinä järjestyksessä kuinka paljon niistä välitän. Malli on useita megatavuja ja se on kriittinen polku siihen että soitin ylipäätään on olemassa, joten se ei saa riippua kolmannen osapuolen käytettävyydestä tai siitä että joku päättää siirtää osoitteen. Sen hakeminen ulkoiselta palvelimelta kertoo tuolle palvelimelle että joku minun sivustollani on kohta kytkemässä kameran päälle, mikä on yksityisyysvuoto josta minun pitäisi sitten kertoa. Ja samasta lähteestä tarjoiltuna se päätyy välimuistiin minun ehdoillani ja toinen käynti on välitön.

Ääni on Tone.js Web Audio -rajapinnan päällä. Web Audio ajaa graafinsa omassa äänisäikeessään, mikä on ainoa syy siihen että tämä toimii: seurantasilmukka voi pudottaa ruudun eikä ääni rikkoudu. Sääntö josta pidin kiinni on että landmark-pisteet luetaan videoruudulta ja kirjoitetaan suoraan äänen parametrimuutoksiksi ilman välissä olevaa React-tilaa. Eleen reitittäminen komponentin uudelleenrenderöinnin kautta lisää ruudun verran viivettä eikä hyödytä mitään, koska minkään DOMissa ei tarvitse tietää siitä.

Visuaalit ovat react-three-fiberiä, ja ne ovat tarkoituksella ensimmäinen asia joka heikkenee. Renderöijä pyörii näytönohjaimella, seuranta omalla päättelyaikataulullaan, ja jos laite ei jaksa molempia, visuaalit häviävät. Pudonnut partikkeli on näkymätön. Myöhässä oleva sävel on soittimen loppu.

Vikatiloja on useita rehellisiä. Hämärä tuhoaa landmark-pisteiden luotettavuuden, ja epävarmat pisteet tuottavat säveliä joita et soittanut, joten kynnyksen alle jäävä seuranta pitää viimeisen vakaan tilan sen sijaan että arvaisi. Kaksi ristiin menevää kättä vaihtavat identiteettinsä keskenään, mikä kuulostaa siltä että vasen kätesi soittaisi yhtäkkiä oikean käden osuutta. Vastavalo, ikkuna selkäsi takana, on ylivoimaisesti yleisin syy siihen että soitin tuntuu rikkinäiseltä, eikä se ole korjattavissa ohjelmistolla.

Lopputulos

Se on julkaistu osoitteessa echoborn.app eikä sen pyörittäminen maksa minulle mitään, koska staattisella backendittömällä sivulla ei ole rajakustannusta. Ihmiset soittavat sitä, sulkevat välilehden, enkä saa siitä koskaan tietää mitään, mikä on juuri se järjestely.

Mitä tekisin toisin

Viritin nipistyksen kynnysarvon omilla käsilläni, omassa keittiössäni, oman valaistukseni alla. Se on yhden hengen otos, ja kädet vaihtelevat kooltaan enemmän kuin oletin. Lyhyt kalibrointi ensimmäisellä latauksella korjaisi suurimman osan saamastani palautteesta.

Nauhoittaisin ja toistaisin myös landmark-sarjoja testivaljaina. Debuggasin äänen ajoitusta heiluttamalla käsiä läppärille viikkokausia, mikä ei ole toistettavaa ja näyttää pahemmalta kuin kuulostaa.