Air - True Mobile Air Guitar (Prototype): 7 مرحله (همراه با تصاویر)

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:51

بسیار خوب ،

این در مورد بخش اول نزدیک شدن به رویای دوران کودکی من بسیار آموزنده خواهد بود.

وقتی بچه بودم ، همیشه هنرمندان و گروههای مورد علاقه ام را می دیدم که بی نقص گیتار می زنند.

وقتی بزرگ شدم ، آنقدر سپاسگزار بودم که چگونه گیتار بزنم و حتی برخی را که متعلق به دیگران است یاد بگیرم ، اما هنوز گیتار خود را ندارم:(بنابراین تصمیم گرفتم سرانجام بنشینم و دستگاهی بسازم که کاملاً با تلفن کار کند ، از بینایی رایانه استفاده کند و به افرادی مانند من که گیتار می خواهند اما ممکن است در سفر باشند ، شکسته باشند یا برای تهیه آن هنوز خیلی جوان هستند ، اجازه دهد!

می توانید نمونه اولیه برنامه را در این وب سایت پیدا کنید

برای مشاهده نحوه بازی ، به مرحله "شما انجام شدید" بروید.

* حتماً از آن در تلفن خود استفاده کنید و صفحه را به حالت افقی بچرخانید *

لذت بردن!

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

تدارکات:

1. تلفن هوشمند

2. کامپیوتر رومیزی یا لپ تاپ (برای برنامه نویسی)

مرحله 1: سابقه و توجه به کد

این پروژه عمدتا یک پروژه رمزگذاری شده است که هدف آن اجرای کامل تلفن است.

در راه اندازی این پروژه ، برنامه های مختلف دیگری را امتحان کردم و دستگاه های دیگر موجود در بازار مانند گیتار AirJamz یا Kurv ، گیتارهای قابل حمل یا حتی برنامه Real Guitar را در فروشگاه بازی جستجو کردم.

مشکلاتی که در بسیاری از آنها وجود نداشت عبارت بودند از:

1. برخی به دستگاه های خارجی نیاز داشتند

2. تقریباً همه برنامه ها واقعاً به شما اجازه نمی دهند آکورد یا موسیقی واقعی پخش کنید و فقط شبیه سازهای هیئت مدیره بودند

3. دستگاههای خارجی بسیار گران قیمت بودند و بسیاری از نوازندگان گیتار فقط خرید یک گیتار واقعی را توصیه می کردند

اینها در تصاویر همراه نشان داده شده است.

و بنابراین برنامه Air باید این مشکلات را حل کند در حالی که می تواند به طور کامل بر روی تلفن اجرا شود. من معتقدم این امکان پذیر است زیرا در سال 2020 ما از فناوری مرورگر موبایل به مراتب بهتر و پیشرفت های زیادی در بینایی رایانه برخورداریم که می تواند به ما اجازه دهد با یک دوربین RGB شگفتی ها را انجام دهیم.

بنابراین ، پیش از شروع به کار ، طرح هایی از ظاهر و نحوه عملکرد آن انجام دادم.

من نقاط عطف برنامه نویسی خود را نیز بیان کردم ، بنابراین در این دستورالعمل ، به جای این که شما را با کد خسته کنم ، شما را در مراحل طراحی خود می بینم و کد حاشیه نویسی را در انتها ضمیمه می کنم تا در صورت نیاز بخوانید و نگاه کنید.

کل کد را می توانید در https://github.com/msimbao/air پیدا کنید و توصیه می کنم فایل های کد خود را شبیه به این ساختار دهید.

همچنین توجه داشته باشید که برای اجرای برنامه ، باید میزبانی شود. من تا به حال فقط آن را پیدا کرده ام که وقتی در github میزبانی می شود اجرا شود.:)

مرحله 2: اقدام Strumming

اولین نقطه عطف بزرگ برنامه نویسی ، یافتن راهی برای تکرار دیجیتالی strum بدون هیچگونه محیط خارجی بود. فکر فوری من این بود که از دوربین جلویی RGB گوشی خود استفاده کنم.

فکر من این بود که اگر شخصی آکوردی دارد که می خواهد بنوازد ، وقتی دستش را جلوی دوربین بکشد ، صدایی پخش می شود.

