Author: jihoonp@andrew.cmu.edu

JihoonPark_project04

sketch

//Jihoon Park
//Section A
//jihoonp@andrew.cmu.edu
//project-04: String Art

var i;
var j;
var k;
var l;
var space = 50; //space between starting points of lines
var countX = 9; //number of lines in X axis of a quarter
var countY = 7; //numver of lines in Y axis of a quarter
var boxW = 150; // width of a box
var speed = 1.3; 
var dir = 1;
var vertX = 0; // x coordinate of vertex
var vertY = 0; // y coordinate of vertex
var vertW = 0.5*boxW; // vertex limit

function setup() {
	createCanvas(640, 480, WEBGL);
	noCursor();

}

function draw() {
	background(255);
	
	
	vertX+=dir*speed;
	if (vertX>=vertW) {
		dir=-dir;
	} else if (vertX<=-vertW) {
		dir=-dir;
	}
	//x coordinate of vertex goes back and forth
	vertY+=dir*speed;
	if (vertY>=vertW) {
		dir=-dir;
	} else if (vertY<=-vertW) {
		dir=-dir;
	}
	
	
	for (var k = -countX; k < 0; k=k+1) {
		beginShape(LINES);
		vertex(k*space, -height, 0);
		vertex(vertX, -vertY, 0);
		endShape();
		//bottom edge left half lines

		beginShape(LINES);
		vertex(k*space, height, 0);
		vertex(vertX, vertY, 0);
		endShape();
		//top edge left half lines
	}

	
	for (var  l= -countY; l < 0; l=l+1) {
		beginShape(LINES);
		vertex(-width, l*space, 0);
		vertex(vertX, -vertY, 0);
		endShape();
		//left edge bottom half lines
		
		beginShape(LINES);
		vertex(width, l*space, 0);
		vertex(-vertX, -vertY, 0);
		endShape();
		//right edge bottom half lines

	}

	
	for (var i = 0; i < countX; i=i+1) {
		beginShape(LINES);
		vertex(i*space, -height, 0);
		vertex(-vertX, -vertY, 0);
		endShape();
		//bottom edge right half lines
		
		beginShape(LINES);
		vertex(i*space, height, 0);
		vertex(-vertX, vertY, 0);
		endShape();
		//top edge right half lines
	}

	
	for (var  j= 0; j < countY; j=j+1) {
		beginShape(LINES);
		vertex(-width, j*space, 0);
		vertex(vertX, vertY, 0);
		endShape();
		//left edge top half lines
		
		beginShape(LINES);
		vertex(width, j*space, 0);
		vertex(-vertX, vertY, 0);
		endShape();
		//right edge top half lines
	}
	
	
	//box rotates
	rotateX(frameCount*0.02);
	rotateY(frameCount*0.02);
	ambientMaterial(200);
	box(boxW, boxW, boxW);
	

	
}

I created lines that could be seen as controlling lines for a box to rotate. However, since the canvas had to be a 3d space, I had to use begin/end shape with vertices.

LookingOutwards_Jihoonp_04

In less than two centuries, visual technology has evolved from chemical capture of light in black and white photography to two dimensional and three dimensional film, and now virtual reality that provides the utmost realistic visual experience. VR has suggested to us a whole new way of experiencing the media, and further the world. Now, we can have the full visual experience of being at the Pyramid of Giza, the deepest of the Pacific and even outer space, all in the tiniest room with a phone and a pair of VR goggles.

A few years ago, Google had announced their new product called “Tilt Brush.” It is basically an electronic paint brush that can be used to draw in 3-D through Virtual Reality. The significance of Tilt Brush is that it has amalgamated the very primitive form of visual art-line drawing-with the tip of the edge technology of virtual reality, giving the lines a whole new dimension. Can this still be called a drawing? Is it a sculpture? Most of us are still not sure, but it sure has opened up doors for possibilities we did not even know we had.

There is more. Now, Tilt Brush has been augmented be addition of another sensory element-hearing. Google has merged the visual and the acoustic by adding musical notes to the path of the brush. The lines represent musical cords and melody and now we can create music not by drawing notes on lines but making visual art.

Many in modern art world had attempted to visualize music, or make visual art audible. But not much so far will get so close to being synchronized as Tilt Brush has done it. Drawing music opens new doors not only for artists but even more to lay people who are outside the profession of art or music. This includes the deaf and the blind.

