Author: heeseoc@andrew.cmu.edu

heeseoc-LookingOutwards-07

I chose this graph named Name Voyager which was developed in 2005 by Martin Wattenberg, which I thought was interesting and also practical. It basically generates a graph using people’s names, having it take more space based on their popularities. The user can type in a specific name and see how popular it was and is depending on the time period, and the interesting point is that as we type, the visualization shows, letter by letter, the overall popularity of the letters we’ve entered so far. It is interesting to observe what names get out of trend and what names get more popular. I feel like the algorithm here should be pretty simple, collecting the number data depending on names and placing them on a corresponding coordinate on a graph. I wouldn’t say that it has the most aesthetically pleasing visual, but I think it is good enough for something that has been developed in 2005.

http://www.babynamewizard.com/voyager

heeseoc-LookingOutwards-06

I found this website by a computational mathematician Andrej Bauer, that generates a random artwork when you put in the title of your artwork. The name of the picture generates a number that is used to construct a mathematical formula. The formula then determines the color of each pixel in the picture. Therefore, it is not that this website gives you any kind of picture whenever you press the button, but the same name generates the same picture, which proves that it is being operated under some type of algorithm. I thought this was interesting because it is interactive, fun to look at, and I personally admired how different each pictures came out. They had completely different tones, textures, and overall vibes, which did not always reflect the title, but the part that I am the one who interprets the picture was another part that was fun about this website.

http://www.random-art.org/online/

 

 

heeseoc-Project-06-AbstractClock

sketch

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-06

function setup() {
    createCanvas(400, 400);

}

function draw() {
	background(19,43,90);
	noStroke();
	angleMode(DEGREES);
	textAlign(CENTER);

	var hr = hour();
    var mn = minute();
    var sc = second();

    fill(235,226,211);
	text("happy birthday!", width/2, 40);

	//cake//
	var hrAngle = map(hr, 0, 12, 0, 360);
	fill(235,226,211);
	rect(40,height/2+75,320,150);
	fill(255,248,235);
	ellipse(width/2,height/2+75,320,100);

	//making the clock based on 12 hour//
	if (hr == 0) { 
        hr = 12; 
	    } else if (hr > 12 & hr < 24) { 
	        hr -= 12; 
	    } else { 
	        hr = hour(); 
	    }

    var maphr = map(hr, 0, 12, 0, 300);

    //making the candles appaear each hour//
	for (var i = 1; i <= maphr; i += 25) {

		var canw = 5;
	    var canh = 150;

	    var mappedmn = map(mn, 59,0, 0,canh);

				//flickers every other second//
				if(second() % 2 == 0){ 
					fill(random(100,255), random(100,255), random(200,255), 60);
					ellipse(i+62.5, height/2-100+canh-mappedmn, 75, 75);
				} else {
					fill(random(100,255), random(100,255), random(200,255), 20);
					ellipse(i+62.5, height/2-100+canh-mappedmn, 75, 75);
				}

			//candle body//
			fill(154, 188, 255);
			rect(i-canw/2+62.5, height/2+canh/2, canw, -mappedmn);
			ellipse(i+62.5, 275, canw, canw/3);
			fill(126, 162, 233);
			ellipse(i+62.5, 275-mappedmn, canw, canw/3);

			//fire//
			fill(random(100,255), random(100,255), random(200,255));
			ellipse(i+62.5, height/2-95+canh-mappedmn, 15, 30);

			fill(255,250,200);
			ellipse(i+62.5, height/2-90+canh-mappedmn+2.5, 5, 15);

}

}

When I read the term “day-long animation” in the instructions, I immediately thought of birthday, and started to wonder a way to visualize a birthday as a clock. Then, I got an idea of a candle, which I thought was a perfect way to show the passing time because the size actually shrinks, and for this project, since I needed different variables that represent different units of time (such as seconds, minutes, and hours), I thought that I would be able to manipulate the number of the candles and the flickering fire to represent those different variables. The candles flicker every other second, shrink as a minute passes, and adds as an hour passes.

