Month: August 2018

Jason Zhu-Project-01-Face

sketch

/* Jason Zhu
Section E
jlzhu@andrew.cmu.edu
Project-01L Self Portrait (Face)
*/

function setup() {
    createCanvas(600, 600);
    background(230, 180, 180);
}

function draw() {
	noStroke()

	//Background 2
	fill(150, 100, 100);
	rect(200, 200, 340, 340, 30, 30, 30, 30);

	//Neck
	fill(250, 220, 190);
	rect(300, 430, 60, 250, 90, 90, 90, 90);

    //Body
	fill(180, 220, 200);
	rect(300, 590, 350, 400, 90, 90, 0, 0);

	//Shirt Collar
	fill(250, 220, 190);
	ellipse(300, 385, 60, 60, 90, 90, 90, 90);

	//Arm Left
	fill(190, 230, 205);
	rect(150, 580, 80, 300, 45, 45, 20, 20);

	//Arm Right
	fill(190, 230, 205);
	rect(450, 580, 80, 300, 45, 45, 20, 20);

	//Body Fill
	fill(150, 120, 220);
	ellipse(300, 520, 85, 100, 90, 90, 0, 0);

	//hair
	fill(0, 10, 20);
	ellipse(300, 220, 260, 260, 180, 180, 0, 0);

	//face 1
	fill(250, 220, 190);
	rectMode(CENTER);
	ellipse(300, 250, 250, 250, 90, 90, 0, 0);
 
	//hair 2
	fill(0, 10, 20);
	rectMode(CENTER);
	ellipse(300, 160, 220, 100, 180, 180, 0, 0);

	//ear Left
	fill(250, 220, 190);
	strokeWeight(0)
	ellipse(170, 270, 30, 50);
	ellipse(168, 275, 25, 40);

	//ear Right
	fill(250, 220, 190);
	strokeWeight(0)
	ellipse(430, 270, 30, 50);
	ellipse(432, 275, 25, 40);

    //face 2
    fill(250, 220, 190);
    fill(10);
    arc(254,260,40,40,0,PI,OPEN);
    strokeWeight(0);
    arc(348,260,40,40,0,PI,OPEN);
    fill(255, 227, 215);
    ellipse(255,260,10,10,0);
    ellipse(350,260,10,10,0);

	//Mouth
    fill(255,161,119);
    ellipse(300,330,40,30);
}

I think this assignment really opened my eyes. I thought this was an entertaining assignment that helped me better understand the forms and factors that made me, me. I really enjoyed experimenting and although I could not render every aspect of myself as I had wanted, it was still an informative and introspective experience overall.

Philip Gates – Looking Outwards 01

Yesterday Tomorrow, by Annie Dorsen

Yesterday Tomorrow, photo by Maria Baranova

In 2016, I saw the theater director Annie Dorsen’s performance piece Yesterday Tomorrow, in which three performers sing a song over and over. The song starts out as “Yesterday” by the Beatles, and ends as “Tomorrow” from the musical Annie. The transition between these two songs is accomplished by an algorithm that changes both the notes and the lyrics by a very small amount with every repetition, and does so differently at each performance.

Dorsen has been using algorithms in performance for several years, beginning with Hello Hi There, a work for two custom-programmed chatbots, in 2010. The algorithm for Yesterday Tomorrow was developed specifically for the project, in collaboration with a programmer and a researcher from IRCAM, a French institute for the study of music and science.

I am inspired by the use of programming to tap into very human concerns and emotions. Though a program is of course emotionless, its deployment in performance can produce a variety of emotions in the audience: nostalgia, anxiety, frustration, melancholy. For me, this piece was a profound meditation on the passage of time and the fleeting uncertainty of the present moment.

Yoo Jin Shin-Project-01-Face

Portrait

// Yoo Jin Shin
// Section B
// yoojins@andrew.cmu.edu
// Project-01

function setup() {
    createCanvas(600, 600);
    background("#fff0f2");
    //text("p5.min.js vers 0.5.12 test.", 10, 15);
}

