Author: sychoi@andrew.cmu.edu

Gretchen Kupferschmid & Sarah Choi – Final Project: Pittsburgh Ambience

final project: pittsburgh ambience

Our project’s canvas is too big for wordpress, so we are uploading the zip file and instructions to acess it. 

Click the link to the google drive to find the zip file. Download the zip file to find the sketch.js file “finalproject.js”  as well as the html file “finalproject.html” and the sound files. Because the project is outside of wordpress and there is a sound aspect, the project needs to be opened on the local host from your server, so the instructions must be followed bellow…

  1.  Open a Terminal in OS X or a command window (cmd) in Windows.
  2. Change your current directory to the directory you want to serve: Type cd path-to-your-directory (ex. cd Desktop/104final )
  3. Type in Terminal:
    python -m SimpleHTTPServerOr if you are using Python 3, type:
    python -m http.server
  4. Visit the URL http://localhost:8000 in your browser to test your sketch.

How it works:

Using your mouse, scroll through the four different neighborhoods presented in illustrations. 

Click on the music button to hear the song we chose to represent the ambience of the area and click on the pause button to stop the song.

Click on the different buttons for the cafes and restaurants shown to see a photo of the location, a description, and a link to the website. 

For our final project, we wanted to portray the distinct atmospheres of different neighborhoods in Pittsburgh. As two students who weren’t familiar with Pittsburgh before Carnegie Mellon, we took the initiative to venture out and explore the different areas and what Pittsburgh has to offer. As people who are interested in immersing and inspiring ourselves through our surroundings, we wanted to introduce our favorite places to other students. Because music is also a very big part of our everyday lives, we wanted to complete the Pittsburgh ambiance by selecting specific songs that we felt captured in each area the best. 

We really enjoyed the interactive visual aspect of this project. In the beginning, we brainstormed ways to depict our shared interests and goals through a project, and we felt that this achieved exactly what we envisioned. Making 2D objects into an interactive platform, we saw the potential to incorporate layers of our project into future uses. Our favorite part of the project was probably the music and design aspect of it. We had a lot of fun planning and collaborating together.  Below, we have attached a video and screenshots of each different area included in our project.

Sarah Choi – Project 12 – Proposal

Gretchen Kupferschmid and I want to collaborate on an interactive 3D map of different areas of Pittsburgh including ambient noises showing different restaurants and coffee shops around. Similar to the photograph included below, we wanted to show contrasting places in Pittsburgh such as Lawrenceville, Squirrel Hill, Oakland, and Downtown Pittsburgh. Through an interactive map, we would allow our audience to click through these sections to find not only various places to eat and spend time but also include music that we feel is similar to the atmosphere of these various sectors all throughout Pittsburgh. 

We both strongly believe it’s important to explore more areas around you especially since Pittsburgh has so much to offer, and a lot of students go through their time here without putting themselves outside the campus. 

In order to evenly divide the work one of us would focus on actually building the 3D map of different areas of Pittsburgh while the other would work on making the map actually interactive and inputting these different areas across the city and towns as well as the music that follows along with them.

Sarah Choi – Looking Outwards – 12

One project, found online, was an interactive map by Sara B. It contained offices, a countryside, playground, house, and industries. This map was coded to be a 3D model coming out of a tablet. This was coded through a studio using images, shapes, and mouse functions. I admired this project because it gave the audience a better understanding of the layout of a certain area showing all different types of places.

https://codepen.io/aomyers/full/LWOwpR

Furthermore, another project I looked at was a hotel’s website in Lower Manhattan of New York City called, “Sister City”. This website used ideas of simplicity, purposefulness, and mindful design powered by Microsoft’s Custom Vision Service. This helped analyzed elements of the Sister City environment just from a camera on the roof. With artificial intelligence, the system recognized aspects of nature such as clouds and birds and triggered specific sounds to the installation. These sounds were then generated and installed in the lobby of the hotel creating a more natural environment to space in a very new setting. The ambient music formed an ambiance of the hotel, creating a more relaxed atmosphere overall. This was a very interesting take and immediately made me mesmerized. 

https://sistercitynyc.com/

The two projects together are so different but creative at the same time, which are what drew me from the very beginning. Both ideas pertain to my final project in the sense that Gretchen Kupferschmid and I want to design a 3D interactive map of Pittsburgh with ambient sounds showing our favorite restaurants and little shops we love visiting when looking for reasons to get outside the Carnegie Mellon “bubble”.