heeseoc-LookingOutwards05

I was interested by the 3D computer graphic work by an artist named Mike Campau. He specializes in hybrid imagery, which is a combination of computer generated objects with photography. The photos I attached below are two of the series named Living Sculptures #2, which is a continuation from his Living Sculptures series. It is interesting to see how strange abstract structures with non-human features as in their forms and textures, are given life or even personified by simply adding some clothing and classic portrait lighting to them. We are able to observe and guess the subjects’ characteristics through these graphic portraits, even thought there are no such things as facial features or particular gestures. Also, the combination of the rather serious color schemes and the fun, seemingly fluid shapes create an odd feeling, yet it entices the viewers at the same time.

https://www.behance.net/gallery/19683165/LIVING-SCULPTURES-2

heeseoc-Project05-Wallpaper

sketch

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-05

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

function draw() {
	grid();
	grid2();
	grid3();
	grid4();
}

function grid() {
	background(243,242,224);
	angleMode(DEGREES);
	rotate(45);

    	for (var y = -height; y < height*2; y+=160) {
		for (var x = 0; x < width*2; x+=160) {
			
			strokeWeight(7.5);
			stroke(250,176,91);
			fill(235,1,0);
			rect(x-15,y-15,150,150); //red rect w/ yellow str//
		}
	}
}

function grid2() {

    	for (var y = -height; y < height*2; y+=160) {
		for (var x = 0; x < width*2; x+=160) {

			strokeWeight(5);
			stroke(81,56,49);
			fill(235,176,14);
			rect(x+90,y+250,100,100); //yellow rect w/ brown str//

			stroke(47,215,127);
			fill(95,115,0);
			rect(x+100,y+260,80,80); //olive rect w/ neon green str//

			stroke(229,129,7);
			fill(234,7,14);
			rect(x+110,y+270,60,60);

			stroke(47,215,127); //green flower petals//
			fill(95,115,0);
			ellipse(x+125,y+285,25,25);
			ellipse(x+125,y+315,25,25);
			ellipse(x+155,y+315,25,25);
			ellipse(x+155,y+285,25,25);

			strokeWeight(2); //red flower petals//
			stroke(255,195,112);
			fill(234,7,14);
			ellipse(x+126,y+300,20,20);
			ellipse(x+155,y+300,20,20);
			ellipse(x+140.5,y+314.5,20,20);
			ellipse(x+140.5,y+285.5,20,20); 

			stroke(81,56,49); //yellow center//
			fill(255,192,1);
			ellipse(x+140.5,y+300,20,20); 
		}
	}
}

function grid3() {
	    for (var y = -height; y < height*2; y+=160) {
		for (var x = 0; x < width*2; x+=160) {
			strokeWeight(5);
			stroke(255,100,8);
			fill(0,0,153);
			rect(x,y,120,120); //blue rect w/ orange str//

		}
	}
}

function grid4() {
	    for (var y = -height; y < height*2; y+=160) {
		for (var x = 0; x < width*2; x+=160) {

			strokeWeight(5);
			stroke(0,0,153);
			fill(240,175,23);
			ellipse(x+60,y+220,100,100); //yellow cirlces within blue rect//

			stroke(68,220,135);
			fill(255,119,1);
			ellipse(x+60,y+220,80,80); //orange circles with neon green stroke//

			strokeWeight(2.5); //red petals within the orange circle//
			stroke(255,195,112);
			fill(234,7,14);
			ellipse(x+40,y+220,40,20);
			ellipse(x+80,y+220,40,20);
			ellipse(x+60,y+200,20,40);
			ellipse(x+60,y+240,20,40);

			strokeWeight(1.5); //green petals within the orange circle//
			stroke(243,242,224); 
			fill(95,115,0);
			ellipse(x+45,y+205,20,20);
			ellipse(x+45,y+235,20,20);
			ellipse(x+75,y+235,20,20);
			ellipse(x+75,y+205,20,20);

			strokeWeight(2.5); //orange center//
			stroke(255,195,112);
			fill(255,119,1);
			ellipse(x+60,y+220,35,35);
		}
	}
}