function draw() {
    // hair
    noStroke();
    fill("#362f2d");
    ellipse(300, 300, 400, 540);
    rect(100, 300, 400, 300 )

    // face
    noStroke();
    fill("#ffe1c0");
    ellipse(300, 250, 320, 350);

    // mouth
    stroke('#222222');
    strokeWeight(4);
    arc(300, 300, 130, 140, TWO_PI, PI);

    // ears
    noStroke();
    ellipse(150, 250, 80, 100);

    // earrings
    noStroke();
    fill("#ff9900");
    ellipse(144, 300, 20, 30);
    fill("#cc6600");
    ellipse(144, 300, 20, 20);
    rect(120, 210, 12, 12, 3);
    rect(115, 224, 10, 10, 3);

    // eyes
    noStroke();
    fill('#222222');
    ellipse(230, 240, 70, 77);
    ellipse(370, 240, 70, 77);
    fill(255);
    ellipse(220, 220, 20, 20);
    ellipse(380, 220, 20, 20);

    // eyelashes
    stroke('#222222');
    strokeWeight(2.5);
    line(200, 200, 210, 210);
    line(193, 210, 203, 220);

    // bangs
    noStroke();
    fill("#362f2d");    
    triangle(130, 200, 170, 200, 260, 50);
    triangle(115, 200, 150, 200, 260, 50);

    // shirt
    noStroke();
    fill("#000066");
    arc(300, 600, 370, 280, PI, TWO_PI);

    // neck
    fill("#ffe1c0");
    rect(260, 400, 80, 63);
    triangle(260, 463, 300, 500, 340, 463);

}

It seems like a long journey to get to the point in which coding this portrait with Javascript will be faster than creating it with Photoshop.

Miranda Luong -LookingOutwards-1

Expansive view of Connected Worlds at NYSCI.
Visitors interacting with the digital environments projected on the walls.
Children use gestures to plant seeds. 

Connected Worlds at the New York Hall of Science is a large-scale immersive and interactive digital ecosystem. Visitors are invited to make gestures, movements and decisions to manipulate the environment around them. As visitors explore and play, they learn to realize that their actions have both short and long-term effects on their surrounding world. Upon visiting, I read that the installation was designed to encourage participants to adopt a more systems thinking approach to sustainability. In this space, users contribute first hand to feedback loops, create casual links and influence the equilibrium of the environment. Connected Worlds is a great example of an effective project that is fun but very educating. The task of educating children on the core concepts of sustainable science is not an easy one. I’ve encountered many exhibits that try to educate children on sustainable science such as the Carnegie Museum of Natural History’s “We are Nature: Living in the Anthropocene.” While these exhibits show a lot of effort to educate visitors on the need to think of local and global effects of their actions, the strongest feelings taken are guilt, rather than real understanding. The creators of Connected Worlds understood that the best way to teach someone something is to have them do it themselves. By providing children the chance to “build” their own environments, they could see the direct effects their actions had on the micro and macro level— no complicated explanation necessary.

Xiaoyinm-Project-01-Face

sketch

function setup() {

    createCanvas(500,700);
    background(0,24,124);
}

