Skip to content

12. Skin Electronics

Research

After this week's class on skin electronics, I started thinking about the relationship between our body's surface and technology. How can we create circuits that adapt to movement, breathe with our skin, and feel like a second layer rather than rigid devices strapped on? I found the paper shared during the lecture to be very insightful, it discusses how we use the skin as an interface and the usability factors to consider Wearability Factors for Skin Interfaces

What caught my attention is how skin electronics need to be flexible, breathable, stretchable, and sometimes even temporary or biodegradable. It's a completely different design challenge since the circuits need to adapt to skin movement, moisture, etc and must be safe, resistant and confortable. Among the key characteristics to consider are:

  • Location
  • Body movements
  • Body Characteristics
  • Weight
  • Attachment Methods
  • Accessibility
  • Interaction
  • Aestheetics
  • Conductors
  • Insulation
  • Device Care
  • Connection
  • Communication
  • Battery Life

Medical & Health Applications:

  • Glucose monitoring patches for diabetics
  • Heart rate monitors and ECG patches
  • Temperature sensing for fever tracking
  • Wound healing monitors

Performance & Sports:

  • Athletic performance tracking
  • Muscle activity sensors (EMG)
  • Hydration level monitoring
  • Form and movement analysis

Fashion & Expression:

  • LED temporary tattoos
  • Touch-sensitive skin circuits
  • Interactive body art
  • Augmented reality markers on skin

Processing is an open-source library and IDE based on Java that allows you to visualize your code in a very graphic way. It is widely used in new media art and design. Resources:

get inspired!

Check out and research alumni pages to betetr understand how to document and get inspired

References & Inspiration

Lauren Bowker was recognized as Vogue Business Top 100 innovator, with a background in chemistry, she has worked with F1, Puma and other industry giants in material innovation. Her experience has led to breakthroughs in science and beauty with pigments that are heartbeat flow reactive and aerodynamic using crystal based recipe that responds to wind and airflow.

Heart beat reactive makup by @theunseenalchemist on instagram

Aerodynamic makeup by @theunseenalchemist on instagram

@mityukovaaa Heartbeat Sensor + TouchDesigner This experiment is part of my ongoing project exploring biofeedback data visualisation. A glowing, pulsating sphere responds in real time to the wearer’s heartbeat - as if it has been brought to life by their pulse. The project was created using Arduino and TouchDesigner. #arduino #interactiveart #touchdesigner #creativetechnology #creativecoding ♬ Solitude - juno & blindheart
@mityukovaaa TouchDesigner + Heartbeat Sensor+ 270° Projection This interactive installation is a part of my experimentation for the "Human + Machine" project #touchdesignerart #touchdesigner #interactivedesign #arduino #heartbeatsensor ♬ original sound - Alina

Tools

Pressure Matrix Prototype Example

I used the printable template to draw the pieces into baking paper, this is good for a first prototype as you can see the velostat sandwiched in between the layers and how the copper tape creates a matrix however, I find it too flimsy when manipulating it to add the connections so I also made a prototype in cardboard for more stability.

Credit: Emma Pareschi

Connections: - Row 1 -> to Arduino pin A0 - Row 2 -> to Arduino pin A1 - Row 3 -> to Arduino pin A2

  • Col 1 -> to Arduino pin ~4
  • Col 2 -> to Arduino pin ~5
  • Col 3 -> to Arduino pin ~6

Using the serial monitor in Arduino IDE, we can see 9 columns which represent the values of each contact point on the matrix.The values are above 600 until you press on the velostat. It is easier to use the serial plotter to visualize the changes in values (top right icons)

Code Arduino: matrix_3rx3c_XIAOrp.ino by Emma Pareschi 

/*
The analog sensor is connected between pin A0 and pin 4
*/

int row0 = A0;  //first row pin
int row1 = A1;  //first row pin
int row2 = A2;  //first row pin

int col0 = 4;    //first column pin
int col1 = 5;    //first column pin
int col2 = 6;    //first column pin


int incomingValue0 = 0; //variable to save the sensor reading
int incomingValue1 = 0; //variable to save the sensor reading
int incomingValue2 = 0; //variable to save the sensor reading

int incomingValue3 = 0; //variable to save the sensor reading
int incomingValue4 = 0; //variable to save the sensor reading
int incomingValue5 = 0; //variable to save the sensor reading

