Author: Sharon

dayoungl Project -07

sketch

//Sharon Lee
//Section E
//dayoungl@andrew.cmu.edu
//Assignment 07-C
var h = 280;
var v = 5;
var dirX = 1;
var wall1 = 60;
var wall2 = 340;
var xarray = [];
var yarray = [];
var rings = 10;
var counts = [];
var circles = [];

var xs = []
var ys = []
var is = []

function setup() {
  createCanvas(400,400);
  // angleMODE(DEGREES);
  frameRate(8);
}

function draw() {
  ripples();
  for(i = 0; i< counts.length;i++){
    counts[i]++;
  }
  if(counts[0]>rings){
    counts.splice(0,1);
    xarray.splice(0,1);
    yarray.splice(0,1);
  }
 
}

function ripples() {
  background(100);
  //rectangle
  push();
  rectMode(CENTER);
  stroke(122,203,241);
  strokeWeight(4);
  noFill();
  rect(width/2, height/2,h,h);
  //set the number of the ripples
  for (i = 0; i < xarray.length; i ++){
    
    //draw ripples
    stroke(122,203,241);
    noFill();
    // var m = map(mouseX, 0, width, 25, 75);
    //constrain the ripples inside the square
    var xc = constrain(xarray[i], wall1, wall2);
    var yc = constrain(yarray[i], wall1, wall2);
    xs.push(xc);
    ys.push(yc);
    is.push(counts[i]);
    //ellipse(xc,yc,50 * counts[i], 50 * counts[i]);
  }

  for (i = 0; i < xs.length; i++) {
    ellipse(xs[i],ys[i],50 * is[i], 50 * is[i]);
  }

  pop();
  fill(100);
  noStroke();
  rect(0,0,wall1,height);
  //create bounding box
  //right bouding box
  rect(wall2,0,wall1,height);
  //left bounding box
  rect(height,0,width,wall1);
   //top bounding box
  rect(0,0,width,wall1);
  //bottom bounding box
  rect(0,wall2,width,wall1);
}

function mousePressed() { 
  counts.push(0);
  xarray.push(mouseX);
  yarray.push(mouseY);
}

// function mouseDragged() {
//   ripples (mouseX, mouseY);
// }

I wanted to represent ripples. As mouse is clicked, the ripples appear on the screen and overlap on top of each other.

dayoungl Looking Outwards – 07

Map of seoul represented through patterns
Map of Venezia represented through texts and pictograms of tourist attractions and architectures
Map of Amazon River, Brazil represented in terms of the degree of deforestation

Map of Ozeros (lakes in Russian)

Map is one of the most notable use of information visualization in a way that it is a combination of information based on carefully formulated intention and utility. For creating a map, designers need to take multiple things into consideration: the quality of aesthetics, readability, and most importantly, delivery of information. For this week’s looking outwards, I looked into graphic maps created by Amoeba Group based in Seoul, Korea. Amoeba Group focuses on data visualization, specializing in transferring the data onto a two-dimensional map.

From an interview of CEO of Amoeba Group I found on the web, he states that they first refer to google Earth and Open Street Maps to figure out the the tiniest alleys and streets names when studying the geographical data. Then, they move on to learn about the traditional map-making process, understanding the logistics and the characteristics of maps. Once that’s finished, they move on to understanding the specific geographical and cultural significance of the region of the map.

I found this map project particularly interesting because; first, I was very drawn to the graphic quality of the project; second, map is an area of data visualization that I seemed to have overlooked.

dayoungl Project 06

sketch

//Sharon Lee
//dayoungl@andrew.cmu.edu
//Section E
//Project-06
var d = 15;
var r = 0;
var g = 0;
var b = 0;
function setup() {
    createCanvas(450,450);
}

function draw(){
    background(255);
    fill(0, 10);
    stroke(0, 160);
    var H = hour();
    var M = minute();
    var S = second();
    // rectangle rotates by seconds
    translate(width/2, height/2);
    for (i = 0; i < S; i++) {
        push();
        rotate(i / 6.0);
        scale(i / 10.0);
        stroke(r,g,b);
        r = i * 10;
        b = i * 4;
        rect(0, -50, 10, 50);
        // print(S);
        pop();
    }
    //displays time
    var lo = height/2;
    textSize(20);
    textAlign(CENTER);
    fill(0);
    noStroke();
    text(H + " : ", 40, lo);
    text(M + " : ", 80, lo);
    text(S, 120, lo);

    // for (i = 0; i < H; i ++){
    //     r = 240;
    //     g = 240;
    //     b = 240;
    //     background(r,g,b);


}

    // var mappedH = map(H, 0,23, 0, width);
    // var mappedM = map(M, 0,59, 0, width);
    // var mappedS = map(S, 0,59, 0, width);

