Аба - Чыныгы мобилдик аба гитарасы (Прототип): 7 кадам (Сүрөттөр менен)

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:36

Жарайт, Бул акыры менин балалык кыялыма жакындауунун биринчи бөлүгү жөнүндө кыскача көрсөтмө болот.

Мен кичинекей кезимде ар дайым менин сүйүктүү артисттеримди жана группаларымдын гитарада черткенин көрчүмүн.

Мен чоңойгондо гитарада ойногонду үйрөнүп, атүгүл башкаларга таандык ырларды ойногонго шүгүр кылдым, бирок дагы эле өзүмдүкү жок:(Ошентип, мен акыры отуруп, телефондо толугу менен иштей турган, компьютердин көрүнүшүн колдонгон жана мага окшогон адамдарга гитараны каалаган, бирок саякаттап жүргөн, сынган же али али жаш боло турган адамдарды жасоону чечтим!

Сиз бул веб -сайттан прототип колдонмосун таба аласыз

Кантип ойноо керек экенин көрүү үчүн "Сен бүттүң" кадамына өт.

* Аны телефонуңузда колдонууну жана экранды ландшафт режимине бурууну унутпаңыз *

Ырахат алыңыз!

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

Берилиштер:

1. Акылдуу телефон

2. Рабочий компьютер же ноутбук (программалоо үчүн)

1 -кадам: Негизги маалымат жана код боюнча эскертүү

Бул долбоор негизинен толугу менен телефондо иштөөгө багытталган коддолгон долбоор.

Бул долбоорду иштеп чыгууда мен башка колдонмолорду сынап көрдүм жана учурда AirJamz же Kurv гитарасы, портативдүү гитаралар же жада калса оюн дүкөнүндөгү Реал гитара тиркемеси сыяктуу башка түзмөктөрдү издедим.

Мен алардын көбүндө жок болгон көйгөйлөр:

1. Кээ бир керектүү тышкы түзүлүштөр

2. Дээрлик бардык колдонмолор чындыгында аккорддорду же музыкаларды ойнотууга жол берген эмес жана тактай тренажерлери эле

3. Тышкы түзмөктөр абдан кымбат болгон жана көптөгөн гитаристтер чыныгы гитараны сатып алууну сунушташкан

Булар коштомо сүрөттөрдө сүрөттөлгөн.

Ошентип, Air тиркемеси бул көйгөйлөрдү чечиши керек, ал эми телефондо толугу менен иштей алат. Менимче, бул мүмкүн, анткени 2020 -жылы бизде мобилдик браузердин технологиясы жана компьютердик көрүнүштүн жакшыртуулары бар, бул бизге бир RGB камерасы менен кереметтерди жасоого мүмкүндүк берет.

Ошентип, мен толугу менен башталганга чейин анын кандай болорун жана кандайча иштээрин эскиздер менен уланта баштадым.

Мен ошондой эле коддоочу этаптарымды чыгардым, ошондуктан сизди код менен кызыктыруунун ордуна, мен сизди дизайн процессимден өткөрүп, аннотацияланган кодду аягына тиркеп, керек болсо окуп, карап чыгыңыз.

Толук кодду https://github.com/msimbao/air сайтынан тапса болот жана мен ушуга окшош код файлдарыңды түзүүнү сунуштайм.

Ошондой эле, колдонмонун иштеши үчүн, аны жайгаштыруу керектигин эске алыңыз. Мен азырынча аны githubга жайгаштырылганда гана иштете алдым.:)

2 -кадам: Стреминг аракети

Биринчи негизги коддоо этапы, эч кандай тышкы перифериясыз санариптик түрдө көчүрүүнүн жолун табуу болгон. Менин дароо эле телефонумдун алдыңкы RGB камерасын колдонуу болду.

Менин оюм, эгерде адамдын аккорду ойногусу келсе, анда камерасынын алдында колун серпкенде, үн чыгат.

Муну түшүнгөндөн кийин, мага RGB камерасы менен жакшы иштөө үчүн колдонула турган жакшы программалоо тили керек болчу.

