joystick processing arduino

Visualize The Value of The Joystick Output With Processing

Posted on

Value of The Joystick Output With Processing – Today we will visualize the results of the Joystick value on the Processing application. If you want to know more about the Processing application, you can directly access the official website here.

In the post of How to Connect Joystick With An Arduino we has been explained how to get the ADC value from the Joystick. Now, how do we visualize the data using the Processing application. There are a number of steps that we will go through, First making the Processing code, Second is making the Arduino Code, and creating Arduino Smooth code.

1. Schematic

Before we visualize the joystick value to processing, we have to connect the joystick to Arduino. Please follow the picture below.

joystick arduino tutorial

2. Code Processing

The description of the results of the code we are going to make a black dot on the blue background of the window processing, where the location of the point matches the X and Y coordinates that are read from the ADC value Joystick. If the joystick is moved, the point will move in the direction of the joystick lever. When the button is pressed, the background color will turn yellow. Consider the following program:

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

import processing.serial.*; 
Serial get;                 
int x = 0;                
int y = 0;
int b = 0;
PFont font;

void setup()
{
  size(1023, 1023);                    
  get = new Serial(this, "COM6", 250000); //Change COM6 according to the your arduino port.
  get.bufferUntil('\n'); 

  font = createFont("Arial", 16, true);   
  textFont(font, 16);                      
}
void draw()
{
  clear();                              
  fill(0);                               
  background(0, 191, 255);              

  if (b == 1) {                          
    background(255, 255, 21);           
    circle(x, y, 25);                    
  } else
  {
    circle(x, y, 25);                    
  }
  
  text("Hambo Elektronik",+ 10, 20);     
  text("X Val = "+(1023-x),+ 10, 40);  
  text("Y Val = "+(1023-y),+ 10, 60);  
}
void serialEvent (Serial get)            
{
  String a = get.readStringUntil('\n');  
  String[] vals = splitTokens(a, ", ");  

  x = int(vals[0]);                      
  y = int(vals[1]);                     
  b = int(vals[2]);                      

}

3. Arduino Code

Arduino will send the joystick ADC value data to the serial port with the data format “xxx, xxx, x,” then this data will be read and will be sorted by code processing. Please upload to Arduino with the program below then run the Processing application. Wait a while, then it will pop the window with a blue background and a black dot in the middle. Please move the Joystick lever, then the black dot on the processing display will move in the direction of the lever movement. Here is the program.

//hamboelektronik.com//
//-------------------//
int adcX = 0;
int adcY = 0;
int btn = 0;

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

void loop()
{
  adcX = analogRead(A0);
  adcY = analogRead(A1);
  btn = digitalRead(2);

  Serial.print(adcX, DEC);
  Serial.print(", ");
  Serial.print(adcY, DEC);
  Serial.print(", ");
  Serial.print(!btn, DEC);
  Serial.println(", ");

}

 

Read other articles  How to convert data type in Arduino

4. Arduino Code Smooting Joystick

If you use the Arduino program above, the data can be received by processing, but if you see focus on the point on the blue screen, the black dot will vibrate. This is caused by the ADC value that changes rapidly in the last digit. To overcome this vibration and calm the ADC value, we use the smooting or smooth program, attention to the following program.

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

int adcX = 0;
int adcY = 0;
int btn = 0;
const int numRead = 10;
int readX[numRead];
int readY[numRead];
int numArrayX = 0;
int numArrayY = 0;
int valX = 0;
int valY = 0;

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

void loop()
{
  valX = valX - readX[numArrayX];
  valY = valY - readY[numArrayY];

  readX[numArrayX] = analogRead(A0);
  readY[numArrayY] = analogRead(A1);

  valX = valX + readX[numArrayX];
  valY = valY + readY[numArrayY];

  numArrayX = numArrayX + 1;
  numArrayY = numArrayY + 1;

  if (numArrayX >= numRead) {
    numArrayX = 0;
  }
  if (numArrayY >= numRead) {
    numArrayY = 0;
  }

  adcX = valX / numRead;
  adcY = valY / numRead;
  btn = digitalRead(2);


  Serial.print(adcX, DEC);
  Serial.print(", ");
  Serial.print(adcY, DEC);
  Serial.print(", ");
  Serial.print(!btn, DEC);
  Serial.println(", ");

}

 

Please upload to your Arduino, then run processing. you can see the smooth black dot movement on the blue screen. Hopefully the Value of The Joystick Output With Processing article is useful.

2 thoughts on “Visualize The Value of The Joystick Output With Processing

  1. Wonderful blog! Do you have any helpful hints for aspiring writers?
    I’m hoping to start my own blog soon but I’m a little lost on everything.
    Would you propose starting with a free platform like
    Wordpress or go for a paid option? There are so many choices out there that
    I’m totally confused .. Any recommendations? Bless
    you! https://www.interior.my

Leave a Reply

Your email address will not be published. Required fields are marked *