Month: September 2018

Project 04: String Art

sketch

/* Samantha Ho
Section E 
sch1@andrew.cmu.edu
Project 04*/

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

	}

function draw() {
    background(240,240,240);
	//back dark wave
       	strokeWeight(2);
	stroke(0,0,255);
	x1 = 30;
	x2 = 40;
	y1 = 400;
	y2 = 50;
	for (var i = 0; i < 20; i += 1) {//move the waves
		x1 += min(mouseX, 300);
		y2 += 15;
		line(x1, y1, x2, y2);
	}

    //light back wave
	strokeWeight(2);
	stroke('cyan');
	x1 = 0;
	x2 = 60;
	y1 = 500;
	y2 = 50;
	for (var i = 0; i < 20; i += 1) {//move the waves
		x1 += min(mouseX, 300);
		y2 += 15;
		line(x1, y1, x2, y2);
	}
    
     //light thin wave
	strokeWeight(2);
	stroke('cyan');
	x1 = 0;
	x2 = 60;
	y1 = 500;
	y2 = 50;
	for (var i = 0; i < 20; i += 1) {//move the waves
		x1 += min(mouseX, 300);
		y2 += 15;
		line(x1, y1, x2, y2);
	}
    
     //green horizon wave
	strokeWeight(2);
	stroke(0,230,230);
	x1 = 0;
	x2 = 400;
	y1 = 150;
	y2 = 100;
	for (var i = 0; i < 20; i += 1) {//move the waves
		x1 += min(mouseX, 300);
		y2 += 15;
		line(x1, y1, x2, y2);
	}
    
     //red horizon wave
	strokeWeight(.5);
	stroke(0,230,230);
	x1 = 0;
	x2 = 400;
	y1 = 500;
	y2 = 100;
	for (var i = 0; i < 20; i += 1) {//move the waves
		x1 += min(mouseX, 300);
		y2 += 15;
		line(x1, y1, x2, y2);
	}
    
 
	//sunrays
	strokeWeight(2);
	stroke('yellow');
	x3 = 0;
	x4 = -300;
	y3 = 0;
	y4 = 300;
	for (var i = 0; i < 20; i += 1) {
		x4 += min(mouseX, 600);
		y3 -= 15;
		line(x3, y3, x4, y4);
	}
    //dark sunrays
    strokeWeight(2);
	stroke(200,200,0);
	x3 = 0;
	x4 = -200;
	y3 = 0;
	y4 = 300;
	for (var i = 0; i < 20; i += 1) {
		x4 += min(mouseX, 600);
		y3 -= 15;
		line(x3, y3, x4, y4);
	}
}

I made this because I was inspired by the quality of the “strings”. I wanted to make an entire moving picture with a horizon and everything. I found it difficult though to completely control the landscape. It may be due to the quality of the “material”, but conceptually it was challenging to wrap my head around the forms.

Carley Johnson Looking Outwards 04

This week I am inspired by the brief installation piece (already finished with its short run) in Berlin created by onformative called Meandering River. It was up July 28-30. I love how this piece seeks to unite the seemingly opposite feelings of nature versus technology by using sound and image (and algorithms) to show the ebbing and flowing of rivers over time. The algorithm is meant to randomize the patterns of the river, changing them and creating as they might actually exist in real time. The sound then interprets the river’s movement and so also constantly changes to mimic and complement the ever-evolving visual landscape.  In this way, the artist hopped to create a sense of moving through time, getting lost in the movement of a river created by visual art and sound. I would have loved to see this piece, as I can just imagine getting lost and spending hours listening to how the music changes and watching the visuals, knowing that each moment is being generated and changed in real time like a river. It’d be fun to spend some time near an actual rushing body of water and then see this exhibit to judge how they compare.

A photo of the visual detail created by the algorithm, which is displayed over a series of screens.

Anthony Ra – Looking Outwards 04

close up on “Lenses”