پس از فهمیدن این موضوع ، من به یک زبان برنامه نویسی خوب نیاز داشتم که بتوان از آن برای ارتباط خوب با دوربین RGB استفاده کرد.

من برای جاوا اسکریپت تصمیم گرفتم زیرا می توانم یک برنامه چند پلتفرمی با React Native یا چیز دیگری بسازم یا فقط می توانم گیتار را در یک وب سایت میزبانی کنم و برای همه قابل دسترسی باشد.

سپس روشهای متفاوتی را پیدا کردم تا بفهمم چگونه می توان با کشیدن دست اقداماتی را انجام داد که می تواند صدای آکورد باشد ، اما روشهای زیادی برای انجام این کار وجود داشت.

وقتی خدمات IBM را امتحان کردم و در طول هفته حدود 3000 تصویر برای تشخیص کش رفتن و تشخیص آکورد آموزش دادم ، یادگیری ماشین بسیار خوب عمل کرد. من همچنین handtrack.js توسط victordibia را امتحان کردم. متأسفانه هر دو به طور باورنکردنی در تلفن های همراه کند بودند.

سپس با تشخیص حرکت و اجرای برنامه lonekorean در diffcam.com برخورد کردم. آموختم که می توان از وب کم برای ضبط دو فریم جداگانه و سپس محاسبه تفاوت بین فریم ها و امتیاز دادن به تفاوت استفاده کرد. اگر این نمره از آستانه خاصی فراتر رود ، من یک عمل را اجرا می کنم.

این تنهایی همچنین یک موتور برای دوربین دیفرانسیل خود ساخت که من تصمیم گرفتم از آن برای گیتار Air استفاده کنم و برای به دست آوردن نمره حرکت کاملاً کار کرد!

پیوست تصاویری از تلاش برای آموزش مدل های یادگیری ماشین و همچنین مثال diffcam.com است که از آن یاد گرفته ام.

توجه: در این نمونه اولیه فعلی ، صدای زمزمه بارها و بارها تکرار می شود ، برای جلوگیری از آن ، به سادگی آکوردی را که می خواهید بعداً پخش کنید نگه دارید. این اشکالی است که امیدواریم در آینده برطرف شود.

کد strum کامل در فایل script.js که در اینجا ضمیمه شده است و موتور diffcam توسط lonekorean در اینجا قرار دارد.

مرحله 3: تشخیص آکورد

نقطه عطف بعدی برنامه نویسی یافتن راهی برای کنترل زنده آکورد بود.

من می خواستم یک کاربر بتواند اشکال واقعی آکورد را تکرار کند و بنابراین نحوه قرارگیری مناسب دست را تمرین کند و همچنین به آنها در تمرین آکوردهای مختلف کمک کند.

مانند مرحله آخر ، یادگیری ماشین را برای تشخیص آکورد آزمایش کردم ، اما در تلفن های همراه بسیار کند بود.

سپس از برنامه Real Guitar چیزی آموختم که ممکن است بتوان یک تخته fretboard را روی صفحه تلفن قرار داد و از صفحه برای ایجاد اشکال وتر استفاده کرد.

سپس من مجبور شدم نحوه اجازه تعامل چند لمسی در جاوا اسکریپت را بیاموزم و یک آموزش عالی و نمونه ای از اسناد موزیلا پیدا کردم

تعاملات لمسی به خصوص در جاوا اسکریپت می تواند مشکل باشد ، اما ایده این است که ما می توانیم div های خاصی ایجاد کنیم و سپس توابع را برای رسیدگی به رویدادهای مختلف لمسی تعریف کنیم:

1. touchStart: وقتی انگشتی صفحه را لمس می کند

2. touchEnd: وقتی انگشت می رود

3. touchMove: وقتی انگشت هنوز روی صفحه است اما موقعیت خود را تغییر می دهد

سپس ما در اطراف آن توابع کار می کنیم تا عناصر خود را که به رویدادها و ترکیبات مختلف لمس پاسخ می دهند ، تعریف کنیم.

در مورد ما ، ما یک تخته فرت با استفاده از CSS طراحی می کنیم و سپس از Javascript استفاده می کنیم و به برنامه می گوییم که وقتی دی وی های خاصی به هم فشرده می شوند ، باید یک آکورد تشخیص داده شود.

سپس می توانیم یک شیء صوتی را تعریف کنیم که آکورد را به آن منتقل کرده و در صورت وقوع یک حرکت کش رفتن آن صدا را پخش کنیم.

