yinjiet – Looking Outwards 02

Generative Design Meets Architecture- Metropol Parasol

perspective view of Metropol Parasol in Seville, Spain

The name of the project is called Metropol Parasol designed by J. Mayer H. Architects. It is a redevelopment of Plaza de la Encarnacion in Seville, Spain. The building contains 5000 square meters throughout 4 stories. The structure is mainly concrete, timber and steel. The whole building costs 90 Million Euro in construction.

Metropol Parasol is one of the earliest example in architecture that involves generative design. Designers can create unimaginable surfaces and spaces with infinite possibilities and variabilities by the change of a few parameters though self defined algorithms.

Like the project Metropol Parasol, when the designers explore with generative designing softwares like grasshopper, the construction process becomes simple and straightforward. The workers do not need to built each pieces on site, but rather, the pieces are mostly prefabricated in the factory with the help of highly efficient machines. That is the reason why, nowadays, tools like three dimensional printer becomes more and more popular in architectural design.

Source link: https://www.yatzer.com/Metropol-Parasol-The-World-s-Largest-Wooden-Structure-J-MAYER-H-Architects

yinjiet-Project-02-Variable-Face

In this exercise, I tried to present a life cycle from young age to old. The three aspects of variability are the color of the hair, movement of the ears, and the size of the face.

project-02

//Jacky Tian
//Section B
//yinjiet@andrew.cmu.edu
//project-01


function setup() {
    createCanvas(480, 640);
    
}
var x1 = 175;
var y1 = 320;
var x2 = 425;
var y2 = 320;
var count = 0;
var eyecolor = 0;
var facew = 250;
function draw() {
	background(220);
	strokeWeight(1);
	stroke(0, 0, 0);
	fill(236, 212, 190);
	ellipse(x2, y1, 25, 50);
	ellipse(x1, y1, 25, 50);

	strokeWeight(0);
	stroke(0, 0, 0);
	fill(236, 212, 190);
	rect(270, 460, 60, 60),
	
	strokeWeight(0);
	stroke(0, 0, 0);
	fill(236, 212, 190);
	ellipse(300, 320, facew, 300);

	fill(eyecolor)
	quad(175, 270, 280, 270, 308, 160, 210, 185);
	quad(320, 270, 425, 270, 390, 185, 292, 160);
	
	strokeWeight(4);
	stroke(212, 175, 55);
	fill(255);
	rect(200, 275, 80, 60);
	rect(320, 275, 80, 60);
	line(280, 300, 320, 300);
	line(175, 285, 200, 300);
	line(425, 285, 400, 300);

	strokeWeight(1);
	stroke(0, 0, 0);
	fill(236, 212, 190);
	triangle(300, 350, 290, 375, 310, 375);

	strokeWeight(1);
	stroke(0, 0, 0);
	noFill();
	arc(300, 415, 80, 80, 0, PI + QUARTER_PI, OPEN);

	stroke(0, 0, 0);
	fill(0, 0, 0);
	quad(200, 520, 400, 520, 500, 600, 100, 600);

	stroke(0, 0, 0);
	fill(51);
	rect(200, 580, 80, 100);
	
}
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.
	if(count % 2 == 0){
		y1 -= 10;
	}else{
		y1 += 10;
	}
	eyecolor += 15;
	eyecolor = eyecolor % 255
	count += 1;
	facew -= 5; 
    // x1 = x1 - 5;
    // x2 = x2 + 5;

}

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!

Tanvi Harkare – Project 02 – Variable Face

tanvi_facevariable

/* Tanvi Harkare
Section B
tharkare@andrew.cmu.edu
Project-02-Face Variables */

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var eyeColorR = 150
var eyeColorG = 250
var eyeColorB = 5;
var mouthWidth = 50;
var mouthHeight = 30; 
var mouthY = 340; 
var browHeight = 300;
var eyeHeight = 320;

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

