Author: yugyeonl@andrew.cmu.edu

Yugyeong Lee Project 04

sketch

//Yugyeong Lee
//Section A (9:00AM)
//yugyeonl@andrew.cmu.edu
//Project-04
function setup() {
    createCanvas(640, 480);
}

function draw() {
	background(225, 219, 255);
	noLoop();
	
	var x = 0;
	var y = 0;

    //create "X" shape using two crossing shapes
	for (var i = 0; i <=640; i +=10) {
		stroke(255);
    	line(width - i, y, x, y + i*2);
        line(i, height, width, height - i*2);
        line(width - i, height, x, height - i*2);
      line(i, y, width, y + i*2);
    }
    //create the outlining shapes
    for (var i = 0; i <=640; i +=5) {
        line(width - i, y, width, height - i*2);
        line(i, height, x, y + i*2);
        line(width - i, height, width, y + i*2);
        line(i, y, x, height - i*2);
    }
    //create a diamond shape that will fill the center
    for (var i = 150; i <=350; i +=5) {
        line(width/2, height/5, 1.25*i, height/2);
        line(1.25*i, height/2, width/2, 4*height/5);
    }
}

In this project, I wanted to utilize the curving shape created by straight lines to create gradient by overlapping lines. The white lines overlap to create a gradient color in the background as well as creating shapes that embrace the center part.

Yugyeong Lee Project – 03

sketch

//Yugyeong Lee
//section A (9:30AM)
//yugyeonl@andrew.cmu.edu
//project 3

var x = 320;
var y = 240;
var dir = 1;

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

function draw() {

	//background color change based on position of mouseX
	colorR = map(mouseX, 0, width, 255, 255);
	colorB = map(mouseX, 0, width, 179, 255);
	colorG = map(mouseX, 0, width, 179, 204);
	background(colorR, colorG, colorB);
	noStroke();
	noCursor();

	//random circles with changing sizes
	noStroke();
	fill(0);
	var diam = map(mouseX, 0, width, 0, 100);
	ellipse(width/4, height/4, diam, diam);
	var diam = map(mouseX, 0, width, 0, 75);
	ellipse(width/6, 5 * height/6, diam, diam);
	var diam = map(mouseX, 0, width, 0, 25);
	ellipse(width/2, 4 * height/7, diam, diam);
	ellipse(8 * width/9, 8 * height/9, diam, diam);
	var diam = map(mouseX, 0, width, 0, 50);
	ellipse(width/4, height/4, diam, diam);
	var diam = map(mouseX, 0, width, 0, 50);
	ellipse(4 * width/5, height/2, diam, diam);

	//motionless circles
	ellipse(5 * width/7, 9 * height/12, 20, 20);
	ellipse(6 * width/8, height/9, 15, 15);
	ellipse(3 * width/7, 11 * height/12, 15, 15);
	ellipse(width/3, 3 * height/7, 15, 15);

	//mouse guide (mouseX)
	if (mouseX > x) {
		x += 0.75;
	}
	if (mouseX < x) {
		x -= 0.75;
	}
	strokeWeight(10);
	stroke(255);
	line(x, 0, x, height);
	line(x + 20, 0, x + 20, height);

	//mouse guide (mouseX)
	if (mouseY > y) {
		y += 0.75;
	}
	if (mouseY < y) {
		y -= 0.75;
	}
	strokeWeight(10);
	stroke(255);
	line(0, y, width, y);
	line(0, y + 20, width, y + 20);

	//change the direction of rotation of the cursor
	if (mouseX > width/2) {
		dir = -dir;
	}

	//rotating shape for cursor
	noStroke();
	fill(0);
	push();
	translate(mouseX, mouseY);
	rotate(dir * millis()/500);
	quad(0, 0, -6, 24, 0, 48, 6, 24);
	pop();	

	push();
	translate(mouseX, mouseY);
	rotate(dir * millis()/500);
	quad(0, 0, -24, -6, -48, 0, -24, 6);
	pop();	

	push();
	translate(mouseX, mouseY);
	rotate(dir * millis()/500);
	quad(0, 0, 6, -24, 0, -48, -6, -24);
	pop();	

	push();
	translate(mouseX, mouseY);
	rotate(dir * millis()/500);
	quad(0, 0, 24, 6, 48, 0, 24, -6);
	pop();

	//blackout when any key is pressed
	if (keyIsPressed) {
		fill(0);
		rect(0, 0, width, height);
	}

}

The most challenging part of this project was planning to create a design for the dynamic drawing rather than figuring out the codes.

Yugyeong Lee Looking Outwards 03