//     for (j = 0; j < 6; j ++){
//         for (i = 0; i <= S; i++){
//             stroke(r,g,b);
//             strokeWeight(2);
//             r = i * 5;
//             g = i * 3;
//             // line(10 * i, 100 * j, 10 * i, 150);
//             ellipse(10 * i, 10 * j, 50, 50);
//         }     
//     }
// }
//     for (i = 0; i <= M; i ++){
//         ellipse(10 * i, 10 * j, 50, 50);


//     }
    //second
//     for (i = 0; i < 6; i ++){
//         for(j = 0; j < 10; j ++){
//             // happy = [60 * j];
//             // sad = [60 * i];
//             push();
//             translate(40,40);
//             noStroke();
//             for (k = 0; k < S; k ++){
//                 fill(255);
//                 ellipse (20 * i, 60, d,d);
//             pop();
//             }
//         }
//     }    
// }       
    

    //Display the ellipses
    //ellipses change colour as time passes
    // for (i = 0; i < 24; i ++){
    //     var mappedH = map(H, 0,23, 0, d);
    //     fill(255);
    //     // r -= hour(-50);

    // }
    // for (i = 0; i < 24; i ++){
    //     var mappedM = map(M, 0.59, 0, d);
    //     fill (255,237,68);
    //     r = 255;
    //     g = 237;
    //     b -= 50;        
    //     ellipse(width/3 + 100, 100, d, d);
    // }
    // for (i = 0; i < 60; i ++){
    //     map (S, 0.59, 0, d); 
    //     fill(r,g,b);
    //     r = H - 5;
    //     g = H - 5;
    //     b = H - 5;
    //     ellipse(width/3 + 250, 100, d, d);
    // }

dayoungl Looking Outwards -06

Second Voyage to Italy (second version), 1962 SFMOMA

For this week’s topic on “randomness”, I chose to write about artist Cy Twombly. Cy Twombly is a famous American painter who is known for his stylistic freely-scribbled, graffiti-like, large-scale paintings. Twombly drew inspiration from mythological stories and expanded it into his own way of representing a cultural memory. Just like the painting above, his paintings are compose of variety of colour palette. However, oddly all the colours come together and create an unique harmony; not one colour seem to pop predominantly and overpower the other strokes on the canvas but every strokes are in perfect harmony. Perhaps, this is the point where we should be asking ourselves about where to draw the line between randomness and intentionalness in his painting. Even though the strokes he painted on were random, his colour choice may not have been. To apply this on my creative process, I think this made me thought about where my subconscious is based on: What I think is random, is it really random?

dayoungl Looking Outwards -05

I wasn’t very familiar with 3d graphic artists so I had to do some google search to look for interesting artworks. Among the artists I found Daniel Aristizabal’s artworks most intriguing. Aristizabal is a Colombia-based artist who describes his works as “pop surrealism”. He is a fan of bold colour contrasts, scientific references, and geometric shapes. He makes use of everyday objects and turns them into something surreal and interesting. Aristizabal explains that he considers sketching process in his notebook the most important part of his art-making process; despite the 3d tools he can take advantage of, Aristizabal states that he likes the feeling of brainstorming with paper and pencil. Then, the artist use a computer program, Cinema 4D, to visualize his sketches.

I think 3D in the same way I think illustration. I start to doodle around a concept. Words, sketches, random thoughts. Whatever pops into my mind, I draw it on my notepads. After that I know what elements I need to create on Cinema 4D. A lot of the stuff I use is based on imagery and objects that I had when I was a little kid—finally I’m able to get that out into the world.

dayoungl: Project -05

sketch

//Sharon Lee
//Section E
//dayoungl@andrew.cmu.edu
//Project 05
function setup() {
    createCanvas(400, 400);
    background(156,255,228);
    var tw = 60;
    var th = 40;
    var oy = 30;
    var ox = 30;
    var z = 10;
    var d = 30;
    //rows
    for (var y = 0; y < 8; y += 1) {
        //columns
        for (var x = 0; x < z; x += 1) {
            //
            var py = oy + y * th;
            var px = ox + x * tw;
            if (y % 2) {
              z = 9;
              stroke(0);
              strokeWeight(5);
              fill(229,223,73);
              stroke(255);
              line(px-30, py, width-20, py);
              rectMode(CENTER);
              rect(px + 30, py, d, d);
              
            } else { 
              z = 10;
              noStroke();
              fill(255,70,138);
              // ellipse(px ,py , d, d);
            }
        }
    }
    noLoop();
}

