İncəsənət əlcəyi: 10 addım (şəkillərlə)

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:42

Art Glove, Micro: bit və p5.js vasitəsilə bədii qrafikləri idarə etmək üçün müxtəlif növ sensorlar olan geyilə bilən bir əlcəkdir., y qrafika koordinatları. Mən bu layihəni CU Boulder -də Texnologiya, İncəsənət və Media proqramında yüksək dərəcəli olaraq Geyilə bilən Texnologiya Sinifim üçün müddətli bir layihə olaraq yaratdım.

Təchizat:

• Bağçılıq əlcəkləri
• BBC Micro: Bit
• 3-4 Flex sensorlar
• 10K Ohm rezistorlar
• Bağlama teli (Qırmızı və Qara)
• Tel kəsicilər
• Çörək lövhəsi
• Timsah klipləri (iki tərəfli və tək tərəfli)
• Lehim
• Lehimleme dəmir
• İğne
• Mövzu
• Mum Kağız
• Tape
• Qayçı
• Qələm və Qələm

Addım 1: Sensor izlərini əymək

Birincisi, biz hardware istehsalına diqqət yetirəcəyik. Bu şəkildə kodlamağa başladıqda istifadə etmək və sınamaq üçün əsl əlcək komponentimiz var.

1. Başlamaq üçün barmaqlarda əyilmə sensorlarını yerində saxlayacaq izlər düzəldəcəyik. Bu izlərə sahib olmaq, əyilmə sensorlarının bir az irəli və irəli hərəkət etməsinə imkan verir, eyni zamanda barmağın əyilməsini təmin edir. Əvvəlcə əlcəyinizi içəriyə çevirin.
2. Bir əyilmə sensoru götürün və barmağınızın ortasına qoyun. Bir qələm istifadə edərək əyilmə sensorunu təsvir edin
3. İpinizi iynənizdən keçirin. Özünüzə səxavətli bir parça verin. İpin sonunda düyün bağlayın.
4. Üstdən və xətdən başlayaraq, əyilmə sensörünün qövsünü üfləyin, iynəni əlcəkdən içəridən keçirin və paralel xətt boyunca geri itələyin. İğnəni sonuna qədər çəkin ki, düyün çəkdiyiniz xəttə otursun.
5. Sıx bir şəkildə çəkərək, digər tərəfdən 2-3 düyün edin, bu ipin çıxmamasını təmin edəcək. Bükülmə sensorunun barmağınıza bərkidilməsi üçün möhkəm olduğundan əmin olun
6. Bir neçə sm buraxaraq ipi kəsin. düyünün açılmaması üçün sonunda iplik.
7. Üçüncü şəkil sona kimi görünənə qədər bükücü sensorlar bağladığınız bütün barmaqlarınız üçün 2-6 addımları təkrarlayın.
8. Əlcəyinizi geri çevirin ki, düzgün şəkildə dönsün. Əlinizə düzgün oturduğundan əmin olmaq üçün əyilmə sensorlarınızı cığırlardan keçirin

Addım 2: Micro: bit ilə Serial Əlaqədən istifadə

Sensorlarımızın çıxışlarını görmək üçün serial rabitə istifadə edəcəyik. Növbəti addımda kodu Makecode -da necə quracağınızı görəcəksiniz, amma əvvəlcə onu terminalımızdan oxumağı öyrənəcəyik. (Qeyd: Mac istifadə edirəm, bu səbəbdən əməliyyat sisteminizdən asılı olaraq bu addımlar fərqli ola bilər. Digər əməliyyat sistemləri üçün bura baxın).

1. Micro: bit -ə qoşun
2. Terminalınızı açın
3. 'ls /dev/cu.*' yazın
4. '/Dev/cu.usbmodem1422' kimi görünən bir şey görməlisiniz, ancaq dəqiq rəqəm kompüterinizdən asılı olacaq
5. Kod işlədikdən sonra 'screen /dev/cu.usbmodem1422 115200' (xüsusi seriya port nömrənizlə) yazmaq sizə Micro: bit -in serial çıxışını verəcək.
6. Çıxışınızı necə formatladığınızdan asılı olaraq çıxışınız yuxarıdakı şəkilə bənzəməlidir!

