ჰაერი - ნამდვილი მობილური საჰაერო გიტარა (პროტოტიპი): 7 ნაბიჯი (სურათებით)

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:15

კარგი, ეს იქნება მართლაც მოკლე ინსტრუქცია პირველი ნაწილის შესახებ, რომელიც საბოლოოდ მიუახლოვდა ჩემს ბავშვობის ოცნებას.

როდესაც პატარა ბიჭი ვიყავი, მე ყოველთვის ვუყურებდი ჩემს საყვარელ შემსრულებლებს და ჯგუფებს, რომლებიც უკრავდნენ გიტარაზე.

როცა გავიზარდე, იმდენად მადლობელი ვიყავი, რომ ვისწავლე გიტარაზე დაკვრა და სხვების დაკვრაც კი, მაგრამ მაინც არ მაქვს საკუთარი:(ასე რომ, მე გადავწყვიტე საბოლოოდ დავჯდე და გავაკეთო ის, რომელიც სრულად მუშაობს ტელეფონზე, იყენებს კომპიუტერულ ხედვას და ჩემნაირ ადამიანებს აძლევს საშუალებას, გიტარა სურთ, მაგრამ შეიძლება მოგზაურობენ, გატეხილი ან ძალიან ახალგაზრდა, რომ ჯერ კიდევ მიიღონ!

თქვენ შეგიძლიათ იპოვოთ პროგრამის პროტოტიპი ამ ვებსაიტზე

იმის სანახავად, თუ როგორ უნდა ითამაშოთ, გადადით "დასრულდა" ნაბიჯზე.

* დარწმუნდით, რომ გამოიყენეთ იგი თქვენს ტელეფონში და ეკრანი გვერდზე გადააქციეთ ლანდშაფტის რეჟიმში *

ისიამოვნეთ!

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

მასალები:

1. სმარტფონი

2. დესკტოპის კომპიუტერი ან ლეპტოპი (პროგრამირებისთვის)

ნაბიჯი 1: ფონი და შენიშვნა კოდზე

ეს პროექტი მეტწილად კოდირებული პროექტია, რომელიც მიზნად ისახავს მთლიანად ტელეფონზე მუშაობას.

ამ პროექტის შემდგომ, მე შევეცადე სხვა მრავალი აპლიკაცია და ვეძებდი ბაზარზე არსებულ სხვა მოწყობილობებს, როგორიცაა AirJamz ან Kurv გიტარა, პორტატული გიტარა ან თუნდაც რეალური გიტარის აპლიკაცია სათამაშო მაღაზიაში.

პრობლემები, რომელთა ნაკლებობა აღმოვაჩინე ბევრ მათგანში იყო:

1. ზოგს სჭირდებოდა გარე მოწყობილობები

2. თითქმის ყველა აპლიკაციამ არ მოგცათ რეალურად აკორდების ან მუსიკის დაკვრის საშუალება და იყო მხოლოდ გამგეობის ტრენაჟორები

3. გარე მოწყობილობები საკმაოდ ძვირი იყო და ბევრმა გიტარისტმა გირჩიათ გიტარის ყიდვა

ეს გამოსახულია თანმხლებ სურათებში.

ასე რომ, საჰაერო აპლიკაციამ უნდა გადაჭრას ეს პრობლემები, სანამ სრულად შეძლებს ტელეფონზე მუშაობას. მე მჯერა, რომ ეს შესაძლებელია, რადგან 2020 წელს ჩვენ გვაქვს ბევრად უკეთესი მობილური ბრაუზერის ტექნოლოგია და ბევრი გაუმჯობესება კომპიუტერულ ხედვაში, რაც მოგვცემს საშუალებას გავაკეთოთ სასწაულები ერთი RGB კამერით.

ასე რომ, მე გავაგრძელე ესკიზების გაკეთება, თუ როგორ იქნებოდა და როგორ ფუნქციონირებდა სრულად დაწყებამდე.

მე ასევე შევადგინე ჩემი კოდირების ეტაპები, ასე რომ ამ სასწავლო ინსტრუქციაში, იმის ნაცვლად, რომ მოგაწყინოთ კოდი, მე გაგივლით ჩემს დიზაინის პროცესს და ბოლოს დავამატებ ანოტირებულ კოდს, რომ წაიკითხოთ და დაათვალიეროთ თუ გჭირდებათ.

მთელი კოდი შეგიძლიათ იხილოთ https://github.com/msimbao/air და მე გირჩევთ შექმნათ თქვენი კოდის მსგავსი ფაილები.

ასევე გაითვალისწინეთ, რომ აპლიკაციის გასაშვებად მას სჭირდება მასპინძლობა. მე ჯერჯერობით მხოლოდ ის ვიპოვე გასაშვებად, როდესაც github– ზე მასპინძლობს.:)

