Art Glove: 10 ขั้นตอน (พร้อมรูปภาพ)

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:02

Art Glove เป็นถุงมือที่สวมใส่ได้ซึ่งมีเซ็นเซอร์ประเภทต่างๆ เพื่อควบคุมกราฟิกอาร์ตผ่าน Micro:bit และ p5.js นิ้วจะใช้เซ็นเซอร์การโค้งงอที่ควบคุมค่า r, g, b และมาตรความเร่งในตัวควบคุม Micro:bit x, พิกัด y สำหรับกราฟิก ฉันสร้างโครงการนี้เป็นโครงการภาคเรียนสำหรับชั้นเรียนเทคโนโลยีสวมใส่ของฉันในฐานะผู้อาวุโสในโปรแกรมเทคโนโลยี ศิลปะ และสื่อที่ CU Boulder

เสบียง:

• ถุงมือทำสวน
• BBC Micro:Bit
• เซ็นเซอร์แบบยืดหยุ่น 3-4 ตัว
• ตัวต้านทาน 10K โอห์ม
• ลวดเชื่อม (แดง & ดำ)
• กรรไกรตัดลวด
• เขียงหั่นขนม
• คลิปจระเข้ (สองด้าน & ด้านเดียว)
• ประสาน
• หัวแร้ง
• เข็ม
• เกลียว
• กระดาษแว็กซ์
• เทป
• กรรไกร
• ปากกาและดินสอ

ขั้นตอนที่ 1: โค้งงอแทร็คเซนเซอร์

อันดับแรก เราจะเน้นที่การสร้างฮาร์ดแวร์ วิธีนี้เมื่อเราเขียนโค้ด เราจะมีส่วนประกอบของถุงมือจริงเพื่อใช้และทดสอบ

1. ในการเริ่มต้น เราจะสร้างรอยเท้าบนนิ้วที่จะเก็บเซ็นเซอร์การโค้งงอเข้าที่ การมีรางเหล่านี้ช่วยให้เซ็นเซอร์การโค้งงอสามารถเคลื่อนที่ไปมาได้เล็กน้อยในขณะที่ยังรักษาให้แน่นกับนิ้วเพื่องอ ขั้นแรก พลิกถุงมือของคุณออกด้านใน
2. ใช้เซ็นเซอร์โค้งงอแล้ววางไว้ที่สันกลางของนิ้ว ใช้ปากกาวาดโครงร่างเซ็นเซอร์การโค้งงอ
3. สอดด้ายของคุณผ่านเข็มของคุณ ให้ตัวเองชิ้นใจกว้าง ผูกปมที่ปลายด้าย
4. เริ่มต้นที่ด้านบนและบนเส้น เพียงเป่าส่วนโค้งของเซ็นเซอร์การโค้งงอ สอดเข็มผ่านถุงมือเข้าไปด้านใน แล้วดันกลับเข้าไปในเส้นขนาน ดึงเข็มไปจนสุดเพื่อให้ปมอยู่บนเส้นที่คุณวาด
5. ดึงให้แน่น อีกด้านอีก 2-3 นอต เพื่อให้แน่ใจว่าด้ายจะไม่หลุดออกมา ตรวจสอบให้แน่ใจว่าแน่นเพื่อให้เซ็นเซอร์โค้งงอแน่นกับนิ้วของคุณ
6. ตัดด้ายทิ้งไว้สองสามซม. ปลายด้ายเพื่อไม่ให้ปมหลุด
7. ทำซ้ำขั้นตอนที่ 2-6 สำหรับนิ้วทั้งหมดที่คุณติดเซ็นเซอร์แบบยืดหยุ่นจนกว่าจะดูเหมือนภาพที่ 3 จนถึงภาพสุดท้าย
8. พลิกถุงมือกลับด้านที่ถูกต้อง เลื่อนเซ็นเซอร์โค้งของคุณไปตามรางเพื่อให้แน่ใจว่าพอดีกับมือของคุณ

