Month: September 2017

jiaxinw-SectionB-LookingOutwards 04

Cloud Piano

Cloud Piano was an installation created by David Brown in 2014. In this installation, a piano would be played based on the shapes and movements of the clouds. A camera was used to record the real-time cloud and a software articulated a device to press the keys on the piano according to the moving images from the video. I think the customized software analyzed the real-time images and transferred them into black and white pictures. According to the portion of black and white, the strength and position to press the piano keys were decided.

I like how the artist combined the unpredictable movements of nature and the artificial instrument together. It created an unusual yet romantic feeling for the music. This was a new way of turning nature into artistic sounds. Using the computing skills to analyze the real-time data, the artist turned his feeling of nature into an interesting art installation.

For more information: http://www.dwbowen.com/cloud-piano/

 

jiaxinw-sectionB-Project 4-String Art

sketch

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

    //left white crossed lines
    stroke(255);
    var yl = height/4*3;
    var ym1 = height/8*5;

    for(var i=0; i < 15; i++){
        line(0, yl, width/2, ym1);
        yl *=0.97;
        ym1 *= 1.02+mouseX;
    };

    //right white crossed lines
    var yr = height/4*3;
    var ym2 = height/8*5;

    for(var i=0; i < 15; i++){
        line(width, yr, width/2, ym2);
        yr *=0.97;
        ym2 *= 1.02;
    };



    //left top lines 
    var x1 = 0;
    var y1 = height/2;

    for (var i=0; i < 15; i++){
        stroke(251,63,65);
        line(x1, 0, 0, y1);
        x1 += 15;
        y1 -= 10;
    };

    // right top lines 
    var x2 = width;
    var y2 = height/2

    for (var i=0; i < 15; i++){
        stroke(18,187,255);
        line(x2, 0, width, y2)
        x2 -= 15;
        y2 -= 10;
    };

    // right bottom lines
    var x3 = width;
    var y3 = height/2;

    for(var i=0; i < 15; i++){
        stroke(255, 242, 0);
        line(x3, height, width, y3)
        x3 -= 15;
        y3 += 10;
    };

    // left bottom lines
    var x4 = 0;
    var y4 = height/2;

    for(var i=0; i < 15; i++){
        stroke(0,255,217);
        line(x4, height, 0, y4);
        x4 += 15;
        y4 += 10;
    }

    //upper left grey crossed triangle
    var x5 = width/4;
    var y5 = height/2;

    stroke(100);
    line(x5, y5, width/2, y5)
    line(x5, y5, x5+(width/2-x5)/2, y5- sqrt(3)/2*(width/2-x5));
    
    for(var i=0; i < 8; i++){
        line(x5+5, y5, width/4+(width/2-x5)/2, y5- sqrt(3)/2*(width/2-x5));
        x5 += 10;
    }

    //upper purple triangle
    var x6 = width/4*3;
    var y6 = height/2;

    line(width/2, y6, x6, y6)
    line(x6, y6, width/4+(width/4)/2, y5- sqrt(3)/2*width/4);

    for(var i=0; i < 8; i++){
        line(x6-5, y6, width/4+(width/4)/2, y5- sqrt(3)/2*width/4);
        x6 -= 10;
    }

    //lower purple triangle
    var x7 = width/4;
    var y7 = height/2;

    stroke(156,0,255);

    for(var i=0; i < 31; i++){
        line (x7, y7, width/2, height/4*3);
        x7 += 5;
    }

    var x8 = width/4;
    var y8 = height/2;

    for(var i=0; i < 31; i++){
        line (x8, y8, width/2, height/4);
        x8 += 5;
    };

    
}

function draw() {
    
}

I tried to create a common usual string art pattern like this at first :

Later, I started to try to create a concrete shape in the middle of my canvas. During this project, I just had fun with combining different sequences of lines.

Project 4, odh

odhP4

//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 4

var W = 1;  //Value of strokeweight
var B = 150;//Value of B in RGB

function setup() {
    createCanvas(400, 300);
}
 
function draw() {
    background(50, 50, B);
    strokeWeight(W);

    //Sets up the series of lines and how they move with the mouse's location
    for(var i = 0; i < 20; i ++){
        line(mouseX, i*20, 400-i*10, height);
        line(mouseX, i*20, i*10, height);
        line(400, i*20, 100+i*10, mouseY);
        line(0, i*20, 100+i*10, mouseY);
    };

    //Determines the color of the background and 
    // the strokeweight of th lines based on the mouse's location
    if (mouseX > width/2) {
        W = 2;
        B = 255;
    } else {
        W = 1;
        B = 150;
    };
    if (mouseY > height/2) {
        W = 3;
        B = 0;
    } else {
        W = 1;
        B = 150;
    }; 
}

I used some simple loops to have the arrangement of the series of lines be determined by the mouse’s location. Then I practiced more with “if” statements and added some conditionals.

