Yoo Jin Shin-Project-02-Variable-Face

Project-02

// Yoo Jin Shin
// Section B
// yoojins@andrew.cmu.edu
// Project-02-Variable-Face

var eyeSize = 50;

// top pupil
var pupilSizeL = 5;
var pupilSizeR = 6;
var pupilLeftX = 150;
var pupilLeftY = 154;
var pupilRightX = 220;
var pupilRightY = 154;

// bottom pupil
var pupilSize2L = 10;
var pupilSize2R = 12;
var pupilLeftX2 = 130;
var pupilLeftY2 = 164;
var pupilRightX2 = 210;
var pupilRightY2 = 166;

var faceWidth = 270;
var faceHeight = 200;
var mouthStart = 30;
var mouthStop = 122;

var backgroundR = 3;
var backgroundG = 117;
var backgroundB = 0;

var faceR = 244;
var faceG = 240;
var faceB = 132;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(backgroundR, backgroundG, backgroundB);
    noStroke();

    // face
    fill(faceR, faceG, faceB);
    ellipse(180, 180, faceWidth, faceHeight);

    // left eye
    fill(0);
    ellipse(140, 160, eyeSize, eyeSize);

    // left pupils
    fill(255);
    ellipse(pupilLeftX, pupilLeftY, pupilSizeL, pupilSizeL);
    ellipse(pupilLeftX2, pupilLeftY2, pupilSize2L, pupilSize2L);

    // left eyebrows
    fill(backgroundR, backgroundG, backgroundB);
    rect(125, 123, 25, 7, 3);

    // right eyes
    fill(0);
    ellipse(220, 160, eyeSize, eyeSize);

    // right pupils
    fill(255);
    ellipse(pupilRightX, pupilRightY, pupilSizeR, pupilSizeR);
    ellipse(pupilRightX2, pupilRightY2, pupilSize2R, pupilSize2R);

    // right eyebrows
    fill(backgroundR, backgroundG, backgroundB);
    rect(210, 123, 25, 7, 3);

    // mouth
    fill(backgroundR, backgroundG, backgroundB);
    arc(180, 180, 20, 40, mouthStart, mouthStop);
}
 
function mousePressed() {
    eyeSize = random(37, 55);
    pupilSizeL = random(3, 9);
    pupilSizeR = random(3, 9);
    pupilSize2L = random(7, 12);
    pupilSize2R = random(7,12);

    pupilLeftX = random(142, 153);
    pupilLeftY = random(150, 155);
    pupilLeftX2 = random(142, 153);
    pupilLeftY2 = random(162, 169);

    pupilRightX = random(207, 218);
    pupilRightY = random(150, 155);
    pupilRightX2 = random(207, 218);
    pupilRightY2 = random(162, 169);

    faceWidth = random(150, 300);
    faceHeight = random(150, 300);

    faceR = random(0, 255);
    faceG = random(0, 255);
    faceB = random(0, 255);

    mouthStart = random(1, 360);
    mouthStop = random(1, 360);

    backgroundR = random(0, 255);
    backgroundG = random(0, 255);
    backgroundB = random(0, 255);
}

I tried creating a googly-eye-effect using the different variables by focusing the mouse-click changes mainly on the eyes.

Yoo Jin Shin-LookingOutwards-02

Irrational Geometrics

Irrational Geometrics is a series of generative art created by French artist, Pascal Dombis. When a person pulls a string (like pictured above), the displays on the screens change. This interactive installation was created using 4 videoprojectors, 2 computers, and custom software. The algorithm used may possibly have to do with randomizing the movement, length, shape, and color of the lines and activating when the string is pulled. This algorithm seems to align with his philosophy that “a line generates reality,” which is often interpreted as a mysterious, constantly moving, abstract concept.

Through the Irrational Geometrics series, Dombis tries to portray the significance and universality of a line. I thought Dombis’s concept of using simply lines to create art is inspirational. He goes beyond what is presented at face value and creates something powerful. The colors in the installations vary widely, and even though the image above is still, it conveys so much movement! It seems as if you’re in another dimension or in some time traveling portal. I think Dombis successfully captured his philosophy that “a line generates reality.”

To see Irrational Geometrics in action, click here!

Yoo Jin Shin-Project-01-Face

Portrait

// Yoo Jin Shin
// Section B
// yoojins@andrew.cmu.edu
// Project-01

function setup() {
    createCanvas(600, 600);
    background("#fff0f2");
    //text("p5.min.js vers 0.5.12 test.", 10, 15);
}

function draw() {
    // hair
    noStroke();
    fill("#362f2d");
    ellipse(300, 300, 400, 540);
    rect(100, 300, 400, 300 )

    // face
    noStroke();
    fill("#ffe1c0");
    ellipse(300, 250, 320, 350);

    // mouth
    stroke('#222222');
    strokeWeight(4);
    arc(300, 300, 130, 140, TWO_PI, PI);

    // ears
    noStroke();
    ellipse(150, 250, 80, 100);

    // earrings
    noStroke();
    fill("#ff9900");
    ellipse(144, 300, 20, 30);
    fill("#cc6600");
    ellipse(144, 300, 20, 20);
    rect(120, 210, 12, 12, 3);
    rect(115, 224, 10, 10, 3);

    // eyes
    noStroke();
    fill('#222222');
    ellipse(230, 240, 70, 77);
    ellipse(370, 240, 70, 77);
    fill(255);
    ellipse(220, 220, 20, 20);
    ellipse(380, 220, 20, 20);

    // eyelashes
    stroke('#222222');
    strokeWeight(2.5);
    line(200, 200, 210, 210);
    line(193, 210, 203, 220);

    // bangs
    noStroke();
    fill("#362f2d");    
    triangle(130, 200, 170, 200, 260, 50);
    triangle(115, 200, 150, 200, 260, 50);

    // shirt
    noStroke();
    fill("#000066");
    arc(300, 600, 370, 280, PI, TWO_PI);

    // neck
    fill("#ffe1c0");
    rect(260, 400, 80, 63);
    triangle(260, 463, 300, 500, 340, 463);

}

It seems like a long journey to get to the point in which coding this portrait with Javascript will be faster than creating it with Photoshop.

Yoo Jin Shin-LookingOutwards-01

Piano Stairs

How can we promote more people to be healthy and opt for the stairs, as opposed to less active modes like the escalator? To tackle such problems, Wolkswagen started an initiative called “The Fun Theory” in 2009, focused on nudging people’s behaviors for the better by making the activity irresistibly fun.

One of their projects, the Piano Stairs, is aimed at the question posed above. A team installed the piano stairs overnight in the Odenplan subway in Stockholm, Sweden using sensors and sound actuators. Not only is the stairwell visually appealing, but it also functions like an oversized piano! Each level of stairs corresponds to a note on the piano and it plays as someone steps on a key. In fact, “through the interactive steps the staircase successfully persuaded and motivated 66% more people to use the stairs instead of the escalator throughout the day.”

I think it’s fascinating that making such a small change in the interaction can influence some people to triumph over their laziness and tendency for convenience. It would be interesting to see other installations using this approach to promote a healthier lifestyle, and observe whether these changes can have longterm, lasting effects in the users.

To see the Piano Stairs in action, click here.