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

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

ระบบควบคุมเกม Arduino โดยใช้ Arduino และไลบรารี p5.js แนวคิดนี้คือการสร้างโครงการ Arduino ที่จำลองและขยายได้ง่าย การเชื่อมต่อคอนโทรลเลอร์ได้รับการออกแบบเพื่อใช้เซ็นเซอร์และอินพุตต่างๆ มากมายที่สามารถสับเปลี่ยนได้ขึ้นอยู่กับคอนโทรลเลอร์แต่ละตัว

โปรเจ็กต์นี้ยังได้รับการออกแบบเพื่อใช้ไลบรารี p5.js JavaScript ร่วมกับไลบรารี p5.play ที่ออกแบบมาสำหรับ p5.js ไลบรารีเหล่านี้ช่วยให้เราสามารถตั้งโปรแกรมเกมของเราได้อย่างง่ายดาย เว็บไซต์ p5.play มีบทช่วยสอนและตัวอย่างมากมายสำหรับผู้ใช้ในการสร้างเกม โครงการนี้อนุญาตให้ผู้ใช้ฝึกทักษะการพัฒนาฮาร์ดแวร์และซอฟต์แวร์ของตน

ขั้นตอนที่ 1: สิ่งที่คุณต้องการ

เครื่องมือ:

• หัวแร้ง
• ประสาน
• เครื่องปอกสายไฟ
• เครื่องตัดด้านข้าง
• คีม

ฮาร์ดแวร์:

• บอร์ดที่เข้ากันได้กับ Arduino (ฉันใช้ Sparkfun Redboard เช่นเดียวกับ Arduino Uno และ Leonardo)

• คณะกรรมการประสิทธิภาพ:

  • 8 ซม. x 6 ซม. บอร์ด perf สีเขียว
  • Aduino Uno โล่ perf board

• เซนเซอร์ต่างๆ

  • จอยสติ๊ก
  • ปุ่มต่างๆ (พร้อมตัวต้านทาน 10k ohms เพื่อใช้งานกับพวกมัน)
  • โพเทนชิโอมิเตอร์
  • เซนเซอร์แบบยืดหยุ่น
  • เพรสเชอร์เซนเซอร์
  • ฯลฯ…

• ลวด:

  • สายเดี่ยว (ฉันใช้ 26 AWG Solid)
  • ลวดริบบอนและคีมย้ำ
• แบ่งส่วนหัว (อย่างน้อย 20 รายการ)

• ฮาร์ดแวร์เสริม (คุณสามารถใช้กระดาษแข็งและผูก hotglue/zip แทน):

  • เขียงหั่นขนมและสายจัมเปอร์สำหรับการสร้างต้นแบบ
  • เปลือกพิมพ์ 3 มิติ
  • ตัวยึดฮาร์ดแวร์ (ฉันใช้สกรู M2.5)

ซอฟต์แวร์:

• Arduino IDE

• ห้องสมุด p5.js

  ห้องสมุด P5.play ด้วย

• p5.serialcontrol
• Node.js

ขั้นตอนที่ 2: การสร้าง: Console Hub, การตั้งค่า Shield

ประสานส่วนหัวเข้ากับบอร์ด Arduino Uno shield perf

• ฉันเริ่มต้นด้วยส่วนหัวของโล่ (กำลัง, อนาล็อกและดิจิตอล)
• ถัดไปคือหมุดส่วนหัว 2x5 คุณสามารถใช้ส่วนหัว 2x5 หรือแบ่งส่วนหัวเพียง 2 แถวจาก 5 ส่วนหัว ฉันเรียงกระดาษเหล่านี้ด้วย A3 และ A4 ในแนวตั้ง และเว้นช่องว่างไว้ 2 ช่องระหว่างพวกเขา

ขั้นตอนที่ 3: การสร้าง: Console Hub, Wiring the Shield

