jiheek1@andrew.cmu.edu – Page 3 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

Jihee_Project2(Face Variables)

//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//project2 face variables
//section D

var pupilRed = 226;
var pupilGreen = 172;
var pupilBlue = 75;

var ribbonRed = 255;
var ribbonGreen = 160;
var ribbonBlue = 228;

var lashHeight = 320;
var mouthWidth = 41;
var mouthHeight = 28;
var earLoc = 360;

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

function draw() {
    background(242, 187, 205);

//these variables will allow the mouse to control the pupils within the eyeball (white area)
var x = constrain(mouseX, 203.5, 216.5);
var y = constrain(mouseY, 263.5, 276.5);


    //ears
    noStroke();
    fill(239, 220, 228);
    ellipse(width/2-80, earLoc, 20, 20);
    ellipse(width/2+80, earLoc, 20, 20);

    //face
    noStroke();
    fill(239, 220, 228);
    ellipse(width/2, height/2+40, 160, 160);

    //legs
    fill(239, 220, 228);
    rect(width/2-15, height/2+200, 8, 8); //left leg
    rect(width/2+8, height/2+200, 8, 8); //right leg

    //eyes shape (white area)
    fill(255);
    noStroke();
    ellipse(210, 350, 35, 35); //left eye
    ellipse(270, 350, 35, 35); //right eye

    //pupils shape
    fill(pupilRed, pupilGreen, pupilBlue);
    noStroke();
    ellipse(x, 354, 22, 22); //left eye
    ellipse(y, 354, 22, 22); //right eye

    //mouth
    fill(0);
    noStroke();
    ellipse(240, 396, mouthWidth, mouthHeight);

    //clothes
    fill(255);
    quad(width/2-50, height/2+200, width/2-15, height/2+120, width/2+15, height/2+120, width/2+50, height/2+200); //under dress
    fill(ribbonRed, ribbonGreen, ribbonBlue);
    quad(width/2-15, height/2+120, width/2-50, height/2+200, width/2+15, height/2+120, width/2+50, height/2+200); //cape
    ellipse(width/2-22.5, height/2-40, 45, 45); //ribbon_left
    ellipse(width/2+22.5, height/2-40, 45, 45); //ribbon_right
    ellipse(width/2-11, height/2+208, 8, 8); //left shoe
    ellipse(width/2+12, height/2+208, 8, 8); //right shoe

    //lashes
    fill(0);
    stroke(0);
    strokeWeight(1);
    line(204, 332, 200, lashHeight+5); //left_first
    line(210, 332, 210, lashHeight); //left_second
    line(216, 332, 220, lashHeight+5); //left_third
    line(264, 332, 260, lashHeight+5); //right_first
    line(270, 332, 270, lashHeight); //right_second
    line(276, 332, 280, lashHeight+5); //right_third
}

function mousePressed() {
    pupilRed = random(200, 250);
    pupilGreen = random(160, 230);
    pupilBlue = random(60, 180);
    lashHeight = random(295, 320);
    ribbonRed = random (100, 255);
    ribbonGreen = random (0, 180);
    ribbonBlue = random (150, 240);
    mouthWidth = random (0, 41);
    mouthHeight = random (0, 41);
    earLoc = random (360, 370);
    }

initial stages on illustrator just for dimensions

To begin with, I sketched a faces that I wanted to code just to visualize some possible variations and used Adobe Illustrator to get the approximate dimensions. In this project, I varied the sizes and colors of facial elements and apparels. I also incorporated constrains to make the pupils more interactive.

Jihee Kim (Section D)– Looking Outwards 02

The Digital Grotesque II

Digital Grotesque II – Grotto Fragments from Digital Grotesque on Vimeo.

Digital Grotesque II is a 3D printed grotto that was assembled in 2017, after about 2 years of designing and printing individual parts. The algorithmic architectural structure created by the architect Michael Hansmeyer is known for its intricate details and plethora of geometries that form the architecture. The project is a phenomenal piece that through its complexity captivates the viewer and bestows an unparalleled experience. The project is made of 7 tons of 3D printed sandstone. For its size, it is usual for such projects to be dull and rather lofty, but Digital Grotesque II defeats such a common notion with its details completely generated by computational design and algorithms.

From the most minute details to the whole form are entirely made through algorithms in the Digital Grotesque. Although the specific divisional ratios are not specified, the project was generated through subdivisions. As you can see in the video directly below, different division ratios allow for nearly infinite possibilities, hence the dynamic, mind-blowing design of the project. Although the algorithms are surely organized and planned, the endless variations bestow an element of “randomness”.

Hansmeyer’s computational architecture is deeply rooted in perspectives and perceptions. The specific, single divisional algorithm that he uses reflects these concentrations. The algorithm creates interesting, engaging topographies that are subject to interpretation by the users. The method itself does not involve randomness, but the output does, so the author of the project is anticipating the public to be able to physically experience his work and add their personal thoughts. This trend is also parallel to the continuity of Digital Grotesque II. Even the smallest details acknowledgeable and are part of the whole enclosure and form the experience of the project’s users.

The Digital Grotesque II definitely explores the potential in computational architecture and defies the notion that technology is not advanced enough to articulate intricate details. In fact, the specific project clearly shows how algorithms and 3D printing skills can actually produce details that traditional methods could not while maintaining quality and high resolution.

More information on the Digital Grotesque II can be found on its website:

Home

