Section B – Page 30 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

rgroves – Looking Outwards 04

In the summer of 2016, Icelandic ambient rock band Sigur Ros livestreamed a 24 hour journey around Route One, Iceland’s beautiful coastal ring road. The whole video was accompanied by new music from the band – well, new music in collaboration with a generative music program called BRONZE. BRONZE was created in 2011 by Mike Grierson, a scientist at Goldsmith University, and musician Gwilym Gold. It takes a recorded piece of music and is able to infinitely regenerate it in unique transfigurations. As the original recording is played over and over on this platform, it’s impossible to tell when each reiteration starts and ends because segments may be played in a different order, instruments may be amplified or eliminated, some sections are shortened and others elongated, etc. The music becomes ephemeral, as “the chances of hearing the same version of the track versus the chances of winning the lottery don’t even compare,” according to Gold.

This experiment worked extremely well with Sigur Ros’s ethereal sound. The entire spectacular 24 hour journey is available online, but here are the middle 9 hours!

And here is a link to an album by Gwilym Gold, which is only available on BRONZE and no permanently recorded version exists , so you truly can’t hear the music the same way twice. You do have to download a mobile app in order to listen.

http://bronzeformat.com/

Looking outwards-04

This is a project that comes to me as unique. I enjoy watching movie on AIs or reading articles on AI’s learning capabilities. This is Sonic Pendulum by Yuri Suzuki Design Studio. At first pendulum seems to be essential part of the project, but it is not. Pendulums are generating calming ambient sound, but the algorithm is using space and crowd in surrounding to create new composition of sounds. Most impressive part is that if this was normal project, they would have used algorithm to be fixed, which will generate similar sound over periods of time; however, team trained the AI to create infinite composition, which is site and moment to moment specific. This project shows that it is not only possible to make program react vibrantly with surrounding, but also possible to adapt and trained to generate new type of compositions.

atraylor – Looking Outward 04 – Section B

Ales Tsurko’s microscale is a web-based album that takes Wikipedia articles and transforms them into real time generative music. The articles are processed as step sequencers and the individual letters represent a sequencer step. When a letter is read, it plays a sound. Tsurko’s concept is to transform meaning while the text is morphed into sound. He also is playing with the idea of dynamic music, as his project is published on an interactive web-page, rather than something that is composed and recorded once.

When I listened to microscale, I heard the audio form of chainless bicycles, anthrax, and vodka. There are several different track titles that have different atmospheric moods in which the text is interpreted.

I admire this piece because I’m interested in the transformation of words to something less tangible. I like that words can incite emotions and responses that are unique to the individual. This project is a way for words to be transformed beyond their meaning.

Connie – LookingOutwards – 04

My previous LookingOutwards example for week 3 would have also fit perfectly for this week’s theme but the Turkish artist, Memo Akten, has many other interesting projects that combine interactivity, music, and smart algorithms. Another of his projects is Webcam Piano 2.0 (2010).

This is a class(-ical) example of creating sound and music through an unconventional means. Users are able to generate beautiful music through an algorithm, made with openFrameworks, that tracks their fingers, hand gestures, and other body movements. The updated 2.0 version introduces additional features including finer, more precise movement tracking and even interpreting the movement to create music that reflects different emotions by playing a different musical mode and changing color scheme. I find this project particularly beautiful, especially the 2.0, because it makes musical expression more accessible to those who may not be classically or technically-trained on the piano, or even in music, yet gives users an outlet to express themselves and their emotions through the fine-tuning of reading their facial expressions or body language.

Users playing around with the Webcam Piano. Image Credit: http://www.memo.tv/webcam-piano-2/

*Unlike some other of his works, the code for this project is unavailable.

kyungak-lookingoutwards-04

(Anders Lind, LINES, 2016)

LINES is an interactive instrument that is electrically programmed to trigger sounds. It uses the program Max/MSP to convert physical signals into multiple sound outputs that are then combined to creatively compose a song. To be specific, when the signal is detected, the distance sensors primarily send the stimulus to the arduino board which then is sent to the Max/MSP program to produce physical sounds.