برای تعریف ترکیبات مختلف آکورد ، من تخته فرت را با استفاده از این تصویر ساختم و سپس فقط هر موقعیت ویژه را به عنوان div قرار دادم که می توانم با دیگران لمس کنم و ترکیب کنم.

کد تعریف پیشرفت آکورد در اینجا و کنترل کننده fretboard در کد پیوست یافت می شود.

مرحله 4: پیدا کردن صداهای وتر

اکنون که سیستم ما برای تشخیص تنظیم شده است ، ما به صداهای واقعی آکورد نیاز داریم.

خوشبختانه freesound.com همیشه وقتی به نمونه های صوتی احتیاج دارم به نجات من می آید. من به سادگی آکوردها را جستجو کردم و یک بسته شگفت انگیز از آکوردهای اصلی danglada پیدا کردم.

سپس آنها را بارگیری و با استفاده از جسارت ویرایش کردم تا مطمئن شوم که صدا بلافاصله شروع می شود تا مکث کوتاهی در شروع اکثر آنها هنگام ضبط.

برای کلیپ کردن آنها با استفاده از جسارت ، من آنها را به سادگی به داخل برنامه کشاندم و سپس قسمتی از صدا را که می خواهم (کل قسمت موج دار و هیچ یک از قسمتهای خط صاف که صدا ندارند) انتخاب کردم. سپس به برگه ویرایش> حذف ویژه> اصلاح صدا بروید. سپس به برگه Tracks> Align Tracks> Start to Zero رسیدم. سپس به پرونده می روم ، سپس Export> Export as WAV.

من به عنوان WAV صادر می کنم زیرا در پروژه های صوتی Javascript کار با آن راحت تر شده است.

سپس از glitch.com برای میزبانی این فایل ها استفاده کردم زیرا آنها دارای شبکه تحویل محتوا شگفت انگیز هستند که می تواند برای پروژه های مختلف مورد استفاده شما استفاده شود. یک گزینه دیگر می تواند استفاده از firebase باشد که برای پروژه های مختلف مورد استفاده من است و ممکن است اطلاعات بیشتری برای ذخیره کردن داشته باشد مانند برنامه موجودی فضای مجازی برای فضای کالج من.

شما فقط باید دارایی ها را به فهرست پروژه بکشید و رها کنید و سپس هنگامی که روی پوشه دارایی کلیک کرده و دارایی مورد نظر خود را دریافت می کنید ، پیوندی را پیدا کنید. سپس Glitch یک URL CDN منحصر به فرد برای دارایی شما ایجاد می کند. به عنوان مثال ، در اینجا پیوند صدای اصلی Aord Chord وجود دارد.

سپس می توانم همه این آکوردها را در یک تابع getChord به هم پیوند دهم که به دنبال زمانی است که ترکیب خاصی از موقعیت های fret فشار داده شده باشد و سپس یک آکورد مناسب برای برنامه زمانی که یک رویداد کشیدن دست اتفاق می افتد ، اختصاص دهد.

مرحله 5: تکمیل و میزبانی کل برنامه

راه های زیادی برای میزبانی وجود دارد.

راستش بهترین چیزی که پیدا کردم استفاده از github است. این امر به این دلیل است که اگر برنامه ای را به خوبی برنامه ریزی کرده اید ، می توانید کل پایگاه خود را در پایگاه داده یا آتش نشانی از firebase سرو کنید یا حتی از CDN از glitch.com و سایر مکانها برای ذخیره دارایی ها استفاده کنید.

برای میزبانی پروژه در github ، کافی است یک حساب github باز کنید ، یک مخزن جدید ایجاد کنید. سپس برای سهولت راه اندازی ، پس از نامگذاری پروژه خود ، همیشه مجوز را اضافه کنید (من متخصص نیستم اما متوجه شده ام که زندگی من را آسان تر می کند). من همیشه از مجوز عمومی مانند GNU استفاده می کنم.

پس از راه اندازی مخزن ، ما فقط می توانیم فایل های خود را به مخزن بکشیم و رها کنیم و روی دکمه سبز تعهد در پایین کلیک کنیم.

