Category: Section A

amui1-LookingOutwards-03

For this Looking Outwards, I decided to blog about a custom wedding ring that the Nervous System created. The Nervous System created the custom wedding ring in 2014 for a client. They used their Cell Cycle app to create a model of the client’s ring. Digitally, they identified the horizontal and vertical cell structure, edge style, twist, and shape. After this, the Nervous System 3d printed an 18 karat yellow gold ring and placed a diamond surrounded by four rubies in the center.

Almost every married person has a standard silver colored diamond wedding ring. I chose to do this project for my Looking Outwards because I really admired how the Nervous System took something so common/mainstream, a standard diamond wedding ring, and transformed it into something completely new and technologically advanced. This project is so intricate, yet so graceful and sleek.

Full Custom Wedding ring project here

Link to the Cell Cycle here

Other Nervous System project here

amui1-Project-03-Dynamic-Drawing

Click to change time of day

amui1-p3

//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-03

//variables for cloud
var cloud1x = 50;
var cloud1y = 100;
var cloud2x = 90;
var cloud2y = 90;
var cloud3x = 130;
var cloud3y = 100;
var speed = .30;
var dir = 1;
//variables for rain
var rainY = 110
var rainSpeed = 5;
//variables for bird
var birdHx = 300;
var birdHy = 250;
//variables for easing
var easing = .005;
//variables to switch b/w time of daytime
var day = 0;

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