I found this project extra fascinating because it allows a single participator to play the “LINES” instrument as if multiple people are cooperating. By simply placing the metal stimulator on the lines, the participator can easily make chords without having to constantly touch the lines. Without prior knowledge to play the instrument, one could easily play around and quickly learn to utilize this instrument. Also, the sounds that are produced through the “LINES” is very unique and interesting.

hannajan-LookingOutwards-3

According to the artist Sui Park, SPUME presents “soft flows of evolving sentiment.” This gives a feeling of flow, and the artist herself likens her art to emotions and sentiments, which are not static.

The algorithms to create her art looks as if they are built upon each and every additional “stitch” or piece to make up a whole. Although, it is not specified what algorithm was used exactly.

This reminds me that in all the projects I do in the future, it is always important to remember which message I want to convey to all those who view it. Instead of always just worrying about the technical and aesthetic aspect of the art I am producing, I feel that the inside main message that the art is conveying is equally important. Although her art is technically static, it looks to be continuously flowing.

rgroves – Dynamic Drawing – Section B

sketch

 var x = 565


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

function draw() {


//still objects
	rectMode(CORNER);

	//solid shapes for walls and floor
    background(113, 146, 128)
    noStroke();
    fill(96, 129, 118);
    rect(375, 0, width - 375, height);
    fill(119, 89, 79);
    beginShape();
    vertex(0, (1/2) * height);
    vertex(375, (1/2) * height);
    vertex(width, height);
    vertex(0, height);
    endShape();

    //window; slope of top is -1/2, slope of bottom is -3/4
    stroke(230);
    strokeWeight(6);
    fill(209, 213, 207);
    beginShape();
    vertex(390, 50);
    vertex(590, 150);
    vertex(590, 350);
    vertex(390, 200);
    vertex(390, 50);
    endShape();

    //landscape
    noStroke();
    fill(165, 158, 74);
    beginShape();
    vertex(393, 160);
    vertex(420, 150);
    vertex(470, 190);
    vertex(500, 185);
    vertex(520, 200);
    vertex(575, 195);
    vertex(587, 210);
    vertex(587, 344);
    vertex(393, 197);
    vertex(393, 175);
    endShape();

    //sun
    fill(254, 247, 146);
    ellipse(540, 170, 15, 15);

    //window frame
    stroke(230);
    strokeWeight(6);
    line(390, 125, 590, 250);

    //bedframe back
    noStroke();
    fill(115, 73, 74);
    rect(187, 150, 188, 70);
    stroke(100, 60, 60);
    line(190, 150, 372, 150);
    noStroke();
    fill(183, 153, 120);
    rect(187, 135, 15, 185);
    rect(360, 135, 15, 185);

    //mattress 
    fill(36, 68, 116);
    beginShape();
    vertex(367, 235);
    vertex(521, 420);
    vertex(521, 460);
    vertex(228, 460);
    vertex(195, 275);
    vertex(195, 235);
    endShape();

    //pillow
    rectMode(CENTER);
    fill(238, 215, 216);
    rect(281, 225, 80, 60, 15);
    fill(137, 113, 113);
    ellipse(281, 225, 8, 8);
    strokeWeight(2);
    stroke(137, 113, 113);
    line(266, 210, 296, 240);
    line(266, 240, 296, 210);



    //nightstand  
    rectMode(CORNER);
    stroke(187, 82, 49);
    strokeWeight(10);
    line(45, 230, 55, 320);
    line(155, 230, 145, 320);
    stroke(167, 62, 29);
    line(120, 230, 115, 305);
    noStroke();
    fill(187, 82, 49);
    ellipse(100, 230, 120, 36);

//interactive elements

	//left curtain
	fill(147, 75, 103);
	beginShape();
	vertex(385, 35);
	vertex(410, 50);
	vertex(410, 232.5);
	vertex(385, 210);
	endShape();

	beginShape();
	curveVertex(385, 210);
	curveVertex(385, 210);
	curveVertex(387, 225);
	curveVertex(400, 227);
	curveVertex(410, 232.5);
	curveVertex(410, 232.5);
	endShape();

	//right curtain
    if (490 < mouseX & mouseX < 565 & 100 < mouseY && mouseY < 352.5) {
    	quad(595, 140, 595, 375, 
    		mouseX, 352.5 - ((.75) * (565 - mouseX)), 
    		mouseX, 125 - ((.5) * (565 - mouseX)));
    	x = mouseX
    	//make the sunlight fade as the curtain closes
    	fill (242, 235, 177, (8/3) * mouseX - (3920/3)); 
    	quad(195 + 12.5, 265, 360, 265, 400, 325, 195 + 30, 325);
    	quad(195 + 12.5, 265, 195 + 30, 325, 195 + 30, 460, 195 + 12.5, 340);
    	quad(180, 340, 200, 460, 125, 460, 107.5, 340);
	} else {
		quad(595, 140, 595, 375, 
    		x, 352.5 - ((.75) * (565 - x)), 
    		x, 125 - ((.5) * (565 - x)));
    	fill (242, 235, 177, (8/3) * x - (3920/3)); 
    	quad(195 + 12.5, 265, 360, 265, 400, 325, 195 + 30, 325);
    	quad(195 + 12.5, 265, 195 + 30, 325, 195 + 30, 460, 195 + 12.5, 340);
    	quad(180, 340, 200, 460, 125, 460, 107.5, 340);
	}

	//bedframe front
	rectMode(CORNER);
    fill(115, 73, 74);
    rect(220, 350, 313, 90);
    stroke(100, 60, 60);
    line(225, 350, 528, 350);
    noStroke();
    fill(200, 163, 140);
    rect(220, 330, 20, 200);
    rect(513, 330, 20, 200);

    //lamp
	if(dist(115, 192, mouseX, mouseY) <= 40) {
		fill(87, 80, 63);
		ellipse(115, 230, 40, 20);
		rectMode(CENTER);
		rect(115, 211, 10, 37.5);
		fill(98, 131, 139);
		ellipse(115, 192, 50, 25);
		beginShape();
		vertex(90, 192);
		vertex(105, 152);
		vertex(125, 152);
		vertex(140, 192);
		endShape();
		//make the room darker
		rectMode(CORNER);
		fill(65, 78, 120, 150);
		rect(0, 0, 600, 600);
	} else {
		fill(161, 137, 137);
		ellipse(115, 230, 40, 20);
		rectMode(CENTER);
		rect(115, 211, 10, 37.5);
		fill(241, 253, 208);
		ellipse(115, 192, 50, 25);
		beginShape();
		vertex(90, 192);
		vertex(105, 152);
		vertex(125, 152);
		vertex(140, 192);
		endShape();
	}
}

