Month: August 2018

Joanne Lee – Looking Outward 01

Guests can enter a portal to where another moon orbits.

Lunar Surface is a collaboration between photographer Eunyoung Kim and artists Elliot Woods and Mimi Son. They have created multiple projects already in the past by combining code, form, material, concept, and mechanism. This particular project was created and put on display for two years (2014-15). The artists worked inside the Bucheon city Incinerator, which is a processing plant that was decommissioned back in 2010.

This project is brought to life by blowing 50 tonnes of air onto a 20 meter flag of silk, representing the fabric of a flag. The fabric is tracked by a 3D camera and a digital light is projected onto the fabric based on its constantly evolving shape. This project in particular inspires me because I have always wondered what it would be like to be out in space and thus started looking for interactive exhibits. This exhibit provides a unique, but essential experience to guests by having them observe the moon up close. As the studio says, it makes your question reality versus virtuality. Although I can no longer visit this exhibit, I feel that I can still explore the exhibit through videos such as the one below.

Philip Gates – Face Project

gates-face

function setup() {
    createCanvas(500,500);
    background(255);

}

function draw() {

    //head
    fill(242,208,239);
    noStroke();
    ellipse (250,250,500,700);

    //eyes
    stroke (0);
    strokeWeight (1);
    fill(255);
    ellipse(150,250,250,250);
    ellipse(350,250,250,250);

    //iris
    fill(19,175,26);
    noStroke();
    ellipse(150,200,100,100);
    ellipse(350,200,100,100);

    //gold ring left side
    stroke(190,190,6)
    strokeWeight (3);
    noFill();
    beginShape();
    curveVertex (130,180);
    curveVertex (135,165);
    curveVertex (150,170);
    curveVertex (165,165);
    curveVertex (170,180);
    curveVertex (185,185);
    curveVertex (180,200);
    curveVertex (185,215);
    curveVertex (170,220);
    curveVertex (165,235);
    curveVertex (150,230);
    curveVertex (135,235);
    curveVertex (130,220);
    curveVertex (115,215);
    curveVertex (120,200);
    curveVertex (115,185);
    endShape(CLOSE); 

    noFill();
    curve(130,180,130,180,135,165,135,165);

    //gold ring right side
    noFill();
    beginShape();
    curveVertex (330,180);
    curveVertex (335,165);
    curveVertex (350,170);
    curveVertex (365,165);
    curveVertex (370,180);
    curveVertex (385,185);
    curveVertex (380,200);
    curveVertex (385,215);
    curveVertex (370,220);
    curveVertex (365,235);
    curveVertex (350,230);
    curveVertex (335,235);
    curveVertex (330,220);
    curveVertex (315,215);
    curveVertex (320,200);
    curveVertex (315,185);
    endShape(CLOSE); 

    noFill();
    curve(330,180,330,180,335,165,335,165);

    //pupils
    fill(0)
    noStroke();
    ellipse(150,200,50,50);
    ellipse(350,200,50,50);

    //nose
    fill(218,0,165);
    triangle (250,375,225,425,275,425);

    //mustache
    stroke(40,17,0);
    strokeWeight(3);
    line(50,420,50,445);
    line(60,425,60,450);
    line(70,430,70,455);
    line(80,435,80,460);
    line(90,438,90,463);
    line(100,441,100,466);
    line(110,444,110,469);
    line(120,447,120,472);
    line(130,450,130,475);
    line(140,453,140,478);
    line(150,454,150,480);
    line(160,456,160,482);
    line(170,458,170,484);
    line(180,459,180,485);
    line(190,460,190,486);
    line(200,461,200,487);
    line(210,462,210,488);
    line(220,463,220,489);
    line(230,463,230,489);
    line(240,463,240,489);
    line(250,463,250,489);
    line(260,463,260,489);
    line(270,463,270,489);
    line(280,463,280,489);
    line(290,462,290,488);
    line(300,461,300,487);
    line(310,460,310,486);
    line(320,459,320,485);
    line(330,458,330,484);
    line(340,456,340,482);
    line(350,454,350,480);
    line(360,453,360,478);
    line(370,450,370,475);
    line(380,447,380,472);
    line(390,444,390,469);
    line(400,441,400,466);
    line(410,438,410,463);
    line(420,435,420,460);
    line(430,430,430,455);
    line(440,425,440,450);
    line(450,420,450,445);

    //mouth
    noFill();
    stroke(218,0,165);
    strokeWeight(5);
    arc(250,345,600,300,0,PI);

    //hair
    fill(0);
    noStroke();
    arc(250,0,350,200,0,PI);
}

People always tell me I have big, expressive eyes so I knew they would be the focus of this self-portrait. Since the Mondrian assignment got me very familiar with rectangles, I wanted to challenge myself to explore other shapes. Using the curveVertex() function to make the gold rings inside the eyes involved the most trial and error, as did positioning the many lines that make up the mustache.

Susie Lee – Looking Outwards- 01