It is not in the future, but today that we can ask, what does a rose sound like? or what does Beethoven’s symphony 9 look like? Can it be that there is some coherence in the beauty of visual pleasure and acoustic pleasure? All of this now is the user’s responsibility to explore.

Among plethora of uncertainties, one thing I can say for sure is,
“What a time to be alive.”

Link to the articles :
http://thecreatorsproject.vice.com/blog/paint-sound-with-audio-reactive-tilt-brush
http://thecreatorsproject.vice.com/blog/watch-a-disney-animator-sketch-classic-characters-in-thin-air

Jihoonp_Project_03

sketch

//Jihoon Park
//Section A
//jihoonp@andrew.cmu.edu
//project-03

var x = 0;
var y = 0;
var dirL = 1;
var dirC = 1;
var speedL = 1;
var speedC = 1;
var w = 30; // size of big squares
var v = 10; //size of intermittent squares
var s = 30; //space between squares
var r = 0;
var g = 100;
var b = 200;


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

function draw () {
	background(r,g,b);
	r+=dirC*speedC;
	g+=dirC*speedC;
	b+=-dirC*speedC;
	if (r>255||r<0) {
		dirC=-dirC;
	}
	if (g>255||g<0) {
		dirC=-dirC;
	}
	if (b>255||b<0) {
		dirC=-dirC;
	}
	//sets colors for squares, that periodically change

    for (var i=0 ;i < 10; i++) {
    	var yPos = ((s*2)*i)+(w/2);

    	for (var j=0; j<13;j++){
    		var xPos = ((s*2)*j)+(w/2);
    		noStroke();
    		fill(g,b,r);
    		rectMode(CENTER);
			rect(xPos,yPos,w,w);
	//creates primary squares
		}

    }
    
    fill(g,b,r);
    strokeWeight(20);
    line(0,0,0,640);

    for (var l=0; l<10 ; l++) {
    	var Ypos = ((s*2)*l)-(.5*s);

    	for (var k=0;k<13;k++) {
    		var Xpos = ((s*2)*k)-(.5*s);
    		noStroke();
    		fill(b,r,g);
    		rectMode(CENTER);
    		rect(Xpos, Ypos,v,v);
    //creates secondary squares	
    	}
    }
    


	stroke(g,b,r);
   	strokeWeight(w/2);
    line(x,y,x,height);
    line(x+(w*2),y,x+(w*2),height);
    line(x+(w*4),y,x+(w*4),height);
    line(x+(w*6),y,x+(w*6),height);
    line(x+(w*8),y,x+(w*8),height);
    line(x+(w*10),y,x+(w*10),height);
    line(x+(w*12),y,x+(w*12),height);
    line(x+(w*14),y,x+(w*14),height);
    line(x+(w*16),y,x+(w*16),height);
    line(x+(w*18),y,x+(w*18),height);
    line(x+(w*20),y,x+(w*20),height);
    line(x+(w*22),y,x+(w*22),height);
    line(x+(w*24),y,x+(w*24),height);
    line(x+(w*26),y,x+(w*26),height);
    line(x+(w*28),y,x+(w*28),height);
    line(x+(w*30),y,x+(w*30),height);

    line(x-(w*2),y,x-(w*2),height);
    line(x-(w*4),y,x-(w*4),height);
    line(x-(w*6),y,x-(w*6),height);
    line(x-(w*8),y,x-(w*8),height);
    line(x-(w*10),y,x-(w*10),height);
    line(x-(w*12),y,x-(w*12),height);
    line(x-(w*14),y,x-(w*14),height);
    line(x-(w*16),y,x-(w*16),height);
    line(x-(w*18),y,x-(w*18),height);
    line(x-(w*20),y,x-(w*20),height);
    line(x-(w*22),y,x-(w*22),height);
    line(x-(w*24),y,x-(w*24),height);
    line(x-(w*26),y,x-(w*26),height);
    line(x-(w*28),y,x-(w*28),height);
    line(x-(w*30),y,x-(w*30),height);
    speedL = mouseX/50;
    x += dirL*speedL;
    //makes lines move


    if (x>width) {
    	x=0;
    //makes lines repeat
	}
	
}

