כפפת אמנות: 10 שלבים (עם תמונות)

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

כפפת האמנות היא כפפה לבישה המכילה סוגים שונים של חיישנים לשליטה בגרפיקה אמנותית באמצעות Micro: bit ו- p5.js האצבעות משתמשות בחיישני עיקול השולטים בערכי r, g, b ומד התאוצה בפקדי Micro: bit x, y קואורדינטות לגרפיקה. יצרתי את הפרויקט הזה כפרויקט המונח שלי לשיעור הטכנולוגיה הלבישה שלי כמבוגר בתכנית הטכנולוגיה, האמנות והמדיה ב- CU Boulder.

אספקה:

• כפפות גינון
• BBC Micro: ביט
• 3-4 חיישני גמישות
• נגדי 10K אוהם
• חוט חיבור (אדום ושחור)
• קוצץ חוטים
• לוח לחם
• קליפים תנין (דו צדדי וחד צדדי)
• לְרַתֵך
• מלחם
• מַחַט
• פְּתִיל
• נייר שעווה
• קלטת
• מספריים
• עט ועיפרון

שלב 1: רצועות חיישן כפיפה

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

1. כדי להתחיל אנחנו הולכים ליצור את המסלולים על האצבעות שישאירו את חיישני העיקול במקומם. החזקה של מסלולים אלה מאפשרת לחיישני העיקול לנוע מעט קדימה ואחורה תוך שמירה על הבטחתם לאצבע להתכופף. ראשית, הפוך את הכפפה החוצה.
2. קח חיישן עיקול והנח אותו ברכס האמצע של האצבע. בעזרת עט, מתאר את חיישן העיקול
3. החלק את החוט שלך דרך המחט שלך. תן לעצמך קטע נדיב. קושרים קשר בסוף החוט.
4. החל מלמעלה ובקו, פשוט נושף את קשת חיישן העיקול, מחליק את המחט דרך הכפפה מבפנים ודוחף אותה בחזרה על הקו המקביל. משוך את המחט עד הסוף כך שהקשר יושב על הקו שציירת.
5. משוך חזק, עשה 2-3 קשרים בצד השני. זה יבטיח שהחוט לא ייצא. וודא שהוא צמוד כך שחיישן העיקול יהיה מאובטח כנגד האצבע שלך
6. חותכים את החוט כשהוא משאיר כמה סנטימטרים. של חוט בסוף כך שהקשר לא יבוטל.
7. חזור על שלבים 2-6 עבור כל האצבעות שאליהן אתה מחבר חיישני גמישות עד שהיא נראית כמו התמונה השלישית עד האחרונה.
8. הפוך את הכפפה לאחור כך שתהפוך בצורה הנכונה. החלק את חיישני העיקול שלך דרך המסילות כדי לוודא שהם מתאימים כראוי על היד שלך

שלב 2: שימוש בתקשורת סידרית עם מיקרו: ביט

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

1. חבר את ה- Micro: bit שלך
2. פתח את הטרמינל שלך
3. הקלד 'ls /dev/cu.*'
4. אתה אמור לראות משהו שנראה כמו '/dev/cu.usbmodem1422' אבל המספר המדויק יהיה תלוי במחשב שלך
5. לאחר שתפעיל קוד, הקלדת 'screen /dev/cu.usbmodem1422 115200' (עם מספר היציאה הסדרתית הספציפית שלך) תקנה לך את הפלט הסידורי של ה- Micro: bit שלך
6. הפלט שלך צריך להיראות בערך כמו התמונה למעלה, תלוי כיצד עיצבת את הפלט שלך!

שלב 3: אבות טיפוס למעגל

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

1. בעזרת תרשים המעגלים לעיל, אב טיפוס של המעגל שלך על לוח הלחם באמצעות חוטי מגשר, נגדים, קליפי התנין החד צדדיים ו- Micro: bit שלך.
2. חבר את חיישני העיקול לפינים 0, 1 ו -2.
3. השתמשתי בקוד זה כדי לבדוק את חיישני הגמישות שלי
4. כופף אותם כמה פעמים כדי לראות את הקריאות שלהם וודא שהם פועלים כראוי

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

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

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

בשלב זה בחרתי גם לבדוק את מד התאוצה וחיישן האור ב- Micro: bit