Addım 3: Dövrün Prototipləşdirilməsi

Bütün komponentlərimizi birlikdə lehimləmədən əvvəl, dövrənin prototipini hazırlayacağıq və sensor dəyərlərimizi oxumaq və komponentlərimizin düzgün işlədiyinə əmin olmaq üçün bir neçə misal kodu yazacağıq.

1. Yuxarıdakı dövrə diaqramından istifadə edərək, keçid telləri, rezistorlar, bir tərəfli timsah klipləri və Micro: bit istifadə edərək çörək taxtasındakı dövrənizi prototip edin.
2. Bükülmə sensorlarınızı 0, 1 və 2 pinlərinə qoşun.
3. Bu kodu əyilmə sensorlarımı sınamaq üçün istifadə etdim
4. Oxumalarını görmək və düzgün işlədiklərindən əmin olmaq üçün onları bir neçə dəfə əymək

Kodda, seriya çıxışımıza yazdığımız son "serial.writeLine" sətiridir. İstədiyiniz kimi bu çıxışı formatlaya bilərsiniz, hər dəyişəni vergüllə ayırdım və sonra vergüllə ayırdım, amma bu hissə sizə aiddir.

(Qeyd: Bu addımı atdıqdan sonra əyilmə sensorlarımdan birinin keçirici boyada çipi olduğunu və buna görə də yaxşı oxunmadığını öyrəndim. Bu səbəbdən bəzi şəkillərdə 4 sensorla işlədiyimi göstərir. Bunu tapdıqdan sonra getdim Göstərici, orta və üzük barmağında cəmi üç sensora qədər. Mən də əyilmə sensorlarımın "əksinə" əyilmiş ən geniş oxuma diapazonuna malik olduğunu gördüm, buna görə də rezistiv boya aşağıya baxaraq əlcəklərin üstünə qoydum.)

Addım 4: Akselerometr və İşıq Sensorunun sınanması

Bu mərhələdə Micro: bit üzərindəki akselerometr və işıq sensorunu da sınamağı seçdim

1. Mikro: biti kompüterinizə qoşun
2. Bu kodu yükləyin
3. Sonra bu kodla birlikdə akselerometr, işıq və əyilmə sensorlarını sınadım

(Qeyd: Bu anda sancaqlar və işıq sensoru istifadə edə bilməyəcəyinizi başa düşdüm, buna görə finalda işıq sensoru istifadə etmədim, amma necə oxuyacağınızı görmək istədim ehtiyac olarsa işıq sensoru!)

Addım 5: Bükülmə Sensorlarının Lehimlənməsi

İndi komponentlərimizi birlikdə lehimləməyə başlayacağıq! Bu həyəcan verici bir hissədir, amma yavaş -yavaş getmək və sona çatmamaq, işləməyən bir şeyin olmaması və harada səhv getdiyinə əmin olmamaq üçün hər şeyin hələ də işlədiyini yoxlamaq vacibdir! Teller və rezistorlar birlikdə lehimləndikdən sonra hər bir sensorun hələ də işlədiyini yoxlamaq üçün burada ikitərəfli timsah kliplərinizdən istifadə etməyi təklif edirəm.