int incomingValue6 = 0; //variable to save the sensor reading
int incomingValue7 = 0; //variable to save the sensor reading
int incomingValue8 = 0; //variable to save the sensor reading

void setup() {

  // set all rows to INPUT (high impedance):
    pinMode(row0, INPUT_PULLUP);
    pinMode(row1, INPUT_PULLUP);
    pinMode(row2, INPUT_PULLUP);

 //set the firt column as output
  pinMode(col0, OUTPUT);
  pinMode(col1, OUTPUT);
  pinMode(col2, OUTPUT);


  //open serial communication
  Serial.begin(9600);

}

void loop() {

  //set the col0 to low (GND)
  digitalWrite(col0, LOW);
  digitalWrite(col1, HIGH);
  digitalWrite(col2, HIGH);

  //read the three rows pins
    incomingValue0 = analogRead(row0);
    incomingValue1 = analogRead(row1);
    incomingValue2 = analogRead(row2);

  //set the col0 to low (GND)
  digitalWrite(col0, HIGH);
  digitalWrite(col1, LOW);
  digitalWrite(col2, HIGH);

    incomingValue3 = analogRead(row0);
    incomingValue4 = analogRead(row1);
    incomingValue5 = analogRead(row2);

  //set the col0 to low (GND)
  digitalWrite(col0, HIGH);
  digitalWrite(col1, HIGH);
  digitalWrite(col2, LOW);

    incomingValue6 = analogRead(row0);
    incomingValue7 = analogRead(row1);
    incomingValue8 = analogRead(row2);

  // Print the incoming values of the grid:

    Serial.print(incomingValue0);
    Serial.print("\t");
    Serial.print(incomingValue1);
    Serial.print("\t");
    Serial.print(incomingValue2);
    Serial.print("\t");
    Serial.print(incomingValue3);
    Serial.print("\t");
    Serial.print(incomingValue4);
    Serial.print("\t");
    Serial.print(incomingValue5);
    Serial.print("\t");
    Serial.print(incomingValue6);
    Serial.print("\t");
    Serial.print(incomingValue7);
    Serial.print("\t");
    Serial.println(incomingValue8);

delay(10); //wait millisecond
}
Important: close the Arduino IDE serial monitor before running processing sketch or it will give you a busy port error.

In processing, we used PRO_serial_port_list.pde to identify the USB port number that Arduino is connected to. In my case it was [3].

Code Procesing:PRO_serial_port_list.pde 

/*
You use this code to identify the USB port
*/

import processing.serial.*;

Serial myPort; // The serial port

void setup () {
size(100, 100); // set up the window to whatever size you want

printArray(Serial.list()); // List all the available serial ports
String portName = Serial.list()[5]; // set the number of your serial port!
myPort = new Serial(this, portName, 9600);



}

Using the port number we obtained before, we will include it in the following part of the code: String portName = Serial.list()[3]; // set the number of your serial port!

Code Procesing:PRO_pressure_matrix_vis_grey.pde 

/*
The sensors values are not calibrated.

*/

/*
Code based on Tom Igoe’s Serial Graphing Sketch
>> http://wiki.processing.org/w/Tom_Igoe_Interview
Reads X analog inputs and visualizes them by drawing a grid
using grayscale shading of each square to represent sensor value.
>> http://howtogetwhatyouwant.at/
*/

import processing.serial.*;

Serial myPort; // The serial port
int rows = 3;
int cols = 3;
int maxNumberOfSensors = rows*cols;
float[] sensorValue = new float[maxNumberOfSensors]; // global variable for storing mapped sensor values
float[] previousValue = new float[maxNumberOfSensors]; // array of previous values
int rectSizeX = 0;
int rectSizeY = 0;
int rectY;


void setup () {
  size(1000, 1000); // set up the window to whatever size you want
  rectSizeX = width/rows;
  rectSizeY = height/cols;


  println(Serial.list()); // List all the available serial ports
  String portName = Serial.list()[3]; // set the number of your serial port!
  myPort = new Serial(this, portName, 9600);
  myPort.clear();
  myPort.bufferUntil('\n'); // don’t generate a serialEvent() until you get a newline (\n) byte
  background(255); // set inital background
  smooth(); // turn on antialiasing
  rectMode(CORNER);
}

