I found Notes On Blindness: Into Darkness by an interactive artist, Beatrice Lartigue very inspiring. Through the testimony of John Hull, who documented his experience of “a world beyond sight” after losing his vision, the artist created an interactive experience utilizing the VR to explore a specific moment of the blind. Through the use of real time 3D animations and sound, the program allows one to get a taste of “a world beyond sight.” I found this particular project by Beatrice Lartigue, a woman artist, intriguing because it allows one to experience a world one cannot imagine a realistic, interactive program. This project is not only inspiring for its techniques but also its attempt to explore another world through the project.

sketch

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

var imgYugy;

function preload() {
	var imgURL = "http://i.imgur.com/XYdrw0f.jpg";
	imgYugy = loadImage(imgURL);

}
function setup() {
    createCanvas(540, 700);
    background(0);

    imgYugy.loadPixels();
    frameRate(500);
}

function draw() {
	drawYugyC();
	drawYugyL();
}

//circular pixels controlled by mouseX and mouseY
function drawYugyC () {
	var pX = mouseX;
	var pY = mouseY;
	var iX = constrain(floor(pX), 0, width - 1);
	var iY = constrain(floor(pY), 0, height - 1);
	var color = imgYugy.get(iX, iY);
	var diam = random(5, 15);

	fill(color);
	noStroke();
	ellipse(pX, pY, diam, diam);
}

//diagonal lines at random
function drawYugyL () {
	var pX = random(0, width);
	var pY = random(0, height);
	var iX = constrain(floor(pX), 0, width - 1);
	var iY = constrain(floor(pY), 0, height - 1);
	var color = imgYugy.get(iX, iY);
	var offset = random(5, 20);
	var strokeweight = random(1, 5)

	stroke(color);
	strokeWeight(strokeweight);
	line(pX, pY, pX + offset, pY + offset);
}

I was exploring on combination of diagonal lines and circles to create a pixelated portrait of myself. The diagonal lines appear at random while circular pixels can be controlled by the location of the mouse.

For this week, I looked at Shan Wang’s Looking Outwards post from week 5. The project called The Third and the Seventh by Alex Roman, a Spanish CG artist, is a 12 minute movie that illustrates architecture through series of images which he utilized rendering programs such as DSMax and V-Ray and texture work in Photoshop to create. His sensibility of clarity and light is apparent throughout the film with incredible reality of details, none of which has been filmed. I agree with Shan that the artist’s aesthetic sensibility and the techniques created a fascinating project that interestingly convey a feeling of 3 dimensional, spatial feeling in a 2 dimensional display. And to add on to that, especially after watching the film, Roman’s intricate use of the movement of light and shadow throughout his film as well as the composition is what I believe gave visual depth to this production.

sketch

//Yugyeong Lee
//Section A (9:00AM)
//yugyeonl@andrew.cmu.edu
//Project-07

var nPoints = 1000;
var radiusA = 100;
var radiusB = 20;
var n = 7;
var X;
var colorG;
var colorB;
var angle;
var scaleA;

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

function draw() {
	background(224, colorG, colorB);
	stroke(255);
	strokeWeight(3);

    X = constrain(mouseX, 0, width);
    //background color changes based on mouseX
    colorG = map(X, 0, width, 200, 100);
    colorB = map(X, 0, width, 150, 100);
    //the shapes rotate based on mouseX
    angle = map(X, 0, width, 0, 4 * TWO_PI);
    //the shapes change sizes based on mouseX
    scaleA = map(X, 0, width, 0, 2);

    //the epicycloid (the outer shape)
	push();
	translate(width/2, height/2);
	scale(scaleA, scaleA)
	rotate(angle);
	beginShape(LINES);
	for (var i = 0; i < nPoints; i++) {
		var theta = map(i, 0, nPoints, 0, 6 * TWO_PI);
		var px = (radiusA + 2 * radiusB) / radiusA * ((radiusA + radiusB) * cos(theta) + radiusB * cos((radiusA + radiusB) / radiusB * theta));
		var py = (radiusA + 2 * radiusB) / radiusA * ((radiusA + radiusB) * sin(theta) + radiusB * sin((radiusA + radiusB) / radiusB * theta));
		vertex(px, py);
	}
	endShape(CLOSE)
	pop();

	//involute of the epicycloid (the in-between shape)
	push();
	translate(width/2, height/2);
	scale(scaleA, scaleA)
	rotate(-angle);
	beginShape(LINES);
	for (var i = 0; i < nPoints; i++) {
		var theta = map(i, 0, nPoints, 0, 6 * TWO_PI);
		var px = (radiusA + radiusB) * cos(theta) - radiusB * cos((radiusA + radiusB) / radiusB * theta);
		var py = (radiusA + radiusB) * sin(theta) - radiusB * sin((radiusA + radiusB) / radiusB * theta);
		vertex(px, py);
	}
	endShape(CLOSE)
	pop();

	//pedal curve for an n-cusped hypocycloid (the inner shape)
	push();
	translate(width/2, height/2);
	scale(scaleA, scaleA)
	rotate(angle);
	beginShape(LINES);
	for (var i = 0; i < nPoints; i++) {
		var theta = map(i, 0, nPoints, 0, 6 * TWO_PI);
		var px = radiusA * (((n-1)*cos(theta) + cos((n-1)*theta)) / n)
		var py = radiusA * (((n-1)*sin(theta) + sin((n-1)*theta)) / n)
		vertex(px, py);
	}
	endShape(CLOSE)
	pop();
}