This project turned out to be a lot harder than I expected it to be, and I wasn’t able to include all of the elements I wanted to. As of now, when you hover over the lamp the room gets darker and you can use the mouse to open and close the curtain and the intensity of the sunlight on the bed will change.

I particularly struggled with the curtain – first I couldn’t figure out how to make it move with the mouse and then I couldn’t figure out how to make it stay in the same place when the mouse moved away. I realized that when you translate the origin inside push, pop and try to use mouseX and mouseY, the position contained in them is not translated. That took me about 2 hours to work out!

Jonathan Perez Looking Outwards 3

This project, Rocailles, done by Benjamin Dillenburger, struck me for its illusion of almost fabric-like texture. The way the material folds and falls reminds me of an afghan bunched up, perhaps hanging from some sort of wire or string. At the same time, though, it also gives the sense of a hard, shell like texture, through its sharp lines and crystalline weaving. These textures are at a sharp contrast to one another, and thus give an interesting affect to the viewer.

The number of folds, as well as depth in relation to the viewer, give this piece quite a bit of emotional impact — casting powerful shadows and fading in towards the center. Paired with the folds and the sense of gravity they give the piece, it feels like you are being pulled towards the center darkness. This sort of material affect would be hard to accomplish by any other means.

I think the Dillenburger used an algorithm to create a sort of “stitching”, that look like N’s aligned in rows lined by one long piece of elastic material. Then, by using a great number of parameters, he probably slightly shifted on of the lines in the N, or the angle between them, to pull and push the entire sculpture into its desired shape.

