Author: Isabel Xu

LookingOutwards-05

A tech company named Ethmode recently developed a program to design garment in 3D in order to reduce textile waste in the fashion industry. The program is used to build generative designs, visualize material and customize silhouettes through languages such as JavaScript. Beyond providing photo-realistic renders of the garment that help to decide the basic design, the program also offer sophisticated animation on the the movement, drape and stretch of the garments.
Credited to this tech agency, manufacturers in Bangladesh are able to reduce 40% of physical sampling by implementing 3D digital design process. Handful of brands started to work on customized clothing through this digital realm to create gowns and customized sneakers.

Link to the article: https://eco-age.com/magazine/how-3d-digital-design-and-augmented-reality-can-slash-textile-waste-fashion/

Project-05-Wallpaper

sketchDownload
//Isabel Xu
//15-104 Section A
const Y_AXIS = 1;
function setup() {
  createCanvas(480,480);
  // Two color in the end of the neon hue
  c1 = color(223,255,0);
  c2 = color(116, 0, 225);

  noLoop();
}

function draw() {
  // background
  setGradient(0, 0, 480, 480, c1, c2, Y_AXIS);
  //ellipseShape
  drawPattern();

}

function setGradient(x, y, w, h, c1, c2, axis) {
  noFill();

    for (let i = y; i <= y + h; i++) {
      let inter = map(i, y, y + h, 0, 1);
      let c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x + w, i);
    }
}

function drawPattern(){
	cirW=150;
  	for (var x = 0; x <= width;x +=150){
  		cirH=150;
  		for (var y = 0;y <= height;y+=150){
  		noStroke();
  		fill(250);
  		ellipseMode(CORNER)
  		ellipse(x,y,cirW,cirH);
  		cirH-=40;
  	}
  	cirW-=40;
  }
}

A study on geometric symbols evolved from circles.

Project-04-String-Art

sketchDownload
//Isabel Xu
//Project 04
var numLines = 50;
var LineEndX = 200
var LineEndY = 390

function setup() {
  createCanvas(400, 300);
}

function draw() {
  
  var LineEndX = constrain(mouseX,50,350);
  var LineEndY = constrain(mouseY,50,250);
  
  //the two lines of the movable cape
  background(136,136,195);
  stroke(255);
  line(110, 80, LineEndX, LineEndY);
  line(200, 50, 50, 240);
  dx1 = (LineEndX-110)/numLines;
  dy1 = (LineEndY-80)/numLines;
  dx2 = (50-200)/numLines;
  dy2 = (240-50)/numLines;
  
  //the two lines of headpiece
  line(290, 80, LineEndX, LineEndY);
  line(200, 50, 350, 240);
  hx3 = (LineEndX-290)/numLines;
  hy3 = (LineEndY-80)/numLines;
  hx4 = (350-200)/numLines;
  hy4 = (240-50)/numLines;

  
    var x1 = 110;
    var y1 = 80;
    var x2 = 200;
    var y2 = 50;
    var x3 = 290
    var y3 = 80
    var x4= 200
    var y4 = 50
    
    //human figure body 
    noStroke();
    fill(159,160,195);
    rect(140,65,120,400,50,50,45,45);
  
    //generate the strings between lines
    for (var i = 0; i <= numLines; i += 1) {
        stroke(random(255),200,random(255));
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
      
        line(x3, y3, x4, y4);
        x3 += hx3;
        y3 += hy3;
        x4 += hx4;
        y4 += hy4;
      
    }
    for (var i = 0; i <= numLines; i++){
	    strokeWeight(0.75); 
        stroke(220,220,random(255));
        line(mouseX, i * 2+30, 220 - i, 80);  
    }
  
  noStroke();
  fill(159,160,215);
  ellipse(200,40,60,60);//head
  noStroke();
  fill(191,154,143);
  ellipse(175,50,18,14);
  ellipse(225,50,18,14);//blush
  
  
    
  

}

The idea of this project is having an adjustable wearable cape that is made with interactive e-textile. Mouse location updates the shape of the cape.

Project-03-Dynamic-Drawing

sketchDownload
var colorx=20
function setup() {
  createCanvas(600, 450);
  max_distance = dist(0, 0, width, height);//the distance of the canvas
}

