Bluetooth Enabled Joystick Controller



Introduction: Bluetooth Enabled Joystick Controller

About: I enjoy making things that make noise.

Amaze your friends and astound your family, when they check out the "HypnoEllipse", an interactive A/V web app. Build a Bluetooth enabled joystick enclosure, connect it to the web browser, and take turns performing self hypnosis.

This is a Bluetooth connected Joystick, that sends HID (keyboard/mouse) messages to a p5.js sketch, which presents a spinning optical illusion and swirling sound sample.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: Materials Needed


solder iron


wire strippers


drill bit 1/4"

hole saw 3/4”


Bluetooth enabled computer


Bluefruit EZ-Key

mini modular breadboard

jumper wires


USB micro-B breakout board

5vdc rechargeable microUSB battery


Hypnoellipse web app

Processing 1.5.1 (to remap EZ Key)

Control P5 (Processing library)


If you want make your own version of the Hypnoellipse!


Atom editor

Step 2: Prepare the Joystick to Bluefruit EZ Key Jumper Wires

Cut and strip one end of each of the four pairs of differently colored jumper wires.

Each of the color pairs correspond to the unique (Left, Right, Up, Down) joystick direction - one of each pair goes to an EZ Key input, and the other to GND.

With this mind, carefully solder the jumper wires to joystick.

Step 3: Prep Enclosure

You will need one 1/2" hole on the side of the enclosure for the microUSB cable and four 1/4" holes in the top cover for mounting the joystick. The joystick itself will need a 3/4" hole cut.

I used a piece of paper and pencil to trace the holes required by the joystick assembly, before actual drilling into the top of the plastic enclosure.

Step 4: Install Joystick, Bluefruit EZ Key, and USB Breakout Board

Be sure to determine carefully how the joystick's four uniquely colored wire jumpers connect to the pins #0 - #4 on the EZ Key. This defines how the four microswitches on the joystick will alter the values of mouseX and mouseY in the p5.js sketch.

Once you determine the orientation of your enclosure, proceed clockwise around the joystick connections, attaching the jumpers to the inputs of the EZ Key, and revise as necessary (trial and error method!).

The ground pins from the joystick form a ground bus along with a ground pin of the Bluefruit EZ Key.

The ground and +5vdc from the microUSB connector will also connect to the Bluefruit EZ Key.

Step 5: EZ Key GUI

You will need to use an older version of Processing 2.2.1 to run this GUI tool.

The joystick up/down/left/right contacts will emulate mouseX and mouseY movements in order to control the p5.js sketch (HypnoEllipse).

This Adafruit tutorial provides all the necessary information to use the Bluefruit EZ-Key:

Step 6: Power and Pair Bluefruit EZ Key

Power up the Bluefruit EZ-Key and press the pair button.

You ought to see the red LED blink. Next press the mini button on the EZ Key for 5 seconds and release, this will erase previous pairing information and let you re-pair to your computer. The red LED will now blink.

Turn Bluetooth on in System Preferences and click "Set Up New Device".

Let the assistant run until it locates and displays the EZ-Key module - select it and click "Continue".

Step 7: Remapping the Buttons on the Bluefruit EZ-Key

In the screenshot note the mouseX and mouseY values associated with the key pins:

pin 0: x5

pin 1: x-5

pin2: y5

pin3: y-5

Download the ControlP5 LIbrary:

Download the zip file with the wireless remapper code:

Uncompress and open the GUI_EZKey_remapper.pde in Processing.

Doublecheck that the Bluefruit is paired to your computer.

Select Sketch -> Run to start the graphical remapper.

Now choose the pins and using the menus select the mouse reports.

Next click "SEND_MAP" to send it to your Bluefruit EZ-Key.

A text report in the Processing window should indicate that it has found a Bluefruit and that it sent data with a Checksum Match.

Step 8: Control Existing P5.js Sketch With Firefox Web Browser in Full Screen

Here is my p5.js sketch hosted on Netlify:

You can experiment with your mouse, before building and connecting the joystick interface, to see and hear the audiovisual pattern variations.

Step 9: Edit, Revise, or Create Your Own Web App

Here is the code for the web app itself:

You can easily develop your own version, trying changing the values in lines 44, 51, and 66 of the sketch.js - check out the commented out lines for examples of this.

Be the First to Share


    • Backyard Contest

      Backyard Contest
    • Silly Hats Speed Challenge

      Silly Hats Speed Challenge
    • Finish It Already Speed Challenge

      Finish It Already Speed Challenge