ghou-project-02-VariableFace

I really liked the googly-eyes, I feel like it added a little more dynamic to this drawing. There definitely could be more characteristics varied but I think the image should stay somewhat recognizable.

sketch

//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Assignment 02

var faceWidth = 200;
var faceHeight = 250;
var earsize = 100;
var eyesize = 20
var mouthsize = 50;

var faceround = 10;
var earround = 20;

//each of these features have 3 types that will get chosen when clicked 
var facet = 1;
var eart = 1;
var types =[1,2,3];
//colours
var facer = 255;
var faceg = 220;
var faceb = 200;
var eyer = 255;
var eyeg = 255;
var eyeb = 255;

// setting the canvas and changing rectangle mode to center
function setup() {
    createCanvas(480,640);
    rectMode(CENTER);
}


function draw() {
    //background will always be in a darker shade than the face
    background(facer-150, faceg-150, faceb-150);
    fill (facer, faceg, faceb);
    
    stroke(facer+25,faceg+25,faceb+25);
    strokeWeight(20);
    
    
    //types of ears
    if(eart == 1){
        ellipse(width/2 - faceWidth/2, height/2 - faceHeight/4, earsize*4/5, earsize);
        ellipse(width/2 + faceWidth/2, height/2 - faceHeight/4, earsize*4/5, earsize);
    }
    if(eart == 2){
        rect(width/2 - faceWidth/2, height/2 - faceHeight/4, earsize/2, earsize, earround);
        rect(width/2 + faceWidth/2, height/2 - faceHeight/4, earsize/2, earsize, earround);
    }
    if(eart == 3){
        triangle(width/2 - faceWidth/4, height/2 - faceHeight/5, width/2, height/2 - faceHeight/3, width/2 - faceWidth/3, height/2 - faceHeight/2 - earsize/2);
        triangle(width/2 + faceWidth/4, height/2 - faceHeight/5, width/2, height/2 - faceHeight/3, width/2 + faceWidth/3, height/2 - faceHeight/2 - earsize/2);
    }
    
    
    //tyes of faces
    strokeWeight(6);
    if(facet == 1){
        ellipse(width/2, height/2, faceWidth, faceHeight);
    }
    if(facet == 2){
        rect(width/2, height/2, faceWidth, faceHeight, faceround);
    }
    if(facet == 3){
        triangle(width/2 - faceWidth/2, height/2 - faceHeight/2,
		 width/2 + faceWidth/2, height/2 - faceHeight/2,
		 width/2, height/2 + faceHeight/2);
    }
    
    
    //eyes
    noStroke();
    
    //the white? part of the eye???
    fill(facer + 100, faceb + 100, faceg + 100)
    ellipse(width/2 - width/16, height/2 - height/40, eyesize*2, eyesize*2);
    ellipse(width/2 + width/16, height/2 - height/40, eyesize*2, eyesize*2);
    
    //eyeballs??
    fill(0);
    noStroke();
    var eyeballrX = constrain(mouseX, width/2 - width/16 - eyesize/3, width/2 - width/16 + eyesize/3);
    var eyeballlX = constrain(mouseX, width/2 + width/16 - eyesize/3, width/2 + width/16 + eyesize/3);
    var eyebally = constrain(mouseY, height/2 - height/40 - eyesize/3, height/2 - height/40 + eyesize/3);
    
    ellipse(eyeballrX, eyebally, eyesize, eyesize);
    ellipse(eyeballlX, eyebally, eyesize, eyesize);
    
    //mouth
    fill(facer-100, faceg-150, faceb-150);
    stroke(facer-25,faceg-25,faceb-25);
    ellipse(width/2, height/2 + faceHeight/4, faceWidth/500*mouthsize);
    
    }
 
