Air - True Mobile Air Guitar (نموذج أولي): 7 خطوات (مع صور)

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:35

حسنًا ،

سيكون هذا دليلًا قصيرًا حقًا حول الجزء الأول من الاقتراب أخيرًا من حلم طفولتي.

عندما كنت صبيا صغيرا ، كنت دائما أشاهد الفنانين والفرق الموسيقية المفضلة لدي وهم يعزفون على الجيتار بطريقة صحيحة.

عندما كبرت ، كنت ممتنًا بدرجة كافية لتعلم كيفية العزف على الجيتار وحتى العزف على بعضها المملوك للآخرين ، ولكن ما زلت لا أملك جيتار:

لذلك قررت أن أجلس أخيرًا وأن أصنع واحدة تعمل بالكامل على الهاتف ، وتستخدم رؤية الكمبيوتر وتتيح للأشخاص مثلي الذين يريدون غيتارًا ولكنهم قد يسافرون أو ينكسرون أو أصغر من أن يحصلوا على واحد حتى الآن!

يمكنك العثور على تطبيق النموذج الأولي على هذا الموقع

لمعرفة كيفية اللعب ، انتقل إلى خطوة "لقد انتهيت".

* تأكد من استخدامه على هاتفك وتحويل الشاشة إلى الوضع الأفقي *

يتمتع!

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

اللوازم:

1. الهاتف الذكي

2. كمبيوتر مكتبي أو كمبيوتر محمول (للبرمجة)

الخطوة 1: خلفية وملاحظة حول الكود

هذا المشروع هو إلى حد كبير مشروع مشفر يهدف إلى العمل بالكامل على الهاتف.

عند التوصل إلى هذا المشروع ، جربت العديد من التطبيقات الأخرى وبحثت عن أجهزة أخرى موجودة حاليًا في السوق مثل جيتار AirJamz أو Kurv أو القيثارات المحمولة أو حتى تطبيق Real Guitar في متجر الألعاب.

كانت المشاكل التي وجدتها تفتقر إليها الكثير منها هي:

1. بعض الأجهزة الخارجية اللازمة

2. لم تسمح لك جميع التطبيقات تقريبًا بالعزف على أوتار فعلية أو موسيقى وكانت مجرد محاكيات للوحة تأكل

3. كانت الأجهزة الخارجية باهظة الثمن وأوصى العديد من عازفي الجيتار بشراء جيتار حقيقي فقط

هذه مصورة في الصور المصاحبة.

وبالتالي ، يجب أن يحل تطبيق Air هذه المشكلات بينما يكون قادرًا تمامًا على العمل على الهاتف. أعتقد أن هذا ممكن لأنه في عام 2020 لدينا تقنية أفضل لمتصفح الهاتف المحمول والكثير من التحسينات في رؤية الكمبيوتر التي يمكن أن تسمح لنا بعمل المعجزات باستخدام كاميرا RGB واحدة.

لذلك شرعت في عمل بعض الرسومات التخطيطية للشكل الذي سيبدو عليه وكيف سيعمل قبل البدء بشكل كامل.

لقد قمت أيضًا برسم معالم الترميز الخاصة بي ، لذا في هذه التعليمات ، بدلاً من مللك بالرمز ، سأأخذك خلال عملية التصميم الخاصة بي وأرفق الكود المشروح في النهاية لتقرأه وتنظر إليه إذا كنت بحاجة.

يمكن العثور على الكود بالكامل على https://github.com/msimbao/air وأنا أوصي بهيكلة ملفات التعليمات البرمجية الخاصة بك على غرار هذا.

لاحظ أيضًا أنه لتشغيل التطبيق ، يجب استضافته. لقد وجدت حتى الآن أنه يعمل فقط عند استضافته على جيثب.:)

الخطوة 2: عزف العمل

كان أول معلم رئيسي في الترميز ، هو إيجاد طريقة لتكرار مداعبة أوتار الآلة الموسيقية رقميًا دون أي محيط خارجي. كان تفكيري الفوري هو استخدام الكاميرا الأمامية RGB بهاتفي.

كنت أفكر في أنه إذا كان لدى الشخص وتر يريد عزفه ، فعندما يمرر يده أمام الكاميرا ، سيتم تشغيل صوت.

