دستکش هنری: 10 مرحله (همراه با تصاویر)

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

دستکش هنری یک دستکش پوشیدنی است که شامل انواع مختلفی از حسگرها برای کنترل گرافیک هنری از طریق Micro: bit و p5.js است. انگشتان از سنسورهای خمشی استفاده می کنند که مقدار r ، g ، b و شتاب سنج را در Micro: bit کنترل می کند x ، مختصات y برای گرافیک. من این پروژه را به عنوان پروژه ترم برای کلاس فناوری پوشیدنی خود به عنوان ارشد در برنامه فناوری ، هنر و رسانه در CU Boulder ایجاد کردم.

تدارکات:

• دستکش باغبانی
• میکرو بی بی سی: بیت
• 3-4 سنسور فلکس
• مقاومت 10 کیلو اهم
• سیم اتصال (قرمز و سیاه)
• دستگاه های برش سیم
• تخته نان
• گیره تمساح (دو طرفه و یک طرفه)
• لحیم کاری
• آهن لحیم کاری
• سوزن
• نخ
• کاغذ مومی
• نوار
• قیچی
• قلم و مداد

مرحله 1: آهنگ های سنسور خم شوید

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

1. برای شروع ، ما آهنگ هایی را روی انگشتان ایجاد می کنیم که سنسورهای خم را در جای خود نگه می دارد. داشتن این آهنگها به سنسورهای خمش اجازه می دهد تا کمی به جلو و عقب حرکت کنند و در عین حال آنها را در انگشت برای خم شدن محکم نگه می دارند. ابتدا دستکش را داخل و بیرون بچرخانید.
2. سنسور خم را بردارید و آن را در رج وسط انگشت قرار دهید. با استفاده از قلم ، سنسور خم را مشخص کنید
3. نخ خود را از طریق سوزن خود عبور دهید. یک قطعه سخاوتمندانه به خود بدهید. در انتهای نخ یک گره بزنید.
4. با شروع از بالا و روی خط ، کافی است قوس سنسور خم را بکشید ، سوزن را از داخل دستکش به داخل بکشید و آن را در خط موازی به عقب فشار دهید. سوزن را تا انتها بکشید تا گره روی خطی که کشیده اید بنشیند.
5. با کشیدن محکم ، 2-3 گره در طرف دیگر ایجاد کنید. این امر باعث می شود که نخ بیرون نیاید. مطمئن شوید که محکم است تا سنسور خم شدن در برابر انگشت شما محکم شود
6. نخ را چند سانتی متر ترک کنید. نخ را در انتها قرار دهید تا گره باز نشود.
7. مراحل 2-6 را برای همه انگشتانی که به آن سنسورهای انعطاف پذیر متصل کرده اید ، تکرار کنید تا مانند سومین تصویر قبلی به نظر برسد.
8. دستکش را به عقب برگردانید تا به روش صحیح بچرخد. سنسورهای خم خود را از طریق مسیرها بکشید تا مطمئن شوید که به درستی روی دست شما قرار می گیرند

مرحله 2: استفاده از ارتباط سریال با Micro: bit

برای مشاهده خروجی های حسگرهای خود ، از ارتباط سریال استفاده می کنیم. در مرحله بعد نحوه تنظیم کد را در Makecode خواهید دید ، اما ابتدا می خواهیم نحوه خواندن آن را از ترمینال خود بیاموزیم. (توجه: من از Mac استفاده می کنم بنابراین بسته به سیستم عامل شما ممکن است این مراحل متفاوت باشد. برای سایر سیستم عامل ها اینجا را ببینید).

1. میکرو خود را وصل کنید: 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. مقاومت 10 کیلو اهم خود را بردارید و بیشتر قسمت انتهایی را قطع کنید به طوری که طول سرب تقریباً به اندازه سربی روی سنسور خم باشد.
3. آهن لحیم کاری خود را بردارید و آن را روی مقاومت و سیم سنسور خم کنید تا داغ شوند
4. لحیم کاری خود را بردارید و آن را درون اتوی داغ فشار دهید تا روی اجزای آن ذوب شود. فقط کافی است سیم ها را بپوشانید.
5. اتو را بردارید. در اینجا دستکش باغبانی دیگر را پوشیدم و در حالی که لحیم سرد می شد ، مقاومت و سیم را در جای خود نگه داشتم.
6. یک قطعه بلند سیم قرمز را بچسبانید و آن را در محل اتصال لحیم کاری که مقاومت و سنسور خم به هم متصل می شوند ، قرار دهید. مراحل 4-5 را تکرار کنید. این سیم پین آنالوگ است.
7. یک تکه سیم سیاه سیاه را ببرید و آن را در انتهای سرب دیگر قرار دهید. مراحل 4-5 را تکرار کنید. این سیم زمین شماست.
8. یک قطعه طولانی سیم قرمز را بچسبانید و انتهای دیگر مقاومت را بچسبانید تا تقریباً به اندازه قسمت قبلی باشد. مراحل 4-5 را تکرار کنید. این سیم برق شماست
9. مراحل 1-8 را برای بقیه سنسورهای خم خود تکرار کنید.
10. سیمهای خود را طولانی بگذارید تا جایی برای کار کردن داشته باشید تا بعداً هنگام قرار دادن آنها روی Micro: bit طول آنها را درست کنید.

