Looking Outward-04

For sound art, I found a project called The Classyfier. This project was created by Benedict Hubener, Stephanie Lee and Kelvyn Marte at the CIID.

The Classyfier is a table shaped speaker that detects what type of beverage people are drinking and plays a certain playlist according to the beverage. The speaker picks up on cue noises, such as the clinking of wine glasses or the popping open of a beer can.

I find this project inspiring because of the aspect of machine learning. The machine picks up on certain sound characteristics and compares it to a catalogue of sounds preprogrammed into it. From there, it is able to connect the suitable playlist and play the right music. In addition, the table has a feature where the user can knock on the tabletop to skip to the next song. This project connects very human understandings such as genres, mood, vibes, to a very robotic calculation. From a simple sound characteristic, a computer program is able to emulate the mood of drinking a relaxing glass of wine or cracking a cold beer with a pal.

Link

Lrospigl Project 04 line pattern

When I started with this project, I didn’t have a clear idea of what I wanted my image to look like. However, I did know I wanted the to be a play in line quantity that the user was able to have control over. I made it so that if you move your mouse to the top left corner of the canvas, you will see the darkest color possible, as well as the highest concentrations of lines. And if you move your mouse to the bottom right corner, you will see the least amount of lines, and the lightest/ least visible color.

sketch

//Laura Rospigliosi
//Section C
//lrospigl@andrew.cmu.edu
//Project-04-String art

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