function draw() {
  //measure how far mouse if from the center of canvas
  let distanceFromCenter= dist(width/2,height/2,mouseX,mouseY);
  var colorx = distanceFromCenter;
  background(116,colorx,255);//the mouse as a component of the background's color
  //set the distance of each ellipse
  for (let x = 0; x <= width; x += 15) {
    for (let y = 0; y <= height; y += 15) {
      let size = dist(mouseX, mouseY, x, y);//size is decided by the mouse location 
      size = (size / max_distance) * 40;
      fill(22,255,colorx);//the mouse as a component of the ellipse's color
      noStroke();
      ellipse(x, y, size, size);
    }
  }
}

Move the mouse to update the sizes of ellipses in both horizontal and vertical direction. The color of ellipses and the background color of canvas also varies based on the mouse’s location.

LookingOutwards-03

In 2019, Ying Gao, a conceptual fashion designer and media professor, released a robotic clothing collection that can reacted to its surroundings. The collection, entitled  “flowing water, standing time”, response to the essence of movement by rippling, expanding and contracting as if they are live creatures. Her project questions traditional assumptions about clothing by combining robotics and fine fabrics to create performative pieces that transform their physical contour. The color and light sensors embedded in the fabric, with a tiny camera linked to a raspberry PI computer, are used to gather information about their surrounding. Data are sent to a series of actuators and magnets that is interlaced with the fabric to create movement. The clothes have a fluid and chameleon-like appearance, embodying the complexity and rhythm of the ever-changing surrounding. 

Project-02: Variable Faces

sketchDownload
//Isabel Xu
//Section A
var face_width = 200;
var face_length = 200;
var hair_length = 600
var hair_color = 132;
var eye_width = 30
var eye_size = 20


function setup() {
    createCanvas(480, 640);
}

function draw() {

  background(220);

  //hair
  noStroke();
  fill(hair_color, 117, 82);
  rect(81,88,260,hair_length,100,100,45,45);

  //face
  fill(247, 194, 150);
  noStroke();
  ellipse(width/2,240,face_width,face_length);
  //ears
  ellipse(width/2-(face_width/2),275,30,40);
  ellipse(width/2+(face_width/2-10),275,30,40);

  
  //upper body
  fill(247, 194, 150);
  noStroke();
  beginShape();
  vertex(width/2-35, 260);
  vertex(width/2-35, 430);
  vertex(width/2-175, 470);
  vertex(width/2-225, 550);
  vertex(width/2-225, 650);
  vertex(width/2+225, 650);
  vertex(width/2+225, 550);
  vertex(width/2+175, 470);
  vertex(width/2+35, 430);
  vertex(width/2+35, 260);
  endShape();
  

  //lips
  fill(190,111,82);
  noStroke();
  beginShape();
  curveVertex(width/2-20,240+(face_length/2)-45);
  curveVertex(width/2-15,240+(face_length/2)-35);
  curveVertex(width/2+15,240+(face_length/2)-25);
  curveVertex(width/2+30,240+(face_length/2)-35);
  curveVertex(width/2+50,240+(face_length/2)-45);
  endShape();
  
  beginShape();
  curveVertex(width/2-20,240+(face_length/2)-25);
  curveVertex(width/2-15,240+(face_length/2)-35);
  curveVertex(width/2+15,240+(face_length/2)-40);
  curveVertex(width/2+30,240+(face_length/2)-35);
  curveVertex(width/2+50,240+(face_length/2)-25);
  endShape();

  //nose
  noStroke();
  fill(190,111,82);
  beginShape();
  vertex(width/2+2, 240+(face_length/2)-75);
  vertex(width/2, 240+(face_length/2)-60);
  vertex(width/2+20, 240+(face_length/2)-60);
  vertex(width/2+18, 240+(face_length/2)-75);
  endShape(CLOSE);
  
  beginShape();
  curveVertex(width/2, 240+(face_length/2)-60);
  curveVertex(width/2, 240+(face_length/2)-60);
  curveVertex(width/2+10, 240+(face_length/2)-55);
  curveVertex(width/2+20, 240+(face_length/2)-60);
  curveVertex(width/2+20, 240+(face_length/2)-60);
  endShape();


  //eyes
    fill(255);
    ellipse(width / 2 - face_width * 0.25 +10,245 , eye_width, eye_size);
    ellipse(width / 2 + face_width * 0.25 +10, 245, eye_width, eye_size);
    //pupils
    fill(76,50,36);
    noStroke();
    ellipse((width / 2 - face_width * 0.25 +10)+3, 244 , eye_width/2,eye_size*0.8);
    ellipse((width / 2 + face_width * 0.25 +10)+3,244, eye_width/2., eye_size*0.8);

  

  //garment with transparency
  fill(150,190);
  noStroke();
  strokeWeight(3);
  beginShape();
  curveVertex(width/2-45,405);
  curveVertex(width/2-35,425);
  curveVertex(width/2-57,435);
  curveVertex(width/2-175, 460);
  curveVertex(width/2-225, 550);
  curveVertex(width/2-205, 650);
  curveVertex(width/2+195, 650);
  curveVertex(width/2+225, 550);
  curveVertex(width/2+175, 460);
  curveVertex(width/2+57,435);
  curveVertex(width/2+35,425);
  curveVertex(width/2+45,405);
  endShape(CLOSE);

  //garment on top layer
  fill(250);
  noStroke();
  beginShape();
  vertex(width/2,610)
  vertex(width/2-50,430)
  vertex(width/2-170,430)
  vertex(width/2-180,470)
  vertex(width/2-180,650)
  vertex(width/2+180,650)
  vertex(width/2+180,470)
  vertex(width/2+170,430)
  vertex(width/2+50,430)
  endShape();

  //earrings *line
  stroke(2); //line
  strokeWeight(1);
  strokeCap(SQUARE);
  line(width/2-(face_width/2),290,width/2-(face_width/2),385);
  line(width/2+(face_width/2)-10,290,width/2+(face_width/2)-10,385);
  
  //earrings *rounds
    if (mouseIsPressed) {
        fill(99,234,232);
    } else {
        fill(249,239,80);
    }
    
    ellipse(width/2-(face_width/2),385,50,50);
    ellipse(width/2+(face_width/2)-10,385,40,40);
  
  
  
  }


