ხელთათმანი: 10 ნაბიჯი (სურათებით)

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:15

ხელთათმანი არის ტარებადი ხელთათმანი, რომელიც შეიცავს სხვადასხვა ტიპის სენსორებს, რათა აკონტროლონ ხელოვნების გრაფიკა მიკრო: ბიტი და p5.js თითები იყენებენ მოსახვევის სენსორებს, რომლებიც აკონტროლებენ r, g, b მნიშვნელობებს და ამაჩქარებელს მიკროში: ბიტი აკონტროლებს x, y კოორდინატები გრაფიკისთვის. მე შევქმენი ეს პროექტი, როგორც ჩემი ვადიანი პროექტი ჩემი ტარების ტექნოლოგიის კლასისთვის, როგორც უფროსი ტექნოლოგიების, ხელოვნებისა და მედიის პროგრამაში CU Boulder– ში.

მასალები:

• მებაღეობის ხელთათმანები
• BBC მიკრო: ცოტა
• 3-4 Flex სენსორი
• 10K Ohm რეზისტორები
• შემაერთებელი მავთული (წითელი და შავი)
• მავთულის დამჭერები
• პურის დაფა
• ალიგატორის სამაგრები (ორმხრივი და ცალმხრივი)
• Solder
• გასაყიდი რკინა
• ნემსი
• ძაფი
• ცვილის ქაღალდი
• Ფირზე
• Მაკრატელი
• კალამი და ფანქარი

ნაბიჯი 1: მოხარეთ სენსორული ბილიკები

პირველ რიგში, ჩვენ ყურადღებას გავამახვილებთ ტექნიკის დამზადებაზე. ამ გზით როდესაც ჩვენ მივდივართ კოდირებაში ჩვენ გვაქვს ხელთათმანების ფაქტობრივი კომპონენტი გამოსაყენებლად და შესამოწმებლად.

1. დასაწყებად, ჩვენ ვაკეთებთ თითებს, რომლებიც დაიცავს მოსახვევის სენსორებს. ამ ბილიკების არსებობა საშუალებას აძლევს მოსახვევის სენსორებს ოდნავ წინ და უკან გადაადგილება, ხოლო თითის მოსახვევში დაცული. პირველი, გადააქციე ხელთათმანი შიგნით.
2. მიიღეთ მოსახვევის სენსორი და მოათავსეთ იგი თითის შუა ქედზე. კალმის გამოყენებით ასახეთ მოსახვევის სენსორი
3. გადაიტანეთ ძაფი ნემსით. მიეცით საკუთარ თავს გულუხვი ნაჭერი. ძაფის ბოლოს მიამაგრეთ კვანძი.
4. ზემოდან და ხაზზე დაწყებული, უბრალოდ ააფეთქეთ მოსახვევის სენსორის რკალი, გაიგეთ ნემსი ხელთათმანით შიგნიდან და უკან გადაიწიეთ პარალელურ ხაზზე. გაიყვანეთ ნემსი მთელი გზა ისე, რომ კვანძი ზის თქვენს მიერ დახატულ ხაზზე.
5. მჭიდროდ გაიყვანეთ, გააკეთეთ 2-3 კვანძი მეორე მხარეს. ეს უზრუნველყოფს ძაფს არ გამოვა. დარწმუნდით, რომ ის მჭიდროა ისე, რომ მოსახვევის სენსორი იყოს დაცული თქვენს თითზე
6. გაჭერით ძაფი, დატოვეთ რამდენიმე სმ. ძაფის ბოლოს ისე, რომ კვანძი არ გაუქმდეს.
7. გაიმეორეთ ნაბიჯები 2-6 ყველა თითისთვის, რომელზედაც მიამაგრეთ მოქნილი სენსორები, სანამ არ გამოიყურება მესამე ბოლო სურათი.
8. გადააქციე ხელთათმანი უკან ისე, რომ ის სწორი გზით იყოს შემობრუნებული. გადაიტანეთ მოსახვევის სენსორები ბილიკებზე, რათა დარწმუნდეთ, რომ ისინი სწორად ჯდება თქვენს ხელზე

ნაბიჯი 2: სერიული კომუნიკაციის გამოყენება მიკრო: ბიტი

