Joystick Arduino and Processing Tutorial
How to Display Joystick Value to Processing – In this project we will create a Joystick interface in the Processing software. If you want to know more about the Processing application, you can directly access the official website here.
The flow of this project is illustrated as shown in the image below.
In the Joystick Tutorial Using Arduino, we have discussed how to get the ADC value from the Joystick. Now how we visualize the data using the Processing application.
Processing Code
An overview of the results of the code that we are going to make is to place a black dot on a blue page background, where the location of the point corresponds to the X and Y coordinates of the ADC Joystick value.
If the joystick is played, the dot will move in the direction of the joystick lever. When the button is pressed, the background color will change to yellow.
Here is the program:
import processing.serial.*; //insert class for sending and receiving data using serial communication
Serial get; //set the word "get" as part of Serial
int x = 0;
int y = 0;
int b = 0;
PFont huruf;
void setup()
{
size(1023, 1023); //create canvas with size 1023*1023px
get = new Serial(this, "COM6", 250000); //Change COM6 according to your arduino port.
get.bufferUntil('\n');
huruf = createFont("Arial", 16, true); //Create font for coordinate information on canvas
textFont(huruf, 16); //Set font size 16px
}
void draw()
{
clear(); //clear screen, useful when lopp program is run
fill(0); //make the text color and circle object black
background(0, 191, 255); //set blue color for canvas background
if (b == 1) { //If button in joystick is pressed
background(255, 255, 21); //then change the canvas background color to yellow
circle(x, y, 25); //make a circle
} else
{
circle(x, y, 25); //make a circle
}
text("Hambo Elektronik",+ 10, 20); //create text on the top left of the canvas
text("Nilai X = "+(1023-x),+ 10, 40); //display text coordinates X on the top left of the canvas
text("Nilai Y = "+(1023-y),+ 10, 60); //display the Y coordinate text on the top left of the canvas
}
void serialEvent (Serial get)
{
String a = get.readStringUntil('\n'); //Get Arduino Serial String data
String[] vals = splitTokens(a, ", "); //String data separated by comma and inserted into an array
x = int(vals[0]); //take the first array as coordinate X
y = int(vals[1]); //take the second array as coordinate Y
b = int(vals[2]); //take third array for button condition, if 1 means button pressed
}
Arduino Code
Arduino Uno will send data to the serial port with the data format “xxx, xxx, x,”. This data will be read and will be sorted by Processing Software. Here is the program.
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(", ");
}Please upload it to Arduino with the above program. Then run the Processing application. Please move the joystick lever, then the black dot on the processing display will move in the direction of the lever movement.
Smooting Code
If you use the Arduino program above, the data can be received by processing, but if you pay more attention to the point on the canvas screen, the black dot will vibrate.
This is why it is the ADC value that keeps changing on the last digit. To overcome this and the quieter ADC value does not change its value quickly, then we use a smoothing or smoothing program, consider the following program.
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(", ");
}Please, upload it to Arduino, then run processing. You can see smoother movement of the coordinate points.
Hopefully this Display Joystick Value to Processing article is useful.
