Art Glove

The Art Glove is a wearable glove that contains different types of sensors to control art graphics through a Micro:bit and p5.js The fingers utilize bend sensors that control r,g,b values, and the accelerometer in the Micro:bit controls x,y coordinates for the graphics. I created this project as my term project for my Wearable Technology Class as a senior in the Technology, Arts, and Media program at CU Boulder.

• Gardening gloves
• BBC Micro:Bit
• 3-4 Flex sensors
• 10K Ohm Resistors
• Hook-up Wire (Red & Black)
• Wire Clippers
• Breadboard
• Alligator clips (double sided & single sided)
• Solder
• Soldering Iron
• Needle
• Thread
• Wax Paper
• Tape
• Scissors
• Pen and Pencil

First, we're going to focus on making the hardware. This way when we get to coding we have the actual glove component to use and test.

1. To start we're going to make the tracks on the fingers that will keep the bend sensors in place. Having these tracks allows the bend sensors to move back and forth slightly while also keeping them secure to the finger to bend. First, flip your glove inside out.
2. Take a bend sensor and place it in the middle ridge of the finger. Using a pen, outline the bend sensor
3. Slip your thread through your needle. Give yourself a generous piece. Tie a knot at the end of the thread.
4. Starting at the top and on the line, just blow the arc of the bend sensor, slip the needle through the glove through the inside, and push it back through on the parallel line. Pull the needle all the way through so the knot sits on the line you drew.
5. Pulling tightly, make 2-3 knots on the other side.This will ensure the thread will not come out. Make sure its tight so that the bend sensor will be secure against your finger
6. Cut the thread leaving a few cm. of thread at the end so that the knot doesn't come undone.
7. Repeat steps 2-6 for all of the fingers you're attaching flex sensors to until it looks like the third to last image.
8. Flip your glove back so its turned in the correct way. Slip your bend sensors through the tracks to make sure they fit correctly on your hand

To see the outputs from our sensors we're going to be using serial communication. You'll see how to set up the code in Makecode in the next step but first we're going to learn how to read it from our terminal. (Note: I'm using a Mac so these steps may be different depending on your operating system. For other operating systems look here).

1. Plug in your Micro:bit
2. Open your terminal
3. type 'ls /dev/cu.*'
4. You should see something that looks like '/dev/cu.usbmodem1422' but the exact number will depend on your computer
5. Once you're running code, typing 'screen /dev/cu.usbmodem1422 115200' (with your specific serial port number) will give you your Micro:bit's serial output
6. Your output should look something like the picture above, depending on how you formatted your output!

Before soldering all our components together we're going to prototype the circuit and write a few lines of example code to read our sensor values and make sure our components work correctly.

1. Using the circuit diagram above, prototype your circuit on the breadboard using jumper wires, resistors, the one sided alligator clips, and your Micro:bit.
2. Connect your bend sensors to pins 0, 1, & 2.
3. I used this code to test my flex sensors
4. Bend them a few times to see their readings and make sure they're working correctly

In the code, the last line "serial.writeLine" is where we are writing to our serial output. You can format this output however you want, I separated every variable with a comma, and then split it on a comma later, but this part is up to you.

