Օդ - իսկական շարժական օդային կիթառ (նախատիպ). 7 քայլ (նկարներով)

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:45

Լավ, Սա իսկապես կարճ ուսանելի կլինի իմ մանկության երազանքին վերջապես մոտենալու առաջին մասի մասին:

Երբ ես երիտասարդ տղա էի, ես միշտ դիտում էի իմ սիրելի արտիստների և խմբերի անթերի կիթառ նվագելը:

Երբ մեծացա, ես այնքան շնորհակալ էի, որ սովորեցի կիթառ նվագել և նույնիսկ նվագել ուրիշներին պատկանող, բայց դեռ չունեմ իմը:(Այսպիսով, ես որոշեցի վերջապես նստել և սարքել այն, որն ամբողջությամբ աշխատում է հեռախոսով, օգտագործում է համակարգչային տեսողություն և թույլ է տալիս ինձ նման մարդկանց, ովքեր կիթառ են ուզում, բայց կարող են ճանապարհորդել, կոտրվել կամ դեռ շատ փոքր են դեռ ձեռք բերելու համար:

Այս կայքում կարող եք գտնել ծրագրի նախատիպը

Ինչպես տեսնել, թե ինչպես խաղալ, գնացեք «Դուք կատարված եք» քայլին:

* Համոզվեք, որ այն օգտագործում եք ձեր հեռախոսի վրա և էկրանը կողաշրջում դեպի լանդշաֆտային ռեժիմ *

Վայելեք:

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

Պարագաներ:

1. Խելացի հեռախոս

2. Սեղանի համակարգիչ կամ նոութբուք (ծրագրավորման համար)

Քայլ 1. Նախապատմություն և նշում կոդի վերաբերյալ

Այս նախագիծը հիմնականում ծածկագրված նախագիծ է, որն ուղղված է ամբողջությամբ աշխատելու հեռախոսով:

Այս նախագծին մոտենալիս ես փորձեցի տարբեր այլ ծրագրեր և փնտրեցի շուկայում առկա այլ սարքեր, ինչպիսիք են AirJamz- ը կամ Kurv կիթառը, շարժական կիթառները կամ նույնիսկ Real Guitar ծրագիրը խաղային խանութում:

Խնդիրները, որոնցից շատերի մեջ բացակայում էի, հետևյալն էին.

1. Ոմանց անհրաժեշտ էին արտաքին սարքեր

2. Գրեթե բոլոր ծրագրերը իրականում թույլ չէին տալիս ձեզ նվագել իրական ակորդներ կամ երաժշտություն և պարզապես տխուր տախտակի սիմուլյատորներ էին

3. Արտաքին սարքերը բավականին թանկ էին, և շատ կիթառահարներ խորհուրդ էին տալիս պարզապես գնել իրական կիթառ

Սրանք պատկերված են ուղեկցող պատկերներում:

Եվ այսպես, Air հավելվածը պետք է լուծի այս խնդիրները, մինչդեռ ամբողջությամբ կարողանա աշխատել հեռախոսով: Կարծում եմ, որ դա հնարավոր է, քանի որ 2020 թվականին մենք ունենք բջջային դիտարկիչների շատ ավելի լավ տեխնոլոգիա և համակարգչային տեսողության բազմաթիվ բարելավումներ, որոնք թույլ կտան մեզ հրաշքներ գործել մեկ RGB տեսախցիկով:

Այսպիսով, ես սկսեցի կատարել որոշ էսքիզներ, թե ինչպիսին կլիներ այն և ինչպես կաշխատեր մինչև ամբողջովին սկսելը:

Ես նաև դուրս բերեցի իմ կոդավորման կարևորագույն կետերը, այնպես որ այս ուսանելի դասում, ձեզ կոդի հետ ձանձրացնելու փոխարեն, ես ձեզ կանցնեմ իմ նախագծման գործընթացով և վերջում կցեմ ծանոթագրված կոդը, որպեսզի կարդաք և նայեք անհրաժեշտության դեպքում:

Ամբողջ ծածկագիրը կարելի է գտնել https://github.com/msimbao/air կայքում, և ես խորհուրդ եմ տալիս կառուցել ձեր կոդի նման ֆայլերը:

Նաև նշեք, որ ծրագիրը գործարկելու համար այն պետք է տեղակայված լինի: Մինչ այժմ ես գտել եմ, որ այն աշխատում է միայն github- ում հյուրընկալվելիս::)

