Month: September 2018

Adam He – Looking Outwards 04

Steamboat Willie (1928), a famous Disney animation that demonstrates Disney’s earliest attempts toward animations with realistic sound.

Animation studios started putting background music and soundtrack into their animations in the 1920s and the 30s. With the Jazz Singer (1928) being the earliest form of “talking picture,” the sound technology got more acknowledged in the animation industry. Warner Bros. and Disney animations were the two biggest studios that sought to realize the sound of outside world into animations. One of the most famous works by Disney, Steamboat Willie (1928) introduced the world with synchronized soundtrack. It was so remarkable at the time that made this whole picture of Mickey Mouse whistling into the iconic symbol of Walt Disney Studio. The recording machines were enormous at the time that limited technicians to record the actual sound from the outside world. So Disney hired musicians, especially percussionists to imitate various sounds that imitate what is happening outside of their studio. With new computational technique in the music industry, people’s conceptions toward animations changed drastically.

Lingfan Jiang – Looking Outward – 04

‘Déguster l’augmenté’is a project done by Erika Marthins with ECAL (Bachelor Media & Interaction Design) which tries to add a sound dimension to food. I found this project very interesting because food is always about smell, taste and visual impression. Sound could really be a new dimension to think about.

It is quite interesting to see how chocolate and Oreo could be transformed into discs, but it is definitely still in its early stage in terms of accuracy. However, the accuracy could also be used as an advantage. For example, it could be used to test the quality of the food.

Eunice Choe – Project-04 – String Art

sketch

/*Eunice Choe
Section E
ejchoe@andrew.cmu.edu
Project-04*/

// global variables to create curves
var spacing = 4;// spacing between the strings
var x1 = 0;
var y1 = 300;
var x2 = 400;
var y2 = 0;


function setup() {
    createCanvas(400, 300);
    // background(0);
}

function draw() {
    // changing color of strings depending on mouseX and mouse Y position
    background(255);
    strokeWeight(0.2);
    var r = map(mouseX, 0, width, 100, 255);
    var g = map(mouseY, 0, width, 200, 255);
    var b = map(mouseX, 0, height, 0, 100);
    for (var i = 0; i < width; i++){
    // outermost section of strings
        stroke(r, g, b);
        line (x1, spacing * i, spacing * i, y1); // bottom left
        line (x2, spacing * i, spacing * i, y2); // top right
        line (spacing * i, y1, x2, height - spacing * i); // bottom right
        line(x1, height - spacing * i, spacing * i, y2); // top left
    // innermost section of strings
        stroke(g, r, b);
        line (x1 + 100, spacing * i, spacing * i, y1 - 100); // inner bottom left
        line (x2 - 100, spacing * i, spacing * i, y2 + 100); // inner top right
        line (spacing * i, y1 - 100, x2 - 100, height - spacing * i); // inner bottom right
        line(x1 + 100, height - spacing * i, spacing * i, y2 + 100); // inner top left
    // middle section of strings
        stroke(r, b, g);
        line (x1 + 50, spacing * i, spacing * i, y1 - 50); // middle bottom left
        line (x2 - 50, spacing * i, spacing * i, y2 + 50); // middle top right
        line (spacing * i, y1 - 50, x2 - 50, height - spacing * i); // middle bottom right
        line(x1 + 50, height - spacing * i, spacing * i, y2 + 50); // middle top left
        }
}

For my string art project, I wanted to create a series of repeating curves overlapped on top of each other. I liked the appearance of having several thin strings that create sheer and transparent colors. I did have some difficulties figuring out how to use the for loop and coordinates, but later I realized the loop makes life much easier!

Xiaoying Meng-Looking Outward 04

(Food and Sound)

This project created by Erika Marthins and ECAL(Bachelor Media & Interaction Design) looks at food and other of our senses using the latest technology. The third proposal, in particular, explores other ways we can experience and “taste” sound. It is a record made of chocolate by Chef Fabien Pairon Ecole hôtelière de lausanne.  The creators try to find the right texture for the chocolate record and the result is very intriguing.  The chocolate completely changed the music recorded in the record. It is a different form of representation of the sound. Because sound is invisible, we cannot touch or taste or smell it. But by combining food and sound, we can now experience sound in other forms of senses. I find this project very inspiring. Using technology to experience sound can expand the dimension of it, making it visible, touchable.

Catherine Coyle – Looking Outwards-04