Sarah Choi – Project 11 – Landscape

project-11

//Sarah Choi
//sychoi
//Section D
//Project-11

var buildings = [];
var birds = [];
var terrainSpeed = 0.0001;
var terrainDetail = 0.005;


function setup() {
    createCanvas(480, 480); 
    frameRate(10);
    
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        var ry = random(height);
        buildings[i] = makeBuilding(rx);
        birds[i] = birdsFlying(rx, ry);
    }
}


function draw() {
    background(200); 
    
    displayHorizon();

    drawMountain();
    
    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 

    birdsFlying();
    birdMovement();
    displayBird();
    updateBird();
    addBird();
    removeBird();
}

function drawMountain() {
    fill(150, 60, 50);
    noStroke();
    beginShape();
    for (x = 0; x < width; x++) {
        var m = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0, height);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function updateAndDisplayBuildings(){
    // Update the building's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}


function removeBuildingsThatHaveSlippedOutOfView(){
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.007; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


// method to update position of building every frame
function buildingMove() {
    this.x += this.speed;
}
    

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(255); 
    stroke(0); 
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    stroke(200); 
    for (var i = 0; i < this.nFloors; i++) {
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
    }
    pop();
}


function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}


function displayHorizon(){
    stroke(0);
    line (0, height - 50, width, height - 50); 
}

function birdsFlying(birdX, birdY) {
    var bird = {x: birdX,
                y: birdY,
                speed: random(5, 20),
                size: random(5, 20),
                color: random(0, 100),
                move: birdMovement,
                display: displayBird}
    return bird;
}

function birdMovement() {
    this.x += this.speed;
    this.y += this.speed / 5;
}

function displayBird() {
    strokeWeight(1);
    stroke(this.color);
    noFill();
    push();
    translate(this.x, this.y);
    arc(0, 0, this.size, this.size, PI + QUARTER_PI, 0);
    arc(this.size, 0, this.size, this.size, PI, - QUARTER_PI);
    pop();
}

function updateBird() {
    for (i = 0; i < birds.length; i++) {
        birds[i].move();
        birds[i].display();
    }
}

function addBird() {
    var newBird = random(1);
    if (newBird < 0.2) {
        var birdX = 0;
        var birdY = random(height);
        birds.push(displayBird(birdX, birdY));
    }
}

function removeBird() {
    var stayBird = [];
    for (i = 0; i < birds.length; i++) {
        if (birds[i].x + birds[i].size > 0) {
            stayBird.push(birds[i]);
        }
    }
    birds = stayBird;
}

I wanted to show birds with the buildings in the background. Growing up in a city, there were always tall skyscrapers and birds flying everywhere especially next to really big parks. I love walking around in the city where you can breathe in the fresh air and feel so free in an area where you grew up.

I was unable to figure out how to make both the birds and the buildings to appear in my code. Although in the end, I was still unsure how to make my code work, I hope the code is enough to show my efforts.

Sarah Choi- Looking Outwards – 11

Precarious

Camille Utterback is an internationally acclaimed artist and pioneer in the field of digital interactive art. She explains her work as “an attempt to bridge the conceptual and the corporeal.” Represented by Haines Gallery in San Francisco, she is currently an Assistant Professor of Art Practice at Stanford University. She went to Williams College for a BA in Art and achieved a Master’s degree in Interactive Telecommunications at NYU’s Tisch School of the Arts. In May of 2018, she created Precarious for the National Portrait Gallery exhibition called Black Out: Silhouettes Then and Now. It was an interactive installation tracing human silhouettes with an algorithmic apparatus on a backlit screen. 

Using contemporary digital tools, it actively traced the audiences’ figures continuously. Through custom coded interactive drawing systems, she built an algorithmically generated visual language she had been working on for many years. The points of the silhouettes exert a force on others creating this ongoing momentum to keep redrawing outlines and forming bodies together into one shared space. Through this piece of art, Utterback tries to redefine the aspect of personal boundaries as her audience is able to explore what happens when these barriers are broken creating a more open and welcoming atmosphere. 

She believes ur bodies portray abstract symbolic systems and how functions like communication and language echo our physical self. Forming the relationship with interfaces and representational systems of our machines, Utterback uses interactive and computational mediums to depict different aspects of ourselves in her works of art.

Sarah Choi – Project 10 – Interactive Sonic Sketch

project-10

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Project-10-Interactive-Sonic-Sketch

//spiral
var angle = 0;
var bright = 255;
var n = 0;
var m = 0;
var x = 8 * n;
var y = 8 * m;

function preload() {
    // call loadImage() and loadSound() for all media files here
    sound1 = loadSound("birds.wav");
    sound2 = loadSound("thunder.wav");
    //sound3 = loadSound("springday.wav");
    sound4 = loadSound("lightshower.wav");
    sound1.setVolume(0.5);
    sound2.setVolume(0.5);
    //sound3.setVolume(0.5);
    sound4.setVolume(0.5);
}

function setup() {
    // you can change the next 2 lines:
    createCanvas(640, 480);
    createDiv("Interactive Sonic Sketch");

    //======== call the following to use sound =========
    useSound();

    
    rectMode(CENTER);
}

function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    osc = new p5.Oscillator();
    osc.freq(880);
    osc.amp(0.1);
    osc.start();
}

