Author: Susie

Looking Outwards-03

Vespers III
Vespers III is a project (a collection of masks exploring what it means to design with life). It explores ancient typology with technology. It points towards an imminent future where wearable interfaces and building skins are customized to not only fit a particular shape but a specific material. I really admire how this work takes a stab at how technology/ computation can play a role in visualizing natural topics/ ideas. Computational design is matched with additive manufacturing and synthetic biology  to digitally fabricate objects. 3D printable bioactive materials are used to template the biological response.



 

 

https://www.media.mit.edu/projects/vespers-iii/overview/

susiel-Looking Outwards-02

Formation from Kyuha Shim on Vimeo.

Formation is a project done by one of the CMU School of Design’s professor, Kyuha Shim. I came across this project during his studio last semester and was one of the reasons that helped me decide to take 104. Formation is a 2016 project commissioned by Alliance Graphique Internationale (AGI) for the Special Project Exhibition during AGI conference in Seoul.  It seems like there is a canvas with a grided background. Within this frame, there is a class for circles which contains the circle objects. These objects are what specify the random color, size and position for the circles. Perhaps there is an array system that informs how many circles are on the canvas. There could be a statement that indicates a change when a certain amount of time passes, with one change, it impacts the movement of the other circles. I appreciate this project not only for its visuals, but also because it is a generative system with a larger responsive system. It visually hows multitudinous transitions and scaling of visual/graphic elements.

susiel-project02-variableFACE

sketch

/* 
Susie Lee
Section E
susiel@andrew.cmu.edu
Project-02
*/
//snowman feature variables
	//sky+shadow colours
var cR=231;
var cG=234;
var cB=241;
	//arm stroke thickness
var ARM=5;
	//blueberry buttons
var button=20;
	//snowman body
var bodyWidth = 170;
var bodyHeight = 150;
	//snowman face
var faceWidth = 100;
var faceHeight = 100;
var eyeSize=10;
var eyeBROW=20;
	//carrot colours
var carrotR= 255;
var carrotG= 143;
var carrotB= 28;


//setting landscape
function setup() {
    createCanvas(480, 640);
}

//setting base snowman
function draw() {
	noStroke();
    //skyRandom+Ground
    background(cR, cG, cB);
    fill(255);
    ellipse(240,640,800,600);
    //snowmanSHADOW
    fill(240, 246, 247,95);
    ellipse(width/2,(height/2)+bodyHeight/2,bodyHeight,bodyWidth);
    //snowmanARMS
    stroke(146, 109, 57);
    strokeWeight(ARM);
    line(width/2, height/2, width/3, height/2-bodyHeight/1.75);
    line(width/2, height/2, width/2+width/6, height/2-bodyHeight/1.75);
    //snowmanBody
    noStroke();
    fill(255);
    ellipse(width/2, height/2, bodyWidth, bodyHeight);
    //buttons
    fill (43, 62, 133);
    var buttonTOP = (height/2) - bodyHeight*0.25;
    var buttonMIDDLE = (height/2);
    var buttonBOTTOM = (height/2) + bodyHeight * 0.25;
	ellipse(width/2, buttonTOP, button, button);
    ellipse(width/2, buttonMIDDLE, button, button);
    ellipse(width/2, buttonBOTTOM, button, button);
    //snowmanHEAD SHADOW
    fill(cR,cG,cB,85);
    ellipse(width/2, height/2-bodyHeight/1.9, faceWidth, faceHeight);
    //snowmanHEAD
    fill(255);
    ellipse(width/2, height/2-bodyHeight/1.75, faceWidth, faceHeight);
    //snowmanFACE
    	//eyes
    fill(0);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2-bodyHeight/1.75, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2-bodyHeight/1.75, eyeSize, eyeSize);
    	//eyebrow
    var eyebrowL = width / 2 - faceWidth * 0.25;
    var eyebrowR = width / 2 + faceWidth * 0.25;
    rect (eyebrowL-10, height / 2-bodyHeight/1.5, eyeBROW, eyeBROW/3);
    rect (eyebrowR-10, height / 2-bodyHeight/1.5, eyeBROW, eyeBROW/3);
    	//nose
    fill(carrotR, carrotG, carrotB);
    triangle (width/2, height/2-bodyHeight/1.75, width/2-10, height/2-bodyHeight/2, width/2+30, height/2-bodyHeight/2);

}

function mousePressed(){
	cR=random(220,240);
	cG=random(230,240);
	cB=random(230, 245);
	ARM=random(5,10);
    bodyWidth = random(75,150);
    bodyHeight=random(100,200);
    button=random(10,30);
    faceWidth = random (75,150);
    faceHeight = random(75, 150);
    carrotR=random(200,255);
    carrotG=random(140,200);
    carrotB=random(25,60);

}

Sketch

Rather than building on the last project, I wanted to create a variable snowman. This is because I love building snowmen. Since the 8th grade, my current college housemate and I build a snowman on the same day every year (weather permitting). I was inspired aesthetically by one of the snowman I built back in high school. His name is Pingu, a 2 mound snowman with blueberries for buttons, and a carrot nose that is a tad too large for him.

 

Susie Lee – Looking Outwards- 01