A few years ago, a classmate of mine created this project that took the words of individuals and compiled them into a book. Called “Something Kind” by Marisa Lu, she collected the responses of Amazon Turk workers when asked to “write about something unexpectedly nice that someone did” for them. In order to highlight and inspire readers to take action, the book emphasizes the action words in the stories, highlighting a greater focus of “go & do”. The project utilized human computation through Amazon Mechanical Turk, several short programs in Processing, and Basil.js. I was really impressed and inspired by this project because how humanistic the approach was even thought it was one focused on computation. I also appreciated the small design details such as the heart form in the corner and sides of the book! In the post about the project, she mentioned how Maeda @ media was one of her inspirations during this project! This project really points out the opportunity of mixing in human emotion and responses to something that is generally more considered mechanical/ robotic. It is possible to mix in interaction with computation and I am excited to explore that!

Lumar-BookOfKindness


Something Kind
Marisa Lu

Liz Maday-Looking Outwards-1

Alumni Concert Hall transformed into a dream-like environment through lighting and inflatable structures.

A project that has really intrigued and inspired me was CMU’s “Snoozefest”, something that I was able to experience in person. Snoozefest was an all night concert meant to be experienced while asleep, a project spearheaded by Professor Golan Levin (of Carnegie Mellon) and created in collaboration with CMU’s Exploded Ensemble and Soft Sculpture and Inflatables course. It took place in Alumni Concert Hall, which was converted into a strange dreamlike environment, complete with a huge inflatable structure that filled the entire room in addition to eerie but mesmerizing lighting. The music was primarily electronic and of the more experimental variety, and it was performed throughout the entire night by students in CMU’s Exploded Ensemble (one student’s set consisted of chord progressions produced through machine learning).

Prof. Jesse Stiles mentioned in this article that he was partially inspired by his time studying classical music in India, where he would attend peaceful overnight concerts. I hope that Snoozefest will happen again, perhaps in a new or altered environment. I felt that this event resulted in an amazing experience like I had never had before, one where everyone was experimenting with new ideas of what music and performance could be, something that I am always excited by and always looking to find more of.

KPolheus – Project-01-Face

kpolhemu portrait

function setup() {
    createCanvas(600, 600);
    background(85, 169, 253);
}

function draw() {
	noStroke()

	//hair
	fill(255, 232, 139);
	rectMode(CENTER);
	rect(300, 300, 255, 405, 90, 90, 20, 20);

	//neck
	fill(205, 132, 123);
	rect(295, 350, 70, 300);

	//ear
	fill(205, 132, 123);
	ellipse(395, 290, 15, 30);

	//head
	fill(255, 172, 158);
	rect(300, 270, 188, 263, 90, 90, 175, 175);

	//shirt
	fill(218, 133, 172);
	rectMode(RADIUS);
	rect(300, 600, 150, 150);

	//hair details
	fill(255, 232, 139);
	triangle(320, 130, 200, 300, 200, 150);

	fill(255, 232, 139);
	triangle(320, 130, 250, 250, 340, 130);

	//right eye and eyelid
	fill(0);
	ellipse(255, 260, 30, 10);

	fill(255, 172, 158);
	ellipse(255, 255, 30, 10);

	//left eye and eyelid
	fill(0);
	ellipse(340, 260, 30, 10);

	fill(255, 172, 158);
	ellipse(340, 255, 30, 10);

	//nose
	fill(0);
	ellipse(290, 320, 10, 5);

	fill(0);
	ellipse(310, 320, 10, 5);

	//mouth
	fill(0);
	ellipse(300, 355, 20, 5);

	//earring
	fill(85, 169, 253);
	ellipse(398, 305, 10, 10);

}

Starting & completing this project was pretty difficult for me as I have zero coding experience. I attempted to keep it as simple as possible, using the most basic shapes and not too much detail.

Xindi Lyu-Looking Outwards-1

There’s one remarkable project that I find the obligation to introduce in my blog, that is the on-going construction, or rather completion of The Basilica of Sagrada Família, the true master piece designed by Antoni Gaudí, one of the greatest architects of all time. In 1926, Gaudí was strucked by a passing number 30 tram and soon died while his greatest work Sgrada Familia was still under construction, less than a quarter finished. Since then the project was progressed solely under the support of public donations and personal foundings, and after 144 years, the progress of the construction was finally greatly accelerated with the help of computer aided design and computerized numerical control, and will soon be completed in year of 2026.

The 3D model of Sagrada Família.

One of the schemes that was put into use is a virtual reality pilot program, helping the building department to understand the building and its surroundings and also functioning as a useful aid for field architects. Another computational technology is computer animations, giving people better visualizations of the fields and future developments.

This project really did inspire me because that showed me how computation can hugely benefit for us, and the beauty we can construct with it.

Sophie Chen-Looking Outward 01

RELOOP –  La Mercè Festival in Barcelona (2016)

“Reloop” is an interactive installation that allowed the audience to compose the audio and generate the video content that was being projected onto the Castell dels Tres Dragons (Castle of the Three Dragons) in Barcelona with an armband device, a laser, and a projector. The audience is in control by activating different video loops and sounds with their hand motions/gestures.

A brief but comprehensive video that captured the installation.