Joris Laarman, a Dutch designer, known for his experimental designs studying variety of shapes, worked on the microstructures series—Soft Gradient Chair, Aluminum Gradient Chair, and Adaptation Chair. The first chair of the project used polyurethane in furniture design by intergrating 3D printing technology in cellular level to specify functions for different needs. Utilizing algorithm based program, Grasshopper in Rhino as shown in the image below, Joris Laarman Lab designed part of the chair to be structurally stable while the rest—more open—acted to give comfort in one print. The second chair is made out of aluminum through Laser Sintering—a generative design tool. Similar to the first chair, the furniture was designed also to specify functions for different needs. Lastly, the third chair known as the Adaptation chair is made out of vertical long module that, like a tree, branch out to form into different geometric shapes to also serve the different needs of the chair. This chair is 3D printed by a SLS machine then coated with metallic material. Through these project, the artist articulate the change of form/shape to adapt to the different needs of a chair allowing comfort as its priority of design.

gradient_soft_gh3-845x684gradient_chair11-1500x630

Soft Gradient Chair

bone-armchair-side_site2-1500x889 schermafbeelding-2014-03-26-om-13-36-18-845x684

Aluminum Gradient Chairadaptation-chair_first-845x684adaptation-chair_close11-1500x630

Adaptation Chair

http://www.jorislaarman.com/

 

Yugyeong Lee Project – 02

sketch

//Yugyeong Lee
//Secton A 9:00 AM
//yugyeonl@andrew.cmu.edu
//proeject-02

var faceWidth = 150;
var faceHeight = 175;
var eyeSize = 15;
var noseWidth = 15;
var noseHeight = 10;
var blushSize = 15
var mouthWidth = 60;
var mouthHeight = 40;
var color = 155;
var hairLength = 175;
var hairangle = 60;
var hairDecorationType = 'ribbon';

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

function draw() {
	//Background
	noStroke();
	fill(249, color, 138);
    rect(0, 0 , width, height / 4);
    rect(0, 320 , width, height / 4);
    fill(249, color, 18);
    rect(0, 160 , width, height / 4);
    rect(0, 480 , width, height / 4);
    fill(255);
    ellipse(width / 2, height / 2 - 15, 300, 300);
    
    //Hair
    noStroke();
    fill(109, 93, 74);
    ellipseMode(CENTER);
    ellipse(240, 285, 200, 200);
    rect(140.5, 215, 199, hairLength, hairangle);

    //Face
    noStroke();
    fill(242, 214, 180);
    ellipseMode(CENTER);
    ellipse(width / 2, height / 2 - 10, faceWidth, faceHeight);

    //Blush
    var blushLX = width / 2 - faceWidth * 0.35
    var blushRX = width / 2 + faceWidth * 0.35
    fill(247, 186, 215);
    ellipse(blushLX, height / 2 + faceHeight * 0.15, blushSize * 1.15, blushSize); 
    ellipse(blushRX, height / 2 + faceHeight * 0.15, blushSize * 1.15, blushSize);

	//Hair (bangs)
	fill(109, 93, 74);
    rect(160, 220, 160, 85, 30);
    fill(242, 214, 180); //Part of Face
    triangle(195, 310, 210, 270, 215, 310);

    //Eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(68, 45, 18);
	ellipse(eyeLX, height / 2 + faceHeight * 0.05,  eyeSize, eyeSize * 1.15);
    ellipse(eyeRX, height / 2 + faceHeight * 0.05,  eyeSize, eyeSize * 1.15);

    //Nose
    var noseX = width / 2
    var noseY = height / 2 + faceHeight * 0.125
    stroke(153, 116, 81);
    strokeWeight(4);
    noFill();
    arc(noseX, noseY, noseWidth, noseHeight, PI, TWO_PI);

	//Mouth
	fill (222, 86, 88);
	noStroke();
	arc(width / 2, height / 2 + faceHeight * .2, mouthWidth, mouthHeight, TWO_PI, PI);

	//Hair Decoration
	hairDecoration();
}

function hairDecoration() {
    if (hairDecorationType == 'ribbon') {
        ribbon();
    }
    else if (hairDecorationType == 'hairBand') {
        hairBand();
    }
}

function ribbon() {
	//Ribbon
	fill(236, 39, 86);
	triangle(290, 255, 260, 240, 260, 270);
	triangle(290, 255, 320, 240, 320, 270);
}