function mouseDragged() {
	v = (mouseX+mouseY)/s;
	w = s-v;
	//changes square sizes when mouse dragged
}

I figured out a way to draw multiple objects in different location with one function called for loop. I incorporated it to draw squares that change according to the location of the mouse when clicked.

Jihoonp_LookingOutwards-03

hypnos4

This porous structure called the Hypnosis Chamber, was installed in Modern Art Museum of Paris in 2005, by an architecture firm R&Sie(n). Their focus is on exploring the relationship between architecture, context and human.

“Urban form no longer depends on the arbitrary decisions or control over its emergence exercised by a few, but rather the ensemble of its individual contingencies.”

The firm explains the thought behind their theoretical computational design project, “I’ve heard about…,” which has become the motif for the subsequent Hypnosis room.

 

hypnos5

The Hypnosis chamber is to be experienced from the inside as a cognitive room. The vocal recordings makes the inhabitant indulge in a “wake up dream,” in which one becomes no longer human but an organic part of the chamber.

hypnos8

Honestly, there are a lot of study to be done in order to fully understand this work. However, what I took from it was the sense of movement into a new form of formlessness which post-modern, post-capitalism society might lead to.  The hypnosis chamber is truly inspiring of the fact that spaces we inhibit no longer acknowledge us as separate, dominant beings but as an integral part of architecture, as to say the structure is not complete without us being in there.

hypnos12

Also, the nature of the structure provokes what other forms would be only waiting to be created with the aid of computation. The limit is constantly being extended into the future.

Project-02-Face

sketch

//Jihoon Park
//Section A
//jihoonp@andrew.cmu.edu
//Project-02

var hairSpike = 100;
var skinColorR = 194;
var skinColorG = 141;
var cheekBone = 480;
var chinLength = 420;
var noseLength = 150;
var eyeX = 20;
var eyeY = 20;
var smileFactor = 350;


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

function draw() {
	background(165, 170, 247);
	//creates blue background
//HAIR
    noStroke();
    fill("yellow");
    beginShape();
    curveVertex(200, 200);
    curveVertex(200, 200);
    curveVertex(hairSpike, 50);
    curveVertex(200, 70);
    curveVertex(hairSpike+170, 10);
    curveVertex(305, 40);
    curveVertex(hairSpike+240, 5);
    curveVertex(350, 70);
    curveVertex(hairSpike+430, 30);
    curveVertex(500, 80);
    curveVertex(hairSpike+530, 140);
    curveVertex(200, 200);
    curveVertex(200, 200);
    endShape(CLOSE);
    //defines protruding points of hair

//bust
	noStroke();
	fill(200, 110, 40);
	beginShape();
	curveVertex(80, 480);
	curveVertex(80, 480);
	curveVertex(110, 410);
	curveVertex(300, 380);
	curveVertex(410, 410);
	curveVertex(550, 480);
	endShape(CLOSE);
	//draws bust

//FACE
	noStroke();
	fill(skinColorR, skinColorG, 159); 
	//defines skin color with a set blue value
	
	beginShape();
	curveVertex(240, 150);
	curveVertex(240, 150);
	curveVertex(300, 50);
	curveVertex(360, 100);
	curveVertex(cheekBone, 200);
	curveVertex(400, 300);
	curveVertex(300, chinLength); //defines lower end point of chin
	curveVertex(240, 380);
	curveVertex(noseLength, 200); //defines nose length
	curveVertex(240, 150);
	curveVertex(240, 150);
	endShape();
	//draws facial contour

	stroke(skinColorR/2, skinColorG/2, 159);
	strokeWeight(4);
	beginShape();
	curveVertex(240, 380);
	curveVertex(240, 380);
	curveVertex(noseLength, 200);
	curveVertex(300, 90);
	curveVertex(300, 90);
	endShape();
	//draws line around the nose

//EYES
	noStroke();
	fill(255);
	ellipse(300-(eyeX/2), 90, eyeX, eyeY);
	ellipse(300+(eyeX/2), 90, eyeX, eyeY);
	fill(0)
	ellipse(300-(eyeX/2), 90, 10, 10);
	ellipse(300+(eyeX/2), 90, 10, 10);
	//defines the size of eyes

//MOUTH
    stroke(255, 180, 0);
    fill(255, 100, 0);
    triangle(230, 300, smileFactor, 350, 310, smileFactor);
    //defines two poins of triangular mouth	
}