To look at more close up images of Rocailles, check out this page: http://benjamin-dillenburger.com/rocaille/

SaveSave

Project-03-Dynamic-Drawing

sketch

//Hanna Jang 
//Section B 
//hannajan@andrew.cmu.edu 
//Project-03

var clocksize=300; 
var shorthand= 40; 
var textSze=20; 
var textszeadd= 100
var SunX= 600; 
var SunY= 130; 
var SunSize= 50; 
var SunRim=60; 
var MoonX= 40; 
var MoonY= 130; 

function setup() {
    createCanvas(640, 480);
   
}

function draw() { 
	background(204, 232, 247);
	
	//Clock Color Changes  to Mouse Location 
	var point1 =mouseX; 
	var point2 =mouseY; 
	
	var Rx = map(point2, 0, height, 162, 218); 
	var Gx= map(point2, 0, height, 231, 218); 
	var Bx= map(point2, 0, height, 199, 231); 
	
		//clock 
	ellipse(width/2, height/2, clocksize, clocksize); 
	fill(Rx, Gx, Bx); 
	
	//clock numbers 
	//number 12 
	textSize(textSze); 
	text("12", width/2, height/2-textszeadd); 
	
	//number 3 
	textSize(textSze); 
	text("3", width/2+textszeadd, height/2); 
	
	//number 6 
	textSize(textSze); 
	text("6", width/2, height/2+textszeadd); 
	
	//number 6 
	textSize(textSze); 
	text("9", width/2-textszeadd, height/2); 
	
	
	//clock 
	strokeWeight(5); 
	stroke(0); 
	
	//White Hand
	if (dist(mouseX, mouseY, width/2, height/2)<clocksize/2) {
	//white hand	
	line(width/2, height/2, mouseX-shorthand, mouseY-shorthand);
	stroke(0); 
	//black hand
	var mx = width-mouseX; 
	var my = height-mouseY; 
	line(width/2, height/2, mx, my); 
	}
		//text of clock 
	if (dist(mouseX, mouseY, width/2, height/2)>clocksize/2) {
	text("Move Mouse Inside Clock", width/2+0.7*textszeadd, height/2-1.5*textszeadd); 
	 
	fill(245, 210, 242);
	
	//morning sun 
	if (mouseX>470) {
	noStroke(); 
	fill(252, 141, 0); 
	ellipse(SunX, SunY, SunRim, SunRim);
	fill(253, 230, 0); 
	ellipse(SunX, SunY, SunSize, SunSize); 
	}
	
	//evening moon
	if (mouseY< 170); 
	noStroke(); 
	fill(253, 215, 58); 
	ellipse(MoonX, MoonY, SunSize, SunSize); 
	}
	
	
	

}

I had a basic idea of making an interactive clock, but I think it was a bit hard to change the different features like the way I wanted them to. The hardest thing was to mix the hands together so that they would be pointing in different directions, and had to play around with some numbers to get the exact formula. I eventually got the hands to move the way I wanted them to after I tested them over and over again with different numbers. I also like how the colors came out to look like for the interactive color portion of the clock.

Nayeon_Looking Outwards03

Marius Watz is an new media artist using generative software processes. I found his work is very interesting because he is using visual algorithms not only for fabricate installation art, but animation and sound-responsive performances. It is very interesting that those open sauce languages provide new form of arts to new media artist like Marius. I’m not sure how he generate images with algorithm since I have a very little knowledge about programming, I know one thing that he creates all images with numbers with generative code. I’m quite suprised about the fact that this random generative numbers could create such beautiful images.

You can find more amazing works from Marius on this website.

Marius Watz website