function hairBand() {
	//Hair Band
	stroke(254, color, 22);
	strokeWeight(8)
	noFill();
	arc(width / 2, height / 2, 200, 200, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
}

function mousePressed() {
    color = random(0, 255);
    eyeSize = random(15, 25);
    noseWidth = random(10, 17);
    noseHeight = random(5, 10);
    blushSize = random(10, 20);
    mouthWidth = random(20, 60);
    mouthHeight = random(40, 50);
    hairLength = random(175, 225);
    hairangle = random(50, 100);
    hairDecorationType = random(['ribbon', 'hairBand']);
}

For this project, I focused on creating a bright, colorful mood playing around with different facial expression as well as warmed-toned colors.

Yugyeong Lee Looking Outwards 02

a_11

The Protohouse project developed by a design group known as Softkill Design is a 3D printed prototype of a conceptual house. Through the use of computer algorithm that imitates bone growth to define where the architecture requires most structure, this high-resolution project made out of “fibrous web” organizes its material to its finest detail allowing cost and material efficient result. The complexity of this prototype is possible from the integration of algorithm in its technology. The Protohouse also utilize high technology such as Selective Laser Sintering Technology that uses laser to form solid by heat or pressure without melting to a liquid form. By manipulating those technologies, the creator manifests experimentation of future architecture as this project reflects how architects can create not only a cost and material efficient but also a structurally effective architecture by integrating algorithm in the process. Also, the prototype is light-weighted and therefore portable allowing it to be fabricated into parts, seven in this case, and assembled on site.
a_5

http://www.archdaily.com/335887/3-d-printing-protohouse-1-0-and-protohouse-2-0-softkill-design

 

Yugyeong Lee Looking Outwards-01

I came across this project called “Arabesque Wall,” by Benjamin Dillenburger and Micahel Hansmeyer in collaboration with Design Exchange. It is a grand 3D printed architectural sandstone wall standing 10 feet tall with intricate details of the Baroque period. Forming almost 200 million surfaces, the details of this architecture is created at a scale of millimeters.  The complexity generated by overlapping curves based on geometric rule imply luxury. By utilizing “algorithms and computation to generate architectural form,” the designers spent four months of iterative computational design process of producing details impossible for one to achieve with bare hand.

7_design_development

As modernist design articulate art of simplicity straying away from the richness of details and ornaments of the past, this project paves way for art/architecture to produce intricacy within a design that no history could afford. Integration of digital fabrication and computational design points towards the future of celebrating overwhelming  and flourishing details. Although this project is closer to a sculpture than an architecture, it could lead to a generation of architecture fabricated entirely of digital fabrication machine such as a 3D printer. However, just as technology contributes both advantage and disadvantage, design itself may be dehumanized with less “touch” of hand in an art work. But because of the possibility of creating projects such as the “Arabesque Wall” with relative ease, it also opens an opportunity for artists to explore limitless complexity in design. Arabesque Wall - detail

Yugyeong Lee Project-01

sketch

//Yugyeong Lee
//Section A
//yugyeonl@andrew.cmu.edu
//Project-01

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

function draw() {
	background(255);

	strokeWeight(8);
	stroke(248, 153, 170);
	fill(254, 192, 203);
	ellipse(300, 300, 500, 500);

	//Hair
	fill(128, 24, 80);
	noStroke();
	ellipse(300, 255, 225, 290);
	rect(187.5, 265, 225, 140);

	//Face
	fill(206, 163, 121);
	noStroke();
	ellipse(300, 250, 175, 215);
	ellipse(300, 257, 150, 215);

	//Brows
	fill(90, 55, 42);
	quad(317, 225, 358, 225, 370, 230, 317, 230);
	quad(283, 225, 242, 225, 230, 230, 283, 230);

	//Eyes
	fill(255);
	stroke(0);
	strokeWeight(2);
	arc(340, 255, 35, 18, PI, TWO_PI);
	arc(260, 255, 35, 18, PI, TWO_PI);
	noStroke();
	ellipse(260, 255, 35, 12);
	ellipse(340, 255, 35, 12);
	fill(0);
	ellipse(340, 253, 16, 16);
	ellipse(260, 253, 16, 16);
	fill(255);
	ellipse(340, 253, 3, 3);
	ellipse(260, 253, 3, 3);

	//Glasses
	stroke(0);
	strokeWeight(8);
	noFill();
	rect(315, 240, 60, 40, 5, 2, 5, 13);
	rect(225, 240, 60, 40, 5, 5, 13, 2);
	line(285, 250, 315, 250);
	line(225, 250, 214, 250);
	line(375, 250, 386, 250);

	//Mouth
	stroke(196, 48, 36)
	strokeWeight(3);
	line(300, 330, 325, 320);
	line(300, 330, 275, 320);
	
	//Nose
	stroke(0);
	strokeWeight(3);
	arc(300, 295, 20, 12, TWO_PI, PI);
	
	//Hair
	push();
	translate(347,240);
	rotate(40);
	fill(128, 24, 80);
	noStroke();
	ellipse(-44,43,40,140);
	pop();
	push();
	translate(347,240);
	rotate(40);
	fill(128, 24, 80);
	noStroke();
	ellipse(30,115,140,40);
	pop();
}

In project I, I created a portrait of myself using basic shapes such as ellipse, rectangle, arc, etc. The challenging part of this project was to figure out the coordinate along the way requiring constant editing and refreshing.