Skip to content

9.Wearables

Welcome to My Tech Playground 🎉

Hey there! Ready to dive into some electrifying experiments and swatches that pushed my creative boundaries? Grab your coffee (or tea) and let me take you through this wild adventure where I turned wires, sensors, and code into magic!

Research

This week, I explored the potential of integrating microcontrollers into my design process, focusing on interactive lighting and sound systems.

Understanding Microcontrollers

Neopixels for Lighting Effects

Adafruit Products in Fashion Tech

Fabric Speakers

With these components, I plan to integrate Neopixels, speakers, and other interactive elements into my fabric-based projects. The next step will be testing the integration of these components on a breadboard and then transferring the working designs onto actual fabric using e-textile techniques.

How I Got Inspired by These Brilliant Examples

How I Got Inspired by These Brilliant Examples

This week, I explored how light and interactivity are integrated into fashion through various techniques and projects.

Iris Van Herpen Interactive Textiles

Fashion Tech Week Paris

Fashion and Interactive Technology


Experiment 1: The Flip Dot Fabric

Magnet + Copper = Mesmerizing Simplicity

What’s the Idea?

Imagine flipping a dot on a fabric with just a magnet, copper wire, and a battery! This experiment was all about creating a dynamic, interactive fabric without any fancy circuits.

What Did I Use

  • Fabric (my canvas for creativity 🎨)
  • Copper wires
    • A battery
    • A magnet (tiny but mighty 💪)
∙ Stitched copper wires onto the fabric in a simple pattern.
∙ Connected the copper wires to a battery.
∙ Hovered a magnet over the wires to "flip" the dot. Voila! The magnet's pull flips the fabric dot, creating movement.
Tips for Flipping Success
  • Use a lightweight magnet for easier flipping.
  • Secure the copper wires well no one wants a messy fabric!

Experiment 2: Sweeping Servo Motor

Who needs external power when the Arduino’s got your back?

What’s the Idea?

Let’s make a servo motor dance! The plan? Attach a servo to the Arduino, program it to sweep back and forth, and enjoy the show. No breadboards or external power—just pure simplicity.

What Did I Use

  • Arduino Uno
  • Servo motor
  • Jumper wires (a minimalist’s dream 🧵)
∙  Connected the signal pin of the servo to Arduino pin 8, VCC to 5V, and GND to ground.
∙ Programmed the servo motor to sweep from 10° to 180° and back to 10°, creating smooth motion.

Connections? Easy!

Component Pin
Signal (Orange) Digital Pin 8
VCC (Red) Arduino 5V
GND (Brown) Arduino GND

Code That Makes Magic Happen


#include 

Servo servo;
int angle = 10;

void setup() {
  servo.attach(8);
  servo.write(angle);
}

void loop() { 
  for(angle = 10; angle < 180; angle++) {                                  
    servo.write(angle);               
    delay(15);                   
  } 
  for(angle = 180; angle > 10; angle--) {                                
    servo.write(angle);           
    delay(15);       
  } 
}

What Happened?

The servo swept back and forth between 10° and 180°. Smooth as butter, no extra power needed!

Tips for a Perfect Sweep
  • Keep it lightyour Arduino’s 5V is powerful but not invincible.
  • Delay time matters! Play around to make the motion smoother or faster.

Experiment 3: Light Collector for RGB LEDs

Turning light into colors it’s like wizardry but cooler.

The Vision

Collect ambient light and use it to control RGB LEDs. The brighter the light, the more vivid the LEDs!

What’s in My Toolbox?

  • Arduino Uno
  • RGB LED
  • A photoresistor (light sensor 🌞)
  • Resistors
  • Jumper wires and a breadboard
  • Connected the RGB LED to the Arduino via the breadboard.
  • Hooked up the photoresistor with a resistor to read light levels.
  • Linked it all together in a glorious circuit of colors!

Code for Glowing Lights


int photoPin = A0;
int redPin = 9;
int greenPin = 10;
int bluePin = 11;

void setup() {
  pinMode(redPin, OUTPUT);
  pinMode(greenPin, OUTPUT);
  pinMode(bluePin, OUTPUT);
}

