Author: yugyeonl@andrew.cmu.edu

Project 02 – Yugyeong Lee

sketch

//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Project-02

var colorR = 100;
var colorG = 150;
var faceWidth = 200;
var faceHeight = 200;
var eyeSize = 20;
var blushSize = 35;
var noseWidth = 10;
var noseHeight = 10;
var mouthWidth = 70;
var mouthHeight = 45;
var colorR2 = 100;
var hairDecorationType = 1;

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

function draw() {
	//Background 
    background(colorR, colorG, 200);
	noStroke();
    fill(255);
    ellipse(width/2, height/2, 300, 350);

    //Face
    fill(242, 214, 180);
    ellipse(width/2, height/2, faceWidth, faceHeight);
    ellipse(width/2+100, height/2, 40, 40);
    ellipse(width/2-100, height/2, 40, 40);

    //Eyes
    var eyeLX = width/2-faceWidth*0.18;
    var eyeRX = width/2+faceWidth*0.18;
    fill(255);
    ellipse(eyeLX, height/2, eyeSize+12, eyeSize+12);
    ellipse(eyeRX, height/2, eyeSize+12, eyeSize+12);
    fill(0);
    ellipse(eyeLX+2.5, height/2, eyeSize, eyeSize+3);
    ellipse(eyeRX-2.5, height/2, eyeSize, eyeSize+3);
    fill(255);
    ellipse(eyeLX+3, height/2, eyeSize-15, eyeSize-15);
    ellipse(eyeRX-3, height/2, eyeSize-15, eyeSize-15);

    //Blush
    var blushLX = width/2-faceWidth*0.32;
    var blushRX = width/2+faceWidth*0.32;
    fill(250, 185, 225, 150);
    ellipse(blushLX, height/2+faceHeight*0.15, blushSize*1.2, blushSize); 
    ellipse(blushRX, height/2+faceHeight*0.15, blushSize*1.2, blushSize);

    //Hair
    stroke(0);
    strokeWeight(5);
    noFill();
	beginShape();
	curveVertex(width/2, height/2-100);
	curveVertex(width/2, height/2-100);
	curveVertex(width/2-15, height/2-125);
	curveVertex(width/2-15, height/2-135);
	curveVertex(width/2-10, height/2-145);
	curveVertex(width/2, height/2-150);
	curveVertex(width/2+20, height/2-140);
	curveVertex(width/2+10, height/2-130);
	curveVertex(width/2+10, height/2-130);
	endShape();

	//Nose
    var noseX = width/2
    var noseY = height/2+faceHeight*.12
    stroke(150, 120, 90, 100);
    strokeWeight(3);
    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);

    //Tooth
	fill(255);
    strokeWeight(1);
	rect(width/2-.2*mouthWidth, height/2+40, .2*mouthWidth, .2*mouthHeight);
	rect(width/2+1, height/2+40, .2*mouthWidth, .2*mouthHeight);

	hairDecoration();
}

function ribbon() {
	//Ribbon
	fill(colorR2, 100, 200);
	triangle(width/2, height/2-100, width/2+40, height/2-70, width/2+40, height/2-130);
	triangle(width/2, height/2-100, width/2-40, height/2-70, width/2-40, height/2-130);
	fill(colorR2-50, 100, 200);
	ellipse(width/2, height/2-100, 25, 25);
}

function hairTie() {
	//Hair Tie
	fill(colorR2, 200, 100);
	ellipse(width/2-16, height/2-100, 35, 35);
	ellipse(width/2+16, height/2-100, 35, 35);
}

function hairDecoration() {
    if (hairDecorationType === 1) {
        ribbon();
    }
    else if (hairDecorationType === 2) {
        hairTie();
    }
}

function mousePressed() {
    colorR = random(190, 255);
    colorG = random(0, 190);
    eyeSize = random(15, 30);
    blushSize = random(20, 40);
    noseWidth = random(10, 17);
    noseHeight = random(5, 10);
    mouthWidth = random(40, 80);
    mouthHeight = random(40, 60);
    colorR2 = random(0, 255);
    hairDecorationType = Math.floor((random()*2)+1);
}