I was intrigued by the idea to create flower shapes utilizing epicycloid and hypocycloid formula. I mapped the background color, size of the flower shapes, as well as its rotation to the position of mouseX. Because there are three layers of pedals, I alternated the direction of each rotation to create a more interesting shape. Also, by increasing the size of the flowers based on mouseX, the shapes appear as if it’s approaching you.

Periscopic, a Data Visualization firm, collected list of attendees of the 2016 Communications Network Conference in Detroit and built upon the data to help visualize the relationships between the attendees in hope to evoke a sense of connection in an event of network. I find this project very interesting because of their diagrammatic representation of the data. In the article that Periscopic provided, they describe steps they took in creating this interactive data which relates strongly with developing architectural diagrams (since I major in Architecture). Narrowing down dataset to articulate relationships they want to highlight, they included design aesthetic, color, and context that resulted in clear, interactive visualization. One special approach they took in collecting this data is that they asked the attendees to identify themselves in an open-ended question, expanding the categories. Through this graphical representation, Periscopic reveal the volume of multiple categories showing flow both visually and in context.

sketch

//Yugyeong Lee
//Section A (9:00AM)
//yugyeonl@andrew.cmu.edu
//Project 06

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

function draw() {
    background(110, 181, 192);
    angleMode(DEGREES);

	var s = second();
	var m = minute();
	var h = hour();

	var secondBarWidth = map(s, 0, 60, 0, 388);
	var diamM = 80;
	var diamH = 34;
	var angleM = map(m, 0, 60, 0, 360);
	var angleH = map(h, 0, 24, 0, 360);
	var mx = cos(angleM) * (diamM / 2);
	var my = sin(angleM) * (diamM / 2);
	var hx = cos(angleH) * (diamH / 2);
	var hy = sin(angleH) * (diamH / 2);
	var centerMx = 500;
	var centerMy = 127.5;
	var centerHx = 85;
	var centerHy = 75;

	textSize(10);
	noStroke();
	fill(10, 108, 132);
	textFont("Comic Sans");
	text(nf(h, 2, 0), 120, 70);
	text(":", 135, 70);
	text(nf(m, 2, 0), 140, 70);
	text(":", 155, 70);
	text(nf(s, 2, 0), 160, 70);

	//design
	noStroke();
	fill(10, 108, 132);
	ellipse(40, 30, 25, 25);
	ellipse(centerHx, centerHy, 20, 20);
	ellipse(centerMx, centerMy, 50, 50);
	fill(110, 181, 192);
	strokeWeight(3);
	stroke(10, 108, 132)
	ellipse(60, 40, 30, 30);
	noFill();
	strokeWeight(5);
	ellipse(centerHx, centerHy, 54, 54);
	ellipse(centerMx, centerMy, 100, 100);

	//representation of second, minute, hour
	arc(centerMx, centerMy, diamM, diamM, 0, angleM)
	arc(centerHx, centerHy, diamH, diamH, 0, angleH)
	fill(10, 108, 132);
	noStroke();
	rect(112, 75, secondBarWidth, 5);
}

I was inspired to create an abstract clock only using basic geometric shape such as rectangle and ellipse. The small ellipse represents hour while the big one represents minutes. The rectangle represents seconds.

LifeOject, an architectural project curated by Dr. Ido Bachelet, Bnaya Bauer, Arielle Blonder, Dr. Yael Eylat Van Essen, and Noy Lazarovich, is a sculptural installation exploring new spatial attitude through deriving its form from characteristics of a bird’s nest. As I was searching through ArchDaily, I was fasinated by the idea of the project of creating a “dialogue between architecture and biology.” The project experiments on integrating biological properties such as resilient quality of a bird’s nest to its materials. Through the use of natural materials and its resilient quality, it is structured to an open-ended form that is held by bending forces between floor and ceiling. In this project, computational process becomes dominant over composition and in that process, the use of randomness is key. To achieve natural, biological characteristics, random arrangement of branches was essential. Although some values had to be preset, a code was designed to assemble and knit the materials together. Because architecture is viewed with a sense of perfection through implied idea of “safety,” randomness seemed to be impossible; however, through experimentation of new materials and implementation of computational design, the artists manifested a dynamic form through introducing new materials that promised integration of open-ended fabrication to architectural practice.