ჩვენი სენსორების შედეგების სანახავად ჩვენ ვიყენებთ სერიულ კომუნიკაციას. თქვენ ნახავთ, თუ როგორ უნდა დააყენოთ კოდი Makecode– ში მომდევნო ეტაპზე, მაგრამ ჯერ ჩვენ ვისწავლით როგორ წავიკითხოთ იგი ჩვენი ტერმინალიდან. (შენიშვნა: მე ვიყენებ Mac- ს, ასე რომ ეს ნაბიჯები შეიძლება განსხვავებული იყოს თქვენი ოპერაციული სისტემის მიხედვით. სხვა ოპერაციული სისტემებისთვის იხილეთ აქ).

1. შეაერთეთ თქვენი მიკრო: ცოტა
2. გახსენით თქვენი ტერმინალი
3. აკრიფეთ 'ls /dev/cu.*'
4. თქვენ უნდა ნახოთ რაღაც, რაც ჰგავს '/dev/cu.usbmodem1422', მაგრამ ზუსტი რიცხვი დამოკიდებული იქნება თქვენს კომპიუტერზე
5. კოდის გაშვების შემდეგ, აკრიფეთ 'screen /dev/cu.usbmodem1422 115200' (თქვენი კონკრეტული სერიული პორტის ნომრით) მოგცემთ თქვენს მიკრო: ბიტის სერიულ გამომუშავებას
6. თქვენი გამომავალი უნდა გამოიყურებოდეს ზემოთ მოცემულ სურათზე, ეს დამოკიდებულია იმაზე, თუ როგორ გააფორმოთ თქვენი გამომავალი!

ნაბიჯი 3: წრის პროტოტიპირება

სანამ შევაერთებთ ჩვენს ყველა კომპონენტს ერთად, ჩვენ ვაპირებთ სქემის პროტოტიპს და დავწერთ მაგალითის კოდის რამდენიმე სტრიქონს, რომ წავიკითხოთ ჩვენი სენსორის მნიშვნელობები და დავრწმუნდეთ, რომ ჩვენი კომპონენტები სწორად მუშაობენ.

1. ზემოთ სქემის დიაგრამის გამოყენებით, პროტოტიპი გაუკეთეთ თქვენს მიკროსქემას პურის დაფაზე ჯუმბერის მავთულის, რეზისტორების, ცალმხრივი ალიგატორის სამაგრებისა და თქვენი მიკრო: ბიტის გამოყენებით.
2. შეაერთეთ თქვენი მოსახვევის სენსორები 0, 1 და 2 ქინძისთავებთან.
3. მე ეს კოდი გამოვიყენე ჩემი მოქნილი სენსორების შესამოწმებლად
4. რამდენჯერმე მოხარეთ ისინი, რომ ნახოთ მათი წაკითხული და დარწმუნდეთ, რომ ისინი სწორად მუშაობენ

კოდში არის ბოლო ხაზი "serial.writeLine" სადაც ჩვენ ვწერთ ჩვენს სერიულ გამომავალს. თქვენ შეგიძლიათ გამოაქვეყნოთ ეს გამომავალი, როგორც გინდათ, მე გამოვყავი ყველა ცვლა მძიმით, შემდეგ კი გავყავი მძიმით მოგვიანებით, მაგრამ ეს ნაწილი შენზეა დამოკიდებული.

(შენიშვნა: ამ ნაბიჯის გადადგმის შემდეგ აღმოვაჩინე, რომ ჩემს ერთ მოსახვევ სენსორს ჰქონდა ჩიპი გამტარ საღებავში და, შესაბამისად, კარგ კითხვას არ იღებდა. ამიტომაც არის, რომ ზოგიერთ სურათზე მეჩვენებოდა 4 სენსორთან მუშაობა. ამის აღმოჩენის შემდეგ წავედი მხოლოდ სამი სენსორი მაჩვენებლის, შუა და ბეჭდის თითზე. მე ასევე აღმოვაჩინე, რომ ჩემს მოსახვევ სენსორებს ჰქონდათ კითხვის ყველაზე ფართო სპექტრი "მოპირდაპირე" მიმართულებით, რის გამოც მე მათ ხელთათმანს ვაყენებდი რეზისტენტული საღებავით ქვემოთ.)