ნაბიჯი 2: დამთრგუნველი მოქმედება

პირველი ძირითადი კოდირების ეტაპი იყო პოვნა ციფრული გზით გამეორების ყოველგვარი გარე პერიფერიის გარეშე. ჩემი უშუალო აზრი იყო ჩემი ტელეფონის RGB წინა კამერის გამოყენება.

მე ვფიქრობდი, რომ თუ ადამიანს აქვს აკორდი, რომლის დაკვრაც სურს, მაშინ როდესაც ის კამერას წინ გადაისვრის ხელს, გაისმის ხმა.

ამის გააზრების შემდეგ, მე მჭირდებოდა კარგი პროგრამირების ენა, რომელიც შეიძლება გამოყენებულ იქნას RGB კამერასთან კარგად დასაკავშირებლად.

მე შევთანხმდი Javascript– ზე, რადგან შემეძლო შემექმნა პლატფორმის აპლიკაცია React Native– ით ან სხვა რამეებით, ან უბრალოდ გიტარა ვებ – გვერდზე მოვსულიყავი და ის ყველასთვის ხელმისაწვდომი ყოფილიყო.

შემდეგ მე აღმოვაჩინე სხვადასხვა გზა იმის გასარკვევად, თუ როგორ უნდა მოხდეს ხელის დარტყმა მოქმედების გასააქტიურებლად, რომელიც შეიძლება იყოს აკორდის ჟღერადობა, მაგრამ ამის მრავალი გზა იყო.

მანქანათმცოდნეობა მშვენივრად მუშაობდა, როდესაც ვცდილობდი IBM- ის მომსახურებას და კვირაში 3000 -მდე სურათს ვამზადებდი დარტყმის ამოცნობისა და აკორდის ამოცნობისთვის. მე ასევე შევეცადე handtrack.js ვიქტორდიბია. სამწუხაროდ, ორივე წარმოუდგენლად ნელი იყო მობილურ ტელეფონებზე.

შემდეგ მე წავაწყდი მოძრაობის გამოვლენას და მარტოხელა მცხოვრების განხორციელებას diffcam.com– ზე. გავიგე, რომ შესაძლებელია ვებკამერის გამოყენება ორი ცალკეული ჩარჩოს ჩასაწერად და შემდეგ ჩარჩოებს შორის სხვაობის გამოთვლა და სხვაობას ქულის მინიჭება. თუ ეს ქულა აჭარბებს გარკვეულ ზღვარს, მაშინ ვასრულებ მოქმედებას.

მარტოხელა ასევე გააკეთა ძრავა თავისი განსხვავებული კამერისთვის, რომელიც მე გადავწყვიტე გამოვიყენო საჰაერო გიტარისთვის და ის მშვენივრად მუშაობდა მოძრაობის შედეგის მისაღებად!

მიმაგრებულია მანქანათმცოდნეობის მოდელების სწავლების მცდელობის სურათები, ასევე diffcam.com მაგალითი, საიდანაც ვისწავლე.

შენიშვნა: ამ ამჟამინდელ პროტოტიპში, strumming kinda იმეორებს უსასრულოდ, მის შესაჩერებლად, უბრალოდ დაიჭირეთ აკორდი, რომლის დაკვრაც გსურთ. ეს არის ხარვეზი, რომელსაც ჩვენ ვიმედოვნებთ, რომ გამოვასწორებთ.

სრული სტრიუმის კოდი ნაპოვნია script.js ფაილში, რომელიც არის მიმაგრებული აქ და lonekorean- ის დიფექტური ძრავა აქ.

ნაბიჯი 3: აკორდის ამოცნობა

შემდეგი კოდირების ეტაპი იყო მაშინ, თუ ვიპოვით გზას აკორდის ამოცნობის პირდაპირ რეჟიმში.

მე მინდოდა, რომ მომხმარებელს შეეძლო გაემეორებინა აკორდის რეალური ფორმები და ასე პრაქტიკაში ხელის კარგი განთავსება და ასევე დავეხმარო მათ სხვადასხვა აკორდების პრაქტიკაში.

