Month: September 2020

Looking Outwards 03- Computational Fabrication

Kinematics Petal Dress by Nervous System.

A project that I found to be an inspiration under the topic of generic artwork is the Kinematics Petal Dress (https://n-e-r-v-o-u-s.com/projects/albums/kinematic-petals-dress/), designed by the company Nervous System, a generative design studio that takes ideas from natural phenomenons and implements them into their work. This particular dress which is 3D printed, is created to be a continuous textile with interlocking parts and components. I find this piece of work interesting because it represents how the worlds of technology and fashion can combine to create customizable clothing. In terms of the algorithms that generated the work, I think that the aspect of variability makes it so that the length, width and shape of each component can be altered and have dynamic aspects that change with the changing data about the body type of specific person. This makes the work customizable, and designed to suit the needs of a variety of people. Additionally, this design firm believes in reflecting natural properties in their fashion pieces, and in this dress, that vision is manifested because the 1600+ overlapping pieces and hinges create the effect of flower petals layering and blooming. This dress is also compressible and foldable, which takes into consideration efficiency, and I find this really unique.

Project 03 – Variable Face

I was very interested in the Mondrian image we created for the first assignment and how I could build on that foundation to begin to create a painting which we can control in the same style.

sketch
function setup() {
    createCanvas(650, 450);
    background(240);
}

function draw() {

var rec1x = constrain(mouseX,60,340)
var rec1y = constrain(mouseY,120,390)

var rec2x = 400 - constrain(mouseX,60,340)
var rec2y = 450 - constrain(mouseY,120,390)

var rec3x = dist(400,0,constrain(mouseX,450,600),0)
var rec3y = dist(400,constrain(mouseY*(2/3),120,300),400,constrain(mouseY,180,390))

var rec4x = 650-constrain(mouseX,450,600)
var rec4y = constrain(mouseY/2,60,225)

//making sure movement doesn't leave a trail
  background(240);

//was having issues getting strokes to show up later so I decided to push this part in
  push();
  noStroke();
//top left rectangle
  if (rec1x*rec1y >= rec2x*rec2y) {
    fill(255,0,0);
  } else {
    fill(0,0,255);
  }
  rect(0,0,rec1x,rec1y);
//bottom middle rectangle
  if (rec1x*rec1y >= rec2x*rec2y) {
    fill(0,0,255);
  } else {
    fill(255,0,0);
  }
  rect(constrain(mouseX,60,340),constrain(mouseY,120,390),rec2x,rec2y);
//top middle yellow rectangle
  fill(255,255,0);
  rect(constrain(mouseX,60,340),0,400-constrain(mouseX,60,340),constrain(mouseY/2,60,330));
//colred retangle above yellow
  if (rec3x*rec3y >= rec4x*rec4y) {
    fill(0,0,255);
  } else {
    fill(255,0,0);
  }
  rect(constrain(mouseX,450,600),0,rec4x,rec4y);
//top tight rectangle
  if (rec3x*rec3y >= rec4x*rec4y) {
    fill(255,0,0);
  } else {
    fill(0,0,255);
  }
  rect(400,constrain(mouseY*(2/3),120,300),rec3x,rec3y);
//bottom yellow rectangle
  fill(255,255,0);
  rect(400,constrain(mouseY,180,390),250,450-constrain(mouseY,180,390));


  pop();
  strokeWeight(14);
//dividing line between two sections
  line(400,0,400,450)
//left side vertical line
  line(constrain(mouseX,60,340),0,constrain(mouseX,60,340),450);
//left side long horizontal
  line(0,constrain(mouseY,120,390),400,constrain(mouseY,120,390));
//left side short horizontal
  line(constrain(mouseX,60,340),constrain(mouseY/2,60,330),400,constrain(mouseY/2,60,330));
//right side bottom horizontal
  line(400,constrain(mouseY,180,390),650,constrain(mouseY,180,390));
//right side vertical
  line(constrain(mouseX,450,600),0,constrain(mouseX,450,600),constrain(mouseY,180,390));
//right side top horizontal
  line(constrain(mouseX,450,600),constrain(mouseY/2,60,225),650,constrain(mouseY/2,60,225));
//right side middle horizontal
  line(constrain(mouseX,450,600),constrain(mouseY*(2/3),120,300),400,constrain(mouseY*(2/3),120,300));


}

Looking Outwards 03 – Computational Fabrication

A work of computational fabrication which I find interesting is the Winery Gantenbein, by Gramazio & Kohler + Bearth & Deplazes.

This is an addition to an existing winery and is an open air fermentation room.
Here, the architects used a brick laying robot to attain great precision for these brick walls, but were able to stay playful with the material and keep the project feeling “human”. The pattern laid by the robot went brick by brick, and laid the bricks so the pattern could be read, while the design also allowed for fresh air
during fermentation, without allowing for direct sunlight. Here I think that the architects have done a great job, as they used computational fabrication in order to augment a design which may have otherwise ended up much more boring.

Looking Outwards 3

Project: Cloud Village

Creator: Philip F. Yuan and team

Year of Creation: 2018 for the Venice Architecture Biennale

Cloud Village is an abstract architectural piece aimed at representing the metaphor between private and public spaces/realms in China. The project itself contains four separate open room-like spaces, with a twisting roof connecting the spaces to create a curved u-shaped form from top-down. The materiality itself is a permeable recycled plastic structure, with robotic fabrication being used at every step to pre-fabricate each part before it was assembled on site. The architect also used a “topological optimization algorithm” to calculate structural performances within the curved roof. What I admire about this project is that each part of it–from the material choice, to the form or method of fabrication, all tied back to the architect’s intention and theme of the project. While the recycled plastic material allowed for the creation of a  permeable material in the fabrication process, it also tied back to the environmental issues surrounding China and approached architectural building materials from a critical standpoint.

Project 3 – Dynamic Drawing

drawingtlourie

function setup() {
    createCanvas(500, 500);
    background(0);

}

function draw() {
	background(0);
	stroke(200, 0, mouseY);
    strokeWeight(mouseX/15); //vertical red lines
    line(25, 0, 25, 500);
    line(75, 0, 75, 500);
    line(125, 0, 125, 500);
    line(175, 0, 175, 500);
    line(225, 0, 225, 500);
    line(275, 0, 275, 500);
    line(325, 0, 325, 500);
    line(375, 0, 375, 500);
    line(425, 0, 425, 500);
    line(475, 0, 475, 500);


    noStroke();
    fill(0, 0, 200, mouseY/2 + 20); //circls
    ellipse(100, 100, pmouseX-mouseX/3);
    ellipse(100, 400, pmouseX-mouseX/3);
    ellipse(400, 100, pmouseX-mouseX/3);
    ellipse(400, 400, pmouseX-mouseX/3);



    fill(200, 200, 0, mouseX/2 + 20); //circles
    ellipse(100, 100, pmouseY-mouseY/3);
    ellipse(100, 400, pmouseY-mouseY/3);
    ellipse(400, 100, pmouseY-mouseY/3);
    ellipse(400, 400, pmouseY-mouseY/3);

    push();

    translate(width/2, height/2);
    rotate(radians(mouseX));
    fill(255, 255, 255, mouseX/2+15); //white piece
    rectMode(CENTER);
    rect(0, 0, 255-mouseY, 1000); 

    pop();

	stroke(200, 0, mouseY);
	strokeWeight(mouseY/15); //horizontal red lines
    line(0, 25, 500, 25);
    line(0, 75, 500, 75);
    line(0, 125, 500, 125);
    line(0, 175, 500, 175);
    line(0, 225, 500, 225);
    line(0, 275, 500, 275);
    line(0, 325, 500, 325);
    line(0, 375, 500, 375);
    line(0, 425, 500, 425);
    line(0, 475, 500, 475);


}

LO 3

Fluorescence Zoetrope

“Fluorescence Zoetrope” is a 3D printed sculptural animation piece created by the design firm Nervous System (Jessica Rosenkrantz and Jesse Louis-Rosenberg.) They 3D modeled an organic growth loop algorithmically, then PLA printed each frame. Then they mounted them onto a rotating platform to animate the form.
I am drawn to this piece because of the impressive craft involved in it. The color gradient is eye catching and perfectly smooth, and the forms themselves are incredibly high-resolution. I think this project is a testament to the level of refinement that technologies such as computer generation and 3D printed can provide at times. The algorithms used to create this project are based on natural growth processes.

Project – 3 Dynamic Drawing

This particular drawing was inspired by the Purist Paintings of Le Corbusier. The interactive painting re-interprets the ideas of transparency and multi-perspectival drawings explored in Cubist and purist paintings.

sketch
//tjchen 
// 15104 section A
var dia =5
var size = 5
var x
var y 
var vertex1 

function setup() {
    createCanvas(1000, 600);
    background(255);
}
function draw () {
    background(0);
    y = height/2;
    x = max(mouseX,width/5);
    vertex1 = max (0+mouseY*4, width/2);
    vertex2 = min (width-mouseY*4, width/2);
    push();
    var yguitar = height /3;
    rectMode(CORNER);
    fill(61, 80, 130);
    beginShape();
    vertex(vertex1,y);
    vertex(vertex2,y);
    vertex(0,height);
    vertex(width,height);
    endShape();

    //moving bottles
    push();
    scale(mouseY/400);
    rectMode(CENTER);
    fill(230,150);
    rect(mouseX+100,y,60,200,30);
    rect(mouseX+100,y-100,20,100,10);
    strokeWeight(1);
    stroke(0);
    circle(mouseX+100,y-150,20);
    fill(255,0,0,70);
    noStroke();
    rect(mouseX+100,y+15,60,170,30);
    stroke(255,0,0,140);
    pop();
   
    //GUITRAR
    noStroke();
    translate(width/2,height/2);
    scale(mouseY/200); 
    fill(140,height-mouseY);
    rectMode(CENTER);
    rect(200,0,150,50);
    rect(0,0,400,200,80);
    fill(mouseX);
    circle(0,0,50);
    fill(61, 80, 130);
    circle(0,(0)+100,80);
    fill(0);
    circle(0,(0)-100,80);
    //can
    pop();
    push();
    scale(1/(mouseX/400));
    fill(230);
    rectMode(CORNER);
    rect(x-25,y-15,50,150,25);
    strokeWeight(1);
    stroke(0);
    circle(x, y, 50);
    fill(150);
    circle(x, y, 30);
    pop();
    // circle 
    fill(41,71,82);
    circle(3*(width/5),mouseX,50);
    //bull nose
    var c =color(178,13,29,(height-mouseY)); 
    strokeWeight(height-mouseY);
    fill(c);
    rectMode(CENTER);
    rect((width/2)+50,height/2, abs(mouseY/4), mouseY/5,abs(mouseY/5));

}

Project 3 – Dynamic Drawing

For this project I created a nautical scene that has many changing/moving elements that simulate the change from sunrise to sunset.

sketch

//Helen Cheng - helenc1
//Section C

var waterLevel=400

function setup() {
    createCanvas(600, 450);
}

function draw() {
  strokeWeight(0);
  //sky gradients from dark to light along x
  var skyG = 136-mouseX/6
  var b = 255-mouseX/6
  background(0,skyG,b)
  //sun gradients from red to yellow along x
  var g = 255-(mouseX/6)
  fill(255, g, 10);
  circle(600-mouseX, 200, 100);
  //water level rises and falls along y
  fill(141,206,238);
  rect(0,waterLevel-mouseY/4,600,450);
  //sailboat moves with your cursor along X
  fill(230,62,54);
  arc(mouseX,400,200,100,0,PI);
  //sail
  fill(255);
  triangle(mouseX,375,mouseX,300,mouseX+75,350);
  strokeWeight(5);
  stroke(56,56,56);
  line(mouseX,400,mouseX,300);
}

Looking outwards 3 Computational Fabrication

Digital Fabrication/ Computational Fabrication

Computational fabrication is a relatively new field in comparison the rest of the discipline of building and making. With the advent of computational design and software the need for fabrication techniques to realize these new fantastical objects arose. Office Da an architectural firm based in Boston led by Nader Tehrani and Monica Ponce de Leon, explored these concepts in their piece “An Installation of folded Steel Plates” at the MoMa. Conceived in 1998 for the show “Fabrications” at the Museum of Modern art, Architecture as a discipline has just began to investigate the infinite possibilities of Digital fabrication with the opening of the Guggenheim Museum a year prior. For a building sized object to consist of many pieces of customized geometries and complex forms became possible with the inquiries the architects have made into computational designs and fabrication. In the installation Tehrani and Ponce de Leon created, they seek to use the fabrication techniques to blur the line between the traditional structural systems of architecture (tectonics) with actual geometrical design. They do this by digitally folding metal panels and stitching them together in very precise ways. The perforations on the panels are also generated via a computational device in order to lower the weight of the metal panels. The installation also relied on computational tools and fabrication to realize it’s optical illusionary characteristics. From certain angles the installation appears to be flat which it is actually conceived of many customized metal panels. This is interesting because the project begins to touch on the idea of mass customization, a process previously possible but costly. Large amounts of customizable pieces and objects can be designed and fabricated with the correct algorithms and machines. Customization, with the discoveries of Computational fabrication is no longer a luxury provided by the craftsman and artisans, but now a new mode of production.

MOMA FABRICATION

Dynamic Drawing

sketch
//Jasmin Kim
//Section D
var r=63;
var b=219;
var br=90;
var fishX=200;
var fishY=300;
var seaY=160;
var bubblebright=0;
var angle=0;

function setup() {
    createCanvas(450, 600);
}

function draw() {
    //Sky
    //Changes Night to morning as mouseY moves downward
    let back=constrain(mouseY,70,height)
    background(back);

    //Stars & Sun
    //Star comes out during night time(mouse at the top right side)
    //Sun grows from 0 to 128 during the morning(mouse at the bottom right side)
    //Star rotates as mouseX increases(mouse at the topside)
    let op=constrain(mouseX,0,width/2);
    let sunsize=constrain(mouseX,0,129);
    if(mouseY<200){
        push();
        noStroke();
        push();
        translate(79,121);      //star1
        rotate(radians(mouseX));
        fill(230,219,57,op);
        ellipse(0,0,4,17);
        ellipse(0,0,17,4);
        pop();
        push();
        translate(175,164);     //star2
        rotate(radians(mouseX));
        fill(230,219,57,op);
        ellipse(0,0,4,17);   
        ellipse(0,0,17,4);
        pop();
        push();
        translate(355,145);     //star3
        rotate(radians(mouseX));
        fill(230,219,57,op);
        ellipse(0,0,4,17);   
        ellipse(0,0,17,4);
        pop();
        pop();
    } else{
        push();
        noStroke();
        fill(247,212,40);
        circle(351,45,sunsize);
        pop();
    }


    //Sea
    //Color changes from deap sea color to shallow water level color
    //as mouseY moves downward
    let seaY = constrain(mouseY,180,300);
    let gr = constrain(mouseY,85,174);
    push();
    fill(r,gr,b);
    noStroke()
    square(0,seaY,width);            
    pop();

    //mouth
    fill(112,196,161);   
    //let animalY = constrain(mouseY,160,390);
    let fishY = constrain(mouseY,130,287);
    moveY=height-fishY
    push();
    noStroke();
    circle(fishX+91,moveY-5,13);
    circle(fishX+91,moveY+5,13);

    //Tail
    push();
    fill(246,208,98);
    stroke(246,208,98);
    strokeWeight(3);
    beginShape();
    curveVertex(fishX-86,moveY-4);
    curveVertex(fishX-86,moveY-4);
    curveVertex(fishX-122,moveY-13);
    curveVertex(fishX-114,moveY+1);
    curveVertex(fishX-120,moveY+22);
    curveVertex(fishX-86,moveY+12);
    curveVertex(fishX-86,moveY+12);
    endShape();
    pop();

    //fish body/eyes
    ellipse(fishX,moveY,181,85);
    fill(0);
    ellipse(fishX+70,moveY-11,16,14);
    fill(255);
    ellipse(fishX+74,moveY-13,5,4);
    pop();

    //fins
    push();
    fill(246,208,98);
    stroke(246,208,98);
    strokeWeight(3);
    beginShape();
    curveVertex(fishX+23, moveY-5);
    curveVertex(fishX+23, moveY-5);
    curveVertex(fishX-6, moveY-8);
    curveVertex(fishX-5, moveY+5);
    curveVertex(fishX-4, moveY+18);
    curveVertex(fishX+25, moveY+7);
    curveVertex(fishX+25, moveY+7);
    endShape();
    pop();

    //Bubbles
    //Bubble disappears as mouseY moves upwards
    push();
    if(mouseY<230){
        fill(31,131,172,0);
        strokeWeight(1);
        fill(31,131,172);
        circle(fishX+102,moveY-2,4);
        circle(fishX+106,moveY-10,3);
        circle(fishX+118,moveY-13,4);
        circle(fishX+114,moveY-31,5);
        circle(fishX+127,moveY-45,7);
    } else if(mouseY<280){
        fill(31,131,172,100);
        strokeWeight(1);
        fill(31,131,172,100);
        circle(fishX+102,moveY-2,4);
        circle(fishX+106,moveY-10,3);
        circle(fishX+118,moveY-13,4);
    } else{
        fill(0);
    }
    pop();

    //cloud color gets brighter as mouseY moves downward
    //cloud comes in as mouseX moves right
    //leftside cloud
    let skyX = constrain(mouseX,0,width/2);
    let rrr =constrain(mouseY,210,252);
    push();
    noStroke();
    fill(rrr,185,153);
    circle(skyX-64,43,50*1.5);        //big cloud
    circle(skyX-106,46,22*1.5);          //small cloud
    rectMode(CENTER);
    rect(skyX-72,64,99*1.5,30*1.5,30);
    pop();

    //rightside cloud
    //comes in from the left edge
    let skyyX =constrain(mouseX+30,0,width/2);        
    push();
    noStroke();
    fill(rrr,185,153);
    circle((width-skyX)+73,73,61*1.4);        //big cloud
    circle((width-skyX)+115,76,31*1.5);          //small cloud
    rectMode(CENTER);
    rect((width-skyX)+84,93,123*1.3,31*1.5,30);
    pop();
}

For created this idea, I had to let a lot of values into constrain so that the mouseX and the mouseY values does not get mixed up each other.