مرحله 6: لحیم کاری به Micro: bit و مونتاژ دستکش

اکنون که سنسورهای ما آماده هستند ، لحیم کاری را روی Micro: bit و مونتاژ دستکش شروع می کنیم. دوباره به یاد داشته باشید که در حین حرکت تست کنید ، با استفاده از گیره تمساح ، مطمئن شوید که قطعات پس از لحیم کاری آنها همچنان کار می کنند.

1. سنسورها و Micro: bit را روی دستکش بگذارید تا بتوانید درک کنید که سیم ها باید به کجا بروند و چقدر طول می کشند.
2. یک سیم قرمز دور پین برق بپیچید. با استفاده از برش های سیم ، سیم را از بین ببرید و شکاف هایی باز کنید که سیم خود را به آنها وصل کنید. این کار را برای سیم زمین نیز انجام دهید.
3. دستکش مورد استفاده خود را مشخص کنید. این به ما کمک می کند که همه چیز را با هم لحیم کنیم و طول موارد را درست کنیم. شما همه چیز را برعکس انجام می دهید ، بنابراین دوبار بررسی کنید که وسایل را به روش صحیح لحیم می کنید!
4. میکرو خود را تقریباً در جایی قرار دهید که می خواهید روی دست شما قرار گیرد. علامت هایی را روی زمین قرار دهید و سیم های برق نشسته باشند.
5. سیم ، برق یا زمین را در جای خود بچسبانید.
6. سنسور خم شدن خود را در جای خود بچسبانید.
7. سیم برق را به گونه ای قطع کنید که درست از خط عادی عبور کند.
8. این قطعات را با هم لحیم کنید.
9. مراحل 5-8 را برای سیمهای برق دیگر و سیمهای زمینی تکرار کنید.
10. Micro: bit را بردارید و آن را زیر سیم های لحیم شده جدید قرار دهید. برق و زمین را به پین های مناسب لحیم کنید.
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 شکل می تواند پر شود.
   • تکان دادن Micro: bit متغیر پاک کردن را روی 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 (یا رنگ پایین به رنگ بالا ، اگر من طیف کامل را انجام نمی دهم)

   • با توجه به محدوده محدودی که از سنسورهایم دریافت می کردم ، عملکرد نقشه ساخته شده از Makecode یک نقشه عالی به من نمی داد. بنابراین من عملکرد نقشه برداری خود را ایجاد کردم.
   • در اینجا نحوه کار است. محدوده ورودی هر انگشت بر اساس آن تعیین می شود (بیشترین مقدار - کمترین مقدار آن). محدوده رنگ ، که همچنین (بیشترین مقدار رنگ - کمترین مقدار رنگ) است ، به هر محدوده انگشت تقسیم می شود. این عدد پایین ترین عدد کامل گرد می شود و ضریب است.
   • (مقدار واقعی سنسور - کمترین مقدار سنسور) مقدار در محدوده را به شما می دهد. ضرب این ضریب با ضریب فوق که در بالا یافتیم و افزودن کمترین مقادیر رنگ به شما یک مقدار ترسیم شده از حسگر ، به رنگ ، در محدوده رنگ می دهد.
8. خط 109 در مقدار گام (بالا و پایین) خوانده می شود.
9. خطوط 110-115 برای این مقدار بالا و پایین را تنظیم می کند
10. خط 116 در مقدار رول (چپ و راست) در حال خواندن است.
11. خطوط 117-122 برای این مقدار بالا و پایین را تنظیم می کند
12. خطوط 123-126 مقادیر گام و رول را به اندازه بوم ترسیم می کند و آنها را به اعداد کامل گرد می کند.
13. خط 127 متغیرها را با استفاده از serial.writeLine در خروجی سریال می نویسد و هر مقدار را با کاما و فاصله "" جدا می کند تا بعدا تجزیه شود.