I worked with simple geometric shapes to create this wallpaper. I was inspired by some of the art-nouveau wallpapers which focused on shape of the plants. The yellow square is an abstract representation of leaves.

dayoungl – LookingOutwards 04

http://www.norment.net/work/sonic-performance-ind/rapture/

Camille Norment is an Oslo-based multimedia artist who works with sound, installation, sculpture, drawing, performance and video. For her piece, “Rapture”, she utilizes 12 voice chorus, glass armonica tones, and audio devices. According to the artist, ‘Rapture’ is a three-part project consisting of 1) a solo exhibition in the Nordic Pavilion, 2) a series of sonic performances unfolding from physical and referential elements within the installation, and 3), a three-part publication that explores the greater context of the investigation through a variety of essays relating sound to the body and society. Mainly, the artist explores the tension of constantly changing time and uncertainty of times. ‘Rapture’ uses vibrations (sound waves) for a phenomenological and socio-political reflection upon the body and mind’s relationship to trauma, ecstasy and the state of becoming. The body of the pavilion itself is subject to this experience, allowing visitors to witness, and enter within a body suspended in a state of excitation. Through this piece, visitors walk into a space of contrasting values: body of art in order and in chaos; art in harmony and in dissonance.

dayoungl Project 04

sketch

//Sharon Lee
//dayoungl@andrew.cmu.edu
//Section E
//Project 4
var ychange = 30;
var xchange = 10; 
var x1 = 1;
var x2 = 150;
var x3 = 100;
var y1 = 200;
var y2 = 1;
var y3 = 55;
var r;
var g;
var b;
function setup(){
	//randomzied colour
	r = random(255);
	g = random(255);
	b = random(255);
	createCanvas(300,400);	
}

function draw() {
	background (255);
	for(var i = 0; i < 100; i +=1){
		strokeWeight(0.5);
		stroke(0);
		line(x2, mouseY, 300 , ychange *i);
		line(x2, mouseY, 0 , ychange *i);
		stroke(r,g,b);
		strokeWeight(1);
		line(mouseX, ychange * i, xchange * i, y2); 
		line(x2, y1, 300, ychange *i);
		line(x2, y1, 0, ychange * i);
	}
}

//when mouse is clicked, string changes colour
function mousePressed (){
	stroke(r,g,b);
	r = random(255);
	g = random(255);
	b = random(255);
}

I wanted to make my string art minimal as possible because I like minimalistic art. I like the fact that this looks like a graphic poster.

dayoungl – Project03

sketch

// Sharon Lee
// Section E
// dayoungl@andrew.cmu.edu
// Project-03
var colour1 = 255;
var colour2 = 235;
var colour3 = 107;
var angle = 0;
var x = 350;
var y = 350;
var dirX = 1;
var dirY = 0.3;
var speed = 5;
var cirSize = 80;
var point1 = 650;
var point2 = 350;
var point3 = 50;
var front = 1;
var count = 0;

