Month: November 2018

Erin Fuller – LookingOutwards-11

The piece “Order from Chaos” is a beautiful composition of computed visual and audio work. The track was produced by London based electronica and techno producer Max Cooper. The track was originally inspired by a moment where Cooper was captivated by the sound of hard rain hitting a roof window at his apartment. He recorded the sound with binaural mics, microphones that capture audio the same way your real ears hear sounds, and used the initial recording as a seed for the rest of the track. The pattern from the raindrops based on their closest structure, that creates an emergent rhythm, an initially detailed and chaotic form which slowly develops into something with a recognizable structure.

chaos-3
Gif of Video

While the prompt is focused on computer music, it would not be fair not to note the mesmerizing visual animations done by French-based Houdini Fx artist, motion graphic artist and Director, Maxime Causeret.

chaos-2
Gif of Video

Erin Fuller – Turtle Composition

//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 11

var t = [0, 1, 2]; //start w/ 3 turtles
var targetX = 0;

function setup() {
    createCanvas(480, 480);
    background(0);
    for (var i = 0; i < t.length; i++) { //initialize turtles
    	t[i] = makeTurtle(0, height / 2 + random(-100, 100));
	    t[i].setColor(color(random(100), random(255), random(255), 50));
	}
	frameRate(40); //slow down turtle!!!
}

function draw() {
    targetX += 1; //updates target with each frame
    var targetY = (width / 2) - 90 * sin(radians(targetX)); //sine wave

    noStroke(); //makes target curve "invisible"
    point(targetX, targetY);

    for (var j = 0; j < t.length; j++) {
	    t[j].penDown();
	    t[j].setWeight(4);  

    	t[j].forward(1.5); 
    	t[j].turnToward(targetX, targetY, 2); //orient towards sine wave
    	t[j].left(random(-5, 5)); //adds noise

    	if (targetX === width) { //restarts when reachinf edge of screen
    		targetX = 0; //restart target
    		for (var k = 0; k < t.length; k++) {
    			t[k].penUp(); //stops turtles moves them back
    			t[k].goto(0, height / 2 + random(-100, 100));
    			t[k].penDown(); //restart turtle
    		}
    	}
    }
}

function mousePressed() {
	var newTurtle = makeTurtle(mouseX,mouseY); //making new turtle at mouse press
	newTurtle.setColor(color(random(100), random(255), random(255), 50));
	t.push(newTurtle); //push turtle onto array
}


//------------------------------------------------------------------------------------  

// makeTurtle(x, y) -- make a turtle at x, y, facing right, pen down
// left(d) -- turn left by d degrees
// right(d) -- turn right by d degrees
// forward(p) -- move forward by p pixels
// back(p) -- move back by p pixels
// penDown() -- pen down
// penUp() -- pen up
// goto(x, y) -- go straight to this location
// setColor(color) -- set the drawing color
// setWeight(w) -- set line width to w
// face(d) -- turn to this absolute direction in degrees
// angleTo(x, y) -- what is the angle from my heading to location x, y?
// turnToward(x, y, d) -- turn by d degrees toward location x, y
// distanceTo(x, y) -- how far is it to location x, y?

function turtleLeft(d) {
    this.angle -= d;
}

function turtleRight(d) {
    this.angle += d;
}

function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}

function turtleBack(p) {
    this.forward(-p);
}

function turtlePenDown() {
    this.penIsDown = true;
}

function turtlePenUp() {
    this.penIsDown = false;
}

function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}

function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}

function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}

function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}

function turtleSetColor(c) {
    this.color = c;
}

function turtleSetWeight(w) {
    this.weight = w;
}

function turtleFace(angle) {
    this.angle = angle;
}

function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0, 
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

My composition is three turtles chasing a sine wave, but the turtles can never catch it fully because of added noise that makes them wander off track. If you click your mouse, you add a new turtle!

Before Turtles Restarted Along with Target Curve, Oops
A Nice Turtle Chase
Faster Frame Rate Produced a Tighter Turtle Chase

Vicky Zhou – Looking Outwards 11

4G Network into Musical Sounds

For this week’s looking outward centered on computational music, I decided to focus on a project by Andrius Sarapovas: a kinetic generative music installation. This installation turns a 4G network into a series of musical sounds, based on n algorithm and through 77 segments distributed through the physical exhibition space. Each segment consists of a metal bar, a sound activator, a sound damper, a resonator, and mechatronics, that pick up on the signals in the 4G network. The placement of these segments were optimized and based on the actual physical exhibition space.