//--------------------------------------------------------------------

function draw() {
    background(0);
    noStroke();
    if (mouseIsPressed) {
        bright = 255;
    }
    background(bright);
    bright = bright - 5;

    fill(255, 0, 0);
    var m = max(min(mouseX, 200), 20);
    var size = m * 200.0 / 250.0;
    rect(10 + m * 150.0 / 350.0, 400.0,
         size, size);
    fill(0, 0, 255);
    size = 200 + size;
    circle(150, 50 + m * 150 / 250.0,
         size / 2, size / 2);

    push();
    fill(0, 255, 0);
    ellipseMode(CORNER);
    var n = max(min(mouseX, 300), 200);
    var size2 = n * 200.0 / 400.0;
    ellipse(400 , size2, size2 * 2, size2 * 4);
    pop();
    
    if (mouseIsPressed) {
        fill(255, 255, 0);
        noStroke();
        strokeWeight(5);
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(100, 0, 150, 150, 175, 150);
        quad(175, 150, 150, 150, 200, 200, 250, 200);
        triangle(200, 200, 250, 200, 150, 450);
        angle = angle + 5;

        push();
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(300, 0, 275, 150, 250, 150);
        quad(275, 150, 250, 150, 300, 200, 350, 200);
        triangle(300, 200, 350, 200, 250, 450);
        pop();
        angle = angle + 5;

        push();
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(25, 0, 0, 50, -25, 50);
        quad(0, 50, -25, 50, 45, 100, 75, 100);
        triangle(45, 100, 75, 100, 25, 250);
        pop();
        angle = angle + 5;

        sound2.play();
        sound4.play();
    }

    if (x <= width) {
        n += 1;
        bezier(x+2, y+2, x, y+6, x+2, y+8, x+4, y+6, x+2, y+2);
    }
    else { 
        m += 1;
        bezier(x+2, y+2, x, y+6, x+2, y+8, x+4, y+6, x+2, y+2);
    }

    sound1.play();
    //sound3.play();
}

I chose these sounds as I thought they gave a good representation of Pittsburgh when it goes from being a nice spring day that suddenly comes with thunderstorms and a light rain shower.

Sarah Choi – Looking Outwards – 10

https://www.smule.com/

Smule is a startup company, co-founded by Ge Wang, exploring social mobile music-making into a unique platform for research and development combining music and computational algorithms. Ge Wang, Stanford’s assistant professor at Stanford’s Center for Computer Research in Music and Acoustics (CCRMA), has made a difference in combining programming languages and interactive software with computational music. 

This music-making application through social media gives a space for the public to portray their individual styles by showing how they think, work, and play through sound and music. Smule’s algorithm generates sounds and video from one’s device and synchronizes the two streams in real-time. It uses audio processing to create more effects such as duets, so one doesn’t have to go through the process of editing his or her own video and sound. It also has available transitions to make the music more of one’s own. 

Ge Wang talks a lot about how technology shapes us to be more individualistic and how we can use technology to express ourselves to the public. Because of this, Smule’s final form manifests Ge Wang’s passion to create a platform for everyone to do exactly this. His application has been able to reach millions as people appreciate others’ true art forms.

