piping 6 analog axis from ESP32 gamepad via BLE to p5.js

Gamepad Code for ESP32

 
#include <BleGamepad.h> 

BleGamepad bleGamepad;

void setup() 
{
 
  bleGamepad.begin();
}

void loop() 
{
  if(bleGamepad.isConnected()) 
  {
   // Serial.println("Press buttons 5 and 16. Move all enabled axes to max. Set DPAD (hat 1) to down right.");
    bleGamepad.press(BUTTON_5);
    bleGamepad.press(BUTTON_16);
    //bleGamepad.setAxes(32767, 32767, 32767, 32767, 32767, 32767, 32767, 32767, DPAD_DOWN_RIGHT);
    // All axes, sliders, hats etc can also be set independently. See the IndividualAxes.ino example
    
    int x = int(sin(millis()*.004) * 32767);
    bleGamepad.setX( x );

    uint16_t y = uint16_t(sin(millis()*.002) * 32767);
    bleGamepad.setY( y );

    uint16_t z = uint16_t(sin(millis()*.0012) * 32767);
    bleGamepad.setZ( z );

    uint16_t w = uint16_t(sin(millis()*.00512) * 32767);
    bleGamepad.setRX( w );

    uint16_t u = uint16_t(sin(millis()*.00012) * 32767);
    bleGamepad.setRY( u );

     uint16_t t = uint16_t(sin(millis()*.0052) * 32767);
    bleGamepad.setRZ( t );

     uint16_t r = uint16_t(sin(millis()*.00152) * 32767);
    bleGamepad.setSlider1( r );

     uint16_t r2 = uint16_t(sin(millis()*.002152) * 32767);
    bleGamepad.setSlider2( r2 );
    
    
    delay(10);

   // Serial.println("Release button 5. Move all axes to min. Set DPAD (hat 1) to centred.");
    bleGamepad.release(BUTTON_5);
    //bleGamepad.setAxes(-32767, -32767, -32767, -32767, -32767, -32767, -32767, -32767, DPAD_CENTERED);
    delay(10);
  }
}

Javascript Code / p5.js

This code needs to be put in a new js file called: „gamepad_basic.js“ and works as a kind of nice library to keep the code clean 🙂

let controllers = [];

let gamepad;

// -------------------------------------
// ---------  READ CONTROLLER ----------------
// -------------------------------------

function initGamepad(e){
  
   console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
    e.gamepad.index, e.gamepad.id,
    e.gamepad.buttons.length, e.gamepad.axes.length); 
   
  let gamepads = navigator.getGamepads();

  gamepad = gamepads[0];
  
  gamepad.btn1 = null;
  gamepad.btn2 = null;
  gamepad.btn3 = null;
  gamepad.btn4 = null;
  gamepad.btn5 = null;
  gamepad.a0 = 0;
  gamepad.a1 = 0;
  gamepad.a2 = 0;
  gamepad.a3 = 0;
  gamepad.a4 = 0;
  gamepad.a5 = 0;
  gamepad.a6 = 0;
  gamepad.a7 = 0;
  
}


// -------------------------------------
// ---------  READ CONTROLLER ----------------
// -------------------------------------


function readGamepadInput(){
 
  if(gamepad!=null){
    
    gamepad.a0 = gamepad.axes[0];
    gamepad.a1 = gamepad.axes[1];
    gamepad.a2 = gamepad.axes[2];
    gamepad.a3 = gamepad.axes[3];
    gamepad.a4 = gamepad.axes[4];
    gamepad.a5 = gamepad.axes[5];
    gamepad.a6 = gamepad.axes[6];
    gamepad.a7 = gamepad.axes[7];
    
    
    if (gamepad.buttons)
    {
    
      gamepad.btn1 = gamepad.buttons[0];
      gamepad.btn2 = gamepad.buttons[1];
      gamepad.btn3 = gamepad.buttons[2];
      gamepad.btn4 = gamepad.buttons[3];
      gamepad.btn5 = gamepad.buttons[4];
      gamepad.btn6 = gamepad.buttons[5];
    
    }
    
    
    
  }else{
    
    console.log("gamepad throws error");
  }
  
}

 
// -------------------------------------
// ---------  CONNECTION ROUTINES ----------------
// -------------------------------------

window.addEventListener("gamepadconnected", function(e) {

 
   gamepadHandler(e, true);
 
   initGamepad(e);
});


window.addEventListener("gamepaddisconnected", function(e) {
  
  console.log("Gamepad disconnected from index %d: %s",
    e.gamepad.index, e.gamepad.id);      
   
    gamepadHandler(e, false);
  
  }); 


function gamepadHandler(event, connecting) {
  let gamepad = event.gamepad;
  if (connecting) {
 		
    print("Connecting to controller "+gamepad.index)
    controllers[gamepad.index] = gamepad
  } else {
    delete controllers[gamepad.index]
  }
}

This code comes as the main sketch.js

let w,h;

function setup() {
  
  createCanvas(window.innerWidth,window.innerHeight);
  w=width;
  h=height;
}


function draw() {
   if(gamepad == undefined){return;}
  
  readGamepadInput();
  
  background(222);
  fill(22);
  noStroke();
  
  
  rect(w/2,0,w*gamepad.a0*.5,100);
  rect(w/2,100,w*gamepad.a1*.5,100);
  rect(w/2,200,w*gamepad.a2*.5,100);
  
  rect(w/2,300,w*gamepad.a3*.5,100);
  rect(w/2,400,w*gamepad.a4*.5,100);
  
  rect(w/2,500,w*gamepad.a5*.5,100);
  rect(w/2,600,w*gamepad.a6*.5,100);
  rect(w/2,700,w*gamepad.a7*.5,200);
  

}

html markup code

Do not forget to reference the right libraries and files 🙂

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
     <script src="gamepad_basic.js"></script>
    <script src="sketch.js"></script>
  </body>
</html>