Skip to content

9. Wearables

Research & Notes

References & Inspiration

- Claire Williams => her works take the form of woven antennas, plasma-filled glass sculptures, or devices that capture the invisible. Data from radio telescopes materialize in knitted stitches, sound vibrations, or light pulses. She shapes electronic sculptures to make visible electromagnetic movements ranging from the cosmos to our magnetosphere, to radio waves passing through our terrestrial environment, or those emanating from our bodies and our psychic activities. She is currently working as a duo in "Les Æthers" which collects and reactivates practices of the invisible found in the archives of occult and experimental sciences from the 19th and 20th centuries.

Her textiles work is about questions regarding open source textiles and the use of digital tools to generate new textile techniques and patterns. Inspired by analogue textile techniques and history, she is currently working with hacked knitting machines and pattern generators.

To the task

For this assigment I worked in with my Lab partnet Ainhoa. We decided to use Adafruit Circuit Playground, and create something with lights and the large bioplastic we did together for the Biofabricating week.

Hardware

Adafruit Circuit Playground

The Adafruit Circuit Playground is a 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.

variety of sensors and components:

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.

To work with Adafruit via Arduino code you need to download a library that later must include on your code.

=> 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 the code => On top of the code write the following:

Code

For our project we needed to create the code that would do exactly what we had in mind which was not easy since we wanted to combine many features together; So first, we worked all codes separatedly.

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

As a digital output we chose a 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

As a challenge we wanted to incorporate one more sensor, a built in sensor that detects the angle the Circuit Playground is in. You can define a spectrum of angles in which the sensor will 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. **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. **angle detecting sensor** => As an added feature => trigger the color change + work only when "magnet 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);
  }

}

Final 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);
  }

}

Battery powered

As a final step: make Adafruit work without the computer power therefor attached a battery

Wereable Desing

We designed 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.

Tools

  • 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: incorporated into the design to trigger 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.

Laser cutting

Material: Bioplastic
Thickness: 1 mm

CUT
Speed: 70
Min. power: 33
Max. power: 35

DOUBLE PASS

You can download here the Rhinoceros document!

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

Result

The result will be shown in Skin Electronics