function draw() {
    background(150);

    //hair
    stroke(0);
    strokeWeight(150);
    line(width/2, height/2 - 20, width/2, height - 225);

    //face
    fill(255, 220, 177);
    noStroke(); 
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //eyes
    noStroke();
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(255);
    ellipse(eyeLX, eyeHeight, eyeSize, eyeSize); //left eye
    ellipse(eyeRX, eyeHeight, eyeSize, eyeSize); //right eye
    //pupils
    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(eyeLX, eyeHeight, eyeSize/2, eyeSize/2); //left pupil
    ellipse(eyeRX, eyeHeight, eyeSize/2, eyeSize/2); //right pupil

    //mouth
    noFill();
    strokeWeight(2);
    stroke(100, 75, 80);
    arc(240, mouthY, mouthWidth, mouthHeight, 0, 3.14, OPEN);

    //eyebrows
    strokeWeight(2);
    stroke(0);
    line(eyeLX - 10, eyeHeight - 10 - eyeSize, eyeLX + 10, eyeHeight - 10 - eyeSize);
    line(eyeRX - 10, eyeHeight - 10 - eyeSize, eyeRX + 10, eyeHeight - 10 - eyeSize);

    //nose
    noStroke();
    fill(198, 171, 137);
    ellipse(width/2, height/2 + eyeSize, 10, 8);
}

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, 130);
    faceHeight = random(110, 160);
    eyeSize = random(10, 20);
    eyeColorR = random(0, 255);
    eyeColorG = random(0, 255);
    eyeColorB = random(0, 255);
    mouthWidth = random(30, 60);
    mouthHeight = random(20, 40);
    mouthY = random(335, 350);
    browHeight = random(290, 305);
    eyeHeight = random(315, 325);
}

For this project, I created a face from simple shapes such as ellipses, arcs, and lines. My favorite part of the project was coming up with different ways to create a unique face with colors, size, and position on the face. At first I had a difficult time dealing with facial features that were overlapping, but was able to solve that by changing the values of the random integers near the end .

Philip Gates – Looking Outwards 02

Ben Rubin – Shakespeare Machine (2012)

Shakespeare Machine installed in the lobby of the Public Theater, NYC. Photo by Ben Rubin.

Ben Rubin’s Shakespeare Machine uses an algorithm to select phrases or combinations of words from Shakespeare’s plays, and displays them on a series of 37 LED screens installed in a chandelier in the lobby of New York’s Public Theater. Each screen represents one play and displays text taken from that particular play.

The algorithm selects for various contextual and grammatical similarities (e.g. hyphenated adjectives, the word “you” plus any noun, nouns that describe the human body) and displays a phrase from each play at random.

Algorithm sorting for “you” + noun. Photo by Ben Rubin.

Rubin’s passion for data and the excitement of analyzing texts at a micro level (he has done several other similar projects) come through clearly in this piece. For me, this piece is a visually exciting way of demonstrating Shakespeare’s constant inventiveness as a writer. Its placement in the Public Theater, which produces New York’s free Shakespeare in the Park, is a perfect pairing of artwork and site.

Lingfan Jiang – Looking Outward – 02

(Installation Named “Visual Sound of the Amazon” done by Andy Thomas)

This installation is done by an Australian artist named Andy Thomas. It is a responsive artwork that visualized an audio collected from the Amazon rainforest.

The most fascinating part of this project is the idea of visualizing sound. Although it is super cool to look at the animation sequence, in the end, this project just had a cool look. However, the idea behind it could be used in so many ways in the future.

For example, this project could relate to helping the deaf people picture all kinds of sound, and let them be able to understand sound in a different way. Also, on the contrast, can picture or animation be transformed back into sound? If sound could be transformed into animation, could smell also do that? There are so many opportunities. Thus, I believe this project is just the beginning of the path!

Looking Outward 02

I found Erik Natzke’s NextFest Exhibit A video inspirational. I admire the crossover between digital and physical (paint) methods of creating art. He is inspired by the organic strokes of paint and incorporates that into his digital work and capturing the movement of line and strokes. It is exciting to see how many images he can make with this canvas and the music that goes along with the piece brings out the exciting movement even further. I suppose that the algorithm used in this piece is animation, statements we have started to use in class in the draw function, which also definitely uses color, transparency and shapes. Erik’s artistic sensibilities show through in his algorithms with the way he animates the strokes to first be out of the picture frame and then almost throw into the picture frame. Also the way he makes up the strokes in smaller transparent shapes adds to the organic aspect of the lines.

cmhoward-project-02

cmhoward-p2

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var earSize = 15;
var headphoneSize = 6;
var colorPicker = 1;
var faceColor = 2;
var mouthWidth = 3;
var mouthHeight = 4;
var eyebrowWidth = 5;
var eyebrowHeight = 6;

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

