Category: Uncategorized

Caption: Each tree resembles a different city and visualizes the beautiful, unique music each produces.

For my looking outwards, I decided to explore what my peers have discussed. Arden Wolfe discusses The Sonumbra de Vincy. This light visualization, in my opinion illuminates the music of the city each “tree” represents. Each tree takes the sounds of bustling cities around the world and interprets them visually. While yes, you can argue there is no physical or computational sound, if you look deeper at the interpreted lines, you will hear the music and harmonies of each respective city. In music, a lot of times the most meaningful moments are the spaces between the notes. In this case, it is the drawing of the lines and the shapes of the trees that sing the music of each city. This is what I love about this project, is the artist’s ability to take music so abstract of a bustling city, and algorithmically display them for others to see what he sees and feels “between the notes”.

Sonumbra de Vincy

Here is a link to the project’s website.

Adventures of the Solitary Bee, Composed, written, performed and directed by Miya Masaoka. Special thanks to Scot Duration: 8:32 from Miya Masaoka on Vimeo.

The artist that I will be looked into was Miya Masaoka, a composer, sound artist, and musician based in New York City. Her work operates at the intersection of spatialized sound, recording inside physical objects or inside a plant or the human body, within architecturally resonant spaces or outdoor resonant canyons. A specific project that I found resonating was Adventures of the Solitary Bee (1999), where she uses natural sounds in addition to some musical notes made via instruments to create an almost electronic white-noise. The visual imagery and audio used in the video create a strong tie between the natural and man-made, two areas of study the artist has delved into before, but at separate times. Not much is written about the algorithms used to create this sound, but from what I can gather a basic audio editing program that allows overlays probably worked with as it is her raw material that is vital to the project.

sketch

/* Miranda Luong
Section E
mluong@andrew.cmu.edu
Project-11-Composition
*/

var myTurtle

function setup() {
    createCanvas(480, 480);
    background(0);
    myTurtle = makeTurtle(width/2,height/2); //places starting turtle at center
    myTurtle.setColor('black');
    myTurtle.setWeight(6);
}

// When the user clicks the mouse
function mousePressed() {
    //turtle moves to mouse
    myTurtle.goto(mouseX,mouseY);
    //if mouse is south of canvas' horizontal center, pen is red
    if (mouseY > height/2){
      myTurtle.setColor('red');
    }
    //if mouse is north of canvas' horizontal center, pen is blue
    if (mouseY < height/2){
      myTurtle.setColor('blue');
    }
    //size of circle is random from range between 5 and 20
    var size = random(5,20);
    //draw circle
    for (var i = 0; i < 360; i+=size){
        myTurtle.penDown();
        myTurtle.right(size);
        myTurtle.forward(10);
        myTurtle.penUp();
    }
}


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 went for a pretty simple drawing. When a visitor clicks on the canvas, a circle is drawn. The colors of these circles change according to where they clicked.

sketch

/* Jaclyn Saik 
Section E
jsaik@andrew.cmu.edu
Assignment-00-A
*/

var peter; //my variables for my turler started out with some names 
var steven; 
var greg;
var robin;
var carol;
var SPACE = 400/6 //spacing for the lazers
var Swish = 1; //variable for switching states
var spoke; 

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

    peter = makeTurtle(SPACE, 20);
    steven = makeTurtle(SPACE*2, 20);
    greg = makeTurtle(SPACE*3, 20);
    robin = makeTurtle(SPACE*4, 20);
    carol = makeTurtle(SPACE*5, 20);
}
function draw() {
    background("black");
    if(Swish == 1){
        pDrop();
        peter.setWeight(random(5, 14));
        peter.setColor(color(200, 160, random(30, 255)));
        steven.setColor(color(180, 200, random(30, 255)));
        steven.setWeight(random(5, 14));
        greg.setColor(color(190, 240, random(30, 255)));
        greg.setWeight(random(5, 14));
        robin.setColor(color(200, 200, random(30, 255)));
        robin.setWeight(random(5, 14));
        carol.setColor(color(160, 230, random(30, 255)));
        carol.setWeight(random(5, 14));
    }
    if(Swish == 2) {
        slow();
    }

}



function pDrop() { //all the lazers
        //first lazer
        background("black");
        fill("green")
        text("a great nightclub", 150, 30);

        peter.penDown();
        peter.face(90);
        peter.forward(30);
        peter.forward(frameCount/10);

        if (peter.distanceTo(SPACE, 20) > 500) {
            peter.goto(SPACE, 20);
        }

        //second lazer
        steven.penDown();
        steven.face(90);
        steven.forward(30);
        steven.forward(frameCount/10);

        if (steven.distanceTo(SPACE*2, 20) >500) {
            steven.goto(SPACE*2, 20);
        }

        //third lazer
        greg.penDown();
        greg.face(90);
        greg.forward(30);
        greg.forward(frameCount/10);

        if (greg.distanceTo(SPACE*3, 20) >500) {
            greg.goto(SPACE*3, 20);
        }

        //fourth lazer
        robin.penDown();
        robin.face(90);
        robin.forward(30);
        robin.forward(frameCount/10);

        if (robin.distanceTo(SPACE*4, 20) >500) {
            robin.goto(SPACE*4, 20);
        }

         //fifth lazer
        carol.penDown();
        carol.face(90);
        carol.forward(30);
        carol.forward(frameCount/10);

        if (carol.distanceTo(SPACE*5, 20) >500) {
            carol.goto(SPACE*5, 20);
        }

}

function slow(){
    background("Darkslategray");
    fill("red");
    text("a quieter, but still fun nightclub", 130, 30);
    spoke = makeTurtle(width / 2 + random(-100, 100), height / 2 + random(-100, 100));
    spoke.penDown();
    spoke.setColor("red");
    spoke.goto(mouseX, mouseY);


}

function mousePressed() { 
    Swish++;   
    if (Swish > 2) {
        Swish = 1;
    }
}


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;}

For this project, I was inspired by this really interesting room I got to experience at an art museum that would change states based on crowd movement. I like that I could use the turtles to relate their position to frame rate, so I played around with that.