Category: Section B

Xiaoying Meng- Project 04 String Art

sketch

var x1;//x for first circle
var y1;//y for first circle
var x2;//x for second circle
var y2;//y for second circle
var x3;//x for third circle
var y3;//y for third circle
var x4;//x for fourth circle
var y4;//y for fourth circle
var r=50;//radius

function setup(){
    createCanvas(400,300);
    background(200);
}
function draw(){
    angleMode(DEGREES);
    //d is degree of the angle
    //To change color for each quarter of the circle
    for(var d=90;d<=180; d+=2){

        x1=200+r*cos(d);
        y1=150+r*sin(d);
        x2=200+(r+40)*cos(d+50);
        y2=150+(r+40)*sin(d+50);
        x3=200+(r+80)*cos(d+10);
        y3=150+(r+80)*sin(d+10);            
        x4=200+(r+120)*cos(d+50);
        y4=150+(r+120)*sin(d+50);

        //line between 1st and 2nd circle
        strokeWeight(0.03);
        stroke(255);
        line(x2,y2,x1,y1);
        //line between 3rd and 1st, 2nd circle
        line(x2,y2,x3,y3);
        line(x1,y1,x3,y3); 

        //line between 4th circle and 1st, 2nd, 3rd circle
        line(x3,y3,x4,y4);
        line(x2,y2,x4,y4);
        line(x1,y1,x4,y4);        
    }
    for(var d=180;d<=270; d+=2){

        x1=200+r*cos(d);
        y1=150+r*sin(d);
        x2=200+(r+40)*cos(d+50);
        y2=150+(r+40)*sin(d+50);
        x3=200+(r+80)*cos(d+10);
        y3=150+(r+80)*sin(d+10);            
        x4=200+(r+120)*cos(d+50);
        y4=150+(r+120)*sin(d+50);

        //line between 1st and 2nd circle
        strokeWeight(0.03);
        stroke(0);
        line(x2,y2,x1,y1);
        //line between 3rd and 1st, 2nd circle
        line(x2,y2,x3,y3);
        line(x1,y1,x3,y3); 

        //line between 4th circle and 1st, 2nd, 3rd circle
        line(x3,y3,x4,y4);
        line(x2,y2,x4,y4);
        line(x1,y1,x4,y4);        
    }
    for(var d=270;d<=360; d+=2){

        x1=200+r*cos(d);
        y1=150+r*sin(d);
        x2=200+(r+40)*cos(d+50);
        y2=150+(r+40)*sin(d+50);
        x3=200+(r+80)*cos(d+10);
        y3=150+(r+80)*sin(d+10);            
        x4=200+(r+120)*cos(d+50);
        y4=150+(r+120)*sin(d+50);

        //line between 1st and 2nd circle
        strokeWeight(0.03);
        stroke(120);
        line(x2,y2,x1,y1);
        //line between 3rd and 1st, 2nd circle
        line(x2,y2,x3,y3);
        line(x1,y1,x3,y3); 

        //line between 4th circle and 1st, 2nd, 3rd circle
        line(x3,y3,x4,y4);
        line(x2,y2,x4,y4);
        line(x1,y1,x4,y4);        
    }
    for(var d=0;d<=90; d+=2){

        x1=200+r*cos(d);
        y1=150+r*sin(d);
        x2=200+(r+40)*cos(d+50);
        y2=150+(r+40)*sin(d+50);
        x3=200+(r+80)*cos(d+10);
        y3=150+(r+80)*sin(d+10);            
        x4=200+(r+120)*cos(d+50);
        y4=150+(r+120)*sin(d+50);

        //line between 1st and 2nd circle
        strokeWeight(0.03);
        stroke(230);
        line(x2,y2,x1,y1);
        //line between 3rd and 1st, 2nd circle
        line(x2,y2,x3,y3);
        line(x1,y1,x3,y3); 

        //line between 4th circle and 1st, 2nd, 3rd circle
        line(x3,y3,x4,y4);
        line(x2,y2,x4,y4);
        line(x1,y1,x4,y4);        
    }


   
}

I first saw this image on pinterest. It inspired me to create this string art around a center point in circles. I found out how to find the points on circles and worked my way through.

yinjiet-LookingOutwards-04

Music Visualization – Debussy, Arabesque #1, Piano Solo

Animation created by Stephen Malinowski

