9. Wearables¶
Research¶
This week, we worked on electronic wearables, devices that you can wear, like smartwatches, fitness trackers, or even clothes with built-in technology. These wearables are designed to make life easier or more fun by tracking your health, keeping you connected, or even just looking cool.
We explored how these devices work, what kinds of sensors and technology they use, and how they’re powered. By the end of the week, we had a better understanding of how wearable tech can improve our daily lives, from monitoring fitness to staying connected, and how designers balance tech and style.
Dominic Elvin
Dominic Elvin’s work with technology is quite unique and blends art with cutting-edge innovations. While he's best known for his traditional fine art practice, he has also explored the intersection of art and technology, particularly in areas like interactive installations, digital media, and wearable tech.
In some of his works, Elvin explores wearable tech, combining fashion and electronics. These pieces might include clothing or accessories with embedded sensors, lights, or even sensors that track and respond to the wearer's movements, emotions, or physiological data. These wearable artworks often explore themes of personal identity and the way technology influences how we present ourselves to the world.
Ying Gao
Ying Gao is an artist who blends fashion with technology, creating interactive clothing that responds to the environment or the wearer. Her designs often feature smart textiles that can change shape, color, or movement based on things like sound, light, or motion. For example, she has created dresses that react to noise by moving or shifting. Gao's work explores themes like identity and transformation, showing how fashion can change and evolve with technology. Overall, her pieces mix art, technology, and wearable design to create a new, interactive experience for the wearer and the viewer.
Tools¶
Adafruit Circuit Playground¶
The Adafruit Circuit Playground is a beginner-friendly development board designed for learning electronics and programming. It comes with built-in sensors (like LEDs, accelerometer, temperature sensor, light sensor, and more) that allow you to create interactive projects without needing extra components. It’s easy to program using MakeCode (block-based coding) or Arduino IDE. The board is perfect for creating projects like wearables.
The Circuit Playground has a variety of sensors and components built directly onto the board, including:
- LEDs: 10 RGB LEDs that you can program to light up in different colors and patterns.
- Accelerometer: Detects motion and orientation, allowing you to create projects that respond to movement.
- Temperature Sensor: Measures the temperature around the board.
- Light Sensor: Detects ambient light levels.
- Button: A tactile button for user input.
- Sound Sensor: Detects sound levels in the environment.
- Touch Sensors: Each of the 10 pads on the board can be used as a capacitive touch sensor.
Starting¶
To work with Adafruit via Arduino code you will need to download a library than later on you must include on your code.
Here's how you can download the library.
- Navigate to the Releases page
- Download the latest release
- Extract the zip file
- In the Arduino IDE, navigate to Sketch > Include Library > Add .ZIP Library
Once you've downloaded and you are ready to start with your code open the Arduino IDE. On top of the code just write the following:
Finding the perfect code¶
Before starting our project we needed to create the code that would do exactly what we had in mind. It was not easy since we wanted to combine many features together so we started off easy.
Magnet sensor
For the first part of the code we wanted to use a sensor that reacts when a magnetic field is nearby. We attached the sensor to the Adafruit Circuit Playground and started coding. In this example we can see how the sensor reacts when a magnet is nearby. For us to know if the code was really working, we added the phrase "A magnet is near" to show up.
#include <Adafruit_CircuitPlayground.h>
int ANALOG_MAG_PIN = 10; //The analog pin for the analog output of the sensor
int DIGITAL_MAG_PIN = 9; //The digital pin for the digital output of the sensor
int mag_D; //Variable to store the digital reading
int mag_A; //Variable to store the analog
//Setup the Arduino
void setup()
{
Serial.begin(9600); //Start the serial connection to the computer
pinMode(ANALOG_MAG_PIN, INPUT); //Make the pin you used an input on the Arduino
pinMode(DIGITAL_MAG_PIN, INPUT); //Make the pin you used an input on the Arduino
CircuitPlayground.begin();
}
//This code will run infinitely
void loop()
{
mag_D = digitalRead(DIGITAL_MAG_PIN); //Read the signal from your sensor
mag_A = analogRead(ANALOG_MAG_PIN); //Read the signal from your
delay(100); //Add in 100mS of delay to slow the readings to 10 times per second
if(mag_D == HIGH)
{
Serial.print("A magnet is near: "); //Print out the results
Serial.println(mag_A); //Print the raw analog output
}
else
{
Serial.print("No magnet detected: "); //Print out the results
Serial.println(mag_A); //Print the raw analog output
}
}
Magnet sensor + light output
Once we had our sensor working it was time to turn on/off the lights. We used the built in neopixels as a reaction to the magnet. When the sensor detected a magnet nearby the neopixel would light up.
#include <Adafruit_CircuitPlayground.h>
int ANALOG_MAG_PIN = 10; //The analog pin for the analog output of the sensor
int DIGITAL_MAG_PIN = 9; //The digital pin for the digital output of the sensor
int mag_D; //Variable to store the digital reading
int mag_A; //Variable to store the analog
//Setup the Arduino
void setup()
{
Serial.begin(9600); //Start the serial connection to the computer
pinMode(ANALOG_MAG_PIN, INPUT); //Make the pin you used an input on the Arduino
pinMode(DIGITAL_MAG_PIN, INPUT); //Make the pin you used an input on the Arduino
CircuitPlayground.begin();
}
//This code will run infinitely
void loop()
{
mag_D = digitalRead(DIGITAL_MAG_PIN); //Read the signal from your sensor
mag_A = analogRead(ANALOG_MAG_PIN); //Read the signal from your
delay(100); //Add in 100mS of delay to slow the readings to 10 times per second
if(mag_D == HIGH)
{
Serial.print("A magnet is near: "); //Print out the results
Serial.println(mag_A); //Print the raw analog output
CircuitPlayground.setPixelColor(0, 178, 34, 34);
CircuitPlayground.setPixelColor(1, 178, 34, 34);
CircuitPlayground.setPixelColor(2, 178, 34, 34);
CircuitPlayground.setPixelColor(3, 178, 34, 34);
CircuitPlayground.setPixelColor(4, 178, 34, 34);
CircuitPlayground.setPixelColor(5, 178, 34, 34);
CircuitPlayground.setPixelColor(6, 178, 34, 34);
CircuitPlayground.setPixelColor(7, 178, 34, 34);
CircuitPlayground.setPixelColor(8, 178, 34, 34);
CircuitPlayground.setPixelColor(9, 178, 34, 34);
}
else
{
Serial.print("No magnet detected: "); //Print out the results
Serial.println(mag_A); //Print the raw analog output
CircuitPlayground.clearPixels();
}
}
Magnet sensor + LED and light output
It was time to step up the game and add a digital output. for that we chose an LED light. We connected the LED to digital pin and made it work. Our goal was to connect at least five LEDs to that same pin.
#include <Adafruit_CircuitPlayground.h>
int ANALOG_MAG_PIN = 10; //The analog pin for the analog output of the sensor
int DIGITAL_MAG_PIN = 9; //The digital pin for the digital output of the sensor
int led_Pin = 3;
int mag_D; //Variable to store the digital reading
int mag_A; //Variable to store the analog
//Setup the Arduino
void setup()
{
Serial.begin(9600); //Start the serial connection to the computer
pinMode(ANALOG_MAG_PIN, INPUT); //Make the pin you used an input on the Arduino
pinMode(DIGITAL_MAG_PIN, INPUT); //Make the pin you used an input on the Arduino
CircuitPlayground.begin();
pinMode(led_Pin, OUTPUT);
}
//This code will run infinitely
void loop()
{
mag_D = digitalRead(DIGITAL_MAG_PIN); //Read the signal from your sensor
mag_A = analogRead(ANALOG_MAG_PIN); //Read the signal from your
delay(100); //Add in 100mS of delay to slow the readings to 10 times per second
if(mag_D == HIGH)
{
Serial.print("A magnet is near: "); //Print out the results
Serial.println(mag_A); //Print the raw analog output
CircuitPlayground.setPixelColor(0, 178, 34, 34);
CircuitPlayground.setPixelColor(1, 178, 34, 34);
CircuitPlayground.setPixelColor(2, 178, 34, 34);
CircuitPlayground.setPixelColor(3, 178, 34, 34);
CircuitPlayground.setPixelColor(4, 178, 34, 34);
CircuitPlayground.setPixelColor(5, 178, 34, 34);
CircuitPlayground.setPixelColor(6, 178, 34, 34);
CircuitPlayground.setPixelColor(7, 178, 34, 34);
CircuitPlayground.setPixelColor(8, 178, 34, 34);
CircuitPlayground.setPixelColor(9, 178, 34, 34);
digitalWrite(led_Pin, HIGH);
}
else
{
Serial.print("No magnet detected: "); //Print out the results
Serial.println(mag_A); //Print the raw analog output
CircuitPlayground.clearPixels();
digitalWrite(led_Pin, LOW);
}
}
Angle sensor
For our project we wanted to incorporate one more sensor. For that we decided to use a built in sensor. This sensor can detect the angle the Circuit Playground is in. You can define a spectrum of angles in which the sensor would react. Our goal was to use this sensor for the lights to change color.
#include <Adafruit_CircuitPlayground.h>
#define SLOUCH_ANGLEMAX 30
#define SLOUCH_ANGLEMIN -10
#define GRAVITY 9.80665 // standard gravity (m/s^s)
#define RAD2DEG 52.29578 // convert radians to degrees
int currentAngle;
//int currentAngle1;
//int currentAngle2;
///////////////////////////////////////////////////////////////////////////////
void setup() {
Serial.begin(9600);
// Initialize Circuit Playground
CircuitPlayground.begin();
}
///////////////////////////////////////////////////////////////////////////////
void loop() {
// Compute current angle
//currentAngle1 = RAD2DEG * asin(-CircuitPlayground.motionZ() / GRAVITY);
//currentAngle2 = RAD2DEG * atan2(-CircuitPlayground.motionZ() ,
// Compute current angle
currentAngle = RAD2DEG * asin(-CircuitPlayground.motionZ() / GRAVITY);
// Check if slouching
if (currentAngle > SLOUCH_ANGLEMAX || currentAngle <SLOUCH_ANGLEMIN ) {
// Sound alarm
CircuitPlayground.setPixelColor(0, 184, 134, 11);
CircuitPlayground.setPixelColor(1, 178, 34, 34);
CircuitPlayground.setPixelColor(2, 184, 134, 11);
CircuitPlayground.setPixelColor(3, 178, 34, 34);
CircuitPlayground.setPixelColor(4, 184, 134, 11);
CircuitPlayground.setPixelColor(5, 178, 34, 34);
CircuitPlayground.setPixelColor(6, 184, 134, 11);
CircuitPlayground.setPixelColor(7, 178, 34, 34);
CircuitPlayground.setPixelColor(8, 184, 134, 11);
CircuitPlayground.setPixelColor(9, 178, 34, 34);
}
else{
CircuitPlayground.clearPixels();
}
// Print current angle
Serial.println(currentAngle);
// real movement
delay(50);
}
Combining all
Once we had all our components and codes working it was time to combine them all together. We wanted to use the magnet as a button, the magnetic field sensor would detect the magnet and this would trigger all the lights. The built in neopixels and LEDs would light up. As an added feature we would have the angle detecting sensor. This sensor would trigger the color change. Our goal was to make the angle sensor work only once the magnet was detected.
#include <Adafruit_CircuitPlayground.h>
#define SLOUCH_ANGLEMAX 200
#define SLOUCH_ANGLEMIN -40
#define GRAVITY 9.80665 // standard gravity (m/s^s)
#define RAD2DEG 52.29578 // convert radians to degrees
int currentAngle;
int ANALOG_MAG_PIN = 10; //The analog pin for the analog output of the sensor
int DIGITAL_MAG_PIN = 9; //The digital pin for the digital output of the sensor
int led_Pin = 3;
int mag_D; //Variable to store the digital reading
int mag_A; //Variable to store the analog
//Setup the Arduino
void setup()
{
Serial.begin(9600); //Start the serial connection to the computer
pinMode(ANALOG_MAG_PIN, INPUT); //Make the pin you used an input on the Arduino
pinMode(DIGITAL_MAG_PIN, INPUT); //Make the pin you used an input on the Arduino
CircuitPlayground.begin();
pinMode(led_Pin, OUTPUT);
}
//This code will run infinitely
void loop()
{
mag_D = digitalRead(DIGITAL_MAG_PIN); //Read the signal from your sensor
mag_A = analogRead(ANALOG_MAG_PIN); //Read the signal from your
currentAngle = RAD2DEG * asin(-CircuitPlayground.motionZ() / GRAVITY);
delay(100); //Add in 100mS of delay to slow the readings to 10 times per second
if(mag_D == HIGH)
{
Serial.print("A magnet is near: "); //Print out the results
Serial.println(mag_A); //Print the raw analog output
CircuitPlayground.setPixelColor(0, 178, 34, 34);
CircuitPlayground.setPixelColor(1, 178, 34, 34);
CircuitPlayground.setPixelColor(2, 178, 34, 34);
CircuitPlayground.setPixelColor(3, 178, 34, 34);
CircuitPlayground.setPixelColor(4, 178, 34, 34);
CircuitPlayground.setPixelColor(5, 178, 34, 34);
CircuitPlayground.setPixelColor(6, 178, 34, 34);
CircuitPlayground.setPixelColor(7, 178, 34, 34);
CircuitPlayground.setPixelColor(8, 178, 34, 34);
CircuitPlayground.setPixelColor(9, 178, 34, 34);
digitalWrite(led_Pin, HIGH);
if (currentAngle > SLOUCH_ANGLEMAX || currentAngle <SLOUCH_ANGLEMIN ) {
CircuitPlayground.setPixelColor(0, 184, 134, 11);
CircuitPlayground.setPixelColor(1, 184, 134, 11);
CircuitPlayground.setPixelColor(2, 184, 134, 11);
CircuitPlayground.setPixelColor(3, 184, 134, 11);
CircuitPlayground.setPixelColor(4, 184, 134, 11);
CircuitPlayground.setPixelColor(5, 184, 134, 11);
CircuitPlayground.setPixelColor(6, 184, 134, 11);
CircuitPlayground.setPixelColor(7, 184, 134, 11);
CircuitPlayground.setPixelColor(8, 184, 134, 11);
CircuitPlayground.setPixelColor(9, 184, 134, 11);
}
}
else
{
Serial.print("No magnet detected: "); //Print out the results
Serial.println(mag_A); //Print the raw analog output
CircuitPlayground.clearPixels();
digitalWrite(led_Pin, LOW);
}
}
Battery powered
As a final step we needed to make the Adafruit work without the computer power. For that we attached a battery and we were all set!
Final Project¶
Design¶
This week, Ailin Sandlien and I designed a wearable bag that lights up and reacts to its environment using different sensors. The bag was made out of bioplastic, which we created during the biofabricating week, adding a sustainable, eco-friendly element to our design.
Key Elements
- LEDs: The bag includes LED lights that illuminate in response to inputs from sensors, allowing for dynamic light patterns or effects.
- Sensors: The bag reacts to various external stimuli using sensors. These sensors detect movement and react to magentic fields that trigger the lights to change.
- Magnet: A magnet was incorporated into the design, triggering one of the sensors, turning the lights on/off.
- Circuit Playground: The Adafruit Circuit Playground was used to control the sensors, LEDs, and other components. This microcontroller made it easy to program the bag to respond to different actions or inputs in real time.
- Battery: The bag is powered by a battery, which provides the necessary power for the LEDs, sensors, and microcontroller. This makes it fully portable and wearable.
- Conductive Thread: To connect the various electronic components, we used conductive thread, which allows us to sew the components (like LEDs and sensors) directly into the fabric of the bag.
The wearable bag not only serves as a functional accessory but also as a interactive, tech-enabled fashion piece. By integrating bioplastic material, we’ve merged sustainability with modern technology, creating a unique item that can react to its surroundings and enhance the user experience.
Code¶
Here's the code we used for our final project.
#include <Adafruit_CircuitPlayground.h>
#define SLOUCH_ANGLEMAX 200
#define SLOUCH_ANGLEMIN -40
#define GRAVITY 9.80665 // standard gravity (m/s^s)
#define RAD2DEG 52.29578 // convert radians to degrees
int currentAngle;
int ANALOG_MAG_PIN = 10; //The analog pin for the analog output of the sensor
int DIGITAL_MAG_PIN = 9; //The digital pin for the digital output of the sensor
int led_Pin = 3;
int mag_D; //Variable to store the digital reading
int mag_A; //Variable to store the analog
//Setup the Arduino
void setup()
{
Serial.begin(9600); //Start the serial connection to the computer
pinMode(ANALOG_MAG_PIN, INPUT); //Make the pin you used an input on the Arduino
pinMode(DIGITAL_MAG_PIN, INPUT); //Make the pin you used an input on the Arduino
CircuitPlayground.begin();
pinMode(led_Pin, OUTPUT);
}
//This code will run infinitely
void loop()
{
mag_D = digitalRead(DIGITAL_MAG_PIN); //Read the signal from your sensor
mag_A = analogRead(ANALOG_MAG_PIN); //Read the signal from your
currentAngle = RAD2DEG * asin(-CircuitPlayground.motionZ() / GRAVITY);
delay(100); //Add in 100mS of delay to slow the readings to 10 times per second
if(mag_D == HIGH)
{
Serial.print("A magnet is near: "); //Print out the results
Serial.println(mag_A); //Print the raw analog output
CircuitPlayground.setPixelColor(0, 178, 34, 34);
CircuitPlayground.setPixelColor(1, 178, 34, 34);
CircuitPlayground.setPixelColor(2, 178, 34, 34);
CircuitPlayground.setPixelColor(3, 178, 34, 34);
CircuitPlayground.setPixelColor(4, 178, 34, 34);
CircuitPlayground.setPixelColor(5, 178, 34, 34);
CircuitPlayground.setPixelColor(6, 178, 34, 34);
CircuitPlayground.setPixelColor(7, 178, 34, 34);
CircuitPlayground.setPixelColor(8, 178, 34, 34);
CircuitPlayground.setPixelColor(9, 178, 34, 34);
digitalWrite(led_Pin, HIGH);
if (currentAngle > SLOUCH_ANGLEMAX || currentAngle <SLOUCH_ANGLEMIN ) {
CircuitPlayground.setPixelColor(0, 184, 134, 11);
CircuitPlayground.setPixelColor(1, 184, 134, 11);
CircuitPlayground.setPixelColor(2, 184, 134, 11);
CircuitPlayground.setPixelColor(3, 184, 134, 11);
CircuitPlayground.setPixelColor(4, 184, 134, 11);
CircuitPlayground.setPixelColor(5, 184, 134, 11);
CircuitPlayground.setPixelColor(6, 184, 134, 11);
CircuitPlayground.setPixelColor(7, 184, 134, 11);
CircuitPlayground.setPixelColor(8, 184, 134, 11);
CircuitPlayground.setPixelColor(9, 184, 134, 11);
}
}
else
{
Serial.print("No magnet detected: "); //Print out the results
Serial.println(mag_A); //Print the raw analog output
CircuitPlayground.clearPixels();
digitalWrite(led_Pin, LOW);
}
}
Laser cutting¶
To create the bag, we started by designing the patterns in Rhinoceros 3D. This allowed us to carefully plan and customize the shape and structure of the bag, ensuring that all components would fit together properly. Once the design was finalized, we used a laser cutter to cut the patterns from bioplastic with precision. The laser cutter provided clean, accurate cuts, which were essential for assembling the bag.
Material: Bioplastic
Thickness: 1 mm
CUT
Speed: 70
Min. power: 33
Max. power: 35
DOUBLE PASS
You can download here the Rhinoceros document!
Assembling¶
After cutting, we began the assembly process, where we carefully put the pieces together, integrated the electronics, and started bringing the bag to life.
