Author: yugyeonl@andrew.cmu.edu

Looking Outwards 07 – Yugyeong Lee

Aaron Koblin is a digital media artist known for his innovative use of data visualization. Out of his many projects, eCLOUD is a “dynamic sculpture inspired by behavior of an idealized cloud.” Located in the San Jose International Airport,  hang from above, turning from transparent to opaque states to mimic the real time weather conditions of cities around the world. Based on the data collected from the National Oceanic and Atmospheric Administration, custom software, with use of algorithm, transfer electricity into the dynamic display to simulate cloud-like behavior. This project is admirable in transforming data into an architectural form that is integrated into the space to create an unique atmosphere. Through collecting the weather data and thereby turning something digital to embody natural characteristic, the artist articulate his sensibilities in visualizing data in a different perspective.

portfolio: http://www.aaronkoblin.com/project/ecloud/

Looking Outwards 06 – Yugyeong Lee

Jared Tarbell, co-founder of Etsy, is a generative artist who utilizes algorithms to create graphic images. His online portfolio known as Gallery of Computation (2012) has compilation of computational, generative art works created through the use of different geometries and texture. Although he manipulates code to achieve certain result, some of his works embody use of randomness in generating art. Happy Place is an example of that which are configuration of a system of nodes that are connected at random preference to other nodes around. And these connections are defined as “friendships.” Limits are set to this random variable: nodes move close to make friendships but no closer than a minimum distance and nodes keep a reasonable distance from “non-friends.” At start, the nodes are placed inside the boundary of a circle; however, once the nodes are connected to the system, they form to its best structure while re-arranging appropriately. The artist’s sensibilities are best portrayed through the view of the nodes and its connection as “friends” and “friendships” as well as its use of Sand Stroke object that texture the connections to add depth to the final result. The artist also shows one design that derived out from an error that created a strange vertical movement, open to discover new things from different possibilities.

Java showing the underlying system

Happy Place 1000                                                          Happy Place 1001

 

portfolio: http://www.complexification.net/gallery/

Project 06 – Yugyeong Lee

sketch

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

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

function draw() {
    //gradient background
    var from = color(127, 188, 215);
	var to = color(255);
    setGradient(0, height, from, to);
    //variables for time
	var h = hour();
	var m = minute(); 
	var s = second();
	//mapping ground color based on hour
    noStroke();
    r = map(h, 0, 24, 190, 0);
    g = map(h, 0, 24, 255, 80);
    b = map(h, 0, 24, 180, 30);
    fill(r, g, b);
    rect(0, height-30, width, 30);
	//mapping positionY based on minute
    var positionY = map(m, 0, 60, 416, 156);
	upHouse(positionY);
	//balloons increase and move based on second
	for (var i = 0; i < s; i++) {
		frameRate(1); //frame changes once per second
		strokeWeight(.25);
		balloonX = random(85, 135);
		balloonY = random(65, 120);
		line(105, positionY-37, balloonX, positionY-balloonY);
		fill(random(249, 255), random(140, 255), random(150, 200));
		ellipse(balloonX, positionY-balloonY, 11, 14);
		}
    }

function setGradient (y, h, from, to) {
	// top to bottom gradient
    for (var i = y; i <= y+h; i++) {
      var inter = map(i, y, y+h, 0, 1);
      var c = lerpColor(from, to, inter);
      stroke(c);
      strokeWeight(2);
      line(y, i, y+h, i);
	}
}

