November 2018 – Page 20 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Jessica Timczyk – Looking Outwards 11

The Eigenharp is an electronic instrument made by Eigenlabs in 2008, based in the UK and invented by John Lambert. The instrument is essentially a highly flexible and portable controller, in which the sound or music is being generated in the software that it drives. I really like this project because I find it interesting that it visually looks like a wind instrument like a bassoon, but is in fact an electronic instrument. Each of the keys are velocity sensitive and act like a joystick. Although I am not entirely sure how the algorithm behind the instrument works, I suppose that it works by changing or altering the sound that comes out the intstrument based upon the keys that the player presses. The artistic influence of the creator can be seen in the array of different manipulations that a player can influence given the keys on the instrument.

LookingOutward 11

A long distance relationship is a project done Cecdet Erek, who is one of the founding members of an experimental outfit called Necropsy. The project focuses on the relationship between two points, space or time. The continuation of his ongoing project Rulers and Rhythms lies in between two rhythms centered pieces conceived for MUAC: Measures Taken and Close FarClose. This project is not only music itself but also combines computational musind architecture. I think it is very cool to vary the media and add elements to other projects. I thinking of

Anthony Ra – Project 11 – Composition

sketch

/* Anthony Ra
Section-A
ahra@andrew.cmu.edu
Project-11 */
var ttl;
var start;

function setup() {
    createCanvas(400, 400);
    background(100);
    ttl = makeTurtle(width, height);
    ttl.penDown();
    ttl.setColor(color(255));
    ttl.setWeight(1.5);

    resetCanvas();
}

function draw() {
    var step = (frameCount - start)/35.0;
    ttl.forward(step);
    ttl.left(15.0);
}

function resetCanvas() {
    background(0);
    start = frameCount;
    ttl.penUp();
    ttl.goto(width/2, height/2);
    ttl.penDown();
}

function mousePressed() {
    ttl.penUp();
    ttl.setColor(random(100, 255));
    ttl.goto(mouseX, mouseY);
    ttl.penDown();
}

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

This week gave me a lot of headaches, so I wanted to return the favor in giving the viewer headaches with a series of hypnotic-like spirals in which it seems that a still image is moving. This piece is completely grayscale in mimicking its one-dimensional pain and one is able to start the animation where the mouse clicks but the animation continues instead of starting back to its original place. This is to imitate the perpetual aching of my head that I have been feeling this past week.

Miranda-Luong-Looking-Outwards-11

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.

Miranda-Luong-Project 11

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.

Jenni Lee—Project 11—Composition

sketch

/* Jenni Lee
Section E
jennife5@andrew.cmu.edu
Project-11
*/

var iLine1
var le, to, ri, bo;
var w, h;

function setup() {
  createCanvas(640, 480);
  background(250);

  iLine1 = makeTurtle(0, 0); // starting position of figure 2.  leave 3 pixel for the first stroke (weight is 6)
  iLine1.setWeight(1);

  frameRate(15);

  le = 0;
  to = 0;
  ri = width;
  bo = height;
  w = width;
  h = height;
}

var i1 = 0,
  i2 = 0,
  i3 = 0,
  i4 = 0;
var inc = 10;


function draw() {
  var r = random(0, 255);
  var g = random(0, 255);
  var b = random(0, 255);
  iLine1.setColor(color(r, g, b));

  // first to draw the top part of the lines sequentially.  Use incremented line count for checking
  if (i1 <= w) {
    // equally divide the height into grids
    var y = lerp(to, bo, i1 / w);
    iLine1.goto(ri, y); // draw line
    i1 += inc;

    // go back to the top position
    iLine1.penUp();
    iLine1.goto(i1, to);
    iLine1.penDown();
  } else {
    // when top part finish, sequentially draw the right part, same way, with diffetenr coordinates
    if (i2 <= w) {
      var y = lerp(le, ri, i2 / h);
      iLine1.goto(ri - y, bo);
      i2 += inc;
      iLine1.penUp();
      iLine1.goto(ri, i2);
      iLine1.penDown();
    } else {
				// when top and right parts finish, sequentially draw the bottom part, same way, with diffetenr coordinates
        if (i3 <= w) {
        var y = lerp(to, bo, i3 / w);
        iLine1.goto(le, bo - y);
        i3 += inc;
        iLine1.penUp();
        iLine1.goto(ri - i3, bo);
        iLine1.penDown();
      } else {
				// when top, right, and bottom parts finish, sequentially draw the left part, same way, with diffetenr coordinates
        if (i4 <= w) {
          var y = lerp(le, ri, i4 / h);
          iLine1.goto(y, to);
          i4 += inc;
          iLine1.penUp();
          iLine1.goto(le, bo - i4);
          iLine1.penDown();
        } else {
          // when all parts are done, reset by resetting background, and counters
          background(255);
          i1 = 0;
          i2 = 0;
          i3 = 0;
          i4 = 0;
        }
      }
    }
  }
}

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 wanted to experiment with using the turtle function in order to use simple lines to create illusions. I found that using rainbow colors gave the piece a glitchy, fun, and playful feel.