بعد معرفة ذلك ، كنت بحاجة إلى لغة برمجة جيدة يمكن استخدامها للتفاعل بشكل جيد مع كاميرا RGB.

لقد استقرت على Javascript لأنه يمكنني إنشاء تطبيق عبر الأنظمة الأساسية باستخدام React Native أو أي شيء آخر أو يمكنني فقط استضافة الجيتار على موقع ويب ويمكن أن يكون متاحًا للجميع.

بعد ذلك وجدت طرقًا مختلفة لمعرفة كيفية تمرير اليد لبدء إجراء يمكن أن يكون بمثابة صوت وتر ولكن كان هناك العديد من الطرق للقيام بذلك.

عمل التعلم الآلي بشكل جيد للغاية عندما جربت خدمات IBM وقمت بتدريب حوالي 3000 صورة على مدار أسبوع للتعرف على التمرير السريع بالإضافة إلى التعرف على الوتر. لقد جربت أيضًا handtrack.js بواسطة victordibia. لسوء الحظ ، كان كلاهما بطيئًا بشكل لا يصدق على الهواتف المحمولة.

ثم عثرت على كشف الحركة وتنفيذ من قبل lonekorean في diffcam.com. تعلمت أنه من الممكن استخدام كاميرا الويب لتسجيل إطارين منفصلين ثم حساب الفرق بين الإطارات وإعطاء الفرق درجة. إذا تجاوزت هذه النتيجة حدًا معينًا ، فحينئذٍ أقوم بتنفيذ إجراء.

صنع lonekorean أيضًا محركًا لكاميرا الفرق الخاصة به التي قررت استخدامها في غيتار Air وعمل بشكل مثالي للحصول على درجة الحركة!

مرفق به صور لمحاولات تدريب نماذج التعلم الآلي بالإضافة إلى مثال diffcam.com الذي تعلمت منه.

ملاحظة: في هذا النموذج الأولي الحالي ، يتكرر العزف على الوتر مرارًا وتكرارًا ، لإيقافه ، ما عليك سوى الضغط على الوتر الذي تريد تشغيله بعد ذلك. هذا خطأ نأمل في إصلاحه إلى الأمام.

تم العثور على رمز مداعبة أوتار الآلة الموسيقية الكاملة في ملف script.js المرفق هنا ومحرك diffcam بواسطة lonekorean هنا.

الخطوة 3: التعرف على الوتر

كان معلم الترميز التالي هو إيجاد طريقة للتعامل مع التعرف على الأوتار بشكل مباشر.

أردت أن يكون المستخدم قادرًا على تكرار أشكال الوتر الفعلية وبالتالي ممارسة وضع اليد بشكل جيد ومساعدته أيضًا على ممارسة الحبال المختلفة.

كما في الخطوة الأخيرة ، جربت التعلم الآلي للتعرف على الأوتار ، لكنه كان بطيئًا جدًا على الهواتف المحمولة.

تعلمت بعد ذلك شيئًا من تطبيق Real Guitar أنه قد يكون من الممكن وضع لوحة فريت على شاشة الهاتف باستخدام الشاشة لإنشاء أشكال وتر.

كان علي بعد ذلك تعلم كيفية السماح بالتفاعل متعدد اللمس في جافا سكريبت ووجدت برنامجًا تعليميًا رائعًا ومثالًا من مستندات موزيلا

يمكن أن تكون تفاعلات اللمس صعبة خاصةً في جافا سكريبت ولكن الفكرة هي أنه يمكننا إنشاء أقسام معينة ثم تحديد وظائف للتعامل مع أحداث اللمس المختلفة:

1. touchStart: عندما يلمس إصبع الشاشة

2. touchEnd: عندما يترك الاصبع

3. touchMove: عندما لا يزال الإصبع على الشاشة مع تغيير موضعه

ثم نعمل على حل هذه الوظائف لتحديد العناصر الخاصة بنا التي تستجيب لأحداث ومجموعات اللمس المختلفة.

في حالتنا ، نصمم لوحة فريت باستخدام CSS ثم نستخدم Javascript ، ونخبر التطبيق أنه عند ضغط بعض divs معًا ، يجب التعرف على وتر.

يمكننا بعد ذلك تحديد كائن صوتي سنقوم بتمرير الوتر إليه ثم تشغيل هذا الصوت عند حدوث حدث انتقاد.

