## Jiyoung Ahn_Looking Outwards_07

After searching for few websites, one of Martin Wattenberg’s  project ‘Wind map’ really seemed interesting. Wind map shows its current wind movement in United States. I really like the aspect of creating a whole new pattern every seconds by gathering data from the National Digital Forecast Database. These are near-term forecasts, revised once per hour.

(Images from Hurricane Isaac (September 2012)

Although this wind map is createdas an art piece, Martin Wattenberg mentioned that it is interesting how this map is used for an actual map. Bird watchers have tracked migration patterns; bicyclists have planned their trips; and conspiracy theorists use it to track mysterious chemicals in the air.

By minimizing the color (white, dark grey), I think the random pattern was emphasized well, and it drives our attention to the movement and makes us to focus on it’s flexible movement.

Wind map is currently available through this link:

http://hint.fm/wind/

screen shot of the link

and you can see current wind moves and you can see the movement of wind. And also by telling the wind speed through the visual elements and its speed of movement.

## 07_Jiyoung Ahn_Curves

``````//Jiyoung Ahn
//Section A
//jiyounga@andrew.cmu.edu
//Assignment -07- project

var nLines = 300;// the amount of lines

function setup() {
createCanvas(550, 550);
function decreaseLevel(){
level = level-10;

}

}

function draw() {
background('lightpink');
myShape();
}

function myShape() {

var h = constrain(mouseY/5, 0, 200); //constrain shape
var w = constrain(mouseX/5, 0, 200);//constrain shape

var colR = map(mouseY, 0, height, 20, 30);//changes color on y
var colG = map(mouseY, 0, height, 0, 160);
var colB = map(mouseY, 0, height, 300, 76);

fill(colR, colB, colG);

push();
translate(height/2, width/2);
beginShape();
for (var i = 0; i < nLines; i++) {
var t = map(i, 0, nLines, 0,  TWO_PI);

var x = 200 * pow(cos(t * w),3);
var y = 200 * pow(sin(t * h),3);

curveVertex(x , y); // adding curve edges
}
endShape();
}
function mousePressed(){
nLines = random(5, 360); // the number of lines and points shows randomly when mouse is Pressed

}

``````

I used Astroid Radial Curve to create this form. I wanted to create a form with complexed lines, and get a doodle-like form. Random shapes are created when mouse is clicked. Overall shapes look like that they have random shapes however it also keeps the pattern at the same time.

## Looking Outward_06_Jiyoung Ahn

When I read the topic, the sculptor Dale Chihuly came up to my mind. People might not know who he is, however I’m assuming that students from CMU are really familiar with his artworks.

This art work is located in Phipps conservatory.

And this art work is located in Cohon center.

He is also well-known as a artist who created an artwork at Bellagio hotel, Las Vegas.

Fiori Di Como – Dale Chihuly

His works are created by glass, and his works are located in more than 200 different places. He started to make glassblowing art in late 1960s, and he was so amazed by how random shapes of small glass pieces form another one beautiful art piece. His artworks do have random shapes, however when they are all arranged together I am amazed how they are shown as a whole new pattern. He used many different colors but these created whole harmony.

This video is showing the working process of his artwork.

## Project06_Jiyoung Ahn_Abstract clock

``````//Jiyoung Ahn
//Section A
//jiyounga@andrew.cmu.edu
//Assignment -06-project

var cX = 0; //center x
var cY = 0; // center y
var dif = 100; //width difference

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

function draw() {
background(250);

var Hr = hour ();
var Min = minute ();
var Sec = second ();
noStroke ();
translate (250, 300);

//second-red
fill ('#f92b09');
arc (cX, cY, width, width, PI, PI + (Sec%60)/60*PI);

//second-orange
fill ('#f9823e');
arc (cX, cY, width-dif, width-dif, PI, PI + (Sec%60)/60 *PI);

//minute - yellow
fill ('#ede995');
arc (cX, cY, width-2*dif, width-2*dif, PI, PI+(Min%60)/60 *PI);

//minute - green
fill ('#70cb95');
arc (cX, cY, width-3*dif, width-3*dif, PI, PI+(Min%60)/60 *PI);

//hour - blue
fill ('#70afd7');
arc(cX, cY, width-4*dif, width-4*dif, PI, PI + (Min%60)/60 *PI);

//hour - navy
fill ('#3d64d2');
arc(cX, cY, width-5*dif, width-5*dif, PI, PI + (Hr%12)/12 *PI);

//hour - purple
fill ('#7f7ed0');
arc(cX, cY, width-6*dif, width-6*dif, PI, PI + (Hr%12)/12 *PI);

}``````

I tried to create a clock with a shape of a rainbow. I divided 7 colors of rainbow by sec, min, hr. Though I took a simple concept of clock, it was quite a challenge for me to present different sizes of half ellipse.

## Looking outward – 05 – 3D graphic design art

There are tons of 3d graphic design artists all around the world. Some of the artists creates surrealistic environment, and some of the artist creates hyper realistic art pieces. I think one of the graphic arts that fascinates me is ‘Saya’, the lifelike Japanese girl character. When I first saw this art piece, I thought it was just a picture of a girl, however once I’ve noticed that it was made by graphic I was shocked.

Saya is created by Japanese graphic artists, Teruyuki and Yuki Ishikawa, who live in Tokyo. They tried to create each hair and even eyelashes. They mentioned that the most challenging part was the skin. It was hard to express the texture and color of natural skin. Saya has her own twitter account, and she updates her status regularly and when she was released, her picture was retwitted over 8000times.

## Jiyoung Ahn_05_Walll paper

After I saw Sarita Chen’s 8 bit pixel art work, I wanted to explore and learn how this worked. So I chose my favorite character minion, and I decided to explore them and make it into a wall paper.

``````//Jiyoung Ahn
//Section A
//jiyounga@andrew.cmu.edu
//Assignment -05-project

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

function draw() {

background('pink');

for(var x = 0; x < width ; x +=70){
for(var y = 0; y < height; y += 70){
heartminion(x,y);
}
}
}
function heartminion(x,y){

noStroke();
var outline = ('black');
var heart = ('red');
var minionskin = ('yellow');
var goggle = (150);
var clothes = ('blue');
var eye = ('white');
var onepixel = 2.5;

//line1
fill(outline);
rect(x+5*onepixel,y,onepixel*2,onepixel);
rect(x+8*onepixel,y,onepixel*2,onepixel);

//line2
fill(outline);
rect(x+4*onepixel,y+onepixel,onepixel,onepixel);
fill(heart);
rect(x+5*onepixel,y+onepixel,onepixel*2,onepixel);
fill(outline);
rect(x+7*onepixel,y+onepixel,onepixel,onepixel);
fill(heart);
rect(x+8*onepixel,y+onepixel,onepixel*2,onepixel);
fill(outline);
rect(x+10*onepixel,y+onepixel,onepixel,onepixel);

//line3
fill(outline);
rect(x+4*onepixel,y+onepixel*2,onepixel,onepixel);
fill(heart);
rect(x+5*onepixel,y+onepixel*2,onepixel*5,onepixel);
fill(outline);
rect(x+10*onepixel,y+onepixel*2,onepixel,onepixel);

//line4
fill(outline);
rect(x+5*onepixel,y+onepixel*3,onepixel,onepixel);
fill(heart);
rect(x+6*onepixel,y+onepixel*3,onepixel*3,onepixel);
fill(outline);
rect(x+9*onepixel,y+onepixel*3,onepixel,onepixel);

//line5
fill(outline);
rect(x+6*onepixel,y+onepixel*4,onepixel,onepixel);
fill(heart);
rect(x+7*onepixel,y+onepixel*4,onepixel,onepixel);
fill(outline);
rect(x+8*onepixel,y+onepixel*4,onepixel,onepixel);

//line6
fill(outline);
rect(x+7*onepixel,y+onepixel*5,onepixel,onepixel);

//line8
fill(minionskin);
rect(x+5*onepixel,y+onepixel*8,onepixel*6,onepixel);

//line9
fill(minionskin);
rect(x+4*onepixel,y+onepixel*9,onepixel*3,onepixel);
fill(goggle);
rect(x+7*onepixel,y+onepixel*9,onepixel*2,onepixel);
fill(minionskin);
rect(x+9*onepixel,y+onepixel*9,onepixel*3,onepixel);

//line10
fill(minionskin);
rect(x+3*onepixel,y+onepixel*10,onepixel*3,onepixel);
fill(goggle);
rect(x+6*onepixel,y+onepixel*10,onepixel,onepixel);
fill(eye);
rect(x+7*onepixel,y+onepixel*10,onepixel*2,onepixel);
fill(goggle);
rect(x+9*onepixel,y+onepixel*10,onepixel,onepixel);
fill(minionskin);
rect(x+10*onepixel,y+onepixel*10,onepixel*3,onepixel);

//line11
fill(outline);
rect(x+3*onepixel,y+onepixel*11,onepixel*2,onepixel);
fill(goggle);
rect(x+5*onepixel,y+onepixel*11,onepixel,onepixel);
fill(eye);
rect(x+6*onepixel,y+onepixel*11,onepixel,onepixel);
fill(outline);
rect(x+7*onepixel,y+onepixel*11,onepixel*2,onepixel);
fill(eye);
rect(x+9*onepixel,y+onepixel*11,onepixel,onepixel);
fill(goggle);
rect(x+10*onepixel,y+onepixel*11,onepixel,onepixel);
fill(outline);
rect(x+11*onepixel,y+onepixel*11,onepixel*2,onepixel);

//line12
fill(outline);
rect(x+3*onepixel,y+onepixel*12,onepixel*2,onepixel);
fill(goggle);
rect(x+5*onepixel,y+onepixel*12,onepixel,onepixel);
fill(eye);
rect(x+6*onepixel,y+onepixel*12,onepixel,onepixel);
fill(outline);
rect(x+7*onepixel,y+onepixel*12,onepixel*2,onepixel);
fill(eye);
rect(x+9*onepixel,y+onepixel*12,onepixel,onepixel);
fill(goggle);
rect(x+10*onepixel,y+onepixel*12,onepixel,onepixel);
fill(outline);
rect(x+11*onepixel,y+onepixel*12,onepixel*2,onepixel);

//line13
fill(minionskin);
rect(x+3*onepixel,y+onepixel*13,onepixel*3,onepixel);
fill(goggle);
rect(x+6*onepixel,y+onepixel*13,onepixel,onepixel);
fill(eye);
rect(x+7*onepixel,y+onepixel*13,onepixel*2,onepixel);
fill(goggle);
rect(x+9*onepixel,y+onepixel*13,onepixel,onepixel);
fill(minionskin);
rect(x+10*onepixel,y+onepixel*13,onepixel*3,onepixel);

//line14
fill(minionskin);
rect(x+3*onepixel,y+onepixel*14,onepixel*4,onepixel);
fill(goggle);
rect(x+7*onepixel,y+onepixel*14,onepixel*2,onepixel);
fill(minionskin);
rect(x+9*onepixel,y+onepixel*14,onepixel*4,onepixel);

//line15
fill(minionskin);
rect(x+3*onepixel,y+onepixel*15,onepixel*10,onepixel);

//line16
fill(minionskin);
rect(x+3*onepixel,y+onepixel*16,onepixel*10,onepixel);

//line17
fill(clothes);
rect(x+3*onepixel,y+onepixel*17,onepixel,onepixel);
fill(minionskin);
rect(x+4*onepixel,y+onepixel*17,onepixel*8,onepixel);
fill(clothes);
rect(x+12*onepixel,y+onepixel*17,onepixel,onepixel);

//line18
fill(minionskin);
rect(x+3*onepixel,y+onepixel*18,onepixel,onepixel);
fill(clothes);
rect(x+4*onepixel,y+onepixel*18,onepixel,onepixel);
fill(minionskin);
rect(x+5*onepixel,y+onepixel*18,onepixel*6,onepixel);
fill(clothes);
rect(x+11*onepixel,y+onepixel*18,onepixel,onepixel);
fill(minionskin);
rect(x+12*onepixel,y+onepixel*18,onepixel,onepixel);

//line19
fill(minionskin);
rect(x+3*onepixel,y+onepixel*19,onepixel*2,onepixel);
fill(clothes);
rect(x+5*onepixel,y+onepixel*19,onepixel*6,onepixel);
fill(minionskin);
rect(x+11*onepixel,y+onepixel*19,onepixel*2,onepixel);

//line20
fill(minionskin);
rect(x+3*onepixel,y+onepixel*20,onepixel*2,onepixel);
fill(clothes);
rect(x+5*onepixel,y+onepixel*20,onepixel*6,onepixel);
fill(minionskin);
rect(x+11*onepixel,y+onepixel*20,onepixel*2,onepixel);

//line21
fill(minionskin);
rect(x+3*onepixel,y+onepixel*21,onepixel,onepixel);
fill(clothes);
rect(x+4*onepixel,y+onepixel*21,onepixel*8,onepixel);
fill(minionskin);
rect(x+12*onepixel,y+onepixel*21,onepixel,onepixel);

//line22
fill(minionskin);
rect(x+3*onepixel,y+onepixel*22,onepixel,onepixel);
fill(clothes);
rect(x+4*onepixel,y+onepixel*22,onepixel*8,onepixel);
fill(minionskin);
rect(x+12*onepixel,y+onepixel*22,onepixel,onepixel);

//line23
fill(outline);
rect(x+3*onepixel,y+onepixel*22,onepixel,onepixel);
fill(clothes);
rect(x+4*onepixel,y+onepixel*22,onepixel*8,onepixel);
fill(outline);
rect(x+12*onepixel,y+onepixel*22,onepixel,onepixel);

//line24
fill(outline);
rect(x+2*onepixel,y+onepixel*23,onepixel*2,onepixel);
fill(outline);
rect(x+5*onepixel,y+onepixel*23,onepixel*2,onepixel);
fill(outline);
rect(x+9*onepixel,y+onepixel*23,onepixel*2,onepixel);
fill(outline);
rect(x+12*onepixel,y+onepixel*23,onepixel*2,onepixel);

//line25
fill(outline);
rect(x+4*onepixel,y+onepixel*24,onepixel*3,onepixel);
fill(outline);
rect(x+9*onepixel,y+onepixel*24,onepixel*3,onepixel);

}
``````

## Jiyoung Ahn_04_Looking Outwards

Ryoji Ikeda/ Data Matrix / 2010

Ryoji Ikeda is one of my favorite artists, and he is a really well-known micro sound musician, and currently lives in New york. Because of his installations, he is now also well-known as an artist.

Micro sound fields were commonly referred as ‘white noise’ and they are used as a therapy. Ikeda uses sine wave in order to present mathmatical patterns and pure electronic sounds.

His album [+/-] is one of the most famous albums, and it was sensational because he got rid off melody, and expressed music using low frequency sound.

He made his installation work very interactively, so that people actually feel like that they are merged with the art piece, and screens with motion attracts and collaborates with the mysterious sound really well.

Data Matrix w/o motion graphic

## Jiyoung Ahn _ String Art

``````
var num = 250;
var aS;//angle of the shape
var increment; //increase of spacing
var radS; //spiral shape
var xI; //x increment
var yI; //y increment
var col1; //first color
var col2; //second color
var moX; //mouse
var moY; //mouse

function setup() {
createCanvas(640, 480);
increment = 5;
background('lightgreen');
col1 = color('yellow');
col2 = color('lightpink');

}

function draw() {
noStroke();
ellipse(0,400,260,260);
fill('white');

ellipse(560,0,220,220);
fill('white');

ellipse(210,120,180,180);
fill('white');

ellipse(490,500,320,320);
fill('white');

if(mouseX != moX) {
var xI = width/2
var yI = height /2
for (var i = 1; i < num; i++){
aS = i * increment;
mult = i/num;

x = width/2 + cos(aS) * radS;
y = height/2 + sin(aS) *radS;

stroke(lerpColor(col2, col1, mult));
strokeWeight(0.5);
line(xI, yI, x,y);
xI = x;
yI = y;
}

for (var i = 1; i < num; i++){
aS = i * increment;
mult = i/num;

x = width/2 + cos(aS) * radS;
y = height/2 + sin(aS) *radS;

stroke(lerpColor(col2, col1, mult));
strokeWeight(0.03);
line(xI+80, yI+80, x+80,y+80);
xI = x;
yI = y;
}
for (var i = 1; i < num; i++){
aS = i * increment;
mult = i/num;

x = width/2 + cos(aS) * radS;
y = height/2 + sin(aS) *radS;

stroke(lerpColor(col2, col1, mult));
strokeWeight(0.03);
line(xI-80, yI-80, x-80,y-80);
xI = x;
yI = y;
}

}
}

``````

I tried to create string art based on a pentagon shape, and I added white ellipse shapes as a background pattern.

## Jiyoung Ahn – 03 – Dynamic drawing

I tried to review things that I have learned. I created a pattern, and tried to show different effects like color,scale change by using one interaction (by just moving x-axis cursor).

``````//Jiyoung Ahn
//section A
//jiyounga@andrew.cmu.edu
//project 03

var intervX = 60;
var intervY = 60;
var Xspace = 35;
var Yspace= 35;

var crvd1 = 0;
var crvd2 = 10;
var crvd3 = 20;
var crvd4 = 30;

var rectS1 = 10;
var rectS2 = 20;
var rectS3 = 30;
var rectS4 = 40;

var dir = 1;
var speed = 5;
var diam = 50;

var rectt= 2;

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

}