ნაბიჯი 4: შეამოწმოთ აქსელერომეტრი და სინათლის სენსორი

ამ ეტაპზე მე ასევე ავირჩიე შემოწმება ამაჩქარებელი და სინათლის სენსორი Micro: bit

1. შეაერთეთ თქვენი მიკრო: ბიტი თქვენს კომპიუტერს
2. ჩამოტვირთეთ ეს კოდი
3. შემდეგ მე შევამოწმე ამაჩქარებელი, სინათლის და მოსახვევის სენსორები ამ კოდთან ერთად

(შენიშვნა: სწორედ ამ დროს მივხვდი, რომ თქვენ არ შეგიძლიათ გამოიყენოთ ქინძისთავები და სინათლის სენსორი ერთდროულად, ასე რომ, მე არ გამოვიყენე სინათლის სენსორი ჩემს ფინალში, მაგრამ მინდოდა რომ თქვენ შეგეძლოთ ენახათ კითხვა. თუ გჭირდებათ სინათლის სენსორი!)

ნაბიჯი 5: მოხარეთ სენსორების შედუღება

ახლა ჩვენ ვიწყებთ ჩვენი კომპონენტების შედუღებას ერთად! ეს არის ამაღელვებელი ნაწილი, მაგრამ მნიშვნელოვანია ნელა იარო და შეამოწმო, რომ ყველაფერი ისევ ისე მიდის, როგორც შენ მიდიხარ, რათა ბოლომდე არ მიიყვანო, რაღაც არ იმუშაო და არ იყო დარწმუნებული სად წავიდა არასწორად! მე გირჩევთ გამოიყენოთ თქვენი ორმაგი ცალმხრივი ალიგატორის სამაგრები, რომ შეამოწმოთ თითოეული სენსორი კვლავ მუშაობს მას შემდეგ, რაც მავთულები და რეზისტორები გაერთიანდება.

1. აიღეთ მოსახვევის სენსორი და ლენტი ან დადეთ მძიმე ობიექტი, რომ დაიჭიროთ.
2. აიღეთ თქვენი 10K Ohm რეზისტორი და გათიშეთ ნაწილის უმეტესი ნაწილი ისე, რომ ტყვიის სიგრძე დაახლოებით იმდენი იყოს, რამდენიც ტყვიის მოსახვევ სენსორზე.
3. აიღეთ გამაგრილებელი რკინა და დააჭირეთ მას როგორც რეზისტორზე, ასევე მოხარეთ სენსორის ტყვიამდე სანამ არ გახურდება
4. აიღეთ შედუღება და დაჭერით ცხელ უთოში, რადგან ის იწყებს დნობას კომპონენტებზე. თქვენ უბრალოდ გჭირდებათ საკმარისი მავთულის დასაფარავად.
5. ამოიღეთ რკინა. აქ ჩავიცვი სხვა მებაღეობის ხელთათმანი და გამაგრება გამაგრილებელ ადგილას მოვიკიდე რეზისტორი და მავთული.
6. დააწებეთ წითელი მავთულის გრძელი ნაჭერი და განათავსეთ იგი შესაკრავის სახსარში, სადაც რეზისტორისა და მოსახვევის სენსორი ხვდება. გაიმეორეთ 4-5 ნაბიჯი. ეს არის ანალოგი pin მავთული.
7. დაჭერით შავი მავთულის გრძელი ნაჭერი და მოათავსეთ იგი მეორე ტყვიის ბოლოს. გაიმეორეთ 4-5 ნაბიჯი. ეს არის თქვენი მიწის მავთული.
8. შეაჭერით წითელი მავთულის გრძელი ნაჭერი და მოაჭერით რეზისტორის მეორე ბოლო ისე, რომ იგი იყოს წინა მხარეს. გაიმეორეთ 4-5 ნაბიჯი. ეს არის თქვენი დენის მავთული.
9. გაიმეორეთ ნაბიჯები 1-8 დანარჩენი მოსახვევის სენსორებისთვის.
10. დატოვეთ თქვენი მავთულები ისე, რომ გქონდეთ მუშაობის ადგილი, რათა მოგვიანებით გახადოთ სწორი სიგრძე მიკრო: ბიტზე დაყენებისას.