Мен Javascriptке көндүм, анткени мен React Native же башка нерсе менен кросс-платформа колдонмосун түзө алам же гитараны веб-сайтка жайгаштыра алам жана ал баарына жеткиликтүү болмок.

Мен андан кийин аккорд үнү болушу мүмкүн болгон аракетти колго серпип алуу ыкмасын табуунун ар кандай жолдорун таптым, бирок муну жасоонун көптөгөн жолдору бар болчу.

Машинаны үйрөнүү мен IBMдин кызматтарын сынап көргөндө абдан жакшы иштеген жана бир жуманын ичинде 3000ге жакын сүрөттөрдү серпип таануу жана аккорд таануу үчүн үйрөткөн. Мен ошондой эле victordibia тарабынан handtrack.js аракет кылдым. Тилекке каршы, экөө тең уюлдук телефондордо укмуштай жай иштешкен.

Мен андан кийин diffcam.comдо кыймыл аныктоо жана лонекореялык ишке ашыруу боюнча чалынып калдым. Мен вебкамераны колдонуп, эки башка кадрды жаздырууга, анан кадрлардын ортосундагы айырмачылыкты эсептеп, айырмага упай берүүгө болорун билдим. Эгерде бул упай белгилүү бир чектен ашып кетсе, анда мен бир аракетти аткарам.

Лонекор дагы дифференциалдык камерасы үчүн кыймылдаткыч жасады, мен аны Air гитарасы үчүн колдонууну чечтим жана ал мага кыймылдын упайын алуу үчүн эң сонун иштеди!

Машина үйрөнүү моделдерин үйрөтүү аракеттеринин сүрөттөрү жана мен үйрөнгөн diffcam.com мисалы тиркелет.

Эскертүү: Бул учурдагы прототипте стмуминг кайра -кайра кайталанат, аны токтотуу үчүн, кийинки ойноткуңуз келген аккордду кармап туруңуз. Бул биз оңдоону үмүттөнгөн ката.

Толук струмдун коду бул жерде тиркелген script.js файлында жана lonekorean тарабынан diffcam кыймылдаткычы ушул жерде.

3 -кадам: Аккорд таануу

Кийинки коддоо этабы аккордду таанууну түз алып жүрүүнүн жолун табуу болду.

Мен колдонуучунун аккорддун фигураларын кайталап, колун жакшы жайгаштырып, ошондой эле аларга ар кандай аккорддорду аткарууга жардам берүүсүн кааладым.

Акыркы кадамдагыдай эле, мен аккордду таануу үчүн Machine Learningди сынап көрдүм, бирок ал мобилдик телефондордо өтө жай болчу.

Мен андан кийин реалдуу гитара колдонмосунан аккорд фигураларын түзүү үчүн экранды колдонуп, телефондун экранына такта коюу мүмкүн экенин билдим.

Андан кийин мен JavaScriptте көп тийүү менен өз ара аракеттенүүгө кантип уруксат берүүнү үйрөнүшүм керек болчу жана Mozilla документтеринен укмуштуудай окуу куралын жана мисалын таптым.

Сенсордук өз ара аракеттенүү, айрыкча, Javascriptте татаал болушу мүмкүн, бирок идея - биз кээ бир дивдерди түзүп, андан кийин ар кандай тийүү окуяларын иштетүү үчүн функцияларды аныктай алабыз:

1. touchStart: манжа экранга тийгенде

2. touchEnd: Манжа кеткенде

3. touchMove: Манжа экранда дагы эле турганда, бирок ордун өзгөрткөндө

Андан кийин биз ар кандай тийүү окуяларына жана айкалыштарына жооп берген өзүбүздүн элементтерибизди аныктоо үчүн ошол функциялардын тегерегинде иштейбиз.

Биздин учурда, биз CSSти колдонуп, андан кийин Javascriptти колдонуп, колдонмону белгилүү дивлер басылганда, аккорд таанылышы керектигин айтабыз.

Биз андан кийин аккордду өткөрүп бере турган аудио объектини аныктай алабыз, андан кийин серпүү окуясы болгондо ошол аудиону ойнотобуз.