(Note: After I did this step I found out one of my bend sensors had a chip in the conductive paint and therefore was not getting good readings. That's why some of the pictures show me working with 4 sensors. After finding this out I went down to just three sensors on the pointer, middle, and ring finger. I also found my bend sensors had the most wide range of reading bending the "opposite" way which is why I put them on the glove with the resistive paint facing down.)

At this stage I also chose to test the accelerometer and light sensor on the Micro:bit

1. Connect your Micro:bit to your computer
2. Download this code
3. Then I tested the accelerometer, light, and bend sensors together with this code

(Note: It was at this point I figured out you can't use the pins and light sensor at the same time so I didn't use the light sensor in my final, but I wanted you to be able to see how to read the light sensor if you need!)

Now we're going to start soldering our components together! This is an exciting part, but it's important to go slow and check that everything's still working as you go so that you don't get to the end, have something not work, and not be sure where it went wrong! I suggest using your double sided alligator clips here to check each sensor still works once the wires and resistors are soldered together.

1. Take your bend sensor and tape or put a heavy object on it to hold it in place.
2. Take your 10K Ohm resistor and cut most of the end off so that the lead is about as long as the lead on the bend sensor.
3. Take your soldering iron and press it on both the resistor and bend sensor lead until they're hot
4. Take your solder and press it into the hot iron as it starts to melt over the components. You just need enough to cover the wires.
5. Remove the iron. Here I put on the other gardening glove and held the resistor and wire in place while the solder cooled.
6. Clip a long piece of red wire and place it at the solder joint where the resistor and bend sensor meet. Repeat steps 4-5. This is the analog pin wire.
7. Clip a long piece of black wire and place it at the end of the other lead. Repeat steps 4-5. This is your ground wire.
8. Clip a long piece of red wire and clip the other end of the resistor so it's about as long as the previous side. Repeat steps 4-5. This is your power wire.
9. Repeat steps 1-8 for the rest of your bend sensors.
10. Leave your wires long so that you have room to work with to make them the correct length later when putting them on the Micro:bit.

Now that our sensors are ready, we're going to start soldering to the Micro:bit and assembling the glove. Remember again to test as you go, using alligator clips to make sure the components are still working after you solder them together.

1. Lay the sensors and Micro:bit on the glove to get an idea of where the wires need to go and how long they need to be.
2. Wrap a red wire around the power pin. Use wire cutters to strip the wire and leave open gaps that you'll attach your wire to. Do this for the ground wire as well.
3. Outline the glove you're not using. This will help us solder everything together and get the length of things correct. You'll be doing everything backwards though so double check you're soldering things on the correct way!
4. Place your Micro:bit approximately where you want it to lay on your hand. Make marks were the ground and power wires sit.
5. Tape the wire, power or ground, in place.
6. Tape your bend sensor in place.
7. Cut the power wire so that it goes just past it's mark on the over all power line.
8. Solder these pieces together.
9. Repeat steps 5-8 for the other power wires, and for the ground wires.
10. Take the Micro:bit and place it under the newly soldered wires. Solder the power and ground to the correct pins.
11. Clip the analog wires so that they go just past the end of the pins and could wrap around to the front side.
12. Solder the wires to the correct pins.
13. I found that my readings were best and most consistent when all of the wires (power, ground, and analog) touched both the front and the back of the pins.
14. One track by one track, push the bend sensors up the fingers simultaneously.
15. Once the sensors are in place, put the glove on and make sure the fit is right. If you need to add tracks, or fix their placement, do so now.
16. Once the sensors lie where you want them to, make note of where to tie the Micro:bit in place. You can use the small holes on either side of the A and B buttons or use the holes for the pins. Use your needle and thread to tie it into place on your hand

Congrats! The hardware components for the glove are now complete!

Now I'm going to be walking you through the Micro:bit code. You are more than welcome to make this code what you want but I wanted to go through and explain everything so you can see what I did, how I did it, and why! You can find my code here.

1. Lines 1-31. Here I am using preset functions the Micro:bit comes with.
   • Pressing A decreases the count, which is the selection of available graphics. Once you reach 0, it goes back to the highest number.
   • Pressing B increases the count, once you reach the highest number of available graphics, it goes back to 0.
   • If the current graphic you have selected is not the one that is currently being drawn, pressing A and B simultaneously selects the new graphic.
   • If the current graphic you have selected is the same one as the one thats being drawn, pressing A and B simultaneously fills the shape if it can have a fill.
   • Shaking the Micro:bit sets the erase variable to 1 which tells p5.js to erase the canvas and start on black. It pauses the run for a second and then sets it back to 0 so that the user can continue drawing.
2. Lines 32-64 are setting up my variables. It was important to use a lot of variables so that most of the values weren't hardcoded. They can change with the glove and also easily be changed in one place instead of updating a bunch of values all over the place. I'll highlight a few of the important ones.
   • The canvas size is one that's nice to have in one variable to update depending on the size of my canvas. Same with the shapeHigh. As I add or get rid of graphics I can update that number here.
   • The high and low variables let me keep track of the current high and low for sensors and have an continuously calibrating range. This is important since each person who wears the gloves will have different range of motion and therefore different highs and lows that they are able to reach.
3. Lines 66-68 are reading in the analog values from the pins for the flex sensors
4. Lines 69-74 are calibrating the high value for the pointer finger.
   • If a new high is reached, it sets this as the high.
   • Recalibrates the range of that finger.
   • Uses that new range for the color mapping
5. Lines 75-80 are calibrating the low value for the pointer finger.
6. Lines 81-104 are doing the same thing as 4 & 5 for the middle and ring fingers.
7. Lines 105-107 are mapping my flex sensor values to color values 0-255 (or colorLow to colorHigh, if I'm not doing the full range)
   • The built in map function from Makecode wasn't giving me a great mapping, given the limited range I was getting from my sensors. So I made my own mapping function.
   • Here's how it works. The input range of each finger is determined by it's (highest value - it's lowest value). The color range, which is also the (highest color value - lowest color value) is divided by each fingers range. This number is rounded the lowest whole number and is the quotient.
   • The (actual sensor value - the lowest sensor value) gives you the value within the range. Multiplying this by quotient we found above and adding the lowest color values gives you a mapped value from the sensor, to the color, within the color range.
8. Line 109 is reading in the pitch value (up and down).
9. Lines 110-115 are calibrating the high and low for this value
10. Line 116 is reading in the roll value (left and right).
11. Lines 117-122 are calibrating the high and low for this value
12. Lines 123-126 map the pitch and roll values to the canvas size and round them to whole numbers.
13. Line 127 writes the variables to the serial output using serial.writeLine, separating every value by a comma and space ",", to parse with later.

Once you have the code how you like it, download it and drag it from your downloads to your Micro:bit (you should see it on "Locations" on the left side of your finder) to upload the code to the Micro:bit

To communicate serially with p5.js, we need an extra tool. To learn more about what goes behind the scenes of serial communication, I suggest reading this article.

1. Download a version of the p5.js app from this link. I have the Alpha 6 version but any will work.
2. Use this p5.js template for communicating serially. To set it up insert your correct serial port name for portName on line 12. This is the name we figured out in step 2.
3. Connect your Micro:bit to your computer
4. Open the p5.js serial app.
5. Select your port from the port list and don't do anything else. Not even press open! Just select your port from your list.
6. Press run in the p5.js serial template. You should be able to see it open, and it will read you null values since we haven't written code to parse our serial output yet.

Now we can communicate serially from our Micro:bit to p5.js!

Now we're gonna jump into the p5.js code. Here is where we read in the serial output values and use them to create art.

1. As I mentioned in the previous step, make sure the portName on line 12 is your specific computer port name.
2. In the setup() function, on lines 32-33, I added the left and rightBuffer with createGraphics, I did this to separate the canvas so that one part is used for drawing, and the other part could display directions, and show which graphic you're looking at or scrolling through.
3. The draw() function calls functions I made to create the leftBuffer and rightBuffer separately. It also defines where the top left corner of each buffer starts.
4. The drawRightBuffer() function displays all the text for the directions and graphics selections
5. The drawLeftBuffer() functions displays all the graphics.
   • Line 93 randomly generates a value for the alpha value. This is so all the colors have different transparency values to make it look more interesting. Had I had 4 flex sensors I would've used the 4th one for this!
   • Line 94 sets the stroke value to the r, g, b values determined by the flex sensors
   • Lines 96-102 can be uncommented to test how the glove works without having the glove by using your mouse instead. Replace line 102 with graphics from the rest of the function.
6. 104-106 erase the canvas when the hand shakes by setting the canvas background to black
7. 108-114 control the fill of the shapes when A+B are pressed and selected and current shape are the same
8. 117-312 are where the graphics are displayed. This is the bulk of the code and the part to get creative! I suggest looking at the p5.js reference to better understand how to control the shapes. I used the roll and pitch to control x,y positions and change the size of the shapes and graphics, and as I mentioned earlier used the. bend sensors to control the color. This is where you can get creative! Play with what p5.js has to offer and come up with your own fun graphics to control! Here I also set the description for the currentShape that displays on the rightBuffer.
9. 318-460 I set the description for the selectedShape.
10. Lines 478-498 are the serialEvent() function. This is where we receive the serial data.
    • On lines 485-486 I set the proll and ppitch (previous roll and pitch) to the previous roll and pitch values.
    • On line 487 I split the data on ",". I do this because I wrote the data to be separated by commas. You would put whatever you separated your variables with here. These variables get put into the numbers array.
    • Then in lines 488-496 I set the variables to the corresponding element in the array and translate them from a string to a number. I use these variables throughout the drawLeftBuffer() function to control the graphics.

That pretty much sums the code up and finishes the project! Now we can see the glove working in action.

Here's some pictures of the finished glove as well as some art pieces it generated! Watch the demo video to see it in action!