Air - ware mobiele lugkitaar (prototipe): 7 stappe (met foto's)

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:23

Goed so, Dit sal 'n baie kort instruksie wees oor die eerste deel om uiteindelik nader te kom aan 'n kinderdroom van my.

Toe ek 'n jong seun was, het ek altyd my gunsteling kunstenaars en orkeste onberispelik die kitaar sien speel.

Toe ek groot was, was ek dankbaar genoeg om te leer hoe om kitaar te speel en selfs sommige van ander te speel, maar ek het nog nie my eie nie:(Daarom het ek besluit om uiteindelik te gaan sit en een te maak wat heeltemal op die telefoon werk, rekenaarvisie gebruik en mense soos ek wat 'n kitaar wil hê, maar dalk op reis, gebreek of te jonk is om nog een te kry!

U kan die prototipe -app op hierdie webwerf vind

Gaan na die "Jy is klaar" -stap om te sien hoe om te speel.

* Gebruik dit op u telefoon en draai die skerm sywaarts na landskapmodus *

Geniet dit!

(ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧ ･: *ヽ (◕ ヮ ◕ ヽ)

Benodighede:

1. Slimfoon

2. Skootrekenaar of skootrekenaar (vir programmering)

Stap 1: Agtergrond en opmerking oor kode

Hierdie projek is grotendeels 'n gekodeerde projek wat daarop gemik is om volledig op die telefoon te werk.

In die lig van hierdie projek het ek verskillende ander programme probeer en ander toestelle wat tans op die mark is, opgesoek, soos die AirJamz- of Kurv -kitaar, draagbare kitare of selfs die Real Guitar -app in die speelwinkel.

Die probleme wat ek by baie van hulle ontbreek, was:

1. Sommige benodig eksterne toestelle

2. Byna alle programme het u nie regtig akkoorde of musiek laat speel nie, maar was net 'n fretboard -simulator

3. Eksterne toestelle was baie duur en baie kitaarspelers het aanbeveel om net 'n werklike kitaar te koop

Dit word op die meegaande beelde afgebeeld.

En dus moet die Air -app hierdie probleme oplos terwyl dit heeltemal op die telefoon kan werk. Ek glo dat dit moontlik is, want in 2020 het ons baie beter mobiele blaaiertegnologie en baie verbeterings in rekenaarvisie wat ons in staat stel om wondere te doen met 'n enkele RGB -kamera.

Daarom het ek 'n paar sketse gemaak van hoe dit sou lyk en hoe dit sou funksioneer voordat ek heeltemal begin het.

Ek het ook my mylpale vir kodering opgestel, so in hierdie instruksies, in plaas daarvan om u met kode te verveel, sal ek u deur my ontwerpproses neem en die geannoteerde kode aan die einde heg sodat u kan lees en kyk as u dit nodig het.

Die volledige kode kan gevind word op https://github.com/msimbao/air en ek beveel aan om u kode lêers soortgelyk aan hierdie te struktureer.

Let ook daarop dat die program gehuisves moet word om die program te laat loop. Ek het dit tot dusver slegs uitgevoer toe dit op github aangebied is.:)

Stap 2: Strumming -aksie

Die eerste belangrike mylpaal in die koderingsprogram was om 'n manier te vind om 'n strum digitaal te herhaal sonder enige eksterne omtrek. My onmiddellike gedagte was om die RGB -kamera aan die voorkant van my foon te gebruik.

My gedagte was dat as 'n persoon 'n akkoord het wat hulle wil speel, dan 'n geluid gespeel word as hulle met sy hand voor die kamera swiep.

Nadat ek dit agtergekom het, het ek 'n goeie programmeertaal nodig wat gebruik kan word om goed met die RGB -kamera te koppel.

Ek het vir Javascript genadig omdat ek 'n platform-app met React Native of iets anders kon maak of net die kitaar op 'n webwerf kon huisves, en dit kan vir almal beskikbaar wees.

Ek het toe verskillende maniere gevind om uit te vind hoe om die hand te vee om 'n aksie te veroorsaak wat 'n akkoordgeluid kan speel, maar daar is baie maniere om dit te doen.

Masjienleer het baie goed gewerk toe ek IBM se dienste probeer het en ongeveer 3000 beelde per week opgelei het vir veegherkenning sowel as akkoordherkenning. Ek het ook handtrack.js deur victordibia probeer. Ongelukkig was hulle albei ongelooflik traag op selfone.

Ek het toe op diffcam.com afgekom oor bewegingsopsporing en 'n implementering deur die lonekorean. Ek het geleer dat dit moontlik is om die webcam te gebruik om twee aparte rame op te neem en dan die verskil tussen die rame te bereken en die verskil 'n telling te gee. As die telling 'n sekere drempel oorskry, voer ek 'n aksie uit.

Die lonekorean het ook 'n enjin vir sy diff -kamera gemaak wat ek besluit het om vir die Air -kitaar te gebruik, en dit het perfek gewerk om die bewegingscore te kry!

Hierby is foto's van pogings om masjienleermodelle op te lei, asook die diffcam.com -voorbeeld waaruit ek geleer het.

Opmerking: in hierdie huidige prototipe herhaal en herhaaldelik die strumming, om dit te stop, hou eenvoudig die koord wat u volgende wil speel, vas. Dit is 'n fout wat ons hoop om reg te stel.

Die kode vir die volledige strum word gevind in die script.js -lêer wat hier aangeheg is, en die diffcam -enjin deur lonekorean is hier.

Stap 3: akkoordherkenning

Die volgende mylpaal was dan om 'n manier te vind om akkoordherkenning regstreeks te hanteer.

Ek wou hê dat 'n gebruiker die werklike akkoordvorme kan herhaal en goeie handplasing kan oefen en hulle ook kan help om verskillende akkoorde te oefen.

Soos in die laaste stap, het ek Machine learning probeer vir akkoordherkenning, maar dit was baie stadig op selfone.

Ek het toe iets geleer uit die Real Guitar -app dat dit moontlik is om 'n toetsbord op die telefoonskerm te plaas deur die skerm te gebruik om akkoordvorme te genereer.

Ek moes toe leer hoe om multi-touch interaksie in javascript toe te laat, en ek vind 'n wonderlike handleiding en voorbeeld uit die dokumente van Mozilla

Raakinteraksies kan lastig wees, veral in Javascript, maar die idee is dat ons sekere afdelings kan skep en funksies kan definieer om verskillende aanraakgebeurtenisse te hanteer:

1. touchStart: as 'n vinger aan die skerm raak

2. touchEnd: As die vinger verlaat

3. touchMove: As die vinger nog op die skerm is, maar van posisie verander

Ons werk dan om hierdie funksies om ons eie elemente te definieer wat reageer op verskillende raakgebeurtenisse en kombinasies.

In ons geval ontwerp ons 'n fretbord met behulp van CSS en dan met behulp van Javascript, vertel die app dat wanneer sekere div's saamgedruk word, 'n akkoord herken moet word.

Ons kan dan 'n klankvoorwerp definieer waarna ons die akkoord sal deurgee en dan die klank speel wanneer 'n veeggebeurtenis plaasvind.

Om verskillende akkoordkombinasies te definieer, het ek die paneelbord gemaak met behulp van hierdie beeld en dan elke spesiale posisie op 'n div gesit wat ek kon aanraak en met ander kon kombineer.

Die kode om die progressie van akkoorde te definieer, word hier gevind en die toetsbordbeheerder word gevind in die aangehegte kode.

Stap 4: Soek akkoordklanke

Noudat ons stelsel herken word, het ons 'n paar werklike akkoordgeluide nodig.

Gelukkig kom freesound.com altyd tot my redding as ek klankmonsters nodig het. Ek het eenvoudig na akkoorde gesoek en 'n wonderlike pak majeur akkoorde van danglada gevind.

Ek laai dit dan af en wysig dit met behulp van vermetelheid om seker te maak dat die geluid onmiddellik begin, eerder as die kort pouse aan die begin van die meeste van hulle wanneer dit opgeneem is.

Om dit met vermetelheid te sny, het ek dit eenvoudig na die app gesleep, en dan die gedeelte van die klank gekies wat ek wil hê (die hele golwende deel en geen van die plat lyne wat geen klank het nie). Ek gaan dan na die blad Redigeer> Verwyder spesiale> Sny klank af. Toe kom ek by die oortjie Spore> Spore uitlyn> Begin tot nul. Ek gaan dan na die lêer en dan na Uitvoer> Uitvoer as WAV.

Ek voer as WAV uit omdat ek dit makliker gevind het om in Javascript -klankprojekte te werk.

Ek gebruik dan glitch.com om hierdie lêers aan te bied, want dit het 'n wonderlike inhoudleweringsnetwerk wat gebruik kan word vir verskillende projekte wat u het. 'N Ander opsie kan wees om 'n vuurbasis te gebruik, wat ek wil gebruik vir verskillende projekte wat meer inligting kan stoor, soos die voorraadruimte -app vir die makerspace van die universiteit.

U hoef die bates eenvoudig na die projekgids te sleep en dan kan u 'n skakel vind as u op die bate -gids klik en op die bate klik wat u wil kry. Glitch sal dan 'n unieke CDN -url vir u bate produseer. Hier is byvoorbeeld die skakel na die A major akkoordklank.

Ek kan dan al hierdie akkoorde aan mekaar koppel in 'n getChord -funksie wat sal soek as 'n spesifieke kombinasie van fretposisies ingedruk is, en dan 'n geskikte akkoord toewys vir die app om te speel wanneer 'n handveeging plaasvind.

Stap 5: Voltooi en huisves die hele app

Daar is baie maniere om gasheer te wees.

Die beste wat ek gevind het, is eenvoudig om github te gebruik. Dit is omdat as u 'n app goed geprogrammeer het, u hele agterkant deur 'n databasis of vuurwinkel vanaf Firebase bedien kan word, of selfs 'n CDN van glitch.com en ander plekke kan gebruik om bates op te slaan.

Om die projek op github aan te bied, hoef u net 'n github -rekening oop te maak en 'n nuwe bewaarplek te maak. Om dit makliker te maak om op te stel, moet u altyd 'n lisensie byvoeg nadat u die projeknaam aangegee het (ek is nie 'n kenner nie, maar ek het gevind dat dit my lewe makliker maak). Ek gebruik altyd net 'n openbare lisensie soos die GNU.

Sodra die bewaarplek opgestel is, kan ons net ons lêers in die bewaarplek sleep en neersit en op die groen verbind -knoppie onderaan klik.

Ons gaan dan na die blad Instellings met die rat -ikoon heel regs van die bewaarbladsy onder die ster- en horlosieknoppies. As u in die instellings is, blaai af totdat u die boks van Github Pages sien. Verander bron na bastak en kies 'n tema as u wil. U kan leer hoe om temas te gebruik deur dit te google (ek gebruik dit nooit, want ek bring gereeld my eie CSS en tema -idees).

As die bladsy gereed is, kry u 'n groen hoogtepunt en 'n regmerkie wat u vertel dat u webwerf gepubliseer is en dat u toegang daartoe kan kry.

Stap 6: Klaar

U kan nou 'n ongelooflike jam -sessie geniet in die gemak van u eie koptelefoon, slaapkamer of op die trein. Voeg nog 'n paar akkoorde by as u wil, en speel selfs met die kitaar fret posisies.

'N Vinnige opmerking oor bewegingsopsporing

1. Die drumpel vir 'n gitaar -sweep kan in die script.js -lêer aangepas word, maar maak seker dat die agtergrond wat u telefoon sien, relatief stil is wanneer u die app gebruik.

2. Byvoorbeeld, in die trein is dit beter om te gaan sit en u koptelefoon aan te sit en u telefoon na binne te draai, sodat as die passasiers om u beweeg, die telefoonkamera slegs u hand kan sien beweeg.

3. Die hand wat die telefoon vasgryp, moet relatief stil wees, afhangende van u drempel. Ek dink ek sal 'n paar toetse met 'n hoë drumpel uitvoer en die perke vorentoe opdateer om meer spesifiek te wees.

Om te speel:

Laai die app in u webblaaier en kantel dit dan na landskapmodus.

As u dan met u hand swaai, speel 'n akkoord, maar dit sal aanhou speel totdat u die F -sleutel in die regter onderste hoek raak.

Alternatiewelik kan u die klank stop deur 'n akkoordkombinasie te maak.

As u 'n akkoordkombinasie maak, stop die huidige klank, dan word 'n nuwe akkoordklank gekies.

Stap 7: geleerde dinge en finale woorde

Ek was baie lief daarvoor om aan hierdie projek te werk, selfs al neem dit lank om 'n prototipe te neem en die app te laat vervaardig terwyl ek aan ander projekte en tuiswerk werk. Ek het ook 'n paar wonderlike dinge geleer;

1. By die ontwerp van digitale produkte, moet u altyd seker maak dat u prototipes so vinnig as moontlik is, want u eerste aannames sal verkeerd wees en u moet dit vinnig deurloop om aan die einde te kom.

2. Vermy soveel as moontlik geld aan 'n projek. Gebruik altyd alles wat u kan, en begin altyd met eenvoudige dinge wat u byderhand het.

3. Moenie bang wees om nuwe tale, raamwerke en stelsels te leer nie. Hulle is dikwels makliker as wat jy aanvanklik dink.

En baie dankie aan die lonekorean wat my drome verwesenlik het

As u belangstel in hoe die app ontwikkel, kan u by ons poslys aansluit. Ek en 'n klein span werk daaraan om 'n volledige weergawe te maak om mense wat gebroke, op reis of jong kinders is, te help om toegang tot 'n wonderlike draagbare kitaar te kry, waar hulle ook al is.

Ons sal baie graag hulp nodig hê, veral van grafiese ontwerpers, kitaarspelers en programmeerders om alles uit te toets.

Geniet (ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧ ･: *ヽ (◕ ヮ ◕ ヽ)