Author: yoonseo1@andrew.cmu.edu

Yoonseo1 -Looking outwards 02 :Generative Art

City Icon developed by Marcin Ignac

It is a generative animation on the panels based on the mix of the intersecting system within the city. Recently, in my architecture studio project, I have been working on site analysis. This project just gave me more perspective on how to express and illustrate mundane conditions such as traffic, water flows, and etc. On the website he describes that bespoke application was develop to run and test the generative animation. The amount the data research went in is impressive, but what I admire the most is the beauty of the expression on the exhibit. the lights are contrasting amazingly well with the background. Not only the simple lines are animated but also the water flow, radius of data, and other interesting features are displayed. In order for this to be generated, I think there needs to be a basic knowledge on the animation program and lots of practice in visualization of data, which is one of the hardest part of my site analysis in architecture studio.

Yoonseo1 – Variable Faces -Project 2

Face Dave

//Yoonseo(Dave) Choi
//Section B 
//yoonseo1@andrew.cmu.edu
//Project-Variable Face
function setup() {
    
    createCanvas(640,480);
    background(100);
}
var val = 0; //define for the face rotation factor
var colorV = 0;// color variable define
var d = 1; // dividing factor define
var St = 0; // Stroke color factor define
function draw() {

}
function mouseClicked() {
    colorV = random(100,230);// change of background color
    division = random(1,16);//change of dividing factor
    St = random(0,255);// change of stroke color 
    if (val <= 0){
        background(colorV/d,colorV/d,colorV/2*d)
        push(new Face1);
        val += 1;
    } else {
    if (val == 1) {
        background(colorV/3*d,colorV/d,colorV);
        push(new Face2);
       val += 1;
    } else
    if (val == 2){
        background(colorV,colorV/d,colorV/d*4);
        push(new Face3);
       val += 1;;
    }else {
        if (val == 3){
        background(colorV/d,colorV,colorV/d*2);
        push(new Face4);
       val =0;
        }
        
    }
    }
 
  
 
}
//Face 1 
function Face1() {

    //left Face 
    //facial shape
    stroke(St/d*2,St,St/d*9) //stroke color for the faces

    strokeWeight(1);
    noFill();
    beginShape();
    vertex(177.91,184.25);
    quadraticVertex(155.28,181.5,139.25,182.41);
    quadraticVertex(129.75,184.5,121.5,186.58);
    endShape();
    line(121.5,186.58,107.08,201.16);
    line(107.08,201.16,100.91,220.91);
    line(100.91,220.91,102.58,225.91);
    line(102.58,225.91,90.58,241.41);
    //tip of nose
    beginShape();
    vertex(89.75,243.08);
    quadraticVertex(93.41,247.25,92,246);
    endShape();
    beginShape();
    vertex(93.41,243.08,);
    quadraticVertex(96.75,243,99.58,243.08);
    vertex(99.58,243.08);
    endShape();
    //starting lip and chin
    line(97.75,248.91,95.58,253.08);
    //lips
    beginShape();
    vertex(96.5,257.41);
    quadraticVertex(103.08,254.91,105.5,255.25);
    vertex(108.41,255.91);
    endShape();
    //chin
    beginShape();
    vertex(96.5,260.08);
    quadraticVertex(99.58,266.91,100.58,266.91);
    quadraticVertex(98.06,271.75,97.75,272.5);
    vertex(101.25,278.08);
    endShape();
    //neckand chin
    beginShape();
    vertex(120.08,284.08);
    quadraticVertex(103.66,279.33,103.66,279.33);
    quadraticVertex(126.25,259,135.25,255.76);
    vertex(148.58,252.08);
    endShape();
    line(126.75,284.08,143.91,295.75);
    //back of head and ears
    line(180.25,184.91,197.58,208.41);
    beginShape();
    vertex(196.75,223.91);
    quadraticVertex(189.25,234.25,184.75,248.5);
    vertex(192.41,261.58);
    endShape();
    //ears
    beginShape();
    vertex(167.91,208.41);
    quadraticVertex(174.25,213.75,171.25,223.25);
    quadraticVertex(167,234.5,158.91,230.41);
    vertex(160.75,221.5);
    endShape();
    //eyes
    beginShape();
    vertex(106.08,222.91);
    quadraticVertex(109.5,223.5,114.25,223.08);
    quadraticVertex(114.25,223.08,117.5,221);
    vertex(120.41,218.75);
    endShape();
}
function Face2(){
   strokeWeight(1);
    noFill();
    //head shape
    beginShape();
    vertex(296.25,253.08)
    quadraticVertex(296.25,237.25,300,220.25);
    quadraticVertex(300,220.25,289.25,192.25);
    quadraticVertex(289.25,192.25,258,184.91);
    quadraticVertex(237,190.25,212,204.25);
    quadraticVertex(204.25,216,199.5,234.49);
    quadraticVertex(199.5,234.49,199.25,243.25);
    vertex(202.25,251);
    endShape();
    //nose and eyes
    beginShape();
    vertex(201.75,253.25);
    quadraticVertex(202.75,252.25,209,262.75);
    quadraticVertex(209,262.75,211,266);
    endShape();
    //eyes
    beginShape();
    vertex(209.41,257.41);
    quadraticVertex(209.41,257.41,212.75,257.41);
    endShape();
    beginShape();
    vertex(226.41,261.58);
    quadraticVertex(226.41,261.58,230.25,262.5);
    vertex(238.91,259.08);
    endShape();
    //top of nose
    beginShape();
    vertex(218.5,246);
    quadraticVertex(218.5,246,214,271);
    quadraticVertex(214,271,198.5,294.5)
    endShape();
    beginShape();
    vertex(202,295.5);
    quadraticVertex(202,295.75,214.5,288);
    quadraticVertex(214.5,286,220.5,280);
    vertex(224.75,275.13);
    endShape();
    //lips
    beginShape();
    vertex(218.58,281.75); 
    quadraticVertex(218.58,281.75,221.58,285.91);
    quadraticVertex(221.58,285.91,231.5,281.5);
    vertex(241.08,284.33);
    endShape();
    beginShape();
    vertex(226.41,289.08);
    quadraticVertex(229,288.75,233.58,286.75);
    endShape();
    beginShape();
    vertex(224.75,289.91);
    quadraticVertex(226.75,293.5,228.5,297);
    quadraticVertex(228.5,297,237.75,298.25);
    quadraticVertex(237.75,298.25,247,296);
    vertex(278.41,274.08);
    endShape();
    //neck
    line(233.58,298.78,238,308);
    beginShape();
    vertex(296.25,241.41);
    quadraticVertex(302,253.5,313.25,263.5);
    endShape();
    //ears
    beginShape();
    vertex(272.75,252.25);
    quadraticVertex(276.5,263,282,263.5);
    quadraticVertex(282,263.5,287.5,242.25);
    quadraticVertex(287,235.5,280.75,234.25);
    vertex(271.5,238.5);
    endShape();

}
function Face3() {
    noFill();
    //hair
    beginShape();
    vertex(336,262);
    quadraticVertex(336,262,326.25,252.08);
    quadraticVertex(325.273,218,336.25,205.58);
    quadraticVertex(335.258,204.027,338.25,200.58);
    quadraticVertex(338.25,200.58,356,187.5);
    quadraticVertex(356,187.5,386.5,184);
    quadraticVertex(386.5,184,401.41,193.08);
    quadraticVertex(401.41,193.08,412.58,209.75);
    quadraticVertex(412.58,209.75,421.91,225.41);
    quadraticVertex(421.91,225.41,420.75,244);
    vertex(409.33,260.33);
    endShape();
    beginShape();
    vertex(335,221);
    quadraticVertex(343,204.667,354.667,202);
    quadraticVertex(362.667,202.333,376.91,200.5);
    quadraticVertex(380.667,200.667,403.5,208.41);
    quadraticVertex(407,212.667,413.44,223.91);
    quadraticVertex(413.667,241.667,409.667,254);
    quadraticVertex(408,262,400.91,277.91);
    quadraticVertex(389.3,275.66,375.3,271.3);
    quadraticVertex(368,271.33,344.41,277.91);
    quadraticVertex(340,269,332,251);
    quadraticVertex(331,244.33,333.41,226.75);
    endShape();
    //neck
    beginShape();
    vertex(346.75,278.08);
    quadraticVertex(348.667,279,349.833,279.75);
    vertex(353.55,292.08);
    endShape();
    beginShape();
    vertex(396.667,278);
    quadraticVertex(395.33,282.5,394.08,295.58);
    endShape();
    //eyes
    beginShape();
    vertex(344.87,213);
    quadraticVertex(353.24,213.25,366.25,210.25);
    endShape();
    beginShape();
    vertex(381,209.75);
    quadraticVertex(387.5,212.5,400.9,213.96);
    endShape();
    //nose
    line(371.25,206.91,371.25,226.75);

    beginShape(); 
    vertex(375.08,210.4);
    quadraticVertex(375.5,218.167,377,226.5);
    vertex(378.75,230.75);
    endShape();
    beginShape();
    vertex(363.75,233.58);
    quadraticVertex(369,230.58,375.667,230.667);
    vertex(378.75,233.667);
    endShape();
    //mouth
    beginShape();
    vertex(368.833,245.167);
    quadraticVertex(380.667,243.833,390.97,242.41);
    quadraticVertex(387.33,246.5,382.08,250.75);
    quadraticVertex(363.667,250,354.66,245.32);
    quadraticVertex(353.667,243.167,361.33,244.667);
    vertex(370.25,245.25);
    endShape();
}
function Face4(){
    noFill();
    //head shape
    beginShape();
    vertex(426.91,239.2);
    quadraticVertex(434,208,445.91,191.58);
    endShape();
    beginShape();
    vertex(453.75,189.08);
    quadraticVertex(472.75,186.25,483.5,187.25);
    quadraticVertex(501.75,194,513.08,200.5);
    endShape();
    beginShape();
    vertex(513.08,202.41);
    quadraticVertex(515,211,520,215);
    vertex(525.75,218);
    endShape();
    beginShape();
    vertex(523.91,220.57);
    quadraticVertex(523.5,222.5,522.75,224.91);
    endShape();
    beginShape();
    vertex(518.41,224.91);
    quadraticVertex(521.25,227.5,524.01,230.02);
    endShape();
    //chin
    beginShape();
    vertex(526.25,239.2);
    quadraticVertex(527.25,244.5,528.41,248.75);
    quadraticVertex(530.41,251.75,530.41,259.08);
    quadraticVertex(515.75,258.25,493.25,259.75);
    vertex(475.08,263.5);
    endShape();
    beginShape();
    vertex(468.58,258.08);
    quadraticVertex(459.75,254,453.75,246.65);
    endShape();
    //neck
    beginShape()
    vertex(529.08,261.41);
    quadraticVertex(513,267.5,502.78,273.08);
    quadraticVertex(502.25,275,500.41,289.75);
    endShape();
    //eyes
    beginShape();
    vertex(477.37,208.37);
    quadraticVertex(485,208,489.5,209.75);
    quadraticVertex(491.25,209.25,493.5,208.47);
    endShape();
    beginShape();
    vertex(511.41,209.13);
    vertex(514.54,209.13);
    endShape();
    //nose
    beginShape();
    vertex(504.87,208.2);
    quadraticVertex(519.35,218.84,516.75,219.25);
    quadraticVertex(514.75,220.5,511.08,222.17);
    endShape();
    //mouth
    beginShape();
    vertex(504.87,233.81);
    quadraticVertex(509.25,236.5,518.25,237);
    vertex(525.62,235.41);
    endShape();

}

