Air - True Mobile Air Guitar (Prototype): 7 Hakbang (na may Mga Larawan)

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:09

Okay kaya, Ito ay magiging isang napaka maikling pagtuturo tungkol sa unang bahagi ng wakas na makalapit sa isang pangarap kong pagkabata.

Noong bata pa ako, palagi kong pinapanood ang aking mga paboritong artista at banda na tumugtog ng gitara nang hindi malinis.

Tulad ng paglaki ko, sapat akong nagpapasalamat na malaman kung paano tumugtog ng gitara at kahit tumugtog ng ilang pagmamay-ari ng iba, ngunit wala pa rin akong sarili:(Kaya't napagpasyahan kong sa wakas ay umupo at gumawa ng isa na ganap na tumatakbo sa telepono, gumagamit ng paningin sa computer at hinahayaan ang mga taong tulad ko na nais ng isang gitara ngunit maaaring naglalakbay, nasira o masyadong bata upang makakuha ng isa pa!

Mahahanap mo ang prototype app sa website na ito

Upang makita kung paano maglaro, pumunta sa Hakbang na "Tapos Na".

* Siguraduhing gamitin ito sa iyong telepono at paikutin ang screen sa landscape mode *

Mag-enjoy!

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

Mga Pantustos:

1. Smart Phone

2. Desktop Computer o Laptop (Para sa Programming)

Hakbang 1: Background at Tandaan sa Code

Ang Proyekto na ito ay higit sa lahat isang naka-code na proyekto na naglalayong ganap na tumakbo sa telepono.

Sa pag-iisip ng proyektong ito, sinubukan ko ang iba`t ibang mga app at tiningnan ang iba pang mga aparato na kasalukuyang nasa merkado tulad ng AirJamz o Kurv gitara, portable guitars o kahit na ang Real Guitar app sa play store.

Ang mga problemang nakita kong kulang sa marami sa kanila ay:

1. Ang ilan ay nangangailangan ng mga panlabas na aparato

2. Halos lahat ng apps ay hindi talaga pinapayagan na magpatugtog ka ng mga aktwal na chords o musika at fret board simulator lamang

3. Ang mga Panlabas na Device ay prettypricey at inirekomenda ng maraming gitarista na bumili lamang ng isang aktwal na gitara

Ang mga ito ay nakalarawan sa mga kasamang larawan.

At sa gayon ang Air app ay kailangang malutas ang mga problemang ito habang ganap na tumatakbo sa telepono. Naniniwala ako na posible ito dahil sa 2020 mayroon kaming mas mahusay na teknolohiya ng mobile browser at maraming mga pagpapabuti sa paningin ng computer na maaaring payagan kaming gumawa ng mga kababalaghan sa isang solong RGB camera.

Kaya't nagpatuloy akong gumawa ng ilang mga sketch ng kung ano ang hitsura nito at kung paano ito gagana bago pa magsimula nang ganap.

Inilabas ko rin ang aking mga milestones sa pag-coding kaya't sa itinuturo na ito, sa halip na mainip ka sa code, dadalhin ka namin sa proseso ng aking disenyo at ilakip ang na-annot na code sa dulo upang mabasa mo at tingnan kung kailangan mo.

Ang buong code ay matatagpuan sa https://github.com/msimbao/air at inirerekumenda ko ang pagbuo ng iyong mga file ng code na katulad nito.

Tandaan din na upang tumakbo ang app, kailangan itong ma-host. Sa ngayon ko lamang nahanap na ito ay tumakbo kapag na-host sa github.:)

Hakbang 2: Strumming Action

Ang unang pangunahing milyahe sa pag-coding, ay upang makahanap ng isang paraan upang makaya ang isang strum na digital nang walang anumang panlabas na paligid. Ang aking agarang pag-iisip ay ang paggamit ng RGB sa harap na nakaharap sa camera ng aking telepono.

Ang iniisip ko ay kung ang isang tao ay may chord na nais nilang i-play, pagkatapos ay kapag na-swipe nila ang kanilang kamay sa harap ng kanilang camera, isang tunog ang pinatugtog.

Matapos malaman ito, kailangan ko ng isang mahusay na wika ng programa na maaaring magamit upang mag-interface nang maayos sa RGB camera.

Tumira ako para sa Javascript dahil makakagawa ako ng isang cross-platform app na may React Native o iba pa o mai-host lang ang gitara sa isang website at maaari itong magamit para sa lahat.

Natagpuan ko pagkatapos ang iba't ibang mga paraan upang malaman kung paano makakapag-swipe ang kamay upang ma-trigger ang isang aksyon na maaaring isang tunog ng tunog ng chord ngunit maraming paraan upang magawa ito.

Ang pag-aaral ng makina ay gumana nang mahusay kapag sinubukan ko ang mga serbisyo ng IBM at sinanay ang tungkol sa 3000 na mga imahe sa loob ng isang linggo para sa pagkilala sa swipe pati na rin ang pagkilala sa chord. Sinubukan ko rin ang handtrack.js ni victordibia. Sa kasamaang palad pareho silang kapani-paniwala mabagal sa mga mobile phone.

Napunta tuloy ako sa pagtuklas ng paggalaw at pagpapatupad ng lonekorean sa diffcam.com. Nalaman ko na posible na gamitin ang webcam upang magtala ng dalawang magkakahiwalay na mga frame at pagkatapos ay kalkulahin ang pagkakaiba sa pagitan ng mga frame at bigyan ang pagkakaiba ng isang marka. Kung ang marka na iyon ay lumampas sa isang tiyak na threshold, nagpapatupad ako ng isang aksyon.

Ang lonekorean ay gumawa din ng isang makina para sa kanyang diff cam na nagpasya akong gamitin para sa Air gitara at ito ay gumagana nang perpekto para sa pagkuha sa akin ng marka ng paggalaw!

Nakalakip ang mga larawan ng mga pagtatangka sa pagsasanay ng mga modelo ng pag-aaral ng Machine pati na rin ang halimbawang diffcam.com na natutunan ko mula sa.

Tandaan: Sa kasalukuyang prototype na ito, ang strumming kinda ay paulit-ulit na inuulit, upang ihinto ito, hawakan lamang ang chord na nais mong i-play sa susunod. Ito ay isang bug na inaasahan naming maayos.

Ang code para sa buong strum ay matatagpuan sa script.js file na nakakabit dito at ang diffcam engine ni lonekorean ay narito.

Hakbang 3: Pagkilala sa Chord

Ang susunod na milyahe sa pag-coding ay upang maghanap ng isang paraan upang mahawakan nang live ang pagkilala sa chord.

Nais kong ang isang gumagamit ay maaaring makaya ang tunay na mga hugis ng chord at magsanay ng mabuting pagkakalagay ng kamay at tulungan din silang magsanay ng iba't ibang mga chord.

Tulad ng huling hakbang, sinubukan ko ang Pag-aaral ng makina para sa pagkilala sa chord, ngunit napakabagal nito sa mga mobile phone.

May natutunan ako mula sa Real Guitar app na maaaring posible na maglagay ng isang fretboard sa screen ng telepono na gamitin ang screen upang makabuo ng mga hugis ng chord.

Kailangang matutunan ko kung paano payagan ang pakikipag-ugnay sa multi-touch sa javascript at nakakita ng isang kahanga-hangang tutorial at halimbawa mula sa mga doc ng Mozilla

Ang mga pakikipag-ugnay sa touch ay maaaring maging nakakalito lalo na sa Javascript ngunit ang ideya ay na makakalikha kami ng ilang mga div at pagkatapos ay tukuyin ang mga pagpapaandar upang hawakan ang iba't ibang mga kaganapan sa pagpindot:

1. touchStart: Kapag hinawakan ng isang daliri ang screen

2. touchEnd: Kapag umalis ang daliri

3. touchMove: Kapag nasa daliri pa rin ang daliri ngunit binabago ang posisyon

Gumagawa kami pagkatapos ng mga pagpapaandar na iyon upang tukuyin ang aming sariling mga elemento na tumutugon sa iba't ibang mga kaganapan at kumbinasyon ng pagpindot.

Sa aming kaso, nagdidisenyo kami ng isang fret board gamit ang CSS at pagkatapos ay gumagamit ng Javascript, sabihin sa app na kapag ang ilang mga div ay pinindot nang magkasama, dapat makilala ang isang chord.

Maaari naming tukuyin ang isang audio object na ipapasa namin ang chord at pagkatapos ay i-play ang audio na iyon kapag nangyari ang isang kaganapan na mag-swipe.

Upang matukoy ang iba't ibang mga kumbinasyon ng chord, ginawa ko ang fret board gamit ang imaheng ito at pagkatapos ay itakda lamang ang bawat espesyal na posisyon upang maging isang div na maaari kong hawakan at pagsamahin sa iba.

Ang code upang tukuyin ang pag-unlad ng chord ay matatagpuan dito at ang fretboard controller ay matatagpuan sa naka-attach na code.

Hakbang 4: Paghahanap ng Mga Tunog ng Chord

Ngayon na ang aming system ay nakatakda upang makilala, kailangan namin ng ilang mga aktwal na tunog ng chord.

Sa kabutihang palad, ang freesound.com ay palaging dumating sa aking pagliligtas kapag kailangan ko ng mga sample ng audio. Hinanap ko lang ang mga chords at natagpuan ang isang kamangha-manghang pakete ng mga pangunahing chords ni danglada.

Na-download ko sila pagkatapos at na-edit ang mga ito gamit ang katapangan upang matiyak na nagsimula kaagad ang tunog kaysa sa maikling pag-pause sa simula ng karamihan sa kanila kapag naitala ang mga ito.

Upang i-clip ang mga ito gamit ang katapangan, i-drag ko lang sila sa app pagkatapos ay pinili ang bahagi ng tunog na gusto ko (ang buong kulot na bahagi at wala sa mga seksyon ng flat line na walang tunog). Pagkatapos ay pumunta ako sa tab na I-edit> Alisin ang Espesyal> Trim Audio. Pagkatapos ay nakarating ako sa tab na Mga Track> Ihanay ang Mga Track> Magsimula sa Zero. Pagkatapos ay pupunta ako sa file, pagkatapos ay I-export> I-export bilang WAV.

Nag-export ako bilang WAV dahil nahanap ko na mas madaling harapin ang mga proyekto sa audio na Javascript.

Gumamit ako pagkatapos ng glitch.com upang i-host ang mga file na ito dahil mayroon silang kamangha-manghang network ng paghahatid ng nilalaman na maaaring magamit para sa iba't ibang mga proyekto na mayroon ka. Ang isa pang pagpipilian ay maaaring gumamit ng firebase na kung saan ay ang aking goto para sa iba't ibang mga proyekto na maaaring magkaroon ng karagdagang impormasyon upang maiimbak tulad ng makerspace imbentaryo app para sa makerspace ng aking kolehiyo.

Kailangan mo lamang i-drag at i-drop ang mga assets sa direktoryo ng proyekto at pagkatapos ay maaari kang makahanap ng isang link kapag na-click mo ang folder ng asset at i-click ang asset na nais mong makuha. Gumagawa ang Glitch ng isang natatanging url ng CDN para sa iyong pag-aari. Halimbawa, narito ang link sa isang pangunahing tunog ng Chord.

Maaari ko ring maiugnay ang lahat ng mga chord na ito sa isang pagpapaandar na getChord na hahanapin kapag ang isang tukoy na kumbinasyon ng mga fret na posisyon ay pinindot at pagkatapos ay magtalaga ng isang naaangkop na chord para sa app na maglaro kapag nangyari ang isang kaganapan sa pag-swipe ng kamay.

Hakbang 5: Pagtatapos at Pag-host sa Buong App

Maraming mga paraan upang pumunta tungkol sa pagho-host.

Sa totoo lang ang pinakamahusay na natagpuan ko ay simpleng paggamit ng github. Ito ay dahil kung na-program mo nang maayos ang isang app, maaari mong gawin ang iyong buong likod na maihatid ng isang database o firestore mula sa firebase o kahit na gumamit ng isang CDN mula sa glitch.com at iba pang mga lugar upang mag-imbak ng mga assets.

Upang ma-host ang proyekto sa github, ang kailangan mo lang gawin ay magbukas ng isang github account, gumawa ng isang bagong lalagyan. Pagkatapos upang gawing mas madaling i-set up, pagkatapos mong mailagay ang pangalan ng iyong proyekto, siguraduhing magdagdag ng isang lisensya (hindi ako dalubhasa ngunit nalaman kong ginagawang mas madali ang aking buhay). Palagi lang akong gumagamit ng isang pampublikong lisensya tulad ng GNU.

Kapag na-set up na ang repository, maaari lamang naming i-drag at i-drop ang aming mga file sa lalagyan at i-click ang berdeng pindutan ng mangako sa ibaba.

Pagkatapos ay pumunta kami sa tab na Mga Setting na may icon na gear sa dulong kanan ng pahina ng pag-iimbak sa ilalim ng mga pindutan ng bituin at panonood. Sa sandaling nasa mga setting, mag-scroll pababa hanggang makita mo ang kahon ng Mga Pahina ng Github. Baguhin ang Pinagmulan upang master master at pumili ng isang tema kung nais mo. Maaari mong malaman kung paano gamitin ang mga tema sa pamamagitan ng pag-google sa kanila (hindi ko kailanman ginagamit ang mga ito dahil madalas akong magdala ng aking sariling mga ideya sa CSS at tema).

Kapag handa ang pahina, makakakuha ka ng isang berdeng highlight at tik na nagsasabi sa iyo na nai-publish ang iyong site at maaaring ma-access.

Hakbang 6: Tapos Na

Maaari mo na ngayong tangkilikin ang isang kahanga-hangang sesyon ng jam sa ginhawa ng iyong sariling mga headphone, kwarto o sa tren. Magdagdag ng ilang higit pang mga chords kung gusto mo at kahit na maglaro sa mga posisyon ng gitar fret.

Isang mabilis na Tandaan sa Pagtuklas ng Paggalaw

1. Ang threshold para sa isang strumming swipe ng swipe ay maaaring ayusin sa script.js file ngunit tiyakin na kapag ginagamit mo ang app, ang background na nakikita ng iyong telepono ay medyo pa rin.

2. Halimbawa, sa tren, mas mahusay na umupo at ilagay ang iyong mga headphone at buksan ang iyong telepono papasok upang kung lumipat sa paligid mo ang mga camera ng telepono ay makikita mo lamang ang iyong kamay na gumagalaw sa lahat ng oras.

3. Ang kamay na nakakapit sa telepono ay kailangang medyo nakasalalay depende sa iyong threshold. Tingin ko tatakbo ang ilang mga pagsubok na may isang mataas na threshold at i-update ang mga limitasyon pasulong upang maging mas tiyak.

Maglaro:

I-load ang app sa iyong web browser, pagkatapos ikiling ito sa landscape mode.

Pagkatapos kapag isasayaw mo ang iyong kamay, tutugtog ang isang kuwerdas, gayunpaman, patuloy itong maglalaro hanggang sa hawakan mo ang F key sa pinakamababang kanang sulok.

Bilang kahalili, maaari mong ihinto ang tunog sa pamamagitan ng paggawa ng isang kumbinasyon ng chord.

Kapag gumawa ka ng isang kumbinasyon ng chord, tumitigil ang kasalukuyang tunog, pagkatapos ay isang bagong tunog ng chord ang napili.

Hakbang 7: Mga Bagay na Natutuhan at Huling Mga Salita

Gustung-gusto ko ang pagtatrabaho sa proyektong ito kahit na ito ay tumagal ng mahabang panahon upang prototype at makuha ang app na ginawa habang nagtatrabaho sa iba pang mga proyekto at gawaing bahay. Natutunan ko ang isang pares ng mga kahanga-hangang mga bagay-bagay sa kahabaan din ng paraan;

1. Kapag nagdidisenyo ng mga digital na produkto, siguraduhing tiyakin na gawin ang iyong mga prototype nang pinakamabilis hangga't maaari dahil ang iyong unang mga palagay ay magiging mali at kailangan mong patakbuhin ang mga ito nang mabilis upang makarating sa dulo.

2. Iwasang gumastos ng pera sa isang proyekto hangga't maaari. Palaging gamitin ang anumang makakaya mo at laging magsimula sa mga simpleng bagay na mayroon ka.

3. Huwag matakot na matuto ng mga bagong wika, balangkas at system. Ang mga ito ay madalas na mas madali kaysa sa iniisip mo sa una.

At malaking salamat sa lonekorean sa pagsasakatuparan ng aking mga pangarap

Kung ikaw ay interesado sa kung paano bubuo ang app maaari kang sumali sa aming listahan ng pag-mail. Ang isang maliit na koponan at magtatrabaho ako upang makagawa ng isang buong bersyon upang matulungan ang mga taong nasira, naglalakbay o mga batang may access sa isang kahanga-hangang portable gitara nasaan man sila.

Talagang gustung-gusto namin ang ilang tulong lalo na mula sa mga graphic designer, manlalaro ng gitara at mga coder upang subukan at i-laman ang lahat.

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