function setup() {
    createCanvas(640,480);
    angleMode(DEGREES);
}
function draw() {
    background(0);
    rectMode(CENTER); 
    //moon 1 in front of the planet
    if (front == 1){
        //planet
        fill(colour1,colour2,colour3);
        noStroke();
        ellipse(width/2 +50, height/2, 300,300);
        //moon1
        fill(colour1);
        noStroke();
        ellipse(x, height/2, cirSize, cirSize);
    }
    //moon 1 behind planet
    if (front == 0){
        //moon1
        fill(colour1);
        noStroke();
        ellipse(x, height/2, cirSize, cirSize);
        //planet
        fill(colour1,colour2,colour3);
        noStroke();
        ellipse(width/2 +50, height/2, 300,300);
    }
    //stars that follow mouseX and mouseY
    push();
    angle = angle + 50;
    translate(mouseX,mouseY);
    stroke(139,94,193);
    strokeWeight(10);
    rotate(angle);
    rectMode(CENTER);
    rect(0, 0, 40, 30);
    rotate(angle);
    rect(0, 0, 40, 30);
    rotate(angle);
    rect(0, 0, 40, 30);
    pop();

    //star2
    push();
    angle += 1;
    translate(mouseX -60, mouseY -60);
    stroke(73,50,102);
    strokeWeight(7);
    rotate(angle);
    rect(0,0,10,20);
    rotate(angle);
    rect(0,0,10,20);
    rotate(angle);
    rect(0,0,10,20);
    pop();

    //star3
    fill(73,111,102);
    noStroke();
    ellipse(mouseX, mouseY -100, 10,10);
    //star4
    ellipse(mouseX, mouseY,8,8);
    //star5
    ellipse(mouseX-80, mouseY-55, 15,15);
   
    //location of moon1
    if (x <= point1){  
        x += dirX * speed;
    }
    if (x <= point1 & x >= 350){
        cirSize -= 1;
    }
    if (x <= 350 & x >= point3){
        cirSize += 1;
    }
    if (x >= point1) {
        dirX = -dirX;
        front = 0;
    }
    if (cirSize <= 350 & x <= point3) {
        dirX = -dirX;
        front = 1;
        count += 1;
    }

    // planet changes color every revolution
    if (count % 10 == 1) {
        colour1 = 255;
        colour2 = 235;
        colour3 = 68;
    }
    if (count % 10 == 2) {
        colour1 = 255;
        colour2 = 215;
        colour3 = 68;

    }
    if (count % 10 == 3) {
        colour1 = 255;
        colour2 = 195;
        colour3 = 68;
    } 
    if (count % 10 == 4) {
        colour1 = 255;
        colour2 = 180;
        colour3 = 68;
    }
    if (count % 10 == 5){
        colour1 = 255;
        colour2 = 165;
        colour3 = 68;
    }
    if (count % 10 == 6){
        colour1 = 255;
        colour2 = 150;
        colour3 = 68;
    }
    if (count % 10 == 7){
        colour1 = 255;
        colour2 = 135;
        colour3 = 68;
    }
    if (count % 10 == 8){
        colour1 = 255;
        colour2 = 120;
        colour3 = 68;
    }
    if (count % 10 == 9){
        colour1 = 255;
        colour2 = 105;
        colour3 = 68;
    }
}

Orbital system
I wanted to make an image of moon orbiting the planet along with with other visual decorations that move around as the mouse moves. I had difficulty making the moon go behind the planet every revolution but I eventually figured it out.

dayoungl – LookingOutwards 03

 

Iris Van Herpen SS11 <Crystallization> runway
Iris Van Herpen SS11 – Water Dress

Iris Van Herpen is a fashion designer who experiments with wide variety of subjects materials to fabricate her garments. Transforming industrial materials such as epoxy to high-end fashion, Harpen plays between the realm of fashion and technology. I first saw Iris Van Herpen’s work exhibited at Carnegie Museum of Art. When I entered the exhibition hall, I saw dresses that were unconventional and stunning- dresses that I have never seen elsewhere. Her dresses were not made from fabrics like other designers. Among her many dresses, I was especially drawn to her water dresses. Her water dresses were part of her couture series “Crystallization”, which inspired by the collaboration work between Herpen and Benthem Crouwel Architect. 

Benthem Crouwel’s design for a new extension to Amsterdam’s Stedelijk Museum had earned the nickname ‘bath tub’. This inspired Van Herpen to design a dress that would fall around the wearer like a splash of water, like being immersed in a warm bath, and to express in the collection the different states, structures and patterns of water. Noteworthy is that in this collection Van Herpen presents her first 3D-print that she created in collaboration with the London-based architect Daniel Widrig and that was printed by .MGX by Materialise.

Water dresses have very organic shape to them. However, they were intricately planned out for 3d prototyping. From the notes I took from the visit to the CMOA, she faced multiple difficulties and finding an adequate material that could be used for fabrication of this dress was one of them. I believe the material used for the water dresses was acrylic. I was able to find Herpen’s interview on this. When asked about the the procedures of making her water dresses, she commented “It’s a type of acrylic made especially for me that stays transparent after you heat it up. You heat it with hot-air guns and then transform the shapes with metal pliers. It has its own mind and you can never have full control over it. But I really like that. You almost have a relationship with it. I’m doing a project in March with SHOWstudio where I will show how it’s made.” (http://www.dazeddigital.com/fashion/article/15493/1/qa-iris-van-herpen). She also states that she was first drawn to 3d printing technology because she liked the visualization process from her design for the human body, which is 3d, to 3d prototypes rather than having to transfer her design to 2d sketches, and then to 3d form.