void draw () {
  for (int i = 0; i < maxNumberOfSensors; i++) {
    fill(sensorValue[i]);
    rect(rectSizeX * (i%rows), rectY, rectSizeX, rectSizeY); //top left
    if((i+1) % rows == 0) {
      rectY += rectSizeX;
    }
  }
  rectY=0;
}


void serialEvent (Serial myPort) {
  String inString = myPort.readStringUntil('\n'); // get the ASCII string
  if (inString != null) { // if it’s not empty
    inString = trim(inString); // trim off any whitespace
    int incomingValues[] = int(split(inString, "\t")); // convert to an array of ints

    if (incomingValues.length <= maxNumberOfSensors && incomingValues.length > 0) {
      for (int i = 0; i < incomingValues.length; i++) {
        // map the incoming values (0 to 1023) to an appropriate gray-scale range (0-255):
        sensorValue[i] = map(incomingValues[i], 000, 900, 0, 255); // stretch 5×5
        sensorValue[i] = constrain(incomingValues[i], 0, 255);
        //println(sensorValue[i]); // print value to see
        //println(incomingValues[i]);
      }
    }
  }
}

NFC Sticker/Tattoo

Near-field communication (NFC) technology allows two devices to communicate wirelessly. The technology can be embedded in a small tag to facilitate data transfer between nearby mobile phones, laptops, tablets, and other electronics. These tags are super thin and some are very small that it allows to embedd them in cards (credit cards, public transportation cards), keychains, paper, etc.

For this experiment I decided to create NFC "tattoos" or stickers. Since time is a constraint and given that we do not have blank NFC tags available at the lab, I made this prototype with an existing NFC tag for the metro card.

Materials

  • Existing metro card (I used the paper type)
  • Cricut Vynil
  • Laser Cutter
  • Cardboard
  • Cutting mat + cutter

Process

  • I dissolved the paper card in water, until the chip and antenna were visible.

  • I used an open source scientific illustration of a squid by Jean Baptiste Vérany to created an SVG version in Inkscape. The idea was to laser cut it on vinyl but since it contains PVC (toxic!) I decided to laser cut the outline in cardboard then transfer it to the vynil by hand.

  • I tested by topping up my semi-transparent card first...it worked!
  • Now, we just put the tag onto the skin and add the sticky vynil on top to have a sticker or tattoo. Because i was using a card-size tag, it is still visible under the sticker. Having a nice design to fully cover this tag is challenging.

Observations

  • It's a good first prototype, to understand the applications of connected "tattos" however, the vynil is too stiff and does not adapt well to the body's range of motion (specially in large areas). It wrinkles and starts to unstick to the surface. Tatoo paper would be better.
  • Using blank NFC tags would of course allow you to give it any instructions you wanted, such as perform an action on your phone using the Shortcuts app or something like Zappier or IFTTT. Additional NFC tag writer needed.

Next Steps

  • I would like to test NFC's as a proximity sensor and have a visual output using Processing.
  • This is similar to the example shown on the lecture.

Conductinve Ink Tattoo

Materials

  • Bare Conductive Electric Paint (discontinued)
  • Baking paper
  • Sewable LEDs
  • Conductive Thread

Process

  • Started by using an open source scientific illustration of an octopus by Jean Baptiste Vérany for a tattoo design
  • Looking up online, I understand that the Electric Paint is not skin-safe so for the purpose of the test, I am doing it on baking paper that can then be adhered to the skin.
  • I painted the shape onto the paper and used the voltimeter to confirm the conductivit, it worked.

  • I cut 2x the shape one for the upper layer + and one for the lower layer - These would sandwich a velostat layer in the middle and have the conductive paint facing each other on the inside.
  • I added sewable LEDs on the eyes and connected to arduino so that when pressed, they would light up. Using the sketch from the analog sensor.
  • They worked for a first try but I did not get it on video :( I tried adjusting the eyes (LEDs) after but I ended up damaging the paper and it ripped.

Observations

  • According to the instructions of the paint, it should be used up to 6 months after opened. The paint was dry since it had been opened for a long time. I stirred it to make it more spreadable but I had a hard time with the consistency.
  • I would like to try to use scar patches or kinesiotape to have a more stable surface. Also a simpler form since I had to hand cut the baking papaer and it's difficult to have both parts be exactly the same with all the tentacles and curves of the shape.