This is a classical music piece composed by Claude Debussy. Stephen Malinowski, an American composer, pianist and software engineer, performed and transferred this classical music into a music visualization project. Stephen produces animated graphic scores and a system of colored shapes to represent elements in music. Particularly in this piece, Stephen mainly uses geometries like circles and lines. Each circle represent a note for piano, and the lines are the melody and flow of the music. When the music is playing, the geometries are animated with the rhythm. Stephen turns a music into a piece of computational artwork. With his algorithm system where he took information from MIDI file, he can generate graphical animations for every music. Stephen once used a quote from Eric Isaacson that “What you see is what you get”. Sometimes it is hard for audience to fully experience the music just by hearing. Therefore, with the help of animated graphics, audience can visually interact with the music. I’m inspired by Stephen Malinowski and I think that there should not just be one way to approach to an art pieces. We should be able to use as much senses as we can.

cmhoward-project-04

///move your mouse!///

cmhoward-04

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

function draw() {
	background('black');
	
	//bottom left half almond
	strokeWeight(2);
	stroke('violet');
	x1 = 0;
	x2 = 0;
	y1 = 300;
	y2 = 0;
	for (var i = 0; i < 20; i += 1) {
		//restrain to stop mouse at center of almond shapes
		x1 += min(mouseX, 80);
		y2 += 15;
		line(x1, y1, x2, y2);
	}
	//bottom left light green color
	strokeWeight(1);
	stroke('lightgreen');
	x1 = 0;
	x2 = 0;
	y1 = 300;
	y2 = 0;
	for (var i = 0; i < 80; i += 1) {
		x1 += min(mouseX, 80);
		y2 += 5;
		line(x1, y1, x2, y2);
	}
	//pattern repeats around canvas
	//topleft
	strokeWeight(2);
	stroke('violet');
	x3 = 0;
	x4 = 0;
	y3 = 300;
	y4 = 0;
	for (var i = 0; i < 20; i += 1) {
		x4 += min(mouseX, 80);
		y3 -= 15;
		line(x3, y3, x4, y4);
	}
	strokeWeight(1);
	stroke('lightgreen');
	x3 = 0;
	x4 = 0;
	y3 = 300;
	y4 = 0;
	for (var i = 0; i < 80; i += 1) {
		x4 += min(mouseX, 80);
		y3 -= 5;
		line(x3, y3, x4, y4);
	}
	//bottomright
	strokeWeight(2);
	stroke('violet');
	x5 = 400;
	x6 = 400;
	y5 = 0;
	y6 = 300;
	for (var i = 0; i < 20; i += 1) {
		//x5 -= 15;
		x6 -= min(mouseX, 80);
		y5 += 15;
		line(x5, y5, x6, y6);
	}
	strokeWeight(1);
	stroke('lightgreen');
	x5 = 400;
	x6 = 400;
	y5 = 0;
	y6 = 300;
	for (var i = 0; i < 80; i += 1) {
		//x5 -= 15;
		x6 -= min(mouseX, 80);
		y5 += 5;
		line(x5, y5, x6, y6);
	}
	//top right
	strokeWeight(2);
	stroke('violet');
	x7 = 0;
	x8 = 400;
	y7 = 0;
	y8 = 0;
	for (var i = 0; i < 20; i += 1) {
		y8 += min(mouseX, 80);
		x7 += 15;
		line(x7, y7, x8, y8);
	}
	strokeWeight(1);
	stroke('lightgreen');
	x7 = 0;
	x8 = 400;
	y7 = 0;
	y8 = 0;
	for (var i = 0; i < 80; i += 1) {
		y8 += min(mouseX, 80);
		x7 += 5;
		line(x7, y7, x8, y8);
	}
}

i really enjoyed this project! it was quite a challenge beginning to understand for loops, but playing with these geometries reminds me of things i’ve done with parametric modeling software in my architecture classes. it’s interesting to see how specific concepts transfer between technologies.

i especially enjoyed animating the string art, as there are moments that are seemingly symmetrical and it creates a really beautiful reaction between the geometries.

Jisoo Geum – Project 04 – String Art

sketch

// Jisoo Geum
// Section B
// jgeum@andrew.cmu.edu 
// Project-04

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