ნაბიჯი 6: შედუღება მიკრო: ბიტი და აწყობა ხელთათმანი

ახლა, როდესაც ჩვენი სენსორები მზად არიან, ჩვენ ვიწყებთ მიკროსქემის: ბიტის შედუღებას და ხელთათმანის აწყობას. კიდევ ერთხელ დაიმახსოვრეთ, რომ შეამოწმოთ, როდესაც მიდიხართ, ალიგატორების სამაგრების გამოყენებით დავრწმუნდეთ, რომ კომპონენტები კვლავ მუშაობენ მას შემდეგ რაც მათ ერთად შეაერთებთ.

1. მოათავსეთ სენსორები და Micro: ცოტა ხელთათმანზე რომ მიიღოთ წარმოდგენა სად უნდა წავიდეს მავთულები და რამდენი ხანი უნდა იყოს.
2. გადააფარეთ წითელი მავთული დენის პინზე. გამოიყენეთ მავთულის საჭრელები მავთულის გასაშლელად და დატოვეთ ღია ხარვეზები, რომელზედაც მიამაგრებთ თქვენს მავთულს. ეს გააკეთეთ მიწის მავთულისთვისაც.
3. მიუთითეთ ხელთათმანი, რომელსაც არ იყენებთ. ეს დაგვეხმარება შევაერთოთ ყველაფერი ერთად და მივიღოთ ნივთების სიგრძე სწორად. თქვენ ყველაფერს უკუღმა გააკეთებთ, ასე რომ, ორმაგად შეამოწმეთ, რომ ნივთებს სწორ გზაზე აერთებთ!
4. მოათავსეთ თქვენი მიკრო: ცოტათი იქ, სადაც გსურთ, რომ დაიკიდოს თქვენს ხელზე. ჩადება ნიშნები იყო ადგილზე და დენის მავთულები ზის.
5. მიამაგრეთ მავთული, დენი ან მიწა ადგილზე.
6. მიამაგრეთ თქვენი მოსახვევის სენსორი ადგილზე.
7. გათიშეთ ელექტროგადამცემი მავთული ისე, რომ იგი გაივლის მის ნიშნულს მთელ ელექტროგადამცემი ხაზზე.
8. შეათბეთ ეს ნაჭრები ერთად.
9. გაიმეორეთ ნაბიჯები 5-8 სხვა დენის მავთულისთვის და მიწის მავთულისთვის.
10. აიღეთ Micro: bit და განათავსეთ იგი ახლად შედუღებული მავთულის ქვეშ. შეურიეთ ძალა და მიწა სწორ ქინძისთავებს.
11. ჩაკეტეთ ანალოგური მავთულები ისე, რომ ისინი გაივლიან ქინძისთავების ბოლოს და შეიძლება შემოახვიონ წინა მხარეს.
12. შეაერთეთ მავთულები სწორ ქინძისთავებზე.
13. აღმოვაჩინე, რომ ჩემი წაკითხვა იყო საუკეთესო და თანმიმდევრული, როდესაც ყველა მავთული (სიმძლავრე, მიწა და ანალოგი) შეეხო ქინძისთავების წინა და უკანა ნაწილს.
14. ერთი ტრასა ერთი ტრეკით, ერთდროულად მიაბრუნეთ მოსახვევის სენსორები თითებზე მაღლა.
15. როდესაც სენსორები ადგილზეა, ჩაიცვით ხელთათმანი და დარწმუნდით, რომ მორგება სწორია. თუ თქვენ გჭირდებათ ტრეკების დამატება, ან მათი განთავსების დაფიქსირება, გააკეთეთ ეს ახლავე.
16. მას შემდეგ, რაც სენსორები იწვებიან იქ, სადაც გსურთ, მიაქციეთ ყურადღება, სად დააკავშიროთ მიკრო: ბიტი თავის ადგილას. თქვენ შეგიძლიათ გამოიყენოთ პატარა ხვრელები A და B ღილაკების ორივე მხარეს ან გამოიყენოთ ხვრელები ქინძისთავებისთვის. გამოიყენეთ ნემსი და ძაფი, რომ დაიკიდოთ იგი თქვენს ხელზე