ต่อไป เราต้องการกำหนดเส้นทางสายไฟของเราบนเกราะ การเดินสายไฟที่ด้านบนง่ายกว่า แต่ถ้าคุณต้องการรูปลักษณ์ที่สะอาดขึ้น คุณสามารถเรียกใช้สายไฟที่ด้านล่างได้

คุณต้องการให้ความสนใจกับแผนผัง (แผนผัง Eagle สามารถดาวน์โหลดได้) เมื่อกำหนดเส้นทางสายเหล่านี้ คุณยังสามารถดูคู่มือสีเพื่อช่วยเหลือคุณได้

แนวคิดของการออกแบบโล่นี้คืออนุญาตให้มีอินพุตแบบอะนาล็อก 3 ช่องและอินพุตดิจิตอล 5 ช่องจากคอนโทรลเลอร์แต่ละตัว สิ่งนี้ใช้ประโยชน์จากอินพุตแบบอะนาล็อกทั้งหมดบน Arduino Uno อย่างเต็มที่รวมถึงสายที่เหลืออยู่บนสายริบบิ้นของเรา

ขั้นตอนที่ 4: การสร้าง: ตัวควบคุม การตั้งค่าชิ้นส่วนของคุณ

ขั้นตอนแรกในการสร้างตัวควบคุมของคุณคือการวางแผนว่าจะใช้เซ็นเซอร์ใด ในตัวอย่างของฉัน ฉันมีตัวควบคุมมาตรฐานที่สวยงามพร้อมจอยสติ๊กและปุ่มไม่กี่ปุ่ม ฉันยังมีตัวควบคุมที่มีโพเทนชิโอมิเตอร์ตัวเลื่อนสองตัว

หากคุณต้องการทำซ้ำ คุณสามารถดูรูปภาพของฉันสำหรับการจัดวางได้

ขั้นตอนต่อไปคือการประสานสายริบบิ้นของคุณเข้ากับบอร์ดที่สมบูรณ์แบบ

1. ปอกและพันสายแพ
2. บัดกรีสายแพไปที่กึ่งกลางด้านบนของบอร์ดที่สมบูรณ์แบบของคุณ

ขั้นตอนต่อไปคือการกำหนดเส้นทางสายไฟของคุณ ฉันเริ่มต้นด้วยการเดินสายไฟ (5V/สายสีแดง) และกราวด์ (สายสีน้ำตาล) ไปที่เซ็นเซอร์ก่อน จากนั้นฉันก็ต่อสายอินพุตแบบอะนาล็อก ฉันพบว่ามันง่ายที่จะใช้สายสีส้ม (Analog A0 หรือ A3) สำหรับการเคลื่อนไหวในแนวนอนและสายสีเหลือง (Analog A1 หรือ A4) สำหรับการเคลื่อนไหวในแนวตั้ง

เพื่อให้ทุกอย่างสอดคล้องกัน ฉันจึงต่อสายปุ่มกดเล็กๆ ให้เป็นสีม่วงบนตัวควบคุมทั้งหมดของฉัน สิ่งนี้มีประโยชน์สำหรับสิ่งต่าง ๆ เช่นการปิดพอร์ตอนุกรม (ฉันจะพูดถึงในภายหลัง) รวมถึงเมนูหรือตัวเลือกต่างๆ

ฉันได้อัปโหลดแผนผังอย่างรวดเร็วของตัวควบคุมจอยสติ๊กของฉันหากคุณต้องการดูสิ่งนี้ จากไดอะแกรมพินเอาต์ของเรา คุณจะเห็นความเป็นไปได้ของการเชื่อมต่อคอนโทรลเลอร์แต่ละตัว (อินพุตแบบอะนาล็อก 3 ช่องและดิจิตอล 5 ช่อง)

ขั้นตอนที่ 5: ตัวเลือก: เปลือกหุ้ม

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