لتحديد مجموعات الأوتار المختلفة ، قمت بإنشاء لوحة الحنق باستخدام هذه الصورة ثم قمت بتعيين كل موضع خاص ليكون div يمكنني لمسه والجمع بين الآخرين.

تم العثور على الكود الخاص بتعريف تقدم الوتر هنا ووحدة التحكم في لوحة الفريتس موجودة في الكود المرفق.

الخطوة 4: البحث عن أصوات الوتر

الآن وقد تم ضبط نظامنا على التعرف ، نحتاج إلى بعض أصوات الوتر الفعلية.

لحسن الحظ ، يأتي موقع freesound.com دائمًا لإنقاذي عندما أحتاج إلى عينات صوتية. لقد بحثت ببساطة عن الأوتار ووجدت مجموعة رائعة من الأوتار الرئيسية لـ Danglada.

بعد ذلك قمت بتنزيلها وتحريرها باستخدام الجرأة للتأكد من بدء الصوت على الفور بدلاً من التوقف القصير في بداية معظمها عند تسجيلها.

لقصها باستخدام الجرأة ، قمت ببساطة بسحبها إلى التطبيق ثم حدد جزء الصوت الذي أريده (الجزء المتموج بأكمله وليس أي من أقسام الخط المسطح التي لا تحتوي على صوت). انتقل بعد ذلك إلى علامة التبويب تحرير> إزالة خاص> Trim Audio. ثم وصلت إلى علامة تبويب المسارات> محاذاة المسارات> البدء في الصفر. انتقل بعد ذلك إلى ملف ، ثم تصدير> تصدير بتنسيق WAV.

أقوم بالتصدير بتنسيق WAV لأنني وجدت أنه من الأسهل التعامل معها في مشاريع Javascript الصوتية.

ثم استخدمت glitch.com لاستضافة هذه الملفات لأن لديهم شبكة توصيل محتوى مذهلة يمكن استخدامها لمشاريع مختلفة لديك. يمكن أن يكون الخيار الآخر هو استخدام Firebase الذي يمثل غرضي لمشاريع مختلفة قد تحتوي على مزيد من المعلومات لتخزينها مثل تطبيق ميكرسبيس جرد لمساحة التصنيع في كليتي.

عليك ببساطة سحب الأصول وإفلاتها في دليل المشروع ثم يمكنك العثور على رابط عند النقر فوق مجلد الأصول والنقر فوق الأصل الذي تريد الحصول عليه. سينتج Glitch بعد ذلك عنوان URL فريد لـ CDN للأصل الخاص بك. على سبيل المثال ، هذا هو الرابط إلى صوت وتر رئيسي.

يمكنني بعد ذلك ربط كل هذه الأوتار معًا في وظيفة getChord التي ستبحث عنها عند الضغط على مجموعة محددة من مواضع الفريت ثم تعيين وتر مناسب للتطبيق لتشغيله عند حدوث حدث تمرير يدوي.

الخطوة الخامسة: إنهاء التطبيق بأكمله واستضافته

هناك العديد من الطرق للاستضافة.

بصراحة أفضل ما وجدته هو ببساطة استخدام جيثب. هذا لأنه إذا كنت قد برمجت تطبيقًا جيدًا ، فيمكنك جعل الواجهة الخلفية بالكامل يتم تقديمها بواسطة قاعدة بيانات أو متجر نار من Firebase أو حتى استخدام CDN من glitch.com وأماكن أخرى لتخزين الأصول فيها.

لاستضافة المشروع على جيثب ، كل ما عليك فعله هو فتح حساب جيثب ، وإنشاء مستودع جديد. ثم لتسهيل الإعداد ، بعد وضع اسم مشروعك ، تأكد دائمًا من إضافة ترخيص (لست خبيرًا ولكني وجدت أنه يجعل حياتي أسهل). أنا دائما أستخدم رخصة عامة مثل GNU.

بمجرد إعداد المستودع ، يمكننا فقط سحب ملفاتنا وإفلاتها في المستودع والنقر فوق زر الالتزام الأخضر في الأسفل.