1. Əyilmə sensörünüzü və lentinizi götürün və ya yerində tutmaq üçün üzərinə ağır bir şey qoyun.
2. 10K Ohm rezistorunuzu götürün və ucunun çox hissəsini kəsin ki, dirsək əyilmə sensorundakı qurğunun uzunluğundadır.
3. Lehimləmə dəmirinizi götürün və qızdırılana qədər həm rezistora, həm də əyilmə sensoru ucuna basın
4. Lehiminizi götürün və komponentlər üzərində əriməyə başlayanda isti dəmirin içinə basın. Yalnız telləri bağlamaq üçün kifayət qədər lazımdır.
5. Dəmiri çıxarın. Burada digər bağçılıq əlcəyini taxdım və lehim soyuduğunda rezistoru və teli yerində saxladım.
6. Uzun bir qırmızı tel kəsib rezistorla əyilmə sensorunun qovuşduğu lehim birləşməsinə qoyun. 4-5 addımları təkrarlayın. Bu analog pin telidir.
7. Uzun bir qara tel kəsin və digər telin ucuna qoyun. 4-5 addımları təkrarlayın. Bu sizin torpaq telinizdir.
8. Qırmızı telin uzun bir hissəsini kəsin və rezistorun digər ucunu kəsin ki, əvvəlki tərəfə bənzəsin. 4-5 addımları təkrarlayın. Bu sizin elektrik telinizdir.
9. Qalan əyilmə sensorlarınız üçün 1-8-ci addımları təkrarlayın.
10. Kabellərinizi uzun buraxın ki, sonradan Micro: bit -ə qoyarkən düzgün uzunluğa çatdıra biləsiniz.

Addım 6: Mikroya Lehimləmə: Bit və Əlcəyin Montajı

Sensorlarımız hazır olduqdan sonra Micro: bitə lehimləməyə və əlcəyi yığmağa başlayacağıq. Birlikdə lehim etdikdən sonra komponentlərin hələ də işlədiyinə əmin olmaq üçün timsah kliplərindən istifadə edərək sınayarkən bir daha xatırlayın.

1. Sensorları qoyun və Micro: tellərin hara getməsi və nə qədər uzun olması lazım olduğu barədə fikir əldə etmək üçün əlcəyi bir az ələ alın.
2. Elektrik pininin ətrafına qırmızı bir tel sarın. Tel kəsmək üçün tel kəsin və telinizi bağlayacağınız boşluqlar buraxın. Torpaq teli üçün də bunu edin.
3. İstifadə etmədiyiniz əlcəyi təsvir edin. Bu, hər şeyi birlikdə lehimləməyimizə və işlərin uzunluğunu düzəltməyimizə kömək edəcək. Hər şeyi geriyə doğru aparacaqsınız, baxmayaraq ki, hər şeyi düzgün şəkildə lehimlədiyinizi yoxlayın!
4. Mikro: əlinizə qoyulmasını istədiyiniz yerə yaxınlaşdırın. Torpaq və elektrik naqillərinin oturduğu yerləri işarələyin.
5. Tel, güc və ya şeridi yerində bantlayın.
6. Bükülmə sensörünüzü yerə yapışdırın.
7. Elektrik kabelini kəsin ki, bütün elektrik xəttindəki işarəni keçsin.
8. Bu parçaları birlikdə lehimləyin.
9. Digər elektrik telləri üçün 5-8-ci addımları təkrarlayın və torpaq telləri üçün.
10. Micro: biti götürün və yeni lehimlənmiş tellərin altına qoyun. Gücü və zəmini düzgün sancaqlara lehimləyin.
11. Analoq telləri sancaqların ucundan keçib ön tərəfə dolanacaq şəkildə kəsin.
12. Telləri düzgün pinlərə lehimləyin.
13. Bütün tellərin (güc, torpaq və analoq) sancaqların həm önünə, həm də arxasına toxunduğu zaman oxularımın ən yaxşı və ən uyğun olduğunu gördüm.
14. Bir pərdə ilə bir iz, əyilmə sensorlarını barmaqlarınızla eyni vaxtda itələyin.
15. Sensorlar yerində olduqda, əlcəyi taxın və uyğunluğunun doğru olduğundan əmin olun. Parçalar əlavə etmək və ya yerlərini düzəltmək lazımdırsa, bunu indi edin.
16. Sensorlar istədiyiniz yerdə yatdıqdan sonra Micro: biti harada bağlayacağınızı qeyd edin. A və B düymələrinin hər iki tərəfindəki kiçik deliklərdən və ya sancaqlar üçün deliklərdən istifadə edə bilərsiniz. İğnənizi və ipinizi əlinizə bağlamaq üçün istifadə edin