sketch

//Yugyeong Lee
//Section A (9:00AM)
//yugyeonl@andrew.cmu.edu
//Project 05

var len = 30;
var diam = 5;
var offset = 5;

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

function draw() {
	background(225, 155, 180);
	stroke(224, 112, 155);
	noLoop();
	for (var y = 0; y < height; y += 140) {
		for (var x = 0; x < width; x += 140) {
			flower(x, y);
		}
	}
	for (var y = 70; y < height; y += 140) {
		for (var x = 70; x < width; x += 140) {
			flower(x, y);
		}
	}
	for (var y = 0; y < height; y += 140) {
		for (var x = 70; x < width; x += 140) {
			push();
			translate(x, y);
			noFill();
			symbol(0, 0);
			angleMode(DEGREES);
			rotate(90);
			symbol(0, 0);
			rotate(90);
			symbol(0, 0);
			rotate(90);
			symbol(0, 0);
			pop();
		}
	}
	for (var y = 70; y < height; y += 140) {
		for (var x = 0; x < width; x += 140) {
			push();
			translate(x, y);
			noFill();
			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(5);
	beginShape();
	vertex(-len - offset*2, -offset);
	vertex((-len + offset)/2, -offset);
	vertex((-len + offset)/2, -len + offset * 2);
	vertex(-len + offset*2, -len + offset*2);
	vertex(-len + offset*2, (-len + offset)/2);
	vertex(-len, (-len + offset)/2);
	vertex(-len, -len);
	vertex(-offset/2, -len);
	vertex(-offset/2, -offset);
	endShape();
	pop();
}

function flower (x, y) {
	push();
	translate(x, y);
	rectMode(CENTER);
	noFill();
	strokeWeight(5);
	rect(0, 0, 2*len, 2*len);
	strokeWeight(2);
	line(0, -len, 0, len);
	line(-len, 0, len, 0);
	angleMode(DEGREES);
	rotate(45);
	fill(224, 112, 155);
	ellipse(0, len, diam, diam);
	noFill();
	quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
	rotate(90);
	fill(224, 112, 155);
	ellipse(0, len, diam, diam);
	noFill();
	quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
	rotate(90);
	fill(224, 112, 155);
	ellipse(0, len, diam, diam);
	noFill();
	quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
	rotate(90);
	fill(224, 112, 155);
	ellipse(0, len, diam, diam);
	noFill();
	quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
	pop();
}

I was inspired by Korean traditional pattern to create this wallpaper. Flower and the symbol are both important symbols in Buddhism which dominated ancient Korean times.

rendered walkthrough using Unreal Engine 4

Rendering, in profession of architecture, is essential as realistic visualization ultimately betters the understandings of a project for clients than architectural drawings. Through the evolving technology, 3D video game engines grew to be available for architects as developers of game Gears of War allowed their rendering software Unreal Engine to be free to architects as well as other video game render engines that became more cost efficient for architects.
another rendered walkthrough using Unreal Engine 4

However, utilizing video game engines have both pros and cons. Through this technology, architects can produce realistic, animated walkthroughs as shown above that enhance understanding of experiential and spatial qualities such as light in a shorter amount of time. And the fact that this technology is available to architects for free is the most convincing reason to integrate the program into architectural process. On the other hand, it requires time to learn as well as adjust into a new workflow that might further complicates the process. Also, the engine itself was created for video games creating stylistic differences from other architectural renderings. It is possible for architectural programs to evolve into what video game engine provides. Therefore, the debate comes down to who will step forward to make that change occur.

In this project called Mother, an artist named Inmi Lee derived a form out of sound through her inquiry on how sound might be represented in a form. It is a 3-D printed sculpture based on an algorithm created by capturing hand gestures of participants of an experiment. The experiment goes like this: Utilizing a language that has a strong correlation between how it’s written and how it sounds-Korean-participants who are unfamiliar with the language have to try to describe what the word might meam by gesture. Because they don’t understand Korean, they will take the words they hear as sound rather than words. Strongly correlated with the artist’s past experience of immigrating to different countries having English not as her first language, the project is strongly integrated to the artist’s past and explore sound through giving it form.