1. חבר את ה- Micro: bit למחשב שלך
2. הורד את הקוד הזה
3. אחר כך בדקתי את חיישני התאוצה, התאורה והכפיפה יחד עם הקוד הזה

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

שלב 5: הלחמת חיישני הכפיפה

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

1. קח את חיישן הכיפוף והדבק או שים עליו חפץ כבד כדי להחזיק אותו במקומו.
2. קח את הנגד שלך 10K אוהם וחתך את רוב הקצה כך שהחוט יהיה ארוך בערך כמו העופרת בחיישן העיקול.
3. קח את מגהץ ההלחמה שלך ולחץ עליו הן על הנגד והן על עופרת החיישן כפיפוף עד שהם חמים
4. קח את הלחמה ולחץ אותו לתוך הברזל החם כשהוא מתחיל להימס על הרכיבים. אתה רק צריך מספיק כדי לכסות את החוטים.
5. הסר את המגהץ. כאן לבשתי את כפפת הגינון השנייה והחזקתי את הנגד והחוט במקומם בזמן שההלחמה מתקררת.
6. מהדקים חתיכה ארוכה של חוט אדום ומניחים אותה במפרק ההלחמה בו נפגשים חיישן הנגד והכפיפה. חזור על שלבים 4-5. זהו חוט הסיכה האנלוגי.
7. מהדקים חתיכה ארוכה של חוט שחור ומניחים אותה בקצה המוביל השני. חזור על שלבים 4-5. זהו חוט הקרקע שלך.
8. מהדקים חתיכה ארוכה של חוט אדום ומהדקים את הקצה השני של הנגד כך שזה בערך כמו הצד הקודם. חזור על שלבים 4-5. זהו חוט החשמל שלך.
9. חזור על שלבים 1-8 עבור שאר חיישני העיקול שלך.
10. השאר את החוטים ארוכים כך שיהיה לך מקום לעבוד איתו בכדי להפוך אותם לאורך הנכון אחר כך בעת הנחתם על המיקרו: ביט.

שלב 6: הלחמה למיקרו: ביט והרכבת הכפפה

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

1. הנח את החיישנים ו- Micro: bit על הכפפה כדי לקבל מושג לאן החוטים צריכים ללכת וכמה זמן הם צריכים להיות.
2. כרוך חוט אדום סביב סיכת החשמל. השתמש בחותכי תיל כדי להפשיט את החוט ולהשאיר פערים פתוחים שאליהם תצרף את החוט שלך. עשה זאת גם עבור חוט הקרקע.
3. מתאר את הכפפה שאינך משתמש בה. זה יעזור לנו להלחם הכל יחד ולתקן את אורך הדברים. אתה תעשה הכל לאחור אבל בדוק שוב שאתה הלחמת דברים בדרך הנכונה!
4. הנח את המיקרו: קצת בערך היכן שאתה רוצה שהוא יונח על היד שלך. צור סימנים היו הקרקע וחוטי החשמל יושבים.
5. הדביקו את החוט, כוח או הקרקע, במקום.
6. הדביקו את חיישן העיקול שלכם במקום.
7. חתכו את חוט החשמל כך שיחלוף על פני הסימן שלו על קו החשמל.
8. הלחמו את החלקים האלה יחד.
9. חזור על שלבים 5-8 עבור חוטי החשמל האחרים ועל חוטי הקרקע.
10. קח את המיקרו: ביט והנח אותו מתחת לחוטים שהותחלו לאחרונה. הלחם את הכוח והטחן לפינים הנכונים.
11. מהדקים את החוטים האנלוגיים כך שהם עוברים ממש מעבר לקצה הסיכות ויכולים להתעטף לצד הקדמי.
12. הלחם את החוטים לפינים הנכונים.
13. גיליתי שהקריאות שלי היו הטובות ביותר והעקביות ביותר כאשר כל החוטים (כוח, קרקע ואנלוגי) נגעו גם בחזית וגם בחלק האחורי של הסיכות.
14. מסלול אחד אחר מסלול, דחוף את חיישני העיקול באצבעות בו זמנית.
15. לאחר שהחיישנים במקומם, חבשו את הכפפה וודאו כי ההתאמה נכונה. אם אתה צריך להוסיף רצועות, או לתקן את המיקום שלהם, עשה זאת כעת.
16. ברגע שהחיישנים שוכבים היכן שאתה רוצה אותם, שים לב היכן לקשור את ה- Micro: bit במקומו. אתה יכול להשתמש בחורים הקטנים משני צדי הכפתורים A ו- B או להשתמש בחורים לסיכות. השתמש במחט ובחוט שלך כדי לקשור אותו על היד שלך

