Introduction: Bluetooth Enabled Joystick Controller
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.
Step 1: Materials Needed
Tools
solder iron
solder
wire strippers
drill
drill bit 1/4"
hole saw 3/4”
Parts
Bluetooth enabled computer
Enclosure
https://www.adafruit.com/product/905
Bluefruit EZ-Key
https://www.adafruit.com/product/1535
mini modular breadboard
https://www.sparkfun.com/products/12047
jumper wires
https://www.sparkfun.com/products/8431
joystick
https://www.sparkfun.com/products/9182
USB micro-B breakout board
https://www.sparkfun.com/products/1833
5vdc rechargeable microUSB battery
https://www.sparkfun.com/products/14167
SOFTWARE
Hypnoellipse web app
https://hypnoellipse.netlify.com/
Processing 1.5.1 (to remap EZ Key)
https://processing.org/download/?processing
Control P5 (Processing library)
http://www.sojamo.de/libraries/controlP5/
Firefox
https://www.mozilla.org/en-US/firefox/new/
If you want make your own version of the Hypnoellipse!
p5.js
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:
https://learn.adafruit.com/introducing-bluefruit-ez-key-diy-bluetooth-hid-keyboard
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:
http://www.sojamo.de/libraries/controlP5/
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:
https://hypnoellipse.netlify.com
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:
https://github.com/dkonha01/HypnoEllipse
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.