void loop() {
  int lightValue = analogRead(photoPin);
  analogWrite(redPin, lightValue / 4);
  analogWrite(greenPin, lightValue / 8);
  analogWrite(bluePin, lightValue / 16);
}

Results That Made Me Smile

The LEDs changed brightness and color intensity based on the light levels. Hello, interactive lighting!

Pro Tips

  • Use a diffuser for smoother LED light transitions.
  • Experiment with resistor values for more precise light control.

Experiment 4: Distance Sensor Fun

Let’s track movement like a pro!

The Grand Idea

Use an ultrasonic distance sensor to track how far away objects are, then turn that data into interaction.

My Gear
  • Arduino Uno
  • Ultrasonic distance sensor (HC-SR04)
  • Jumper wires and a breadboard

Connecting the Dots

Component Pin
VCC Arduino 5V
GND Arduino GND
Trig Digital Pin 9
Echo Digital Pin 10

Code for Distance Magic


const int trigPin = 9;
const int echoPin = 10;

void setup() {
  pinMode(trigPin, OUTPUT);
  pinMode(echoPin, INPUT);
  Serial.begin(9600);
}

void loop() {
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);

  long duration = pulseIn(echoPin, HIGH);
  int distance = duration * 0.034 / 2;

  Serial.println(distance);
  delay(500);
}

What Happened?

The Arduino measured distances and displayed them in real time. It felt like having my own mini radar!

Pro Tips
  • Use a stable surface to avoid noisy data.
  • Combine this with other sensors for more interactive projects.

Swatches: Where Creativity Meets Tech

Here’s where the experiments inspired bigger ideas!


Swatch 1: Inflatable Magic with the Distance Sensor

Turning distance into inflatable fun!

Magnetic Attractors - Slicing Preparation

The Idea

In this swatch, I combined my work from the distance sensor experiment with a pump system. The idea was to use the distance readings to control an air pump, which would inflate a silicone cast. The closer you get to the sensor, the more air it pumps in. It’s like a futuristic inflatable sculpture that reacts to your movements!

Tools I Used

  • Arduino Uno
  • HC-SR04 Ultrasonic Distance Sensor
  • 12V Air Pump
  • Silicone Cast
  • Relay Module
  • Breadboard & Jumper Wires

How It Was Connected

  • Distance Sensor to Arduino: Connected the Trig and Echo pins from the HC-SR04 to Arduino digital pins 9 and 10, respectively.
  • Relay to Air Pump: The relay module was connected to the air pump, controlled by Arduino’s digital output pin.
  • Sensor to Pump Logic: When the sensor detects something within a certain range (like your hand moving closer), it triggers the relay to turn on the pump and inflate the cast.

The Code That Made It Inflate


const int trigPin = 9;
const int echoPin = 10;
const int relayPin = 7;

void setup() {
  pinMode(trigPin, OUTPUT);
  pinMode(echoPin, INPUT);
  pinMode(relayPin, OUTPUT);
  Serial.begin(9600);
}

void loop() {
  digitalWrite(trigPin, LOW);
  delayMicroseconds(2);
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);

  long duration = pulseIn(echoPin, HIGH);
  int distance = duration * 0.034 / 2;

  if (distance < 10) {  // If something is within 10cm
    digitalWrite(relayPin, HIGH);  // Turn on the pump
  } else {
    digitalWrite(relayPin, LOW);  // Turn off the pump
  }

  Serial.println(distance);
  delay(500);
}

What Happened?

When you got close to the sensor (within a certain range), the pump started inflating the silicone cast, and the farther you moved away, the less air the pump pushed out. It was super satisfying to watch the material react and grow!