function draw() {
  if (day == 0) {
    background(151,214,216);
    //sun
    fill(255,255,0);
    ellipse(600,0,225,225);
    //flower
    //flowerstem
    stroke(0,100,0);
    strokeWeight(8);
    var stemY = constrain(mouseY,350,480);
    line(100,stemY,100,480);
    //flowerbody
    stroke(0);
    strokeWeight(0);
    fill(0);
    //restrict flower height
    var flowerY = constrain(mouseY,350,480);
    var flowerSize = flowerY*20/175;
    fill(255,255,0);
    arc(100,flowerY,flowerSize*2-25,flowerSize*2+5,PI,0);
    arc(100,flowerY,flowerSize*2-25,flowerSize*2+5,0,PI);
    arc(100,flowerY,flowerSize*2+10,flowerSize*2-30,HALF_PI,3*HALF_PI);
    arc(100,flowerY,flowerSize*2+10,flowerSize*2-30,3*HALF_PI,HALF_PI);
    fill(0);
    ellipse(100,flowerY,flowerSize,flowerSize);


    //clouds
    fill(255);
    strokeWeight(0);
    //firstcloud
    ellipse(cloud1x,cloud1y,50,50);
    ellipse(cloud2x,cloud2y,70,80);
    ellipse(cloud3x,cloud3y,50,50);
    //secondcloud
    ellipse(cloud1x+200,cloud1y,50,50);
    ellipse(cloud2x+200,cloud2y,70,80);
    ellipse(cloud3x+200,cloud3y,50,50);
    //thirdcloud
    ellipse(cloud1x+400,cloud1y,50,50);
    ellipse(cloud2x+400,cloud2y,70,80);
    ellipse(cloud3x+400,cloud3y,50,50);
    //movecloud
    cloud1x += dir*speed;
    cloud2x += dir*speed;
    cloud3x += dir*speed;
    //loopclouds
    if (cloud3x > width-25 || cloud1x < 25){
      dir = -dir;
    }
    if (cloud3x + 200 > width-25 || cloud1x+200 < 25){
      dir = -dir;
    }
    if (cloud3x + 400 > width-25 || cloud1x+400 < 25){
      dir = -dir;
    }
  } else{
    background(25,25,112);
    fill(255);
    strokeWeight(0);
    //firstcloud
    ellipse(cloud1x,cloud1y,50,50);
    ellipse(cloud2x,cloud2y,70,80);
    ellipse(cloud3x,cloud3y,50,50);
    //secondcloud
    ellipse(cloud1x+200,cloud1y,50,50);
    ellipse(cloud2x+200,cloud2y,70,80);
    ellipse(cloud3x+200,cloud3y,50,50);
    //thirdcloud
    ellipse(cloud1x+400,cloud1y,50,50);
    ellipse(cloud2x+400,cloud2y,70,80);
    ellipse(cloud3x+400,cloud3y,50,50);
    //movecloud
    cloud1x += dir*speed;
    cloud2x += dir*speed;
    cloud3x += dir*speed;
    //loopclouds
    if (cloud3x > width-25 || cloud1x < 25){
      dir = -dir;
    }
    if (cloud3x + 200 > width-25 || cloud1x+200 < 25){
      dir = -dir;
    }
    if (cloud3x + 400 > width-25 || cloud1x+400 < 25){
      dir = -dir;
    }

    //rain
    fill(220,220,220);
    ellipse(cloud1x,rainY+10,10,10);
    ellipse(cloud2x,rainY+10,10,10);
    ellipse(cloud3x,rainY+10,10,10);
    ellipse(cloud1x+200,rainY+10,10,10);
    ellipse(cloud2x+200,rainY+10,10,10);
    ellipse(cloud3x+200,rainY+10,10,10);
    ellipse(cloud1x+400,rainY+10,10,10);
    ellipse(cloud2x+400,rainY+10,10,10);
    ellipse(cloud3x+400,rainY+10,10,10);
    rainY += rainSpeed;
    if (rainY > height/2 - 40){
      rainY = cloud1y + 10;
    }
  }

  //drawbird
  //bird flying right
  if (mouseX > birdHx) {
    var targetX = mouseX;
    var distX = mouseX - birdHx;
    birdHx += distX*easing;
    //where bird wants to travel y
    var targetY = mouseY;
    var distY = mouseY - birdHy;
    birdHy += distY*easing;

    //birdhair
    stroke(255,255,153);
    strokeWeight(5);
    line(birdHx-2,birdHy-25,birdHx+3,birdHy-10);
    line(birdHx+6,birdHy-25,birdHx-2,birdHy-10);
    //birdlegs
    strokeWeight(0);
    fill(255,140,0);
    rect(birdHx-30,birdHy+50,3,10);
    rect(birdHx-20,birdHy+50,3,10);
    ellipse(birdHx-27,birdHy+60,5,5);
    ellipse(birdHx-17,birdHy+60,5,5);
    //birdbody
    if (mouseY < 100){
      fill(255,250,250);
      strokeWeight(0);
      ellipse(birdHx,birdHy,40,40);
      ellipse(birdHx-20,birdHy+30,60,45);
      ellipse(birdHx-45,birdHy+20,25,20);
      //halo
      noFill();
      stroke(0,191,255);
      strokeWeight(3);
      ellipse(birdHx+3,birdHy-35,20,5);
    } else {
      fill(255,255,153);
      strokeWeight(0);
      ellipse(birdHx,birdHy,40,40);
      ellipse(birdHx-20,birdHy+30,60,45);
      ellipse(birdHx-45,birdHy+20,25,20);
    }
    //birdbeak
    strokeWeight(0);
    fill(255,140,0);
    triangle(birdHx+20,birdHy-2,birdHx+30,birdHy+10,birdHx+16,birdHy+10);
    //wing
    arc(birdHx-20,birdHy+28, 13, 25, 0, PI+QUARTER_PI, CHORD);
    //eye
    fill(255);
    ellipse(birdHx,birdHy,15,15);
    fill(0);
    ellipse(birdHx+3,birdHy,8,8);
  }
  if (mouseX < birdHx) {
    //bird flying left
    var targetX = mouseX;
    var distX = mouseX - birdHx;
    birdHx += distX*easing;
    //where bird wants to travel y
    var targetY = mouseY;
    var distY = mouseY - birdHy;
    birdHy += distY*easing;
    //birdhair
    stroke(255,255,153);
    strokeWeight(5);
    line(birdHx-7,birdHy-25,birdHx-2,birdHy-10);
    line(birdHx+3,birdHy-25,birdHx-2,birdHy-10);
    //birdlegs
    strokeWeight(0);
    fill(255,140,0);
    rect(birdHx,birdHy+50,3,10);
    rect(birdHx+10,birdHy+50,3,10);
    ellipse(birdHx,birdHy+60,5,5);
    ellipse(birdHx+10,birdHy+60,5,5);
    if (mouseY < 100){
      fill(255,250,250);
      strokeWeight(0);
      ellipse(birdHx,birdHy,40,40);
      ellipse(birdHx+10,birdHy+30,60,45);
      ellipse(birdHx+30,birdHy+20,25,20);
      //halo
      noFill();
      stroke(0,191,255);
      strokeWeight(3);
      ellipse(birdHx+3,birdHy-35,20,5);
    } else {
      fill(255,255,153);
      strokeWeight(0);
      ellipse(birdHx,birdHy,40,40);
      ellipse(birdHx+10,birdHy+30,60,45);
      ellipse(birdHx+30,birdHy+20,25,20);
    }
    strokeWeight(0);
    //birdbeak
    fill(255,140,0);
    triangle(birdHx-20,birdHy-2,birdHx-30,birdHy+10,birdHx-16,birdHy+10);
    //wing
    arc(birdHx+10,birdHy+28, 13, 25, 0, PI+QUARTER_PI, CHORD);
    //eye
    fill(255);
    ellipse(birdHx,birdHy,15,15);
    fill(0);
    ellipse(birdHx-2,birdHy,8,8);
}
}
function mousePressed() {
    if (day == 0) {
      day = 1;
    } else {
      day = 0;
    }
}

