אייר - גיטרת אוויר ניידת אמיתית (אב טיפוס): 7 שלבים (עם תמונות)

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:11

טוב אז, זו תהיה הוראה ממש קצרה לגבי החלק הראשון של סוף סוף להתקרב לחלום ילדות שלי.

כשהייתי ילד צעיר, תמיד צפיתי באמנים והלהקות האהובות עלי מנגנות בגיטרה ללא רבב.

כשגדלתי, הייתי אסירת תודה מספיק כדי ללמוד לנגן בגיטרה ואפילו לנגן חלק בבעלות אחרים, אבל עדיין אין לי שלי:(אז החלטתי סוף סוף לשבת ולהכין אחד שפועל לגמרי בטלפון, משתמש בראייה ממוחשבת ומאפשר לאנשים כמוני שרוצים גיטרה אבל אולי נוסעים, שבורים או צעירים מכדי להשיג אחד עדיין!

תוכל למצוא את אפליקציית האב טיפוס באתר זה

כדי לראות כיצד לשחק, עבור לשלב "אתה מסיים".

* הקפד להשתמש בו בטלפון שלך והפוך את המסך הצידה למצב נוף *

תהנה!

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

אספקה:

1. טלפון חכם

2. מחשב שולחני או מחשב נייד (לתכנות)

שלב 1: רקע והערה על קוד

פרויקט זה הוא במידה רבה פרויקט מקודד שמטרתו לרוץ לחלוטין בטלפון.

כשהגעתי לפרויקט זה, ניסיתי אפליקציות שונות אחרות וחיפשתי מכשירים אחרים הקיימים כיום בשוק כמו גיטרה של AirJamz או Kurv, גיטרות ניידות או אפילו אפליקציית Real Guitar בחנות Play.

הבעיות שמצאתי חסרות ברבות מהן היו:

1. כמה מכשירים חיצוניים נחוצים

2. כמעט כל האפליקציות לא ממש אפשרו לך לנגן אקורדים או מוזיקה בפועל והיו רק סימולטור סימני לוח

3. התקנים חיצוניים היו יקרים והרבה גיטריסט המליץ רק לקנות גיטרה אמיתית

אלה מופיעים בתמונות המצורפות.

ולכן אפליקציית Air צריכה לפתור את הבעיות האלה תוך שהיא מסוגלת לרוץ לגמרי בטלפון. אני מאמין שזה אפשרי מכיוון שבשנת 2020 יש לנו טכנולוגיית דפדפנים ניידים הרבה יותר טובה והרבה שיפורים בראיית המחשב שיכולים לאפשר לנו לעשות פלאים עם מצלמת RGB אחת.

אז המשכתי לעשות כמה סקיצות של איך זה ייראה ואיך זה יתפקד לפני שהתחלתי במלואו.

ציירתי גם את אבני הדרך שלי לקידוד כך שבמדריך זה, במקום לשעמם אותך עם קוד, אני אעביר אותך בתהליך העיצוב שלי ואצרף את הקוד המצורף בסוף כדי שתוכל לקרוא ולהסתכל עליו אם אתה צריך.

ניתן למצוא את כל הקוד בכתובת https://github.com/msimbao/air ואני ממליץ לבנות את קבצי הקוד שלך בדומה לזה.

שים לב גם שכדי שהאפליקציה תפעל, היא צריכה להתארח. עד כה מצאתי שהוא פועל רק כשהתארח ב- github.:)

שלב 2: פעולת הפעלה

אבן הדרך העיקרית הראשונה לקידוד, הייתה למצוא דרך לשכפל שדרה דיגיטלית ללא פריפריה חיצונית. המחשבה המיידית שלי הייתה להשתמש במצלמה הפונה הקדמית של RGB של הטלפון שלי.

המחשבה שלי הייתה שאם לאדם יש אקורד שהוא רוצה לנגן, אז כשהם מחליקים את ידם מול המצלמה שלו, ישמע צליל.