function upHouse (y) {
	//function to create the house
	noStroke();
	//base
	fill(245, 202, 170);
	rect(73, y, 62, 38);
	fill(126, 176, 200);
	rect(73, y, 62, 10);
	//roof
	fill(51);
	quad(74, y-28, 136, y-28, 144, y, 66, y);
	//chimney
	fill(88, 67, 50);
	rect(102, y-36, 6, 10);
	//door
	fill(78, 60, 45);
	rect(95, y+5, 9, 25);
	//porch&stair
	fill(99, 71, 59);
	rect(72, y+27, 18, 11);
	for (var i = 0; i < 4; i++) {
		fill(255);
		stroke(150);
		strokeWeight(0.25);
		rect(90, y+27+2.75*i, 18.5, 2.75);
	}
	noStroke();
	fill(255);
	rect(74, y, 2, 27);
	rect(88, y, 2, 27);
	rect(76, y+13, 12, 2);
	rect(79, y+15, 2, 12);
	rect(83, y+15, 2, 12);
	//other components of house
	fill(187, 202, 94);
	rect(108, y, 28, 38);
	fill(245, 248, 162);
	triangle(104, y+5, 140, y+5, 122, y-38);
	rect(84, y-20, 12, 10);
	triangle(82, y-18, 98, y-18, 90, y-30);
	//outline
	stroke(141, 202, 233);
	strokeWeight(3.5);
	line(140, y, 122, y-38);
	line(122, y-38, 104, y);
	line(98, y-18, 90, y-30);
	line(90, y-30, 82, y-18);
	//windows
	fill(240, 208, 100);
	stroke(265);
	strokeWeight(1);
	rect(86, y-20, 6, 7);
	rect(116, y-14, 10, 10);
	rect(115, y+14, 12, 14);
}

*sketch updated to modified code based on question on Piazza

I was inspired by the movie “UP” to create this abstract clock design. The number of balloons increases every second while moving around to random points to illustrate the balloons floating in the air. The number of balloons goes back to 0 when it hits the next minute. The color of the balloons are also randomized within a range to have variety of shades. Each minute is indicated by the house’s Y position as the house moves up. The ground color slowly changes every hour to indicate the current time. A separate function had to be created to generate the house, which uses variable y that is mapped to minute().

Looking Outwards 05 – Yugyeong Lee

Chaotic Atmospheres is a self-taught 3D artist who explores inspirational 3D environment, representing nature digitally. An example of his surreal landscape is “Shapes in Nature: Procedurally Eroded Terrains.” In this project, he used program known as World Machine to generate 3D Terrain which is then imported into Vue to explore eroded terrains. The project is so inspiring in its precision with incredible details and resolution to represent nature. Postwork was also done in Photoshop which reflect his effort to generate engaging 3D artwork. Not only creating surreal looking landscapes, his portfolio also had interesting projects such as “Alien Bonsais” that explores different software such as Substance Designer and Cinema 4D in texturing trees with extreme forms. The final renderings are done with such precision that they also look surreal with both fantasy-looking forms and realistic textures.

Portfolio Website: http://chaoticatmospheres.com/

Shapes in Nature: Procedurally Eroded Terrains

Alien Bonsais

Project 05 – Yugyeong Lee (yugyeonl)

sketch

//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Assigment-05-B

var len = 30;
var d = 5;
var offset = 5;
var spacingX = 140;
var spacingY = 70;

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

function draw() {
    background(155);
    stroke(255, 220, 205);
    noLoop();
    noFill();

    //forloop for the diamond shape; even number lines are shifted
    for (var y = 0; y < 9; y++) {
        stroke(212, 211, 201)
        if ((y+1) % 2 == 0) {
            for (var x = 0; x < 4; x++) {
                diamond(x*spacingX+70, y*spacingY);
            }
        } else {
            for (var x = 0; x < 5; x++) {
                diamond(x*spacingX, y*spacingY);
            }
        }
    }

    //forloop for the curve shape; even number lines are shifted
    for (var y = 0; y < 9; y ++) 
        if ((y+1) % 2 == 0) {
            for (var x = 0; x < 5; x ++) {
                push();
                translate(x*spacingX, y*spacingY);
                stroke(255, 215, 188);
                symbol(0, 0);
                angleMode(DEGREES);
                rotate(90);
                symbol(0, 0);
                rotate(90);
                symbol(0, 0);
                rotate(90);
                symbol(0, 0);
                pop();
            }
        } else {
            for (var x = 0; x < 4; x ++) {
                push();
                translate(x*spacingX+70, y*spacingY);
                stroke(255, 215, 188);
                symbol(0, 0);
                angleMode(DEGREES);
                rotate(90);
                symbol(0, 0);
                rotate(90);
                symbol(0, 0);
                rotate(90);
                symbol(0, 0);
                pop();
            }
        }
    }