מזל טוב! רכיבי החומרה לכפפה הושלמו כעת!

שלב 7: מיקרו: ביט קוד

עכשיו אני הולך להדריך אותך דרך קוד ה- Micro: bit. אתה יותר ממוזמן להפוך את הקוד הזה למה שאתה רוצה אבל רציתי לעבור ולהסביר הכל כדי שתוכל לראות מה עשיתי, איך עשיתי את זה ולמה! תוכל למצוא את הקוד שלי כאן.

1. שורות 1-31. כאן אני משתמש בפונקציות שנקבעו מראש עם ה- Micro: bit.

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

2. שורות 32-64 מגדירות את המשתנים שלי. היה חשוב להשתמש בהרבה משתנים כדי שרוב הערכים לא יקודדו. הם יכולים להשתנות עם הכפפה וגם לשנות בקלות במקום אחד במקום לעדכן חבורת ערכים בכל מקום. אציין כמה מהחשובים.

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

4. שורות 69-74 מכילות את הערך הגבוה לאצבע המצביע.

   • אם מגיעים לשיא חדש, הוא מגדיר זאת כגבוה.
   • מכייל מחדש את טווח האצבע.
   • משתמש בטווח החדש הזה למיפוי הצבעים
5. שורות 75-80 מכילות את הערך הנמוך עבור אצבע המצביע.
6. קווי 81-104 עושים את אותו הדבר כמו 4 & 5 עבור האצבעות והאצבעות.

7. קווי 105-107 ממפים את ערכי חיישן הגמישות שלי לערכי צבע 0-255 (או colorLow to colorHigh, אם אני לא עושה את כל הטווח)

   • פונקציית המפות המובנית מ- Makecode לא נתנה לי מיפוי נהדר, בהתחשב בטווח המצומצם שקיבלתי מהחיישנים שלי. אז הכנתי פונקציית מיפוי משלי.
   • ככה זה עובד. טווח הקלט של כל אצבע נקבע על פי זה (הערך הגבוה ביותר - הערך הנמוך ביותר). טווח הצבעים, שהוא גם (ערך הצבע הגבוה ביותר - ערך הצבע הנמוך ביותר) מחולק לכל טווח אצבעות. מספר זה מעוגל במספר השלם הנמוך ביותר והוא המנה.
   • (ערך החיישן בפועל - ערך החיישן הנמוך ביותר) נותן לך את הערך בטווח. הכפלת זה במנה שמצאנו למעלה והוספת ערכי הצבע הנמוכים ביותר נותנת לך ערך ממופה מהחיישן, לצבע, בטווח הצבעים.
8. שורה 109 היא קריאת ערך המגרש (למעלה ולמטה).
9. שורות 110-115 מכילות את הגבוה והנמוך עבור ערך זה
10. שורה 116 היא קריאת ערך הגליל (שמאל וימין).
11. קווים 117-122 מכוונים את הגבוה והנמוך לערך זה
12. קווי 123-126 ממפים את ערכי המגרש והגלגול לגודל הבד ומעגלים אותם למספרים שלמים.
13. שורה 127 כותבת את המשתנים לפלט הטורי באמצעות serial.writeLine, מפרידה בין כל ערך בפסיק ומרווח ",", כדי לנתח מאוחר יותר.

ברגע שיש לך את הקוד איך שאתה אוהב אותו, הורד אותו וגרור אותו מההורדות שלך ל- Micro: bit (אתה אמור לראות אותו ב"מיקומים "בצד שמאל של הממצא שלך) כדי להעלות את הקוד ל- Micro: bit

שלב 8: תקשורת סדרתית עם P5.js

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