هنگامی که کد مورد پسند خود را دریافت کردید ، آن را بارگیری کرده و از بارگیری های خود به Micro: bit خود (برای مشاهده کد در "Locations" در سمت چپ جستجوگر خود) بکشید تا کد را در Micro: bit بارگذاری کنید.

مرحله 8: ارتباط سریال با P5.js

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

1. نسخه ای از برنامه p5.js را از این لینک بارگیری کنید. من نسخه آلفا 6 را دارم اما هر کدام کار می کند.
2. از این الگو p5.js برای برقراری ارتباط استفاده کنید. برای راه اندازی ، نام پورت سریال صحیح خود را برای portName در خط 12. وارد کنید. این نامی است که در مرحله 2 فهمیدیم.
3. Micro: bit خود را به رایانه خود وصل کنید
4. برنامه سریال p5.js را باز کنید.
5. پورت خود را از لیست پورت انتخاب کنید و کار دیگری انجام ندهید. حتی باز کردن را فشار ندهید! فقط پورت خود را از لیست خود انتخاب کنید.
6. اجرا را در قالب سریال p5.js فشار دهید. شما باید بتوانید آن را باز ببینید ، و مقدارهای null را برای شما می خواند ، زیرا ما هنوز کد تجزیه خروجی سریال خود را ننوشته ایم.

اکنون می توانیم از Micro: bit به p5.js به صورت سری ارتباط برقرار کنیم!

مرحله 9: کد P5.js

اکنون ما به کد p5.js می رویم. در اینجا ما مقادیر خروجی سریال را می خوانیم و از آنها برای ایجاد هنر استفاده می کنیم.

1. همانطور که در مرحله قبل اشاره کردم ، مطمئن شوید که نام پورت در خط 12 نام پورت رایانه شما است.
2. در تابع setup () ، در خطوط 32-33 ، چپ و راست Buffer را با createGraphics اضافه کردم ، این کار را برای جدا کردن بوم انجام دادم تا از یک قسمت برای طراحی استفاده شود ، و قسمت دیگر می تواند جهت ها را نشان دهد و نشان دهد کدام گرافیک شما در حال نگاه کردن یا مرور هستید
3. تابع draw () توابعی را که برای ایجاد جداگانه leftBuffer و rightBuffer ایجاد کرده است فرا می خواند. همچنین مشخص می کند که گوشه سمت چپ بالای هر بافر از کجا شروع می شود.
4. تابع drawRightBuffer () تمام متن جهتها و انتخابهای گرافیکی را نمایش می دهد

5. توابع drawLeftBuffer () تمام گرافیک ها را نمایش می دهد.

   • خط 93 به طور تصادفی مقداری برای مقدار آلفا تولید می کند. این بدان معناست که همه رنگها دارای ارزش شفافیت متفاوتی هستند تا جالب تر به نظر برسد. اگر 4 سنسور فلکس داشتم ، از سنسور 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 را که در rightBuffer نمایش داده می شود ، تنظیم کردم.
9. 318-460 من توضیحات مربوط به شکل انتخاب شده را تنظیم کردم.

10. خطوط 478-498 تابع serialEvent () هستند. این جایی است که ما داده های سریال را دریافت می کنیم.

    • در خطوط 485-486 من proll و ppitch (رول و پیچ قبلی) را بر روی مقدار رول و پیچ قبلی تنظیم کردم.
    • در خط 487 ، داده ها را بر روی "،" تقسیم کردم. من این کار را انجام می دهم زیرا داده هایی را نوشتم که با کاما از هم جدا شوند. شما هر چیزی که متغیرهای خود را با آن جدا کرده اید را در اینجا قرار می دهید. این متغیرها وارد آرایه اعداد می شوند.
    • سپس در سطرهای 488-496 متغیرها را روی عنصر مربوطه در آرایه تنظیم کرده و آنها را از یک رشته به یک عدد ترجمه می کنم. من از این متغیرها در طول تابع drawLeftBuffer () برای کنترل گرافیک استفاده می کنم.

این تقریباً کد را جمع بندی می کند و پروژه را به پایان می رساند! اکنون می توانیم دستکش را در حال کار ببینیم.

مرحله 10: محصول نهایی

در اینجا تصاویری از دستکش تمام شده و همچنین چند قطعه هنری که ایجاد کرده است آورده شده است! ویدیوی نمایشی را ببینید تا در عمل ببینید!