function symbol (x,y) {
    push();
    translate(x, y);
    strokeWeight(3);
    beginShape();
    curveVertex(-len-offset*2, -offset);
    curveVertex((-len+offset)/2, -offset);
    curveVertex((-len+offset)/2, -len+offset*2);
    curveVertex(-len+offset*2, -len+offset*2);
    curveVertex(-len+offset*2, (-len+offset)/2);
    curveVertex(-len, (-len+offset)/2);
    curveVertex(-len, -len);
    curveVertex(-offset/2, -len);
    curveVertex(-offset/2, -offset);
    endShape();
    pop();
}

function diamond (x, y) {
    push();
    translate(x, y);
    rectMode(CENTER);
    strokeWeight(0.5);
    line(0, -3*len, 0, 3*len);
    line(-3*len, 0, 3*len, 0);
    strokeWeight(3);
    angleMode(DEGREES);
    rotate(45);
    quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
    rotate(90);
    quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
    rotate(90);
    quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
    rotate(90);
    quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
    pop();
}

For the wallpaper project, I wanted to use two shapes that are iterated alternatively. Modulus was used to call out even number lines to shift them to create the final product. Instead of creating the shape under the for loop, I created a separate function for each shape to simplify code. First the diamond shape laid out the grid for me to work with. Then, I was inspired by traditional Korean shape to create the curve shape. In comparison with the Korean traditional pattern, I made the shape with curveVertex to give a fun element. In emphasizing that, I used toned down color for the background and the diamond shape while adding a pop of color for the curve one.

Looking Outwards 04 – Yugyeong Lee

The Classyfier is a smart object, created by three students, that detects the beverages the users are drinking and through that naturally chooses music that fits the situation. This table enhance the atmosphere in different situations. Through identifying characteristic sounds, the table, through computational program, plays the appropriate music. Altough the final form is a simple, and quite small, just adequate to place few drinks, the table has built in microphone system with computational program that is “pre-trained” to have the ability to identify different drinks. For example, as shown in the video below, the user stirs the hot tea, which naturally creates sound. Then, the table analyze the sound to play music accordingly. It is interesting that the program is trained and the most interesting part of the project is that it is a smart object that naturally can bleed into the everyday life. Although in terms of form it is simple, the ambient it generates is very unique.

video in the link: http://www.creativeapplications.net/processing/the-classyfier-ai-detects-situation-and-appropriates-music/

Project 04 – Yugyeong Lee

sketch

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

var spacing;
var x;				//positionX
var y;				//positionY
var b;				//colorB	
var w;				//strokeWeight

function setup() {
    createCanvas(400, 300);
    x = 0;
    y = 0;
}

function draw() {
	//background color changes based on mouseX
	b = map(mouseX, 0, width, 0, 150);
	background(b);
    
    //spacing for each loop changes based on mouseX
    spacing = map(mouseX, 0, width, 10, 20);

    //the stroke weight changes based on mouseX
    w = map(mouseX, 0, width, .5, 1);
    strokeWeight(w);

    //the four corners
    for (i = 0; i < 50; i++) {
    	stroke(255, 200, 100+i*5);
    	line(x, y+i*spacing, x+i*1.5*spacing, height);
    	line(x, height-i*spacing, x+i*1.5*spacing, y);
    	stroke(255, 200, 255-i*5)
    	line(width, y+i*spacing, width-i*1.5*spacing, height);
    	line(width, height-i*spacing, width-i*1.5*spacing, y);
    }

    //the 'diamond'-like shape in the center 
    for (i = 0; i < 15; i++) {
    	stroke(255-i*2);
    	line(0, height/2, width, height/2);  //horizontal&vertical line
    	line(width/2, y+i*spacing, width/2+i*spacing, height/2);
    	line(width/2, y+i*spacing, width/2-i*spacing, height/2);
    	line(width/2, height-i*spacing, width/2-i*spacing, height/2);
    	line(width/2, height-i*spacing, width/2+i*spacing, height/2);
    }
}