function mousePressed() {
    hair_length = random(320, 431);
    face_width = random(180, 205);
    face_length = random (190,220)
    hair_color = random(50,132);
    eye_width = random(35,50);
    eye_size = random(25,35);
   

   
}

I really enjoy how the mousePressed() function realize an interaction with the player while the domain argument allows the changing color to set within a color scheme. The variables for the face part visualize a perception of mine on how everyone looks drastically different in varieties of focus lens in different cameras. 

The mouseisPressed() function makes the earrings pop out from the other variables.

Looking Outwards 02: Generative Art

Directed by one of the fashion’s most experimental designer, Hussein Chalayan, the wearable installations shown in the 2006 show employs laser technology and computational textile to emit laser beams with its motions. I appreciate how the piece is a critical exploration of the body in relation to technology and how it demonstrates that technology is a very suitable medium for any artist. By pixel mapping on a media server, the maker can control the visuals on the fabric with any video content. The final LED dress plays with lights and space, performing with a strong sense of spatial dynamics that manifested Chalayan’s fascination with architecture, aerodynamics, bodily form, and identities. It narrates the personal aspects of technology that emphasize how the borders between public and private are blurring in the digital world. Another reason that makes the work revolutionary is how the designer considers the daily outfit as a communication device while the traditional garments cannot. 

Link to the interview: https://showstudio.com/projects/readings#fashion_film

Project 1 : Self Portrait

Week 1

sketch-self portraitDownload
function setup() {
  createCanvas(650, 650);
}

