Author: jsaik@andrew.cmu.edu

Jaclyn’s Variable Face

jsaik

/* Jaclyn Saik 
Project-02 
Section E 
*/


//face and hair variables 
var eyeSize = 20;
var pupilSize = 10
var faceWidth = 150;
var faceHeight = 170;
var bunWidth = 100
var bunHeight = 100
var armLW = 160
var armRW = 480
var toungeL = 40
var toothL = 10
var eyebrowH = 155
var bluehair = 50
var redskin = 238




    

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

function draw() {
    background(140, 120, 170);
    noStroke();

    //colors
    s = color(redskin, 216, 193) //skin
    r = color(206, 20, 110)
    b = color(223, 140, bluehair)

    //body
    fill(s)
    //arms
    
    triangle(245, (height / 2) + 20, 240, 380, armLW, 600);
    triangle(235 + (width / 4), (height / 2) + 20, 235 + (width / 4), 380, armRW, 600);
    fill(r)
    rect(240, height / 2, width / 4, height*(2/3), 20)

    //hair
    fill(b)
    ellipse(width / 2, height / 3 + 5, faceWidth + 20, faceHeight + 40)
    ellipse(width / 2 - faceWidth * .6, height / 3 + 50, bunWidth, bunHeight)
    ellipse(width / 2 + faceWidth * .6, height / 3 + 50, bunWidth, bunHeight)


    //face
    fill(s)
    ellipse(width / 2, height / 3 + 25, faceWidth,  faceHeight);
    //eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var pupilLX = width / 2 - faceWidth * 0.25;
    var pupilRX = width / 2 + faceWidth * 0.25;
    fill(255);
    ellipse(eyeLX, height / 3 + 15, eyeSize, eyeSize); 
    ellipse(eyeRX, height / 3 + 15, eyeSize, eyeSize);
    fill(0)
    //pupils
    ellipse(eyeLX, height / 3 + 15, pupilSize, pupilSize); 
    ellipse(eyeRX, height / 3 + 15, pupilSize, pupilSize);
    
    
    //tounge
    fill(237, 106, 169)
    ellipse(width / 2, height / 3 + 65, 30, toungeL)
    //teeth
    fill(255)
    rect(width / 2 - 5, height / 3 + 60, 15, toothL)
    //mouth
    fill(s)
    rect(width / 2 - 25, height / 3 + 50, 50, 10)

    //nose
    var noseWL = 300
    var noseWR = 340
    fill(247, 208, 95)
    triangle(width / 2, height / 3 + 10, noseWL, height / 3 + 50, noseWR, height / 3 + 50);

    //eyebrows
    noFill();
    strokeWeight(3)
    stroke(218, 130, 55)
    arc(eyeLX, eyebrowH, 40, 25, PI*1.2, 0, OPEN)
    arc(eyeRX, eyebrowH, 40, 25, PI, TWO_PI*.9, OPEN)


    

}

function mousePressed() {
    
    faceWidth = random(125, 150);
    eyeSize = random(20, 50);
    pupilSize = random(10, 15)
    bunHeight = random(60, 120);
    bunWidth = random(60, 120);
    armLW = random(120, 200);
    armRW = random(440, 520);
    toungeL = random(30, 90);
    toothL = random(10, 17)
    eyebrowH = random(160, 145)
    bluehair = random(20, 200)
    redskin = random(100, 255)


 
}

This was an interesting task, and definitely very fun to research. I especially liked looking into how artists like Moka create algoritm-generated faces, and how the randomization tools of computers really highlight the odd ways our brains look and recognize facial expressions. Instead of working in a sketchbook, my main method of “sketching” for this project was first creating the static elements of my figure, so originally the arms and torso, and then playing with different features layered on top of each other to see what type of expressions come out. I found it especially interesting how much power the pupils and eyebrows have over a person’s expression.

Jaclyn Saik Looking Outwards 01

Viewers wade into a pool of moving water and watch the projection around them

I have always been drawn to interactive art that is set up to transform entire spaces and redefine the audience’s sense of reality while experiencing the installation. The Japanese company teamLab, who has created a lot of popular interactive art installations and who I’ve seen pop up periodically in my newsfeed, created an interactive koi pond display that looks very interesting and complex. The viewer first walked into a pool of calf-high moving water, surrounded by darkness and mirrors so it appears never ending, and then watches as koi fish (light projections) dart around them and change speeds, crashing into their legs and exploding into an array of flowers.

The koi fish projection changes speed. Paired with the dark setting and mirrored walls, the paths of light appear infinite.

teamLab created this installation for the “Odaiba Minna no YUME-TAIRIKU 2016” festival in Tokyo, and works as a way to celebrate Japanese culture.

What I found especially interesting about this artwork is that the technical aspects of it are all geared towards teamLab’s “Body Immersive” space idea, this philosophy of work focuses on making ” the boundaries between the viewer and the work become more abstract.” I think light projections are a clever way to do this, since playing and restricting your ability to see highlights the interaction that the user can have with the projections.

Although stylized, the koi are highly detailed.

As far as how this system operates, the creators keep most of their information to themselves. Based on my little knowledge of using computer science in interactive art, I’m guessing this system uses spacial or motion sensors to detect where people are within the space, and then run a complex that can project these schools of koi fish swirling around the users and occasionally crashing into them. I would love ot one day be part of creating artwork where the code responds to a person’s movements and actions while they do something natural (rather than directly interact with a machine).

Self Portrait: Jaclyn Saik

For my self portrait, I wanted to play with the simple shape tools I understood in this program to create shadows, so that I could block out more of the details on my face in an interesting way (as opposed to outlining them with the stoke). When creating this, I learned that the program runs a lot like a physical canvas in the sense that everything is layered on top of each other. It reminds me of painting, since objects/shapes that I want in front of everything else come last in the code and I have to direct which color each one is, even if that color has been used previously in the artwork.

Self Portrait work

function setup() {
    createCanvas(620, 620);
    background(86, 116, 159);
    //text("p5.min.js vers 0.7.1 test.", 10, 15);
}

function draw() {
    //colors 
    s = color(253, 217, 147)
    l = color(255, 242, 216)
    d = color(233, 180, 90)
    g = color(98, 187, 70)

    fill(s);
    noStroke();
    ellipse(443, 251, 724, 785)
    
    fill(l)
    rect(336, -70, 352, 697)
    triangle(244, 425, 336, 207, 336, 425)
   
    fill(s);
    triangle(336, 425, 344, 380, 391, 425)

    fill(d);
    triangle(224, 314, 260, 341, 285, 292)

    //eye-01
    fill(d)
    ellipse(196, 256, 168, 98)
    fill(255)
    ellipse(205, 251, 168, 98)
    fill(g)
    ellipse(239, 244, 73, 73)

    //eye-02
    fill(d)
    ellipse(473, 256, 168, 98)
    fill(255)
    ellipse(482, 251, 168, 98)
    fill(0, 0, 114)
    ellipse(529, 244, 40, 40)

    //eyelids
    fill(s)
    rect(121, 184, 193, 46)
    fill(l)
    rect(391, 184, 193, 46)


    //eyebrow
    fill(s);
    triangle(336, 204, 467, 158, 596, 195)

    //lips
    fill(137, 183, 226)
    triangle(262, 499, 336, 466, 336, 500)
    fill(182, 215, 241)
    triangle(336, 466, 336, 500, 438, 500)
    fill(86, 116, 159)
    triangle(262, 499, 336, 543, 336, 500)
    fill(114, 155, 204)
    triangle(336, 500, 336, 543, 438, 500)



}