Additionally, more information on Michael Hansmeyer’s computational architecture can be found on his website:

http://www.michael-hansmeyer.com/

Jihee_Project1(Self-Portrait)

jiheek1_project1(self-portrait)

function setup() {
    createCanvas(600, 600);
    background(188, 235, 237);


    fill(73, 59, 36);
    //back hair
    rect(228, 250, 300, 300);


    fill(229, 163, 178);
    //upper part of the shirt
    triangle(200, 500, 400, 450, 600, 500);
    //the lowest stripe of the shirt
    rect(200, 550, 400, 50);


    fill(249, 210, 221);
    //middle stripe of the shirt
    rect(200, 500, 400, 50);


    fill(239, 206, 186);
    //neck
    rect(364, 415, 71.9, 71.9);
    //my face
    ellipse(400, 300, 280, 280);


    fill(248, 244, 231);
    //collar
    triangle(364, 486.9, 364, 450.9, 400.9, 486.9);
    triangle(400.9, 486.9, 435.9, 450.9, 435.9, 486.9);


    fill(0);
    //eye outline
    ellipse(335, 320, 52, 52);
    ellipse(465, 320, 52, 52);


    stroke(255);
    strokeWeight(10);
    fill(66, 49, 37);
    //eyeballs
    ellipse(335, 320, 40, 40);
    ellipse(465, 320, 40, 40);


    fill(255);
    //eye reflection
    ellipse(340, 315, 3, 3);
    ellipse(470, 315, 3, 3);

    //mouth
    noFill();
    stroke(0);
    strokeWeight(3);
    arc(400, 385, 100, 30, 0, PI, PI);
    fill(73, 59, 36);


    //arm indications
    stroke(0)
    strokeWeight(3)
    line(270, 525, 270, 600);
    line(530, 525, 530, 600);


    //eyebrows
    noStroke();
    triangle(300, 278, 315, 270, 315, 278);
    rect(315, 270, 45, 8);
    rect(436, 270, 45, 8);
    triangle(481, 270, 481, 278, 496, 278);
    //side hair
    rect(228, 250, 60, 300);
    rect(505, 235, 60, 315);
    //bangs
    rotate(-0.5);
    ellipse(175, 330, 190, 70);
    rotate(1.80/2);
    ellipse(520, 0, 190, 70);


    //nose
    noFill();
    stroke(0);
    strokeWeight(2);
    curve(482, 134, 482, 134, 508, 174, 548, 174);
    curve(450, 144, 508, 174, 502, 190, 452, 190);


    noStroke();
    fill(255);
    //dialogue box
    rect(60, 0, 180, 200);
    triangle(240, 180, 240, 200, 270, 200);
    //"HI"
    fill(0);
    rect(100, 60, 6, 80);
    rect(106, 100, 30, 6);
    rect(136, 60, 6, 80);
    rect(170, 60, 25, 6);
    rect(180, 60, 6, 80);
    rect(170, 134, 25, 6);

}

The image above is a capture of my process work. Before coding my self-portrait, I used Adobe Illustrator to sketch out a general idea of my project. The graphical elements that I have commonly used are basic shapes, such as ellipses, rectangles and triangles. Some of the more complex items would be arcs and rotations. After creating a general form of my project with basic shapes, I refined it by differing line weights (or stroke weights). Through this project, I was able to practice creating images with basic coding language and organizing script.

Jihee Kim – Looking Outwards 01

Mirror_SPACE

Mirror_SPACE, 2004/05 Interactive Installation (long version) by Brigitta Zics from cognitiveloop on Vimeo.

Mirror_SPACE is an interactive installation that was developed from 2004 to 2005 by Brigitta Zics, a German artist whose expertise is in experiential, computational art. With the help of musician Jörg Lindenmaier and graphics programmers Jerome Thoma and Matthias Weber, the artist was able to create an interactive, real-time-scanning space that offers its users a unique experience, rich in senses.

What generated this project was “CApsule” that collected and analyzed data and the facial properties of the users, Mirror_SPACE Visualisation, Mirror_SPACE Sound Environment, and an external tracking software called “augenblick 1.o.” When people enter the space in which the project is installed, mirrored images of the participants are transformed, according to physical properties of the individual and different data pertaining to the world. The reflection of people within the environment in which the project is taking place are changed into visual representations that resemble microbes that then float around, interacting with one another. Colors and forms are generated by analysis on the person’s inner and outer states.

The project is an interesting installation for people to engage in and observe. As an architecture student, I was intrigued by the project because it encompasses various senses and is central to human experience and space. I believe that the installation, through sensational interactions, awakens and enables people to view themselves in a different, unique way and further realize that they are part of a bigger world. However, application of the project seems challenging. Perhaps psychological experiments and educational events could be some options. With the advancement of technology and the growth of social media, subjects such as personal and social identities have become much more complex. Installations like these could continue to be used to allow for discussions and reflections on one’s identity and place in the world.

On a side note, although I understand the purpose of the project and its possible mental impact on the users, I was confused as to how individual participants would recognize themselves in the crowd of these “mirror images” or representations of people. If the purpose of this installation is to have people to experience, feel, and understand themselves and their beings through a mirror image reflective of their inner states, it should be easier for the users to follow their image that floats around in the screen, so that more intimate connections can be made. Nonetheless, Mirror_SPACE is a comprehensive work that deserves merit for its power to provoke human senses through the use of computational art.

More information on the project can be found on the official website.

Mirror_SPACE