function mousePressed() {
	hairSpike = random(50, 150);
	skinColorR = random(0, 255);
	skinColorG = random(0, 255);
	cheekBone = random(400, 500);
	chinLength = random(400, 460);
	noseLength = random(70, 200);
	eyeX = random(10, 60);
	eyeY = random(10, 40);
	smileFactor = random(270, 380);
}

For this project, I tried to practice as much freedom I can with making the portrait. Compared to the first project, I now had a grasp of what JavaScript could manage to do, and expressed it with the random features of the “Ever-changing man”

JihoonPark-LookingOutwards-02

winter2011

For the course, Case Study on Architecture, I was given an object in a school to research and identify materialistic, social and political relationship to its context. The object being a fire sprinkler, tracing back to the water source seemed to be a reasonable path to take.

Water is an indispensable utility along with gas and electricity, more than if not just as much as these. To trace water is to trace our path  of living and the way we curve nature to gain what we want.

spring2011-detail

The works of David Wicks maps the water ways of the US through water consumption data and rainfall statistics. Basically, the program identifies locations which consumes the most water and therefore requires more water to be pumped and channeled from faraway places with rainfall.

Though only data shown in the map pertains to rainfall and water consumption, it is more than that. The map reveals simple statistical information from population density to geography and climate, and further providing insight into the fact that the utility we use daily are not in fact for granted.

realtime-screenshot

The way he amalgamated the interactive animation to a crucial problem of today in a way that could be so consistent in its representation of the core value is admirable. Wicks’ computational creation is reveals something we should strive for in making social conscious art.

project-01-face

sketch
The focus of my portrait was the everchanging mood and facial expression of myself.

function setup() {
    createCanvas(360, 540);
}
	//Canvas created in portrait format

function draw() {
	background(213, 207, random(0,255));
	//random background color in yellow hue expressing everchanging environment.

	noStroke();
	fill(165, 170, 247);
	ellipse(180, 200, 200, 300);

	fill(0);
	beginShape();
	curveVertex(160, 524);
	curveVertex(160, 524);
	curveVertex(180, 360);
	curveVertex(300, 290);
	curveVertex(360, 180);
	curveVertex(360, 180);
	endShape();
	//Curvature rather expressing the soul than the body.

	fill(200, 100, 100);
	triangle(110, 140, 127, 160, 90, 156);
	rect(200, 155, 70, 20, 1, 10, 20, 30);

	fill(0);
	ellipse(110, 200, 20, 20);
	ellipse(250, 190, 25, 40);

	fill(150, 243, 99);
	triangle(170, 210, 175, 240, mouseX, mouseY);
	//nose symbolises one's ego, which is never concrete, changing by circumstances.

	strokeWeight(40)
	stroke(255, 180, 0);
	fill(100, 200, 10);
	arc(170, 310, 100, 80, 10, 50);
}

function mousePressed() {
	loop();
}

function mouseReleased() {
	noLoop();
}
	//the ability to start and stop the whim, expressed through stopping of loop.

JihoonPark-LookingOutwards-01

http://

I encountered one of these grotesque videos by Albert Omoss upon scrolling through an Instagram art page, with eyes half open from the sleep only waiting for the right moment to kick in after midnight. The series of gif’s with melting down human figures came to me as an unexpected disturbance.

Famous for renders of disfiguring people, Omoss seeks to challenge the modern day achievements by often showing how indefensible we are in nature, and thus connecting concepts of technology and humanity to find mutual relationship between the two.

Though many of his videos are abhorrent at first sight, the messages and the interpretation found underneath the skin is what makes people as well as myself keep looking for more.

The cynical mood Omoss conveys in unraveling in his works stimulates viewers to doubt the use of all the secular problems and come back to the existentialist reality. Like shown in his work “Entangle,” the two lovers embracing each other and finally reaching for the heart reminds us all that in the bottom line, love is is the desire to be close to each other, and nothing else.

Omoss continues to reveal the very basic values of human existence. Wealth, Fame, Status, etc. None of them means anything when we are stripped down to our bare skins. Nothing, but only humans, letting us care about what really matters-love, friends, thought.