New Textiles 2011

How do you embed a song into clothing?

With a combination of tactile textile sensing and computational embroidery, there is now a way.  Building off of the images that I created from tapping my fingers to “Raise Your Glass” by the Glee Warblers, I decided to translate those images into an actual textile using computational embroidery.  The process was certainly not as easy as I hoped (I used the embroidery machine on 4 separate occasions and unfortunately broke the machine once!) — but it was rewarding once I got closer to translating my tactile design into something that was woven into a jacket that I am planning to wear.

Embroidery Process

Read the rest of this entry »

I created a touchpad sensor from conductive thread, fabric and the lilypad.

Read the rest of this entry »

by Maria Stangel and Judy Jia

Please see the attached files:

Painting Blanket Proposal

proposal slides

by Heidi C. and Nicole T.

Problem:
We often forget to bring our important items (i.e. cell phone, keys, IDs… etc) out with us when we leave the house.

Solution:
To build an intelligent bag that will sense if the users’ important objects are present, through the use of RFIDs and a visual output, signaling when each object is in the bag.
Read the rest of this entry »

I propose building an automated desktop device which is capable of simultaneously measuring a yarn’s changes in tension and resistance in response to stretch. Because it is computer-controlled, the device will also be able to determine the consistency of these measurements as well as the effects of cyclic loading and fatigue. Armed with the data collected by this machine, I’d like to be able to design the properties of braided yarns created using the Interweave CNC Braiding Machine based on the measured properties of its constituents.

finalproposal

For my final project, I am interested in developing a patterned wall panel/surface that would produce  an alternating pattern in response to a passerby’s movement or engagement. Motion sensors and or pressure sensors would be employed to activate the pattern. The resulting pattern would function as a visual and temporal recording of a person’s presence.

The idea is to have make a water bottle cozy that contains a soft circuit. LEDs on the cozy will begin to blink every 30 minutes and will turn off via a touch sensor when the bottle is picked up.

Presentation

MIT_final_project2

Update: it has become more of a game rather  than a quilt.

For this weeks project, I experimented with a variety of methods for producing  textile sensors with varying degrees of resistance. Each sensor is activated through a unique means of tactile interaction, be it stretching, pressing or bending.  The sensors were then connected to an Arduino to read their data. The data was then represented visually via a simple program written in Processing. It was interesting to see how each prototype produced different visual results!

Knit Stretch Sensor- This sensor was produced on the knitting machine using a conductive and non conductive yarn. When stretched taut, the conductive material aligns to produce a lower level of resistance.

Felted Pressure Sensor-

This sensor was produced by first combing together  natural and conductive roving. The blend was then felted together and shaped into a soft round pad that could be squeezed or pressed into with ones fingers. I also sewed a round felt pocket with openings on both sides. This serves as a protective shell for the padding, as well as provides an area for the alligator clips (that run to the Arduino) to connect to.

Here is an image of the felt padding being slipped into the protective pocket

Once inserted, alligator clips are attached to opposite ends of the pocket “mouth”, making contact with the conductive padding. Pressing the sensor reduces resistance that can be read on screen via Processing.

Bend Sensor-

This sensor was produced by inserting 2 layers of Velostat into a felt pocket that was then sewn closed. Velostat is a material that decreases in resistance when pressed or bent.

Bending the sensor…

Below are videos of the visual information produced when physically interacting with the sensors…

Arduino Code

