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.

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

https://p5js.org/download/

Atom editor

https://atom.io/

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.

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.

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.

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

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".

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:

http://learn.adafruit.com/system/assets/assets/000/013/042/original/GUI_EZKey_remapper_12-20-13.zip?1387568625

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.

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.

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.