Ар кандай аккорддордун комбинациясын аныктоо үчүн, мен бул сүрөттү колдонуп, тактай жасадым, андан кийин ар бир атайын позицияны див болуп, башкаларга тийгизип, айкалыштыра алдым.

Аккорддун прогрессиясын аныктоочу код бул жерден, ал эми контролдук контроллер тиркелген коддон табылган.

4 -кадам: Аккорд үндөрүн табуу

Азыр биздин система таанууга коюлгандыктан, биз аккорддун кээ бир үндөрүнө муктажбыз.

Бактыга жараша, freesound.com мага аудио үлгүлөрү керек болгондо дайыма жардамга келет. Мен жөн гана аккорддорду издеп, дангладанын негизги аккорддорунун укмуш пакетин таптым.

Мен аларды жүктөп алып, үн жазылып жатканда көпчүлүгүнүн башталышында кыска тыныгуу эмес, дароо башталганына ынануу үчүн кайраттуулук менен оңдоп койдум.

Аларды кайраттуулук менен клипке түшүрүү үчүн, мен аларды колдонмого сүйрөп бардым, андан кийин мен каалаган үндүн бөлүгүн тандадым (толкундуу бөлүгү жана үнү жок жалпак сызык бөлүмдөрүнүн бири да). Мен андан кийин Түзөтүү өтмөгүнө өтөм> Атайын алып салуу> Аудиону кыркуу. Андан кийин мен Тректер өтмөгүнө өттүм> Тректерди тегиздөө> Нөлгө баштоо. Мен андан кийин файлга, андан кийин Экспорт> WAV катары экспорттоого өтөм.

Мен WAV катары экспорттойм, анткени мен Javascript аудио долбоорлорунда иштөөнү оңой таптым.

Мен анда glitch.com бул файлдарды жайгаштыруу үчүн колдондум, анткени аларда сизде болгон ар кандай долбоорлор үчүн колдонула турган укмуштуудай мазмун жеткирүү тармагы бар. Дагы бир вариант - бул менин колледжимдин мейкиндик үчүн makerspace инвентардык колдонмосу сыяктуу көбүрөөк маалыматка ээ болушу мүмкүн болгон ар кандай долбоорлор үчүн менин гото базамды колдонуу.

Сиз жөн гана активдерди долбоордун директориясына сүйрөп, таштап салышыңыз керек, андан кийин сиз актив папкасын чыкылдатып, сиз каалаган активди чыкылдатуу менен шилтемени таба аласыз. Glitch анда сиздин актив үчүн уникалдуу CDN url өндүрөт. Мисалы, бул жерде негизги аккорд үнүнө шилтеме бар.

Мен анда бул аккорддордун бардыгын getChord функциясында байланыштыра алам, ал белгилүү бир комбинация басылганда изделет, анан кол менен серпүү окуясы болгондо колдонмого ойноо үчүн тиешелүү аккордду дайындайм.

5 -кадам: Бүтүрүүчү колдонмону бүтүрүү жана хостинг кылуу

Хостингге баруунун көптөгөн жолдору бар.

Чынын айтсам, мен тапкан эң жакшы нерсе - бул githubду колдонуу. Себеби, эгерде сиз колдонмону жакшы программалап койсоңуз, анда сиз өзүңүздүн базаңызды базадан же өрт базасынан тейлей аласыз, же glitch.com жана активдерди сактоо үчүн башка жерлерден CDN колдоно аласыз.

Долбоорду githubга жайгаштыруу үчүн, сиз болгону github эсебин ачып, жаңы репозиторий жасаңыз. Андан кийин, орнотууну жеңилдетүү үчүн, долбоордун атын койгондон кийин, ар дайым лицензияны кошуп коюңуз (мен эксперт эмесмин, бирок бул менин жашоомду жеңилдетет деп таптым). Мен ар дайым GNU сыяктуу коомдук лицензияны колдоном.

Репозиторий орнотулгандан кийин, биз файлдарыбызды репозиторийге сүйрөп барып таштап, астындагы жашыл милдеттенме баскычын чыкылдата алабыз.

