Author: yingyiny@andrew.cmu.edu

Yingying Yan Project-02-Variable-Face

I was just trying things out. Every time I run the code, something funny pops up, so I decided to do weird, ugly, and funny faces. I had a lot of fun playing with this.

sketch

//variables layout
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var num = 4;
var num2 = 6;
var numNose = 8;
var mouthX = 30;
var mouthY = 50;
var Red = 100;
var earX = 10;
var earY = 20;
var color = 254

function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(223,240,230);

    //ears
    fill (6,167,181);
    var earLX = width / 2 - faceWidth / 2;
    var earRX = width / 2 + faceWidth / 2;
    ellipse(earLX, height / 2, earX, earY);
    ellipse(earRX, height / 2, earX, earY);


    //face, changes shape
    fill (color,192,79);
    
    if (faceWidth > 250) {
    	faceShape = ellipse (width / 2, height / 2, faceWidth, faceHeight);
    } else {
        faceShape = rect(width / 2 - faceWidth / 2 , height / 2 - faceHeight / 2, faceWidth,  faceHeight);
    }

    //eyes, changes size
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var eyeY = height / 2 - faceWidth * 0.12;
    ellipse(eyeLX, eyeY, eyeSize, eyeSize + num);
    ellipse(eyeRX, eyeY, eyeSize, eyeSize + num);

    //pupils, always inside the eyes
    fill(0);
    ellipse(eyeLX + num, eyeY, eyeSize / 2, eyeSize / 3+ num);
    ellipse(eyeRX + num, eyeY, eyeSize / 2, eyeSize / 3+ num);

    //mouth
    fill(233,111,41);
    var RectX = width / 2 - mouthX / 2;
    rect(RectX + num2, height/2 + 15, mouthX, mouthY);

    //tongue, changes color and move in relationship to the mouth
    fill (Red, 20, 40);
    rect(RectX + num2, height/2 + 15 + 2 * mouthY / 3, mouthX, mouthY / 3);

    //teeth changes x according to the mouth
    fill(250);
    rect(RectX + num2 +10, height/2 + 15, 5, 10);
    rect(RectX + num2 +20, height/2 + 15, 5, 10);

    //nose, changes how long the nose is
    fill (19,71,125);
    triangle(width / 2 - 4, height / 2 + 4, width / 2 + 4, height / 2 + 4, width / 2, height / 2 - numNose);


 
 }

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(100, 350);
    faceHeight = random(200, 350);
    eyeSize = random(10, 50);
    num = random(-5, 5);
    num2 = random(0,5);
    numNose = random(10, 60);
    mouthX = random(40, 60);
    mouthY = random(30, 60);
    Red = random(90, 250);
    earX = random(15, 100);
    earY = random(40, 80);
    color = random(200,250);
}

Yingying Yan LookingOutwards-02

Bottom view of the project, showing how the new structure “grows” from the tower.

On Eiffel Tower’s 120th anniversary, its operator Société d’Exploitation de la Tour Eiffel held a remodeling competition to create more viewing space on the tower. Serero Architects, who proposed Eiffel DNA has won the competition. They proposed putting a carbon Kevlar structure made out of metal panels to the top of the tower and doubling the amount of viewing space.

Axon drawing showing the break down of the structure.

It is called Eiffel DNA because it uses a generative computer script to copy the pattern from the old structure, and then “grow” new branches from the primary structure of the tower. This redundancy, non-repetition of pattern, and complex woven form are three interconnected structural weaves generated by the computer script. It also has curvatures unfold alone the tower.

Detail showing the organic shape of the structure and the tectonic pattern.

As an architecture student, this project has introduced a new design method to me. I always like new technology and how technology can combine with art to create something unique. Eiffel DNA proved that the computer can be used to create architecture that better people’ life and the society. The new structure, although is not built, fits in the big idea of growing out of the tower and adds a new life to Eiffel. The generative design really gives designers the ability and flexibility to create something crazy. I do not know much about the algorithm, but I suppose they used some software similar to ph python in Grasshopper. No doubt, this is a project requires a lot of computational thinking.

People activating the space.

Yingying Yan LookingOutwards-01

The Moment We Meet is a piece of kinetic installation art by Taiwanese artist Hsin-Chien Huang. It is installed in a subway station in Taipei. This project is a panel system of 10×10 matrix of faces, controlled by PLC. The faces are printed on PVC panels. Each panel can be controlled by the computer to create different combinations of faces. In term of the main idea, this project aimed to express that when we meet, our emotions will spread out to others. This project took about two years to complete.

Examples of faces by the panels.

I visited Taip a few summers ago, and as soon as I walked out of the subway station, this piece caught my attention — I was astonished. I stood there for few minutes staring at the installation. I felt like I was making eye contact with different people as the panels flipped through. It was just so fascinating. The fact that they made so many variations using just 10 panels is magical. The panels also flipped in various ways! As I was a tourist, this piece made me feel like everyone in Taipei was greeting me. This project can also be used for advertisements since it captures people’s attention.

Each panel flips differently to form one picture.

Yingying Yan Project-01-Face

Yingying Yan Project-01-Face

/*
    Yingying Yan
    Waitlist
    yingyiny@andrew.cmu.edu
    Project 01 Face
*/

function setup() {
    createCanvas(500, 500);
    background(198,204,201);
}

function draw() {
	//hair or hair tie
	fill(63,60,60);
	rotate(radians(75));
	rect(width/2-128,length/2.5-270,260,51);
	rotate(radians(-75));
	fill(135,163,165);
	ellipse(width/2,height/2.5-123,47,32);
	fill(63,60,60);
	ellipse(width/2,height/2.5-33,185,189);
	

    //ears
    fill(240,208,197);
	ellipse(width/2-90,height/2.5-5,16,25);
	ellipse(width/2+90,height/2.5-5,16,25);

	//body parts
	fill(240,208,197);
	rect(width/2-13,height/2+40,26,18);
	line(237,308,250,330);
	line(237+26,308,250,330);
	line(237,308,250-50,450);
	line(237+26,308,250+50,450)
	
	
	//face
	fill(240,208,197);
	ellipse(width/2,height/2.5,184,187);

	//eyebrows
	arc(width/2-45,height/2.5-25,40,20,PI,0);
	arc(width/2+45,height/2.5-25,40,20,PI,0);


	//mouth
	fill(212,118,118);
	ellipse(width/2,height/2.5+50,40,40);

	//nose
	fill(240,208,197);
	ellipse(width/2,height/2.5+10,11,11);

	//dot
	fill(0);
	ellipse(width/2+70,height/2.5+2,4.5,4.5);

	//eyes
	fill(146,129,115);
	ellipse(width/2-45,height/2.5-8,26,26);
	ellipse(width/2+45,height/2.5-8,26,26);



}

This is my first time coding, so I used as many circles as possible. But it works out because my face always looks surprised. I think I should make another portrait after I finish this class (if I get off the waitlist). It will be fun to compare the before and after.