Author: kyungak@andrew.cmu.edu

kyungak-Project-02-Variable-Face

sketch

//Kyunga Ko
//15104B
//kyungak@andrew.cmu.edu
//Assignment-02-Variable-Faces

var facewidth = 260;
var faceheight = 240;
var outerLx = 275;
var outerY = 200;
var eyesize = 40;
var outerRx = 370;
var pupilsize = 7
var nosewidth = 80;
var noseheight = 40;
var nostrilwidth = 5;
var nostrilheight = 10;
var mouthtip = 340;
var mouthheight = 290;
var mouthleft = 310;
var mouthright = 330;
var pupilcolor = 0;

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

function draw() {
    background(198,192,214);
//ears
    fill(228,162,194);

//face
    fill(245,216,230);
    strokeWeight(3);
    stroke(228,162,194);
    ellipse(320,240,facewidth,faceheight);

//eyes
    fill(255);
    stroke(0);
    ellipse(outerLx,outerY,eyesize,eyesize); //left outerpart of eye
    ellipse(outerRx,outerY,eyesize,eyesize); //right outerrpart of eye

    fill(pupilcolor);
    ellipse(outerLx,outerY,pupilsize,pupilsize); //left pupil
    ellipse(outerRx,outerY,pupilsize,pupilsize); //right pupil

//nose
    fill(234,217,225);
    ellipse(320,250,nosewidth,noseheight); //outerpart of nose

    fill(151,139,145);
    ellipse(300,250,nostrilwidth,nostrilheight); //left nostril
    ellipse(340,250,nostrilwidth,nostrilheight); //right nostril

//mouth
    fill(151,139,145); 
    triangle(mouthleft,mouthheight,width/2,mouthtip,mouthright,mouthheight); 
}

function mousePressed() {
    //when the user clicks, the variables are randomly reassigned
    //within the given ranges
    facewidth = random(250,350);
    faceheight = random(230,350);
    outerLx = random(250,275);
    outerY = random(170,200);
    pupilsize = random(5,25);
    nosewidth = random(50,150);
    noseheight = random(30,70);
    nostrilwidth = random(3,10);
    nostrilheight = random(5,15);
    mouthtip = random(300,347);
    mouthleft = random(250,315);
    mouthright = random(325,390);
    mouthheight = random(300,320);
    pupilcolor = random(0,255);
}

As someone who is just learning about this program, learning and experimenting with the “mousePressed” function was interesting. Although I encountered a few problems here and there, I was able to overcome them and learn from the mistakes. I have also attached my notebook sketch of how the face originally looked. Although the result doesn’t synchronize with the sketch, I believe I will be able to make more intricate designs as I learn to utilize more features on javascript.

kyungak-lookingoutwards-02

Artists: French contemporary digital artists and multimedia choreographers Adrien M & Claire B (2015)

“XYZT: Abstract Landscapes” is a combination of 10 different works, each consisted of its own mathematical algorithm that responds to the movement of visitors. Once contact is made to the touch screen either by hand or foot, the sensors trigger the cloud of pixels to form certain shapes. For instance, the pixels might mimic the person that is standing in front of it.

One of the most famous work from the XYZT series is called the “Letter Tree.” The algorithms form a letter tree that drift its letters across the touch panel as the algorithmically formulated wind blows on them. The artists tried to recreate the question of whether wind can compose poems or not into an artwork.

The most fascinating aspect about XYZT is the interactivity of the piece. The artist’s aim to express distortion of shapes and meanings really came alive through the digital medium. Now that the mathematical algorithms could respond to the thousands of distortions viewers touch to make, it was a matter of time for the artists and the viewers to understand the different ways the shapes got distorted and most importantly have fun.

kyungak-project-01-Face

kyungak-self-portrait

//Kyunga Ko, 15104E, kyungak@andrew.cmu.edu, Project-01

function setup() {
    createCanvas(500, 675);
    background(230,157,157);
}

function draw() {

    fill(0);
    noStroke();
    quad(0,100,270,70,250,230,0,300);
    quad(270,70,370,400,270,440,250,230);
    quad(350,370,370,400,160,600,0,500);
    //hair

    fill(169,181,223);
    stroke(37);
    arc(0,530,330,730,0,HALF_PI);
    //body

    fill(232,197,162);
    rotate(PI/7);
    stroke(37);
    ellipse(250,260,330,430);
    //face

    fill(227,72,80);
    noStroke();
    triangle(234,300,249,260,263,300);
    //nose

    noFill();
    stroke(227,103,36);
    strokeWeight(10);
    arc(240,350,50,30,3*PI/2,PI/2);
    arc(240,380,50,30,3*PI/2,PI/2);
    //mouth

    fill(237,195,127);
    ellipse(180,237,70,110);
    //left eye

    fill(237,195,127);
    ellipse(320,237,70,110);
    //right eye

    fill(36,35,40);
    noStroke();
    ellipse(320,245,30,70);
    //right eye pupil

    fill(36,35,40);
    noStroke();
    ellipse(180,245,30,70);
    //left eye pupil

    fill(227,103,36);
    rotate(PI/17);
    rect(165,140,100,30);
    //left lower part of eyelid

    fill(227,103,36);
    rotate(PI/270);
    arc(190, 145, 100, 100, PI+QUARTER_PI, TWO_PI);
    //left upper part of eyelid

    fill(227,103,36);
    rotate(PI/270);
    rect(310,115,100,30);
    //left lower part of eyelid

    fill(227,103,36);
    rotate(PI/270);
    arc(340, 118, 100, 100, PI+QUARTER_PI, TWO_PI);
    //left upper part of eyelid


}

 

Although the face does not exactly synchronize the way I look, I took an artistic approach and experimented with the shapes to produce a self portrait. It was interesting to work and learn about the different features of javascript.

kyungak-lookingoutwards-01

 

(Audience, February 2010)

 

“Audience” was a collaborative project between Random International and Chris O’Shea in 2008. This project initially started off in 2002 with the lead of Stuart Wood, Flo Ortkrass and Hannes Koch. They aimed to bring art, science, and technology together by installing a motion tracking software that senses movements of human figures when approached. Random International has previous works that portray the cold nature of technology. They are similarly interactive and technology based.

As stated above, this piece consists of small mirrors that have motion tracking softwares and cameras attached to them. When a human figure approaches the cluster, the software senses the target and turns their reflective sides to the moving subject. After all, the human figure becomes the reflected result, and thus the main part of the piece. It emphasizes the cold nature of technology, and the uneasy feeling one gets from this automated response. By reversing from being a viewer to someone who is viewed, the artists aim to find out if machines can evoke emotions in humans.

This piece is truly fascinating to me because the viewers do not have any access to manipulating the piece when it comes to interaction. This programmed system involuntarily moves the mirrors, and act as more of a surprise. Usually, the viewers are given the choice, but I liked how that isn’t the case for this piece.