سپس به برگه تنظیمات با نماد چرخ دنده در سمت راست سمت مخزن در زیر دکمه های ستاره و ساعت می رویم. پس از وارد شدن به تنظیمات ، به پایین بروید تا کادر صفحات Github را ببینید. منبع را به شاخه اصلی تغییر دهید و در صورت تمایل یک موضوع انتخاب کنید. با استفاده از گوگل می توانید نحوه استفاده از موضوعات را بیاموزید (من هرگز از آنها استفاده نمی کنم زیرا اغلب CSS و ایده های موضوعی خود را می آورم).

وقتی صفحه آماده شد ، یک علامت سبز رنگ خواهید داشت و تیک می زنید که به شما می گوید سایت شما منتشر شده است و می توانید به آن دسترسی داشته باشید.

مرحله 6: انجام شد

اکنون می توانید از یک جلسه جم عالی در راحتی هدفون ، اتاق خواب یا قطار لذت ببرید. اگر دوست دارید چند آکورد دیگر اضافه کنید و حتی با موقعیت های فرت گیتار بازی کنید.

یک نکته سریع در تشخیص حرکت

1. آستانه ضربه تند زدن گیتار را می توان در فایل script.js تنظیم کرد ، اما مطمئن شوید که هنگام استفاده از برنامه ، پس زمینه ای که تلفن شما می بیند نسبتاً ثابت است.

2. به عنوان مثال ، در قطار ، بهتر است بنشینید و هدفون خود را بگذارید و تلفن خود را به سمت داخل بچرخانید تا اگر مسافران در اطراف شما حرکت می کنند دوربین تلفن فقط بیشتر اوقات حرکت دست شما را ببیند.

3. بسته به آستانه شما ، دستی که گوشی را محکم می کند باید بی حرکت باشد. من فکر می کنم برخی آزمایش ها را با آستانه بالا انجام می دهم و محدودیت ها را در آینده به روز می کنم تا مشخص تر شود.

برای پخش:

برنامه را در مرورگر وب بارگذاری کنید ، سپس آن را به حالت افقی کج کنید.

سپس هنگامی که دست خود را تکان می دهید ، یک آکورد پخش می شود ، با این حال ، تا زمانی که کلید F را در پایین ترین گوشه سمت راست لمس نکنید ، به بازی خود ادامه می دهد.

متناوبا ، می توانید صدا را با ایجاد ترکیب آکورد متوقف کنید.

هنگامی که یک ترکیب آکورد ایجاد می کنید ، صدای فعلی متوقف می شود ، سپس یک صدای آکورد جدید انتخاب می شود.

مرحله 7: چیزهای آموخته شده و کلمات پایانی

من واقعاً دوست داشتم روی این پروژه کار کنم حتی اگر زمان زیادی طول بکشد تا نمونه اولیه و تولید برنامه در حین کار بر روی پروژه های دیگر و کارهای خانگی تولید شود. من در طول راه چند چیز عالی یاد گرفتم.

1. هنگام طراحی محصولات دیجیتالی ، همیشه اطمینان حاصل کنید که نمونه های اولیه خود را در سریع ترین زمان ممکن تهیه کنید زیرا اولین فرضیات شما اشتباه خواهد بود و برای رسیدن به پایان باید سریع آنها را زیر پا بگذارید.

2. تا آنجا که ممکن است از خرج کردن پول در پروژه اجتناب کنید. همیشه از هر چیزی که می توانید استفاده کنید و همیشه با چیزهای ساده ای که در دست دارید شروع کنید.

3. از یادگیری زبان ها ، چارچوب ها و سیستم های جدید نترسید. آنها اغلب راحت تر از آنچه در ابتدا فکر می کنید هستند.

و تشکر فراوان از تنهایی برای تحقق رویاهایم

اگر به نحوه توسعه برنامه علاقه مند هستید ، می توانید به لیست پستی ما بپیوندید. من و یک تیم کوچک در تلاش هستیم تا نسخه کامل را برای کمک به افرادی که در حال سفر ، مسافرت یا خردسال هستند به یک گیتار قابل حمل عالی در هر کجا که هستند دسترسی داشته باشیم.

ما واقعاً از برخی طراحان گرافیک ، نوازندگان گیتار و برنامه نویسان برای آزمایش و بررسی همه چیز کمک می خواهیم.

لذت ببرید (ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧ ･ *: *ヽ (◕ ヮ ◕ ヽ)