Author: Jenny

Jenny Hu — Looking Outwards 02

The Silk Pavillion is a pavilion designed and produced by the Mediated Matter lab at MIT’s Media Lab. I’m overall extremely inspired by the project because it represents Neri Oxman’s “material ecology” philosophy so clearly. What if the things we had today could be co-produced by understanding and putting material properties first?

The project is inspired by the way silkworms can produce their own cacoon out of a single thread of silk. The pavilion algorithm is generated by adopting similar behaviors to produce the panels of the pavilion out of thread, while the silkworms (which are acting completely autonomous) provide secondary structural support. It’s interesting because not only is the manufacturing algorithm based on natural logic, but the silk worms are in some ways autonomous generative beings too.

More information about the project can be found at the Mediated Matter Lab. 

 

Jenny Hu — Variable Expressions

Jenny’s Sketch

//Jenny Hu
//Section E
//jjh1@andrew.cmu.edu
//Project 02



var faceX;
var faceY;
var FOX; //face outline X and Y
var FOY;
var bunFillX;
var bunFillY = 30;
var bunOutlineX;
var bunOutlineY = 40;
var tiedBuns = 15;
var eyeX; //variable to tag the eye to the eye tops
var EBY1 = 0; //left eyebrow Y1 and Y2
var EBY2 = 0; 
var blushY= 5;
var blushRadi = 15;
var mouthNumber = 1;
var wordNumber = 0;

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

    faceX = width/2;
    faceY = height/2;
    FOX = width/2 - 15; //face outline X and Y
    FOY = height/2;
    bunFillX = width/2;
    bunFillY = 30;
    bunOutlineX = width/2;
    eyeX = FOX-270;
}

function draw() {
    background(255, 245, 240);
    angleMode(DEGREES);

    //head fill
    noStroke();
    fill(250,235,220);
    ellipse(faceX, faceY, 190, 190);


    //bun fill
    noStroke();
    fill(130);
    ellipse(bunFillX, bunFillY, 70, 70);
     //tiedBuns keep them close together
    var bunOutlineX = bunFillX + tiedBuns;
    var bunOutlineY = bunFillY + tiedBuns;


    //blush
    noStroke();
    fill(243,215,215);
    ellipse(FOX-80, (FOY+30)+blushY, blushRadi, blushRadi);
    ellipse(FOX+80, (FOY+30)+blushY, blushRadi, blushRadi);
   

    //bun outline
    strokeWeight(8);
    stroke(255, 153, 153);
    noFill();
    ellipse(bunOutlineX, bunOutlineY, 70, 70);


    //mouth 
    var mouth = int(mouthNumber);
    if (mouth == 1) {
        //draw rectangle
        noStroke();
        fill(134,94,94);
        rect(FOX-20, FOY+40, 30, 10,100);

    } else if (mouth == 2){
        //draw circle
        strokeWeight(8);
        stroke(134,94,94);
        ellipse(FOX, FOY+40 ,20,20);

    } else {
        //draw smile
        strokeWeight(8);
        stroke(134,94,94);
        arc(FOX-20, FOY+30, 40, 40, 60,120);

    }


    //eyes
    noFill();
    strokeWeight(8);
    stroke(255, 153, 153);
    //LeftEye
    ellipse(FOX-eyeX, FOY-20, 23, 23);
    //RightEye
    ellipse((FOX-eyeX)+90, FOY-20, 23, 23);

    
    //top of eyes
    stroke(80);
    //Lefteye
    arc(FOX-45, FOY-5, 70, 70, 230, 320); //x, y, w, h, start, stop
    //Righteye
    arc(FOX+45, FOY-5, 70, 70, 230, 320);


    //eyebrows
    strokeWeight(15);
    stroke(183,151,151);
    //Left eyebrow
    line(FOX-50, (FOY-70) + EBY1, FOX-20, (FOY-70) + EBY2);
    //Right eyebrow
    line(FOX+50, (FOY-70) + EBY1, FOX+20, (FOY-70) + EBY2);


    //head outline
    strokeWeight(8);
    stroke(255, 153, 153);
    noFill();
    ellipse(FOX, FOY, 190, 190);



    //words 
    var word = int(wordNumber);
    if (word == 1) {
        noStroke();
        textSize(32);
        fill(255, 153, 153);
        text("hot buns.", 250, 390);


    } else if (word == 2){
        noStroke();
        textSize(32);
        fill(255, 153, 153);
        text("salad.", 250, 390);

    } else if (word == 3){
        noStroke();
        textSize(32);
        fill(255, 153, 153);
        text("coffee.", 250, 390);

    } else {
        noStroke();
        textSize(32);
        fill(255, 153, 153);
        text("potatoes.", 250, 390);

    }


   
}

