Author: jiyounga@andrew.cmu.edu

Jiyoung Ahn_Looking Outwards_07

windmapAfter 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.
wind_isaac_zoom

(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/

%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-10-14-1-47-34-pm

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

sketch

//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. astroidradialcurve_800%e1%84%89%e1%85%b3%e1%84%8f%e1%85%b3%e1%84%85%e1%85%b5%e1%86%ab%e1%84%89%e1%85%a3%e1%86%ba-2016-10-14-6-15-41-pm

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.

spiral-glass-sculpture-dale-chihuly

This art work is located in Phipps conservatory.

chihuly

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

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

sketch

//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

o-cgi-saya-570There 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. _________2016-09-0918-03-51-jpgcy9kq1ou0aage8tSaya 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.

254296de07591e0bbbd923b4598b6bf4

sketch

//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

sketch


var num = 250;
var aS;//angle of the shape 
var increment; //increase of spacing
var radi; //radius
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);
    radi = (width/2)-40;
    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;
          radS = mult * radi;

          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;
          radS = mult * radi;

          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;
          radS = mult * radi;

          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).

sketch

//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.

howe-2howe-1

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.