A few years ago, a classmate of mine created this project that took the words of individuals and compiled them into a book. Called “Something Kind” by Marisa Lu, she collected the responses of Amazon Turk workers when asked to “write about something unexpectedly nice that someone did” for them. In order to highlight and inspire readers to take action, the book emphasizes the action words in the stories, highlighting a greater focus of “go & do”. The project utilized human computation through Amazon Mechanical Turk, several short programs in Processing, and Basil.js. I was really impressed and inspired by this project because how humanistic the approach was even thought it was one focused on computation. I also appreciated the small design details such as the heart form in the corner and sides of the book! In the post about the project, she mentioned how Maeda @ media was one of her inspirations during this project! This project really points out the opportunity of mixing in human emotion and responses to something that is generally more considered mechanical/ robotic. It is possible to mix in interaction with computation and I am excited to explore that!

Lumar-BookOfKindness


Something Kind
Marisa Lu

Susie Lee – Project 01 – Face

susiel_face_project01

/* 
Susie Lee
Section E
susiel@andrew.cmu.edu
Project-01
*/

function setup() {
    createCanvas(600, 650);
    background(255);
}

function draw() {
	//background circle
	strokeWeight(0);
	fill(52,41,19);
	ellipse (300, 270, 415, 415);
	// face circle
	fill(233,206,167);
	ellipse (290, 400, 151, 151);
	//ears 
	noStroke();
	fill(233,206,167);
	ellipse (368, 406, 18, 18);
	ellipse (214, 406, 18, 18);
	//earrings 
	noStroke();
	fill(177,148,48);
	rect(367, 412, 2.25, 5.3, 20);
	rect (370, 412, 2.25, 5.3, 20);
	rect (209, 411, 2.25, 5.3, 20);
	rect (212, 413, 2.25, 5.3, 20);
	triangle(369,403,368,405,371, 405);
	//hair
	strokeWeight(0);
	fill(52,41,19);
	ellipse (246, 334, 156, 113);
	ellipse (358, 341, 91, 113);

	strokeWeight(1);
	stroke (255);
	line (398,354, 398, 452);
	line (391, 400, 391, 452);
	line(382, 394, 382, 447);
	line(200,361,200, 440);
	line(207, 420, 207, 472);

	stroke(255);
	strokeWeight(1);
	noFill();
	ellipse (261, 334, 99, 63);
	ellipse(364, 341, 63, 79);
	strokeWeight(0);
	fill(52,41,19);
	rect(194, 265, 136, 65);
	rect(206, 236, 29, 136);
	rect(330, 289,87,59);
	rect(365, 302, 31, 87);
	//face
	stroke(255);
	strokeWeight(3);
	noFill();
	ellipse (256, 420, 30, 30);
	ellipse (319, 420, 30, 30);

	noStroke();
	fill(233,206,167);
	rect(256,402,20,35);
	rect(238,421,37,17);
	rect(320,402,20,35);
	rect(300,421,37,17);

	stroke(52,41,19);
	strokeWeight(1);
	noFill();
	ellipse (257, 425, 20, 20);
	ellipse (320, 425, 20, 20);
	noStroke();
	fill(233,206,167);
	rect(244,413,24,13);
	rect(307,413,24,13);

	stroke(52,41,19);
	strokeWeight(2);
	noFill();
	ellipse (288, 431, 22, 22);
	noStroke();
	fill(233,206,167);
	rect(272,430,32,19);

	stroke(52,41,19);
	strokeWeight(2);
	noFill();
	ellipse (318, 421, 42, 42);
	ellipse (258, 421, 42, 42);
	
	noStroke();
	fill(139,24,26);
	ellipse (288, 445, 21, 14);
	noStroke();
	fill(206,176,137);
	triangle (288, 423, 283, 434, 293,434);

	noStroke();
	fill(52,41,19);
	rect(319,435,0.86,3.7);
	rect(256,435,0.86,3.7);
	stroke(52,41,19);
	strokeWeight(0.86);
	line(260,435,261,438);
	line(253,434,252,437);
	line(316,434,315,438);
	line(323,435,324,438);
	//jank mask
	stroke(255);
	strokeWeight(40);
	noFill();
	ellipse (300, 270, 415, 415);
	//zzz
	stroke(255);
	strokeWeight(7);
	line(249, 284, 285, 284);
	line(249, 313, 284, 285);
	line(249, 313, 284, 313);
	strokeWeight(10);
	line(320,239,385,239);
	line(320,290,385,239);
	line(320, 292,391, 292);
	strokeWeight(15);
	line(368,115,487,115);
	line(374,201,487,115);
	line(374,203,505,203);
	//arms
	stroke(233,206,167);
	strokeWeight(30);
	line(365,438,385,520);
	line(385,520,355,590);
	line(212,438,190,500);
	line(190,500,220,580);
	//fingers
	//stroke(12,43,33);
	strokeWeight(5);
	line(332, 590, 355, 585);
	line(342,611,355,590);
	line(338,605,350,590);
	line(348, 615, 360,590);
	line(358, 613, 364, 590);

	line(220,580,230,600);
	line(218,560,240, 590);
	line(210, 560, 205, 600);
	line(214, 560, 215, 605);
	line(214, 560, 215, 605);
	line(205, 555, 240, 570);

	
}

It was interesting to first create the illustration through Adobe Illustrator and then have to translate the graphics into a code-based product. It was frustrating to not have the full freedom I get with a vector-based program, but it was interesting to have to think in terms of shapes on shapes.