Քայլ 2: Շշմելու գործողություն

Կոդավորման առաջին հիմնական հանգրվանը կայանում էր նրանում, որ շղթան թվայնորեն կրկնելու միջոց է ՝ առանց որևէ արտաքին ծայրամասի: Իմ անմիջական միտքն այն էր, որ օգտագործեի հեռախոսի RGB առջևի տեսախցիկը:

Իմ միտքն այն էր, որ եթե մարդն ունի ակորդ, որը նա ցանկանում է նվագել, ապա երբ ձեռքը դիպչի տեսախցիկի առջև, ձայն կհնչի:

Դա պարզելուց հետո, ինձ այն ժամանակ անհրաժեշտ էր լավ ծրագրավորման լեզու, որը կարող էր օգտագործվել RGB տեսախցիկի հետ լավ ինտերֆեյսի համար:

Ես բավարարվեցի Javascript- ով, քանի որ կարող էի React Native- ի կամ այլ բանի միջոցով ստեղծել պլատֆորմային ծրագիր կամ պարզապես կարող էի կիթառը հյուրընկալել կայքում, և այն հասանելի լինի բոլորի համար:

Այնուհետև ես գտա տարբեր եղանակներ ՝ պարզելու համար, թե ինչպես կարելի է ձեռքով հարվածել, որպեսզի այն սկսի այնպիսի գործողություն, որը կարող է հնչել որպես ակորդային հնչողություն, բայց դա անելու բազմաթիվ եղանակներ կային:

Մեքենայական ուսուցումը շատ լավ աշխատեց, երբ ես փորձեցի IBM- ի ծառայությունները և մեկ շաբաթվա ընթացքում մոտ 3000 պատկեր պատրաստեցի սահելու ճանաչման, ինչպես նաև ակորդների ճանաչման համար: Ես փորձեցի նաև handtrack.js by victordibia. Unfortunatelyավոք, երկուսն էլ անհավանականորեն դանդաղ էին բջջային հեռախոսներում:

Հետո ես պատահաբար հանդիպեցի շարժման հայտնաբերմանն ու միայնակագործի կողմից diffcam.com կայքում իրականացմանը: Իմացա, որ հնարավոր է վեբ -տեսախցիկի միջոցով գրանցել երկու առանձին շրջանակներ, այնուհետև հաշվարկել շրջանակների միջև եղած տարբերությունը և տարբերությանը գնահատական տալ: Եթե այդ հաշիվը գերազանցում է որոշակի շեմը, ապա ես կատարում եմ գործողություն:

Միայնակուհին նաև շարժիչ պատրաստեց իր տարբեր տեսախցիկի համար, որը ես որոշեցի օգտագործել Air կիթառի համար, և այն հիանալի աշխատեց ինձ շարժման արդյունքը ստանալու համար:

Կից ներկայացված են մեքենայական ուսուցման մոդելներ պատրաստելու փորձերի նկարներ, ինչպես նաև diffcam.com- ի օրինակը, որից ես սովորել եմ:

Նշում. Այս ընթացիկ նախատիպում ցնցումները մի տեսակ կրկնում են անընդհատ, այն դադարեցնելու համար պարզապես պահեք այն ակորդը, որը ցանկանում եք նվագել հաջորդ ներքև: Սա սխալ է, որը մենք հույս ունենք շտկել առաջ:

Ամբողջական կոճակի ծածկագիրը գտնվում է script.js ֆայլում, որը կցված է այստեղ, իսկ lonekorean- ի diffcam շարժիչը `այստեղ:

Քայլ 3. Ակորդների ճանաչում

Հաջորդ կոդավորման հանգրվանն այն էր, որ գտնվեր ուղիղ ակորդի ճանաչման ուղին:

Ես ուզում էի, որ օգտվողը կարողանար կրկնել ակորդների իրական ձևերը և այդպիսով զբաղվել ձեռքի լավ տեղադրմամբ, ինչպես նաև օգնել նրանց տարբեր ակորդներ կիրառել:

Ինչպես և վերջին քայլին, ես փորձեցի մեքենայական ուսուցում ակորդների ճանաչման համար, բայց դա շատ դանդաղ էր բջջային հեռախոսների վրա:

Այնուհետև ես իրական կիթառի հավելվածից մի բան սովորեցի, որ հնարավոր է հնարավոր լինի հեռախոսի էկրանին տեղադրել տախտակ, էկրանին օգտագործել ակորդի ձևեր:

Այնուհետև ես պետք է սովորեի, թե ինչպես թույլատրել javascript- ում բազմակողմանի փոխազդեցություն և գտա հիանալի ձեռնարկ և օրինակ Mozilla- ի փաստաթղթերից

Հպման փոխազդեցությունները կարող են բարդ լինել հատկապես Javascript- ում, բայց գաղափարն այն է, որ մենք կարող ենք ստեղծել որոշակի բաժանումներ, այնուհետև սահմանել գործառույթներ ՝ հպման տարբեր իրադարձություններ կարգավորելու համար.

1. touchStart. Երբ մատը դիպչում է էկրանին

2. touchEnd: Երբ մատը հեռանում է

3. touchMove: Երբ մատը դեռ էկրանին է, բայց փոխում է դիրքը

Այնուհետեւ մենք աշխատում ենք այդ գործառույթների շուրջ `սահմանելու մեր սեփական տարրերը, որոնք արձագանքում են հպման տարբեր իրադարձություններին և համակցություններին:

Մեր դեպքում մենք նախագծում ենք տապակած տախտակ ՝ օգտագործելով CSS- ը, այնուհետև ՝ օգտագործելով Javascript- ը, ասելով հավելվածին, որ երբ որոշ div- եր սեղմվում են միասին, ակորդը պետք է ճանաչվի:

Այնուհետև մենք կարող ենք սահմանել աուդիո օբյեկտ, որին մենք կփոխանցենք ակորդը, այնուհետև կխաղարկենք այդ ձայնը, երբ տեղի է ունենում սայթաքման իրադարձություն:

Ակորդների տարբեր համակցություններ սահմանելու համար ես պատրաստեցի այս տախտակը `օգտագործելով այս պատկերը, այնուհետև յուրաքանչյուր հատուկ դիրքը դրեցի որպես բաժանարար, որին կարող եմ դիպչել և համատեղել ուրիշների հետ:

Ակորդների առաջընթացը սահմանելու կոդը գտնվում է այստեղ, իսկ fretboard- ի վերահսկիչը `կցված ծածկագրում:

Քայլ 4: Գտեք ակորդային հնչյուններ

Այժմ, երբ մեր համակարգը պետք է ճանաչի, մեզ անհրաժեշտ են ակորդային հնչյուններ:

Բարեբախտաբար, freesound.com- ը միշտ գալիս է ինձ փրկելու, երբ ինձ անհրաժեշտ են աուդիո նմուշներ: Ես պարզապես ակորդներ փնտրեցի և գտա danglada- ի հիմնական ակորդների զարմանալի փաթեթ:

Այնուհետև ես դրանք ներբեռնեցի և խմբագրեցի դրանք համարձակության միջոցով `համոզվելու համար, որ ձայնը սկսվում է անմիջապես, այլ ոչ թե կարճ դադարից շատերի սկզբում, երբ դրանք ձայնագրվում էին:

Համարձակության միջոցով դրանք կտրելու համար ես պարզապես դրանք քաշեցի հավելվածի մեջ, այնուհետև ընտրեցի իմ ուզած ձայնի հատվածը (ամբողջ ալիքավոր հատվածը և հարթ գծի ոչ մի հատված, որը չունի ձայն): Այնուհետև ես գնում եմ դեպի Խմբագրել ներդիրը> Հեռացնել հատուկ> Կտրել ձայնը: Հետո ես հասա «Հետքեր» ներդիրին> «Հավասարեցնել հետքերը»> Սկսել զրոյին: Այնուհետև գնում եմ ֆայլ, այնուհետև արտահանում> Արտահանում որպես WAV:

Ես արտահանում եմ որպես WAV, քանի որ Javascript- ի աուդիո նախագծերում ինձ համար ավելի հեշտ է գործ ունենալ:

Ես այնուհետև օգտագործեցի glitch.com- ը ՝ այս ֆայլերը հյուրընկալելու համար, քանի որ դրանք ունեն զարմանալի բովանդակության առաքման ցանց, որը կարող է օգտագործվել ձեր ունեցած տարբեր նախագծերի համար: Մեկ այլ տարբերակ կարող է լինել օգտագործել firebase- ը, որն իմ նպատակն է տարբեր նախագծերի համար, որոնք կարող են ավելի շատ տեղեկատվություն ունենալ պահեստավորման համար, ինչպես օրինակ ՝ քոլեջի արտադրական տարածքի makerspace գույքագրման ծրագիրը:

Պարզապես պետք է ակտիվները քաշել և գցել ծրագրի գրացուցակում, այնուհետև կարող եք գտնել հղում, երբ կտտացրեք ակտիվների թղթապանակին և կտտացրեք այն ակտիվին, որը ցանկանում եք ստանալ: Այնուհետև Glitch- ը կստեղծի ձեր ակտիվի համար յուրահատուկ CDN հասցե: Օրինակ, ահա A major Chord ձայնի հղումը:

Այնուհետև ես կարող եմ այս բոլոր ակորդները միմյանց միացնել getChord ֆունկցիայի մեջ, որը կփնտրի, երբ սեղմված է դիրքերի որոշակի համադրություն և այնուհետև համապատասխան ակորդ նշանակի հավելվածի նվագարկմանը, երբ տեղի է ունենում ձեռքի հարվածի իրադարձություն:

Քայլ 5. Ամբողջ հավելվածի ավարտում և հյուրընկալում

Հոսթինգի համար շատ եղանակներ կան:

Անկեղծ ասած, լավագույնը, որ ես գտել եմ, պարզապես github- ի օգտագործումն է: Դա պայմանավորված է նրանով, որ եթե դուք լավ եք ծրագրավորել ծրագիրը, կարող եք այնպես անել, որ ձեր ամբողջ հետևը սպասարկվի տվյալների բազայի կամ firebase- ի կրակի պահեստի միջոցով կամ նույնիսկ օգտագործել glitch.com- ից և այլ վայրերից CDN ՝ ակտիվներ պահելու համար:

Github- ում նախագիծը հյուրընկալելու համար մնում է միայն բացել github հաշիվ, ստեղծել նոր պահոց: Այնուհետև, որպեսզի ավելի դյուրին դարձնեք ձեր նախագծի անունը դնելուց հետո, միշտ համոզվեք, որ ավելացնեք լիցենզիա (ես փորձագետ չեմ, բայց պարզել եմ, որ դա հեշտացնում է իմ կյանքը): Ես միշտ պարզապես օգտագործում եմ հանրային լիցենզիա, ինչպես GNU- ն:

Երբ պահեստը ստեղծվի, մենք կարող ենք պարզապես քաշել և թողնել մեր ֆայլերը պահեստի մեջ և սեղմել ներքևում գտնվող կանաչ կատարման կոճակը:

Այնուհետև մենք գնում ենք դեպի Կարգավորումներ էջանիշ ՝ հանդերձի պատկերակով ՝ պահեստի էջի աջ կողմում ՝ աստղի և դիտման կոճակների ներքո: Պարամետրերից հետո ոլորեք ներքև մինչև չտեսնեք Github Էջերի վանդակը: Փոխեք Աղբյուրը գլխավոր մասնաճյուղի և ընտրեք թեմա, եթե ցանկանում եք: Դուք կարող եք սովորել, թե ինչպես օգտագործել թեմաները ՝ դրանք գուգլացնելով (ես դրանք երբեք չեմ օգտագործում, քանի որ հաճախ բերում եմ իմ սեփական CSS- ը և թեմայի գաղափարները):

Երբ էջը պատրաստ լինի, դուք կստանաք կանաչ նշան և նշեք, որ ձեր կայքը հրապարակված է և հասանելի լինել:

Քայլ 6: Կատարված է

Այժմ դուք կարող եք վայելել հիանալի ջեմային նստաշրջան ձեր ականջակալների, ննջասենյակի կամ գնացքի հարմարավետության մեջ: Եթե ցանկանում եք, ավելացրեք ևս մի քանի ակորդ և նույնիսկ նվագեք կիթառի ֆրեթի դիրքերով:

Շարժման հայտնաբերման արագ նշում

1. Կիթառի հարվածի հարվածի շեմը կարող է ճշգրտվել script.js ֆայլում, բայց համոզվեք, որ հավելվածից օգտվելիս ձեր հեռախոսի տեսած ֆոնը համեմատաբար անշարժ է:

2. Օրինակ ՝ գնացքում ավելի լավ է նստել և ականջակալները դնել և հեռախոսը ներս դնել, որպեսզի եթե ուղևորները շրջում են ձեր շուրջը, հեռախոսի տեսախցիկը կարող է միայն տեսնել ձեր ձեռքի մեծ մասը շարժվելիս:

3. Հեռախոսը սեղմած ձեռքը պետք է համեմատաբար անշարժ լինի `կախված ձեր շեմից: Կարծում եմ, որ մի շարք թեստեր կանցկացնեմ բարձր շեմով և կթարմացնեմ այն սահմանները, որոնք հետագայում ավելի կոնկրետ կլինեն:

Խաղալ:

Տեղադրեք ծրագիրը ձեր վեբ դիտարկիչում, այնուհետև թեքեք այն լանդշաֆտային ռեժիմին:

Հետո, երբ ձեռքը պտտեցնում ես, ակորդ կխաղա, այնուամենայնիվ, այն կշարունակի նվագել, մինչև չդիպչես ներքևի աջ անկյունում գտնվող F ստեղնին:

Այլապես, կարող եք դադարեցնել ձայնը `կազմելով ակորդի համադրություն:

Երբ դուք կատարում եք ակորդի համադրություն, ընթացիկ ձայնը դադարում է, ապա ընտրվում է նոր ակորդի ձայն:

Քայլ 7: Սովորած բաներ և վերջին խոսքեր

Ես իսկապես սիրում էի աշխատել այս նախագծի վրա, նույնիսկ եթե երկար տևեց ծրագրի նախատիպը և արտադրելը ՝ այլ նախագծերի և տնային աշխատանքների ընթացքում աշխատելիս: Ես ճանապարհին սովորեցի մի քանի հիանալի բաներ.

1. Թվային արտադրանք նախագծելիս միշտ համոզվեք, որ ձեր նախատիպերը հնարավորինս արագ պատրաստեք, քանի որ ձեր առաջին ենթադրությունները սխալ կլինեն, և մինչև վերջ հասնելու համար հարկավոր է արագ վազել դրանց վրա:

2. Հնարավորինս խուսափեք նախագծի վրա գումար ծախսելուց: Միշտ օգտագործեք այն, ինչ կարող եք, և միշտ սկսեք ձեռքի տակ եղած պարզ իրերից:

3. Մի վախեցեք սովորել նոր լեզուներ, շրջանակներ և համակարգեր: Նրանք հաճախ ավելի հեշտ են լինում, քան սկզբում կարծում եք:

Եվ հսկայական շնորհակալություն միայնակ աղջկան `երազանքներս իրականացնելու համար

Եթե ձեզ հետաքրքրում է, թե ինչպես է զարգանում ծրագիրը, կարող եք միանալ մեր փոստային ցուցակին: Մի փոքր թիմ և ես կաշխատենք ամբողջական տարբերակ պատրաստելու համար, որը կօգնի մարդկանց, ովքեր կոտրված են, ճանապարհորդող կամ փոքր երեխաներին հասանելի լինել հիանալի շարժական կիթառի, որտեղ էլ որ դրանք լինեն:

Մենք իսկապես կցանկանայինք ինչ -որ օգնություն ստանալ հատկապես գրաֆիկական դիզայներների, կիթառահարների և կոդավորողների կողմից `ամեն ինչ փորձարկելու և մարմնավորելու համար:

Վայելեք (◕ ヮ ◕) ﾉ *: ･ ✧ ･: *ヽ (◕ ヮ ◕ ヽ)