function draw() {

var colorOne = map(mouseX, 246, height, 246,235,159);
var colorTwo = map(mouseX, 114, height, 159,208,246);
var colorThree = map(mouseX, 76, height, 196,246,159);

background(colorOne,colorTwo,colorThree);// color background change

var x = 300;
var dir = 1;
var speed = 5;

for (var y = 0; y < 6; y++) {
if ( y % 2== 0){
for (var x =0; x <11; x++){
var my = Yspace + y * intervY;
var mx = Xspace + x * intervX;
noStroke ();
rectMode (CENTER);
deg = radians (30);

fill (135,192,250);
rect (mx, my, rectS4, rectS4, crvd1);

fill (170,204,239);
rect (mx, my, rectS3, rectS3, crvd2);

fill (249,253,143);
rect (mx, my, rectS2, rectS2, crvd3);

fill (255);
rect (mx, my, rectS1, rectS1, crvd4);

rotate(radians(map(mouseX, 0, height, 0, rectt)));// rotates when move mouse to X axis.
}
}

else {

for (var x = -10; x< 10; x++){
var my = Yspace+ y * intervY;
var mx = intervX/2 + Xspace + x * intervX

fill (255, 171, 230);
rect (mx, my, rectS4, rectS4);

fill (251,209,239);
rect (mx, my, rectS3, rectS3);

fill (177,221,160);
rect (mx, my, rectS2, rectS2);

fill (255);
rect (mx, my, rectS1, rectS1);

}

}
if ((mouseX>80) & (mouseX<340)){
crvd4= map(mouseX,280,580,150,300);
rectS4= map(mouseX,280,580,45,100);
}  //pink, blue squares expand when you move mouse left to right

}
}``````

It was quite a challenge for me to create a pattern with six lines. I had to figure out how to place them continuously.

## JiyoungAhn-03-Looking outwards

This artpieces just blew my mind when I first saw it. They are sculptures that are created by Anthony Howe. I was really surprised that these sculptures are moving by kinetic wind, and the movement is so lively that I could not believe that these are made by stainless steel. They weigh up to 1,600lbs, and because they are too heavy and huge, he had to test them if they actually work by computer program.(CAD) He tried to express the vivid movement as lively as possible, and for some of his works, he wanted to express natural movements without any electronic features.

Howe tested his sculptures by driving down the freeway. He wanted his sculptures to be strong enough to tolerate wind.

He did not explain how each pieces of sculpture is designed and built, however each pieces have their own curved shape in order to show vivid movement when it is attached all together.

Di-Octo. All stainless steel kinetic wind sculpture. Silent operation. 25’6″h x 10’w x 4’6″”d (7.8m h x 3m w x 1.4m d) 1,600lbs (725kg)

In Cloud III. 7.6 meter tall all stainless kinetic wind powered sculpture. Engineered for extreme high winds yet spins in 2mph. (25′ h x 10’w x 5’d, 1,500lbs), shown here not on pedestal.

This is a video that shows an actual movement of a sculpture.