Arduino-controllers: 10 stappen (met afbeeldingen)

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:19

Een Arduino-spelbesturingssysteem dat Arduino en de p5.js-bibliotheek gebruikt. Het idee hiervan is om een Arduino-project te creëren dat gemakkelijk kan worden gerepliceerd en uitbreidbaar. De controlleraansluitingen zijn ontworpen om gebruik te maken van een groot aantal verschillende sensoren en ingangen die kunnen worden uitgewisseld, afhankelijk van elke controller.

Dit project is ook ontworpen om de p5.js JavaScript-bibliotheek te gebruiken, samen met de p5.play-bibliotheek die is ontworpen voor p5.js. Met deze bibliotheken kunnen we onze spellen gemakkelijk programmeren. De p5.play-website heeft een heleboel tutorials en voorbeelden voor gebruikers om er games voor te maken. Met dit project kunnen gebruikers hun vaardigheden op het gebied van hardware- en softwareontwikkeling oefenen.

Stap 1: Wat heb je nodig?

Gereedschap:

• Soldeerbout
• Soldeer
• Draadstrippers
• Zijsnijders
• Tang

Hardware:

• Arduino-compatibel bord (ik heb een Sparkfun Redboard gebruikt, evenals een Arduino Uno en Leonardo)

• Prestatiebord:

  • 8cm x 6cm groene geperforeerde planken
  • Aduino Uno schild perf board

• Diverse sensoren

  • Joysticks
  • Knoppen (met weerstanden, 10k ohm, om erbij te horen)
  • Potentiometers
  • Flex-sensoren
  • Druksensoren
  • Enzovoort…

• Draad:

  • Enkele draad (ik gebruikte 26 AWG Solid)
  • Lintdraad en plooien
• Break Away Headers (minstens 20 hiervan)

• Optionele hardware (u kunt in plaats daarvan karton en hotglue/ritssluitingen gebruiken):

  • Breadboard en startkabels voor prototyping
  • 3D-geprinte behuizingen
  • Hardwarebevestigingen (ik gebruikte M2.5-schroeven)

Software:

• Arduino IDE

• p5.js bibliotheek

  P5.play bibliotheek ook

• p5.serialcontrol
• Node.js

Stap 2: Bouwen: de consolehub, het schild instellen

Soldeer de headers op het Arduino Uno shield perf board.

• Ik ben begonnen met de shield-headers (stroom, analoog in en digitaal)
• De volgende zijn de 2x5 header-pinnen. U kunt 2x5 headers gebruiken, of slechts 2 rijen van 5 break-away headers. Ik heb deze verticaal uitgelijnd met A3 en A4 en liet 2 spaties ertussen.

Stap 3: Bouwen: de consolehub, bedrading van het schild

Vervolgens willen we onze draden op het schild leiden. Het is gemakkelijker om de draden aan de bovenkant te laten lopen, maar als je een schoner uiterlijk wilt, kun je ze aan de onderkant laten lopen.

U wilt bij het leggen van deze draden letten op het schema (het Eagle-schema is te downloaden). U kunt ook de kleurengids raadplegen om u hierbij te helpen.

Het idee van dit schildontwerp is om 3 analoge ingangen en 5 digitale ingangen van elke controller toe te staan. Dit maakt volledig gebruik van alle analoge ingangen op een Arduino Uno, evenals de resterende draden op onze lintkabel.

Stap 4: Bouwen: de controllers, uw onderdelen instellen

De eerste stap bij het bouwen van uw controller is om te plannen welke sensoren u wilt gebruiken. In mijn voorbeelden heb ik een vrij standaard controller met een joystick en een paar knoppen. Ik heb ook een controller met twee schuifpotentiometers.

Als je dit wilt repliceren, kun je mijn afbeeldingen bekijken voor plaatsing.

De volgende stap is om je lintkabel aan het perf-bord te solderen.

1. Strip en vertin de lintkabel
2. Soldeer de lintkabel naar het midden bovenaan je perf-bord.