“Lenses” is an interactive sound art installation by creative agency, Hush, in which the differently shaped prisms refract light in the direction that the user turns. When twisted on the walled surface, the refraction of the light and its composition is translated to a software and projects sound in real time. This allows a calm duality in light projection and soundscape.

the position of the prisms correlate with the direction in which light emits
user interacting with the installation

The idea from the designers was for an audiovisual installation to reflect the ideas between designers, artists, musicians, and technologists. The end result of this piece is allowing to integrate multiple different fields in crossing boundaries and creating something visually appealing and interacting for the user.

Video of “Lenses”

Liz Maday Project 4

liz m proj 4 

//Elizabeth Maday
//emaday@andrew.cmu.edu
//Section A
//Project 04

//big purple variables
var x1; 
var y1;
var x2;
var y2;
//orange variables
var a1; 
var b1;
var a2;
var b2;
// corner a variables
var c1;
var d1;
var c2;
var d2;
//corner b variables
var e1;
var f1;
var e2;
var f2;
//click variables
var jump;
var eyeSize;

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

function draw() {
	background(0);
	strokeWeight(0.75);

    //big purple variables
    var x1 = 25;
    var y1 = height + 5;
    var x2 = 380;
    var y2 = 0;

    //big purple web
    for(i = 0; i < 25; i += .6) {
    	x1 += 5;
    	y1 -= 5;
    	x2 -= 4;
        y2 += 0;
    	stroke('purple');
    	line(x1, y1, x2, y2); 
    }

    //orange variables
        var a1 = 50
        var b1 = -40;
        var a2 = width - 200;
        var b2 = height + 20;

    //orange web
    for (i = 0; i < 37; i += .6) {
        a1 -= 3;
        b1 += 2;
        a2 += 5;
        b2 -= 0.5;
        stroke(255, 85, 0);
        line(a1, b1, a2, b2);
    }

    //corner a variables
    c1 = 0;
    d1 = height - 120;
    c2 = 70;
    d2 = height;

    //corner a web
    for (i = 0; i < 30; i += .5) {
    	c1 = 0
    	d1 = height - 120;
    	c2 -= 2;
    	d2 += 8;
    	strokeWeight(0.65);
    	stroke(0, 93, 68);
    	line(c1, d1, c2, d2);
    }

    //corner b variables
    e1 = -40;
    f1 = height - 90;
    e2 = 105;
    f2 = height;

    //corner b web
    for (i = 0; i < 30; i += .5) {
    	e1 += 1;
    	f1 += 2;
    	e2 = 105;
    	f2 += 5;
    	strokeWeight(0.65);
    	stroke(0, 93, 35);
    	line(e1, f1, e2, f2);
    }    

    //jump variable
    var jump = 0;
    var eyeSize = 2.5;

    if (mouseIsPressed) {
    	//stars
        for (i = 0; i < 100; i++) {
        
            fill('white');
            textSize(5);
    	    text('*', random(400), random(300));
        }

        //stars
        for (i = 0; i < 100; i++) {        
            fill('purple');
            textSize(12);
    	    text('*', random(400), random(300));
        }
        
        var jump = 20;
        var eyeSize = 4;
    }

    //spider variables
    var spiderX = 242 + (jump * 1.5);
    var spiderY = 235 + jump;
    var bodyWidth = 24;
    var bodyHeight = 20;
    //spider legs left
    noFill();
    stroke(255);
    arc(spiderX - bodyWidth/2, spiderY, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX - bodyWidth/2, spiderY + 4, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX - bodyWidth/2, spiderY + 9, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX - bodyWidth/2.5, spiderY + 10, bodyWidth * 0.5, bodyHeight * 0.5, PI - QUARTER_PI, 0 - QUARTER_PI);
    //spider legs right
    noFill();
    stroke(255);
    arc(spiderX + bodyWidth/2, spiderY, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX + bodyWidth/2, spiderY + 4, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX + bodyWidth/2, spiderY + 9, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX + bodyWidth/2.5, spiderY + 10, bodyWidth * 0.5, bodyHeight * 0.5, PI + QUARTER_PI, 0 + QUARTER_PI);
    //spider body
    stroke(0);
    fill(0);
    ellipse(spiderX, spiderY, bodyWidth, bodyHeight);
    //spider eyes
    strokeWeight(eyeSize);
    stroke(255);
    point(spiderX - bodyWidth/4, spiderY);
    point(spiderX + bodyWidth/4, spiderY);
    //spider mouth
    strokeWeight(1);
    stroke(255);
    line(spiderX - bodyWidth/6, spiderY + 3, spiderX + bodyWidth/6, spiderY + 3);

}