1. הורד גרסה של האפליקציה p5.js מהקישור הזה. יש לי את גרסת האלפא 6 אבל כל אחת תעבוד.
2. השתמש בתבנית p5.js זו לתקשורת סדרתית. כדי להגדיר אותו הכנס את שם הנמל הסידורי הנכון שלך עבור שם שם בשורה 12. זהו השם שהבנו בשלב 2.
3. חבר את ה- Micro: bit למחשב שלך
4. פתח את האפליקציה הטורית p5.js.
5. בחר את הנמל שלך מרשימת היציאות ואל תעשה שום דבר אחר. אפילו לא ללחוץ על פתוח! פשוט בחר את הנמל שלך מהרשימה.
6. הקש על הפעלה בתבנית הטורית של p5.js. אתה אמור להיות מסוגל לראות אותו פתוח והוא יקרא לך ערכי null מכיוון שעדיין לא כתבנו קוד כדי לנתח את הפלט הסידורי שלנו.

עכשיו נוכל לתקשר באופן סדרתי מהמיקרו: ביט שלנו ל- p5.js!

שלב 9: קוד P5.js

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

1. כפי שציינתי בשלב הקודם, ודא ש- portname בשורה 12 הוא שם היציאה המחשב הספציפי שלך.
2. בפונקציית ההתקנה (), בשורות 32-33, הוספתי את המאגר השמאלי והימני עם createGraphics, עשיתי זאת כדי להפריד את הקנבס כך שחלק אחד ישמש לציור והחלק השני יכול להציג כיוונים ולהראות איזה גרפיקה אתה מסתכל או מגולל.
3. הפונקציה draw () קוראת לפונקציות שעשיתי כדי ליצור את ה- leftBuffer ו- rightBuffer בנפרד. הוא גם מגדיר היכן מתחילה הפינה השמאלית העליונה של כל חיץ.
4. הפונקציה drawRightBuffer () מציגה את כל הטקסט לכיוונים ולבחירות גרפיות

5. הפונקציות drawLeftBuffer () מציגות את כל הגרפיקה.

   • שורה 93 יוצרת באופן אקראי ערך עבור ערך האלפא. כך שלכל הצבעים יש ערכי שקיפות שונים כדי שייראה מעניין יותר. אם היו לי 4 חיישני גמישות הייתי משתמש בחמישית בשביל זה!
   • קו 94 קובע את ערך השבץ לערכי r, g, b הנקבעים על ידי חיישני הגמישות
   • קווים 96-102 יכולים להיות ללא תגובה כדי לבדוק כיצד הכפפה פועלת מבלי שהכפפה תהיה על ידי שימוש בעכבר במקום זאת. החלף את קו 102 בגרפיקה משאר הפונקציה.
6. 104-106 מוחקים את הבד כאשר היד רועדת על ידי הגדרת רקע הבד לשחור
7. 108-114 שולטים במילוי הצורות כאשר לוחצים על A+B ובוחרים והצורה הנוכחית זהה
8. 117-312 הם המקום בו מוצגת הגרפיקה. זהו עיקר הקוד והחלק להיות יצירתי! אני מציע להסתכל בהתייחסות p5.js כדי להבין טוב יותר כיצד לשלוט בצורות. השתמשתי בגליל ובמגרש כדי לשלוט על מיקומי x, y ולשנות את גודל הצורות והגרפיקה, וכפי שציינתי קודם השתמשתי ב-. חיישני כיפוף לשליטה על הצבע. כאן אתה יכול להיות יצירתי! שחק עם מה שיש ל- p5.js להציע והצג גרפיקה מהנה משלך לשליטה! כאן הגדרתי גם את התיאור של ה- currentShape שמוצג במאגר הימני.
9. 318-460 הגדרתי את התיאור של ה- Shape הנבחר.

10. שורות 478-498 הן הפונקציה serialEvent (). כאן אנו מקבלים את הנתונים הסדריים.

    • בשורות 485-486 הגדרתי את הטרול וה- ppitch (גליל ומגרש קודמים) לערכי הגליל והמגרש הקודמים.
    • בקו 487 פיצלתי את הנתונים על ",". אני עושה זאת כי כתבתי את הנתונים להפרדה באמצעות פסיקים. היית שם את מה שהפרדת איתו את המשתנים שלך. משתנים אלה נכנסים למערך המספרים.
    • ואז בשורות 488-496 אני מגדיר את המשתנים לרכיב המתאים במערך ומתרגם אותם ממחרוזת למספר. אני משתמש במשתנים אלה לאורך כל הפונקציה drawLeftBuffer () לשליטה בגרפיקה.

זה די מסכם את הקוד ומסיים את הפרויקט! כעת אנו יכולים לראות את הכפפה פועלת בפעולה.

שלב 10: מוצר סופי

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