function draw () {
  background (240);

var r = mouseX; 
var g = mouseY;
var x1 = width/2;
var y1 = height/2;
var x2 = width/5;
var y2 = height/5;
var spacing = 5;
strokeWeight (0.5);

//line sequence one
stroke (r, g, 150);
//top left quadrant `
  for (x = width/5; x < width/2 + 10; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = height/5; y < height/2; y += spacing) {
    line (x1, y, x2, y2);
  }
  
//top right quadrant
  push ();
  scale (-1, 1);
  translate (-400, 0);
    for (x = width/5; x < width/2 + 10; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = height/5; y < height/2; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();
  
//bottom left quadrant
  push ();
  scale (1, -1);
  translate (0, -300);
    for (x = width/5; x < width/2 + 10; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = height/5; y < height/2; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();
  
//bottom right quadrant
  push ();
  scale (-1, -1);
  translate (-400, -300);
    for (x = width/5; x < width/2 + 10; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = height/5; y < height/2; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();


//line sequence two
//top left quadrant
  for (x = 0; x < width/5; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = 0; y < height/5; y += spacing) {
    line (x1, y, x2, y2);
  }
  
//top right quadrant
  push ();
  scale (-1, 1);
  translate (-400, 0);
  for (x = 0; x < width/5; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = 0; y < height/5; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();
  
//bottom left quadrant
  push ();
  scale (1, -1);
  translate (0, -300);
  for (x = 0; x < width/5; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = 0; y < height/5; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();
  
//bottom right quadrant
  push ();
  scale (-1, -1);
  translate (-400, -300);
  for (x = 0; x < width/5; x += spacing) {
    line (x, y1, x2, y2);
  }
  for (y = 0; y < height/5; y += spacing) {
    line (x1, y, x2, y2);
  }
  pop();

//curves
var c2 = height;
var c3 = width;
var c4 = height;
var spacing2 = map(mouseX, 0, width, 5, 15);

//curves
  noFill();
  stroke (0)
  strokeWeight (0.5);

  for (c1 = width/10; c1 < width*(2/3); c1 += spacing2) {
    curve (0, 0 ,0, 0, c1, c2, c3, c4);
    }

  push ();
  scale (1, -1);
  translate (0, -300)
    for (c1 = width/10; c1 < width*(2/3); c1 += spacing2) {
    curve (0, 0 ,0, 0, c1, c2, c3, c4);
    }
  pop();

  push ();
  scale (-1, 1);
  translate (-400, 0);
    for (c1 = width/10; c1 < width*(2/3); c1 += spacing2) {
    curve (0, 0 ,0, 0, c1, c2, c3, c4);
    }
  pop();
  
  push ();
  scale (-1, -1);
  translate (-400, -300);
    for (c1 = width/10; c1 < width*(2/3); c1 += spacing2) {
    curve (0, 0 ,0, 0, c1, c2, c3, c4);
    }
  pop();

}

Project 4 – String Art

sketch



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

function draw() {
  var x0 = 100;
  var y0 = 50;
  var x1 = 300;
  var y1 = 250;
  var xX = 100;
  var yX = 50;
  var gap = 5;
  var redness = 220;
	background (0, 0, 0);
  //the first shape which is a square
	for (var i=1; i<41; i++){
    stroke (255, redness, redness);
    line (xX, y0, x1, yX);
    line (width-xX, y1, x0, height-yX);
    stroke (255, 220-redness, 220-redness);
    line (width-xX, y0, x0, yX);
    line (xX, y1, x1, height-yX);
    xX += gap;
    yX += gap;
    redness -= gap;
  }

  //the second shape that is like a cross
  var xC = width/2;
  var yC = 0;
  var greeness = 100;
  for (var j=0; j<31; j++){
    stroke (255, greeness, 0);
    line (width/2, yC, xC, height/2);
    line (width/2, yC, width-xC, height/2);
    line (width/2, height-yC, xC, height/2);
    line (width/2, height-yC, width-xC, height/2);
    xC += gap;
    yC += gap;
    greeness += gap;
  }

  //the third shape that connects the cross
  var yM = 0;
  var xM = width/4*3;
  var blueness = 50;
  for (var x=0; x<11; x++){
    stroke (blueness, blueness, 255);
    line (width/2, yM, xM, height/2);
    line (width/2, yM, width-xM, height/2);
    line (width/2, height-yM, xM, height/2);
    line (width/2, height-yM, width-xM, height/2);
    yM += gap;
    xM += gap;
    blueness += gap*2;
  }

  //the fourth shape that rotates from the center
  var centerX = width/2;
  var centerY = height/2;
  var radius = 200;
  var angle = 0;
  var factor = dist(mouseX, mouseY, centerX, centerY);
  //map the distance to the scale of radians
  var angleC = map(factor, 0, (200^2+150^2)^(1/2), 0, PI);
  for (var y=0;y<36;y++){
    x1 = centerX + radius * Math.cos( angle );
    y1 = centerY + radius * Math.sin( angle );
    x2 = centerX - radius * Math.cos( angle );
    y2 = centerY - radius * Math.sin( angle );
    stroke (204,255,153);
    line (x1, y1, x2, y2);
    //the angle of the rotation is related to the mouse
    angle += angleC;
  }
}

My project was inspired by the idea of centralization. All the curves point to the center or rotate through the center. Also, I look for the string art online and get some inspiration of the form.

HaeWanPark-LookingOutwards-4

Touch Pianist – Magical Piano In Your Web Browser, 2015

Touch Pianist is a musical performing program created by Batuhan Bozkurt who is a Turkish musician and sound engineer. You can perform a variety of timeless classical piano music in computer screen with keyboard or touchscreen. For enjoying this performing exercise, you can either access to a website or download the app (both Android and iOS available). He used HTML5 with WebGL and WebAudio which allow presenting an interactive visualization of popular classical piano music pieces. When Touch Pianist was released, it became so popular. Even it was played more than a million times in just two weeks. I think that fact actually can be a proof that this is pretty interesting and fun to play with. I tried to play on my computer. Its graphics nicely get along with the music. I like that he made a program entertaining many people with performing classical music that can be easily considered as not very interesting and even boring especially in our generation. So, I guess this program can be also utilized to renew the mindset toward classical music which value is often overlooked.

Here is video to show performing on iPad

touchpianist.com

 

aboyle-Looking Outwards-04

For this post, I have chosen to discuss the Flow Machines Project. This project is funded by the European Research Council and coordinated by François Pachet. Their website can be found at http://www.flow-machines.com/. This project uses computers to help compose music in the style of a chosen composer.

I really admire this project’s attempts to emulate creativity. While I can easily understand how computers spit out preexisting melodies, I am impressed with how this project aims to generate new music. Since creativity has long been relegated to the realm of humanity, it’ll be interesting to see where this project goes.

The algorithms used in this project are based on Markov models. They capture the properties of sequences and abstract them into mathematical concepts. Using these concepts, the computer is then able to generate music of its own. The creators have an evident love for music in general, as is to be expected, but it seems to me that they also have a love for the aspects of music that make it unique and recognizable.

jdbrown – Project 4: String Theo– I mean “Art”

Jdbrown-StringArt

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

function draw () {
        background (0);
        strokeWeight (1);
        fill (255);
        rect (10, 10, 580, 380);
        for (var i = 0; i < 60; i++) {
            drawMarker (i);
        }

}

function drawMarker (i) {

        push ();                    // Exterior wheel
        translate (200, 200);
        rotate (radians (i * 4));
        rotate (radians (i));
        line (150, 0, -200, -400);
        pop ();

        push ();                    // Exterior wheel (circle outline)
        translate (200, 200);
        rotate (radians (i * 1));
        fill (0);
        ellipse (150, 3, 5, 5);
        pop ();

        push ();
        translate (50, 200);       // weird mountain thing (main)
        rotate (radians (i /2));
        line (300, 0, 600, 400);
        pop ();

        push ();
        translate (50, 200);       // weird mountainthing (darker)
        rotate (radians (i /3));
        line (300, 0, 600, 400);
        pop ();

        push ();
        translate (50, 200);       // weird mountain thing (darkest)
        rotate (radians (i /5));
        line (300, 0, 600, 400);
        pop ();

        push ();                   // Inner wheel
        translate (200, 200);
        rotate (radians (i * 5));
        line (75, 0, 100, 400);
        pop ();

        push ();                    // Inner wheel (circle outline)
        translate (200, 200);
        rotate (radians (i * 3));
        fill (0);
        ellipse (75, 3, 5, 5);
        pop ();

        push ();
        translate (50, 200);       // weird mountain thing (small, main)
        rotate (radians (i));
        line (225, 0, 300, 200);
        pop ();

        push ();
        translate (50, 200);       // weird mountain thing (darker, main)
        rotate (radians (i / 2));
        line (225, 0, 300, 200);
        pop ();

        push ();
        translate (50, 200);       // weird mountain thing (darkest, main)
        rotate (radians (i / 4));
        line (225, 0, 300, 200);
        pop ();

        push ();                    // vision lines
        var c = 1;
        translate (200, 200);
        rotate (radians (i * 6));
        line (0, 0, mouseX / 2, mouseY);
        line (0, 0, mouseY / 10, mouseX / 4);
        stroke (255);
        line (0, 0, mouseY / 2, mouseX);
        pop ();

        var R = mouseX;
        var G = mouseY;
        var B = mouseX;

        fill (R, G, B);        // mountain eye (iris)
        ellipse (200, 200, 30, 30);
        fill (0);                  // mountain eye (pupil)
        ellipse (200, 200, 15, 15);
        fill (255);                // mountain eye (pupil)
        ellipse (195, 195, 5, 5);
}

For my String Art project, I was really inspired by the lecture this morning  (Friday, Sept. 22). I ended up making this weird all-seeing eye, spreading its illuminati dogma throughout the land. I like it, and you should to.

Josh

ctv-project-04-String Art

sketch

//Ty Van de Zande
//Section B
//ctv@andrew.cmu.edu
//Project-04


var mx;
function setup() {
    createCanvas(400, 300);
    background(23, 95, 171);
    
}
 
function draw() {
    //redraws background every frame
    background(23, 95, 171);
    
    //creates a list that places the lines on the x-axis
    for(i = 0; i < 500; i+=5 ) {
    p1 = {x: i, y: 0}; 
        stroke(255);
        strokeWeight(2);
	   curve(p1.x, p1.y, p1.x, p1.y, p1.x, height, p1.x, height); 
    }
     
    //creates lines that are pretty much the same as above, but rotated
    push();
    rotate(radians(2));
    for(i = 0; i < 500; i+=5 ) {
    p1 = {x: i, y: 0}; 
        stroke(255, 95, 171);
        strokeWeight(.25);
	   curve(p1.x, p1.y, p1.x, p1.y, p1.x, height, p1.x, height); 
    }
    pop();
    
    //draws lines in an upside down triangle, maps mouseY to bottom position
    for(i = 0; i < 20; i++ ) {
        noFill();
        p1 = {x: i*20, y: 10}; 
        stroke(255);
        strokeWeight(1);
	   curve(p1.x, p1.y, p1.x, p1.y, mouseY, height, width/2, height);   
    }
    
    //rotates a bunch of lines based on mouseX position
     for(i = 0; i < 50; i++ ) {
        p1 = {x: i*15, y: -1110}; 
        push();
         translate(0, 0);
         rotate(radians(mouseX/10));
         stroke(255);
         strokeWeight(1);
         curve(p1.x, p1.y, p1.x, p1.y, p1.x, height, p1.x, height);
	   pop();
     }
   
}

 

For this project, I was inspired by moiré patterns created with lines. The interference of lines that overlap create bizarre, superimposed patterns. This sense of confusion continues through the person’s mouse interactions with the piece. the mouse x, y axis is mapped to unintuitive movements of specific points. this was done to pair with the neat moirés.

monicah1_lookingoutward_04

Ryoji Ikeda- The Transfinite

Ryoji Ikeda, japanese artist and electronic composer, installed The Transfinite at the park avenue armory in new york city. The installation is about the concept of infinity, rationality, and the beauty of data. In real time, it presents the analysis of artists’ soundtrack in visual and audio, a combination of music and mathematics. I went to one of his installation in downtown pittsburgh last year. The experience was like nothing else that I had before. It was beautiful to hear the music with no lyrics, moreover, looking at the digital installation matching the music was extraordinary. It was a wonderful experience both physically and digitally. The amazing part is that the digital visual and audio was created by our daily datas. I imagined I might be part of the installation too.

atraylor – Project 04 – Section B

sketch

// atraylor
// project 04, Section B

var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var num = 0.01;

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

}

function draw() {

    for (var i = 0; i < 10; i++) { //Drawing the lines from the edges
        stroke(0, 178, 135);
        lineLeft(i, y1);
        lineRight(i, y1);
    }

    for (var i = 0; i < 180; i++){ // drawing the line spiral
        c = color(25, 255, 200);
        num += 1;
        if (i > 60) {
            c = color(255, 62, 0);
        }
        if (i > 120){
            c = color(25, 255, 200);
        }
        if (i > 180){
            c = color(255, 62, 0);
        }
        stringLine(num, c, i);
    }
    noLoop(); // stoping the for loop so it doesn't keep drawing
}

function stringLine(deg, col, i) {
    push();
    translate(200, 150);
    rotate(radians(deg * 6));
    stroke(col);
    line( i * 0.5, 0, 200, 0); // changing the x position so the radius increases
    pop();
}

function lineLeft(i, y1) { // the two line things on the left side
    y1 = lerp(0, 400, i * .01); // these interpolate between the points, beginning y and end y
    y2 = lerp(300, 0, i * .01);
    line(0, i * 2 + 280, 200, i * y1);
    line(0, i * 2, 200, i * y1);
}

function lineRight(i, y1) { // the only difference is that these start at 400 rather than 0
    y1 = lerp(0, 400, i * .01);
    y2 = lerp(300, 0, i * .01);
    line(400, i * 2 + 280, 200, i * y1);
    line(400, i * 2, 200, i * y1);
}

For this project, I tried to use the lerp() function to define the beginning and end points of my lines. It was a rough task because I knew what lerp was supposed to do, but I wasn’t checking my changes after I made them. I figured it out but it took a lot of guessing and checking.

 

svitoora – 04 Gravity 2.0

Gravity

//
// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E
//
// Gravity 2.0 is a point mass dynamic drawing inspired
// from physics, nature, and falling off a skateboard.
// f = G (m1*m2)/d^2
// f = G sum(m)/(d from avg)^2


// World Model Setup /////////////////////////////////////
var max_curves = 4; //Limit amount of drawings

var w = 300;
var h = 400;
var t = 1; // time variable
var g = 12; // gravity

var ball;
var balls = []; // Local Objects
var ballz = []; // Global Object
var ball_size = w * .010 // Default object size

var max_count = 35;
var auto_every = 40;
var auto_create = 125;
var max_line = 1000; // Prevents crash


// Control ///////////////////////////////////////////////

// Creates new object in system given (x,y)
function ball_create(x, y) {
	this.x = x;
	this.y = y;
	this.vx = 0;
	this.vy = 0;
	this.r = ball_size;
	this.m = 1;
	this.ALPHA = 255
}

function mousePressed() {
	ballz.push([]);
	// print("Added Yo");
}

// Add new object and delete oldest object
function mouseDragged() {
	if (t % 10) {
		ballz[ballz.length - 1].push(new ball_create(mouseX, mouseY));
	}
	if (ballz[ballz.length - 1].length >= max_count) {
		ballz[ballz.length - 1].splice(0, 1)
	}
}

// World /////////////////////////////////////////////////


// Maintain global mass of system
function sum_mass(balls) {
	sum_m = 0;
	for (i in balls) {
		sum_m += balls[i].m;
	}
	return sum_m;
}

// Determines the system's average position X
function average_posX(balls) {
	if (balls.length == 0) {
		return w / 2;
	};
	var sum_x = 0;
	for (i in balls) {
		sum_x += balls[i].x;
	}
	avg = sum_x / balls.length
	return avg;
}

// Determines the system's average position Y
function average_posY(balls) {
	if (balls.length == 0) {
		return h / 2;
	};
	var sum_y = 0;
	for (i in balls) {
		sum_y += balls[i].y;
	}
	avg = sum_y / balls.length;
	return avg
}

// Apply gravity for all objects in the system
function gravity(balls) {
	var avg_x = average_posX(balls);
	var avg_y = average_posY(balls);
	var speed = .005 //0-1 Multuplier for controlling velocity of attratction
	for (i in balls) {
		d = dist(balls[i].x, balls[i].y, avg_x, avg_y);
		ds = map(d, 0, w / 2, 1, 0); // used to simulate d^2

		// Gravity X
		if (balls[i].x > avg_x) {
			balls[i].x *= 1 - (g * (balls.length * speed));
		} else {
			balls[i].x *= 1 + (g * (balls.length * speed + ds));
		}

		// Gravity Y
		if (balls[i].y > avg_y) {
			balls[i].y *= 1 - (g * (balls.length * speed))
		} else {
			balls[i].y *= 1 + (g * (balls.length * speed + ds));
		}
	}
}

// Add object to system in the middle; // Used at setup()
function add_ball(balls) {
	balls.push(new ball_create(w / 2, h / 2));
}



// Connects all the object in the system via a line
function draw_line(balls) {
	lines = 0
	opacity = 255 * .1

	if (lines < max_line) {
		for (i in balls) {
			var x_1 = balls[i].x;
			var y_1 = balls[i].y;
			for (i in balls) {
				var x_2 = balls[i].x;
				var y_2 = balls[i].y;
				stroke(255, 255, 255, opacity);
				line(x_1, y_1, x_2, y_2);
				lines += 1;
			}
		}
	}
}

// SETUP
function setup() {
	createCanvas(w, h);
	g = .0025;
	background(50);
	balls.length = 0; // Kill all objects in system
}

// Refreshes the systems with new objects
// Removes old objects and add new objects
function auto_refresh(balls, t) {
	// Starts refreshing system at 5 objects
	// every auto_every interval.
	if (t % auto_every == 0 & balls.length > 5) {
		balls.splice(0, 1);
	}
	X = constrain(mouseX, 1, w);
	Y = constrain(mouseY, 1, h)
	if (t % auto_every == 0) {
		balls.push(new ball_create(X, Y));
	}

	// Resets the system to 8 objects once every 500 ms
	// This prevents overload; Array starts at [0]
	if (t % 500 == 0 & balls.length > 8) {
		balls.length = 7;
	}
}

// Draw ////////////////////////////////////////////////////

// Draw all objects in systems mapped by distance from avg
function draw_balls(BALLS) {
	// print("BALLS.length" + BALLS.length)
	for (i in BALLS) {

		var avg_x = average_posX(BALLS);
		var avg_y = average_posY(BALLS);

		var d = dist(BALLS[i].x, BALLS[i].y, avg_x, avg_y);
		var SIZE = map(d, 0, w / 2, -2, 3) //max to min
		print(i + " : " + SIZE)

		noStroke();
		fill(255, 255, 255, 255 * .5);
		ellipse(BALLS[i].x, BALLS[i].y,
			BALLS[i].r * (2 * SIZE),
			BALLS[i].r * (2 * SIZE));
	}
}

function local_gravity(ballz) {
	for (i in ballz) {
		if (ballz[i].length > 1) {
			gravity(ballz[i]);
		}
	}
}

function DIE(BALLS) {
	BALLS.splice(0, 1);
}

function death_ballz(ballz) {
	var populated = 0;
	for (i in ballz) {
		if (ballz[i].length != 0) {
			populated++;
		}
	}
	if (populated > max_curves) {
		DIE(ballz[0]);
	}
}


function refresh_ballz(ballz) {
	if (ballz.length > 4) {
		for (i in ballz) {
			if (ballz[i].length == 0) {
				ballz.splice(i, i + 1);
				ballz.push([]);

			}
		}
	}
}


function draw_ballz(ballz) {
	for (i in ballz) {
		draw_balls(ballz[i]);
	}
}

function draw_lines(balls) {
	for (i in ballz) {
		draw_line(ballz[i]);

	}
}

// Creates Trail
function guider1() {
	stroke(255, 255, 255, 255 * .75)
	line(mouseX, mouseY, pmouseX, pmouseY)
}

// Prompt user to drag via random generation
function guider2() {
	ran1 = random(4, 12);
	if (t % auto_create == 0) {
		ballz.push([])
		ballz[ballz.length - 1].push(new ball_create(mouseX, mouseY));
		ballz[ballz.length - 1].push(new ball_create(pmouseX, pmouseY));
		for (var i = 0; i < ran1; i++) {
			ballz[ballz.length - 1].push(new ball_create(mouseX * random(.75,
				1.25), mouseY * random(.75, 1.25)));
		}
	}
}

// Execute /////////////////////////////////////////////////
function draw() {
	background(50);
	noStroke();
	// Update World
	t = t + 1;
	local_gravity(ballz);
	death_ballz(ballz);
	refresh_ballz(ballz);
	// LOL();

	// // Draw World
	draw_lines(ballz);
	guider1();
	guider2();
	// draw_ballz(ballz);	// For Some reason this doesn't work
	// Maybe it ran out of memory allocation


}

Click and drag to draw shapes. Try writing your name. I struggle with array in arrays. Eventually figured I figured it out.