When I started looking at examples of string art, I immediately thought of a spider web. I liked that I got to integrate a Halloween theme into this project. Make sure to click the image!

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.

PO4 – Alexander Chen

sketch

//Alexander Chen
//Section A
//alchen1@andrew.cmu.edu
//Project 04

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

function draw() {
	background(0);

    var x = 0;
    var y = 0;
    var x1 = width/2;
    var y1 = height/2;
    var x2 = width/2;
    var y2 = height/2;
    var x3 = width
    var y3 = height
    var x4 = width/2;
    var y4 = width/2;
 //white curves
    for (var i = 0; i < 50; i++) {

    //BOTTOM RIGHT//
        stroke('red');
        //bottom right corner (bigger gaps)
        line(x1, height, width, height - y1);

        stroke(67, 21, 32);
        //bottom right corner (smaller gaps)
        line(x2, height, width, height - y2);

    //TOP LEFT//
        stroke('red');
        //top left corner (bigger gaps)
        line(width - x1, 0, 0, y1);

      	stroke(67, 21, 32);
        //top left corner (smaller gaps)
        line(width - x2, 0, 0, y2);



    //MIDDLE "SPOTLIGHT"
    	stroke(255);
    	line(x3, 0, x, y2);

    //TOP RIGHT CORNER//
       	//top right corner (smaller gaps)
    	stroke('red');
    	line(x4, 0, width, y4);

    	stroke(67, 21, 32);
		//top right corner (bigger gaps)
    	line(x2, 0, width, y2);

        x1 = x1*1.08;
        y1 = y1*1.08;
        x2 = x2*1.025;
        y2 = y2*1.025;
    	x4 = x4*1.08;
        y4 = y4*1.08;
    }
}

LO4 – Alexander Chen

When it comes to music and technology, I definitely feel that this is an area where we will be headed in the near future. As a music major myself, this is an area where I definitely feel very strongly about. I think technology is going to play a bigger and bigger role in contemporary music and that is inevitable. However, whether or not that is a good thing is up for debate. I personally believe that it is a very good assistant. Like jazz guitarist, Pat Metheny states, it is definitely a good assistance. However, that being said, I do not believe that computers will be able to completely take over music (like a robot symphony orchestra) as author William Hochberg seems to suggest. This is because there is a level of human connection and feeling that computers will not be able to replicate. Unless there is AI that is advanced enough to “feel” I don’t think computers will ever be able to create real art. However, that being said, computers and algorithms writing music has been around for forever, and in that instance, I think it is slightly different and definitely valid.

https://www.theatlantic.com/entertainment/archive/2014/08/computers-that-compose/374916/

A piece written in the style of Bach.

Lan Wei-LookingOutwards-01

The structure in operation

The artwork was done by David Bowen in 2010. It really interests me because the artwork integrates physical and visual worlds together and fascintes people while confusing them. Modern technologies always give people the impression of aligning nature, but in this artwork nature and man-made object are connected harmoniously and a new mode of ‘nature’ is created. This is a very small piece of artwork and it can serve as a prototype. I can see the potential that the idea being used in creating spatial experience. For example, building a house using the technology might enable people living inside feel how wind moves around the house, which is amazing.

In fact, David Bowen also did a piece of artwork that utilizes movement of objects to imitate the impact of wind. Again, for me the loop of ‘learn from nature, imitate nature, create a new nature’ is the most interesting part of the artwork.

Source: https://www.youtube.com/watch?v=0p3je4WGcM0

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.