function draw(){
//canvas
  noSmooth();
  noStroke();
  fill(252,123,145);
  rect(0,100,500,500);

//face.left
  strokeWeight(3);
  noFill();
  stroke(255,27,143);
  beginShape();
  curveVertex(219, 100); // the first control point
  curveVertex(219, 100); // is also the start point of curve
  curveVertex(208, 149);
  curveVertex(211, 195);// the last point of curve
  curveVertex(211, 195); // is also the last control point
  endShape();

  beginShape();
  curveVertex(232, 100); // the first control point
  curveVertex(232, 100); // is also the start point of curve
  curveVertex(230, 145);
  curveVertex(225, 182);
  curveVertex(216, 225);
  curveVertex(221, 270);
  curveVertex(237, 302);
  curveVertex(273, 350);// the last point of curve
  curveVertex(273, 350); // is also the last control point
  endShape();

  line(197,152,195,165);
  line(195,165,197,216);
  line(197,216,216,225);
  line(232,100,486,100);

  noFill();
  stroke(0,24,124);
  beginShape();
  curveVertex(222, 100); // the first control point
  curveVertex(222, 100); // is also the start point of curve
  curveVertex(220, 145);
  curveVertex(215, 182);
  curveVertex(206, 225);// the last point of curve
  curveVertex(206, 225); // is also the last control point
  endShape();

  line(208, 149,199,180);


//face.right
  strokeWeight(3);
  noFill();
  stroke(255,27,143);
  beginShape();
  curveVertex(486, 100); // the first control point
  curveVertex(486, 100); // is also the start point of curve
  curveVertex(472, 198);
  curveVertex(465, 229);
  curveVertex(456, 260);// the last point of curve
  curveVertex(456, 260); // is also the last control point
  endShape();

  line(471,219,456,260);

  stroke(0,24,143);
  beginShape();
  curveVertex(471,270);
  curveVertex(471,270);
  curveVertex(460,295);
  curveVertex(439,317);
  curveVertex(439,317);
  endShape();
  
  noStroke();
  fill(0,24,124);
  quad(486,100,472,198,500,214,500,100);
  triangle(465,229,472,198,491,199);
  triangle(480,195,500,213,471,270);

//eyebrows
  triangle(251,129,294,115,298,129);
  quad(294,115,298,129,340,145,330,128);
  quad(390,148,392,158,435,147,432,137);
  quad(464,150,463,158,435,147,432,137);

//eyes
  noFill();
  stroke(0,24,124);
  strokeWeight(10);
  arc(290, 153, 80, 50, PI/6, 5*PI/6);
  arc(420, 170, 80, 50, PI/6, 5*PI/6);

  noFill();
  stroke(255,27,143);
  strokeWeight(3);
  arc(290, 155, 80, 50, PI/6, 5*PI/6);
  arc(420, 173, 80, 50, PI/6, 5*PI/6);

//nose
  noStroke();
  fill(0,24,124);
  triangle(324,257,355,260,341,242);

//mouth
  noStroke();
  fill(0,24,124);
  ellipse(276,290,10,8);
  ellipse(383,309,15,10);
  triangle(288,295,331,304,323,312);
  triangle(365,307,331,304,323,312);

  fill(255,27,143);
  ellipse(250,270,20,18);
  ellipse(430,280,30,20);
//neck
  strokeWeight(3);
  noFill();
  stroke(255,27,143);
  beginShape();
  curveVertex(243, 312);// the first control point
  curveVertex(243, 312);// is also the start point of curve
  curveVertex(236, 332); 
  curveVertex(224, 358);
  curveVertex(208, 379);
  curveVertex(185, 395);// the last point of curve
  curveVertex(185, 395); // is also the last control point
  endShape();

//clothes
  stroke(0,24,124);
  line(218,429,142,378);
  line(37,402,142,378);
  line(37,402,0,450);
  line(451,414,500,430);
  line(299,353,327,355);
  fill(0,24,124);
  triangle(331,480,451,414,438,407);

//hair
  noStroke();
  fill(0,24,124);
  quad(218,100,207,148,170,155,173,100);
  triangle(207,148,173,100,172,175);
  triangle(194,200,173,100,172,175);
  quad(233,336,192,344,202,373,225,355);

//earings
  ellipse(195,220,10,10);
  ellipse(199,233,10,10);
  ellipse(206,241,10,10);
 }

I first created a picture in photoshop first and then found the coordinates to create the code.

Jennifer DeLuna-Looking Outward-01

I first saw this work during one of the Artist Lectures hosted by the School of Art last year. Ian Cheng’s computer generated simulations, which he titles Emissaries, are ever changing environments and narratives. There are three Emissaries, based all in different environments. One is based in a Volcano, another in a fertile crater, and the last is based in an Atoll.  In his process, he draws from the works of Darwin and the concept of video games. The simulations are essentially video games that play themselves; video games that become an avenue to explore deeper themes such as evolution and behavior.

http://iancheng.com/

Liz-Maday-Self-Portrait

liz-maday-portrait

//Self Portrait
//Elizabeth Maday

function setup() {
    createCanvas(600, 600);
    background(220);
    strokeWeight(5);
    text("p5.js vers 0.7.1 test.", 10, 15);
}

function draw() {
    background(252, 226, 97); 

    //caption
    textSize(27);
    textStyle(BOLD);
    text("This is me.", 28, 238);

    //body
    var c = color(66, 148, 34); 
    fill(66, 148, 34);
    ellipse(300, 600, 200, 600);

    //ear left
    var c = color(206, 141, 9);
    fill(206, 141, 9);
    ellipse(192, 270, 30, 40);

    //ear right
    var c = color(206, 141, 9);
    fill(206, 141, 9);
    ellipse(407, 270, 30, 40);

    //head
    fill(206, 141, 92); //this is the skin color
    ellipse(300, 300, 220, 275);

    //nose
    arc(300, 325, 20, 20, 0, PI);

    //right eye
    var c = color(0, 0, 0); 
    fill(0, 0, 0);
    ellipse(275, 245, 10, 10);

    //left eye
    ellipse(325, 245, 10, 10);

    //hat
    var c = color(255, 0, 0); 
    fill(255, 0, 0);
    arc(300, 162, 40, 50, PI, TWO_PI);

    //brim
    var c = color(255, 0, 0); 
    fill(255, 0, 0);
    ellipse(242, 161, 76, 10);

    //earring
    var c = color(0, 65, 251); 
    fill(0, 65, 251);
    ellipse(415, 275, 10, 10);

    //arms
    line(395, 495, 470, 550);
    line(470, 550, 550, 500);
    line(208, 460, 125, 275);

    //mouth
    line(287, 372, 313 ,372);

    //hands
    var c = color(0, 0, 0); 
    fill(0, 0, 0);
    ellipse(550, 500, 10, 10);

    var c = color(0, 0, 0); 
    fill(0, 0, 0);
    ellipse(125, 275, 10, 10);

    //hair
    var c = color(106, 66, 27); 
    fill(106, 66, 27);
    triangle(280, 164, 318, 164, 298, 194);

    var c = color(106, 66, 27); 
    fill(106, 66, 27);
    triangle(240, 184, 280, 164, 267, 213);

    var c = color(106, 66, 27); 
    fill(106, 66, 27);
    triangle(318, 164, 360, 184, 333, 213);

    //stripe
    var c = color(0, 65, 251); 
    fill(0, 65, 251);
    rect(210, 475, 180, 16);
}