ننتقل بعد ذلك إلى علامة التبويب "الإعدادات" مع رمز الترس في أقصى يمين صفحة المستودع أسفل أزرار النجمة والمشاهدة. بمجرد الدخول إلى الإعدادات ، قم بالتمرير لأسفل حتى ترى مربع Github Pages. قم بتغيير المصدر إلى الفرع الرئيسي واختر نسقًا إذا كنت تريد ذلك. يمكنك تعلم كيفية استخدام السمات عن طريق البحث في Google (لا أستخدمها أبدًا لأنني غالبًا ما أحمل أفكار CSS الخاصة بي والموضوعات).

عندما تكون الصفحة جاهزة ، ستحصل على تمييز أخضر وعلامة تخبرك أن موقعك قد تم نشره ويمكن الوصول إليه.

الخطوة 6: تم

يمكنك الآن الاستمتاع بجلسة موسيقية رائعة وأنت مرتاح في سماعات الرأس أو غرفة النوم أو القطار. أضف المزيد من الحبال إذا كنت ترغب في ذلك ، بل قم باللعب مع مواضع الحنق على الجيتار.

ملاحظة سريعة حول كشف الحركة

1. يمكن تعديل الحد الأدنى لتمرير عزف الغيتار في ملف script.js ولكن تأكد من أنه عند استخدام التطبيق ، فإن الخلفية التي يراها هاتفك ثابتة نسبيًا.

2. على سبيل المثال ، في القطار ، من الأفضل أن تجلس وتضع سماعات الرأس الخاصة بك وتحول هاتفك إلى الداخل بحيث إذا كان الركاب يتحركون من حولك ، يمكن لكاميرا الهاتف فقط رؤية يدك تتحرك معظم الوقت.

3. يجب أن تكون اليد التي تمسك الهاتف ثابتة نسبيًا حسب العتبة الخاصة بك. أعتقد أنني سأجري بعض الاختبارات بعتبة عالية وأقوم بتحديث الحدود من الآن فصاعدًا لتكون أكثر تحديدًا.

للعب:

قم بتحميل التطبيق على متصفح الويب الخاص بك ، ثم قم بإمالته إلى الوضع الأفقي.

ثم عندما تتأرجح بيدك ، سيعزف الوتر ، ومع ذلك ، سيستمر في اللعب حتى تلمس المفتاح F في الزاوية اليمنى السفلية.

بدلاً من ذلك ، يمكنك إيقاف الصوت عن طريق عمل تركيبة وتر.

عند تكوين مجموعة وتر ، يتوقف الصوت الحالي ، ثم يتم تحديد صوت وتر جديد.

الخطوة 7: الأشياء التي تم تعلمها والكلمات الأخيرة

لقد أحببت حقًا العمل في هذا المشروع حتى لو استغرق الأمر وقتًا طويلاً لتصميم النموذج الأولي والحصول على التطبيق أثناء العمل في مشاريع أخرى والعمل في المنزل. لقد تعلمت بعض الأشياء الرائعة على طول الطريق أيضًا ؛

1. عند تصميم المنتجات الرقمية ، تأكد دائمًا من جعل النماذج الأولية الخاصة بك في أسرع وقت ممكن لأن افتراضاتك الأولى ستكون خاطئة وستحتاج إلى تجاوزها بسرعة للوصول إلى النهاية.

2. تجنب إنفاق الأموال على المشروع قدر الإمكان. أعد استخدام كل ما يمكنك دائمًا وابدأ دائمًا بالأشياء البسيطة المتوفرة لديك.

3. لا تخف من تعلم لغات وأطر وأنظمة جديدة. غالبًا ما تكون أسهل مما تعتقد في البداية.

وشكرًا كبيرًا للونكوريان على تحقيق أحلامي

إذا كنت مهتمًا بكيفية تطور التطبيق ، يمكنك الانضمام إلى قائمتنا البريدية. سأعمل أنا وفريق صغير على إصدار نسخة كاملة لمساعدة الأشخاص المنكسرين أو المسافرين أو الأطفال الصغار على الوصول إلى جيتار محمول رائع أينما كانوا.

نود حقًا بعض المساعدة خاصةً من مصممي الجرافيك وعازفي الجيتار والمبرمجين لاختبار وتجسيد كل شيء.

استمتع (ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧ ･: * ヽ (◕ ヮ ◕ ヽ)