I appreciate this project because it intakes very impersonal data that we commonly and frequently discard, and/or don’t understand, and transforms it into a medium that we are more familiar with, and can enjoy.

Audrey Zheng – Looking Outwards – 11

Atlås from binaura on Vimeo.

 

The creators: Binaura is making creative coding, interaction design, experimental interfaces, sonic toys and other, reactive environments. The collective regularly gives international workshops and lectures on these topics. The collective consists of Ágoston Nagy and Bence Samu.

Atlås is an anti game environment that generates music among a conversational cognitive space. As part of its existence, there are automatically generated tasks that are solved by machine intelligence without the need of human input. It also asks questions ad infinitum: questions that are dealing with presence, human cognition and imagination, corporate driven automatisms, advanced listening practices, silence.

I picked this beautiful app because of its beautiful generative UI. I love the geometric forms, flat design with shadows, circular text and color scheme. It makes for a very aesthetically pleasing composition.

Atlas

How it was made: The project is developed with free and open source tools with an educational aspect in mind. The main application is written in javascript, using the p5js library that is embedded into a regular Swift iOS application. This example template can be used to write and play with your own app using p5js within an iOS app. The sound synthesis is written in Pure Data, that is a useful graphical programming language to develop interactive sonic events. It can be integrated into all type of projects and applications using LibPd. This example template can be used to write and play with your own app using libPd within an iOS app.

Julie Choi – Looking Outwards – 11

This video shows how a person can interact with a musical machine Apparatum – Inspired by the Polish Radio Experimental Studio.

Created by a solo exhibition, panGenerator, Apparatum is made with a digital interface that produces purely electroacoustic sounds strictly through creating analog sounds. The visual language within this machine produces audio cues to create a collection of a symphony. I admire this project because it is an innovative way to create work of audio through customizable visual cues. Although there are many music producing machines, this work, in particular, is designed with two magnetic tapes to create tape samplers to collect the noise and base tone of the music. I also respect the physical design of this machine because it makes the user feel like they are in full control as it opens up an interactive space with the screen attached to the standing level of human height.

Connor McGaffin – Looking Outwards 11

Seaquence is a musical social experiment from Grey Area Labs, created by Gabriel Dunne, Ryan Alexander, and Daniel Massey. The core interface of Seaquence is appropriately a sequencer, which users can compose short compositional loops with. These compositions are assigned to “organisms” which physically reflect the audio qualities of the music they emit, such as pitch, frequency, and the sostenuto of notes. These organisms congregate in the radius of a central point in their canvas-like “environment”. The more organisms in proximity to another, the more dynamic the music arrangement becomes.

As stated, the algorithms in this project takes proximity, timing, and “drunken walk” progressions into consideration. The nature of organism movement is reminiscent of the responsive “worm” lab from several weeks ago.

I am incredibly drawn to this project, and this Looking Outwards post took me forever to complete because I spent so much time playing with Seaquence.  I think I gravitate towards this piece because of its ability to create such elaborate compositions through such a simple interface. Its ease of use is incredible and empowering.

From these observations, I find it reasonable to assume that the collaborators on this project shared similarly aligning design sensibilities. There is an emphasis on minimalism to achieve complexity. This consideration of both micro and macro levels of interaction make an understanding of intuitive human interaction evident.

the project

grey area labs

Kyle Leve-Project-11-Composition

sketch

// Kyle Leve
// kleve@andrew.cmu.edu
// Section A
// Project-11-Composition

var faceWidth = 350;
var eyeSize = 50;
var irisSize = 30;
var pupilSize = 15;
var glimmerSize = 7;
var angle1 = 0;
var angle2 = 0;
var angle3 = 0;

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