function draw() {
  background(107,116,145);
  
  //hair
  fill(132, 117, 82);
  noStroke();
  beginShape();
  curveVertex(width/2-140,290);
  curveVertex(width/2-130,230);
  curveVertex(width/2-120,350);
  curveVertex(width/2-130,550);
  curveVertex(width/2+130,550);
  curveVertex(width/2+120,350);
  curveVertex(width/2+140,250);
  endShape(CLOSE);
  
  //main body
  fill(247, 194, 150);
  noStroke();
  beginShape();
  vertex(width/2-35, 390);
  vertex(width/2-35, 430);
  vertex(150, 470);
  vertex(100, 550);
  vertex(100, 650);
  vertex(550, 650);
  vertex(550, 550);
  vertex(500, 470);
  vertex(width/2+35, 430);
  vertex(width/2+35, 390);
  endShape(CLOSE);
  
  //face
  fill(247, 194, 150);
  noStroke();
  ellipse(width/2,240,250,320)
  //ears
  ellipse(width/2-110,320,20,40)
  ellipse(width/2+110,320,20,40)
  
  
 //hats
  fill(0);
  noStroke();
  beginShape();
  curveVertex(width/2-200,300);
  curveVertex(width/2-200,320);
  curveVertex(width/2-100,100);
  curveVertex(width/2,50);
  curveVertex(width/2+100,100);
  curveVertex(width/2+200,320);
  curveVertex(width/2+200,300);
  endShape();
  
  
  //lips
  fill(190,111,82);
  noStroke();
  beginShape();
  curveVertex(width/2-35,350);
  curveVertex(width/2-30,360);
  curveVertex(width/2,370);
  curveVertex(width/2+30,360);
  curveVertex(width/2+35,350);
  endShape();
  
  beginShape();
  curveVertex(width/2-35,370);
  curveVertex(width/2-30,360);
  curveVertex(width/2,355);
  curveVertex(width/2+30,360);
  curveVertex(width/2+35,370);
  endShape();
  
  //nose
  fill(239, 217, 192);
  noStroke();
  beginShape();
  vertex(width/2-8, 320);
  vertex(width/2-10, 335);
  vertex(width/2+10, 335);
  vertex(width/2+8, 320);
  endShape(CLOSE);
  noLoop();
  
  fill(239, 217, 192);
  noStroke();
  beginShape();
  curveVertex(width/2-10, 335);
  curveVertex(width/2-10, 335);
  curveVertex(width/2, 340);
  curveVertex(width/2+10, 335);
  curveVertex(width/2+10, 335);
  endShape();
  
  //garment with transparency
  fill(150,190);
  stroke(220);
  strokeWeight(3);
  beginShape();
  curveVertex(width/2-45,405);
  curveVertex(width/2-35,425);
  curveVertex(width/2-57,435);
  curveVertex(150, 460);
  curveVertex(100, 550);
  curveVertex(120, 650);
  curveVertex(520, 650);
  curveVertex(550, 550);
  curveVertex(500, 460);
  curveVertex(width/2+57,435);
  curveVertex(width/2+35,425);
  curveVertex(width/2+45,405);
  endShape(CLOSE);

  //garment on top layer
  fill(250);
  noStroke();
  beginShape();
  vertex(width/2,610)
  vertex(width/2-50,430)
  vertex(width/2-170,430)
  vertex(width/2-180,470)
  vertex(width/2-180,650)
  vertex(width/2+180,650)
  vertex(width/2+180,470)
  vertex(width/2+170,430)
  vertex(width/2+50,430)
  endShape();
  
  //accessories*line
  stroke(2);
  strokeWeight(1);
  strokeCap(SQUARE);
  line(width/2-110,330,width/2-110,385);
  line(width/2+110,330,width/2+110,385);
  noLoop();
  
  fill(249,239,80);//the spherical structure
  ellipse(width/2-110,385,50,50);
  ellipse(width/2+110,385,50,50);
  
  
  }

LO-1: My Inspiration

The interactive fashion couture work by Iris Van Herpen is one of the most eye opening project for me among the field of technological art. Employing smart textiles, garments are able to move with the movement of the model and the movement of the environment. For the one of the runway show “Hypnosis”, it is realized by a team of collaborating artists to achieve the final production who are active in the technological art field, such as the multi-disciplinary architect Philip Beesley.  A total of 20 looks took six months for the concepts to turn into physical work. The development of the work are made by both custom software and commercial software. For example, the 3d twisted vortex structure are constructed in Rhino and Grasshopper while the e-textile from certain pieces are build with custom scripts. 

Iris Van Herpen writes in her show notes that the first thread of inspiration comes from the Spanish neuroanatomist Ramón y Cajal, who translated the symptoms captured from the neural systems to sophisticated graphics. The projected guide to the forthcoming explorations on how human senses are able to influence the functions of wearable textiles. 

View this post on Instagram

‘Hypnosis’ reflects the beauty and complexity of our environment, exploring the patterns and structures within its fragile landscape ∞ the ‘Hypnosis’ technique, developed in collaboration with Professor Philip Beesley involves ten of thousands of plottercut mini ripples that continuously dissect the dress through each movement of the body, revealing skin in between the whimsical spheroid patterns that are designed to move faster than the eye can follow. ∞ Show credits Special thanks to collaborating artist: @anthony.howe.art Collaborating artist: @philip.beesley Video by @blitzkickers Styling: @patti_wilson Music direction: @sssalvadorrr Model: @iamsabaah Casting: Maida Gregory Boina, @maximevalentini & @caromauger Make up: @silbruinsma1 & the @maccosmeticsfrance PRO Team Hair: @martincullen65 for @streetersldn Shoes by @unitednude Manicure: @jessicascholten_ Press: @karlaotto ∞ #irisvanherpen #hypnosiscouture #parisfashionweek

A post shared by Iris van Herpen Official (@irisvanherpen) on