คุณสามารถค้นหาโมเดล 3 มิติของฉันที่แนบมากับขั้นตอนนี้ ฉันได้สร้างกล่องหุ้มสำหรับฮับสำหรับทั้ง Arduino Uno/Leonardo และ Sparkfun RedBoard (บอร์ดนี้กว้างกว่าเล็กน้อยและใช้ mini USB)

สำหรับคอนโทรลเลอร์ คุณสามารถติดสิ่งเหล่านี้ด้วยสกรู M2.5 ฉันเก็บน็อตไว้ที่ด้านข้างของ PCB และใช้แหวนรองและสกรูที่ด้านล่าง

ฉันได้รวมโมเดล 3 มิติสำหรับตัวเลื่อนลูกบิดสำหรับโพเทนชิโอมิเตอร์ที่ฉันใช้ด้วย

คุณสามารถค้นหาไฟล์ 3D ทั้งหมดบน GitHub

ขั้นตอนที่ 6: การเขียนโปรแกรม: Arduino

เริ่มต้นด้วยการตั้งค่าภาพร่างอย่างง่ายเพื่อทดสอบ ฉันแนะนำให้ใช้บทช่วยสอนที่สร้างโดย ITP ที่ NYU ที่นี่ ในการทำบทช่วยสอนนี้ คุณจะต้องติดตั้ง p5.serialcontroll และ node.js ในบทช่วยสอนนี้ คุณจะได้เรียนรู้เกี่ยวกับการตั้งค่า Arduino เพื่อส่งข้อมูลอนุกรมที่ใช้งานได้โดยไลบรารีจาวาสคริปต์ p5.js ของเรา คุณสามารถใช้ฮับและตัวควบคุมที่เราสร้างขึ้นในขั้นตอนก่อนหน้าเพื่อทำสิ่งนี้ หรือคุณสามารถทำซ้ำวงจรที่แสดงในบทช่วยสอน บทช่วยสอนนี้ใช้พินอินพุตแบบอะนาล็อก A0 บน Arduino Uno ซึ่งจับคู่กับสายสีส้มของคอนโทรลเลอร์ตัวแรกของคุณ

กวดวิชาถัดไปที่คุณต้องการติดตามสามารถพบได้ที่นี่ บทช่วยสอนนี้จะแนะนำคุณตลอดการตั้งค่าอินพุตหลายรายการและใช้งานใน p5.js ในบทช่วยสอน ใช้อินพุตแบบอะนาล็อก A0 และ A1 สิ่งเหล่านี้จะสอดคล้องกับสายสีส้มและสีเหลืองบนคอนโทรลเลอร์ 1 ของระบบของเรา

เมื่อคุณผ่านบทช่วยสอนข้างต้นแล้ว เราสามารถตั้งโปรแกรม Arduino ได้ รหัสที่เราต้องการใช้อยู่ด้านล่าง:

//คอนโทรลเลอร์ 1const int dig2 = 2; //สีน้ำเงิน const int dig3 = 3; //สีม่วง const int dig4 = 4; //grey const int dig5 = 5; // สีขาว const int dig6 = 6; //black // ตัวควบคุม 2 const int dig7 = 7; // สีน้ำเงิน const int dig8 = 8; //สีม่วง const int dig9 = 9; //grey const int dig10 = 10; // สีขาว const int dig11 = 11; //สีดำ