לאחר שהבנתי את זה, אז הייתי צריך שפת תכנות טובה שאפשר להשתמש בה כדי להתממשק היטב עם מצלמת ה- RGB.

הסתפקתי ב- Javascript מכיוון שיכולתי ליצור אפליקציה חוצה פלטפורמות עם React Native או משהו אחר או שפשוט יכול לארח את הגיטרה באתר וזה יכול להיות זמין לכולם.

לאחר מכן מצאתי דרכים שונות להבין כיצד לגרום לסחיפה של היד להפעיל פעולה שיכולה להיות צליל אקורד, אך היו דרכים רבות לעשות זאת.

למידת מכונות עבדה מצוין כאשר ניסיתי את שירותי IBM והכשרתי כ -3000 תמונות במשך שבוע לזיהוי החלקה וגם זיהוי אקורדים. ניסיתי גם handtrack.js של victordibia. לרוע המזל שניהם היו איטיים להפליא בטלפונים ניידים.

לאחר מכן נתקלתי בזיהוי תנועה ויישום של הלונקוריין באתר diffcam.com. למדתי שאפשר להשתמש במצלמת הרשת כדי להקליט שתי פריימים נפרדים ואז לחשב את ההבדל בין הפריימים ולתת להפרש ציון. אם הציון הזה חורג מסף מסוים, אני מבצע פעולה.

הלונקוריין גם יצר מנוע עבור מצלמת הדיף שלו שהחלטתי להשתמש בו לגיטרת אייר וזה עבד בצורה מושלמת כדי להביא לי את ציון התנועה!

מצורפות תמונות של ניסיונות להכשיר מודלים של למידת מכונה וכן את הדוגמה של diffcam.com שלמדתי ממנה.

הערה: באב -הטיפוס הנוכחי הזה, די חבטות חוזרות שוב ושוב, כדי לעצור אותו, פשוט החזק את האקורד שברצונך לנגן למטה. זהו באג שאנו מקווים לתקן קדימה.

הקוד עבור החטיבה המלאה נמצא בקובץ script.js המצורף כאן ומנוע ה- diffcam של lonekorean נמצא כאן.

שלב 3: זיהוי אקורדים

אבן הדרך הבאה לקידוד הייתה אז למצוא דרך להתמודד עם זיהוי אקורדים בשידור חי.

רציתי שמשתמש יוכל לשכפל צורות אקורד בפועל וכך לתרגל מיקום יד טוב וגם לעזור לו לתרגל אקורדים שונים.

כמו בשלב האחרון, ניסיתי את Machine learning לזיהוי אקורדים, אבל זה היה איטי מאוד בטלפונים ניידים.

לאחר מכן למדתי משהו מאפליקציית גיטרה אמיתית שאולי אפשר להניח לוח לוח על מסך הטלפון באמצעות המסך כדי ליצור צורות אקורד.

לאחר מכן הייתי צריך ללמוד כיצד לאפשר אינטראקציה מרובת מגעים ב- javascript ומצאתי הדרכה ודוגמא מדהימים מתוך המסמכים של מוזילה

אינטראקציות מגע יכולות להיות מסובכות במיוחד ב- Javascript, אך הרעיון הוא שנוכל ליצור חטיבות מסוימות ולאחר מכן להגדיר פונקציות להתמודדות עם אירועי מגע שונים:

1. touchStart: כאשר אצבע נוגעת במסך

2. touchEnd: כאשר האצבע עוזבת

3. touchMove: כאשר האצבע עדיין על המסך אך משנה את מיקומה

לאחר מכן אנו עובדים סביב הפונקציות האלה כדי להגדיר את האלמנטים שלנו המגיבים לאירועי מגע ושילובים שונים.

במקרה שלנו, אנו מעצבים לוח דאגה באמצעות CSS ולאחר מכן באמצעות Javascript, אומרים לאפליקציה שכאשר לוחצים על חלקים מסוימים יש לאתר אקורד.

לאחר מכן נוכל להגדיר אובייקט שמע שאנו מעבירים אליו את האקורד ולאחר מכן מנגנים את השמע הזה כאשר מתרחש אירוע החלקה.