For this project, I made a little story about a bird/duck that can fly. I had a lot of fun with this project, trying out new ways to incorporate mouseX and mouseY. I first sketched out the background and then started to hardcode in p5js. After that, I changed my objects to be coordinated with mouseX and mouse Y. The most difficult part was coordinating the size of the flower with mouseY. The things I controlled with my mouse was: size of the flower, position of the flower, color of the duck, and direction of the duck.

 

Hannah Kim-Looking Outwards-03

Minima | Maxima is computer science connoisseur Marc Fornes’s latest project, commissioned by World Expo 2017 in Astana, Kazakhstan. Fornes has placed himself at the forefront of computational design in the last 15 years, as well as the digital prototyping of large scale, self supporting structures. His studio is deeply rooted in the development of computational protocols and digital fabrication. This particular project involves a building system in which custom designed parts form complex, self-supporting curving surfaces. The project has an impressive height of 43 feet, yet the core material used to build the structure are simply 2mm strips of aluminum. The strips are constructed in only 3 layers in tandem, and support one another as they gain curvature and height. This project is extremely impressive to me because of the fact someone can make a huge, voluminous form that people can walk on, out of 2 mm triple layered aluminum sheets. I think the concept that one layer can’t exist independently, yet contributes and supports the structure as a whole is pretty great. Watching the video of the structure being built, it was shocking seeing the structure blowing in the wind while being built up, and then seeing the final, sturdy complete structure. I realized Fornes’s sensibilities as an artist are present in all of his computationally fabricated works, after seeing his website. His works are geometric and organic, and seemingly impossible.

images and close up of the sculpture

The Stripes Effect from MARC FORNES / THEVERYMANY on Vimeo.

link:http://www.thisiscolossal.com/2017/09/a-towering-4-story-organic-structure-built-from-material-as-thin-as-a-coin-by/

TSWARSTA-Section A-LookingOutwards-03

As soon as I saw “Rottlace” created by the MIT Media Lab I knew where it was from. Rottlace is a series of masks created for Bjork and inspired by Bjork’s music. I enjoy the intricacy of the masks and how they seam to be in motion, as well as the technical quality they have. The ideas of self-healing and having a skinless face align well with the visual style of the mask.

This parametric object was 3D printed using multi-material printing, which allows the elaborate combinations of different properties and variables to be produced. The properties are distributed complex structures, in this instance Bjork’s face, allowing the mask to fit perfectly as well as allowing the structure and shape of the mask to coexist with Bjork’s face, causing both elements to complement each other. The technology utilized in the printing of this mask has allowed the design to be fluid and has allowed for the combination of elements with different transparencies and generated modules to coexist in a single form. The simulation that generated the code and creation of this piece is mimicking that of both lace but something of vein structure as well.

https://www.media.mit.edu/projects/rottlace/overview/

TSWARSTA-Section A-LookingOutwards-02

Leander Herzog’s “Extruder”, 2015 was something I gravitated towards upon closer encounter. At first I was intrigued by the opacity and shapes of the forms that were being presented – visually. I did not know it was a generated typeface and that these were letters, which is what I found extremely interesting. I hope to build a type that is altered by code as soon as I learn the capabilities. I enjoy seeing design work that integrates code because I can see its benefits. Visually, it is also interesting to see how code creates as it is generated and the motions and shapes that are produced are very distinct.

D3.js was utilized in the creation of this piece – D3 assists users in utilizing data and visualizing it through code. Clipper.js was also used, which allows one to modify the path and geometry of shapes. Data also had to be pulled somehow – some sort of api? Mouse hover and mouse click are also used. Variables must have also been created for the different shapes to be able to be interacted with, and to be able to effect each other.

https://leanderherzog.ch/extruder/

TSWARSTA- Section A- Project-03-Dynamic-Drawing

swarstad-dynamic-drawing


var sizex = 0;

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