I was inspired by the traditional pattern of Korea. I simplified the pattern so that I would be able to execute it with coding, and adhered to the color scheme in the reference shown below. It has a lot of repetition and symmetrical shapes, which I thought was interesting to show through computation. Also, how these traditional patterns are meant to be crafted and drawn by hand but could also be digitally generated was another point of interest. I had to split my pattern into parts because it did not let me layer some shapes on top of other shapes even though I carefully controlled the order of my lines of codes.

heeseoc-LookingOutwards-04

Volume, an installation piece made by an architecture collective named Softlab, is an interactive cube. It is made up of grids of responsive mirrors that redirect light and sound of the people surrounding the piece as a volume. It is interesting in that the motive of the piece is to capture the excitement of the festival-goers. Not only that I liked the sound it makes, but I was also intrigued by its scale and immersive visual. The mirrors are designed to rotate, track people’s movements as they walk around the installation, which creates a sense of infinite depth. The interface for the installation was built in Processing, tiling the coordinates of the cameras in order to visualize the interaction and convert the input into ambient sound.

Volume

heeseoc-Project-04-StringArt

heeseoc-stringart

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-04

function setup() {
    createCanvas(400, 300);
}

function draw() {

	background(0);

	for (var i = 0; i < 500; i++) {

		stroke(150+mouseX, 255-mouseY, 100); //color change depending on cursor location// 
		strokeWeight(.5); 
	
		line(i*15, height, mouseX, height-i*15); //when mouse is at horizontal center, bottom left//
		line(mouseX, i*15, width-i*15, 0); //top right
		line(i*15+width, height, mouseX, i*15); //bottom right
		line(i*15, 0, mouseX, i*15); //bottom right
}
}

I’ve been experimenting with the curves that connect the adjacent sides of the canvas. While moving them around, I found out that it creates an interesting dimensional quality when the flat sides stick together along the cursor, so I flipped the curves so that the four curves follow the mouse. I gave a slightly different value for one of the curves, because the form as a whole looked boring when it was completely symmetrical.

heeseoc-LookingOutwards-03

http://matsysdesign.com/

I really enjoyed looking at Andrew Kudless’ P-series. They immediately grabbed my attention as I browsed through the options because they have some seemingly organic qualities to their form, but are definitely generated digitally. I wanted to figure out the process and the mechanism behind it. The artist first started off with exploring some “evocative” texture on his computer, generating a cloud of points that are then turned into constraints that would hold the elasticity in the fabric which he used as the cover material. For his first piece in 2006, called the P-Wall, he used plaster poured into the mould with the fabric expanding under the weight of the plaster. For the next piece in the series, he explores more of the self-organization of material under force, leaving the fabric sag, expand, and wrinkle under pressure. He also has created something named the P-ball, which is a 3D printed concrete prototype. It is super interesting how it is possible to experiment with different materials with digitally created forms.

 

heeseoc-project-03-DynamicDrawing

heeseoc-dynamic

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-03

	var dir = 1;
	var speed = 4;
	var diam = 0;
	var dot = 3;
	var o = 1;
	var oo = 1;
	var angle = 0;
	var angleo = 0;


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

