Arduino Kontrolörleri: 10 Adım (Resimlerle)

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:21

Arduino ve p5.js kütüphanesini kullanan bir Arduino oyun kontrol sistemi. Bunun fikri, kolayca çoğaltılabilen ve genişletilebilen bir Arduino projesi oluşturmaktır. Kontrolör bağlantıları, her bir kontrolöre bağlı olarak değiştirilebilen bir dizi çeşitli sensör ve girişi kullanmak üzere tasarlanmıştır.

Bu proje ayrıca p5.js için tasarlanmış p5.play kitaplığı ile birlikte p5.js JavaScript kitaplığını kullanmak üzere tasarlanmıştır. Bu kütüphaneler, oyunlarımızı kolaylıkla programlamamızı sağlar. p5.play web sitesinde, kullanıcıların bunun için oyunlar oluşturması için bir dizi öğretici ve örnek bulunur. Bu proje, kullanıcıların donanım ve yazılım geliştirme becerilerini uygulamalarını sağlar.

Adım 1: Neye İhtiyacınız Olacak?

Aletler:

• Havya
• Lehim
• Tel Sıyırıcılar
• Yan kesiciler
• pense

Donanım:

• Arduino uyumlu kart (Sparkfun Redboard'un yanı sıra Arduino Uno ve Leonardo kullandım)

• Mükemmel Kurulu:

  • 8cm x 6cm yeşil perf panoları
  • Aduino Uno kalkan mükemmel kurulu

• Çeşitli Sensörler

  • Oyun çubukları
  • Düğmeler (dirençli, 10k ohm, onlarla birlikte gitmek için)
  • potansiyometreler
  • Esnek Sensörler
  • Basınç sensörleri
  • Vesaire…

• Tel:

  • Tek Tel (26 AWG Solid kullandım)
  • Şerit tel ve kıvrımlar
• Break Away Başlıkları (Bunlardan en az 20 tanesi)

• İsteğe Bağlı Donanım (bunun yerine karton ve sıcak tutkal/zip bağları kullanabilirsiniz):

  • Prototipleme için breadboard ve jumper kabloları
  • 3D Baskılı muhafazalar
  • Donanım bağlantı elemanları (M2.5 vidalar kullandım)

Yazılım:

• Arduino IDE'si

• p5.js kitaplığı

  P5.play kütüphanesi de

• p5.seri kontrol
• Node.js

Adım 2: İnşa Etme: Konsol Merkezi, Kalkanı Ayarlama

Başlıkları Arduino Uno shield perf board'a lehimleyin.

• Kalkan başlıklarıyla başladım (güç, analog giriş ve dijital)
• Sonraki 2x5 başlık pimleri. 2x5 başlık veya sadece 2 satır 5 ara başlık kullanabilirsiniz. Bunları A3 ve A4 ile dikey olarak dizdim ve aralarında 2 boşluk bıraktım.

3. Adım: İnşa Etme: Konsol Merkezi, Kalkan Kablolama

Ardından, tellerimizi kalkanın üzerine yönlendirmek istiyoruz. Kabloları üst kısımdan geçirmek daha kolaydır, ancak daha temiz bir görünüm istiyorsanız alt kısımdan geçirebilirsiniz.

Bu kabloları yönlendirirken şemaya (Eagle şeması indirilebilir) dikkat etmek istiyorsunuz. Bu konuda size yardımcı olması için renk kılavuzuna da bakabilirsiniz.

Bu kalkan tasarımının fikri, her kontrolörden 3 analog giriş ve 5 dijital girişe izin vermektir. Bu, bir Arduino Uno'daki tüm analog girişlerin yanı sıra şerit kablomuzdaki kalan tellerden tam olarak yararlanır.

Adım 4: İnşa Etme: Denetleyiciler, Parçalarınızı Ayarlama

Denetleyicinizi oluşturmanın ilk adımı, hangi sensörlerin kullanılacağını planlamaktır. Örneklerimde, joystick ve birkaç düğmeli oldukça standart bir denetleyicim var. Ayrıca iki kaydırıcı potansiyometreye sahip bir denetleyicim var.

Bunu çoğaltmak isterseniz, yerleştirme için resimlerimi inceleyebilirsiniz.

Bir sonraki adım, şerit kablonuzu mükemmel panoya lehimlemektir.

1. Şerit kabloyu soyun ve kalaylayın
2. Şerit kabloyu mükemmel panonuzun üst ortasına lehimleyin.

Bir sonraki adım, kablolarınızı yönlendirmektir. İlk önce gücü (5V/kırmızı kablo) ve topraklamayı (kahverengi kablo) sensörlere bağlayarak başladım. Daha sonra analog girişleri bağladım. Yatay hareket için turuncu kabloyu (Analog A0 veya A3) ve dikey hareket için sarı kabloyu (Analog A1 veya A4) kullanmayı kolay buldum.

İşleri tutarlı tutmak için, tüm denetleyicilerimde mor renkte küçük bir düğme de bağladım. Bu, seri bağlantı noktasının kapatılması (bunu daha sonra ele alacağım) ve ayrıca menüler veya seçenekler gibi şeyler için kullanışlıdır.

Buna bir göz atmak isterseniz, joystick denetleyicimin hızlı bir şemasını yükledim. Pin-out diyagramımızdan, her bir kontrolör bağlantısının olasılığını (3 analog giriş ve 5 dijital) görebilirsiniz.

Adım 5: İsteğe Bağlı: Muhafazalar

Bu adım isteğe bağlıdır, ancak bir 3D yazıcıya erişiminiz varsa, projenizin sonucu biraz daha rafine ve tamamlanmış görünecektir. Prototiplerimde de görebileceğiniz gibi, perf panolarının altındaki lehim bağlantılarının parmaklarınızı sokmaması için basit bir karton parçası kullandım.

3D modellerimi bu adıma ekli olarak bulabilirsiniz. Hem Arduino Uno/Leonardo hem de Sparkfun RedBoard için hub için muhafazalar oluşturdum (bu kart biraz daha geniş ve mini USB kullanıyor).

Kontrolörler için bunları M2.5 vidalarla takabilirsiniz. Somunu PCB'nin yanında tuttum ve altta bir rondela ve vida kullandım.

Kullandığım potansiyometrelerin düğme sürgülerinin 3D modelini de ekledim.

Tüm 3D dosyaları GitHub'da bulabilirsiniz.

Adım 6: Programlama: Arduino

Test etmek için basit bir eskiz oluşturarak başlayalım. Burada bulunan NYU'da ITP tarafından oluşturulan öğreticiyi kullanmanızı öneririm. Bu öğreticiyi yapmak için p5.serialcontroll ve node.js'nin kurulu olması gerekir. Bu eğitimde, javascript kitaplığımız p5.js tarafından kullanılabilen seri verileri göndermek için bir Arduino kurmayı öğreneceksiniz. Bunu yapmak için önceki adımlarda oluşturduğumuz hub ve denetleyiciyi kullanabilir veya öğreticide gösterilen devreleri çoğaltabilirsiniz. Bu öğretici, ilk denetleyicinizin turuncu kablosuyla eşlenen Arduino Uno'daki A0 analog giriş pinini kullanır.

Takip etmek isteyeceğiniz bir sonraki öğretici burada bulunabilir. Bu öğretici, birden çok girişi ayarlama ve bunları p5.js'de kullanma konusunda size rehberlik edecektir. Eğitimde, A0 ve A1 analog girişleri kullanılır. Bunlar, sistemimizin denetleyicisi 1'deki turuncu ve sarı kablolara karşılık gelecektir.

Yukarıdaki öğreticilerden geçtikten sonra Arduino'yu programlayabiliriz. Kullanmak istediğimiz kod aşağıdadır:

//kontrolör 1const int dig2 = 2; //mavi sabit int dig3 = 3; //mor const int dig4 = 4; //gri const int dig5 = 5; //beyaz sabit int dig6 = 6; //siyah //kontrolör 2 const int dig7 = 7; //mavi sabit int dig8 = 8; //mor const int dig9 = 9; //gri const int dig10 = 10; //beyaz sabit int dig11 = 11; //siyah

geçersiz kurulum() {

Seri.başla(9600); while (Serial.available() <= 0) { Serial.println("merhaba"); // bir başlangıç mesajı gecikmesi gönder(300); // 1/3 saniye bekle } pinMode(dig2, INPUT); pinMode(dig3, GİRİŞ); pinMode(dig4, GİRİŞ); pinMode(dig5, INPUT); pinMode(dig6, GİRİŞ); pinMode(dig7, GİRİŞ); pinMode(dig8, GİRİŞ); pinMode(dig9, GİRİŞ); pinMode(dig10, INPUT); pinMode(dig11, GİRİŞ); }

boşluk döngüsü () {

if (Serial.available() > 0) { // gelen baytı oku: int inByte = Serial.read(); // sensörü oku:

//ANALOG Kontrolör 1

int analog0 = analogRead(A0); int analog1 = analogRead(A1); int analog2 = analogRead(A2); //ANALOG Denetleyici 2 int analog3 = analogRead(A3); int analog4 = analogRead(A4); int analog5 = analogRead(A5); //DİJİTAL Kontrolör 1 int digital2 = digitalRead(dig2); int digital3 = digitalRead(dig3); int digital4 = digitalRead(dig4);

int digital5 = digitalRead(dig5);

int digital6 = digitalRead(dig6); //DİJİTAL Kontrolör 2 int digital7 = digitalRead(dig7); int digital8 = digitalRead(dig8); int digital9 = digitalRead(dig9); int digital10 = digitalRead(dig10); int digital11 = digitalRead(dig11); // sonuçları yazdır: Serial.print(analog0); //[0] Seri.print(", "); Serial.print(analog1); //[1] Seri.print(", "); Serial.print(analog2); //[2] Seri.print(", "); //Denetleyici 2 verilerini başlat Serial.print(analog3); //[3] Seri.print(", "); Serial.print(analog4); //[4] Seri.print(", "); Serial.print(analog5); //[5] Seri.print(", "); Seri.baskı(dijital2); //[6] Seri.print(", "); Seri.baskı(dijital3); //[7] Seri.print(", "); Seri.baskı(dijital4); //[8] Seri.print(", "); Seri.baskı(dijital5); //[9] Seri.print(", "); Seri.baskı(dijital6); //[10] Seri.print(", "); //Kontrolör 2 verisini başlat Serial.print(digital7); //[11] Seri.print(", "); Seri.baskı(dijital8); //[12] Seri.print(", "); Seri.baskı(dijital9); //[13] Seri.print(", "); Seri.println(dijital10); //[14] Seri.print(", "); Seri.println(dijital11); //[15] } }

Bu kod, her iki denetleyicimizden de seri verileri 16 sayı dizisi olarak gönderir. Bu sayıların ilk 6'sı analog girişlerimiz (0-1023 arası), kalan 10 değer ise dijital değerlerimizdir (0 veya 1).

Kodumuz yüklendikten sonra, ITP'den 2. öğreticide yaptığımız gibi seri monitörü açıp seri monitörümüze bir değer yazarak bunu test edebiliriz. Virgülle ayrılmış bir dizi değer almalıyız.

Adım 7: Programlama: HTML

Arduino'muzu kurup çalıştırdıktan sonra, web öğelerimizi programlamaya başlayabiliriz. HTML kodu çok basittir.

gövde {dolgu: 0; kenar boşluğu: 0;}

Html kodu, javascript dosyalarımızı birbirine bağlar. Kodumuzun çoğu aslında eskiz.js dosyamızda olacak.

Adım 8: Programlama: P5.js ve Javascript

HTML ayarlarımızı yaptıktan sonra JavaScript'imiz üzerinde çalışabiliriz. Henüz yapmadıysanız, şimdi p5.js'nin yanı sıra p5.play'i indirmeli ve bunları web sitenizin dizinindeki kitaplıklar klasörünüze eklemelisiniz.

• p5.js
• p5.play

Önceki adımda, p5.js ve p5.play kitaplıklarımızı çağırmak için HTML dosyamızı kurduk. Ayrıca, programlamamızın çoğunu yapacağımız sketch.js dosyamızı kullanacak şekilde ayarladık. İskeletimizin kodu aşağıdadır. Burada da bulabilirsiniz.

//Seri Değişkenlervar seri; // seri bağlantı noktası kitaplığının bir örneğini tutacak değişken var portName = 'COM4'; // buraya seri port adınızı girin //Global Game Variables ---------------

//Kurulum Fonksiyonu ----------------------

fonksiyon kurulumu() { createCanvas(640, 480); seri = yeni p5. SerialPort(); // serialport kitaplığının yeni bir örneğini yap serial.on('list', printList); // serialport listesi için bir geri çağırma işlevi ayarla olay serial.on('connected', serverConnected); // sunucuya bağlanmak için geri çağırma serial.on('open', portOpen); // serial.on('data', serialEvent) açan port için geri arama; // yeni veri geldiğinde geri arama serial.on('error', serialError); // hatalar için geri arama serial.on('close', portClose); // serial.list()'i kapatan port için geri arama; // seri portları listele serial.open(portName); // bir seri bağlantı noktası açın } //Çizim İşlevi -------------------------- işlev çizim() { arka plan(0); // siyah arka plan } //Seri verileri burada yorumlayın ---------- function serialEvent() { // seri bağlantı noktasından bir dize okuyun // satır başı ve yeni satır elde edene kadar: var inString = serial. readStringUntil('\r\n'); //orada gerçekten bir ayar olup olmadığını kontrol edin: if (inString.length > 0) { if (inString !== 'hello') { // merhaba alırsanız, yok sayın var sensor = split(inString, ', '); // dizeyi virgüllere ayırın if (sensors.length > 16) { // on altı eleman varsa (6 analog, 10 dijital) //Sensör verilerini burada kullanın:

}

} serial.write('x'); // daha fazla seri veri talep eden bir bayt gönder } } // portların listesini al: function printList(portList) { // portList, (var i = 0; i < portList.length; i++) için bir seri port isimleri dizisidir. { // Listeyi konsolda görüntüleyin: print(i + " " + portList); } } function serverConnected() { print('sunucuya bağlı.'); } function portOpen() { print('seri port açıldı.') } function serialError(err) { print('Seri portta bir şeyler ters gitti. ' + err); } function portClose() { print('Seri port kapatıldı.'); } function kapamaKodu(){ serial.close(portName); null döndür; } window.onbeforeunload = kapanışKodu;

İskeleti kurtardıktan sonra. Bu değerleri, ITP eğitiminde nasıl yapıldığına benzer şekilde kullanabilirsiniz. 6. adımda Arduino'muzdan gönderdiğimiz değerler dizisi, 16 sayı dizisi olarak gönderiliyor. Aşağıda bu diziyi ayrıştırdığımız yer.

//Seri verileri burada yorumlayın ----------

function serialEvent() { // satır başı ve yeni satır elde edene kadar seri bağlantı noktasından bir dize okuyun //: var inString = serial.readStringUntil('\r\n'); //orada gerçekten bir ayar olup olmadığını kontrol edin: if (inString.length > 0) { if (inString !== 'hello') { // merhaba alırsanız, yok sayın var sensor = split(inString, ', '); // dizeyi virgülle ayırın if (sensors.length > 16) { // on altı eleman varsa (6 analog, 10 dijital) //sensör verilerini burada kullanın: } } serial.write('x'); // daha fazla seri veri isteyen bir bayt gönder } }

Artık çalışıp çalışmadığını görmek için programımızı çalıştırabiliriz!

9. Adım: Programınızı Çalıştırmak

Artık çalışıp çalışmadığını görmek için programımızı çalıştırabiliriz. Bir önceki dosyamızda bulunan iskelet.js dosyasını kullanarak kendi oyununuzu oluşturabilir veya burada bulunan basit Pipe oyununu kullanabilirsiniz.

ITP Lab'de olduğu gibi programımızı çalıştırmak için aşağıdaki adımları takip edeceğiz.

• Arduino'yu kullanmayı planladığınız denetleyici(ler) ile takın.
• p5.serialcontrol'ü açın
• p5 eskizinizin bağlantı noktasını kullandığınız bağlantı noktasıyla değiştirin (iskeleti kullanıyorsanız, bu 3. satırdadır)
• p5 çiziminize bağlanan HTML dosyasını açın

Resimler veya indirilen yazı tipleri gibi harici medyanız varsa, bunu bir sunucuda çalıştırmak isteyeceksiniz. İsterseniz basit bir yerel python sunucusu çalıştırabilirsiniz.

Adım 10: Daha İleri Gitmek

Daha ileri gitmek ve bunun için daha fazla oyun geliştirmek için burada bulunan p5.play'den çeşitli örnekleri takip edebilirsiniz. Aşağıda, oluşturduğum daha karmaşık bir oyun örneği var. 1'e 1 tank nişancı oyunudur. Bunun için tüm kaynakları GitHub'da bulabilirsiniz.