function draw(){
	var x1 = 0;
	var y1 = 0;
	var x2 = 0;
	var y2 = 0;
	var circS = 10;
	//var ix = 1.2;
	var iy = 1.1;
//rectangle 
	fill(255,150,143);
	noStroke();
	rect(190,0,215,190);

//ellipses 
     for (circX = 0; circX <= width; circX += 15 ){
     	for (circY = 0; circY <= height; circY +=10){
     		if (circY>180){break;} // makes the loop stop at a certain point 
     		if (circX>180){break;}
     	circY = circY * iy;
     	//draw circles 
     	stroke(255,126,143);
     	strokeWeight(.5);
     	// circles at top left
     	noFill();
     	ellipse(circX ,circY , circS ,circS );
     	// circles at the bottom right 
     	push();
     	translate(200,200);
     	ellipse(circX ,circY , circS ,circS );
     	pop();		
 		}	
 	}
    //point loops from top left  
    for (var i = 0; i < 80; i++){ // assign increment value as i 
        x1 += i+10;
        y1 += i;
        x2 += 20;
        y2 += 10; 
        // grey lines 
        stroke(90);
        line(100, 0, width, y1); 
        if (x1 > 500){break;}
        line(width, height, 90+x1, 0); 
        // light blue lines
        stroke(109,145,255);
        line(0, y1, x1, height); 
        // dark blue lines lines
        stroke(40,90,255);
        line(100, y1, x1+100, height);      
    }

}

 

This project was very experimental for me since the process was different from the previous ones. I usually draw my ideas in my sketchbook or illustrator, and then translate it into javascript. For the string art, however, I began straight from javascript and then decided on the other elements such as shapes and color. I think using the line loop was very difficult to me because I often got confused with the x and y coordinates.

Sean Meng – Looking Outwards 4

Ed Sheeran’s creating process of ‘Shape Of You’ Using Music Visualization

The visualization of ‘Shape Of You’

As Technology improves nowadays, music, as a mainstream media, evolves both in many ways that it is been heard. And among these evolution, music visualization is the most interesting aspect that I found out. Because it visualizes the music, which is only supposed to be heard, by using coding program and computational design. For example, in the process of composing the hit song “Shape Of You”, artist Ed Sheeran uses visualization technique to create the backdrop of music video. As a result, listeners can “see” the music through those geometric shape and lines that represent the drum beats and rhythm. The ‘visualizer’ itself is just a computer program that takes the sound tracks as input and transfer them into those shapes that move with the music. Ed Sheeran also brings this visualization technique to  his live performance, where he can enlighten the vibe.

Reference:

https://flowingdata.com/2017/12/21/ed-sheerans-creative-process-explained-with-music-visualization/

Sarah Yae Looking Outwards 4

LINES is an interactive sound art exhibition, created by  Anders Lin in 2016. The sensors detect which sound to play when one’s hands are moving between the lines, by detecting the hands’ distance from the sensors. The final form manifests the artist’s artistic abilities as he creatively incorporates the exhibition’s sound system with the concept of lines. It has a practical, as well as an artistic side.

I found this artwork very intriguing because anyone can make music, even without any musical background. It was interesting in the fact that an individual is using his entire body to make certain sound.

The link to see the whole exhibition is: https://www.youtube.com/watch?v=hP36xoPXDnM

LINES – an interactive sound art exhibition

Daniel Teague – Looking Outwards 4 – Computer Generated Sound

Title: Foley and Computer Modified Audio in Video Games

Foley artist uses various materials to create sound effects, such as the footsteps of an alien insect.

Republic Commando Foley video: https://www.youtube.com/watch?v=6RMcuD1mGMg

Halo 3 – Anatomy of A Game – Audio video: https://www.youtube.com/watch?v=AZ7KJPTZTRw

As someone who is both an avid gamer and an aspiring game creator, I absolutely love the way game designers create the often memorable and unique sounds one hears when playing a game. Whether it’s bashing an iron wok in order to create the sound of a hub cap, or using cut pineapple to make the footsteps of an alien soldier, audio designers are able to come up with ingenious ways of creating or recreating everyday sounds that we usually take for granted. In addition, they can use use computer software to modify sounds to their liking, such as when a voice actor’s audio recordings are tweaked to make them sound more like the alien creature they are portraying.

The above examples are from behind the scenes videos of two memorable games from my childhood. I hope you enjoy the creativity and hilarity of these games and their creators.

Romi Jin – Looking Outwards 04

The Infinity Machine consists of about 150 suspended, antique mirrors that has three variables — rotation, lighting, and sound, all constantly changing. Created by Janet Cardiff and George Bures, this installation is their first large scale mobile that essentially acts as a contemplation of “space, time and consciousness”.

Infinity Machine Installation View
“Infinity Machine Installation View”