การตั้งค่าเป็นโมฆะ () {

Serial.begin(9600); ในขณะที่ (Serial.available () <= 0) { Serial.println ("สวัสดี"); // ส่งข้อความเริ่มต้นล่าช้า (300); // รอ 1/3 วินาที } pinMode (dig2, INPUT); โหมดพิน (dig3, INPUT); โหมดพิน (dig4, INPUT); โหมดพิน (dig5, INPUT); โหมดพิน (dig6, INPUT); โหมดพิน (dig7, INPUT); โหมดพิน (dig8, INPUT); โหมดพิน (dig9, INPUT); โหมดพิน (dig10, INPUT); โหมดพิน (dig11, INPUT); }

วงเป็นโมฆะ () {

if (Serial.available () > 0) { // อ่านไบต์ที่เข้ามา: int inByte = Serial.read (); // อ่านเซ็นเซอร์:

//ตัวควบคุมอนาล็อก 1

int analog0 = analogRead (A0); int analog1 = analogRead (A1); int analog2 = analogRead (A2); //คอนโทรลเลอร์ ANALOG 2 int analog3 = analogRead (A3); int analog4 = analogRead (A4); int analog5 = analogRead (A5); //ตัวควบคุมดิจิตอล 1 int digital2 = digitalRead (dig2); int digital3 = digitalRead (dig3); int digital4 = digitalRead (dig4);

int digital5 = digitalRead (dig5);

int digital6 = digitalRead (dig6); //DIGITAL Controller 2 int digital7 = digitalRead (dig7); int digital8 = digitalRead (dig8); int digital9 = digitalRead (dig9); int digital10 = digitalRead (dig10); int digital11 = digitalRead (dig11); // พิมพ์ผลลัพธ์: Serial.print(analog0); //[0] Serial.print(", "); Serial.print(แอนะล็อก1); //[1] Serial.print(", "); Serial.print(แอนะล็อก2); //[2] Serial.print(", "); // เริ่มข้อมูลคอนโทรลเลอร์ 2 Serial.print (analog3); //[3] Serial.print(", "); Serial.print(analog4); //[4] Serial.print(", "); Serial.print(analog5); //[5] Serial.print(", "); Serial.print(ดิจิตอล2); //[6] Serial.print(", "); Serial.print(ดิจิตอล3); //[7] Serial.print(", "); Serial.print(ดิจิตอล4); //[8] Serial.print(", "); Serial.print(ดิจิตอล5); //[9] Serial.print(", "); Serial.print(digital6); //[10] Serial.print(", "); // เริ่มคอนโทรลเลอร์ 2 ข้อมูล Serial.print (digital7); //[11] Serial.print(", "); Serial.print(ดิจิตอล8); // [12] Serial.print(", "); Serial.print(ดิจิตอล9); //[13] Serial.print(", "); Serial.println (digital10); // [14] Serial.print(", "); Serial.println(ดิจิตอล11); //[15] } }

รหัสนี้จะส่งข้อมูลอนุกรมจากตัวควบคุมทั้งสองของเราเป็นอาร์เรย์ 16 หมายเลข 6 ตัวเลขแรกของตัวเลขเหล่านี้เป็นอินพุตแบบอะนาล็อกของเรา (ตั้งแต่ 0-1023) และค่าที่เหลืออีก 10 ค่าคือค่าดิจิตอลของเรา (0 หรือ 1)

เมื่อโค้ดของเราถูกอัปโหลด เราสามารถทดสอบสิ่งนี้ได้โดยเปิดการตรวจสอบซีเรียลและพิมพ์ค่าลงในมอนิเตอร์ซีเรียลของเรา เช่นเดียวกับที่เราทำในบทช่วยสอนที่ 2 จาก ITP เราควรได้รับสตริงของค่าของเราโดยคั่นด้วยเครื่องหมายจุลภาค

ขั้นตอนที่ 7: การเขียนโปรแกรม: HTML

เมื่อเราตั้งค่า Arduino และใช้งานได้แล้ว เราก็สามารถเริ่มเขียนโปรแกรมเว็บของเราได้ รหัส HTML นั้นง่ายมาก

ร่างกาย {ช่องว่างภายใน: 0; ระยะขอบ: 0;}

โค้ด html เพียงเชื่อมโยงไฟล์จาวาสคริปต์ของเราเข้าด้วยกัน โค้ดส่วนใหญ่ของเราจะเกิดขึ้นจริงในไฟล์.js แบบร่าง

ขั้นตอนที่ 8: การเขียนโปรแกรม: P5.js และ Javascript

เมื่อเราตั้งค่า HTML แล้ว เราก็สามารถทำงานกับ JavaScript ได้ หากคุณยังไม่ได้ดาวน์โหลด คุณควรดาวน์โหลด p5.js และ p5.play และเพิ่มสิ่งเหล่านี้ลงในโฟลเดอร์ไลบรารีของคุณในไดเร็กทอรีสำหรับเว็บไซต์ของคุณ

• p5.js
• p5.play

ในขั้นตอนก่อนหน้านี้ เราตั้งค่าไฟล์ HTML เพื่อเรียกไลบรารี p5.js และ p5.play นอกจากนี้เรายังตั้งค่าให้ใช้ไฟล์ sketch.js ซึ่งเป็นที่ที่เราจะทำการเขียนโปรแกรมส่วนใหญ่ของเรา ด้านล่างเป็นรหัสสำหรับโครงกระดูกของเรา คุณสามารถหาได้ที่นี่

// Serial Variablesvar แบบอนุกรม; // ตัวแปรเพื่อเก็บอินสแตนซ์ของไลบรารีพอร์ตอนุกรม var portName = 'COM4'; // กรอกชื่อพอร์ตอนุกรมของคุณที่นี่ // ตัวแปรเกมทั่วโลก ---------------

//ฟังก์ชั่นการตั้งค่า ----------------------

การตั้งค่าฟังก์ชัน () { createCanvas (640, 480); อนุกรม = ใหม่ p5. SerialPort(); // สร้างอินสแตนซ์ใหม่ของไลบรารีพอร์ตอนุกรม serial.on('list', printList); // ตั้งค่าฟังก์ชันเรียกกลับสำหรับเหตุการณ์รายการพอร์ตอนุกรม serial.on ('เชื่อมต่อ', serverConnected); // โทรกลับสำหรับการเชื่อมต่อกับเซิร์ฟเวอร์ serial.on ('open', portOpen); // โทรกลับสำหรับการเปิดพอร์ต serial.on ('data', serialEvent); // โทรกลับเมื่อข้อมูลใหม่มาถึง serial.on ('ข้อผิดพลาด', serialError); // โทรกลับสำหรับข้อผิดพลาด serial.on ('ปิด', portClose); // โทรกลับสำหรับพอร์ตปิด serial.list(); // แสดงรายการพอร์ตอนุกรม serial.open(portName); // เปิดพอร์ตอนุกรม } // วาดฟังก์ชัน ----------------------- ฟังก์ชันวาด () { พื้นหลัง (0); // พื้นหลังสีดำ } // ตีความข้อมูลอนุกรมที่นี่ ---------- ฟังก์ชัน serialEvent () { // อ่านสตริงจากพอร์ตอนุกรม // จนกว่าคุณจะได้รับการขึ้นบรรทัดใหม่: var inString = serial readStringUntil('\r\n'); //ตรวจสอบเพื่อดูว่ามี ssetring อยู่ที่นั่นจริง ๆ: if (inString.length > 0) { if (inString !== 'hello') { // หากคุณได้รับสวัสดี ไม่ต้องสนใจ var sensors = split (inString, ', '); // แยกสตริงบนเครื่องหมายจุลภาค if (sensors.length > 16) { // ถ้ามีองค์ประกอบสิบหก (6 แอนะล็อก 10 ดิจิตอล) // ใช้ข้อมูลเซ็นเซอร์ที่นี่:

}

} serial.write('x'); // ส่งไบต์เพื่อขอข้อมูลอนุกรมเพิ่มเติม } } // รับรายการพอร์ต: function printList(portList) { // portList คืออาร์เรย์ของชื่อพอร์ตอนุกรมสำหรับ (var i = 0; i < portList.length; i++) { // แสดงรายการคอนโซล: print(i + " " + portList); } } ฟังก์ชั่น serverConnected () { พิมพ์ ('เชื่อมต่อกับเซิร์ฟเวอร์แล้ว'); } ฟังก์ชั่น portOpen () { พิมพ์ ('พอร์ตอนุกรมเปิดอยู่') } ฟังก์ชั่น serialError (ผิดพลาด) { พิมพ์ ('มีบางอย่างผิดปกติกับพอร์ตอนุกรม ' + ผิดพลาด); } ฟังก์ชัน portClose() { print('The serial port closed.'); } ฟังก์ชั่นปิดรหัส () { serial.close (ชื่อพอร์ต); คืนค่าเป็นโมฆะ; } window.onbeforeunload = closedCode;

เมื่อคุณมีโครงกระดูกที่บันทึกไว้ คุณสามารถใช้ค่าเหล่านี้ได้เหมือนกับที่ทำในบทช่วยสอน ITP สตริงของค่าที่เราส่งจาก Arduino ในขั้นตอนที่ 6 ถูกส่งเป็นอาร์เรย์ 16 ตัวเลข ด้านล่างนี้คือตำแหน่งที่เราแยกวิเคราะห์อาร์เรย์นี้

//ตีความข้อมูลซีเรียลที่นี่ ----------

ฟังก์ชัน serialEvent() { // อ่านสตริงจากพอร์ตอนุกรม // จนกว่าคุณจะได้รับการขึ้นบรรทัดใหม่: var inString = serial.readStringUntil('\r\n'); //ตรวจสอบเพื่อดูว่ามี ssetring อยู่ที่นั่นจริง ๆ: if (inString.length > 0) { if (inString !== 'hello') { // หากคุณได้รับสวัสดี ไม่ต้องสนใจ var sensors = split (inString, ', '); // แยกสตริงบนเครื่องหมายจุลภาค if (sensors.length > 16) { // if there are sixteen elements (6 analog, 10 digital) // Use sensor data here: } } serial.write('x'); // ส่งไบต์ขอข้อมูลอนุกรมเพิ่มเติม } }

ตอนนี้เราสามารถเรียกใช้โปรแกรมของเราเพื่อดูว่ามันใช้งานได้หรือไม่!

ขั้นตอนที่ 9: เรียกใช้โปรแกรมของคุณ

ตอนนี้เราสามารถเรียกใช้โปรแกรมของเราเพื่อดูว่ามันใช้งานได้หรือไม่ คุณสามารถสร้างเกมของคุณเองโดยใช้ไฟล์ skeleton.js ในไฟล์ก่อนหน้าของเรา หรือคุณจะใช้เกมง่ายๆ ของ Pipe ที่นี่

เช่นเดียวกับ ITP Lab ในการรันโปรแกรมของเรา เราจะทำตามขั้นตอนด้านล่าง

• เสียบ Arduino กับคอนโทรลเลอร์ที่คุณวางแผนจะใช้
• เปิด p5.serialcontrol
• เปลี่ยนพอร์ตของสเก็ตช์ p5 เป็นพอร์ตที่คุณใช้อยู่ (หากคุณใช้สเกเลตัน นี่คือบรรทัดที่ 3)
• เปิดไฟล์ HTML ที่เชื่อมโยงไปยังสเก็ตช์ p5 ของคุณ

หากคุณมีสื่อภายนอก เช่น รูปภาพหรือแบบอักษรที่ดาวน์โหลด คุณจะต้องเรียกใช้สิ่งนี้บนเซิร์ฟเวอร์ คุณสามารถเรียกใช้เซิร์ฟเวอร์หลามในพื้นที่อย่างง่ายได้หากต้องการ

ขั้นตอนที่ 10: ก้าวต่อไป

หากต้องการไปต่อและพัฒนาเกมเพิ่มเติมสำหรับสิ่งนี้ คุณสามารถทำตามตัวอย่างต่างๆ จาก p5.play ได้ที่นี่ ด้านล่างนี้เป็นตัวอย่างของเกมที่ซับซ้อนมากขึ้นที่ฉันสร้างขึ้น มันเป็นเกมยิงรถถัง 1 ต่อ 1 คุณสามารถค้นหาแหล่งข้อมูลทั้งหมดได้จาก GitHub