function mousePressed() {
    faceWidth = random(150,300);
    faceHeight = random(100,350);
    facet = random(types);
    
    earsize = random(80,150);
    mouthsize = random(0,100);
    
    faceround = random(10,20);
    earround = random(5,20);

    eart = random(types);
    facer = random (100,255);
    faceg = random (100,255);
    faceb = random (100,255);
}

ghou-lookingoutwards-02

Nervous System

The generative design studio, Nervous System, is founded by Jessica Rosenkrantz and Jesse Louis Rosenberg. They create art, jewelry, decorations and usable houseware using computer simulation and digital fabrication. Rosenkrantz studied architecture at Harvard Graduate school, I recognize architectural elements and find it very inspiring that she utilized many of the techniques and study of space into her jewelry and the design of smaller everyday items. In the Nervous System Mission Statement, they say: “Our inspirations are grounded in the natural forms and corresponding processes which construct the world around us.” In their work they draw geometries found in nature and evolve those forms into physical, interactive pieces.

Hyphae Zoetrope Project (2014)

This is one of the projects Nervous System has created. This project is nylon 3D printed by Selective Laser Sintering, MDF, electronics, and LEDs. This is created by an algorithm that follows the geometries of leaves. These leaves are attached to a central point and follows the progression of leaves growing as it spins.

ghou-lookingoutwards-01

teamLab – Flower Forest: Lost, Immersed, and Reborn 

This summer, I was fortunate to travel to the Beijing 798 art district where I saw the project Flower Forest: Lost, Immersed and Reborn. This project is an immersive, interactive digital installation.

This piece is one of the many large scale digital art pieces by the group teamLab and sound designer Hideaki Takahashi. This group refers to themselves as ultra-technologists. Their mission includes expanding art using digital forms and developing relationships between people and art with these installations. These artists are also inspired by a collective building process bringing together artists, programmers, animators, mathematicians, engineers, architects, web and print graphic designers, and editors.

This is what inspired me to consider IDeATe as it is such a shared experience between many subjects. This project resets the boundary between physical design and architectural space. I admire these ultra-technologists for their ability to express the change in our environment and art. This will provide the future with limitless possibilities of designing spaces and users/viewers will be able to experience art more directly.

ghou-Project-01-Face

Taken from photograph and transformed into geometric shapes in Illustrator. Then I divided each space up into quadrilaterals or triangles and plotted them into JavaScript in Brackets

Self Portrait

//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Assignment 01