function draw() {
	background(0);
    
    // Smile
    noFill();
    stroke(255);
    strokeWeight(5);
    curve(225, 300, 240, 320, 255, 320, 275, 300);

	// Eyes
	noStroke();
    fill('white'); // Left eyeball
    var eyeLX = 175;
    ellipse(eyeLX + 10, 200, eyeSize, eyeSize);

    fill('white'); // Right eyeball
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeRX - 30, 200, eyeSize, eyeSize);

    fill(77,47,23); // Left iris
    ellipse(eyeLX + 15, 205, irisSize, irisSize);

    fill(77,47,23); // Right iris
    ellipse(eyeRX - 25, 205, irisSize, irisSize);

    fill('black'); // Left pupil
    ellipse(eyeLX + 20, 210, pupilSize, pupilSize);

    fill('black'); // Right pupil
    ellipse(eyeRX - 20, 210, pupilSize, pupilSize);

    fill('white'); // Left eye shimmer
    ellipse(eyeLX + 25, 212, glimmerSize, glimmerSize);

    fill('white'); // Right eye shimmer
    ellipse(eyeRX - 15, 212, glimmerSize, glimmerSize);

    // Creates rotating cat face, ears, and whiskers   
    if (mouseX >= 0 & mouseX <= width) {
    	var ttl1 = makeTurtle(0, 0);
	    var ttl2 = makeTurtle(0, 0);
	    var ttl3 = makeTurtle(0, 0);
	    var ttl4 = makeTurtle(0, 0);
	    ttl1.setColor('orange');
	    ttl2.setColor('orange');
	    ttl3.setColor('orange');
	    ttl4.setColor(255);
	    ttl1.setWeight(10);
	    ttl2.setWeight(10);
	    ttl3.setWeight(10);
	    ttl4.setWeight(5);
	    ttl1.penDown();
	    ttl2.penDown();
	    ttl3.penDown();
	    ttl4.penDown();

	    // Cat head
        push();
        translate(220, 380);
        rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    ttl1.left(20);
	    rotate(radians(angle1));
	    ttl1.forward(50);
	    pop();
	    angle1 = angle1 + 0.5;

        // Left ear
        push();
        translate(155, 125);
        rotate(radians(angle3));
        ttl2.left(90);
	    ttl2.forward(75);
	    ttl2.right(125);
	    ttl2.forward(75);
	    pop();

        // Right ear
        push();
        translate(335, 125);
        rotate(radians(angle3));
	    ttl3.left(90);
	    ttl3.forward(75);
	    ttl3.left(125);
	    ttl3.forward(75);
	    pop();
	    angle3 = angle3 + 5;

        // Whiskers
        push();
        translate(245, 260);
        rotate(radians(angle2));
        ttl4.forward(50);
        ttl4.penUp();
        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.left(10);
        ttl4.forward(50);
        ttl4.penUp();
        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.right(10);
        ttl4.forward(50);
        ttl4.penUp();

        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.left(180);
        ttl4.forward(50);
        ttl4.penUp();
        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.left(170);
        ttl4.forward(50);
        ttl4.penUp();
        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.left(190);
        ttl4.forward(50);
        ttl4.penUp();
        pop();
        angle2 = angle2 + 5;
    } else { // Sets unmoving cat face if the mouse is not on the canvas
    	var ttl1 = makeTurtle(0, 0);
	    var ttl2 = makeTurtle(0, 0);
	    var ttl3 = makeTurtle(0, 0);
	    var ttl4 = makeTurtle(0, 0);
	    ttl1.setColor('orange');
	    ttl2.setColor('orange');
	    ttl3.setColor('orange');
	    ttl4.setColor(255);
	    ttl1.setWeight(10);
	    ttl2.setWeight(10);
	    ttl3.setWeight(10);
	    ttl4.setWeight(5);
	    ttl1.penDown();
	    ttl2.penDown();
	    ttl3.penDown();
	    ttl4.penDown();
        
        // Cat head
        push();
        translate(220, 380);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
	    ttl1.left(20);
	    ttl1.forward(50);
        pop();

        // Left ear
        push();
        translate(155, 125);
        ttl2.left(90);
	    ttl2.forward(75);
	    ttl2.right(125);
	    ttl2.forward(75);
        pop();

        // Right ear
        push();
        translate(335, 125);
	    ttl3.left(90);
	    ttl3.forward(75);
	    ttl3.left(125);
	    ttl3.forward(75);
        pop();

        // Whiskers
        push();
        translate(245, 260);
        ttl4.forward(50);
        ttl4.penUp();
        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.left(10);
        ttl4.forward(50);
        ttl4.penUp();
        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.right(10);
        ttl4.forward(50);
        ttl4.penUp();

        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.left(180);
        ttl4.forward(50);
        ttl4.penUp();
        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.left(170);
        ttl4.forward(50);
        ttl4.penUp();
        ttl4 = makeTurtle(0, 0);
        ttl4.setColor(255);
	    ttl4.setWeight(5);
        ttl4.penDown();
        ttl4.left(190);
        ttl4.forward(50);
        ttl4.penUp();
        pop();
    }
}