Გილოცავ! ხელთათმანის აპარატურის კომპონენტები ახლა დასრულებულია!

ნაბიჯი 7: მიკრო: ბიტი კოდი

ახლა მე ვაპირებ მიკრო: ბიტის კოდის გავლით. თქვენ ხართ მისასალმებელი, რომ ეს კოდი გააკეთოთ ის, რაც გსურთ, მაგრამ მე მინდოდა გამეარა და აეხსნა ყველაფერი, ასე რომ თქვენ შეგიძლიათ ნახოთ რა გავაკეთე, როგორ გავაკეთე და რატომ! თქვენ შეგიძლიათ იპოვოთ ჩემი კოდი აქ.

1. სტრიქონები 1-31. აქ მე ვიყენებ წინასწარ განსაზღვრულ ფუნქციებს მიკრო: ბიტი მოყვება.

   • 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 (ან ფერი დაბალი ფერის მაღალი, თუ მე არ ვაკეთებ სრულ დიაპაზონს)

   • ჩამონტაჟებული რუქის ფუნქცია Makecode– დან არ მაძლევდა დიდ რუქას, იმის გათვალისწინებით, რომ შეზღუდული დიაპაზონი ვიღებდი ჩემი სენსორებისგან. ასე რომ, მე შევქმენი ჩემი რუქების ფუნქცია.
   • აი, როგორ მუშაობს. თითოეული თითის შეყვანის დიაპაზონი განისაზღვრება მისი (უმაღლესი მნიშვნელობა - ეს ყველაზე დაბალი მნიშვნელობა). ფერის დიაპაზონი, რომელიც ასევე არის (უმაღლესი ფერის მნიშვნელობა - ყველაზე დაბალი ფერის მნიშვნელობა) იყოფა თითების თითის დიაპაზონში. ეს რიცხვი მომრგვალებულია ყველაზე დაბალი მთლიანი რიცხვით და არის კოეფიციენტი.
   • (ფაქტობრივი სენსორის მნიშვნელობა - ყველაზე დაბალი სენსორის მნიშვნელობა) გაძლევთ მნიშვნელობას დიაპაზონში. ამის გამრავლება კოეფიციენტზე, რაც ჩვენ აღმოვაჩინეთ და ფერის ყველაზე დაბალი მნიშვნელობების დამატება მოგცემთ ასახულ მნიშვნელობას სენსორიდან, ფერიდან, ფერის დიაპაზონში.
8. სტრიქონი 109 კითხულობს სიმაღლის მნიშვნელობას (ზევით და ქვევით).
9. 110-115 ხაზები ამ მნიშვნელობის მაღალ და დაბალ კალიბრაციას ახდენს
10. სტრიქონი 116 კითხულობს როლის მნიშვნელობას (მარცხნივ და მარჯვნივ).
11. ხაზები 117-122 ადგენს მაღალ და დაბალ ამ მნიშვნელობას
12. 123-126 სტრიქონები ასახავს ტიტულის ზომას ტილოების ზომაზე და ამრგვალებს მათ მთელ რიცხვებზე.
13. ხაზი 127 წერს ცვლადებს სერიულ გამომავალზე serial.writeLine- ის გამოყენებით, გამოყოფს ყველა მნიშვნელობას მძიმით და სივრცით ",", რათა მოგვიანებით გაანალიზდეს.

მას შემდეგ რაც მიიღებთ კოდს, როგორ მოგწონთ, გადმოწერეთ და გადმოიტანეთ გადმოწერილიდან თქვენს მიკრო: ბიტში (თქვენ უნდა ნახოთ იგი "მდებარეობებში" თქვენი მაძიებლის მარცხენა მხარეს) რომ ატვირთოთ კოდი მიკრო: ბიტში

ნაბიჯი 8: სერიული ურთიერთობა P5.js– თან

P5.js– თან სერიული კომუნიკაციისთვის, ჩვენ გვჭირდება დამატებითი ინსტრუმენტი. იმისათვის, რომ გაიგოთ მეტი რა ხდება სერიული კომუნიკაციის კულისებში, გირჩევთ წაიკითხოთ ეს სტატია.