ბოლო ნაბიჯის მსგავსად, მე ვცადე მანქანების სწავლა აკორდის ამოცნობისთვის, მაგრამ ეს ძალიან ნელი იყო მობილურ ტელეფონებზე.

შემდეგ მე ვისწავლე რაღაც რეალური გიტარის აპლიკაციიდან, რომ შესაძლებელია ტელეფონის ეკრანზე მოათავსოთ დაფა და გამოიყენოთ ეკრანი აკორდის ფორმების შესაქმნელად.

შემდეგ მე უნდა ვისწავლო როგორ დავუშვათ მრავალ შეხება JavaScript– ში და ვიპოვე გასაოცარი სახელმძღვანელო და მაგალითი Mozilla– ს დოკუმენტებიდან

შეხების ინტერაქცია შეიძლება იყოს სახიფათო, განსაკუთრებით Javascript– ში, მაგრამ იდეა იმაშია, რომ ჩვენ შეგვიძლია შევქმნათ გარკვეული დივიზიონები და შემდეგ განვსაზღვროთ ფუნქციები სხვადასხვა შეხების მოვლენების დასამუშავებლად:

1. touchStart: როდესაც თითი ეკრანს ეხება

2. touchEnd: როდესაც თითი ტოვებს

3. touchMove: როდესაც თითი ჯერ კიდევ ეკრანზეა, მაგრამ იცვლის პოზიციას

შემდეგ ჩვენ ვმუშაობთ იმ ფუნქციებზე, რომ განვსაზღვროთ ჩვენი საკუთარი ელემენტები, რომლებიც ეხმიანებიან შეხების სხვადასხვა მოვლენას და კომბინაციას.

ჩვენს შემთხვევაში, ჩვენ ვამუშავებთ fret დაფას CSS– ის გამოყენებით და შემდეგ Javascript– ის გამოყენებით, ვუთხრათ აპს, რომ როდესაც გარკვეული დივიზიები ერთმანეთზეა დაჭერილი, აკორდი უნდა იყოს აღიარებული.

ამის შემდეგ შეგვიძლია განვსაზღვროთ აუდიო ობიექტი, რომელზედაც გადავალთ აკორდს და შემდეგ ვითამაშოთ ეს აუდიო, როდესაც ხდება დარტყმის მოვლენა.

აკორდის სხვადასხვა კომბინაციის დასადგენად, მე შევიმუშავე დაფა ამ სურათის გამოყენებით და შემდეგ დავაყენე თითოეული განსაკუთრებული პოზიცია, როგორც დივიზიონი, რომელსაც შევეხები და შევაერთებ სხვებთან ერთად.

აკორდის პროგრესირების განსაზღვრის კოდი არის აქ და fretboard კონტროლერი გვხვდება თანდართულ კოდში.

ნაბიჯი 4: აკორდის ბგერების პოვნა

ახლა, როდესაც ჩვენი სისტემა აღიარებულია, ჩვენ გვჭირდება აკორდის რეალური ბგერები.

საბედნიეროდ, freesound.com ყოველთვის მიშველის, როცა აუდიო ნიმუშები მჭირდება. მე უბრალოდ ვეძებდი აკორდებს და ვიპოვე დანგლადას მთავარი აკორდების საოცარი პაკეტი.

შემდეგ გადმოვწერე ისინი და გამოვასწორე გაბედულად, რათა დავრწმუნდე, რომ ხმა მაშინვე დაიწყო, ვიდრე მათი უმრავლესობის დაწყებისას მცირე პაუზა, როდესაც ისინი ჩაწერეს.

გამბედაობის გამოსაჭრელად, მე უბრალოდ ჩავათრიე ისინი აპლიკაციაში, შემდეგ შევარჩიე ხმის ის ნაწილი, რომელიც მსურს (მთელი ტალღოვანი ნაწილი და არც ერთი ბრტყელი ხაზის მონაკვეთი, რომელსაც არ აქვს ხმა). შემდეგ მივდივარ რედაქტირების ჩანართზე> სპეციალური ამოღება> აუდიოს მორთვა. შემდეგ მივედი ტრეკების ჩანართზე> ტრეკების გასწორება> დაწყება ნულამდე. მე გადავალ ფაილზე, შემდეგ ექსპორტზე> ექსპორტი როგორც WAV.

ვატარებ ექსპორტს WAV რადგან მე უფრო გამიადვილდა საქმე Javascript აუდიო პროექტებში.