For this project I wanted to show the 4 different variable faces with emotions and change of colors as effect to provoke the viewers. I have set variable for the stroke line and background so when the mouse is pressed, color of whole thing changes as face rotates.

Looking Outwards-01 Yoonseo(Dave) Choi

Ever since AR(Augmented reality) was introduced, I was always fascinated with the idea of looking through different lens for amazing experience. I find all the AR art works to be very inspiring and useful. I have seen lots of videos on artists using AR as tool to bring still image come to life or even sculpture. Particular thing I find on usage of AR is that it can be cooperated easily with anyone with smartphones and Holo lens in future. It has such a potential to be used for everyday life and bring indirect experience to be more closer to each individuals.

I have tried to use the free AR kit which was ARToolkit to create my own AR, but process was rather complicated and had steep learning curve. I am sure that artists who have used the similar program has gone through many hours of figuring how to make camera recognize image and engage the viewer to it.

Here are some videos on example of AR.

This is museum in Japan, Nagoya. They have used the AR through out the whole museum to bring still images to life.

link: https://www.youtube.com/watch?v=crScMhWjHJE

Artist is unclear from the video, but we can see that arts become more engaging to the audience.

link: https://www.youtube.com/watch?v=lq8lwGnbKIc

 

yoonseo1-Project 1- Self Portrait