Vocaloid is a music program, its first commercial release being in 2004. This series of programs allows a music producer to create a fully voiced song all on the computer. The producer types in the lyrics they want sung as well as a melody and the program synthesizes a voice for the song so no real singer is involved in the process of creating the actual song. Each ‘voice bank’ originally started with a real singer pronouncing all possible syllables which then can be used over and over again to create a huge number of possible songs.

Screenshot of program’s 3rd version

I don’t know much about computing to change sounds, but I would imagine there are certain factors that allow the program to change the pitch, vibrato, etc of each syllable. I just think it’s really cool technology, and could be good for those who want to make music but lack the singing ability.

Many of the voice banks have animated ‘personas’ which have led to a large fanbase for the program. You can see this illustrated below in vocaloid “Hatsune Miku’s” inclusion on the popular video game Just Dance.

Queen Miku performs her iconic song ‘PoPiPo’

Lingfan Jiang – Project 04 – String Art

lingfanj-04

//Lingfan Jiang
//Section B
//lingfanj@andrew.cmu.edu
//Project-04


var dx; //x coordinate for points on curve
var dy; //y coordinate for points on curve
var circleDiameter; //diameter of the center circle


function setup(){
    createCanvas (400, 300);

}

function draw(){
    background(0);
    angleMode(DEGREES);
    strokeWeight(0.1); //set a lineweight for the bottom curves
    circleDiameter = 75;


    stroke(255,104,107); //red lines
    for (var x = 0; x < 95; x += 5) {
        dx = 200 + (circleDiameter * cos(x));
        dy = 150 + (circleDiameter * sin(x));
        //connect first quarter of the points on the circle with the points on the top
            for (var i = 0; i < 400; i += 5){
            line(i,0,dx,dy);  
        }
    }
    strokeWeight(0.08);
    stroke(27,179,244); //light blue lines
    for (var x = 90; x < 275; x += 5) {
        dx = 200 + (circleDiameter * cos(x));
        dy = 150 + (circleDiameter * sin(x));
        //connect half quarter of the points on the circle with the points on the left
            for (var i = 0; i < 300; i += 5){
            line(0,i,dx,dy);  
        }
    }
    strokeWeight(0.05);
    stroke(0,40,255); // dark blue lines
    for (var x = 180; x < 275; x += 5) {
        dx = 200 + (circleDiameter * cos(x));
        dy = 150 + (circleDiameter * sin(x));
        //connect quarter of the points on the circle with the points on the bottom
            for (var i = 0; i < 400; i += 5){
            line(i,300,dx,dy);  
        }
    }
    stroke(143,113,255);
    strokeWeight(0.04); // purple lines
    for (var x = 270; x < 455; x += 5) {
        dx = 200 + (circleDiameter * cos(x));
        dy = 150 + (circleDiameter * sin(x));
        //connect half quarter of the points on the circle with the points on the right
            for (var i = 0; i < 300; i += 5){
            line(400,i,dx,dy);  
        }
    }

    noLoop();
}

In this project, I had some difficulties to picture the final form at first. However, after looking through some of the string art examples, I became particularly interested in the circle from. Different from architectural modeling software, you cannot evaluate curves and find points on them. Therefore, the coordinates of the points that form a circle gave me a little bit of trouble. After understanding how “cos” and “sin” could help form it, here is the final result.

Adam He – Project 04 – String Art

sketch

/* Adam He
Section A
xiaotiah@andrew.cmu.edu
Project - 04 - String Art */


function setup() {
    createCanvas(300, 400);
    background(10);
}

function draw() {
    var changeX = 10;  // changing increment of x
    var changeY = 20;  // changing increment of y
    var lineX = 10;
    var lineY = -10;

    for (var m = 10; m <= 500; m += 10) { // 1st layer : sun beam
        stroke(240, 200, 120);
        strokeWeight(1.5);
        line(100, m, m, m);
        lineX += changeX;
        lineY += changeY;
    }

    for (var i = 0; i < 400; i += 10) { // 1st layer of the wave (light purple), filling the left bottom
        stroke(120, 80, 120);
        strokeWeight(1);
        line(0, i, i, 400);
        lineX -= changeX;
        lineY += changeY;
    }

    for (var j = 0; j <= 300; j += 10) {
        stroke(180, 80, 170); // 2nd layer of the wave (purple)
        strokeWeight(1.5);
        line(20, j, j, 300);
        lineX += changeX;
        lineY += changeY;

        stroke(230, 100, 70); // 3rd layer of the wave (orange)
        strokeWeight(1);
        line(50, j, j, 270);

        stroke(240, 40, 30); // 4th layer of the wave (red)
        line(70, j, j, 220);
    }
}