function mousePressed() {

    faceX = random(275, 350);
    faceY = random(250, 200);
    FOX = random(275, 350);
    FOY = random (225, 250);
    bunFillX = random (245, 375);
    bunFillY = random (100,100);
    bunOutlineX = random (245, 375);
    bunOutlineY = random (100,100);
    tiedBuns = random (-20,20);
    eyeX = random(25,60);
    EBY1 = random(-10,15);
    EBY2 = random(-10,15);
    blushY = random(-30,20);
    blushRadi = random(20,80);
    mouth = random(1,3);
    mouthNumber = random(1,4);
    word = random(0,4);
    wordNumber = random(0,4);
   


    
 
    
}

Huzzah! Uploaded correctly this time. (Thank you Connie!)

I had a fun time making this. I think compared to last week, it was nice to work with more complicated variables and connected pieces. While I wanted to maintain elements, the trick was to maintain the right distances of elements near one another (like hair color and outline, or eyes to eyebrows), while their elements shifted around with every click.

I think the most challenging part was adding the words. Originally, I wanted to create an array, like in the Dan Shiffman array tutorial, but I couldn’t figure out the bug. So instead, I did the same thing as the mouths— using an if-else logic.

Jenny Hu — Looking Outwards 01

Slow Games by Ishac Bertran is one object of a series that reflects on people’s use of technology. It is a game based on classic moves in video games, but with a reduced frequency to one move a day. The technology and program used are unclear.

The slow speed to the game is the main differentiating factor for me. Instead of fast-paced and reactive choices, the game tests patience and memory coordination. It is a project that uses technology and computation to create a direct contrast of our main technological framework today.  It points to a different future where the value of technology takes a very different tone.

The full project page can be found here. 

 

Jenny Hu— Face

Project 01 — Face

/*
Jenny Hu
Section E
jjh1@andrew.cmu.edu
Assignment-01
*/

function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(255,245,242);
    noStroke();


//neck
    fill(250, 235, 220);
    rect(294, 370, 52, 60);
//neck shadow
    fill(235, 215, 207);
    rect(346,370, 12, 60);




//shirt
    fill(150, 157, 172);
    rect(192, 410, 138, 195, 100,0,0,0); //(x,y,w,h,topl eft, top right, bottom right, bottome left)
//shirt shadow
    fill(87, 96, 111);
    rect(330, 410, 138, 195, 0, 100, 0, 0);
//shirtsleeve
    fill(150,157,172);
    rect(61, 424, 71, 144, 100);
//shirt button
    fill(250);
    ellipse(330, 470, 20, 20);
    ellipse(330, 530, 20, 20);



//palm & thumb
    fill(250, 235, 220);
    rect(61, 269, 78, 132, 100);
    rect(130, 320, 30, 50, 100);
//fingers
    fill(255,245,242);
    rect(75, 260, 10, 50, 100);
    rect(94, 260, 10, 45, 100);
    rect(115, 260, 10, 50, 100);





//hair
    fill(87);
    rect(178, 177, 62, 328, 0, 0, 0, 20);
    rect(402, 177, 62, 328, 0, 0, 20, 0);
    rect(178, 115, 286, 62, 100, 100, 0, 0);
    ellipse(323, 90, 80, 80);





//face base & ears
    fill(250, 235, 220);
    rect(197, 177, 253, 200, 0, 0, 100, 100);
    rect(162, 218, 47, 63, 100);
    rect(445, 218, 47, 63, 100);




//hair bangs
    fill(87);
    rect(370, 140, 85, 70, 0, 0, 0, 100);




//mouth
    noFill();
    stroke(87);
    strokeWeight(9);
    ellipse(320, 320, 40, 40);


    noStroke();    
    fill(250,235,220);
    rect(286, 280, 80, 45);




//nose
    fill(235, 215, 207);
    rect(307, 251, 25, 50, 100);




//blush
    fill(255, 225, 212);
    ellipse(229, 278, 55, 55);
    ellipse(422, 278, 55, 55);




//earrings
    fill(240, 190, 97);
    rect(161, 230, 10, 5, 100);
    rect(161, 245, 10, 5, 100);
    ellipse(185, 272, 10, 10);
    ellipse(466, 272, 10, 10);




//eyes
    //whites
    fill(255);
    rect(244, 230, 37, 25, 0, 0, 100, 100);
    rect(364, 230, 37, 25, 0, 0, 100, 100);

    //blacks
    fill(0);
    ellipse(262, 236, 25, 25);
    ellipse(383, 236, 25, 25);
    rect(244, 224, 37, 7, 0, 100, 0, 0);
    rect(364, 224, 37, 7, 0, 100, 0, 0);
    rect(244, 218, 6, 8);
    rect(254, 218, 6, 8);
    rect(264, 218, 6, 8);
    rect(364, 218, 6, 8);
    rect(374, 218, 6, 8);
    rect(384, 218, 6, 8);

    //glasses
    noFill();
    stroke(133, 80, 50);
    strokeWeight(12);
    ellipse(257, 239, 100, 100);
    ellipse(383, 239, 100, 100);





    noLoop();
}

Fun stuff! In my process, I found visualizing in the sketch file a little slow for iterating graphical ideas. So instead, I went to work in a vector-program (sketch) to play with colors and shapes that stuck to the same primitive ones we’ve been using in class before. This allowed me to quickly plan my elements and push them in the program.