1. ჩამოტვირთეთ p5.js აპის ვერსია ამ ბმულიდან. მე მაქვს Alpha 6 ვერსია, მაგრამ ნებისმიერი იმუშავებს.
2. გამოიყენეთ ეს p5.js შაბლონი სერიული კომუნიკაციისთვის. მის დასაყენებლად ჩადეთ თქვენი სწორი სერიული პორტის სახელი portName ხაზზე 12. ეს არის სახელი, რომელიც ჩვენ გავარკვიეთ მე –2 ნაბიჯში.
3. შეაერთეთ თქვენი მიკრო: ბიტი თქვენს კომპიუტერს
4. გახსენით p5.js სერიული აპლიკაცია.
5. შეარჩიეთ თქვენი პორტი პორტების სიიდან და სხვა არაფერი გააკეთოთ. არც კი დააჭიროთ გახსნას! უბრალოდ შეარჩიეთ თქვენი პორტი თქვენი სიიდან.
6. დააჭირეთ გაშვებას p5.js სერიულ შაბლონში. თქვენ უნდა შეგეძლოთ მისი გახსნა და ის წაგიკითხავთ ნულოვან მნიშვნელობებს, რადგან ჩვენ ჯერ არ დავწერეთ კოდი ჩვენი სერიული გამომუშავების გასაანალიზებლად.

ახლა ჩვენ შეგვიძლია სერიულად ვუკავშირდეთ ჩვენი Micro: bit– დან p5.js– ს!

ნაბიჯი 9: P5.js კოდი

ახლა ჩვენ გადავალთ p5.js კოდში. აქ ჩვენ ვკითხულობთ სერიულ გამომავალ მნიშვნელობებს და ვიყენებთ მათ ხელოვნების შესაქმნელად.

1. როგორც წინა ეტაპზე აღვნიშნე, დარწმუნდით, რომ portName ხაზზე 12 არის თქვენი კომპიუტერის პორტის კონკრეტული სახელი.
2. Setup () ფუნქციაში, 32-33 სტრიქონზე, მე დავამატე მარცხენა და მარჯვენა ბუფერი createGraphics– ით, ეს გავაკეთე ტილო გამოსაყოფად ისე, რომ ერთი ნაწილი ხატვისთვის იყოს გამოყენებული, ხოლო მეორე ნაწილს შეეძლო მიმართულებების ჩვენება და რომელი გრაფიკის ჩვენება. თქვენ უყურებთ ან გადახვევთ.
3. ხატვის () ფუნქცია იძახებს ფუნქციებს, რომლებიც მე შევქმენი, რათა ცალკე შევქმნა 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 მე დავაყენე აღწერა შერჩეული ფორმისთვის.

10. ხაზები 478-498 არის serialEvent () ფუნქცია. აქ ჩვენ ვიღებთ სერიულ მონაცემებს.

    • 485-486 სტრიქონებზე მე დავაყენე პროლი და პპიჩი (წინა როლი და მოედანი) წინა რულონისა და მოედნის მნიშვნელობებზე.
    • 487 ხაზზე მე გავყავი მონაცემები ",". მე ამას იმიტომ ვაკეთებ, რომ დავწერე მონაცემები მძიმით გამოსაყოფად. თქვენ აქ დააყენებთ რასაც თქვენ გამოყოფთ თქვენს ცვლადებს. ეს ცვლადები მოთავსებულია რიცხვების მასივში.
    • შემდეგ 488-496 სტრიქონებში ვაყენებ ცვლადებს მასივის შესაბამის ელემენტზე და ვთარგმნი მათ სტრიქონიდან რიცხვზე. ამ ცვლადებს ვიყენებ drawLeftBuffer () ფუნქციის განმავლობაში გრაფიკის გასაკონტროლებლად.

ეს საკმაოდ აჯამებს კოდს და ამთავრებს პროექტს! ახლა ჩვენ ვხედავთ, რომ ხელთათმანი მუშაობს მოქმედებაში.

ნაბიჯი 10: საბოლოო პროდუქტი

აქ არის რამოდენიმე სურათი მზა ხელთათმანიდან, ასევე მისი შექმნილი ნამუშევრები! უყურეთ დემო ვიდეოს, რომ ნახოთ ის მოქმედებაში!