Category: Section A

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.

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.

Looking Outwards 4 – Sara Frankel


Caption: This is the sound file from Lucier’s project “I Am Sitting in a Room”. As you can tell, his voice becomes quite distorted by the end of the project as the recording has been layered on top of another so many times.

Alvin Lucier’s project, “I Am Sitting in a Room” involves his voice, a room, and a recording/stereo system. How he goes about this project is he simply records his voice in a room by himself. After recording a few sentences, he replays his voice through the sound system in the room and records that through his microphone and he continues to play and record the newly layered recording. He does this for 45 minutes. As the recordings become more and more layered, one starts to notice that his sentences are no longer coherent as they become more “echoed”. By the time one reaches the end of the recording, the voice has become completely distorted and if anything, almost harmonic. Listening to the voice at this point in the recording is almost meditative if anything due to the sound waves of his voice being layered on top of each other. I admire this project because it truly proves the point that music is everywhere and within everyone. There is music and harmonic sequence within the everyday life, even so close to us that is our voice.

For even more information, here is a link to his exhibit at the MoMA in NYC, NY: https://www.moma.org/explore/inside_out/2015/01/20/collecting-alvin-luciers-i-am-sitting-in-a-room/

Looking Outwards – 04 Min Lee

LOOPLEX is an interactable user interface that distorts sound and colors through the hexagonal markers placed by the user on the device. As the user plays with the markers, a DV-cam inside the device keeps track of the different variations in the markers’ angles to trigger sound loops and changing color effects.

This project intrigued me because of its resemblance to a modern deejay’s turn-table. But LOOPLEX’s rendition of the turn-table incorporates both changing audio and colors through a more futuristic design. Instead of reacting to the physical touch of the user through a button or dial, the LOOPLEX uses a camera to sense the slightest changes in motion or position of the markers, meaning it could become an instrument for highly-skilled deejays and musicians in the future. As of yet, it is still a simple prototype that delivers on simple functions but in my opinion, it is a project that could be improved on for practical use in the real world.

Source:  https://vimeo.com/3546180

Project – 04 Sara Frankel String Art

sketch

var y1 = 0;
var y2 = 0;
var x1 = 0;
var x2 = 0;
var x3 = 0;

function setup() {
    createCanvas(400, 300);  
	background(0);
	for(var i = 0; i < 100; i++) { //for loop that is redrawing all of the lines
		y1 = lerp(height, 0, i/100); //increments lines at specific ratios
		x1 = lerp(0, width, i/100);
		y2 = lerp(0, height, i/100);
		x2 = lerp(width, 0, i/100);
		x3 = lerp(0, width, i/25);
		colorMode(HSB); // changes color values to those of saturation, not RGB
		strokeWeight(0.25); //decreases thickness of line
		stroke (280,map(100-i,100,0,60,0),100); //line of code that gradiates the color proportionally
		line(width, height/3, x3 - 1400, height * 2);
		colorMode(RGB); //color values back to RGB
		line(i,(height/2)+height*sin(map(i,0,100,0,2*PI))*.25,5*i,(height/2)-height*sin(map(i,0,100,0,2*PI))*.25); //creates lines that draw along a sin curve
		stroke(color(255));
		strokeWeight(0.5);
		line(x1 * i, y1, 0, 0);
		strokeWeight(1);
		stroke(color('#0B2838'));
		line(width/2, y1, x2, height/2);
		strokeWeight(2);
		stroke(color('#1F2654'));
		line(width/2, y2, x1, height/3);
		strokeWeight(0.05);
		stroke('pink');
		strokeWeight(1);
		line(width/2, height/2, x1, height * 0.125 - 50);
		stroke(color('10'));
		line(width/3, y2, x1, height/3);
		stroke(color('#513B70'));
		line(width/2 + 50, y2, x1, height/3);
		strokeWeight(0.25);
		stroke(color('#8E5D91'));
		line(width/2, y2, x1, height/4);
		strokeWeight(1);
		stroke(color('#B589A0'));
		line(width/2, y1, x2, height/4);
		line(width/2, height/2, x1, -height/8);

	}
}

I enjoyed doing this project as I really love looking at the play of negative space that tricks our eyes that these straight lines create a curved one. I also particularly enjoy experiencing and seeing the play of a color palette and how each color plays into the next.

Looking Outwards 04

https://www.youtube.com/watch?v=wsITBynbeTU

This is a video and a link to the piece.

This project really interested me based on the interaction that the viewer can have and how much agency is actually given to the viewer. In my opinion the art that interests me most is usually the kind that I can interact with. This audio reactive installation was made by 3 artists in the artist collective, The Creators. The algorithms that generated the work probably had to do with the distance that the person was from the installation, similarly to mouseX, they might’ve had a camera that could base the sound and video movement off of a person’s proximity to said camera.  The artists’ concept is implemented into their execution, the viewers participation or lack thereof shows the concepts of causality, responsibility, and choice. In this piece, the viewer becomes the creator, the sound and visuals react to the choices of the viewer.

Kyle Leve-Project-04-String-Art

sketch

// Kyle Leve
// Section A
// kleve@andrew.cmu.edu
// Project-04-String Art

var cirX = 200;
var cirY = 150;

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

