Category: SectionD

12 Tone Serialism

This is less of a specific project but more of a musical movement that occurred in the mid 20th century. Serialism is the systematic composition of music that is completely unbiased in terms of tonal center. Where as most music is written in a key (B major, c minor, etc.), serialistic music equally values each of the 12 notes found in western music.

A key aspect of this form of music is the tone row. Tone rows are mathematically generated lists of the 12 chromatic notes. The only rule to these lists is that each note must appear exactly once. The most famous 12 tone composer was Arnold Schoenberg (1874-1951), he is also credited with the creation of the 12 tone system.

https://www.instructables.com/id/Create-a-Twelve-Tone-melody-with-a-Twelve-Tone-Mat/

This website goes into detail about one way of creating tone rows. While this is not the only way to go about doing it, it is one of the most well known methods.

Example of a tone row using all 12 chromatic notes

While the order of the 12 notes is usually random, the artistry of the composer manifests in how they use the notes presented to them. While most serialistic music sounds extremely jarring to first-time listeners, an incredible amount of thought and care goes into their arrangement.

Composers transform their given notes in many creative ways. Some examples would be transposition, retrograde, and inversions. Often, part of the fun of 12 tone pieces is trying to figure out what the composer did to transform their original tone row into the piece you are hearing.

Example from one of Schoenberg’s 12 tone piano pieces
One of Schoenberg’s orchestral works
(If you have never heard this type of music before it might be pretty surprising)

Mari Kubota- Looking Outwards- 02

Unnumbered Sparks is an interactive community artwork made by Janet Echelman and Aaron Koblin. The artwork is a 745 feet sculpture in the sky controlled by visitors in real time using their smartphones. Unnumbered Sparks is essentially a large canvas projecting a Google Chrome web browser that is over 10 million pixels in size. The project was coded using a programming language called Go and the visuals were rendered with WebGL. WebSockets was used to connect the mobile devices to the sculpture. 

Unnumbered Sparks Janet Echelman and Aaron Koblin.

This project grabbed my interest because it is an interactive piece of artwork that requires the cooperation of a large group of people.  Aaron Koblin often creates interactive art and programs that utilizes data input from multiple people at a time. His works like Bicycle Built For Two Thousand, 10,000 Cents, and New York Talk Exchange are examples of artworks created with the collaboration of many people in real time. Interactive artwork maximizes potential when many people interact with it at the same time, which is why I admire this project. 

Jacky Tian – Looking Outwards – 01

Technology, Engineering and Art Expression

Millennium Bridge in London

On June 1oth, 2ooo, a new walkway the link the city of London with the historical district of St. Paul’s Cathedral was completed across the Thames River. The 325 meters long Millennium Bridge in London is the winning entry of an international architectural ‘bridge building’ competition.

The competition entry was name of “the blade of lights” with innovative steel structure, supported by complex engineering calculation done by varies computational design and simulation tools. The designer group, Foster and Partners worked with a specific technology company as well as a famous sculptor, Sir Anthony Caro.

The Millennium Bridge in London perfectly demonstrates how technology can affect bridge engineering towards a more artistic expression and tectonic patterns in design. The

Erin Lim – Looking Outwards- 01 Section D


Video documentary of Magic Leap’s AR video game Dr. Grordbort’s Invaders. Source: Next Reality: Hands-On with Magic Leap & Weta Workshop’s Dr. Grordbort’s Invaders by Adario Strange

This is a fascinating project developed by New Zealand studio Weta Workshop and partnered by Magic Leap.  It was actually a WIP for nearly a decade, when Magic Leap CEO Rony Abovitz met with Weta Workshop’s CEO Richard Taylor to introduce and develop this video game.  In this game, users experience an AR gaming experience using Magic Leap technology in their surroundings.

To start, users use Magic Leap One to map out their surrounding walls, floors, and furniture.  A spatial audio guides them to map out the room and not to let too much light in, or else the mapping will pause. The Control device acts as a weapon, and the author of this article reported the tracking was accurate 85% of the time.