void setup() {

// initialize the serial communication:  Serial.begin(9600);  digitalWrite (A0, HIGH);}
void loop() {

// send the value of analog input 0:  Serial.println(analogRead(A0));

// wait a bit for the analog-to-digital converter   // to stabilize after the last reading:  delay(100);}

Processing Code for this Example (you must copy and past this into your Processing sketch)

/* Processing code for this example

// Graphing sketch

// This program takes ASCII-encoded strings

// from the serial port at 9600 baud and graphs them. It expects values in the

// range 0 to 1023, followed by a newline, or newline and carriage return

// Created 20 Apr 2005

// Updated 18 Jan 2008

// by Tom Igoe

// This example code is in the public domain.

import processing.serial.*;

Serial myPort;        // The serial port

int xPos = 1;         // horizontal position of the graph

void setup () {

// set the window size:

size(400, 300);

// List all the available serial ports

println(Serial.list());

// I know that the first port in the serial list on my mac

// is always my  Arduino, so I open Serial.list()[0].

// Open whatever port is the one you’re using.

myPort = new Serial(this, Serial.list()[0], 9600);

// don’t generate a serialEvent() unless you get a newline character:

myPort.bufferUntil(‘\n’);

// set inital background:

background(0);

}

void draw () {

// everything happens in the serialEvent()

}

void serialEvent (Serial myPort) {

// get the ASCII string:

String inString = myPort.readStringUntil(‘\n’);

if (inString != null) {

// trim off any whitespace:

inString = trim(inString);

// convert to an int and map to the screen height:

float inByte = float(inString);

inByte = map(inByte, 0, 1023, 0, height);

// draw the line:

stroke(127,34,255);

line(xPos, height, xPos, height – inByte);

// at the edge of the screen, go back to the beginning:

if (xPos >= width) {

xPos = 0;

background(0);

}

else {

// increment the horizontal position:

xPos++;

}

}

}

*/

For this project I made a crocet pressure sensor with wool yarns and conductive (for sensor) yarns. Since I had no experience of crochet, this is a very interesting experience of learning this traditional technique. I added 1 stitch and 2 stitches alternatively to each of the stitches of the previous circle in order to create a flat piece. Then I used boiling water to bathe it and washed it with soap repeatedly. After around 6 rounds, it looked felted.
The result was good, though it seemed less sensitive to pressure after felting. I have to press it ver hardly.

I connected the textile sensor to the computer, using a very simple Arduino. I have no experience on programming language but I am always interested in the potential of processing for interaction and art. So I think this is a good opportunity for me to explore the processing, though it is very challenging for me. It is really hard and I spent long time on it, but it worth it to learn a new interesting thing.

The Bubble:
I firstly wrote some circles changing their locations and size based on the input from the sensor. Once I pressed the sensor, the circles got higher and smaller.
They looked like bubbles, which inspired me to write an interacrtion game responsive to people’s movements.

Catch the fish!-interactive game:
For the next step, I tried to create a game. A fish swims in the water, and you press the sensor to control the bubble to catch the fish. Once the bubble catch the fish, it changes color.
The difficult part of this game is to delete the trace of the fish while leaving the trace of the bubbles. I have tried two ways:
For the first method, I draw a blue square after the fish, which will delete the fish’s trace. It works smoothly. But there are still some traces above and under the fish (which look OK). And further, the blue square will delete some parts of the bubble as well.

For the second method, I firstly draw the fish and the bubble, and then refill the background every time after drawing. And then I re-draw the bubble. So the fish won’t leave any trace any more. I use Arraylist to remember the previous position of the bubbles. The problem of this program is the screen keeps flashing and it seems not very stable. I don’t know why.

Ink and wash painting- interactive abstract painting-in memory of Wu Guanzhong:

The processing visualizations always remind me the abstract art. I want to do some interactive art between people’s movement and the abstract painting. I get the inspiration from Wu Guanzhong, who is a famous abstract ink and wash painter. I think the essence of in and wash painting is “the amount of water added in ink” and the “white space in between”. Currently I cannot write too complicated processing. I tried “ink dots” with different transparency that randomly dispersed on the white “paper”. I used Agent to draw the random dots. Once I squeeze the sensor, the dots get bigger.

The process of drawing an abstract ink and wash painting:

THE VIDEO LINKS for this project:
The basic bubble
wTXJsA9hRW0
J0chHqeTypc

THE CODES OD PROCESSING:
1. BubblefishA(blue square):
import processing.serial.*;
// serial is an input from other computer

Serial myPort;
int xPos;
int xPos2;
PImage fishlazy;
PImage fishshock;
Boolean w = false;

void setup() {
size(800,600);
println (Serial.list());
myPort = new Serial(this, Serial.list()[2],9600);
myPort.bufferUntil(‘\n’);
background(0,0,255);
xPos = 0;
xPos2 = 1;
}

void serialEvent (Serial machine) {
String inString = myPort.readStringUntil(‘\n’);
if ( inString != null) {
inString = trim(inString);
float inByte = float(inString);
println (inByte);
inByte = map(inByte,0,1023,0,height);
xPos = xPos + 1;
xPos++;
xPos2 = xPos2 + 1;
xPos2++;
// when xPos >= width, renew
if (xPos2 >= width) {
xPos = 0;
xPos2 = 1;
background(0,0,255);
}
if(inByte*0.9=300) {
fishlazy = loadImage(“fishlazy.gif”);
image(fishlazy,xPos2,300,100,80);
fill(0,0,255);
noStroke();
rect(xPos2,300,2,80);
}
strokeWeight(map(inByte,0,1023,1,5));
noFill();
stroke(255);
ellipse(xPos,inByte*0.9,map(inByte,1023,0,100,10),map(inByte,0,1023,10,100));
//point(xPos, map(inByte,1023,0,height/1.5,100));
//line(xPos,height, xPos, map(inByte,1023,0,height,0));
}
}
void draw() {
}
void keyPressed() {
if ( key == ‘s’) {
w = true;
}

if ( key == ‘r’) {
w = false;
}

if ( key == ‘c’) {
saveFrame (“captureframe-####.jpg”);
}
}

2. BubblefishB(redraw the bubble):
import processing.serial.*;
// serial is an input from other computer

Serial myPort;
int xPos;
int yPos;
int r;
ArrayList bubblex;
ArrayList bubbley;
ArrayList bubbler;
PImage fishlazy;
PImage fishshock;
int fishx;
int fishy;
int fishdelay;
Boolean w = false;

void setup() {
size(800,600);
background(0,0,255);
xPos = 0;
fishlazy = loadImage(“fishlazy.gif”);
fishshock = loadImage(“fishshock.gif”);
fishx = 0;
fishy = height/2;
fishdelay = 10;

println (Serial.list());
myPort = new Serial(this, Serial.list()[2],9600);
myPort.bufferUntil(‘\n’);
}
//void draw() {
void serialEvent (Serial machine) {
String inString = myPort.readStringUntil(‘\n’);
if ( inString != null) {
inString = trim(inString);
float inByte = float(inString);
println (inByte);
// float inByte = random(0,1023);
inByte = int(map(inByte,0,1023,0,height));

if ((xPos > width)||(xPos == 0)) {
bubblex = new ArrayList();
bubbley = new ArrayList();
bubbler = new ArrayList();
xPos = 0;
}
background(0,0,255);
smooth();
frameRate(15);
//bubble
yPos = int(inByte*0.9);
r = int(map(inByte,1023,0,100,10));
bubblex.add(xPos);
bubbley.add(yPos);
bubbler.add(r);

for (int i = 0; i < bubblex.size(); i++) {
stroke(255);
//strokeWeight(map(inByte,0,1023,1,5));
noFill();
int tempx =(Integer)bubblex.get(i);
int tempy =(Integer)bubbley.get(i);
int tempr =(Integer)bubbler.get(i);
ellipse(tempx,tempy,tempr,tempr);
}

//fish
if (fishdelay == 10) {
image(fishlazy, fishx, fishy,100,80);
}
if (fishdelay < 10) {
image(fishshock,fishx, fishy,100,80);
fishdelay–;
}
if ((abs(xPos – fishx)<10) && (abs(yPos – fishy)< 10)) {
fishdelay–;
}
if (fishdelay == 0) {
fishdelay = 10;
fishx = 0;
}
if (fishx == width) {
fishx = 0;
}
xPos = xPos + 1;
fishx++;
}
}

void draw() {
}
void keyPressed() {
if ( key == 's') {
w = true;
}

if ( key == 'r') {
w = false;
}

if ( key == 'c') {
saveFrame ("captureframe-####.jpg");
}
}

3. The ink and wash painting:
import toxi.geom.*;
import processing.serial.*;
// here i import two libraries and declare machine// arraylist is like a package which consist of several items. its name is agents
// boolean is like a switch, i use it to stop and restart the script
Serial machine;
//Arraylist is like int. A An ArrayList stores a variable number of objects. This is similar to making an array of objects, but with an ArrayList, items can be easily added and removed from the ArrayList and it is resized dynamically.
ArrayList agents;
//Boolean judges two values (like a switch), true or false. here "true" is "turning off".
Boolean w = false;

void setup() {
size(600,600);
background(255,255,255);
// population means the number of generators, here i put 100 generators randomly (x ,y) in the windows
// x y is the location, it is random, sw is its opacity( black to white)
// agent. add means i put the item ( x,y,sw) into a bag called agents
// new Agent(x,y,sw) means the name of the item i call it Agent
// agents is the bag, each item inside called Agent, inside Agent there are x,y,sw int population = 100;
int population = 100;
//Arraylist name = new Arraylist. "new" means start/establish
agents = new ArrayList();
//for(condition){result} is a kind of circulation. (…)circulation. i only be used to run the program 100 times.
for (int i = 0; i < population; i++) {
int x = int( random(0, width));
int y = int(random(0, height));
int sw = int ( random(1,255));
agents.add(new Agent(x,y,sw));
}
machine = new Serial(this, Serial.list()[2],9600);
machine.bufferUntil('\n');

}

void draw() {
}

void serialEvent (Serial machine) {
String inString = machine.readStringUntil('\n');
if(inString != null) {
inString = trim(inString);
float inByte = float(inString);
println(inByte);
// here i try to draw now
//w is the switch, when it is false, we draw
// i recall the items in the bag and ask each of them to perform several actions
// 10 is the number which u can change.
//w controls "pause" of draw
if (w == false) {
//Arraylist.size() can read how many agents are there in the arraylist.
//Agent describes the properties of a
//Arraylist.get(i) means taking the sample No.i from the population
//name the selected sample as a
for ( int i = 0; i < agents.size(); i++) {
Agent a = (Agent) agents.get(i);
a.move(inByte);
a.drawdot();
if (inByte <= 900) {
a.drawcircle(inByte);
}
}
}
}
}

// here is about the item(Agent) inside the bag agents.
//class
class Agent {
//declare for the items inside
int xPos;
int yPos;
int sw;
//constructor. Agent(3 properties). Arraylist (named agents) contains 100 Agents.
//blabla=_blabla
Agent(int _xPos, int _yPos, int _sw) {
xPos = _xPos;
yPos = _yPos;
sw = _sw;
}
//behavior, action of each Agent//now it will move. acc is the coefficient linked to inByte scaled to -10 to 10//Vec3D is the distance, at last i add the distance to the position of the Agent
void move(float inByte) {
int acc = int(map(inByte,0,1023,-10,10));
//the Agent moves around the original position.
Vec3D vel = new Vec3D(random(-1,1)*acc,random(-1,1)*acc,0);
yPos = yPos + int(vel.y);
xPos = xPos + int(vel.x);
}
//draw the new position. stroke color is sw, u can change the number
void drawdot() {
stroke(sw);
strokeWeight(2);
point (xPos,yPos);
}
// draw the circle. change the color and the size as u want!
void drawcircle(float inByte) {
float r = map(inByte,0,1023,10,30);
fill (0, int(random(20,200)),0,10);
noStroke();
ellipse(xPos, yPos, r,r);
}
}
// here is the interface, s is stop, r is restart, c is capture frame
void keyPressed() {
if ( key == 's') {
w = true;
}

if ( key == 'r') {
w = false;
}

if ( key == 'c') {
saveFrame ("captureframe-####.jpg");
}
}

Thanks Leah and Ringo a lot for your help!