function turtleLeft(d) {
    this.angle -= d;
}
 
 
function turtleRight(d) {
    this.angle += d;
}
 
 
function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}
 
 
function turtleBack(p) {
    this.forward(-p);
}
 
 
function turtlePenDown() {
    this.penIsDown = true;
}
 
 
function turtlePenUp() {
    this.penIsDown = false;
}
 
 
function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}
 
 
function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}
 
 
function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}
 
 
function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}
 
 
function turtleSetColor(c) {
    this.color = c;
}
 
 
function turtleSetWeight(w) {
    this.weight = w;
}
 
 
function turtleFace(angle) {
    this.angle = angle;
}
 
 
function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0, 
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

I decided for this project I would use turtles to create a cat. I found it interesting that with lines I was still able to make circular shapes such as the head of the cat. In addition I decided to mess around with the rotation function to make the cat seems to break apart when the mouse is on the canvas. However, once the mouse is off the campus, the image would return to its original cat face.

Rachel Lee Looking Outwards 11 Section E

Screenshot from the anti game, with machine intelligence posing and asking questions to create a generative song.

Atlås from binaura on Vimeo (2017).

This week, I decided to investigate Atlås, an anti game environment that creates generative music, by the creative computing collective binaura. Atlås was built using the p5.js library, while simultaneously investigating the autonomy of algorithms and machine intelligence. At the crux, this project generates sounds that correspond to certain qualities of  answers to questions that are solved by machine intelligence. While this concept in itself is fascinating, what I find the most interesting about this project is how the artistic collective was able to generate an appropriate soundscape for the types of questions generated, as the questions are often quite lofty deal with cognitive processes, human communication and environmental factors (these topics are not the easiest things to talk about). Further, I was impressed by how binaura was able to create a compelling visual narrative to complement the experience, which was guided appropriately by the tempo and feeling of the generated music. Overall, I really admire how well the project was executed, especially with respects to the sensitivity of the relationship between the user, the computer, the music, and visual elements of the anti game environment.

Kyle Leve-LO-Week-11

A piece of sound art that I discovered is called The 40 Part Motet by Janet Cardiff. This project uses 40 different speakers to play 40 different parts of the piece Spem in Alium by Thomas Tallis. The piece is originally very simple however this project makes the piece much more complex. The voices relate to each other in ways that are a lot less apparent in the original versions. What I find inspirational about this project is that Cardiff was able to take a piece of music created in the 16th Century and apply today’s advancements in technology to create something emotional and spiritual. This demonstrates how past and present can be combined to create something that can relate to everyone.

Video explaining the piece

The piece

 

Christine Chen-Looking Outwards-11

Above shows a video of Adrien Kaeser’s real time climate sound controller which he developed in 2018. Link: https://vimeo.com/292088058

While scrolling through the various projects related to computational sound art, I came across one that grabbed my attention- real time climate sound controller. Adrien Kaeser from ECAL, a university of art and design based in Renens, designed this sound controller. This device utilizes aspects of real time weather to alter and control the designed music instruments. The entire device is composed of two major parts- a weather station on a tripod microphone and a custom-built controller connected to the weather station. The weather station receives and senses weather information and passes it on to the controller. The controller transforms the data into one that can be interpreted by instruments. The user could also alter the device, through modifying qualities such as amplitude, to control the output of sounds. The device is made with Arduino mega, Arduino leonardo, Weather Meters, SparkFun ESP32 Thing Environment Sensor Shield, ESP32, SparkFun MIDI Shield, High Speed Optocoupler 6n138, Encoder rotary knobs, Colored buttons and Arduino TFT touch screen. Software includes Arduino, C++ and MIDI protocol.

What I love most about this project is how the creator utilizes weather, the state of the atmosphere at a place and time, into another abstract form which gives people a different experience. It is as if weather is compressed into an audio form. Through allowing users to alter the sound through the controller, the creator make sure that generated sound would not be entirely random and create a composition of muddled music. The controller helps user to alter the output to form sound that is pleasing to them. It is just inspiring to see how such a large, incontrollable data could be transferred and transformed.

The controller allows users to alter the output of sound.