Андан кийин, Жылдыздын астындагы репозиторийдин барактын эң оң жагында тиштүү сөлөкөтү бар Орнотуулар өтмөгүнө барабыз жана көрүү баскычтары. Жөндөөлөргө киргенден кийин, Github Pages кутучасын көргөнгө чейин ылдый жылдырыңыз. Булакты мастерликке өзгөртүү жана каалаган болсоңуз теманы тандоо. Сиз темаларды колдонууну гуглинг аркылуу үйрөнө аласыз (мен аларды эч качан колдонбойм, анткени мен көбүнчө өзүмдүн CSS жана тема идеяларымды алып келем).

Барак даяр болгондон кийин, сиз жашыл жарыкка ээ болосуз жана сиздин сайтыңыздын жарыялангандыгын жана кире алаарыңызды белгилейсиз.

6 -кадам: Бүттү

Сиз азыр өзүңүздүн гарнитураңызда, уктоочу бөлмөңүздө же поездде сонун джем сессиясын өткөрө аласыз. Эгерде сиз кааласаңыз, дагы бир нече аккорддорду кошуңуз, атүгүл гитаранын позициясы менен ойноңуз.

Кыймылды аныктоо боюнча кыска жазуу

1. Гитаранын шыңгыраган босогосун script.js файлында туураласа болот, бирок колдонмону колдонуп жатканда, телефонуңуз көргөн фон салыштырмалуу кыймылсыз экенин текшериңиз.

2. Мисалы, поездде отургандардын кулакчындарын коюп, телефонуңузду ичине буруп койгонуңуз оң, эгерде жүргүнчүлөр сизди айланып жүрүшсө, телефондун камерасы көбүнчө колуңуздун кыймылдап жатканын гана көрө алат.

3. Телефонду кармаган колуңуз босогого жараша салыштырмалуу кыймылсыз болушу керек. Мен кээ бир сыноолорду жогорку босого менен өткөрөм жана конкреттүү болуу үчүн алдыдагы чектерди жаңыртам деп ойлойм.

Ойноо:

Колдонмону веб -браузериңизге жүктөңүз, андан кийин пейзаж режимине кыйшайтыңыз.

Анан колуңузду шилтегенде, аккорд ойнойт, бирок ал эң төмөнкү оң бурчтагы F баскычына тиймейинче ойной берет.

Же болбосо, аккорддордун айкалышын жасоо менен үндү токтотууга болот.

Аккорддордун комбинациясын жасаганда, учурдагы үн токтойт, андан кийин жаңы аккорд үнү тандалат.

7 -кадам: Үйрөнүлгөн нерселер жана акыркы сөздөр

Мен башка долбоорлордо жана үй жумуштарында иштеп жатканда колдонмонун прототипине жана чыгарылышына көп убакыт кетсе дагы, бул долбоордун үстүндө иштөөнү абдан жакшы көрчүмүн. Мен жолдо бир нече сонун нерселерди үйрөндүм;

1. Санарип продуктыларды иштеп чыгууда дайыма прототиптериңизди мүмкүн болушунча тезирээк жасаңыз, анткени биринчи божомолдоруңуз туура эмес болуп калат жана аягына чейин жетүү үчүн аларды тез иштетүү керек.

2. Мүмкүн болушунча долбоорго акча коротуудан алыс болуңуз. Ар дайым колуңуздан келгенди кайра колдонуңуз жана дайыма колуңузда болгон жөнөкөй нерселерден баштаңыз.

3. Жаңы тилдерди, алкактарды жана системаларды үйрөнүүдөн коркпоңуз. Алар көбүнчө сиз ойлогондон оңой.

Жана менин кыялдарымдын ишке ашканы үчүн жалгыз калемгерге чоң рахмат

Эгерде сизди колдонмо кандайча иштээри кызыктырса, анда сиз биздин почта тизмегибизге кошула аласыз. Кичинекей команда жана мен бузулган, саякаттап жүргөн же кичинекей балдарга укмуштай портативдүү гитараны кайда болбосун жетүүгө жардам берүү үчүн толук версиясын чыгаруу үчүн иштейбиз.

Биз чындыгында графикалык дизайнерлердин, гитаристтердин жана кодерлердин бардыгын текшерип, этин чыгарууга жардам берүүнү абдан жакшы көрмөкпүз.

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