כדי להגדיר שילובי אקורדים שונים, הכנתי את לוח הדאגה באמצעות התמונה הזו ואז פשוט הגדרתי כל מיקום מיוחד להיות div שאוכל לגעת בו ולשלב אותו עם אחרים.

הקוד להגדרת התקדמות האקורד נמצא כאן ובקר הלוח נמצא בקוד המצורף.

שלב 4: מציאת צלילי אקורד

כעת, כאשר המערכת שלנו מוכרת לזהות, אנו זקוקים לצלילי אקורד אמיתיים.

למרבה המזל, freesound.com תמיד עוזר לי כשאני צריך דוגמאות שמע. פשוט חיפשתי אקורדים ומצאתי חבילה מדהימה של אקורדים גדולים של דנגלאדה.

לאחר מכן הורדתי אותם וערכתי אותם באמצעות תעוזה כדי לוודא שהצליל יתחיל מיד ולא את ההשהיה הקצרה בתחילת רובם כשהוקלטו.

כדי לצלם אותם באמצעות תעוזה, פשוט גררתי אותם לאפליקציה ואז בחרתי את החלק של הצליל שאני רוצה (כל החלק הגלי ואף אחד מקטעי הקו השטוח שאין להם צליל). לאחר מכן אני עובר לכרטיסייה עריכה> הסר מיוחד> חיתוך שמע. לאחר מכן הגעתי ללשונית רצועות> יישור רצועות> התחל לאפס. לאחר מכן אני ניגש לקובץ, ואז יצא> ייצא כ- WAV.

אני מייצא כ- WAV כי היה לי קל יותר להתמודד עם פרויקטים של אודיו ב- Javascript.

לאחר מכן השתמשתי ב- glitch.com לארח קבצים אלה מכיוון שיש להם רשת משלוח תוכן מדהימה שניתן להשתמש בה לפרויקטים שונים שיש לך. אופציה נוספת יכולה להיות להשתמש בבסיס האש שהוא הדרך שלי לפרויקטים שונים שאולי יש להם מידע נוסף לאחסון כמו אפליקציית המלאי של makerspace עבור ה- makerspace של המכללה שלי.

פשוט עליך לגרור ולשחרר את הנכסים לספריית הפרויקטים ולאחר מכן תוכל למצוא קישור בעת לחיצה על תיקיית הנכסים ולחיצה על הנכס שברצונך לקבל. לאחר מכן Glitch תייצר כתובת אתר CDN ייחודית לנכס שלך. לדוגמה, הנה הקישור לצליל אקורד A -dur.

לאחר מכן אוכל לקשר את כל האקורדים הללו בפונקציית getChord שתחפש כאשר נלחץ שילוב מסוים של עמדות דאגה ואז להקצות אקורד מתאים לאפליקציה לנגן כאשר מתרחש אירוע החלקה ביד.

שלב 5: סיום ואירוח האפליקציה כולה

ישנן דרכים רבות לבצע אירוח.

בכנות הטוב ביותר שמצאתי הוא פשוט להשתמש ב- github. הסיבה לכך היא שאם אתה מתכנת אפליקציה היטב, אתה יכול לגרום לכל הקצה האחורי שלך להיות מוגש על ידי מסד נתונים או חנות אש מבסיס האש או אפילו להשתמש ב- CDN של glitch.com ומקומות אחרים לאחסן בהם נכסים.

כדי לארח את הפרויקט ב- github, כל שעליך לעשות הוא לפתוח חשבון github, ליצור מאגר חדש. לאחר מכן כדי להקל על ההגדרה, לאחר שהצבת את שם הפרויקט שלך, הקפד תמיד להוסיף רישיון (אינני מומחה אבל גיליתי שזה מקל על חיי). אני תמיד משתמש ברישיון ציבורי כמו ה- GNU.

לאחר הגדרת המאגר, אנו יכולים פשוט לגרור ולשחרר את הקבצים שלנו לתוך המאגר וללחוץ על כפתור ה- commit הירוק בתחתית.