function draw() {
	noStroke(); 

	var center = 135;
	var c = constrain(mouseX, -150, center);


	//background//
	background (255-c*1.5,255-c*1.5,255-c*1.5);


	//hand right//
	fill (227,200,113);
	quad (-c+615,233,-c+681,299,-c+615,365,-c+549,299);

	fill (212,180,75);
	quad (-c+690,299,-c+640,249,-c+590,299,-c+640,349);

	fill (150,132,65);
	triangle (-c+610,299,-c+660,249,-c+660,349);

	fill (227,200,113);
	triangle (-c+614.5,233,-c+690,250,-c+680,299);

	fill (241,216,141);
	rect (-c+640,250,320,75);
	triangle (-c+640,250,-c+640,325,-c+600,250);
	rect (-c+490,250,130,30);
	triangle (-c+490,250,-c+490,280,-c+455,250);

	triangle (-c+725,325,-c+695,325,-c+695,355);
	rect (-c+590,325,105,30);
	triangle (-c+590,325,-c+590,355,-c+575,325);

	//fingernails right//
	fill (255,238,189);
	rect(-c+470,250,30,13);
	triangle (-c+470,250,-c+470,263,-c+455,250);


	//rotating dots//
	if (mouseX > 100) {
	push();
    translate(320,250);
    rotate(radians(angle));
    angle = angle + 10;
    fill(255);
    ellipse(-o, o, dot, dot);
    pop();
    o = o + 0.3;
	}

	if (mouseX > 80) {
	push();
    translate(320,250);
    rotate(radians(angleo));
    angleo = angleo + 3;
    fill(255);
    ellipse(-oo, oo, dot, dot);
    pop();
    oo = oo + 0.1;
	}

	if (mouseX > 120) {
	push();
    translate(320,250);
    rotate(radians(-angleo));
    angleo = angleo + 3;
    fill(255);
    ellipse(-oo-50, oo+50, dot, dot);
    pop();
    oo = oo + 0.1;
	}

	if (mouseX < 80) {
		o = 0;
		oo = 0;
	}

	//ripples//
	stroke (255);
	noFill();
	ellipse (320,250,diam/3,diam);
	ellipse (320,250,diam/4.5,diam/1.5);

	diam += dir * speed;
    if (mouseX < 135) {
        diam = 0;
	}


	noStroke();

	//hand left//
	fill (167,157,203);
	quad (c+25,233,c+91,299,c+25,365,c-41,299);

	fill (141,129,183);
	quad (c+50,299,c,249,c-50,299,c,349);

	fill (115,107,141);
	triangle (c+30,299,c-20,249,c-20,349);

	fill (167,157,203);
	triangle (c+25.5,233,c-50,250,c-40,299);

	fill (186,178,217);
	rect (c-320,250,320,75);
	triangle (c,250,c,325,c+40,250);
	rect (c+20,250,130,30);
	triangle (c+150,250,c+150,280,c+185,250);

	triangle (c-85,325,c-55,325,c-55,355);
	rect (c-55,325,105,30);
	triangle (c+50,325,c+50,355,c+65,325);

	//fingernails left//
	fill (216,209,241);
	rect(c+140,250,30,13);
	triangle (c+170,250,c+170,263,c+185,250);

	
 }

My original idea was to make the touch convey a sense of affection between the two people, but I changed it later on so that with the interactions, it looks more like a reflection (yet the viewers may not know at their first sight which is the twist I intended to give to this piece). Getting one hand to exactly reflect the other hand was the most difficult part for me, because I calculated all the coordinating numbers since I didn’t know how to take a combination of objects and just flip it over.

heeseoc-LookingOutwards-02

http://www.butterfly.ie/

“Particle Man” and “Universe Hand” are computer generated artworks by artist Glenn Marshall. He developed a way to digitally visualize what he had in mind through manipulating the system of Cinema 4D using the Python language. They are experimental digital artworks that creates 3D sculptural forms using mathematical and scientific models of particle collisions, creating the shape of human body parts using thousands of particles of close proximity that are released from a source in 3D space.

What I like about these are how he effectively uses the simple dots and lines in a 3D space to create more complex shapes. The intertwining strands creating a shape that looks organic, which is interesting because the artwork itself is obviously very artificial. Also, I like how his works are presented in an indefinite digital space with illuminated objects, which almost feels really like the universe, just like how he named his second piece.