These rotating (orbital) mirrors are illuminated by lights that consistently change, casting interesting shadows and a beautiful nebula form. The sounds that also accompany it are described as “mysterious” and “mesmerizing”, initially discovered on a CD made for relaxation. The sounds consist of recordings of the solar system and are played throughout the exhibition. Specifically, they reflect each of the planets (i.e. Uranus = bells, Earth = forest at night, etc). This is interesting to me because everything connects so beautifully and works so well in unison. In addition, I have never thought of sound as part of the computational fabrication realm, but this project has inspired me to research more about it.

Romi Jin – Project-04-String-Art-Section B

sketch

 /*
Romi Jin
Section B
rsjin@andrew.cmu.edu
Project-04
*/

// spacing variables
var space1 = 5; 
var space2 = .01;

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

function draw() {

// middle mouse strokes
    stroke(180);
    strokeWeight(0.1);
    line(mouseX, height, 0, mouseY);


// bottom left
    for (var y = 0; y < width; y += space1) {
        stroke(245,195,194);
        strokeWeight(0.1);
        line(y, height, 0, y);
    }

// top right
    for (var z = 0; z < width; z += space1) {
        stroke(253,185,200);
        strokeWeight(0.1);
        line(z, 0, width, z);
    }

// top left
    for (var a = 0; a < 10; a +=space2) {
        stroke(254,127,156);
        strokeWeight(0.1);
        push();
        var x = lerp(width, 0, a);
        var y = 0;
        var x2 = 0;
        var y2 = lerp(0, height, a);
        line(x, y, x2, y2);
        pop();
    }

// bottom right
    for (var b = 0; b < 10; b += space2) {
        stroke(253,171,159);
        strokeWeight(0.1);
        push();
        var x = width;
        var y = lerp(0, height, b);
        var x2 = lerp(width, 0, b);
        var y2 = height;
        line(x, y, x2, y2);
        pop();
    }



}

I wanted to make a several pink curves at each corner and interactive strokes in the middle (if you move your mouse over the image, it will draw gray lines in the center of the four curves).

Project-04-String-Art-Veronica

sketch

/*
Veronica Wang
Section B
yiruiw@andrew.cmu.edu
Project-04
*/

var r = 125; //radius of circle
var inc = 100; //increments on the circle
var stepDif = inc;//each step increases one increment
var stepNum = 0;//step number count


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

function draw() {

    var centerX = width / 2; //center x of circle
    var centerY = height / 2; //center y of circle
    var step = 2 * PI / inc; //increment size

    //main ellipse to be divided
    stroke(120);
    strokeWeight(0.5);
    noFill();
    ellipse(centerX, centerY, r * 2, r * 2);
    

    for (i = 0; i < inc / 2; i += 1){
        var currNum = stepNum; //current iteration number
        //x and y coordinates of starting points equally divided increments along ellipse
        var x1 = centerX + r * cos(step * currNum); 
        var y1 = centerY - r * sin(step * currNum);
        //for every increment in starting point,
        //step two increaments for destination point 
        var nextNum = (inc / 2 + 2 * (currNum)) % inc; 
        //x and y coordinates of the destination points on the ellipse
        var x2 = centerX + r * cos(step * nextNum);
        var y2 = centerY - r * sin(step * nextNum);
        //step number increase
        stepNum += 1;
        stroke(220, 20, 60);
        line(x1, y1, x2, y2);
    }

    var offset = 0; //offset to create layers
    var repeats = 7; //how many layers
    var op = 100; //opacity of layer color to create depth

    for (i = 0; i < repeats; i += 1) {
        op -= i * 4; //opacity decrease
        stepNum = 0; //step number
        offset += 8; //offset by 8 increments each time
        
        //same as the for loop above
        for (j = 0; j < inc / 2; j += 1){ 
            var currNum = stepNum + offset;
            var x1 = centerX + r * cos(step * currNum);
            var y1 = centerY - r * sin(step * currNum);
            var nextNum = ((inc / 2 + 2 * (currNum - offset)) + offset) % inc;
            var x2 = centerX + r * cos(step * nextNum);
            var y2 = centerY - r * sin(step * nextNum);
            stepNum += 1;
            stroke(220, 20, 60, op);
            line(x1, y1, x2, y2);
        }
    }

    noLoop();

}

In this project I looked up string art and found inspiration from Demir String art. I decided to make a project similar to this art piece they made:

It took me some time to figure out how to extract points from a circle, as well as stepping in different increments for the two ends of a line. But I am happy with the output and had fun doing this project.