When I heard about string art, I had the impression that it is very wavy. With different layers of intersecting lines, the drawing starts to have three dimensional flow even though it is two dimensional. I wanted to to incorporate this into one of my favorite sports, surfing. I used different layers to show the movement of the waves, as well as rather systematic lines to show the bright sunlight at beaches.

Yingyang Zhou-Project-04-String-Art

string art

function setup() {
    createCanvas(400, 300);
    background(220);
}

function draw() {
  background(220);
    var amt = 0;
    var a = 0;
    var b = 0;
    var x1 = lerp(mouseX, 300, amt);
    var y1 = lerp(mouseY, 300, amt);
    var x2 = width;
    var y2 = height;
    var x1StepSize = 3;
    var y1StepSize = 10;
    var x2StepSize = 7;
    var y2StepSize = 8;
    var x3 = 0;
    var y3 = 0;
    var x3StepSize = 2;
    var x4 = lerp(0,400, amt);
    var y4 = lerp(0,300,amt);
    var r = 240;
    var g = 80;
    var b = 50;
    for(var i =0; i < 400; i++){
      amt += 0.1;
      x3 += x3StepSize;
      line(x3, height, x3+i, 0);
      line(x3, y3, x4, y4);
    }
    for(x1 == 0; x1 < width; x1+=x1StepSize){
      amt += 0.1;
      y1 += y1StepSize;
      x2 -= x2StepSize;
      y2 -= y2StepSize;
      r -= 3;
      b += 1;
      stroke(r, g, b);
      strokeWeight(0.5);
      line(x1, y1, x2, y2);
      line(y1, x1, y2, x2);
      line(0, height, x1, y1);
      line(width,0, x2, y2);
    }

}

By using lerp and for loop, there are ‘curve’ which made by straight lines, with mouse moving the color and position of lines will change with it.

Victoria Reiter – Project 04 – String Art

sketch

/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project-04
*/

// establishes canvas dimensions
function setup() {
    createCanvas(400, 300);
}

function draw() {
    // background color
    background(65);

    // gives values to some variables
    var x1 = 0;
    var x2 = 0;
    var y1 = 0;
    var y2 = 0;
    var g = 40;

    // angle for sin function
    var a = 0;

    // value of increment for angle in sin function
    var inc = PI / 32;

    // draws sin function
    for (var x1 = 0; x1 < width; x1 += 2) {

        // color blue
        stroke(0, 0, 255);

        line(x1 * 1.5, g, x1 * 1.5, g + sin(a + PI / 2) * 50);
        // calculates growth of angle
        a = a + inc;
        x1 += 1;
        g += 2.5;
    }

    // draws bottom left curve, the pretty lilac colored one
    for (x1 = 0; x1 < width; x1++) {
        x1 += 5;
        y2 += 5;

        // color lilac
        stroke(165, 125, 235);

        // draws curve
        line(x1, height, x2, y2);
    } 

    // draws sunset-colored curve on right side of screen
    for (x1 = 0; x1 < width; x1++) {
        x1 = x1 + 4;
        y2 += 5;

        // draws sunset-color
        stroke(244, 66, 0);

        // draws curve
        line(x1, y1, width, y2 - 75);
    } 

    // draws maroon-colored lines in middle of screen
    for (var i = 30; i < width; i += 10) {
        i += 8;

        // color maroon
        stroke(130, 9, 41);

        // draws curve
        line(width - i, height, i * .25, 0);
    }

}

Was able to create several curved lines, including using the sin function to draw a sin curve in blue. Able to draw the bottom left and the right curves as, well, curves, and the center cross of lines in maroon.

Looking Outwards 04: Visual Sounds of the Amazon

This is a responsive artwork by Andy Thomas that visualizes the sounds of the Amazon he recorded. While this isn’t a rare concept, I think Thomas did a very good job with animating the 3D models and textures. The sound has adds a third element and extends the impact of the computer generated visuals, culminating in an extremely dynamic animation. https://vimeo.com/229927018 

Visuals Sounds of the Amazon

I really appreciate that the animation sort of became an animal itself simply through the natural feeling of the motion. It’s almost elastic in nature, thus even though the shapes take on an amorphous form, it still feels slightly familiar through it’s motion.