function draw() {
	rectMode(CENTER);
    noStroke();
R=(640-mouseX)/2;
G=(480-mouseY)/2;
B=mouseX*(0,255);
//Altering color based on mouse position

background(B,R,G);
//altering background color based on mouse position

sizex=mouseX/2;
if (sizex>160){
	sizex=mouseX/-2;
};
//altering position and size based on x mouse position


sizey=mouseY/2;
if(sizey>120){
	sizey=mouseY/-2;
};
//altering position and size based on y mouse position

rot=PI/(640/mouseX);
//altering rotation based on x position

	fill(R, G, B);
    translate(mouseX, mouseY);
    rotate(rot);
	rect(0, 0, sizex, sizey);
 

}

I was inspired by Jamie XX’s “In Colour” album artwork and visuals. I created a square that is drawn on a background where the color is altered based on mouse location – this is to mimic the spectrum in the album artwork’s background. The shape itself is a square and is altered by the mouse x and y, depending on the quadrant it is in (if you divide the canvas size into 4 parts) as I wanted the location of the shape to respond to the mouse placement as well.

mjnewman LookingOutwards-03, Section A

SILK PAVILION from Mediated Matter Group on Vimeo.

MIT Media Lab’s Mediated Matter group (Neri Oxman, Jorge Duro-Royo, Markus Kayser, and Jared Laucks) created a structure that naturally and robotically mimicked the weaving patterns of silk worms. They initially started by tracking individual silkworms’ movements by attaching small magnets to their heads. The data and movements collected from those sessions were then translated into code so that a robot arm could weave different simplified versions across 26 panels that would eventually be formed into an elevated dome. However, they tie back in their original inspiration for the last step by putting the silkworms back on the threaded structure and integrating their natural silk. That is probably what I admire the most, the fact that they took the next step and incorporated silkworms after they could have easily stopped and left it at the threaded structure.

In terms of algorithms, they used the tracked movements of the silkworms and translated that into a single route the CNC machine would trace with a single white thread. But incorporating the silkworms as the last step really changed the final form and emphasizes the creator’s artistic intention of magnifying the silkworm phenomenon.

Here is another informative article

sntong-Looking Outwards-03-Computational Fabrication

Evaporative Folding by Jeana Ripple (project architect), Ryan Lewandowski and Hossein Haj-Harriri + Mehdi Sadaat (consultant) uses computational techniques to customize the production of aluminum modules that creates an effective facade for evaporative cooling for houses in hot and dry climates. By optimizing material properties and manufacturing processes for aluminum, the team was able to generate an effective “cooling” facade that is durable, mold-resistant and can also act as an passive solar heat gain element during the night. The computational processes in the project is used to determine location, size of holes that are then CNC into the aluminium panels to create the perforation pattern suited for the house in the specific location.

It is inspiring to see the possible elegant solutions that computational processes are allowing architects and engineers to address environmental issues. Not only the project is successful in demonstrating what computational fabrication can do for the construction industry, it also shows that architects can design smarter buildings that are more energy efficient.

