Month: September 2018

Miranda-Project-02-Variable-Face

sketch

/* Miranda Luong
Section E
mluong@andrew.cmu.edu
Project-02-Variable-Face
*/

var eyePupil = 25;
var faceWidth = 200;
var faceHeight = 200;
var eyeX = 5
var eyeY = 5
var bodyColor = 80;
var mouthHeight = 10;
 
function setup() {
    createCanvas(300, 300);

}

function draw() {
    background(156, 190, 215);
    //hair
    fill(bodyColor, 150, 231)
    rect(width/3, height/3 + 100, 100, 100);
    //head
    strokeWeight(5);
    fill(252,221,201);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    //eyes
    strokeWeight(1.5);
    fill(255);
    ellipse(eyeLX, height / 2, faceWidth/2,faceWidth/2);
    ellipse(eyeRX, height / 2, faceWidth/2,faceWidth/2);
    //eyeIris
    strokeWeight(0);
    fill(223,108,107);
    ellipse(eyeLX+eyeX,height/2+eyeY,eyePupil,eyePupil);
    ellipse(eyeRX+eyeX,height/2+eyeY,eyePupil,eyePupil);
    //eyePupil
    fill(0);
    ellipse(eyeLX+eyeX,height/2+eyeY,eyePupil/2,eyePupil/2);
    ellipse(eyeRX+eyeX,height/2+eyeY,eyePupil/2,eyePupil/2);
    //eyeReflection
    fill(255);
    ellipse(eyeLX+eyeX+1,height/2+eyeY,eyePupil/5,eyePupil/5);
    ellipse(eyeRX+eyeX+1,height/2+eyeY,eyePupil/5,eyePupil/5);
    //mouth
    strokeWeight(1.5);
    fill(255)
    ellipse(width/2+faceWidth/4 - 20, height/2+faceHeight/4 + 5, 30, mouthHeight);

}
 
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 110.
    faceWidth = random(75, 110);
    faceHeight = random(100, 200);
    eyeX = random(-9,9);
    eyeY = random(-9,9);
    bodyColor = random(150, 250);
    mouthHeight = random(10,30)




}

It was fun to make animated faces. I found it to be a lighthearted exercise that helped in practicing coding using variables.

Sean Meng-Looking Outwards 02

How Generative Design Affect Meets Architecture

The canopy of British Museum, Foster and Partners

The Great court at British Museum is designed by Foster and Partners architecture firm. The amazing part of this project is the dome(roof) is in a very hi-tech architecture. This roof was designed firstly by modeling in Grasshopper, which is an architecture software that can help architects to design complex in a parametric method. Because the software is based on algorithm. The canopy is in a engineering and economy form. The unique geometric shape is used to expand the gap between the courtyard and the reading room. Most importantly, The structure and the frame is designed to reduce the solar gain. Without the engineering and physical feature that is made by the modeling tools, the architects can not come with this precise and scientific canopy from scratch. From my perspective, generative modeling tool makes it possible for designers, includes architects, to collaborate engineering skills.

https://www.fosterandpartners.com/projects/great-court-at-the-british-museum/

 

Yiran Xuan – Looking Outwards – 02

Minecraft  is probably one of the most well-known and well-experienced examples of generative art. A terrain generated by its algorithm can grow until it can fit the entirety of your computer’s hard drive, which is easily greater than the surface area of our planet. Each new section generated is also unique; though they follow easily understood patterns and rules, every generated section is a new area for exploration, with a random distribution of resources and dangers. The idea is to emulate the natural world, and despite the distinctive blocky graphic style, the feel of a natural world created out of fundamental forces is achieved.

Yoo Jin Shin-Project-02-Variable-Face

Project-02

// Yoo Jin Shin
// Section B
// yoojins@andrew.cmu.edu
// Project-02-Variable-Face

var eyeSize = 50;

// top pupil
var pupilSizeL = 5;
var pupilSizeR = 6;
var pupilLeftX = 150;
var pupilLeftY = 154;
var pupilRightX = 220;
var pupilRightY = 154;