function draw() {
    //background
    switch(colorPicker) {
        case 1:
            background(252, 156, 231);
            break;
        case 2:
            background(230, 156, 252);
            break;
        case 3:
            background(156, 193, 252);
            break;
        case 4:
            background(252, 249, 156);
            break;
        default:
            background (161, 252, 156);
    }
    //headphones
    noFill();
    stroke('black');
    strokeWeight(4);
    curve(width / 2 - faceWidth * 1, height * 3.5, width / 2 - faceWidth / 1.75, height / 2, width / 2 + faceWidth / 1.75, height / 2, width / 2 + faceWidth * 1, height * 3.5);
    //ears
    fill('black');
    noStroke();
    ellipse(width / 2 - faceWidth / 2, height / 2, earSize, earSize*1.5);
    ellipse(width / 2 + faceWidth / 2, height / 2, earSize, earSize*1.5);
    //face
    switch(faceColor) {
        case 1:
            fill(252, 156, 176);
            break;
        case 2:
            fill(204, 139, 224);
            break;
        case 3:
            fill(139, 171, 224);
            break;
        case 4:
            fill(242, 239, 145);
            break;
        default:
            fill(143, 224, 139);
    }
    noStroke();
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //hearteyes
    fill('pink');
    stroke('black');
    strokeWeight(1);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    //lefteye
    curve(width / 2 + width * .75, height / .75, eyeLX, height / 2.0, eyeLX, height / 1.8, width / 2, height / 1.5);
    curve(width / 2 - width * .75, height / .75, eyeLX, height / 2.0, eyeLX, height / 1.8, width / 2, height / 1.5);
    //righteye
    curve(width / 2 + width * .75, height / .75, eyeRX, height / 2.0, eyeRX, height / 1.8, width / 2, height / 1.5);
    curve(width / 2 - width * .75, height / .75, eyeRX, height / 2.0, eyeRX, height / 1.8, width / 2, height / 1.5);
    //nose
    noFill();
    curve(width / 2 + faceWidth / 2, height / 2 + faceHeight / 2, width / 2 - faceWidth / 16, height / 2 + faceHeight / 6, width / 2 + faceWidth / 16, height / 2 + faceHeight / 6, width / 2 - faceWidth / 2, height / 2 + faceHeight / 2);
    //mouth
    arc(width / 2, height / 1.6, mouthWidth, mouthHeight, TWO_PI, PI, OPEN);
    //eyebrows
    arc(width / 2 - faceWidth / 3.5, height / 2.5 + faceHeight / 12, eyebrowWidth, eyebrowHeight, PI, TWO_PI, OPEN);
    arc(width / 2 + faceWidth / 3.5, height / 2.5 + faceHeight / 12, eyebrowWidth, eyebrowHeight, PI, TWO_PI, OPEN);
}

function mousePressed() {
    faceWidth = random(80, 100);
    faceHeight = random(140, 165);
    eyeSize = random(10, 30);
    earSize = random(25, 40);
    headphoneSize = random(3, 8);
    colorPicker = int(random(1, 6));
    faceColor = int(random(1, 6));
    mouthWidth = faceWidth / random(2, 4);
    mouthHeight = faceHeight / random(2.5, 4.5);
    eyebrowWidth = faceWidth / random(3.5, 4);
    eyebrowHeight = faceHeight / random(8, 10);
}

i really enjoyed this project because i enjoyed designing throughout the code and trying new things as i went along instead of looking for one specific solution which i may have been trying too hard to do last week.

ardenw project 02 variable face

sketch.js

/* Arden Wolf
Section B
ardenw@andrew.cmu.edu
Project-02 
*/


var num= (1);

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

