Panduan Joystick Arduino Uno dan Processing Software

Joystick dan Processing

Joystick Dengan Arduino dan Processing – Pada projek kita akan membuat sebuah interface Joystick pada aplikasi Processing. Jika teman-teman ingin mengetahui lebih dalam tentang aplikasi Processing, bisa langsung akses ke website resminya dis.

Alur dari projek di ilustrasikan seperti pada gambar dibawah.

Pada Tutorial Joystick Menggunakan Arduino telah dibahas bagaimana cara mendapatkan nilai ADC dari Joystick. Sekarang bagaimana data tersebut kita visual kan dengan menggunakan aplikasi Processing. Ada beberapa langkah, yaitu membuat kode Processing, membuat Kode Arduino, dan membuat kode Arduino Smooth.

Gambaran umum hasil dari kode yang akan kita buat adalah meletakkan sebuah titik hitam pada latar halaman berwarna biru, dimana letak titik tersebut sesuai dengan koordinat X dan Y dari nilai ADC Joystick.

Jika joystick di dimainkan, maka titik akan bergerak sesuai arah tuas joystick. Ketika tombol ditekan, maka warna latar akan berubah menjadi kuning. Perhatikan program berikut:

//hamboelektronik.com //
//--------------------//

import processing.serial.*; //masukkan class untuk mengirim dan menerima data menggunakan komunikasi serial 
Serial get;                 //tetapkan kata "get" sebagai bagian dari Serial

int x = 0;                
int y = 0;
int b = 0;
PFont huruf;

void setup()
{
  size(1023, 1023);                     //buat kanvas dengan ukuran 1023*1023px
  get = new Serial(this, "COM6", 250000); //Ubah COM6 sesuai dengan port arduino.
  get.bufferUntil('n'); 

  huruf = createFont("Arial", 16, true);    //Buat font untuk informasi korrdinat di kanvas
  textFont(huruf, 16);                      //Pilih ukuran font 16px
}
void draw()
{
  clear();                               //bersihkan layar, berguna ketika program lopp dijalankan
  fill(0);                               //buat warna text dan objek lingkaran menjadi warna hitam
  background(0, 191, 255);               //atur warna biru untuk latar belakang kanvas 

  if (b == 1) {                          //jika tombol di tekan
    background(255, 255, 21);            //maka ubah warna latar belakang kanvas menjadi kuning
    circle(x, y, 25);                    //buat lingkaran
  } else
  {
    circle(x, y, 25);                    //buat lingkaran
  }
  
  text("Hambo Elektronik",+ 10, 20);     //buat text disebelah kiri atas kanvas
  text("Nilai X = "+(1023-x),+ 10, 40);  //tampilkan text koordinat X disebelah kiri atas kanvas
  text("Nilai Y = "+(1023-y),+ 10, 60);  //tampilkan text koordinat Y disebelah kiri atas kanvas
}
void serialEvent (Serial get)            
{
  String a = get.readStringUntil('n');  //Dapatkan data String Arduino Serial
  String[] vals = splitTokens(a, ", ");  //Data String di pisah berdasarkan koma dan dimasukkan kedalam array

  x = int(vals[0]);                      //ambil array pertama sebagai korrdinat X
  y = int(vals[1]);                      //ambil array kedua sebagai korrdinat Y
  b = int(vals[2]);                      //ambil array ketiga untuk kondisi tombol, jika 1 artinyatombol ditekan

}

Di s arduino akan mengirimkan data ke serial port dengan format data “xxx, xxx, x, “. Data akan dibaca dan akan dipilah oleh processing. Berikut adalah programnya.

//hamboelektronik.com//
//-------------------//
int adc_x = 0;
int adc_y = 0;
int tombol = 0;

void setup()
{
  Serial.begin(250000);
  pinMode(2, INPUT);
}

void loop()
{
  adc_x = analogRead(A0);
  adc_y = analogRead(A1);
  tombol = digitalRead(2);

  Serial.print(adc_x, DEC);
  Serial.print(", ");
  Serial.print(adc_y, DEC);
  Serial.print(", ");
  Serial.print(!tombol, DEC);
  Serial.println(", ");

}

Silahkan upload ke Arduino dengan program diatas. Kemudian jalankan aplikasi Processing. Silahkan gerakkan tuas Joystick, maka titik hitam pada tampilan processing akan bergerak searah dengan pergerakan tuas.

Jika teman-teman menggunakan program arduino diatas, data bisa diterima oleh processing, namun jika di perhatikan lebih fokus ke titik pada layar kanvas, titik hitam akan bergetar.

Ini sebabnya adalah nilai ADC yang terus berubah pada angka terakhir. Untuk mengatasi dan nilai ADC lebih tenang tidak cepat berubah nilainya, maka kita gunakan program smooting atau halus, perhatikan program berikut.

//hamboelektronik.com//
//-------------------//

int adc_x = 0;
int adc_y = 0;
int tombol = 0;
const int jumlah_baca = 10;
int xBaca[jumlah_baca];
int yBaca[jumlah_baca];
int jumlahArrayX = 0;
int jumlahArrayY = 0;
int xNilai = 0;
int yNilai = 0;

void setup()
{
  Serial.begin(250000);
  pinMode(2, INPUT);
}

void loop()
{
  xNilai = xNilai - xBaca[jumlahArrayX];
  yNilai = yNilai - yBaca[jumlahArrayY];

  xBaca[jumlahArrayX] = analogRead(A0);
  yBaca[jumlahArrayY] = analogRead(A1);

  xNilai = xNilai + xBaca[jumlahArrayX];
  yNilai = yNilai + yBaca[jumlahArrayY];

  jumlahArrayX = jumlahArrayX + 1;
  jumlahArrayY = jumlahArrayY + 1;

  if (jumlahArrayX >= jumlah_baca) {
    jumlahArrayX = 0;
  }
  if (jumlahArrayY >= jumlah_baca) {
    jumlahArrayY = 0;
  }

  adc_x = xNilai / jumlah_baca;
  adc_y = yNilai / jumlah_baca;
  tombol = digitalRead(2);


  Serial.print(adc_x, DEC);
  Serial.print(", ");
  Serial.print(adc_y, DEC);
  Serial.print(", ");
  Serial.print(!tombol, DEC);
  Serial.println(", ");

}