ขั้นตอนที่ 2: การใช้การสื่อสารแบบอนุกรมกับ Micro:bit

หากต้องการดูผลลัพธ์จากเซ็นเซอร์ของเรา เราจะใช้การสื่อสารแบบอนุกรม คุณจะเห็นวิธีตั้งค่าโค้ดใน 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. โค้งงอ 2-3 ครั้งเพื่อดูค่าที่อ่านได้และตรวจดูให้แน่ใจว่าทำงานได้อย่างถูกต้อง

ในโค้ด บรรทัดสุดท้าย "serial.writeLine" คือตำแหน่งที่เรากำลังเขียนไปยังเอาต์พุตแบบอนุกรมของเรา คุณสามารถจัดรูปแบบผลลัพธ์นี้ได้ตามที่คุณต้องการ ฉันแยกทุกตัวแปรด้วยเครื่องหมายจุลภาค แล้วแยกออกเป็นลูกน้ำในภายหลัง แต่ส่วนนี้ขึ้นอยู่กับคุณ

(หมายเหตุ: หลังจากที่ฉันทำตามขั้นตอนนี้แล้ว ฉันพบว่าเซ็นเซอร์การโค้งงอตัวใดตัวหนึ่งของฉันมีรอยหยักในสีนำไฟฟ้า ดังนั้นจึงอ่านได้ไม่ดี นั่นเป็นสาเหตุที่รูปภาพบางภาพแสดงให้ฉันเห็นการทำงานกับเซ็นเซอร์ 4 ตัว หลังจากพบสิ่งนี้ ฉันไป เหลือเซ็นเซอร์เพียง 3 ตัวบนตัวชี้ นิ้วกลาง และนิ้วนาง นอกจากนี้ ฉันยังพบว่าเซ็นเซอร์การโค้งงอของฉันมีช่วงการอ่านที่กว้างที่สุดในการดัดโค้งในลักษณะ "ตรงกันข้าม" ซึ่งเป็นเหตุผลที่ฉันสวมมันลงบนถุงมือโดยให้สีต้านทานการคว่ำลง)

ขั้นตอนที่ 4: การทดสอบมาตรความเร่งและเซ็นเซอร์วัดแสง

ในขั้นตอนนี้ ฉันยังเลือกทดสอบมาตรความเร่งและเซ็นเซอร์แสงบน Micro:bit

1. เชื่อมต่อ Micro:bit เข้ากับคอมพิวเตอร์
2. ดาวน์โหลดรหัสนี้
3. จากนั้นฉันก็ทดสอบเซ็นเซอร์ความเร่ง แสง และเซ็นเซอร์โค้งงอพร้อมกับรหัสนี้

(หมายเหตุ: ณ จุดนี้ ฉันคิดว่าคุณไม่สามารถใช้หมุดและเซ็นเซอร์วัดแสงพร้อมกันได้ ดังนั้นฉันจึงไม่ได้ใช้เซ็นเซอร์วัดแสงในขั้นสุดท้าย แต่ฉันต้องการให้คุณดูวิธีการอ่าน เซ็นเซอร์วัดแสงถ้าคุณต้องการ!)

ขั้นตอนที่ 5: บัดกรีเซ็นเซอร์โค้ง

ตอนนี้เราจะเริ่มบัดกรีส่วนประกอบของเราด้วยกัน! นี่เป็นส่วนที่น่าตื่นเต้น แต่สิ่งสำคัญคือต้องดำเนินการอย่างช้าๆ และตรวจสอบว่าทุกอย่างยังทำงานอยู่เพื่อที่คุณจะได้ไปไม่ถึงจุดสิ้นสุด มีบางอย่างที่ไม่ทำงาน และไม่แน่ใจว่ามันผิดพลาดตรงไหน! ฉันขอแนะนำให้ใช้คลิปจระเข้สองด้านของคุณที่นี่เพื่อตรวจสอบว่าเซ็นเซอร์แต่ละตัวยังทำงานอยู่เมื่อสายไฟและตัวต้านทานถูกบัดกรีเข้าด้วยกัน