One cool feature is how you can use your hand not holding a device as a shield, and may even feel a tingle.  The game tracks your hand and allows you to use your physical hand in the AR game.  This is particularly interesting because it points to a future that holds the intertwining of physical human touch with AR. This can especially be seen in the workplace, home, and public space/services. Another feature I admire is the crispness and vividness of the designs.  The main character, Dr. Grordbort, is seen translucent, while the rest of the bots are perfectly vivid.  This is fascinating how designers/programmers can create the difference in texture and precision in these AR figures.

Kristine Kim- Looking Outward-01

“The More you Connect the Less you Connect” is a project based on memory fragmented nature and an interactive meditation on childhood and memory mechanism. This piece was part of the School for Poetic Computation 2019 Spring Session Showcase, NYC. I was drawn into this video installation because the film itself contained a lot of distortion and abstract editing, which is very similar to my style as an artist. The artists use their family and raw footages from a VHS family video from the 1990s as their main subject. Even though the film itself is very loud and energetic, this piece is very strangely soothing to me. The usage of physical colored cables and the user being able to plug them in and out was very appealing to my eyes. More than a critique, I wonder how this project would be like if the scale was more monumental so that it could convey the feeling of being consumed into the “memories” of the past.

Jacky Tian – Project 01

sketch

// Yinjie Tian
// yinjiet
// Section D
// Project 01

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

function draw() {   
//Background
	stroke(0);
	fill(250);
	rect(80, 50, 80, 550);
	rect(110, 80, 140, 520);
	rect(300, 100, 200, 500);
	rect(160, 170, 300, 430);
	rect(400, 200, 200, 400);

//Neck
    noStroke();
    fill(230,214,169);
    quad(240, 310, 235, 370, 320, 370, 315, 310);

//Ears
    stroke(240,224,179);
    fill(240,224,179);
 
 	rect(195, 240, 20, 40, 10);
    rect(340, 240, 20, 40, 10);

//Face
    stroke(255,244,189);
    fill(255,244,189);
    strokeWeight(3);
    
    beginShape();
    vertex(210, 270); 
    vertex(210, 310);  
    vertex(250, 335);  
    vertex(310, 335); 
    vertex(340, 310); 
    vertex(340, 225);   
    vertex(215, 225); 
    endShape();

//Hair
    stroke(0);
    fill(0);
    strokeWeight(4);

    beginShape();
    vertex(190, 220);
    vertex(205, 150);
    vertex(270, 125);
    vertex(338, 150);
    vertex(360, 218);
    vertex(342, 235);
    vertex(330, 235);
    vertex(290, 225);
    vertex(250, 235);
    vertex(217, 230);
    vertex(210, 230);
    endShape();

//Glasses
	stroke(225, 215, 0);
    strokeWeight(3);
    fill(255);
    rect(220, 240, 45, 40, 15);
    rect(288, 240, 45, 40, 15);
    line(265, 250, 288, 250);

//Nose
	stroke(0);
    strokeWeight(2);
    line(275, 280, 270, 300);
    line(270, 300, 275, 300);

//Mouth
    noStroke();
    fill(290,214,159);
    ellipse(290, 320, 30, 10);

//Jacket
    stroke(0, 0, 0);
    fill(0, 0, 0);
    strokeWeight(4);
    beginShape();
    vertex(150, 365);
    vertex(90, 480);
    vertex(90, 600);
    vertex(430, 600);
    vertex(490, 480);
    vertex(410, 365);
    endShape();  

//Pocket
	stroke(255,165,0);
	rect(190, 450, 50, 60);

}

 

In the self portrait project, I worked on the shape of the face first and then move down to glasses, nose, mouth, neck and the jacket. The blocks at the background symbolize that I’m an architecture student. The most frequent shape commands that were being used were “quad”, “rect”, “ellipse”, “line”, “beginshape”, and etc…

Cathy Dong – Looking Outwards 01

This project is named “Breath of Light,” designed by Preciosa Group. The particular piece was displayed in Milan Design Week.

This project is named “Breath of Light,” designed by Czech lighting specialist, Preciosa Group. The particular piece was displayed in Milan Design Week 2018.