Dave Portrait.js

function setup() {
    createCanvas(600, 500);
    background(211,192,163);
  
}

function draw() {
    strokeWeight(0.8);
    line(202,93,165,124);
    line(199,118,152,138);
    line(180,148,152,176);
    
    //Eyes
    var c = color (57,22,15);
    fill(c);
    noStroke();
    triangle(190,190,223,185,223,195);
    triangle(223,195,223,185,253,190);
    triangle(339.52,190,364.33,185,364.33,195);
    triangle(364.33,195,364.33,185,394.52,190);
    noFill();
    var c = color (0,0,0);
    stroke(c);
    strokeWeight(4);
    //nose
    line(294.82,195,294.82,273.5);
    strokeWeight(2);
    line(308,206.33,327,278);
    strokeWeight(0.5);
    ellipse(298,283,47,4);
    strokeWeight(1.4);
    //chin
    line(180.29,334.9,273,405.5);
    line(322,403,411.2,336.9);
    //lips side
    strokeWeight(0.6);
    line(259.13,336.34,282.13,342.34);
    line(309,341,335,335);
    noStroke();
    //lips
    var c = color(169,79,79);
    fill(c);
    triangle(285.08,337.44,306.05,337.44,295.56,342.54);
    noFill();
    var c = color(0,0,0);
    stroke(c);
    //side hair
    strokeWeight(1.6);
    line(140.07,195.83,151.95,210.17);
    line(432.28,211,443.13,195);
    strokeWeight(1);
    //hair
    line(426.57,154.59,440.84,187.59);
    line(417.53,167,397.5,97);
    strokeWeight(2.2);
    line(270.63,115,241,144);
    line(294.82,162,275,154);
    strokeWeight(1.2);
    line(316.5,93,284.91,93);
    strokeWeight(1.4);
    line(232,106,188,162);
    strokeWeight(1.3);
    line(375,146,358,129);




 
   
}

For this self Portrait project, I wanted to create fragmented  geometry to express the shape of the face. I intentionally tried using few complete geometries such as rectangle, circles, and etc. I instead used variation in stroke to illustrate bit of depth.