1. นำเซ็นเซอร์วัดความโค้งงอและเทปติดไว้ หรือวางของหนักทับไว้เพื่อยึดเข้าที่
2. นำตัวต้านทาน 10K Ohm ของคุณและตัดส่วนปลายส่วนใหญ่ออก เพื่อให้สายวัดยาวเท่ากับตะกั่วบนเซ็นเซอร์การโค้งงอ
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. วาง Micro:bit ในตำแหน่งที่คุณต้องการวางบนมือ ทำเครื่องหมายเป็นพื้นและสายไฟนั่ง
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 (หรือ colorLow ไปที่ colorHigh หากฉันไม่ได้ทำแบบเต็มช่วง)

   • ฟังก์ชันแผนที่ในตัวจาก Makecode ไม่ได้ให้แผนที่ที่ยอดเยี่ยมแก่ฉัน เนื่องจากช่วงที่ฉันได้รับจากเซ็นเซอร์มีจำกัด ดังนั้นฉันจึงสร้างฟังก์ชันการทำแผนที่ของตัวเอง
   • นี่คือวิธีการทำงาน ช่วงอินพุตของแต่ละนิ้วจะถูกกำหนดโดยมัน (ค่าสูงสุด - เป็นค่าต่ำสุด) ช่วงสี ซึ่งก็คือ (ค่าสีสูงสุด - ค่าสีต่ำสุด) หารด้วยแต่ละช่วงนิ้ว ตัวเลขนี้ปัดเศษจำนวนเต็มต่ำสุดและเป็นผลหาร
   • (ค่าเซ็นเซอร์จริง - ค่าเซ็นเซอร์ต่ำสุด) ให้ค่าภายในช่วง การคูณสิ่งนี้ด้วยผลหารที่เราพบด้านบนและการเพิ่มค่าสีที่ต่ำที่สุดจะทำให้คุณได้ค่าที่แมปจากเซ็นเซอร์ไปยังสีภายในช่วงสี
8. บรรทัดที่ 109 กำลังอ่านค่าระดับเสียง (ขึ้นและลง)
9. เส้น 110-115 กำลังสอบเทียบค่าสูงและต่ำสำหรับค่านี้
10. บรรทัดที่ 116 กำลังอ่านค่าม้วน (ซ้ายและขวา)
11. บรรทัดที่ 117-122 กำลังสอบเทียบค่าสูงและต่ำสำหรับค่านี้
12. บรรทัดที่ 123-126 จะจับคู่ค่า pitch และ roll กับขนาดผ้าใบและปัดเศษให้เป็นจำนวนเต็ม
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 คุณควรจะเห็นมันเปิดอยู่ และมันจะอ่านค่าว่างให้คุณ เนื่องจากเรายังไม่ได้เขียนโค้ดเพื่อแยกวิเคราะห์เอาต์พุตอนุกรมของเรา

ตอนนี้เราสามารถสื่อสารแบบอนุกรมจาก Micro:bit ถึง p5.js ได้แล้ว!

ขั้นตอนที่ 9: รหัส P5.js

ตอนนี้เราจะข้ามไปที่รหัส p5.js นี่คือที่ที่เราอ่านค่าเอาต์พุตแบบอนุกรมและใช้เพื่อสร้างงานศิลปะ

1. ดังที่ได้กล่าวไว้ในขั้นตอนก่อนหน้านี้ ตรวจสอบให้แน่ใจว่า portName ในบรรทัดที่ 12 เป็นชื่อพอร์ตคอมพิวเตอร์เฉพาะของคุณ
2. ในฟังก์ชัน setup() ในบรรทัดที่ 32-33 ฉันได้เพิ่มด้านซ้ายและ rightBuffer ด้วย 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: ผลิตภัณฑ์ขั้นสุดท้าย

นี่คือภาพถุงมือที่ทำเสร็จแล้วและงานศิลปะบางส่วนที่สร้างขึ้น! ชมวิดีโอสาธิตการใช้งานจริง!