// bottom pupil
var pupilSize2L = 10;
var pupilSize2R = 12;
var pupilLeftX2 = 130;
var pupilLeftY2 = 164;
var pupilRightX2 = 210;
var pupilRightY2 = 166;

var faceWidth = 270;
var faceHeight = 200;
var mouthStart = 30;
var mouthStop = 122;

var backgroundR = 3;
var backgroundG = 117;
var backgroundB = 0;

var faceR = 244;
var faceG = 240;
var faceB = 132;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(backgroundR, backgroundG, backgroundB);
    noStroke();

    // face
    fill(faceR, faceG, faceB);
    ellipse(180, 180, faceWidth, faceHeight);

    // left eye
    fill(0);
    ellipse(140, 160, eyeSize, eyeSize);

    // left pupils
    fill(255);
    ellipse(pupilLeftX, pupilLeftY, pupilSizeL, pupilSizeL);
    ellipse(pupilLeftX2, pupilLeftY2, pupilSize2L, pupilSize2L);

    // left eyebrows
    fill(backgroundR, backgroundG, backgroundB);
    rect(125, 123, 25, 7, 3);

    // right eyes
    fill(0);
    ellipse(220, 160, eyeSize, eyeSize);

    // right pupils
    fill(255);
    ellipse(pupilRightX, pupilRightY, pupilSizeR, pupilSizeR);
    ellipse(pupilRightX2, pupilRightY2, pupilSize2R, pupilSize2R);

    // right eyebrows
    fill(backgroundR, backgroundG, backgroundB);
    rect(210, 123, 25, 7, 3);

    // mouth
    fill(backgroundR, backgroundG, backgroundB);
    arc(180, 180, 20, 40, mouthStart, mouthStop);
}
 
function mousePressed() {
    eyeSize = random(37, 55);
    pupilSizeL = random(3, 9);
    pupilSizeR = random(3, 9);
    pupilSize2L = random(7, 12);
    pupilSize2R = random(7,12);

    pupilLeftX = random(142, 153);
    pupilLeftY = random(150, 155);
    pupilLeftX2 = random(142, 153);
    pupilLeftY2 = random(162, 169);

    pupilRightX = random(207, 218);
    pupilRightY = random(150, 155);
    pupilRightX2 = random(207, 218);
    pupilRightY2 = random(162, 169);

    faceWidth = random(150, 300);
    faceHeight = random(150, 300);

    faceR = random(0, 255);
    faceG = random(0, 255);
    faceB = random(0, 255);

    mouthStart = random(1, 360);
    mouthStop = random(1, 360);

    backgroundR = random(0, 255);
    backgroundG = random(0, 255);
    backgroundB = random(0, 255);
}

I tried creating a googly-eye-effect using the different variables by focusing the mouse-click changes mainly on the eyes.

Looking Outwards-02 Generative Art Travis Fitch-Veronica Wang

 

I am inspired by Travis Fitch’s art pieces that are generated from minimal surface geometries. I was introduced to his work by one of his former thesis advisors on minimal surface design and the process. He used Rhino modeling as well as a custom Grasshopper script to create a minimal surface module, with inputs being curves or meshes. I have also tried playing with similar scripts and using components such as ‘mesh relaxation’, ‘exoskeleton’, and ‘iso surface’. His wearable pieces were taking 3D printed rigid modules and connecting them to create a flexible piece of ‘fabric’. There are also many different materials in his products, including porcelain, metal, and nylon.

Yiran Xuan Project-02-Variable-Face

This sketch was made by adapting the template. The rectangular face and many other elements are centered on the canvas by frequent use of the canvas dimensions (stored as variables) divided by half, in the shape parameters.

sketch


var noseheight = 150
var nosewidth = 50;

var facewidth = 200;
var faceheight = 150;

var eyesize = 20;
var eyedistance = 100;

var eyecolor = 0;