მე გამოვიყენე glitch.com ამ ფაილების მასპინძლობისთვის, რადგან მათ აქვთ გასაოცარი შინაარსის მიწოდების ქსელი, რომელიც შეიძლება გამოყენებულ იქნას თქვენს მიერ განხორციელებული სხვადასხვა პროექტებისთვის. კიდევ ერთი ვარიანტი შეიძლება იყოს firebase– ის გამოყენება, რაც ჩემი მიზანია სხვადასხვა პროექტებისთვის, რომლებსაც შეიძლება ჰქონდეთ მეტი ინფორმაცია შესანახად, როგორიცაა makerspace ინვენტარიზაციის პროგრამა ჩემი კოლეჯის შემქმნელი სივრცისათვის.

თქვენ უბრალოდ უნდა გადააადგილოთ აქტივები პროექტის დირექტორიაში და შემდეგ შეგიძლიათ იპოვოთ ბმული, როდესაც დააწკაპუნებთ აქტივების საქაღალდეზე და დააწკაპუნებთ აქტივზე, რომლის მიღება გსურთ. შემდეგ Glitch შექმნის უნიკალურ CDN url თქვენს აქტივს. მაგალითად, აქ არის ბმული ძირითადი აკორდის ბგერაზე.

შემდეგ შემიძლია დავაკავშირო ყველა ეს აკორდი ერთად getChord ფუნქციაში, რომელიც ეძებს, როდესაც დაჭერილია fret პოზიციების კონკრეტული კომბინაცია და შემდეგ მივანიჭებ შესაბამის აკორდს პროგრამისთვის, როდესაც მოხდება ხელით დარტყმის მოვლენა.

ნაბიჯი 5: მთლიანი აპლიკაციის დასრულება და მასპინძლობა

მასპინძლობის მრავალი გზა არსებობს.

გულწრფელად რომ ვთქვათ, საუკეთესო, რაც მე ვიპოვე, არის უბრალოდ github– ის გამოყენება. ეს იმიტომ ხდება, რომ თუ თქვენ კარგად გაქვთ დაპროგრამებული აპლიკაცია, შეგიძლიათ გახადოთ თქვენი მთელი უკანა ნაწილი მოგემსახუროს მონაცემთა ბაზამ ან ცეცხლის ბაზამ, ან თუნდაც გამოიყენოთ CDN glitch.com– დან და სხვაგან აქტივების შესანახად.

Github– ზე პროექტის მასპინძლობისთვის, თქვენ მხოლოდ უნდა გახსნათ github ანგარიში, შექმნათ ახალი საცავი. შემდეგ, რათა გაადვილდეს დაყენება, მას შემდეგ რაც დაასახელებთ თქვენი პროექტის სახელს, ყოველთვის დარწმუნდით, რომ დაამატოთ ლიცენზია (მე არ ვარ ექსპერტი, მაგრამ აღმოვაჩინე, რომ ეს უფრო ამარტივებს ჩემს ცხოვრებას). მე ყოველთვის ვიყენებ საჯარო ლიცენზიას, როგორიცაა GNU.

მას შემდეგ, რაც საცავი შეიქმნება, ჩვენ შეგვიძლია უბრალოდ გადმოვიღოთ ჩვენი ფაილები საცავში და დააწკაპუნოთ მწვანე ჩადენის ღილაკზე ბოლოში.

ჩვენ შემდეგ მივდივართ პარამეტრების ჩანართზე გადაცემათა კოლოფის ხატით საცავის გვერდის უკიდურეს მარჯვნივ ვარსკვლავის ქვეშ და უყურეთ ღილაკებს. ერთხელ პარამეტრებში, გადაახვიეთ ქვემოთ სანამ არ დაინახავთ Github გვერდების ყუთს. შეცვალეთ წყარო სამაგისტრო ფილიალში და შეარჩიეთ თემა, თუ გსურთ. თქვენ შეგიძლიათ ისწავლოთ თემების გამოყენება მათი გუგლით (მე არასოდეს ვიყენებ მათ, რადგან მე ხშირად მომაქვს ჩემი საკუთარი CSS და თემის იდეები).

როდესაც გვერდი მზად იქნება, თქვენ მიიღებთ მწვანე ხაზგასმას და მონიშნავთ, რომ გეტყვით, რომ თქვენი საიტი გამოქვეყნებულია და მისი წვდომა შესაძლებელია.

ნაბიჯი 6: შესრულებულია