De volgende stap is het routeren van uw draden. Ik begon door eerst de stroom (5V/rode draad) en de aarde (bruine draad) naar de sensoren te bedraden. Ik heb toen de analoge ingangen aangesloten. Ik vond het gemakkelijk om de oranje kabel (analoog A0 of A3) te gebruiken voor horizontale beweging en de gele kabel (analoog A1 of A4) voor verticale beweging.

Om de zaken consistent te houden, heb ik op al mijn controllers ook een kleine drukknop op paars aangesloten. Dit is handig voor zaken als het sluiten van de seriële poort (hier kom ik later op terug) en voor menu's of opties.

Ik heb een snel schema van mijn joystickcontroller geüpload als je dit wilt bekijken. Uit ons pin-out diagram kunt u de mogelijkheid van elke controlleraansluiting zien (3 analoge ingangen en 5 digitale).

Stap 5: Optioneel: Behuizingen

Deze stap is optioneel, maar als je toegang hebt tot een 3D-printer, ziet het resultaat van je project er wat verfijnder en afgewerkter uit. Zoals je in mijn prototypes kunt zien, heb ik een eenvoudig stuk karton gebruikt om te voorkomen dat de soldeerverbindingen aan de onderkant van de perf-platen in je vingers prikken.

U kunt mijn 3D-modellen bij deze stap vinden. Ik heb behuizingen gemaakt voor de hub voor zowel de Arduino Uno/Leonardo als de Sparkfun RedBoard (dit bord is iets breder en maakt gebruik van mini-USB).

Voor de controllers kun je deze bevestigen met M2.5 schroeven. Ik heb de moer aan de zijkant van de print gehouden en gebruik een ring en de schroef aan de onderkant.

Ik heb ook het 3D-model toegevoegd voor de schuifregelaars voor de potentiometers die ik heb gebruikt.

Je kunt alle 3D-bestanden vinden op GitHub.

Stap 6: Programmeren: Arduino

Laten we beginnen met het opzetten van een eenvoudige schets om te testen. Ik raad aan om de tutorial te gebruiken die is gemaakt door ITP op NYU die hier te vinden is. Om deze zelfstudie te doen, moet u p5.serialcontroll en node.js hebben geïnstalleerd. In deze zelfstudie maakt u kennis met het instellen van een Arduino om seriële gegevens te verzenden die bruikbaar zijn voor onze javascript-bibliotheek, p5.js. U kunt hiervoor de hub en controller gebruiken die we in de vorige stappen hebben gemaakt, of u kunt de circuits repliceren die in de zelfstudie zijn gedemonstreerd. Deze tutorial gebruikt de A0 analoge ingangspin op de Arduino Uno die is toegewezen aan de oranje draad van je eerste controller.

De volgende zelfstudie die u wilt volgen, vindt u hier. Deze zelfstudie begeleidt u bij het instellen van meerdere ingangen en het gebruik ervan in p5.js. In de tutorial worden de analoge ingangen A0 en A1 gebruikt. Deze komen overeen met de oranje en gele draden op controller 1 van ons systeem.

Nadat je de bovenstaande tutorials hebt doorlopen, kunnen we de Arduino programmeren. De code die we willen gebruiken staat hieronder:

//controller 1const int dig2 = 2; //blauw const int dig3 = 3; // paars const int dig4 = 4; // grijze const int dig5 = 5; //wit const int dig6 = 6; //zwart //controller 2 const int dig7 = 7; //blauw const int dig8 = 8; // paars const int dig9 = 9; // grijze const int dig10 = 10; //wit const int dig11 = 11; //zwart