In this project, I really enjoyed the creativity that was involved, as well as the challenge of figuring out how to produce what you want to see. This was one of my first times using code, and it really gave me an insight into the process. I am excited for the time when I will know how to realize more complicated ideas.

KPolhemus – Looking Outwards-01

When thinking about what to research for this first Looking Outwards assignment, my mind immediately went to Florence, Italy. Once the cradle of the Renaissance, this Tuscan town now serves as headquarters for art restoration and preservation. Two years ago, in 2016, la città commemorated the 50-year anniversary of the devastating 1966 flood of the Arno. It was the worst flood the city had seen in 400 years, damaging countless numbers of priceless works of art. Among them was Giorgio Vasari’s 1546 “ultima cena,” a 21-foot wood-panel painting. It was submerged in the floodwaters for over 48 hours inside la basilica di Santa Croce.

The Opificio delle Pietre Dure (OPD) is an “art hospital,” dedicated to restoring and preserving works of art like Vasaris’ last supper. This painting in particular sat untouched for a number of decades, until the OPD felt confident enough with the available technology to begin restoration. Using microscopes with recordings of photographic and digital images, x-ray equipment, infrared cameras/scanners, spectrocolorimeters, and a number of other advanced technologies, the OPD dwas able to restore Vasari’s masterpiece and put it back on display in Santa Croce.

Source

I chose to write about this topic because although the technology used by OPD is not necessarily used to create entirely new works of art, it is used to restore old masterpieces to a former state of glory. In doing so, the OPD uses this technology to provide the public with countless works of art that could have very easily been lost for good.

Jacky Tian-Looking Outwards 01

Looking Outwards 01 Bund Finance Center

Front view of Bund Finance Center in Shanghai, China.

In my hometown Shanghai, China, a new mixed-use complex called the Bund Finance Center has just finished its last construction phase. Designed by Norman Foster’s Architecture Firm and Thomas Heatherwick’s design studio, The Bund Finance Center becomes a new iconic figure for The Bund in Shanghai.

The goal of this building is combining elements from both traditional chinese theatre and the most advanced digital technology. This three stories tall building contains a curtain-like facade of bronze tubes that resonant the shape of bamboo. These bronze tubes are organized in three layers, creating a semi-transparent screen for the building. The facade, which many architects described it as “a moving veil”, can adapt and transform based on the use of the building, therefore, exposes the stage and balcony to the views towards Pudong.

As an architecture major student, I was inspired by the connection between architecture and digital technology. With the help of technology, this building is not static anymore. It becomes a living machine in which it can achieve functionality and aesthetic at the same time.

Links to original sources:

https://www.homedit.com/building-with-dynamic-facades/

Sean Meng-Looking Outwards 01

Dynamic Tower, Dubai

As a architecture student, I’m always interested in exploring the cross area between art and technology. And some buildings are the perfect combination of these two area. This building is called Dynamic Tower in Dubai and it is designed by David Fisher and his firm. This skyscraper is 1378 feet tall and has 80 floors. The architect intended to let the building “dance” by designing each floor to rotate a maximum of 6 meters per minute, or one full rotation in 180 minutes. What is really fascinating for me is how the architect challenges the traditional perspective that buildings should be solid and still and brings life to the architecture by applying technology. It inspires me to think about how technology and make architecture artful and attractive other than just plain boxes. However, the building took longer time to be finished than expectation due to the enormous amount of efforts and budget required.

 

Resources:

https://www.cnn.com/2017/02/20/world/rotating-dubai-tower-trnd/index.html