function setup() {
    createCanvas(500,400);
    noStroke();
    background(135,206,250);255,192,203
    
    fill(255,192,203);
    quad(250,0,250,400,500,400,500,0);
    
    var ls = color(245,224,205);
    var ds = color(240,208,180);
    var lb = color(156,119,97);
    var db = color(146,109,90);
    var shade = color(74,50,34);
    var ulip = color(203,140,132);
    var llip = color(240,190,180);
    translate(-100,0);
//hairs
    fill(db);
    quad(200,37,232,95,291,48,265,15);
    quad(232,95,291,48,300,100,226,218);
    quad(300,100,226,218,259,211,298,155);
    quad(259,211,226,218,235,351,244,259);
    fill(lb);
    noStroke();
    quad(194,34,187,45,181,34,191,29);
    quad(181,34,175,61,185,64,187,45);
    quad(185,64,175,61,180,135,195,120);
    quad(195,120,180,135,164,179,171,179);
    triangle(164,223,148,281,152,340);
    quad(195,120,171,179,154,233,152,340);
    quad(208,176,198,144,195,120,205,139);
    quad(194,34,213,142,217,48,215,28);
    quad(217,48,215,28,223,17,222,34);
    quad(222,34,223,17,237,17,231,58);
    triangle(231,58,237,17,235,34);
    quad(237,17,235,34,246,51,246,31);
    quad(237,17,237,13,250,12,246,31);
    quad(246,31,250,12,266,27,270,51);
    quad(266,27,250,12,265,15,275,27);
    quad(226,218,213,142,217,48,232,95);
    triangle(244,259,259,211,253,289);

    fill(db);
    noStroke();
    quad(152,340,162,324,170,354,174,290);
    triangle(152,340,174,290,195,120);
    triangle(174,290,184,328,195,120);
    quad(184,284,190,240,201,214,195,120);
    quad(201,214,195,120,198,144,208,176);
    quad(189,26,194,34,215,28,210,10);
    quad(210,10,215,28,223,17,217,11);
    quad(217,11,223,17,237,17,230,6);
    quad(237,17,230,6,250,12,237,13);
    
//face highlights
    fill(ls);
    noStroke();
    quad(187,45,185,64,205,58,194,34);
    quad(188,63,195,61,196,70,195,64);
    quad(200,59,201,63,205,61,205,58);
    quad(195,61,200,59,202,67,196,74);
    quad(202,67,196,70,196,74,205,83);
    quad(205,83,196,74,195,76,194,78);
    quad(194,78,191,87,205,87,205,83);
    triangle(205,87,205,94,207,90);
    quad(205,87,206,98,197,90,191,87);
    triangle(197,90,191,92,191,87);
    quad(187,85,191,87,196,100,185,96);
    quad(185,96,211,93,214,112,194,116);
    quad(214,121,214,129,203,135,203,129);
    
//face lightshadows   
    fill(ds);
    noStroke();
    quad(185,71,190,68,191,76,186,78);
    quad(191,76,195,76,196,74,190,68);
    triangle(190,68,196,74,196,70);
    triangle(202,67,206,64,208,73);
    quad(208,73,202,67,205,83,210,89);
    quad(187,85,188,85,193,83,191,87);
    quad(191,92,191,96,197,96,197,90);
    quad(197,90,197,96,198,93,206,98);
    quad(196,100,195,105,200,102,199,101);
    quad(199,101,200,102,203,99,199,99);
    quad(214,112,214,121,195,120,201,120);
    quad(195,120,203,135,203,129,214,121);
    quad(203,135,205,139,213,142,214,129);
    
//nose shadow and eyelash
    fill(shade);
    noStroke();
    quad(191,96,196,100,199,101,197,96);
    quad(197,96,199,101,199,99,203,99);
    quad(203,99,197,96,198,93,206,98);
    triangle(184,83,188,85,187,81);
    quad(187,81,188,85,193,83,194,78);
    
//brows and creases
    fill(db);
    noStroke();
    quad(201,63,202,67,206,64,205,61);
    quad(185,71,184,68,185,64,189,63);
    quad(189,63,185,71,190,68,196,70);
    triangle(196,70,195,64,189,63);
    triangle(186,78,187,81,191,76);
    quad(191,76,187,81,194,78,195,76);
    quad(205,83,205,87,207,90,210,89);
    triangle(210,89,207,90,211,93);
    quad(211,93,206,98,206,94,207,90);
    quad(194,116,196,115,197,119,195,120);
    quad(195,120,197,119,204,118,201,120);
    
//upper and lower lip
    fill(llip);
    noStroke();
    quad(196,115,197,119,204,118,204,111);
    triangle(204,111,214,112,204,118);
    fill(ulip);
    quad(194,116,196,115,197,107,195,107);
    quad(196,115,197,107,200,106,204,111);
    triangle(200,106,204,111,214,112);

//pink dup
    translate(250,0);
    //hairs
    fill(db);
    quad(200,37,232,95,291,48,265,15);
    quad(232,95,291,48,300,100,226,218);
    quad(300,100,226,218,259,211,298,155);
    quad(259,211,226,218,235,351,244,259);
    fill(lb);
    noStroke();
    quad(194,34,187,45,181,34,191,29);
    quad(181,34,175,61,185,64,187,45);
    quad(185,64,175,61,180,135,195,120);
    quad(195,120,180,135,164,179,171,179);
    triangle(164,223,148,281,152,340);
    quad(195,120,171,179,154,233,152,340);
    quad(208,176,198,144,195,120,205,139);
    quad(194,34,213,142,217,48,215,28);
    quad(217,48,215,28,223,17,222,34);
    quad(222,34,223,17,237,17,231,58);
    triangle(231,58,237,17,235,34);
    quad(237,17,235,34,246,51,246,31);
    quad(237,17,237,13,250,12,246,31);
    quad(246,31,250,12,266,27,270,51);
    quad(266,27,250,12,265,15,275,27);
    quad(226,218,213,142,217,48,232,95);
    triangle(244,259,259,211,253,289);

    fill(db);
    noStroke();
    quad(152,340,162,324,170,354,174,290);
    triangle(152,340,174,290,195,120);
    triangle(174,290,184,328,195,120);
    quad(184,284,190,240,201,214,195,120);
    quad(201,214,195,120,198,144,208,176);
    quad(189,26,194,34,215,28,210,10);
    quad(210,10,215,28,223,17,217,11);
    quad(217,11,223,17,237,17,230,6);
    quad(237,17,230,6,250,12,237,13);
    
//face highlights
    fill(ls);
    noStroke();
    quad(187,45,185,64,205,58,194,34);
    quad(188,63,195,61,196,70,195,64);
    quad(200,59,201,63,205,61,205,58);
    quad(195,61,200,59,202,67,196,74);
    quad(202,67,196,70,196,74,205,83);
    quad(205,83,196,74,195,76,194,78);
    quad(194,78,191,87,205,87,205,83);
    triangle(205,87,205,94,207,90);
    quad(205,87,206,98,197,90,191,87);
    triangle(197,90,191,92,191,87);
    quad(187,85,191,87,196,100,185,96);
    quad(185,96,211,93,214,112,194,116);
    quad(214,121,214,129,203,135,203,129);
    
//face lightshadows   
    fill(ds);
    noStroke();
    quad(185,71,190,68,191,76,186,78);
    quad(191,76,195,76,196,74,190,68);
    triangle(190,68,196,74,196,70);
    triangle(202,67,206,64,208,73);
    quad(208,73,202,67,205,83,210,89);
    quad(187,85,188,85,193,83,191,87);
    quad(191,92,191,96,197,96,197,90);
    quad(197,90,197,96,198,93,206,98);
    quad(196,100,195,105,200,102,199,101);
    quad(199,101,200,102,203,99,199,99);
    quad(214,112,214,121,195,120,201,120);
    quad(195,120,203,135,203,129,214,121);
    quad(203,135,205,139,213,142,214,129);
    
//nose shadow and eyelash
    fill(shade);
    noStroke();
    quad(191,96,196,100,199,101,197,96);
    quad(197,96,199,101,199,99,203,99);
    quad(203,99,197,96,198,93,206,98);
    triangle(184,83,188,85,187,81);
    quad(187,81,188,85,193,83,194,78);
    
//brows and creases
    fill(db);
    noStroke();
    quad(201,63,202,67,206,64,205,61);
    quad(185,71,184,68,185,64,189,63);
    quad(189,63,185,71,190,68,196,70);
    triangle(196,70,195,64,189,63);
    triangle(186,78,187,81,191,76);
    quad(191,76,187,81,194,78,195,76);
    quad(205,83,205,87,207,90,210,89);
    triangle(210,89,207,90,211,93);
    quad(211,93,206,98,206,94,207,90);
    quad(194,116,196,115,197,119,195,120);
    quad(195,120,197,119,204,118,201,120);
    
//upper and lower lip
    fill(llip);
    noStroke();
    quad(196,115,197,119,204,118,204,111);
    triangle(204,111,214,112,204,118);
    fill(ulip);
    quad(194,116,196,115,197,107,195,107);
    quad(196,115,197,107,200,106,204,111);
    triangle(200,106,204,111,214,112);

}