“Breath of Light” injects life into the traditional concept of a chandelier. The visitors interact with the art piece and become part of the display. Simply sharing a breath, they create a lighting and music effect. Therefore, it becomes something more than just a beautiful lighting device, but a social tool. When interacting with the design piece, they also work together to explore the different lighting possibilities.

Technically, the design has over 1000 individual opal crystal bubbles. Special sensors are installed in different corners of the project. The idea is developed based on the company’s generations of designers’ creativity since 1548. The number of designers and workers behind this art piece is unknown, but we know that the creative director is Michael Vasku. They are inspired by historical chandeliers and contemporary pendants. I am inspired to create more interactive lighting devices, furniture, and building parts in the future.

source:

https://www.preciosalighting.com/news-detail/discover-the-breath-of-light

CJ Walsh – Looking Outwards 01

The project I chose to focus on is the ICD/ITKE Research Pavilion from 2015-16. The pavilion is part of a series meant to show the potential of computational design and different practices of fabrication within the world of architecture. The use of computational models to create a space is what initially drew to me to this project, as a designer studying environments the creation of spaces excites me. Another very significant factor that I love about this project is that the structure is based on research into biological structures in sea urchins and sand dollars.

The team consisted of researchers, students, biologists, architects and engineers. They were inspired by previous research on the structure of sea urchins and other creatures that identified key structures and patterns that allowed for light-weight forms. Using photos and microscopic imagery, the team was able to translate these structure into large scale pieces that could be assembled into a larger structure.

An interesting factor in the project was the use of robotic sewing to assemble the pieces. It is the first project of its kind to use sewing techniques on wooden fabrications at a large architectural scale. Custom software was created so that the robots could efficiently complete the task of sewing and securing all 151 segments together in the arrangement designer by the researchers.

I think that one of the really inspiring parts of this project is that it is part of a series that seeks to promote the use of computational models and practices into the design of physical spaces. It enables the researchers to think outside of the box into what could be a potential form and inspires other creators to begin experimenting with these media to create new and exciting projects that combine computational programming and architecture/environments design.

Source: Institute for Computational Design + University of Stuttgart

ICD/ITKE Research Pavilion 2015-16

Cathy Dong-Project-01-Face

sketch

function setup() {
    createCanvas(600,600);
    background(255,217,239);
}