monicah1-project-04

sketch

var x = 100;
var y = 10;

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

function draw() {
	background(0);
	for (var i = 10; i<50; i+=5){
		strokeWeight(1);
		stroke("blue");
		line(mouseX, i*y,i*y, mouseY);
	}
	for (var i = 20; i<70; i+=5){
		strokeWeight(2);
		stroke("yellow");
		line(mouseX, i*y,i*y, mouseY);
	}
	for (var i = 30; i<80; i+=5){
		strokeWeight(3);
		stroke("green");
		line(mouseX, i*y,i*y, mouseY);
	}
	for (var i = 40; i<90; i+=5){
		strokeWeight(3);
		stroke("red");
		line(mouseX, i*y,i*y, mouseY);
	}
	for (var i = 40; i<90; i+=5){
		strokeWeight(3);
		stroke("yellow");
		line(mouseY, i*y,i*y, mouseX);
	}
	for (var i = 30; i<80; i+=5){
		strokeWeight(3);
		stroke("blue");
		line(mouseY, i*y,i*y, mouseX);
	}
	for (var i = 20; i<70; i+=5){
		strokeWeight(2);
		stroke("red");
		line(mouseY, i*y,i*y, mouseX);
	}
}

I played with the angles, colors, and movements.

keuchuka-project4

project4

//Fon Euchukanonchai
//15-105 SECTION A
//keuchuka@andrew.cmu.edu
//Projedt-04


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

function draw () {


	var w60 = width/60; //increment variable

	background(255);

	conMouseX = constrain(mouseX, 0, 310); //constrain mouse to desired point of stopping movement
	tlRatio = map(conMouseX, 0, width, 0, width/30); //remaps mouseX point for for loop


	for (var x = 0; x < 30; x ++){
		
		//pink lines

		stroke(255, 0 , 255);
		strokeWeight(1);
		//left half pink lines
		line(x*w60, height/2, width/2, x*tlRatio)
		//right half pink lines
		line(x*w60+width/2+5, height/2, width/2, x*tlRatio)
		

		//blue lines

		strokeWeight(1)
		stroke(0, 255, 255)

		//right half blue lines
		line((x*w60)+width/2, height/2, width/2, x*tlRatio)
		//left half blue lines
		line(x*w60, height/2, width/2, x*tlRatio+5)
		//most left blue lines
		line(x*width/60, 0, 0, height/2)

		//yellow lines
		stroke(255, 255, 0)

		//left half yellow lines
		line(x*w60+5, height/2, width/2, height-x*tlRatio)
		//most left yellow lines
		line(0, x*w60+height/2, width/2, height)
		
		//lighter pink lines
		stroke(255, 100, 255)

		//left half pink lines
		line(x*w60, height/2, width/2, height-x*tlRatio)
		
}


}

I wanted to experiment with how string art and particularly moving string art would affect color composition when they interact, as they come together and fall apart, mix and divide.

keuchuka-lookingoutwards-04

Nightingale and Canary from Andy Thomas on Vimeo.

Nightingale and Canary

Andy Thomas, an Australian artist, creates “audio life forms”. He creates 3D animations that respond to audio inputs. For this project, he used archival bird recordings in order to visualize digital sound sculptures that animate in reaction the songs of each bird. I found crossing the boundary between constructing visual thoughts and sound thoughts interesting and attractive in his work. There is a sensible and lifelike touch in translating bird sounds into bird like forms. Thomas is interested in literally casting technology’s impact on nature into a visualized form, and has recently been diving into audio software. Through this new path of artistic investigation Thomas once again finds a way to create works in which nature and technology combine.

hdw – Project 4 – String Art

sketch

//Helen Wu
//Section A
//hdw@andrew.cmu.edu
//Project 4


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

function draw() {

//curve one and two
for (var a = 0; a <= 41; a += 3) {
  strokeWeight(1);
  stroke(210);
  line(a, 0, 3*a, height-a);
  line(3*a, height-a, 5*a,300);

  line(width-a, height, width-3*a, a-height);
  line(width-3*a, a-height, -5*a, 0);
}


//three and four
for (var a = 3; a <= 500; a+=5) {
  strokeWeight(1);
  stroke(240,190,190);
  line(30,0,3*a,height-a);
  line(3*a,height-a,0,30);

  line(width-30,height,width-3*a,-a);
  line(width-3*a,-a,height,width-30);
}

//curve five and six
for (var a = 0; a <= 130; a += 3) {
  strokeWeight(1);
  stroke(245);
  fill(170,210,240);
  line (width-3*a, height-a, 5*a, 300);
  curve(width-a, width, width-3*a, height-a, width-3*a, height-a, 5*a, 300);
}

//curve seven + eight
for (var a = 0; a <= 130; a += 3) {
  strokeWeight(1);
  stroke(245);
  fill(170,210,240);
  line (3*a, a, width-5*a,height-300);
  curve(width-a, width, width-3*a, height-a, width-3*a, height-a, 5*a, 300);
}

//curve nine
for (var b = 3; b <=90; b += 5) {
  strokeWeight(1);
  stroke(160,210,230);
  fill(255,255,255,0);
  curve(0,0,b,b,b*4,b+5,400,400)
}

}