Tips for Inflating Success

 * Fine-tune the range: Adjust the distance threshold in the code (here, it's set at 10 cm) to match your needs.
 * Stabilize the sensor: Mount it in a fixed position to prevent shaky readings.
 * Sensor placement matters: The angle and height of the sensor affect how well it reads the distance.

Swatch 2: Light to Sound (Melodies from Light!)

Transforming light levels into a symphony of sound.

Magnetic Attractors - Slicing Preparation

The Idea

This swatch used light to control sound. The more light the sensor detects, the higher the pitch of the melody! I used an Adafruit Circuit Playground Express for this swatch, as it has built-in sensors for light and sound. The light levels would dynamically generate sound patterns like a musical instrument that reacts to ambient lighting

!!! " Tools I Used " - Adafruit Circuit Playground Express - Arduino IDE - Jumper Wires

What I Did

  • Programmed the Circuit Playground to read light levels from its built-in light sensor.
  • Linked the light sensor’s readings to a frequency output, so the higher the light levels, the higher the frequency.
  • Played different tones based on light intensity just like creating a light powered music player!

Code That Made the Sound


#include 

void setup() {
  CircuitPlayground.begin();
}

void loop() {
  int lightLevel = CircuitPlayground.lightLevel();
  int frequency = map(lightLevel, 0, 255, 100, 1000);
  CircuitPlayground.playTone(frequency, 100);
}

What Happened?

As the light level changed, so did the pitch of the sound! It was like conducting an invisible orchestra.

!!! " Tips for Sound Success " - Use the map() function to fine-tune the light-to-frequency relationship. - Add a delay for smoother transitions between notes.


Swatch 3: Sound to Light (Let the Sound Illuminate!)

Transforming sound levels into a spectrum of light.

Magnetic Attractors - Slicing Preparation

The Idea

This swatch takes the sound around it and translates it into vibrant colors on the Adafruit Circuit Playground Express. The louder the sound, the more the LEDs light up in random colors, creating an interactive light display in response to sound levels.


Tools I Used

  • Adafruit Circuit Playground Express: A versatile microcontroller with built-in sensors for sound and LEDs.
  • Arduino IDE: The programming environment used to code the Circuit Playground Express.
  • Jumper Wires: For connecting and experimenting with additional components (optional in this case).

  1. Sound Detection: The Circuit Playground Express uses its built-in sound sensor to detect sound levels in the environment.
  2. LED Control: Based on the detected sound levels, I used the onboard LEDs to visually represent the sound, with varying color patterns depending on the loudness of the sound.

Code that Made It Glow:



#include  // Include the Circuit Playground library

const int NUM_SAMPLES = 10; // Number of samples to average for sound level
int soundSamples[NUM_SAMPLES]; // Array to store the sound level samples

void setup() {
    CircuitPlayground.begin(); // Initialize the Circuit Playground Express
    Serial.begin(9600);        // Start the serial communication for debugging
}

void loop() {
    int totalSoundLevel = 0;

    // Collect multiple samples and calculate the average
    for (int i = 0; i < NUM_SAMPLES; i++) {
        soundSamples[i] = CircuitPlayground.soundSensor(); // Get the current sound level
        totalSoundLevel += soundSamples[i]; // Add the sound level to the total
    }

    int avgSoundLevel = totalSoundLevel / NUM_SAMPLES; // Calculate the average sound level
    Serial.print("Average Sound Level: ");  // Print the average sound level
    Serial.println(avgSoundLevel); // Print the average sound level for debugging

    // Define thresholds for LED behavior
    if (avgSoundLevel > 6) { 
        // High sound level: All LEDs light up with random colors
        Serial.println("High Sound Level: Random Colors"); // Print for high sound level
        for (int i = 0; i < 10; i++) {
            CircuitPlayground.setPixelColor(i, random(255), random(255), random(255)); // Random color for each LED
        }
    } else if (avgSoundLevel > 20) { 
        // Moderate sound level: LEDs pulse with a single color (blue)
        Serial.println("Moderate Sound Level: Blue LEDs"); // Print for moderate sound level
        for (int i = 0; i < 10; i++) {
            CircuitPlayground.setPixelColor(i, 0, 0, 255); // Set LEDs to blue
        }
    } else {
        // Low sound level: Turn off all LEDs
        Serial.println("Low Sound Level: LEDs Off"); // Print for low sound level
        CircuitPlayground.clearPixels(); // Turn off all LEDs
    }

    delay(50); // Short delay for smooth transitions
}

Swatch 4: Light & Sound Interaction

The Idea

This swatch is a wearable interactive piece that combines light and sound interactions into one compact design. It reacts to music beats by changing LED colors and plays a melody when exposed to high light levels. The concept envisions an integration into garments for stage performances, where the outfit becomes part of the choreography, enhancing the performance with synchronized visuals and audio.

Inspiration and Vision This swatch is inspired by performance art, specifically hip-hop choreography. Imagine a dancer on stage wearing a garment that reacts to music beats with vibrant LED visuals. When the lights dim, the garment plays music to guide the dancer through the next sequence, turning the outfit into an interactive part of the performance.

This idea bridges fashion, technology, and art, creating possibilities for interactive stagewear or smart garments.

Tools and Materials

Category Details
3D Printing Printer: Ultimaker S5
Material: PLA (Transparent)
Fabric: Black Mesh
Software Design: Fusion 360
Slicing: Cura
Electronics Microcontroller: Adafruit Circuit Playground Express
LEDs: Neopixels
Accessories Conductive thread, double-layered black fabric for stitching components

Code Explanation

Purpose:
The code integrates sound and light sensors on the Adafruit Circuit Playground Express, triggering LEDs and melody output based on environmental stimuli.

Functionality Details
Sound Interaction - Detects beats using sound level threshold.
- Triggers LEDs with randomized colors.
Light Interaction - Plays a melody when exposed to bright light.
- Stops the melody when light levels drop.
Debugging Serial monitor provides real-time feedback on sound and light levels for fine-tuning.
Flags and Timers Prevents overlapping interactions using flags (isBeatDetected, isMelodyPlaying) and delays.

Key Variables:
- BEAT_THRESHOLD: Adjust for sensitivity to sound.
- melody[]: Array of musical notes for melody playback.


Code Implementation


#include   // Include the Circuit Playground library

// Sound interaction variables
const int BEAT_THRESHOLD = 20;  // Threshold value for beat detection (adjust as needed)
int previousSoundLevel = 0;  // Store previous sound level for comparison
bool isBeatDetected = false;  // Flag to track if a beat is already detected

// Melody interaction variables
int melody[] = { 262, 294, 330, 349, 392, 440, 494, 523, 523, 494, 440, 392, 349, 330, 294, 262 };
int noteDuration = 500; // Duration of each note (milliseconds)
unsigned long melodyStartTime = 0; // To track when the melody starts
bool isMelodyPlaying = false; // To check if the melody is currently playing

void setup() {
  CircuitPlayground.begin();  // Initialize the Circuit Playground
  Serial.begin(9600);         // Start serial communication for debugging
  Serial.println("Startup complete. Monitoring sound and light levels...");
}

void loop() {
  // Read sound sensor
  int soundLevel = CircuitPlayground.soundSensor();
  Serial.print("Sound level: ");
  Serial.println(soundLevel);

  // Detect beat and trigger LED
  if (soundLevel > BEAT_THRESHOLD && soundLevel > previousSoundLevel && !isBeatDetected) {
    byte red = random(0, 256);
    byte green = random(0, 256);
    byte blue = random(0, 256);
    for (int i = 0; i < 10; i++) {
      CircuitPlayground.setPixelColor(i, red, green, blue);
    }
    isBeatDetected = true;
    delay(500); // Pause after beat
  } else if (soundLevel <= BEAT_THRESHOLD) {
    isBeatDetected = false;
  }
  previousSoundLevel = soundLevel;

  // Read light sensor
  int lightLevel = CircuitPlayground.lightSensor();
  Serial.print("Light level: ");
  Serial.println(lightLevel);

  // Play melody if light is bright
  if (lightLevel > 700 && !isMelodyPlaying) {
    melodyStartTime = millis();
    isMelodyPlaying = true;
    for (int i = 0; i < 8; i++) {
      CircuitPlayground.playTone(melody[i], noteDuration);
      delay(noteDuration);
      if (millis() - melodyStartTime >= 5000) break;
    }
  } else if (lightLevel <= 400 && isMelodyPlaying) {
    isMelodyPlaying = false;
    delay(500);
  }
  delay(100);
}

Tips for Implementation

1- Adjust Sensitivity:

  • Fine-tune BEAT_THRESHOLD for sound sensitivity.
  • Set appropriate light thresholds (700 for high, 400 for low) based on your environment. 2- Debug with Serial Monitor:
  • Use the serial monitor to verify real-time sound and light readings.

3- Design Considerations:

  • Use randomized LED colors for dynamic visual effects.
  • Keep melody duration short to save power or extend it for dramatic effects.