function draw() {
    //background extra
    noStroke();
    fill("white");
    triangle(0,600,300,0,600,600);


    //neck
    noStroke();
    fill(249,215,196);
    rect(257,528,86,72);


    //neck outline
    stroke(130,65,57);
    strokeWeight(3);
    line(257,528,257,600);
    line(343,528,343,600);


    //Shirt
    noStroke();
    fill(176,209,255);
    rect(130,557,335,43,100,100,0,0);
    noStroke();
    fill(249,215,196);
    triangle(257, 557, 300, 600, 343, 557);



    //Face Basics
    noStroke();
    fill(249,215,196);
    beginShape();
    //Face
    curveVertex(385,145);
    curveVertex(430,190);
    curveVertex(450,288);
    curveVertex(450,400);
    curveVertex(435,440);
    curveVertex(370,514);
    curveVertex(328,530);
    curveVertex(266,530);
    curveVertex(227,506);
    curveVertex(166,442);
    curveVertex(150,400);
    curveVertex(150,359);
    curveVertex(155,300);
    curveVertex(203,266);
    curveVertex(253,205);
    curveVertex(288,165);
    curveVertex(377,150);
    endShape(CLOSE);
    //face outline
    stroke(130,65,57);
    strokeWeight(3);
    noFill();
    beginShape();
    curveVertex(435,440);
    curveVertex(370,514);
    curveVertex(328,530);
    curveVertex(266,530);
    curveVertex(227,506);
    curveVertex(166,442);
    endShape();


    // Right hair basics
    noStroke();
    fill(52,35,25);
    beginShape();
    //Left hair
    curveVertex(373,68);
    curveVertex(354,57);
    curveVertex(336,48);
    curveVertex(300,43);
    curveVertex(212,64);
    curveVertex(135,133);
    curveVertex(84,230);
    curveVertex(64,302);
    curveVertex(51,402);
    curveVertex(48,510);
    curveVertex(74,574);
    curveVertex(193,600);
    curveVertex(217,579);
    curveVertex(231,506);
    //left hair shaping face
    curveVertex(166,442);
    curveVertex(150,400);
    curveVertex(150,359);
    curveVertex(155,300);
    curveVertex(203,266);
    curveVertex(253,205);
    curveVertex(288,165);
    curveVertex(377,150);
    //left hair
    curveVertex(388,120);
    curveVertex(385,100);
    curveVertex(373,67);
    endShape(CLOSE);


    // Right hair basics
    noStroke();
    fill(63,47,37);
    beginShape();
    //Right Hair
    curveVertex(388,120);
    curveVertex(385,110);
    curveVertex(373,67);
    curveVertex(408,76);
    curveVertex(453,106);
    curveVertex(500,182);
    curveVertex(530,300);
    curveVertex(538,430);
    curveVertex(515,543);
    curveVertex(404,590);
    //Right Hair shaping face
    curveVertex(370,514);
    curveVertex(435,440);
    curveVertex(450,400);
    curveVertex(450,288);
    curveVertex(420,190);
    curveVertex(385,145);
    endShape(CLOSE);

   
    //Eye
    fill("white");
    stroke("black");
    strokeWeight(1);
    beginShape();
    //Left
    curveVertex(182,314);
    curveVertex(182,314);
    curveVertex(190,307);
    curveVertex(203,302);
    curveVertex(248,300);
    curveVertex(271,320);//turning point
    curveVertex(263,325);
    curveVertex(245,335);
    curveVertex(224,337);
    curveVertex(202,331);
    curveVertex(183,318);
    endShape(CLOSE); 
    //Right
    beginShape();
    curveVertex(413,318);
    curveVertex(413,318);
    curveVertex(394,331);
    curveVertex(372,337);
    curveVertex(353,335);
    curveVertex(335,325);
    curveVertex(327,320);//turning point
    curveVertex(350,300);
    curveVertex(395,302);
    curveVertex(408,307);
    curveVertex(416,314);
    endShape(CLOSE);

    //Eye Line
    noFill();
    stroke("black");
    strokeWeight(3);
    //Left
    beginShape();
    curveVertex(182,314);
    curveVertex(182,314);
    curveVertex(190,307);
    curveVertex(203,302);
    curveVertex(248,300);
    curveVertex(271,320);
    curveVertex(263,325);
    endShape();
    //Right
    beginShape();
    curveVertex(335,325);
    curveVertex(327,320);//turning point
    curveVertex(350,300);
    curveVertex(395,302);
    curveVertex(408,307);
    curveVertex(416,314);
    curveVertex(413,318);
    endShape();


    //Eyeball
    //Left
    fill(82,63,51);
    strokeWeight(1);
    ellipse(227,318,38);
    fill(52,35,25)
    noStroke();
    ellipse(227,318,20);
    fill("white");
    noStroke();
    ellipse(235,312,8);
    //Right
    fill(82,63,51);
    strokeWeight(1);
    ellipse(370,318,38);
    fill(52,35,25)
    noStroke();
    ellipse(370,318,20);
    fill("white");
    noStroke();
    ellipse(378,312,8);


    //nose 1
    stroke(130,65,57);
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(272,384);
    curveVertex(271,384);
    curveVertex(266,395);
    curveVertex(274,401);
    curveVertex(280,397);
    curveVertex(290,405);
    curveVertex(300,412);
    curveVertex(310,405);
    curveVertex(320,397);
    curveVertex(326,401);
    curveVertex(334,395);
    curveVertex(329,384);
    curveVertex(328,384);
    endShape();
    //nose 2
    stroke(130,65,57);
    strokeWeight(1);
    noFill();
    line(315,310,318,370);


    //lip
    //color
    fill(217,92,48);
    noStroke();
    beginShape();
    curveVertex(300,440);
    curveVertex(288,435);
    curveVertex(262,440);
    curveVertex(239,446);
    curveVertex(262,465);
    curveVertex(300,477); //midpoint
    curveVertex(338,465);
    curveVertex(361,446);
    curveVertex(338,440);
    curveVertex(312,435);
    curveVertex(300,440);
    endShape(CLOSE);
    //line
    noFill();
    stroke(130,65,57);
    strokeWeight(2);
    curve(232,380,232,445,368,445,368,380);
    //point
    fill(130,65,57);
    noStroke();
    ellipse(232,445,5);
    ellipse(368,445,5);


    //glass
    noFill();
    stroke("black");
    strokeWeight(3);
    ellipse(227,325,120,110);
    ellipse(370,325,120,110);
    stroke("black");
    strokeWeight(5);
    line(286,312,310,312);
    stroke(255,204,29);
    strokeWeight(3);
    line(286,310,310,310);

}