I think it’s impressive that this is a large scale installation and yet it’s still able to create meaningful interactions with every individual. Pre-programmed, synchronized wristbands are already widely popular and common at concerts. The Myo armbands used in this installation have great potential for being used at music festivals, concerts, and other large-scale events and get the audience even more involved. If the creators of this project did this installation in different locations, it will create completely different experiences (ex: an enclosed room would make it more immersive, a narrow hallway would create a linear progression/journey, etc).

Myo armbands used in the installation.

http://www.onionlab.com/interactive-installation/

Yingyang Zhou-Project-01-Face

portrait

//Yingyang Zhou
//Section A
//yingyanz@andrew.cmu.edu
//project-01

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

function draw() {

    //background
    background(255, 106, 106);
    if (mouseX > (width / 2)) {
      background(104, 150, 255);
    }

    //eyes
    fill(244, 147, 10);
    stroke(0);
    strokeWeight(0);
    ellipse(150, 220, 120, 100);
    ellipse(450, 270, 130, 100);
    fill(270, 170, 30);
    stroke(0);
    strokeWeight(0);
    ellipse(150, 220, 90, 80);
    ellipse(450, 270, 98, 80);

    //mouth
    ellipse(250, 500, 100, 20);
    fill(216, 41, 49);
    strokeWeight(0);
    ellipse(250, 500, 90, 17);

    //eyeball
    fill("grey")
    ellipse(158, 203, 30, 30);
    ellipse(465, 255, 30, 30);

    //nose
    fill(180, 180, 0);
    stroke(0);
    strokeWeight(0);
    triangle(mouseX, mouseY, mouseX - 15, mouseY - 60, mouseX - 30, mouseY );
    stroke(0);
    strokeWeight(2);


    //hair
    line(200, 0, 200, 50);
    line(210, 0, 210, 48);
    line(220, 0, 220, 45);
    line(230, 0, 230, 40);
    line(240, 0, 240, 52);
    line(250, 0, 250, 47);
    line(260, 0, 260, 48);
    line(270, 0, 270, 49);
    line(280, 0, 280, 45);
    line(290, 0, 290, 51);
    line(300, 0, 300, 50);
    line(310, 0, 310, 48);
    line(320, 0, 320, 45);
    line(330, 0, 330, 40);
    line(340, 0, 340, 52);
    line(350, 0, 350, 47);
    line(360, 0, 360, 48);
    line(370, 0, 370, 49);
    line(380, 0, 380, 45);
    line(390, 0, 390, 51);
    fill(50, 0, 2);
    ellipse(0, 300, 40, 600);
    ellipse(600, 300, 55, 700);
    ellipse(20, 20, 50, 270);
    ellipse(30, 0, 200, 30);
    ellipse(470, 0, 170, 50);
    ellipse(580, 20, 250, 70);
    ellipse(300, 0 ,2000, 20);

    //eyebrow
    fill(50, 50, 50);
    quad(93, 47, 95, 22, 205, 64, 212, 89);
    quad(423, 120, 427, 100, 548, 77, 548, 95);

    //glasses
    rotate(PI/55);
    noFill();
    stroke(50, 0, 2);
    strokeWeight(0.5);
    rect(60, 200, 180, 170,20);
    rect(390, 220, 180, 170, 20);
    line(240, 280, 390, 290);

    //earrings
    arc(0, 520, 200, 200, PI, PI + QUARTER_PI);

}

Red embarrassed face means that you put my nose in WRONG place.

When you see a blue happy face, my nose is generally in the RIGHT place.

Sean’s face(project 1)

I first drew out the lines in illustrator and then use java commands to build the geometric shapes and fill in colors. The buildings in the background represents my major, architecture.

hmeng-self portrait


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

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

function draw() {
    fill(255, 255, 255)
    rect(0, 0, 300, 600)

    //ears
    fill(225, 197, 164)
    ellipse(380, 330, 20, 40)
    strokeWeight(0)
    ellipse(220, 330, 20, 40)
   
    //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(0)
    ellipse(255, 315, 60, 60)
    fill(245, 245, 245)
    ellipse(255, 315, 53, 53)
    fill(0)
    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, 30, 5)

    //background buildings
    strokeWeight(0)
    fill(153, 138, 138)
    rect(370, 470, 50, 160)
    rect(480, 500, 80, 100)
    rect(395, 440, 10, 40)
    fill(136, 115, 117)
    rect(400, 520, 120, 80)

    //backgrounds 2

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

Jacky’s face (project 1)

This self portrait was first designed on illustrator by using some basic shapes and geometries. Therefore, I can easily map out on a 600 x 600 canvas with coordinates and sizes.

yinjiet-portrait

//Jacky Tian
//Section B
//yinjiet@andrew.cmu.edu
//project-01
function setup() {
    createCanvas(600, 600);
    background(220);
}

function draw() {
	strokeWeight(1);
	stroke(0, 0, 0);
	fill(236, 212, 190);
	ellipse(175, 320, 10, 50);
	ellipse(425, 320, 10, 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, 250, 300);

	fill(0)
	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);
	
}