(image source: http://ripplearchitecture.com/Evaporative-Skin)

Looking Outward 3

         

The Institute for Computational Design (ICD) and the Institute of Building Structures and Structural Design (ITKE) at the University of Stuttgart construct a research pavilion every year since 2010. The one that I admire the most, however, is not the latest and most complicated one, but the 2012 one. In November 2012 ICD and ITKE have completed a research pavilion that is entirely robotically fabricated from carbon and glass fibre composites. What I admire is that “the research focused on the material and morphological principles of arthropods’ exoskeletons as a source of exploration for a new composite construction paradigm in architecture”. When I was watching the Vimeo video that records the procedure of the model making. I feel that robots and computing really take a big part in the future architecture. I am an architecture major student, so I am really curious about the future trend of buildings. This pavilion makes me feel very excited because using robots are actually helping architects to build a bigger dream. When using robots, your models can be in a much larger scale in a higher level of precision and elaboration. It can reduce the amount of labor and improve the efficiency. Also, it can human’s thoughts into In the video, they also show that they are using Grasshopper, a plug-in, in Rhino to control the robots. I am now taking the Grasshopper course which makes me more excited about this. We also need to learn about coding, python, in grasshopper to write programs to make a model. I think this project really gives me the direction, inspiring me what grasshopper and robots can do to achieve your dream, and guides me to go further and further with technology. .

hannahk2-project-02

sketch

//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Project-02

var eyeHeight = 40;
var eyeWidth = 42;
var pupil = 5;
var mouthHeight = 10;
var mouthWidth= 20;
var tentacleHeight= 10

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

function draw() {
//colors
background(210, 134, 136);
var bodyColor = color(188, 81, 81);
var darkestColor= color(62, 25, 26);
var tentacleColor= color(81, 40, 40);
var white= color(254, 218, 233);
var black= color(16, 0, 1);
    
noStroke();

//body curve
fill(bodyColor);
beginShape();
curveVertex(270, 600);
curveVertex(259, 300);
curveVertex(240, 136);
curveVertex(263, 71);
curveVertex(352, 54);
curveVertex(397, 98);
curveVertex(398, 142);
curveVertex(378, 262);
curveVertex(374, 700);
endShape();

//left tentacles
fill(tentacleColor)
ellipse(158, 348, 10, tentacleHeight);
ellipse(161, 330, 10, tentacleHeight);
ellipse(171, 314, 10, tentacleHeight);
ellipse(187, 308, 10, tentacleHeight);
ellipse(197, 286, 10, tentacleHeight);
ellipse(209, 273, 10, tentacleHeight);
ellipse(228, 273, 10, tentacleHeight);

//right tentacles
fill(tentacleColor)
ellipse(407, 276, 10, tentacleHeight);
ellipse(429, 281, 10, tentacleHeight);
ellipse(435, 276, 10, tentacleHeight);
ellipse(447, 298, 10, tentacleHeight);
ellipse(465, 312, 10, tentacleHeight);
ellipse(477, 338, 10, tentacleHeight);
ellipse(479, 363, 10, tentacleHeight);

//front 2 legs
fill(bodyColor);
beginShape();
curveVertex(259, 300);
curveVertex(259, 300);
curveVertex(279, 415);
curveVertex(274, 400);
curveVertex(275, 381);
curveVertex(272, 358);
curveVertex(246, 315);
curveVertex(244, 281);
curveVertex(317, 239);
curveVertex(389, 265);
curveVertex(391, 319);
curveVertex(373, 345);
curveVertex(365, 377);
curveVertex(363, 405);
curveVertex(357, 419);
curveVertex(348, 362);
curveVertex(365, 311);
curveVertex(318, 277);
curveVertex(276, 296);
curveVertex(280, 325);
curveVertex(288, 370);
curveVertex(283, 410);
curveVertex(280, 418);
curveVertex(276, 417);
endShape();

//left leg
fill(bodyColor);
beginShape();
curveVertex(400, 234);
curveVertex(265, 232);
curveVertex(204, 232);
curveVertex(180, 256);
curveVertex(166, 288);
curveVertex(152, 299);
curveVertex(142, 329);
curveVertex(156, 380);
curveVertex(157, 378);
curveVertex(160, 333);
curveVertex(175, 314);
curveVertex(198, 287);
curveVertex(222, 270);
curveVertex(262, 273);
curveVertex(400, 275);
endShape();

//right leg
fill(bodyColor);
beginShape();
curveVertex(300, 240);
curveVertex(372, 245);
curveVertex(435, 230);
curveVertex(458, 244);
curveVertex(462, 274);
curveVertex(473, 290);
curveVertex(497, 322);
curveVertex(482, 383);
curveVertex(480, 379);
curveVertex(470, 316);
curveVertex(441, 289);
curveVertex(405, 275);
curveVertex(381, 270);
curveVertex(350, 275);
endShape();

//left eye white
fill(white);
ellipse(295, 195, eyeWidth, eyeHeight);

//left eye pupil
fill(black);
ellipse(295, 195, pupil, pupil);


//right eye white
fill(white);
ellipse(348, 194, eyeWidth, eyeHeight);

//right eye pupil
fill(black);
ellipse(348, 194, pupil, pupil);

//mouth
fill(darkestColor);
ellipse(320, 230, mouthWidth, mouthHeight);

//left brow
strokeWeight (3);
stroke(120);
line(270, 170, 286, 165);

//right brow
strokeWeight (3);
stroke(120);
line(351, 163, 365, 169);
}

function mousePressed() {
    eyeHeight = random(30, 55);
    eyeWidth = random(20, 60);
    pupil = random(2, 10);
    eyeSize = random(10, 30);
    mouthHeight = random(4, 30);
    tentacleHeight = random(10, 20);
}

This project was pretty fun for me. Since it was my first time working with the curve function, it got frustrating at times, but I am pretty happy with how the curves and the changing shapes on the octopus turned out.