var canvasheight = 640;
var canvaswidth = 480;

function setup() {
    createCanvas(canvaswidth, canvasheight );
}

function draw() {
    background(180);

    fill(100);
    //draw the face;
    rect((canvaswidth-facewidth)/2, (canvasheight-faceheight)/2, facewidth, faceheight);
    //draw the eyes
    fill(eyecolor);
    ellipse((canvaswidth - eyedistance)/2, 300, eyesize, eyesize);
    ellipse((canvaswidth + eyedistance)/2, 300, eyesize, eyesize);
 	//draw the nose
 	fill(100);
 	triangle((canvaswidth - nosewidth)/2, canvasheight/2, (canvaswidth + nosewidth)/2, canvasheight/2, canvaswidth/2, noseheight);
 	//draw the mouth

 	line(canvaswidth/2-50, (canvasheight+faceheight)/2 - 50, canvaswidth/2+50, (canvasheight+faceheight)/2 - 50);
}	

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.
    eyecolor = random(0, 255);

    eyesize = random(10, 30);
    eyedistance = random(75, 125);

    nosewidth = random(30, 70);
    noseheight = random(canvasheight/2 - 20, canvasheight/2 + 20);
}

 

Katie Polhemus – Looking Outwards – 02

After scrolling through some of the sources provided, I became most inspired by the Dancing Robots installation at Cinder Gallery. The piece is inspired by the robotic arms producing cars at the Chrysler plant in Detroit, MI. I find it fascinating that the artists were able to produce such an abstract, thought provoking work of art out of something so mundane, materialistic, and consumer-driven.

The artists used their own custom hardware to detect vibrations in the sculpture, and their own custom application to add new points to triangles on any location of the projection. This allowed the artists to “dynamically change the projection configuration.”

This piece ties into this week’s theme of generative art by the fact that it is an interactivity-based sculpture. The audience is encouraged to listen to the music being played and to touch the sculpture; resulting, the live projections shift, and the music becomes “more immersive.”

Source.

Joanne Lee – Looking Outward 02

One of the biggest attractions of New York City during the holiday season is the Saks Fifth Avenue Holiday Light Show and holiday windows. As someone who grew up in northern New Jersey, I often went to the city to see this particular light show and it indicated the true start of the holidays. Although I was unable to find the name of the entire design team behind this brilliant light display, Fred Schwam is the CEO of the team. Schwam and his team have been installing this ten story tall light show since 2004 and change the light show every year.

In 2017, Saks Fifth Avenue and Disney collaborated for the 80th anniversary of Snow White and the Seven Dwarves. This theme was mainly reflected in the shopping windows where they implemented 3d layering techniques to incorporate original art from the actual film. Schwam and his design team takes great care to put together this holiday display, taking nearly a year to plan and execute. The design team was very sensible in designing the Snow White characters in modern day fashion while also 3-D projecting original scenes from the movie. This combines a timeless classic with a modern day take.

3-D layering technique used in Snow White themed holiday windows display, collaboration between Saks Fifth Avenue x Disney

 

Sean Meng-Project-02-Variable-Face

I started this project based on my self portrait and explored the command to change the size of the image both randomly and steadily.

sketch


//Sean Meng
//Section B
//hmeng@andrew.cmu.edu
//Assignment1

function setup() {
    createCanvas(480, 640);
    background(0);
    text("p5.js vers 0.7.1 test.", 10, 15);
}

