Arduino UNO R4 - Joystick
In this guide, we will learn how to use a joystick with Arduino UNO R4. We will cover:
- How a joystick works
- How to connect a joystick to Arduino UNO R4
- How to program Arduino UNO R4 to read values from a joystick
- How to convert the values read from joystick into actionable values (e.g. XY coordinates or directions for a motor)
Hardware Preparation
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables STEM V4B IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Disclosure: Some of the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you.
Additionally, some of these links are for products from our own brand, DIYables .
Additionally, some of these links are for products from our own brand, DIYables .
Overview of Joystick
You might have seen a joystick used as a game controller, a toy controller, or even in large machines like excavator controllers.
The joystick has two potentiometers arranged in a square formation and one push button. It gives the following outputs:
- An analog value (from 0 to 1023) for the horizontal position (X-coordinate)
- An analog value (from 0 to 1023) for the vertical position (Y-coordinate)
- A digital state of a button (HIGH or LOW)
When you combine two analog values, they form 2-D coordinates. These coordinates are centered when the joystick is not being moved. You can easily find out the actual direction of these coordinates by running a test code, which we will cover in the next section.
Some applications might use all three outputs, while others might use only some of them.
Pinout
A joystick uses five pins.
- GND pin: connect to GND (0V)
- VCC pin: connect to VCC (5V)
- VRX pin: gives an analog value for the horizontal position (X-coordinate).
- VRY pin: gives an analog value for the vertical position (Y-coordinate).
- SW pin: comes from the joystick's pushbutton. It is usually open. Using a pull-up resistor makes this pin HIGH when not pressed and LOW when pressed.
How It Works
- Left/Right Movement
- When you move the joystick left or right, it changes the electrical signal (voltage) at the VRX pin.
- Moving to the left lowers the voltage to 0 volts.
- Moving to the right increases the voltage to 5 volts.
- The Arduino reads this voltage and converts it to a number between 0 and 1023. So, 0V corresponds to 0, and 5V corresponds to 1023.
- Up/Down Movement:
- Similarly, moving the joystick up or down changes the voltage at the VRY pin.
- Moving up lowers the voltage to 0 volts.
- Moving down increases the voltage to 5 volts.
- The Arduino reads this voltage too, converting it to a number between 0 and 1023, just like with the VRX pin.
- Combined Movements:
- When you move the joystick in any direction (not just purely left/right or up/down), it changes the voltage at both VRX and VRY pins based on its position along each axis.
- Pressing the Joystick:
- When you push the joystick down (like pressing a button), it activates an internal button inside the joystick.
- If you connect a pull-up resistor to the SW pin, the voltage at this pin will change from 5V to 0V when pressed.
- The Arduino reads this change as a digital signal, showing HIGH (5V) when not pressed and LOW (0V) when pressed.
In summary, moving the joystick changes voltages at VRX and VRY, which the Arduino reads as numbers between 0 and 1023. Pressing the joystick changes the voltage at the SW pin, which the Arduino reads as either HIGH or LOW.
Wiring Diagram
This image is created using Fritzing. Click to enlarge image
See The best way to supply power to the Arduino Uno R4 and other components.
How To Program For Joystick
The joystick consists of two components: an analog part (X and Y axis) and a digital part (a pushbutton).
- To read the values for the X and Y axes, simply use the function analogRead() on the analog input pin.
int xValue = analogRead(A1);
int yValue = analogRead(A0);
- For the digital part, which is a pushbutton: it's just a button. An easy and effective method is to use the ezButton library. This library helps manage button stability and also activates an internal system to keep the button stable. You can learn more in the Arduino UNO R4 - Button tutorial. We will show you how to use the code in the next part of this tutorial.
After getting the readings from analog pins, we might need to change them into manageable values. The following section will give example codes for this.
Arduino UNO R4 Code
Here are example codes for Arduino UNO R4:
- Example code: gets analog values from joystick
- Example code: gets analog values and checks button state on joystick
- Example code: changes analog value to commands: MOVE_LEFT, MOVE_RIGHT, MOVE_UP, MOVE_DOWN
- Example code: turns analog values into angles to manage two servo motors (like in a pan-tilt camera)
Reads analog values from joystick
/*
* This Arduino UNO R4 code was developed by newbiely.com
*
* This Arduino UNO R4 code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-joystick
*/
#define VRX_PIN A1 // The Arduino UNO R4 pin connected to VRX pin
#define VRY_PIN A0 // The Arduino UNO R4 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);
}
Detailed Instructions
Follow these instructions step by step:
- If this is your first time using the Arduino Uno R4 WiFi/Minima, refer to the tutorial on setting up the environment for Arduino Uno R4 WiFi/Minima in the Arduino IDE.
- Connect the joystick to Arduino UNO R4 according to the provided diagram.
- Connect the Arduino Uno R4 board to your computer using a USB cable.
- Launch the Arduino IDE on your computer.
- Select the appropriate Arduino Uno R4 board (e.g., Arduino Uno R4 WiFi) and COM port.
- Copy the code above and open it in Arduino IDE
- Click the Upload button in Arduino IDE to upload the code to your Arduino UNO R4
- Push the joystick's thumb all the way to the edge, then turn it around in a circle (either clockwise or anti-clockwise)
- Check the results on the Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno R4 WiFi' on 'COM15')
New Line
9600 baud
- When turning the joystick, keep an eye on the Serial Monitor. If the X value shows 0, remember this position as left; the opposite is right. If the Y value is 0, note this position as up; the opposite is down.
Reads analog values and reads the button state from a joystick
/*
* This Arduino UNO R4 code was developed by newbiely.com
*
* This Arduino UNO R4 code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-joystick
*/
#include <ezButton.h>
#define VRX_PIN A1 // The Arduino UNO R4 pin connected to VRX pin
#define VRY_PIN A0 // The Arduino UNO R4 pin connected to VRY pin
#define SW_PIN 2 // The Arduino UNO R4 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);
}
Detailed Instructions
- Go to the Libraries icon on the left side of the Arduino IDE.
- Look for “ezButton” and locate the button library by ArduinoGetStarted.com
- Press the Install button to add the ezButton library.
- Copy the code and open it in Arduino IDE.
- Click the Upload button in Arduino IDE to upload the code to the Arduino UNO R4.
- Move the joystick thumb left, right, up, or down.
- Press down on the top of the joystick.
- Check the results on the Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno R4 WiFi' on 'COM15')
New Line
9600 baud
Converts analog value to MOVE LEFT/RIGHT/UP/DOWN commands
/*
* This Arduino UNO R4 code was developed by newbiely.com
*
* This Arduino UNO R4 code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-joystick
*/
#define VRX_PIN A1 // The Arduino UNO R4 pin connected to VRX pin
#define VRY_PIN A0 // The Arduino UNO R4 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
}
}
Detailed Instructions
- Copy the code above and open it with Arduino IDE.
- Click the Upload button in Arduino IDE to upload the code to Arduino UNO R4.
- Move the joystick thumb to the left, right, up, down, or any other direction.
- Check the results on the Serial Monitor.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno R4 WiFi' on 'COM15')
New Line
9600 baud
※ NOTE THAT:
Sometimes, there might be no command, one command, or two commands at the same time (for example, UP and LEFT together).
Converts analog values to angles to control two servo motors
You can find information on the Arduino UNO R4 - Joystick controls Servo Motor tutorial.
Video Tutorial
The below video demo uses the below code:
/*
* This Arduino UNO R4 code was developed by newbiely.com
*
* This Arduino UNO R4 code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* https://newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-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);
}