The very first thing is to draw a rough sketch of myself. I snap pixels with the “guide line” tool in Photoshop. The process is entertaining, even though it was a bit struggle to find the exact point that creates a smooth shape.

Stefanie Suk- Project-01-Face

For this project, I tried to incorporate all the elements I think represents myself. The blue t-shirt, hairpin, intense face blush, and pink lipstick are what I wear the most often these days. I experimented using different shapes, colors, and sizes to create all these elements of myself into the self portrait.

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Self Portrait Project

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

function draw() {
    fill(255, 111, 0);
    noStroke();
    rect(0, 0, 600, 600); // background 
    fill(70, 27, 9);
    noStroke();
    ellipse(312, 300, 480, 530); //hair circle
    fill(70, 27, 9);
    noStroke();
    rect(72, 300, 480, 300); // hair rectangle
    fill(255, 233, 201);
    noStroke();
    ellipse(312, 281, 323.2, 398.9); // face
    fill(70, 27, 9);
    noStroke();
    rect(167, 108, 296, 59); // bangs rectangle
    fill(70, 27, 9);
    noStroke();
    ellipse(313, 103.5, 212, 99); // bangs circle
    fill(255);
    noStroke();
    ellipse(245, 253.7, 92.6, 92.6); // left eye
    fill(255);
    noStroke();
    ellipse(375, 253.7, 92.6, 92.6); // right eye
    fill(0);
    noStroke();
    ellipse(245, 280, 34.3, 34.3); // left eye black
    fill(0);
    noStroke();
    ellipse(375, 280, 34.3, 34.3);
    fill(70, 27, 9);
    noStroke();
    rect(200, 180, 83.2, 10); // left eyebrow
    fill(70, 27, 9);
    noStroke();
    rect(331, 180, 83.2, 10); // right eyebrow
    stroke(0);
    line(296.6, 291.6, 270.2, 349.8);
    stroke(0);
    line(270.2, 349.8, 308.3, 359.9); // nose
    fill(255, 77, 135);
    noStroke();
    arc(306, 395, 108, 50, 0, PI, CHORD); // lips
    fill(255, 233, 201);
    noStroke();
    rect(264.7, 457.6, 91.3, 36.5); //neck
    fill(0, 0, 255);
    noStroke();
    ellipse(312, 620, 408, 260, PI, 0, CHORD); // body
    fill(255, 233, 201);
    noStroke();
    ellipse(310.5, 497, 92, 54); // neck2
    fill(0, 0, 255);
    noStroke();
    ellipse(127.4, 114.1, 42.4, 42.4); // left hairpin
    fill(0, 0, 255);
    noStroke();
    ellipse(162.4, 135.7, 42.4, 42.4); // right hairpin
    fill(255, 233, 201);
    noStroke();
    ellipse(150.5, 290.1, 67, 94); // left ear
    fill(255, 233, 201);
    noStroke();
    ellipse(470.5, 290.5, 67, 94); // right ear
    fill(0, 0, 255);
    noStroke();
    ellipse(146, 353, 8, 66); // left earring
    fill(0, 0, 255);
    noStroke();
    ellipse(472.5, 353, 8, 66); // right earring
    fill(255, 202, 201);
    noStroke();
    ellipse(207.5, 346, 47, 26); // left blush
    fill(255, 202, 201);
    noStroke();
    ellipse(395.5, 346, 47, 26); // left blush
}