Author: galsanea@andrew.cmu.edu

Ghalya Alsanea – Project 02 – Variable Face

Gnomes of the world unite!

sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu
//Project-02

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var faceR = 141;
var faceG = 85;
var faceB = 36;
var eyeG = 0;
var eyeB = 0;
var shirtColor = 100;

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

function draw() {
    background(150);
    strokeWeight (1);
    stroke(0);

    // face
    fill (faceR, faceG, faceB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    
    //eyes
    fill (255);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    
    //pupils
    fill (0, eyeG, eyeB);
    ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2);
    ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2);

    // //nose
    fill (185, 150, 130);
    var noseWidth = faceWidth * 0.15;
    var noseHeight = height / 2 + faceHeight * 0.15;
    triangle(width / 2, height / 2, width / 2 + noseWidth, noseHeight, width / 2 - noseWidth, noseHeight);

    //body
    fill(0, shirtColor, faceB);
    var bodyHeight = faceHeight * 4;
    var bodyX = width / 2;
    var bodyY = height/2 + bodyHeight /2 + faceHeight / 2;
    ellipse(bodyX, bodyY, faceWidth, bodyHeight);

    //hat
    fill(shirtColor, 0, faceB);
    var hatWidth = faceWidth / 2;
    var hatHeight = height / 2 - faceHeight / 3;
    triangle(width / 2, height / 2 - faceHeight, width / 2 - hatWidth, hatHeight, width / 2 + hatWidth, hatHeight);

    //mouth
    noFill();
    strokeWeight (3);
    var mouthHeight = faceHeight * 0.25;
    arc(width / 2, height / 2 + mouthHeight, faceWidth / 2, mouthHeight, 0, 180, OPEN);


    // //eyebrows
    var browLX = width / 2 - faceWidth * 0.25;
    var browRX = width / 2 + faceWidth * 0.25;
    arc(browLX, height / 2 - eyeSize, eyeSize, eyeSize, 200, 340, OPEN);
    arc(browRX, height / 2 - eyeSize, eyeSize, eyeSize, 200, 340, OPEN);

    //pupils
    fill (0);
    stroke (0, eyeG, eyeB);
    ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2);
    ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2);
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    //to random values within specified ranges.
    faceWidth = random(75, 300);
    faceHeight = random(115, 350);
    eyeSize = random(30, 50);
    eyeG = random(0, 255);
    eyeB = random(0, 255);
    shirtColor = random(100, 200);
    
    //random skin color generator
    var x = round(random (0.5, 5.5));

    // skin shade 1 -- Russet
    if (x == 1) {
        faceR = 141;
        faceG = 85;
        faceB = 36;
    } 

    // skin shade 2 -- Peru
    if (x == 2) {
        faceR = 198;
        faceG = 134;
        faceB = 66;
    } 

    // skin shade 3 -- Fawn
    if (x == 3) {
        faceR = 224;
        faceG = 172;
        faceB = 105;
    } 

    // skin shade 4 -- Mellow Apricot
    if (x == 4) {
        faceR = 241;
        faceG = 194;
        faceB = 125;
    } 

    // skin shade 5 -- Navajo White
    if (x == 5) {
        faceR = 255;
        faceG = 219;
        faceB = 172;
    } 


}

I wanted to create different gnomes and have their hat and shirt color be relative to each other, so I referenced the RGB value of the skin value. That way their outfits somehow match.

Also, I wanted to create real skin tones and used the generic 5 shade skin tones found here, and randomized it so that every time you click, the skin changes.

Finally, the eyebrows and smiles and the rest of the facial features are referencing each other so that they change proportionally with the face size and eye size.

Ghalya Alsanea LookingOutwards-01: OLD NAVY SELFIEBRATION

OLD NAVY SELFIEBRATION by Deeplocal

This video explains the mechanisms and inspiration behind the Selfiebration installation.

This project by Deeplocal, a firm based in Pittsburgh, helped Old Navy celebrate their birthday by rendering fans’ selfies on a massive display made of 1,000 balloon “pixels”. I specifically choose this project because of the way people interact with the display. It is really cool how your face gets to literally be part of the display, while using balloons to extenuate that this is, in fact, a celebration. In addition the size of the display makes it disruptive in a way that even if it’s not your face projected, you still interact with the display. Also, the idea of using “selfies” in to attract an audience is very smart due to the large presence of selfies in media today. All in all, they knew their audience, the message was clear, the interaction was easy, and most importantly it was pleasant and fun for all parties involved.

Adding to that, even though it seems like a simple idea in concept, the project is highly innovative in the sense that they invented custom-engineered balloons for this specific project. In my opinion, executing simplicity in a design is harder than complexity.

Close up of the engineered inflatable balloon display.

The balloons, divided among 16 identical “balloon boxes,” inflated simultaneously with each capture, thanks to almost five miles of wiring and a pneumatic valving system built by Deeplocal engineers, explains CEO Nathan Martin.

The device is capable of showing two selfies a minute. Concept through creation to going live took just eight weeks.

The team consisted of a mix of about 20 artists, engineers, and designers.

Links:

https://www.deeplocal.com/projects/selfiebration.html

DeepLocal machine turns selfies into 15-foot balloon portraits

 

 

Become Ghalya’s Hair Stylist

sketch

//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu
//Project-01

function setup() {
    
    createCanvas(600, 600);
    background(200,160,200);
    angleMode(DEGREES);
    text('oh no! Ghalya is bald! Help draw her hair..', 200, 50);

    /*I originally created a canvas of 800x800,
    but had to rescale the protrait proportionally
    to fit the 600 constraint on WordPress*/
    scale(0.75);
    
    //neck
    strokeWeight(1);
    stroke(0);
    fill (175, 150, 130);
    rect(325, 600, 150, 200);

    //face
    fill (185, 150, 130);
    ellipse(400, 400, 500, 650);

    //eyeRight
    fill ("white");
    ellipse(300, 300, 100, 65);

    fill (130, 90, 60);
    circle(300, 300, 65);

    //eyeLeft
    fill ("white");
    ellipse(500, 300, 100, 65);

    fill (130, 90, 60);
    circle(500, 300, 65);

    //nose
    fill (175, 150, 130);
    triangle(400, 380, 450, 480, 350, 480);

    //mouth
    fill ("black");
    arc(400, 550, 200, 150, 0, 180, OPEN);


    //eyebrows
    noFill();
    strokeWeight (5);
    arc(300, 260, 100, 50, 200, 340, OPEN);
    arc(500, 260, 100, 50, 200, 340, OPEN);

    //pupils
    fill (0);
    strokeWeight(3);
    stroke(255);
    circle(300, 300, 30);
    circle(500, 300, 30);


}

function draw() {
    //hair 
    strokeWeight(1);
    stroke(0);
    a = random(200);
    fill(130, 90, 60, a);
    circle(mouseX, mouseY, 80);
}

Project 01 – Self-Portrait

For this project, we were asked to create a self portrait using p5.js. I chose to emphasize my curly hair because I believe it is a big part of who I am and how people perceive me.