Təbriklər! Əlcək üçün hardware komponentləri artıq tamamlandı!

Addım 7: Mikro: bit kodu

İndi sizi Micro: bit kodu ilə gəzdirəcəyəm. Bu kodu istədiyinizi etməkdən məmnunuq, amma hər şeyi keçib izah etmək istədim ki, mənim nə etdiyimi, necə etdiyimi və niyə görə biləsiniz! Kodumu burada tapa bilərsiniz.

1. 1-31-ci sətirlər. Burada əvvəlcədən təyin edilmiş funksiyalardan istifadə edirəm Micro: bit gəlir.

   • A düyməsini basmaq, mövcud qrafiklərin sayını azaldır. 0 -a çatdıqda ən yüksək rəqəmə qayıdır.
   • B düyməsini basmaq sayını artırır, ən çox mövcud qrafikə çatdıqdan sonra 0 -a qayıdır.
   • Seçdiyiniz cari qrafik hal -hazırda çəkilmirsə, A və B düymələrinə eyni anda basaraq yeni qrafik seçilir.
   • Seçdiyiniz cari qrafik çəkilənlə eynidirsə, A və B düymələrinə eyni vaxtda basmaqla doldurula bilər.
   • Micro Shaking: bit, p5.js -ə kətanı silmək və qara rəngdə başlamağı bildirən silmə dəyişənini 1 olaraq təyin edir. İşi bir saniyə dayandırır və sonra istifadəçinin çəkməyə davam etməsi üçün onu 0 -a qaytarır.

2. 32-64-cü sətirlər dəyişənlərimi qurur. Dəyərlərin çoxunun kodlaşdırılmaması üçün bir çox dəyişəndən istifadə etmək vacib idi. Əlcək ilə dəyişə bilərlər və hər yerdə bir dəstə dəyər yeniləmək əvəzinə bir yerdə asanlıqla dəyişdirilə bilərlər. Önəmli olanlardan bir neçəsini vurğulayacağam.

   • Kətan ölçüsü, kətanın ölçüsündən asılı olaraq yeniləmək üçün bir dəyişənə sahib olmaq çox xoşdur. Forma ilə eynidir Yüksək. Qrafika əlavə etdikdə və ya qurtardıqda bu nömrəni burada yeniləyə bilərəm.
   • Yüksək və aşağı dəyişənlər, sensorlar üçün yüksək və aşağı cərəyanı izləməyə və davamlı olaraq kalibrləmə aralığına sahib olmağa imkan verir. Bu vacibdir, çünki əlcək taxan hər bir insanın fərqli hərəkət diapazonu və buna görə də əldə edə biləcəyi fərqli yüksəkliklər və enişlər olacaqdır.
3. 66-68-ci sətirlər, fleks sensorlar üçün pinlərdən analoq dəyərləri oxuyur

4. 69-74-cü sətirlər göstərici barmağı üçün yüksək dəyəri kalibr edir.

   • Yeni bir zirvəyə çatılırsa, bunu yüksək olaraq təyin edir.
   • Bu barmağın aralığını yenidən kalibr edir.
   • Rəng Xəritəçəkmə üçün bu yeni aralığı istifadə edir
5. 75-80 sətirləri göstərici barmağı üçün aşağı dəyəri kalibr edir.
6. 81-104-cü sətirlər orta və üzük barmaqları üçün 4 və 5 ilə eyni şeyi edir.