ongeldige setup() {

Serieel.begin(9600); while (Serial.available() <= 0) { Serial.println("hallo"); // stuur een startbericht vertraging (300); // wacht 1/3 seconde} pinMode (dig2, INPUT); pinMode (dig3, INPUT); pinMode (dig4, INPUT); pinMode (dig5, INPUT); pinMode (dig6, INPUT); pinMode (dig7, INPUT); pinMode (dig8, INPUT); pinMode (dig9, INPUT); pinMode (dig10, INPUT); pinMode (dig11, INGANG); }

lege lus() {

if (Serial.available() > 0) { // lees de inkomende byte: int inByte = Serial.read(); // lees de sensor:

// ANALOGE regelaar 1

int analoog0 = analoog lezen (A0); int analoog1 = analoog lezen (A1); int analoog2 = analoog lezen (A2); // ANALOG Controller 2 int analog3 = analogRead (A3); int analoog4 = analoog lezen (A4); int analoog5 = analoog lezen (A5); // DIGITALE Controller 1 int digital2 = digitalRead (dig2); int digital3 = digitalRead(dig3); int digital4 = digitalRead(dig4);

int digital5 = digitalRead(dig5);

int digital6 = digitalRead(dig6); // DIGITALE Controller 2 int digital7 = digitalRead (dig7); int digital8 = digitalRead(dig8); int digital9 = digitalRead(dig9); int digital10 = digitalRead(dig10); int digital11 = digitalRead(dig11); // druk de resultaten af: Serial.print(analog0); //[0] Serieel.print(", "); Serieel.print(analoog1); //[1] Serieel.print(", "); Serial.print(analoog2); //[2] Serieel.print(", "); //Start Controller 2-gegevens Serial.print (analoog3); //[3] Serieel.print(", "); Serial.print(analoog4); //[4] Serieel.print(", "); Serial.print(analoog5); //[5] Serial.print(", "); Serieafdruk(digitaal2); //[6] Serie.print(", "); Serieafdruk(digitaal3); //[7] Serieel.print(", "); Serieafdruk(digitaal4); //[8] Serieel.print(", "); Serieafdruk(digitaal5); //[9] Serieel.print(", "); Serieafdruk(digitaal6); //[10] Serieel.print(", "); //Start controller 2-gegevens Serial.print (digital7); //[11] Serieel.print(", "); Serieafdruk(digitaal8); //[12] Serieel.print(", "); Serial.print(digitaal9); //[13] Serieel.print(", "); Serieel.println(digital10); //[14] Serieel.print(", "); Serieel.println(digital11); //[15] } }

Deze code stuurt de seriële data van onze beide controllers als een array van 16 nummers. De eerste 6 van deze nummers zijn onze analoge ingangen (variërend van 0-1023) en de overige 10 waarden zijn onze digitale waarden (0 of 1).

Zodra onze code is geüpload, kunnen we dit testen door de seriële monitor te openen en een waarde in onze seriële monitor te typen, zoals we deden in de 2e tutorial van ITP. We zouden een reeks van onze waarden moeten krijgen, gescheiden door komma's.

Stap 7: Programmeren: HTML

Zodra we onze Arduino hebben ingesteld en werkend, kunnen we beginnen met het programmeren van onze webspullen. De HTML-code is heel eenvoudig.

lichaam {vulling: 0; marge: 0;}

De html-code koppelt eenvoudigweg onze javascript-bestanden aan elkaar. De meeste van onze code zal daadwerkelijk plaatsvinden in ons schets.js-bestand.

Stap 8: Programmeren: P5.js en Javascript

Zodra we onze HTML hebben ingesteld, kunnen we aan ons JavaScript werken. Als je dat nog niet hebt gedaan, moet je nu zowel p5.js als p5.play downloaden en deze toevoegen aan je bibliothekenmap in de map voor je website.

• p5.js
• p5.play

In onze vorige stap hebben we ons HTML-bestand ingesteld om onze p5.js- en p5.play-bibliotheken aan te roepen. We hebben het ook ingesteld om ons sketch.js-bestand te gebruiken, waar we het grootste deel van onze programmering zullen doen. Hieronder staat de code voor ons skelet. Je kunt het ook hier vinden.

//Seriële variabelenvar seriële; // variabele om een exemplaar van de serialport-bibliotheek te bevatten var portName = 'COM4'; // vul hier uw seriële poortnaam in //Global Game Variables ---------------

// Setup-functie ----------------------

functie setup() { createCanvas(640, 480); serieel = nieuw p5. SerialPort(); // maak een nieuwe instantie van de serialport-bibliotheek serial.on('list', printList); // stel een callback-functie in voor de serialport-lijstgebeurtenis serial.on('connected', serverConnected); // terugbellen om verbinding te maken met de server serial.on('open', portOpen); // callback voor de poortopening serial.on('data', serialEvent); // terugbellen voor wanneer nieuwe gegevens binnenkomen serial.on('error', serialError); // callback voor fouten serial.on('close', portClose); // callback voor de poortafsluiting serial.list(); // lijst de seriële poorten serial.open(portName); // open een seriële poort} //Draw-functie ----------------------- functie draw() { background(0); // zwarte achtergrond } // Interpreteer seriële gegevens hier ---------- functie serialEvent() { // lees een string van de seriële poort // totdat je een regelterugloop en een nieuwe regel krijgt: var inString = serieel. readStringUntil('\r\n'); // controleer of er daadwerkelijk een ssetring is: if (inString.length > 0) { if (inString !== 'hello') { // als je hallo krijgt, negeer het dan var sensors = split(inString, ', '); // splits de string op de komma's if (sensors.length> 16) { // als er zestien elementen zijn (6 analoog, 10 digitaal) // Gebruik hier sensorgegevens:

}

} serieel.schrijven('x'); // stuur een byte om meer seriële gegevens aan te vragen}} // haal de lijst met poorten op: function printList(portList) {// portList is een array van seriële poortnamen voor (var i = 0; i <portList.length; i++) { // Toon de lijst van de console: print(i + " " + portList); } } function serverConnected() { print('verbonden met server.'); } function portOpen() { print('de seriële poort geopend.') } function serialError(err) { print('Er is iets misgegaan met de seriële poort. ' + err); } function portClose() { print('De seriële poort is gesloten.'); } functie closingCode(){ serial.close(portName); nul teruggeven; } window.onbeforeunload = closingCode;

Zodra je het skelet hebt opgeslagen. U kunt deze waarden op dezelfde manier gebruiken als in de ITP-zelfstudie. De reeks waarden die we in stap 6 vanuit onze Arduino hebben verzonden, worden verzonden als een reeks van 16 nummers. Hieronder is waar we deze array ontleden.

// Interpreteer seriële gegevens hier ----------

function serialEvent() { // lees een string van de seriële poort // totdat je een carriage return en newline krijgt: var inString = serial.readStringUntil('\r\n'); // controleer of er daadwerkelijk een ssetring is: if (inString.length > 0) { if (inString !== 'hello') { // als je hallo krijgt, negeer het dan var sensors = split(inString, ', '); // splits de string op de komma's if (sensors.length > 16) { // als er zestien elementen zijn (6 analoog, 10 digitaal) //Gebruik hier sensordata: } } serial.write('x'); // stuur een byte met het verzoek om meer seriële gegevens } }

We kunnen nu ons programma uitvoeren om te zien of het werkt!

Stap 9: Uw programma uitvoeren

We kunnen nu ons programma uitvoeren om te zien of het werkt. Je kunt je eigen spel maken met behulp van het skeleton.js-bestand in ons vorige bestand of je kunt het eenvoudige Pipe-spel gebruiken dat hier te vinden is.

Net als bij het ITP Lab, zullen we de onderstaande stappen volgen om ons programma uit te voeren.

• Sluit de Arduino aan met de controller(s) die u wilt gebruiken.
• Open p5.serialcontrol
• Wijzig de poort van je p5-schets in degene die je gebruikt (als je het skelet gebruikt, staat dit op regel 3)
• Open het HTML-bestand dat naar uw p5-schets linkt

Als u externe media hebt, zoals afbeeldingen of gedownloade lettertypen, wilt u dit op een server uitvoeren. U kunt desgewenst een eenvoudige lokale python-server uitvoeren.

Stap 10: Verder gaan

Om verder te gaan en meer games hiervoor te ontwikkelen, kun je verschillende voorbeelden volgen van p5.play die je hier vindt. Hieronder is een voorbeeld van een ingewikkelder spel dat ik heb gemaakt. Het is een 1 tegen 1 tankschietspel. Je kunt er alle bronnen voor vinden op GitHub.