Arduino - Joystick
In this tutorial, we are going to learn how to use Joystick with Arduino. In detail, we will learn:
- How Joystick works
- How to connect Joystick to Arduino and program for it
- How to convert the values from Joystick to controllable values such as XY coordinates, the motor's up/down/left/right direction...
Hardware Required
Or you can buy the following kits:
| 1 | × | DIYables STEM V3 Starter Kit (Arduino included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Disclosure: Some links in this section are Amazon affiliate links. If you make a purchase through these links, we may earn a commission at no extra cost to you.
Additionally, some links direct to products from our own brand, DIYables .
Additionally, some links direct to products from our own brand, DIYables .
About Joystick Sensor
You probably see the Joystick somewhere such as a game controller, toy controller, or even a big real machine such as an excavator controller.
The joystick is composed of two potentiometers square with each other, and one push button. Therefore, it provides the following outputs:
- An analog value (from 0 to 1023) corresponding to the horizontal position (called X-coordinate)
- An analog value (from 0 to 1023) corresponding to the vertical position (called Y-coordinate)
- A digital value of a pushbutton (HIGH or LOW)
The combination of two analog values can create 2-D coordinates with the center are values when the joystick is in the rest position. The real direction of the coordinates can be identified simply when you run a test code (in the next part).
Some applications may use all three outputs, some applications may use some of three outputs.
Pinout
A Joystick has 5 pins:
- GND pin: needs to be connected to GND (0V)
- VCC pin: needs to be connected to VCC (5V)
- VRX pin: outputs an analog value corresponding to the horizontal position (called X-coordinate).
- VRY pin: outputs an analog value corresponding to the vertical position (called Y-coordinate).
- SW pin: is the output from the pushbutton inside the joystick. It’s normally open. If we use a pull-up resistor in this pin, the SW pin will be HIGH when it is not pressed, and LOW when it is pressed.
How It Works
- When you push the joystick's thump to left/right, the voltage in the VRX pin is changed, The voltage range is from 0 to 5V (0 at left and 5v at right). The voltage value is in proportion to the position of the thump ⇒ The reading value on Arduino's analog pin is from 0 to 1023
- When you push the joystick's thump to up/down, the voltage in the VRY pin is changed, The voltage range is from 0 to 5V (0 at up and 5v at down). The voltage value is in proportion to the position of the thump ⇒ The reading value on Arduino's analog pin is from 0 to 1023
- When you push the joystick's thump to any direction, the voltage in both VRX and VRY pins is changed in proportion to the projection of position on each axis
- When you push the joystick's thump from top to bottom, the pushbutton inside the joystick is closed, If we use a pull-up resistor in the SW pin, the output from SW pin will change from 5V to 0V ⇒ The reading value on Arduino's digital pin is changed from HIGH to LOW
Wiring Diagram
This image is created using Fritzing. Click to enlarge image
How To Program For Joystick
The joystick has two parts: analog (X, Y axis) and digital (pushbutton)
- For the analog parts (X, Y axis), it just need to read the value from analog input pin by using analogRead() function.
int xValue = analogRead(A1);
int yValue = analogRead(A0);
- For the digital part (pushbutton): it is a button. The most simple and convenient way is to use ezButton library. This library supports debounce for buttons and also enables an internal pull-up resistor. You can see more about button in Arduino - Button tutorial. The code will be presented in the next session in this tutorial.
After reading the values from analog pins, we may need to convert them to some controllable values. The next part will provide the example codes for this.
Arduino Code
This section will provide the following Arduino example codes:
- Example code: reads analog values from joystick
- Example code: reads analog values and reads the button state from joystick
- Example code: converts analog value to MOVE_LEFT, MOVE_RIGHT, MOVE_UP, MOVE_DOWN commands
- Example code: converts analog values to angles to control two servo motors (e.g. in pan-tilt camera)
Reads analog values from joystick
/*
* Created by ArduinoGetStarted.com
*
* This example code is in the public domain
*
* Tutorial page: https://arduinogetstarted.com/tutorials/arduino-joystick
*/
#define VRX_PIN A1 // Arduino pin connected to VRX pin
#define VRY_PIN A0 // Arduino pin connected to VRY pin
int xValue = 0; // To store value of the X axis
int yValue = 0; // To store value of the Y axis
void setup() {
Serial.begin(9600) ;
}
void loop() {
// read analog X and Y analog values
xValue = analogRead(VRX_PIN);
yValue = analogRead(VRY_PIN);
// print data to Serial Monitor on Arduino IDE
Serial.print("x = ");
Serial.print(xValue);
Serial.print(", y = ");
Serial.println(yValue);
delay(200);
}
Quick Steps
- Copy the above code and open with Arduino IDE
- Click Upload button on Arduino IDE to upload code to Arduino
- Push the joystick's thump maximally to the limit, and then rotate it in a circle (clockwise or anti-clockwise)
- See the result on Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
- While rotating the joystick' thump, keep watching the Serial Monitor
- If the X value is 0, mark or memorize the current position as left ⇒ the opposite direction the right
- If the Y value is 0, mark or memorize the current position as up ⇒ the opposite direction the down
- Navigate to the Libraries icon on the left bar of the Arduino IDE.
- Search “ezButton”, then find the button library by ArduinoGetStarted.com
- Click Install button to install ezButton library.
- Copy the above code and open with Arduino IDE
- Click Upload button on Arduino IDE to upload code to Arduino
- Push the thump of the joystick to left/right/up/down
- Push the thump of the joystick from the top
- See the result on Serial Monitor.
- Copy the above code and open with Arduino IDE
- Click Upload button on Arduino IDE to upload code to Arduino
- Push the thump of joystick to left/right/up/down or any direction
- See the result on Serial Monitor.
Reads analog values and reads the button state from a joystick
/*
* Created by ArduinoGetStarted.com
*
* This example code is in the public domain
*
* Tutorial page: https://arduinogetstarted.com/tutorials/arduino-joystick
*/
#include <ezButton.h>
#define VRX_PIN A1 // Arduino pin connected to VRX pin
#define VRY_PIN A0 // Arduino pin connected to VRY pin
#define SW_PIN 2 // Arduino pin connected to SW pin
ezButton button(SW_PIN);
int xValue = 0; // To store value of the X axis
int yValue = 0; // To store value of the Y axis
int bValue = 0; // To store value of the button
void setup() {
Serial.begin(9600) ;
button.setDebounceTime(50); // set debounce time to 50 milliseconds
}
void loop() {
button.loop(); // MUST call the loop() function first
// read analog X and Y analog values
xValue = analogRead(VRX_PIN);
yValue = analogRead(VRY_PIN);
// Read the button value
bValue = button.getState();
if (button.isPressed()) {
Serial.println("The button is pressed");
// TODO do something here
}
if (button.isReleased()) {
Serial.println("The button is released");
// TODO do something here
}
// print data to Serial Monitor on Arduino IDE
Serial.print("x = ");
Serial.print(xValue);
Serial.print(", y = ");
Serial.print(yValue);
Serial.print(" : button = ");
Serial.println(bValue);
}
Quick Steps
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
Converts analog value to MOVE LEFT/RIGHT/UP/DOWN commands
/*
* Created by ArduinoGetStarted.com
*
* This example code is in the public domain
*
* Tutorial page: https://arduinogetstarted.com/tutorials/arduino-joystick
*/
#define VRX_PIN A1 // Arduino pin connected to VRX pin
#define VRY_PIN A0 // Arduino pin connected to VRY pin
#define LEFT_THRESHOLD 400
#define RIGHT_THRESHOLD 800
#define UP_THRESHOLD 400
#define DOWN_THRESHOLD 800
#define COMMAND_NO 0x00
#define COMMAND_LEFT 0x01
#define COMMAND_RIGHT 0x02
#define COMMAND_UP 0x04
#define COMMAND_DOWN 0x08
int xValue = 0 ; // To store value of the X axis
int yValue = 0 ; // To store value of the Y axis
int command = COMMAND_NO;
void setup() {
Serial.begin(9600) ;
}
void loop() {
// read analog X and Y analog values
xValue = analogRead(VRX_PIN);
yValue = analogRead(VRY_PIN);
// converts the analog value to commands
// reset commands
command = COMMAND_NO;
// check left/right commands
if (xValue < LEFT_THRESHOLD)
command = command | COMMAND_LEFT;
else if (xValue > RIGHT_THRESHOLD)
command = command | COMMAND_RIGHT;
// check up/down commands
if (yValue < UP_THRESHOLD)
command = command | COMMAND_UP;
else if (yValue > DOWN_THRESHOLD)
command = command | COMMAND_DOWN;
// NOTE: AT A TIME, THERE MAY BE NO COMMAND, ONE COMMAND OR TWO COMMANDS
// print command to serial and process command
if (command & COMMAND_LEFT) {
Serial.println("COMMAND LEFT");
// TODO: add your task here
}
if (command & COMMAND_RIGHT) {
Serial.println("COMMAND RIGHT");
// TODO: add your task here
}
if (command & COMMAND_UP) {
Serial.println("COMMAND UP");
// TODO: add your task here
}
if (command & COMMAND_DOWN) {
Serial.println("COMMAND DOWN");
// TODO: add your task here
}
}
Quick Steps
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
※ NOTE THAT:
At a time, there may be no command, one command or two commands (e.g. UP and LEFT at the same time)
Converts analog values to angles to control two servo motors
The detail is presented on Arduino - Joystick controls Servo Motor tutorial
Video Tutorial
We are considering to make the video tutorials. If you think the video tutorials are essential, please subscribe to our YouTube channel to give us motivation for making the videos.
The below video demo uses the below code. Note that the video shows Arduino Uno R4, but it works identically for Arduino Uno R3:
/*
* Created by ArduinoGetStarted.com
*
* This example code is in the public domain
*
* Tutorial page: https://arduinogetstarted.com/tutorials/arduino-joystick
*/
#include "Arduino_LED_Matrix.h"
// Pin definitions
#define PIN_VRX A1
#define PIN_VRY A0
#define PIN_SW 2
#define PIN_BUZZER 8
// Matrix display dimensions
#define MATRIX_WIDTH 12
#define MATRIX_HEIGHT 8
#define MAX_SNAKE_LENGTH 96
// Snake movement direction
enum Direction {
UP,
DOWN,
LEFT,
RIGHT
};
// Game state machine
enum GameState {
START_BOOT, // Initial boot screen scrolling "DIYables"
PLAYING, // Active gameplay
GAME_OVER // Game over score display
};
GameState currentState = START_BOOT;
ArduinoLEDMatrix matrix;
uint8_t frame[8][12];
// Snake properties
int snakeX[MAX_SNAKE_LENGTH];
int snakeY[MAX_SNAKE_LENGTH];
int snakeLength = 3;
int score = 0;
Direction dir = RIGHT;
Direction nextDir = RIGHT;
// Food coordinates
int foodX = 0;
int foodY = 0;
// Movement timing
unsigned long lastMoveTime = 0;
int moveInterval = 250;
// Text scrolling timing
int startTextX = 12;
int scoreTextX = 12;
unsigned long lastScrollTime = 0;
const int SCROLL_INTERVAL = 75;
// Physics particle structure for 3s fall effect
struct Particle {
float x;
float y;
float vx;
float vy;
bool active;
};
// Function prototypes
void resetGame();
void handleInput();
void updateGameLogic();
void renderGame();
void spawnFood();
void renderText(String text, int xOffset);
uint8_t getCharCol(char c, int col);
void playShootingStarEffect();
void playEatSound();
void playStartSound();
bool isButtonPressed();
void clearFrame();
void setup() {
pinMode(PIN_SW, INPUT_PULLUP);
pinMode(PIN_BUZZER, OUTPUT);
matrix.begin();
randomSeed(analogRead(A2));
}
void loop() {
switch (currentState) {
case START_BOOT:
// Show "DIYables" only on initial power-up
if (millis() - lastScrollTime >= SCROLL_INTERVAL) {
lastScrollTime = millis();
renderText("DIYables", startTextX);
startTextX--;
if (startTextX < -36) {
startTextX = 12;
}
}
if (isButtonPressed()) {
resetGame();
playStartSound();
currentState = PLAYING;
}
break;
case PLAYING:
handleInput();
updateGameLogic();
renderGame();
break;
case GAME_OVER:
// Display score ("Score: X")
if (millis() - lastScrollTime >= SCROLL_INTERVAL) {
lastScrollTime = millis();
String scoreStr = "Score: " + String(score);
renderText(scoreStr, scoreTextX);
scoreTextX--;
int strLen = scoreStr.length() * 4;
if (scoreTextX < -strLen) {
scoreTextX = 12;
}
}
// Press button to restart game directly
if (isButtonPressed()) {
resetGame();
playStartSound();
currentState = PLAYING;
}
break;
}
}
// Read Joystick axes independently for accurate 4-way directional control
void handleInput() {
int xVal = analogRead(PIN_VRX);
int yVal = analogRead(PIN_VRY);
int dx = xVal - 512;
int dy = yVal - 512;
// Prioritize axis with stronger deflection
if (abs(dx) > abs(dy)) {
if (dx < -200 && dir != RIGHT) nextDir = LEFT;
else if (dx > 200 && dir != LEFT) nextDir = RIGHT;
} else {
if (dy < -200 && dir != DOWN) nextDir = UP;
else if (dy > 200 && dir != UP) nextDir = DOWN;
}
}
// 3.0-second shooting star fall effect
void playShootingStarEffect() {
const int MAX_PARTICLES = 45;
Particle particles[MAX_PARTICLES];
int pCount = 0;
// Convert active LEDs (snake body and food) into free-falling particles
for (int r = 0; r < MATRIX_HEIGHT; r++) {
for (int c = 0; c < MATRIX_WIDTH; c++) {
if (frame[r][c] == 1 && pCount < 25) {
particles[pCount].x = c;
particles[pCount].y = r;
particles[pCount].vx = (float)random(-15, 15) / 100.0;
particles[pCount].vy = (float)random(-20, 5) / 100.0;
particles[pCount].active = true;
pCount++;
}
}
}
unsigned long startTime = millis();
unsigned long lastSpawn = 0;
// 3-second physics simulation loop
while (millis() - startTime < 3000) {
clearFrame();
unsigned long elapsedTime = millis() - startTime;
// Spawn additional falling star trails from top during the first 2.2 seconds
if (elapsedTime < 2200 && millis() - lastSpawn > 80 && pCount < MAX_PARTICLES) {
lastSpawn = millis();
particles[pCount].x = random(0, MATRIX_WIDTH);
particles[pCount].y = -random(1, 4);
particles[pCount].vx = (float)random(-5, 5) / 100.0;
particles[pCount].vy = (float)random(10, 30) / 100.0;
particles[pCount].active = true;
pCount++;
}
// Update particle positions
for (int i = 0; i < pCount; i++) {
if (!particles[i].active) continue;
particles[i].x += particles[i].vx;
particles[i].y += particles[i].vy;
particles[i].vy += 0.04; // Gravity acceleration
int px = (int)round(particles[i].x);
int py = (int)round(particles[i].y);
// Draw particle
if (py >= 0 && py < MATRIX_HEIGHT && px >= 0 && px < MATRIX_WIDTH) {
frame[py][px] = 1;
}
// Draw particle trail if falling rapidly
int tailY = py - 1;
if (tailY >= 0 && tailY < MATRIX_HEIGHT && px >= 0 && px < MATRIX_WIDTH && particles[i].vy > 0.3) {
frame[tailY][px] = 1;
}
// Deactivate particle once below screen
if (py >= MATRIX_HEIGHT + 3) {
particles[i].active = false;
}
}
matrix.renderBitmap(frame, 8, 12);
// Decreasing pitch sound from 1200Hz to 100Hz synchronized over 3 seconds
int soundFreq = 1200 - (int)((elapsedTime / 3000.0) * 1100);
if (soundFreq > 100) {
tone(PIN_BUZZER, soundFreq, 30);
}
delay(35);
}
noTone(PIN_BUZZER);
clearFrame();
matrix.renderBitmap(frame, 8, 12);
}
// 3x5 bitmap font data
uint8_t getCharCol(char c, int col) {
switch (c) {
// "DIYables" characters
case 'D': return (col==0)?0x1F:(col==1)?0x11:0x0E;
case 'I': return (col==0)?0x11:(col==1)?0x1F:0x11;
case 'Y': return (col==0)?0x03:(col==1)?0x1C:0x03;
case 'a': return (col==0)?0x0C:(col==1)?0x12:0x1E;
case 'b': return (col==0)?0x1F:(col==1)?0x14:0x08;
case 'l': return (col==0)?0x11:(col==1)?0x1F:0x10;
case 'e': return (col==0)?0x0C:(col==1)?0x16:0x14;
case 's': return (col==0)?0x14:(col==1)?0x16:0x0A;
// "Score:" characters
case 'S': return (col==0)?0x12:(col==1)?0x15:0x09;
case 'c': return (col==0)?0x0C:(col==1)?0x12:0x12;
case 'o': return (col==0)?0x0C:(col==1)?0x12:0x0C;
case 'r': return (col==0)?0x1E:(col==1)?0x04:0x02;
case ':': return (col==0)?0x00:(col==1)?0x0A:0x00;
case ' ': return 0x00;
// Digits 0 - 9
case '0': return (col==0)?0x0E:(col==1)?0x11:0x0E;
case '1': return (col==0)?0x12:(col==1)?0x1F:0x10;
case '2': return (col==0)?0x19:(col==1)?0x15:0x12;
case '3': return (col==0)?0x11:(col==1)?0x15:0x0A;
case '4': return (col==0)?0x07:(col==1)?0x04:0x1F;
case '5': return (col==0)?0x17:(col==1)?0x15:0x09;
case '6': return (col==0)?0x0E:(col==1)?0x15:0x09;
case '7': return (col==0)?0x19:(col==1)?0x05:0x03;
case '8': return (col==0)?0x0A:(col==1)?0x15:0x0A;
case '9': return (col==0)?0x12:(col==1)?0x15:0x0E;
default: return 0x00;
}
}
// Render string to LED matrix frame
void renderText(String text, int xOffset) {
clearFrame();
int curX = xOffset;
int topY = 1;
for (int i = 0; i < text.length(); i++) {
char ch = text.charAt(i);
for (int col = 0; col < 3; col++) {
int screenX = curX + col;
if (screenX >= 0 && screenX < MATRIX_WIDTH) {
uint8_t colData = getCharCol(ch, col);
for (int row = 0; row < 5; row++) {
if ((colData >> row) & 1) {
frame[topY + row][screenX] = 1;
}
}
}
}
curX += 4;
}
matrix.renderBitmap(frame, 8, 12);
}
// Snake game logic update
void updateGameLogic() {
if (millis() - lastMoveTime < moveInterval) return;
lastMoveTime = millis();
dir = nextDir;
int newHeadX = snakeX[0];
int newHeadY = snakeY[0];
switch (dir) {
case UP: newHeadY--; break;
case DOWN: newHeadY++; break;
case LEFT: newHeadX--; break;
case RIGHT: newHeadX++; break;
}
// Wall collision -> Game Over
if (newHeadX < 0 || newHeadX >= MATRIX_WIDTH || newHeadY < 0 || newHeadY >= MATRIX_HEIGHT) {
playShootingStarEffect();
scoreTextX = 12;
currentState = GAME_OVER;
return;
}
// Self-collision -> Game Over
for (int i = 0; i < snakeLength; i++) {
if (snakeX[i] == newHeadX && snakeY[i] == newHeadY) {
playShootingStarEffect();
scoreTextX = 12;
currentState = GAME_OVER;
return;
}
}
bool ateFood = (newHeadX == foodX && newHeadY == foodY);
if (ateFood) {
snakeLength++;
score++;
playEatSound();
if (moveInterval > 100) {
moveInterval -= 5;
}
}
for (int i = snakeLength - 1; i > 0; i--) {
snakeX[i] = snakeX[i - 1];
snakeY[i] = snakeY[i - 1];
}
snakeX[0] = newHeadX;
snakeY[0] = newHeadY;
if (ateFood) {
spawnFood();
}
}
void renderGame() {
clearFrame();
frame[foodY][foodX] = 1;
for (int i = 0; i < snakeLength; i++) {
frame[snakeY[i]][snakeX[i]] = 1;
}
matrix.renderBitmap(frame, 8, 12);
}
void spawnFood() {
bool onSnake;
do {
onSnake = false;
foodX = random(0, MATRIX_WIDTH);
foodY = random(0, MATRIX_HEIGHT);
for (int i = 0; i < snakeLength; i++) {
if (snakeX[i] == foodX && snakeY[i] == foodY) {
onSnake = true;
break;
}
}
} while (onSnake);
}
void resetGame() {
snakeLength = 3;
score = 0;
dir = RIGHT;
nextDir = RIGHT;
moveInterval = 250;
snakeX[0] = 4; snakeY[0] = 3;
snakeX[1] = 3; snakeY[1] = 3;
snakeX[2] = 2; snakeY[2] = 3;
spawnFood();
}
bool isButtonPressed() {
static bool lastState = HIGH;
bool state = digitalRead(PIN_SW);
if (lastState == HIGH && state == LOW) {
delay(50);
lastState = state;
return true;
}
lastState = state;
return false;
}
void clearFrame() {
memset(frame, 0, sizeof(frame));
}
void playEatSound() {
tone(PIN_BUZZER, 1200, 60);
}
void playStartSound() {
tone(PIN_BUZZER, 440, 80); delay(90);
tone(PIN_BUZZER, 554, 80); delay(90);
tone(PIN_BUZZER, 659, 120); delay(120);
}