var mouth1=30
var mouth2=5
var glassescolor=0
var BW1=50
var BW2=80
var BW3=10
var BW4=120
var earH=40
function draw() {
    fill(255, 255, 255)
    rect(0, 0, 300, 600)

    //ears
    fill(225, 197, 164)
    ellipse(380, 330, 20, earH)
    strokeWeight(0)
    ellipse(220, 330, 20, earH)
   
    //face
    strokeWeight(0)
    fill(236, 212, 190)
    rect(220, 250, 160, 100)
    triangle(220, 350, 300, 350, 300, 420)
    triangle(220, 350, 240, 390, 300, 420)
    quad(300, 420, 300, 350, 380, 350, 340, 400)

    //hair
    fill(0)
    triangle(205, 250, 290, 275, 405, 250)
    triangle(205, 250, 230, 220, 300, 220)
    triangle(230, 220, 265, 200, 300, 220)
    rect(265, 200, 60, 30)
    triangle(265, 200, 300, 195, 300, 220)
    triangle(205, 250, 300, 220, 300, 250)
    rect(370, 240, 10, 70)

    //glasses
    fill(glassescolor)
    ellipse(255, 315, 60, 60)
    fill(245, 245, 245)
    ellipse(255, 315, 53, 53)
    fill(glassescolor)
    ellipse(335, 315, 60, 60)
    fill(245, 245, 245)
    ellipse(335, 315, 53, 53)
    strokeWeight(1)
    fill(200)
    rect(283.5, 309, 22, 3)
    rect(219, 309, 7, 3)
    rect(364, 309, 16, 3)
    
    //nose
    strokeWeight(2)
    line(290, 315, 290, 350)
    line(290, 350, 300, 350)

    //mouth
    fill(220, 145, 140)
    rect(280, 380, mouth1, mouth2)

    //background buildings
    strokeWeight(0)
    fill(153, 138, 138)
    rect(370, 470, BW1, 160)
    rect(480, 500, BW2, 100)
    rect(395, 440, BW3, 40)
    fill(136, 115, 117)
    rect(400, 520, BW4, 80)

    //backgrounds 2

    strokeWeight(12)
    triangle(60, 170, 130, 170, 130, 50)
}    

function mousePressed(){
    //if you click the mouse, the glasses is going to change from black to white.
    //if you click the mouse, the mouth and the building in the background are going to be bigger.
    // 
    mouth1 = random(10, 60)
    mouth2 = random(1, 20)
    glassescolor+=20
    BW1+=3
    BW2+=3
    BW3+=3
    BW4+=3
    earH = random(20, 80)
}

 

Jennifer DeLuna Project 02

/*Jennifer DeLuna
SectionB
jdeluna@andrew.cmu.edu
project-02*/

//defined variables
var eyeSize = 20;
var faceWidth = 300;
var faceHeight = 270;

var skinC1 = 60;
var skinC2 = 200;
var skinC3 = 180;

var toothH=10
var toothW=10

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

function draw() {
    background (162, 232, 232);
    //face
    fill(skinC3, skinC2, skinC1)
    ellipse(width/2, height/2, faceWidth*1.3, faceHeight*1.3)
    fill(skinC2, skinC3, skinC1)
    ellipse(width/2, height/2, faceWidth*1.2, faceHeight*1.2)
    fill(skinC1, skinC3, skinC2)
    ellipse(width/2, height/2, faceWidth*1.1, faceHeight*1.1)
    fill(skinC1, skinC2, skinC3);
    noStroke();
    ellipse(width/2, height/2, faceWidth,  faceHeight);

    //mouth
    fill(0)
    rect(width/2-15, height/2 +30, 30,45,7)
    fill(255)
    rect(width/2,height/2 +30,toothW, toothH,2)
    fill(237, 116, 116)
    rect(width/2-15,height/2+ 65,30,10,5);




    //eyes
    var eyeL = width / 2 - faceWidth * 0.25;
    var eyeR = width / 2 + faceWidth * 0.25;
    fill(0)
    noStroke()
    ellipse(eyeL, height / 2, eyeSize, eyeSize);
    ellipse(eyeR, height / 2, eyeSize, eyeSize);
}

function mousePressed() {
    faceWidth = random(260, 350);
    faceHeight = random(230, 300);
    eyeSize = random(10, 30);
    skinC1 = random(0, 255);
    skinC2 = random(0, 255);
    skinC3 = random(0, 255);
    toothH=random(5,15);
    toothW=random(8,11)
}