I struggled a bit on this week’s project. It’s hard to predict where the curves and lines will end up, so I went with a more experimental approach with my project. I do like the way the colors interact with each other, and the interesting texture created by the criss cross. However, I wish I could have the lines behave more uniformly.

aerubin-project-04-string-art

I was inspired by the interesting curves and shapes that are depicted in paintings of waves. I began by drawing a single wave and then trying different lengths and positions to create the desired effect. I also added movement in the bottom-most waves that makes it seem like it is moving from left to right. I really enjoy using the “for loops” in our design, it makes coding much faster and simpler than writing out every parameter for each line.

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-04-String-Art

var Y_AXIS = 1;
var c1, c2;

function setup() {
    createCanvas(300, 400);
    background(220);
    c1 = color(255, 183, 60);
    c2 = color(45, 100, 245);
}

function draw() {
    background(220);

    setGradient(0, 0, 300, 400, c1, c2, Y_AXIS);

    for(var i=0; i <200; i++) {
        littlewaves(i);
}
    for(var p=0; p <200; p++) {
        rightwave(p);
}
    //Sun
    noStroke();
    fill(255, 250, 217);
    ellipse(153, 204, 50, 50);

}

function littlewaves(x) {
    //little waves on bottom
    for(var z=0; z<10; z++) {
    push();
    translate(x+(z*20)+(mouseX/2),30); //moves waves 
    rotate(radians(x*2));
    stroke(53, 74, 107);
    line(150,200,10 + x, 400);
    pop(); 
}
}

function rightwave(y) {
    //middle curve
    push();
    translate(y+210, 60);
    rotate(radians(y));
    stroke(97, 132, 158);
    line(150,200,10 + y, 200);
    pop();

    //large wave, dark colored
    push();
    translate(y+122, 170);
    rotate(radians(y*2));
    stroke(82, 115, 149);
    line(150,230,10 + y, 20);
    pop();

    //large wave, light colored
    push();
    translate(y+50, 150);
    rotate(radians(y));
    stroke(70, 170, 200);
    line(150,230,10 + y, 20);
    pop();
}

function setGradient(x, y, w, h, c1, c2, axis) {

    //Sets Gradient in Background
    noFill();
    if (axis == Y_AXIS) {
    for (var i = y; i < y+h; i++) {
    var inter = map(i, y, y+h, 0, 1);
    var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(x, i, x+w, i);
    }
  }
}

myoungsh-lookingoutwards-04

As soon as I read this looking outwards was about sound a project I was tangentially involved in immediately came to mind. Actually quite similar to our professors work with music by a professor at Princeton university Perry Cook. He had a totally electronic orchestra.

https://www.cs.princeton.edu/~prc/

He did work with my dad, a stone sculptor on a project for an installation in Princeton. They made a lithopone, historically a large upright stone xylophone. The installation quark park was many pieces done in collaboration between local artists and Princeton University scientists.

http://www.princetonoccasion.org/quarkpark/

They created a system that mixed sounds from a stone sculpture being hit with random sounds recorded from the process of making the sculpture toy create a large electronic and stone instrument. When I was a little kid working with my dad on this project I had no idea really what electronic music really meant but as soon as we were showed the trumpet accompanied by a full electronic bras section in class I was reminded of this project.

dayoungl Project 04

sketch

//Sharon Lee
//dayoungl@andrew.cmu.edu
//Section E
//Project 4
var ychange = 30;
var xchange = 10; 
var x1 = 1;
var x2 = 150;
var x3 = 100;
var y1 = 200;
var y2 = 1;
var y3 = 55;
var r;
var g;
var b;
function setup(){
	//randomzied colour
	r = random(255);
	g = random(255);
	b = random(255);
	createCanvas(300,400);	
}

function draw() {
	background (255);
	for(var i = 0; i < 100; i +=1){
		strokeWeight(0.5);
		stroke(0);
		line(x2, mouseY, 300 , ychange *i);
		line(x2, mouseY, 0 , ychange *i);
		stroke(r,g,b);
		strokeWeight(1);
		line(mouseX, ychange * i, xchange * i, y2); 
		line(x2, y1, 300, ychange *i);
		line(x2, y1, 0, ychange * i);
	}
}

//when mouse is clicked, string changes colour
function mousePressed (){
	stroke(r,g,b);
	r = random(255);
	g = random(255);
	b = random(255);
}

I wanted to make my string art minimal as possible because I like minimalistic art. I like the fact that this looks like a graphic poster.