function draw() {
    if(num==1){
    //angry face
        background(66);
        fill (255,0,0);
        noStroke();
        ellipse(200, 200,300, 200);

        //eyes
        fill(255);
        stroke(152,8,8);
        strokeWeight(5);
        rect (100,200, 60,10);// left eye
        rect (240,200,60,10);//right eye

        //pupils
        fill(0);
        noStroke();
        rect (100,200, 10,10);
        rect (240,200,10,10);

        //hilight
        fill(255);
        noStroke();
        rect (100,200, 3,3);
        rect (240,200,3,3);


        //eyebrows
        fill(152,8,8);
        noStroke();
        rect (100,190, 60,10);
        rect (240,190,60,10);

        //mouth
        rect (170,250,60,10);
        fill(0);
        rect (180,251,40,6);

        //ears
        fill(152,8,8);
        noStroke();
        triangle(100,100,100,150,150,120);
        triangle(300,100,300,150,250,120);


    } else if (num==2){
    //sad face
        noStroke();
         background(84,108,254);
         fill (102,185,248);
         ellipse(200, 150,200, 180);

         //eyes
         fill(200);
         stroke (84,108,254);
         strokeWeight (4);
        ellipse (160,150, 40,20);// left eye
        ellipse (240,150,40,20);//right eye

        fill (0); //pupil
        ellipse (160,150, 20,20);
        ellipse (240,150,20,20);

        fill(255); //hilight
        noStroke();
        ellipse(165,145, 10,5);
        ellipse (245,145,10,5);

        //mouth
        fill(84,108,254);
        ellipse(200, 200,50, 30);

        fill (102,185,248);
        ellipse(200, 210,50, 30);


    }else {
    //happy face
        background(255,138,23);
        fill (255,240,0); 
        ellipse(150, 150,200, 150);

          //eyes
         fill(255);
        ellipse (100,150, 40,20);// left eye
        ellipse (200,150,40,20);//right eye

        fill (0); //pupil
        ellipse (100,150, 20,20);
        ellipse (200,150,20,20);

        fill(255); //hilight
        noStroke();
        ellipse(105,145, 10,5);
        ellipse (205,145,10,5);

        //mouth
        fill(255,138,23);
        ellipse(150, 190,50, 30);

        fill (255,240,0);
        ellipse(150, 180,50, 30);

    }

}

function mousePressed() {
   
num = num+1;
if (num==4)
{
    num=1;
}


}

For this assignment I decided to represent three emotions: Angry, Sad and Happy. I used if else statements and the variable num for function mouseIsPressed to change the faces and the background color to represent each emotion.

Lingfan Jiang – Project 02- Variable Face

sketch

// Lingfan Jiang
// Section B
// lingfanj@andrew.cmu.edu
// Project-02-Variable-Face


var eyeWidth = 50;
var eyeHeight = 80;
var angle = 0;
var eyeSize = 1
var eyeBall = 50;
var eyeBrow = 75;
var eyeBrow2 = 65;


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

}

function draw(){
    background(255);
    translate(width/2,height/3);

    stroke(0);
    strokeWeight(8);
    //eyebrow on the left
    beginShape();
    curveVertex(-100, -50);
    curveVertex(-75, -eyeBrow);
    curveVertex(-50, -eyeBrow);
    curveVertex(-25, -50);
    endShape();

    //eyebrow on the right
    beginShape();
    curveVertex(100, -50);
    curveVertex(75, -eyeBrow-20);
    curveVertex(50, -eyeBrow2-30);
    curveVertex(25, -50);
    endShape();

    strokeWeight(2);
    angleMode(DEGREES);
    ellipseMode(CENTER);

    //left eye
    push();
    rotate(angle);
    fill(255);
    ellipse(-50,0,eyeWidth,eyeHeight);
    fill(0);
    ellipse(-eyeBall,0,7,10);
    pop();

    //right eye
    push();
    scale(eyeSize);
    fill(255);
    ellipse(50,0,eyeWidth,eyeHeight);
    fill(0);
    ellipse(eyeBall,0,7,10);
    pop();

    // mouse (using eyebrow to draw the mouse)
    stroke(0);
    strokeWeight(3);
    scale(eyeSize);
    beginShape();
    curveVertex(-75, 1.5 * eyeBrow2);
    curveVertex(-25, 1.7 * eyeBrow);
    curveVertex(25, 1.7 * eyeBrow);
    curveVertex(75, 1.5 * eyeBrow2);
    endShape();

    //nose
    fill(0);
    ellipse (0,40,15,5);
    
}

function mousePressed(){
    eyeWidth = random(30,50);
    eyeHeight = random(50,80);
    angle = random(-45,0);
    eyeSize = random(0.5, 1.5);
    eyeBall = random(35,60)
    eyeBrow = random(25,85);
    eyeBrow2 = random(35,65);
}

In this project, I am inspired by those cartoon faces online. Therefore, I decided to go with this kind of style without the shape of face or color. One thing I found pretty interesting is that the random syntax in javascript is not completely random. Before starting this project, I assumed that I could use the same random variable to do different values on different objects. As it turns out, it is a bit different. In the end, I am satisfied with the final result, but it does have some problems when certain parts grow too big and intersect with other shapes.

reference: http://www.yim778.com/group/facial-expressions-pictures-cartoons/