Sarah Choi – Project – 09 – Computational Portrait

project-09

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Project-09

var underImage;

function preload() {
    var image = "https://i.imgur.com/YcBwEXw.jpg";
    underImage = loadImage(image);
}

function setup() {
    createCanvas(350, 400);
    underImage.resize(350, 400);
    background(0);
    underImage.loadPixels();
    frameRate(20);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var xx = constrain(floor(px), 0, width-1);
    var xy = constrain(floor(py), 0, height-1);
    var colorXY = underImage.get(xx, xy);

    stroke(colorXY);
    strokeWeight(random(5, 20));
    noFill();
    ellipse(xx, xy, 20, 10);
}

function mouseDragged() {
    rect(mouseX, mouseY, random(5, 20), random (5, 40));
}

For my project, I chose a portrait of my father when he was living in New York, and we would go on father-daughter adventures. This was one of the most memorable days I had with him, which is why I wanted to depict my father through one computational project. Because of this, I loaded the pictures with ovals as shown in the original picture below, my father was always a huge fan of vintage oval-shaped sunglasses. On top of that, I wanted to use the drag function to use rectangular shapes to fill the canvas. It reminded me of the jazz music being played in the living room every Sunday morning.

Sarah Choi – Looking Outwards – 09

A series of walks directed by the wind using an array of mechanisms, filmed and plotted by GPS.

50 wind walks simultaneously depart Taylor Square, Sydney and walk guided solely by the wind for 1 hr, dispersing through the city their routes [recorded live via a tailor-made smartphone app] create a live drawing.

Browsing through the Looking Outwards assignments, I chose Julia Nishizaki’s Looking Outwards-06 about Tim Knowles’ Windwalks project. This London based artist focuses on using different mechanisms to form wind patterns directed by a series of walks. Filmed and plotted with a GPS, the line drawing below was the outcome of the design. This immediately stood out to me given my interest in art portraying natural forms of our world. I completely concur with my peer’s assessment of Knowles’ art as she explains the incorporation of the randomness of wind patterns and how this creates a more meaningful experience for the audience.

However, I feel this creates more than just “deeper relationships between individuals, their cities, and the wind itself.” I believe Knowles was trying to recreate and appreciate impalpable aspects of nature such as the wind by involving people in his project. He creates a series of walks starting in Taylor Square, Sydney and allowing people to disperse and walk through city routes for a full hour. By creating this interactive but calculated schema, he was able to bring people not only closer to their environment and nature but also gave them more an appreciation of art in general. Most of the time, people are unaware of the empirical research involved in creating art forms to a wider audience. Knowles was able to use his greatest passion to depict aspects of life that often gets forgotten and underappreciated in the nature of a physically focused group of people.

7 channel video projection, mixed media object and route plot as wall drawing, 2009

http://www.timknowles.co.uk/Work/Windwalks/tabid/496/Default.aspx

Sarah Choi – Looking Outwards – 08

Jake Barton is a designer based in the United States. He is known for being the founder of Local Projects which is an experience design firm for different brands, museums, and public spaces in New York City. He majored in Performace Studies at Northwestern and continued to graduate school at New York University for Interactive Telecommunications. However, in between his Bachelor’s degree and graduate school, he first worked on Broadway for set design and later interned at Ralph Appelbaum Associates, a museum design firm. While in graduate school, he launched Local Projects as an inspiration from his internship. Jake Barton describes himself as someone who values storytelling and people. 

His video from the Eyeo Festival in 2012 talked about “Like Falling in Love” and how he truly believes people are more interesting than technology. He talked a lot about this interactive game called “Urbanology” he and his team made where people could choose from five different tokens of affordability, livability,  transportation, sustainability, and wealth. His players would then argue with one another on who is more right. Furthermore, he talked about “How Bodies Inspire Art” where he centered interactive interfaces to the middle of the exhibit. I admire his work because he wants the audience to experience more from just the art. He thinks of composition and perception when thinking about how to present his art to other people. 

Jake Barton shows a lot of media to show his work. He makes his talks very lighthearted to engage more with the audience. He also talks about doubts in his work which was really interesting. He talked about how he was unsure of using guiding principles as his work was shown to his audience, but talking about themes every person in the audience could relate to was definitely something that engaged me in his work.

https://localprojects.com/