I wanted to create an interactive baby face with changing eyeSize, noseSize, blushSize, mouthSize, and hairDecoration. Some of the elements such as hair and face, remain the same throughout.

Looking Outwards 01 – Yugyeong Lee

TrussFab is an integrated system that allows one to fabricate sturdy, large-scale structures that are capable of carrying human weight. Created by Phd researcher, Robert Kovacs, with his team from the Human Computer Interaction Lab, TrussFab is interesting in that it is a 3D fabrication process that does not need specialized equipment nor specific engineering knowledge but rather easy and relatively quick to make. Also, TrussFab utilizes easily accessible material – plastic bottles -to act like beams that form triangular shapes to produce trusses as a whole. The Sketchup plugin that Trussfab uses takes an existing 3D model and automatically transforms it into a Trussfab structure while adjusting for structural stability. Architect named Oanh Lisa Nguyen Xuan constructed a pavilion through Trussfab that was 5m high out of 1268 plastic bottles. This Sketchup editor plugin designed by TrussFab create opportunities for other designers to easily fabricate large, structurally-sound forms with only the Sketchup plugin, 3D printer, and easily accessible materials in hand.

article: http://www.archdaily.com/873828/this-sketchup-plugin-can-design-structures-made-from-plastic-bottles-and-3d-printed-joints

Sketchup editor plugin designed by TrussFab

time-lapse of the process of assembly on site

Project 01 – Yugyeong Lee

sketch

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

function setup() {
    createCanvas(400, 425);
	background(0, 69, 124);
	noStroke();
	fill(0, 138, 187);
	quad(0, 0, width, 0, width, 150, 0, 165);
}

function draw() {
	noStroke();
	//hair
	fill(20);
	beginShape();
	vertex(118, 103);
	vertex(121, 114);
	vertex(112, 121);
	vertex(88, 167);
	vertex(88, 240);
	vertex(78, 288);
	vertex(90, 348);
	vertex(80, 408);
	vertex(108, 415);
	vertex(127, 327);
	vertex(172, 271);
	vertex(164, 240);
	vertex(218, 214);
	vertex(220, 263);
	vertex(210, 281);
	vertex(210, 338);
	vertex(242, 350);
	vertex(265, 328);
	vertex(242, 165);
	vertex(210, 121);
	vertex(165, 98);
	vertex(135, 98);
	vertex(118, 103);
	endShape();

	//neck
	fill(211, 173, 138);
	beginShape();
	vertex(127, 327);
	vertex(151, 286);
	vertex(172, 271);
	vertex(164, 240);
	vertex(218, 214);
	vertex(220, 263);
	vertex(210, 281);
	vertex(210, 338);
	vertex(180, 305);
	vertex(144, 314);
	vertex(127, 327);
	endShape();

	//face
	fill(232, 189, 151);
	push();
	translate(width/2, height/2);
	angleMode(DEGREES);
	rotate(-25);
	ellipse(-8, 15, 50, 40);
	rotate(-5);
	ellipse(-8, -42, 106, 145);
	ellipse(-62, -35, 15, 30);
	pop();

	//hair
	fill(20);
	triangle(98, 224, 122, 114, 122, 168);
	quad(160, 111, 185, 117, 217, 147, 194, 135);

	//brows
	fill(50);
	beginShape();
	vertex(130, 183);
	vertex(134, 176);
	vertex(152, 165);
	vertex(154, 167);
	vertex(136, 178);
	vertex(130, 183);
	endShape();

	beginShape();
	vertex(176, 153);
	vertex(192, 143);
	vertex(202, 143);
	vertex(194, 145);
	vertex(178, 155);
	vertex(176, 153);
	endShape();

	//mouth
	stroke(60)
	line(180, 226, 197, 218);
	line(197, 218, 211, 207);
	line(188, 217, 194, 215);
	line(194, 215, 199, 211);
	line(192, 226, 200, 223);
	line(200, 223, 205, 219);
}

I first worked in Photoshop to simplify a picture of myself into combination of simple geometries. After planning which geometries to use, I took the coordinates from Photoshop and applied them to appropriate code. I used beginShape() and endShape() to insert all the coordinates in more complex shapes while using rotated ellipse, triangle, quad, and lines for simple shapes.