7. 105-107-ci sətirlər, flex sensor dəyərlərimi 0-255 rəng dəyərlərinə uyğunlaşdırır (ya da rəngLow to LowHigh, əgər tam aralığını etmirəmsə)

   • Makecode -dan quraşdırılmış xəritə funksiyası, sensorlarımdan əldə etdiyim məhdud diapazonu nəzərə alaraq mənə əla bir xəritələşdirmə vermədi. Beləliklə, mən öz Xəritəçəkmə funksiyamı yaratdım.
   • Bunun necə işlədiyini burada görə bilərsiniz. Hər barmağın giriş diapazonu onun tərəfindən müəyyən edilir (ən yüksək dəyər - ən aşağı dəyərdir). Eyni zamanda (ən yüksək rəng dəyəri - ən aşağı rəng dəyəri) olan rəng aralığı hər barmaq aralığına bölünür. Bu ədəd ən aşağı tam ədəd yuvarlaqlaşdırılır və hissədir.
   • (Həqiqi sensor dəyəri - ən aşağı sensor dəyəri) aralığdakı dəyəri verir. Bunu yuxarıda tapdığımız hissə ilə vurmaq və ən aşağı rəng dəyərlərini əlavə etmək, rəng aralığında olan sensordan rəngə qədər xəritələnmiş bir dəyər verir.
8. 109 -cu sətir meydança dəyərində oxuyur (yuxarı və aşağı).
9. 110-115-ci sətirlər bu dəyər üçün yüksək və aşağıları kalibrləyir
10. 116 -cı sətir, rulon dəyərində oxuyur (sol və sağ).
11. 117-122-ci sətirlər bu dəyər üçün yüksək və aşağıları kalibrləyir
12. 123-126-cı sətirlər meydança və yuvarlanma dəyərlərini kətan ölçüsünə uyğunlaşdırır və onları tam ədədlərə yuvarlaqlaşdırır.
13. 127 -ci sətir, dəyişənləri serial.writeLine istifadə edərək hər bir dəyəri vergül və boşluqla ayıraraq "," işarəsi ilə ardıcıl olaraq yazır.

İstədiyiniz kodu əldə etdikdən sonra kodu yükləyin və yükləmələrinizdən Micro: bit -ə sürükləyin (kodu tapanın sol tərəfindəki "Yerlər" bölməsində görməlisiniz) kodu Micro: bit -ə yükləmək üçün.

Addım 8: P5.js ilə Serial Əlaqə

P5.js ilə ardıcıl ünsiyyət qurmaq üçün əlavə bir vasitəyə ehtiyacımız var. Serial ünsiyyətin pərdəarxasında nələr getdiyini öyrənmək üçün bu yazını oxumağı təklif edirəm.

1. P5.js tətbiqinin bir versiyasını bu linkdən yükləyin. Alpha 6 versiyam var, amma hər hansı biri işləyəcək.
2. Bu p5.js şablonunu ardıcıl ünsiyyət üçün istifadə edin. Bunu qurmaq üçün 12. sətirdə portName üçün düzgün seriya port adını daxil edin. Bu, 2 -ci addımda başa düşdüyümüz addır.
3. Mikro: biti kompüterinizə qoşun
4. P5.js serial tətbiqini açın.
5. Liman siyahısından portunuzu seçin və başqa heç nə etməyin. Açmağa belə basmayın! Sadəcə siyahınızdan limanı seçin.
6. P5.js serial şablonunda run düyməsini basın. Açıq görməli olmalısınız və hələ seriya çıxışımızı təhlil etmək üçün kod yazmadığımız üçün null dəyərləri oxuyacaq.

İndi Micro: bit -dən p5.js -ə qədər ardıcıl ünsiyyət qura bilərik!

Addım 9: P5.js Kodu

İndi p5.js koduna girəcəyik. Serial çıxış dəyərlərini oxuduğumuz və sənət yaratmaq üçün istifadə etdiyimiz yer budur.