I wanted to create an interactive string art. The string art created by four quadrants base its spacing size, stroke weight, and background color gradient on the position of mouseX.

Looking Outwards 03 – Yugyeong Lee

LifeObject is an architectural installation that studies characteristics of bird’s nest into new material as well as its resilient properties. The installation is made up of biological materials that are responsive to its environment as a dialogue between architecture and biology. Computation and digital fabrication of LifeObject articulates new practices of material-making using rich natural materials that embody living qualities. Through algorithmic analysis of the nest, the project arranged twigs and fibers with bending stresses, morphing into what is a result of its adaption to gravity forces and boundary conditions. The LifeObject is interesting in its materialization of abstract ideas through the algorithm studies, coding, and digital fabrication that opens up opportunity in the future architectural field to integrate biologically inspired materials.

http://www.archdaily.com/788634/lifeobject-inside-israels-pavilion-at-the-2016-venice-biennale

detailed views of the Life Object

Project 03 – Yugyeong Lee

sketch

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

var y = 0;
var spacing = 15;
var r = 7.5;

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

function draw() {
	noCursor();

	//background color change based on position of mouseX and mouseY
	colorR = map(mouseY, 0, height, 180, 255);
	colorB = map(mouseX, 0, width, 180, 255);
	colorG = map(mouseX, 0, width, 160, 235);
	background(colorR, colorG, colorB);

	//strokewegith depends on the position of mouseY
	m = map(mouseY, 0, height, 1, 5)
	strokeWeight(m);
	stroke(255);

	//array curves with mid points that react to position of mouseX and mouseY
	if (mouseX >= width/2) {
		for (var i = 0; i < 640; i+= spacing) {
			positionX = map(mouseX, 0, width/2, 0, 1);
			positionY = map(mouseY, 0, height, 0, 1);
			noFill();
			beginShape();
			curveVertex(i,  0);
			curveVertex(i,  0);
			curveVertex(positionX*i, height*positionY);
			curveVertex(i, height);
			curveVertex(i, height);
			endShape();
		}
	}

	//array of curves stay straight when mouseX is on left half of canvas
	if (mouseX < width/2) {
		for (var i = 0; i < 640; i+= spacing) {
			line(i, 0, i, height);
		}
	}

	//array of circles
	for (var x = 0; x < width + r; x+= spacing) {
		for (var y = 0; y < height + r; y+= spacing) {
			noStroke();
			//the amount of circles which changes size depends on mouseX
			var n = map(mouseX, 0, width, 1, 8);
			//aray of circles which changes color based on its distance from the Cursor
			if (dist(mouseX, mouseY, x, y) < n*r) {
				fill(random(0, 255), random(0, 255), 200);
				r = 12
			}
			else {
				fill(150);
				r = 7.5
			}
			ellipse(x, y, r, r);
		}
	}
}

I wanted to create a grid base, interactive graphic that depends heavily on the position of mouseX and mouseY. The array of circles’s sizes and color depend on the distance between position of the cursor and the center point of each circle. The background color also changes based on mouseX and mouseY as well as the array of lines in the background in which the mid point changes value based on location of the cursor as well.

Looking Outwards 02 – Yugyeong Lee

As use of algorithm and integration of parametric design are deeply rooted into the design process in architecture, Aryan Shahabian, a researcher at the University of Applied Arts in Vienna, developed an algorithm that can create over a billion distinct combinations of interlocking 3D objects inspired by Japanese joineries. Japanese architecture and contrstruction, from its past, has been known for its complex wood joineries that interlock and form bonds without the use of nails, screws or adhesives. This development of the new algorithm open up opportunities to allow artists to create free from structure with no reliance of use of nails and generate art through mastering complex wood joineries. This program would also naturally lead to easier fabrication when combined with machines such as laser cutters, CNC machines, and 3D printing. As an architecture student who have experienced several projects dealing with joinery system, this program would definitely help young architects like our selves to understand these complex joineries better as well as integrate it into the design process to allow flow of variety of different, unique forms.

link to article: http://www.archdaily.com/874153/this-satisfying-algorithm-combines-japanese-inspired-joints-to-generate-any-form