function draw() {
	// Creates red lines
	for (var a = 0; a < 1.5; a += 0.04) {
		strokeWeight(0.4);
		stroke('red');
		x1 = lerp(0, width / 2, a);
		y1 = lerp(0, height * 2, a);
		x2 = lerp(width * 2, 0, a);
		y2 = lerp(height / 2, 0, a);

		line(x1, 0, width, y1);
		line(x2, height, 0, y2);
		line(x1, height, width, y2);
		line(x2, 0, 0, y1);
	}
	// Creates white fade at the bottom
	for (var b = 0; b < 300; b++) {
		strokeWeight(0.5);
		stroke(255);
		line(b * 10, 10, b, 310);
	}
	// Creates ellipse in the center
	fill(0);
	ellipse(cirX, cirY, 100, 100);

	// Creates gray lines
	for (var c = 0; c < 1.2; c += 0.03) {
		strokeWeight(0.2);
		stroke(170);
		x1 = lerp(0, width / 5, c);
		y1 = lerp(0, height * 5, c);
		x2 = lerp(width * 5, 0, c);
		y2 = lerp(height / 5, 0, c);

		line(x1, 0, width, y1);
		line(x2, height, 0, y2);
		line(x1, height, width, y2);
		line(x2, 0, 0, y1);
	}

	// Creates two dark red triangles in the circle
	for (var d = 0; d < 0.75; d += 0.08) {
		strokeWeight(1.25);
		stroke('darkred');
		x1 = lerp(150, 200, d);
		y1 = lerp(150, 200, d);
		x2 = lerp(150, 200, d);
		y2 = lerp(150, 200, d);

		line(x1 + 25, 120, 175, y1 - 30);
		line(x2 + 50, 150, 200, y2);
		line(x1 + 50, 150, 200, y2);
		line(x2 + 25, 120, 175, y1 - 30);
    }
    nofill(); // I am not sure what this does but it makes the picture look cool!
}

I found this project to be really difficult since I did not know where to start. I ended up just trying to use the lerp() function until something showed up on the canvas, but once it did I began to understand what I was doing. Throughout the project I was able to learn how to grow and shrink lines and move them around. Overall, I found this project to be very informative and interesting to learn.

Kyle Leve-LO-04-Section A

A project that I discovered is FlowComposer. FlowComposer is a music generating software created by Sony CSL as a part of their Flow Machines program. The function of this software is to generate backing tracks of jazz standards that emulate the style and groove of specific big-name jazz artists. This project seems to have started in 2014 and since then has continued to grow. What I admire about this software is that it is seeming to work on one of the main problems of robotic emulation: lack of expression. Even though there is no way for a machine to fully capture a person’s emotions, it is a start to being able to get a machine to copy the style of musicians. The software is also about to re-harmonize melodies, create variations, and render the audio with different instruments. This software is a way for jazz musicians to play with a rhythm sections if they do not have access to a live rhythm section.

For more info:

FlowComposer: composing with AI

Jamie Dorst Project 04 String Art

sketch

/*
Jamie Dorst
Section A
jdorst@andrew.cmu.edu
Project-04
*/

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

function draw() {
    // variables
    var x1 = 10;
    var y1 = 10;
    var x2 = 20;
    var y2 = 20;
    var x3 = 350;
    var y3 = 15;
    var x4 = 10;
    var y4 = 295;
    var x5 = 10;
    var y5 = 10;
    var x6 = 20;
    var y6 = 20;  
    var x7 = 350;
    var y7 = 15; 
    var x8 = 10;
    var y8 = 295;
// BOTTOM LEFT CORNER

    // draw bottom left white background lines
    // change y coordinate of first point
    // change x coordinate of second point
    for (var i = 0; i < 50; i++) {
        stroke('white');
        x5 += 9;
        y5 += 11;
        line(0, y5, x5, 300);
    }
    // draw bottom left blue lines
    // change y coordinate of first point
    // change x coordinate of second point
    for (var i = 0; i < 50; i++) {
        stroke('blue');
        x1 += 10;
        y1 += 12;
        line(0, y1, x1, 300);
    }

// TOP RIGHT CORNER

    // draw top right white background lines
    // change y coordinate of first point
    // change x coordinate of second point
    for (var i = 0; i < 50; i++) {
        stroke('white');
        x6 += 19;
        y6 += 22;
        line(400, y6, x6, 0);
    }
    // draw top right green lines
    // change y coordinate of first point
    // change x coordinate of second point
    for (var i = 0; i < 50; i++) {
        stroke('green');
        x2 += 20;
        y2 += 23;
        line(400, y2, x2, 0);
    }

// TOP LEFT CORNER

    // draw top left white background lines
    // change y coordinate of first point
    // change x coordinate of second point
    for (var i = 0; i < 50; i++) {
        stroke('white');
        x7 -= 26;
        y7 += 24;
        line(x7, 0, 0, y7);
    }
    // draw top left red lines
    // change y coordinate of first point
    // change x coordinate of second point
    for (var i = 0; i < 50; i++) {
        stroke('red');
        x3 -= 27;
        y3 += 25;
        line(x3, 0, 0, y3);
    }

// BOTTOM RIGHT CORNER

    // draw bottom right yellow lines
    // change y coordinate of first point
    // change x coordinate of second point
    for (var i = 0; i < 50; i++) {
        stroke('white');
        x8 += 16;
        y8 -= 18;
        line(400, y8, x8, 300);
    }
    // draw bottom right yellow lines
    // change y coordinate of first point
    // change x coordinate of second point
    for (var i = 0; i < 50; i++) {
        stroke('yellow');
        x4 += 15;
        y4 -= 19;
        line(400, y4, x4, 300);
    }
}

For this project I wanted to practice doing for loops. I had trouble figuring out how to move the lines from the bottom left corner, especially getting them into the top left and bottom right corners, because I had to make some values negative. After I figured that out, I wanted to emphasize the shapes of the lines so I made the background black, and added background lines to each corner to make them pop. Overall I found this project sort of difficult, but it was cool once it finally worked.