ახლა თქვენ შეგიძლიათ ისიამოვნოთ გასაოცარი ჯემით თქვენი ყურსასმენის, საძინებლის ან მატარებლის კომფორტში. დაამატეთ კიდევ რამდენიმე აკორდი, თუ მოგწონთ და ითამაშეთ გიტარაზე.

სწრაფი შენიშვნა მოძრაობის გამოვლენის შესახებ

1. გიტარის დარტყმის ბარიერი შეიძლება მორგებული იყოს script.js ფაილში, მაგრამ დარწმუნდით, რომ როდესაც აპს იყენებთ, ფონი, რომელსაც თქვენი ტელეფონი ხედავს, შედარებით უძრავია.

2. მაგალითად, მატარებელში სჯობს დაჯდეთ და ყურსასმენი ჩაიდოთ და ტელეფონი შიგნიდან ჩართოთ ისე, რომ თუ მგზავრები თქვენს ირგვლივ მოძრაობენ, ტელეფონის კამერა უმეტესად მხოლოდ თქვენს ხელის მოძრაობას ხედავს.

3. ტელეფონი, რომელიც ხელს გიჭირავს, უნდა იყოს შედარებით უძრავი, რაც დამოკიდებულია თქვენს ზღურბლზე. მე ვფიქრობ, რომ გავატარებ რამდენიმე ტესტს მაღალი ბარიერით და განვაახლებ ლიმიტებს, რომლებიც მომავალში უფრო კონკრეტული გახდება.

Თამაში:

ჩატვირთეთ აპლიკაცია თქვენს ბრაუზერში, შემდეგ დახრიეთ ლანდშაფტის რეჟიმში.

მაშინ, როდესაც ხელს ატრიალებ, აკორდი ითამაშებს, თუმცა ის გააგრძელებს თამაშს მანამ, სანამ არ შეეხები F ღილაკს ქვედა მარჯვენა კუთხეში.

გარდა ამისა, თქვენ შეგიძლიათ შეაჩეროთ ხმა აკორდის კომბინაციით.

როდესაც აკორდის კომბინაციას აკეთებთ, მიმდინარე ხმა ჩერდება, შემდეგ ირჩევა ახალი აკორდის ხმა.

ნაბიჯი 7: ნასწავლი ნივთები და ბოლო სიტყვები

მე ნამდვილად მომეწონა ამ პროექტზე მუშაობა მაშინაც კი, თუ დიდი დრო დასჭირდა პროტოტიპის შექმნას და პროგრამის დამზადებას სხვა პროექტებზე და საშინაო სამუშაოებზე მუშაობისას. მეც ვისწავლე რამდენიმე გასაოცარი რამ გზაზე;

1. ციფრული პროდუქტების დიზაინის შექმნისას ყოველთვის დარწმუნდით, რომ თქვენი პროტოტიპები რაც შეიძლება სწრაფად გააკეთეთ, რადგან თქვენი პირველი ვარაუდები მცდარი იქნება და თქვენ უნდა სწრაფად გადალახოთ ისინი ბოლომდე.

2. მაქსიმალურად მოერიდეთ პროექტზე ფულის დახარჯვას. ყოველთვის გამოიყენე რაც შეგიძლია და ყოველთვის დაიწყე მარტივი ნივთებით, რაც ხელთ გაქვს.

3. ნუ შეგეშინდებათ ისწავლოთ ახალი ენები, ჩარჩოები და სისტემები. ისინი ხშირად უფრო ადვილია, ვიდრე თავიდან გგონიათ.

და უღრმესი მადლობა ლონეკორელს ჩემი ოცნებების ახდენისათვის

თუ გაინტერესებთ როგორ ვითარდება აპლიკაცია, შეგიძლიათ შეუერთდეთ ჩვენს საფოსტო სიას. მე და პატარა გუნდი ვიმუშავებთ, რომ შევქმნათ სრული ვერსია, რათა დავეხმაროთ ადამიანებს, ვინც გატეხილია, მოგზაურობს ან ახალგაზრდა ბავშვებს აქვთ წვდომა გასაოცარ პორტატულ გიტარაზე, სადაც არ უნდა იყვნენ ისინი.

ჩვენ ნამდვილად გვესიამოვნებოდა დახმარება, განსაკუთრებით გრაფიკული დიზაინერების, გიტარისტებისა და შემქმნელებისგან, რომ ყველაფერი გამოსცადონ და შეასრულონ.

ისიამოვნეთ (◕ ◕ ◕) ﾉ *: ･ ﾟ ✧ ･: *ヽ (◕ ヮ ヽ ヽ)