Jaclyn Saik-Project 11

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.

Jaclyn Saik – Looking Outwards -11

Changxi Zheng is a professor at Columbia University who leads a team of researchers looking at ways to use computers to modify the sound of existing acoustic instruments.
One project that really caught my eye is called “zoolophone.” Zheng and his team studied the ways that professional tuners adjust glockenspiel keys–by digging into the material and making divits that allow it to vibrate at the exact desired frequency. Zheng looked into the ways that computers could make this process easier, and discovered that by modeling this same interaction on a computer, they could calculate the exact vibration that the keys would make based on their shape. In this way, he was able to manipulate the shape of the keys, something that isn’t done usually with traditionally made instruments since it’s hard enough to tune rectangular shapes.

(video caption): The metallophone contact sounds is a project the team worked on to manipulate different within set algorithms in order to maintain a certain tone.

The zoolophones on display. Each shape plays a different specific note.

This allowed his team to have more fun with the shapes, too. He wrote a program that asks the computer o start with a certain shape, such as a t-rex, and then text vibrations against it and manipulate it’s form slightly until it makes the right particular sound they were looking for.
I found this very interesting because I am always interested in tools that designers make in order to educate children, and this seems like a useful tool for teaching about different notes.

Kevin Riordan Looking Outwards-11-Section C

For this week’s looking outwards, the algorithmic music project that I chose is Andrius Sarpovas’ Kinetic Generative Music Installation. Through transposition and conversion, the data of half a million people is turned into energy impulses that produce a complex acoustic variation. I admire his creativity of thinking of turning statistics into a musical composition. I resonate with his belief that music is not merely songs that we usually listen to but it is also the rhythmic patterns, the space, the melody or the harmony that we encounter in our daily life. I think that turning different people’s consciousness into music is meaningful because individual’s own presence is represented in a very unique way. The project consists of metal, wood, plastic and glass which are the sources of the sounds. Aluminium bars are used to create a lasting and rich harmony. The segments of the installation were hung on wires through which the impulses were transferred to the sound activator and the damper. The algorithm of transposition and conversion turned statistics into impulses which were distributed to the segments to make sounds. These sounds created are rather relaxing, which has been achieved through the artist’s work on the the algorithm and the mechatronics. This shows that the artist sends a message to his audience that technology can not only be used to create solitude for people but also make the solitude comforting.

Source: https://metalmagazine.eu/en/post/interview/andrius-sarapovas-transforming-data-into-music

installation sound – 26 / 77 segments recorded – 17.06.25 from Andrius Šarapovas on Vimeo.

Kevin Riordan Project 11- Composition

kzr turtle project

/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_11*/
//details 1 changes how detailed it is horizontally, width gives pixel perfect color
//details 2 changes how detailed it is vertically, 1 gives pixel perect change
var details1 = 65;
var details2 = 5;
function preload() {//i have 2 background images, farnham jahanian or subra suresh
    var myImageLink = "https://i.imgur.com/PhOrH0d.jpg";
    //var myImageLink = "https://i.imgur.com/WNxbkQj.jpg";
    myImage = loadImage(myImageLink);
}

function setup() {
    createCanvas(480,480);
    background(0);
    myImage.loadPixels();//loading pixels in to use get later
}

function draw() {
    var t = makeTurtle(0,0);//make my turtle 🙂
    t.doTheStuff(width / details1,details2);//watch it do the stuff 🙂
}
//colorChangeDist is how often it changes color, is equal to details1
function doTheStuff(colorChangeDist,rowSize){
    var pixelColor;
    this.setWeight(details2);
    var increment = colorChangeDist;
    var numRows = height / rowSize;
    for(var k = 0; k < numRows; k++){//for loop to iterate vertically
        for(var i = 0; i < width; i += increment){//for loop for the odd rows
            pixelColor = myImage.get(this.x,this.y);
            this.setColor(color(pixelColor));
            this.forward(increment);
        }
        this.right(90);
        this.forward(rowSize);
        this.right(90);//turns it back after moving it to the next row position
        for(var j = width; j > 0; j -= increment){//for loop for the even rows
            pixelColor = myImage.get(this.x,this.y);
            this.setColor(color(pixelColor));
            this.forward(increment);
        }
        this.left(90);
        this.forward(rowSize);
        this.left(90);//turns it back after moving it to the next row position
    }
}
//turtle stuff
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, doTheStuff: doTheStuff};//added a function about doing stuff
    return turtle;
}

I wanted to make the turtle draw out an underlying image for my project. By making two variables for how detailed I wanted the drawing to be, detail1 and detail2, I can control how clear or blurry the picture is. The images look really cool at a medium amount of detail level, and I like the way farnham and subra look when drawn by turtles. Overall, this project helped me better understand how functions work together and I had alot of fun with it.