1. Əvvəlki addımda qeyd etdiyim kimi, 12 -ci sətirdəki portName xüsusi kompüter port adınız olduğundan əmin olun.
2. Setup () funksiyasında, 32-33-cü sətirlərdə, sol və sağBuffer-ı createGraphics ilə əlavə etdim, bunu kətanı ayırmaq üçün etdim ki, bir hissəsi rəsm üçün istifadə edilsin, digər hissəsi istiqamətləri göstərsin və hansı qrafik göstərilsin baxırsan və ya gəzirsən.
3. Draw () funksiyası, leftBuffer və rightBuffer -i ayrıca yaratmaq üçün etdiyim funksiyaları çağırır. Hər bir tamponun sol üst küncünün haradan başladığını da təyin edir.
4. DrawRightBuffer () funksiyası istiqamətlər və qrafik seçimləri üçün bütün mətni göstərir

5. DrawLeftBuffer () funksiyaları bütün qrafikləri göstərir.

   • 93 -cü sətir təsadüfi olaraq alfa dəyəri üçün bir dəyər yaradır. Bu, bütün rənglərin daha maraqlı görünməsi üçün fərqli şəffaflıq dəyərlərinə sahib olmasıdır. 4 fleks sensoru olsaydı bunun üçün 4 -cü istifadə edərdim!
   • 94 -cü xətt, vuruş dəyərini fleks sensorlar tərəfindən təyin olunan r, g, b dəyərlərinə təyin edir
   • Əlcək olmadan əlcək olmadan necə işlədiyini yoxlamaq üçün siçan istifadə edərək 96-102-ci sətirləri şərh etmək olmaz. 102 -ci sətri funksiyanın qalan hissəsindəki qrafiklərlə əvəz edin.
6. 104-106, kətan arxa planını qara rəngə qoyaraq əl titrədikdə kətanı silin
7. 108-114, A+B basıldıqda və seçildikdə və cari forma eyni olduqda şəkillərin doldurulmasını idarə edir
8. 117-312 qrafiklərin göstərildiyi yerlərdir. Kodun əsas hissəsi və yaradıcı olmaq üçün bir hissəsidir! Şəkilləri necə idarə edəcəyinizi daha yaxşı başa düşmək üçün p5.js istinadına baxmağı təklif edirəm. X, y mövqelərini idarə etmək və şəkillərin və qrafiklərin ölçüsünü dəyişdirmək üçün rulon və meydançadan istifadə etdim və daha əvvəl də qeyd etdiyim kimi. rəngi idarə etmək üçün əyilmə sensorları. Burada yaradıcılıq əldə edə bilərsiniz! P5.js -in təklif etdiyi şeylərlə oynayın və idarə etmək üçün öz əyləncəli qrafiklərinizi hazırlayın! Burada sağBuffer -də görünən currentShape -in də təsvirini təyin etdim.
9. 318-460 Seçilmiş Şəkil üçün təsviri təyin etdim.

10. 478-498 sətirləri serialEvent () funksiyasıdır. Serial məlumatlarını aldığımız yer budur.

    • 485-486 sətirlərində proll və ppitch (əvvəlki yuvarlanma və meydança) əvvəlki rulon və meydança dəyərlərini təyin etdim.
    • 487 -ci sətirdə məlumatları "," bölürəm. Veriləri vergüllə ayrılmaq üçün yazdığım üçün bunu edirəm. Dəyişənlərinizi ayırdığınız hər şeyi bura qoyardınız. Bu dəyişənlər ədədlər sırasına daxil edilir.
    • Sonra 488-496 sətirlərində dəyişənləri serialdakı uyğun elementə qoydum və onları sətirdən nömrəyə tərcümə etdim. Qrafikləri idarə etmək üçün drawLeftBuffer () funksiyasında bu dəyişənlərdən istifadə edirəm.

Bu, kodu çox toplayır və layihəni bitirir! İndi əlcəyin hərəkətdə olduğunu görə bilərik.

Addım 10: Son məhsul

Hazır əlcəyin bəzi şəkilləri və yaratdığı bəzi sənət əsərləri burada! Fəaliyyətdə olmaq üçün demo videoya baxın!