לאחר מכן אנו עוברים לכרטיסייה הגדרות עם סמל גלגל השיניים בפינה הימנית ביותר של דף המאגר מתחת לכפתורי הכוכב והצפייה. לאחר ההגדרות, גלול מטה עד שתראה את התיבה דפי Github. שנה מקור לסניף ראשי ובחר נושא אם אתה רוצה. אתה יכול ללמוד כיצד להשתמש בנושאים על ידי חיפוש בגוגל (אני אף פעם לא משתמש בהם כי אני מביא לעתים קרובות CSS ורעיונות משלי).

כאשר הדף מוכן, תקבל סימון ירוק וסימון המורה לך שהאתר שלך מפורסם וניתן לגשת אליו.

שלב 6: בוצע

כעת תוכלו ליהנות ממשחק ריבה מדהים בנוחות האוזניות שלכם, חדר השינה או ברכבת. הוסף עוד אקורדים אם אתה אוהב ואפילו שחק עם עמדות דאגת הגיטרה.

הערה מהירה על זיהוי תנועה

1. ניתן להתאים את סף החבטה בנגינה בגיטרה בקובץ script.js אך ודא שכאשר אתה משתמש באפליקציה, הרקע שהטלפון שלך רואה הוא יחסית דומם.

2. לדוגמה, ברכבת, עדיף לשבת ולהרכיב את האוזניות ולהפוך את הטלפון פנימה כך שאם נוסעים נעים סביבך מצלמת הטלפון יכולה לראות רק את היד שלך נעה רוב הזמן.

3. היד שתופסת את הטלפון צריכה להיות דוממת יחסית בהתאם לסף שלך. אני חושב שאריץ כמה בדיקות עם רף גבוה ואעדכן את המגבלות בהמשך כדי להיות יותר ספציפיות.

לשחק:

טען את האפליקציה בדפדפן האינטרנט שלך ולאחר מכן הטה אותה למצב נוף.

ואז כאשר אתה מניף את היד, אקורד ישחק, אולם הוא ימשיך לשחק עד שתגע במקש F בפינה הימנית התחתונה.

לחלופין, אתה יכול לעצור את הצליל על ידי יצירת שילוב אקורדים.

כאשר אתה יוצר שילוב אקורדים, הצליל הנוכחי מפסיק ואז נבחר צליל אקורד חדש.

שלב 7: דברים שלמדו ומילים אחרונות

מאוד אהבתי לעבוד על הפרויקט הזה גם אם לקח הרבה זמן לבנות אב טיפוס ולהפיק את האפליקציה תוך כדי עבודה על פרויקטים אחרים ועבודה ביתית. למדתי גם כמה דברים מדהימים בדרך;

1. בעת עיצוב מוצרים דיגיטליים, הקפד תמיד להפוך את אב הטיפוס שלך למהיר ככל האפשר מכיוון שההנחות הראשונות שלך יהיו שגויות ואתה צריך לדרוס אותן במהירות כדי להגיע לסוף.

2. הימנעו ככל האפשר מהוצאת כסף על פרויקט. תמיד השתמש שוב בכל מה שאתה יכול ותתחיל תמיד בדברים פשוטים שיש לך בהישג יד.

3. אל תפחד ללמוד שפות, מסגרות ומערכות חדשות. הם לרוב קלים יותר ממה שאתה חושב בהתחלה.

ותודה ענקית ל lonekorean שהגשים את חלומותיי

אם אתה מעוניין כיצד האפליקציה מתפתחת תוכל להצטרף לרשימת התפוצה שלנו. צוות קטן ואני נעבוד על יצירת גרסה מלאה שתעזור לאנשים שנשברים, מטיילים או ילדים צעירים לקבל גישה לגיטרה ניידת מדהימה באשר הם.

ממש נשמח לקבל עזרה במיוחד מהמעצבים הגרפיים, נגני הגיטרה והקודנים לבדיקת הכל.

תהנה (ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧ ･: *ヽ (◕ ヮ ◕ ヽ)