Section E – Page 7 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Eunice Choe – Project-11 – Composition

/* Eunice Choe
Section E
ejchoe@andrew.cmu.edu
Project-11*/


var r;
var g;
var b;
var turtle =[];

function setup() {
    createCanvas(400, 400);
    background(255, 206, 198);
    for (var t = 0; t < 5; t ++) {
        turtle[t] = makeTurtle(width / 2, height / 2); // sets initial position
        turtle[t].penDown;
    }
}

function draw() {
    for (var t = 0; t < turtle.length; t ++) {
        r = random(100, 255);
        g = random(10, 255);
        b = random(50, 255);
        turtle[t].setColor(color(r, g, b)); // random turtle colors
        turtle[t].setWeight(random(-0.5, 5)); // random weights
        turtle[t].penDown();
        turtle[t].forward(random(10, 70)); // random lengths
        turtle[t].right(-100, 50); // random directions
        turtle[t].penUp();
  }
  frameRate(5);
}

function mousePressed()  {
    var turtle = makeTurtle(mouseX, mouseY);
    turtle.penDown();
    turtle.setColor(255);
    for (var i = 0; i < 20; i++) { // makes random white stroke shapes
        turtle.forward(random(10, 20));
        turtle.right(200);
        turtle.forward(random(10, 20));
    }
    turtlePenUp();
}

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 my project, I wanted to create an abstract composition that shows a sense of randomness. I incorporated the randomness through randomized colors, strokes, and turtle directions. Someone interacting with this composition can also click the mouse and randomized white strokes will appear. Overall, I think the randomness makes the composition interesting.

The composition after some time passes and the added white strokes.

Eunice Choe – Looking Outwards-11

People can interact with sounds on the walls, floor, and ceiling.

LINES (2016) is an interactive sound art installation created by Anders Lind. I admire this project because it allows people to interact with the sounds by touching the lines on the floor, walls, and ceiling. I admire how the exhibition is immersive and how it allows anyone to create music whether they are musically inclined or not. The sound interactions were programmed through Max/MSP. There are three instruments in the piece and each of them consist of five to fifteen sensors connected to an arduino board with an output sound card. The creator’s artistic sensibilities manifest in the form through both visual and sound elements. The creator uses different colors and shapes to distinguish between different sound effects.

Looking Outwards 11: Hans Zimmer and his music technology

Hans Zimmer is well known for his epic movie scores, but little do people know about the computational power behind his music.

Though Zimmer is more associated with his orchestral scores now, his early film work was largely composed solo, on the synthesizer and through the use of samples that Zimmer took himself. But as his career expanded, so did the scope of his music, and it’s that scope that’s made him so enduring in the musical cultural consciousness. Zimmer is a constant innovator, and his embrace of technology means he’s able to adapt without compromising for the sake of whatever is trendy at the moment. More recently, Zimmer helped develop an app showcasing the score for Inception that took into account the user’s whereabouts and movements, and even launched a viral event to help populate the 100,000 voices he wanted for the “rise up” chant that forms the base of much of The Dark Knight Rises’ score.

So much of his music nowadays are composed and performed with custom built and programmed synthesizers that create the iconic sound that is so often associated with him.

My grand musical education is two weeks of piano lessons. So I’m not a good player, but I’m a good programmer. I’ve always felt that the computer was my instrument.

Elena Deng-Project 11-Turtles

sketch

/*Elena Deng
Section E
  edeng1@andrew.cmu.edu
  Project-11
}
*/

var t = [];
function setup() {
    createCanvas(400, 400);
    background(10);
    for(var i = 0; i < t.length; i++){ //sets various numbers of turtles
        t[i] = makeTurtle(width/2, height / 2 + random(-100, 100));
        t[i].setColor(color(random(200), random(200), random(150), 100));

    }
}

function draw() {
    var targetX = mouseX + noise(frameCount / 100); //sets the target
    var targetY = mouseY + noise(frameCount / 100);

    strokeWeight(5);

    point(targetX, targetY); //turtle will always be inclined to go to target x and y

    for (var a = 0; a < t.length; a++){
      t[a].setWeight(random(1,5))
      t[a].penDown();
      t[a].forward(1.5);
      t[a].turnToward(targetX, targetY,1);
        t[a].left(random(-5,5));} //draws the turtle
}

function mousePressed(){ //sets the number of turtles and increases it when mouse is pressed
  var newTurtle = makeTurtle(mouseX, mouseY);
  newTurtle.setColor(color(random(150), random(150), random(20), 100));
	t.push(newTurtle); //push turtle into t array

}

//////////////////////////

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 I was really excited to revisit the concept of turtles. I wanted to revisit the lines seen in the title notes from class. If you click on the screen, a new line will form and attempt to follow the mouse location. Continue clicking and you can see the way the turtle attempts to reach the mouse location more clearly.

Christine Chen-Project-11-Composition

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Project-11-Composition
*/

var turtle;
var angle = 50;

//color variables
var R = 20;
var G = 0;
var B = 100;
var A = 10;

function setup() {
    createCanvas(400, 400);
    background(240); //light gray color
    turtle = makeTurtle(100, 100);
    frameRate(10);
    
}

function draw() {
    //draw with turtles
    for (i = 0; i < 50; i++){
        turtle.setColor(color(R, G, B, A));
        turtle.setWeight(2); 
        turtle.penDown();
        turtle.forward(random(1, 10));
        turtle.left(angle);
    }
}

function mousePressed(){
    //draw turtle where mouse is
    turtle = makeTurtle(mouseX, mouseY);

    //randomize color
    R = random(0, 200);
    G = random(0, 30);
    B = random(100, 255);
    A = random(10, 80);

    //randomize angle
    angle = random(0, 15);
}

//canvas restarted when key is pressed
function keyPressed(){
    resetCanvas();
}

function resetCanvas() {
    background(240);
}


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

Directions:
– Click to draw additional squiggles
– Press key to reset

I enjoyed playing around with turtle graphics! Before doing this project, I think that all we have done with turtle graphics is drawing it very strictly through giving it strict directions. For this project, I played around with adding randomness to the graphics. I also experimented with alpha, giving the created image a gradient. I adjusted the parameters of the randomness of the colors so that they would all have a more blue and red mixture of colors.

Later stages of the program (shot with phone because every time I try to screen shot, the program resets due to my keyPressed function)

Another shot of later stages of the program (shot with phone because every time I try to screen shot, the program resets due to my keyPressed function)

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

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 – 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.

Jenny Hu — Looking Outwards 11: Computer Music

For this week’s looking outwards post, I will discuss the artist Mileece, a sound artist and environmental designer who is known for her methods of making music with plants.

Mileece creates generative music , one track which can be listened to above, and on this link. The way she generates this music is by essentially reading electrical currents given off by plants via electrodes, and processing the current into binary code— which is then processed and animated into sound. Often, this creates sound that feels like music.

Vice created great documentation of her process at the following video:

What I love about Mileece’s music is the duality of the generative work. In some ways, the music is generated purely from the plant, it’s a radical change in our perception of what a plant is and is capable of, but it’s reprocessed by the computer. The computer is a key part of our ability to interpret the plant as music in the first place. Because of this, it feels impossible to define her music without the discussion of computation.

Will we start to breed plants to generate totally new sounds?

Vicky Zhou – Project 11 – Computation

sketch

/*Vicky Zhou
vzhou@andrew.cmu.edu
Section E
Project 11 - Freestyle with Turtles*/

//turtle array
var ttl = [];

function setup() {
	createCanvas(480, 480);
	background(180, 200, 250);
	//initializing the turtle array
	for (var i = 0; i < 5; i ++){
		t = makeTurtle(0, 0);
		ttl.push(t);
	}
}


function draw() {
	for (var i = 0; i < 5; i ++){
		fill(190, 210, 210, 200);
		stroke("blue");
		//drawing the triangle
		triangle(ttl[i].x, ttl[i].y,
			ttl[i].x + 10, ttl[i].y + 60,
			ttl[i].x + 100, ttl[i].y + 100);
		//moving the triangle
		moveTurtle();
	}

}

//function to move the triangles 
function moveTurtle() {
	for (var i = 0; i < 5; i ++){
		dx = abs(ttl[i].x - mouseX);
		if (ttl[i].x < mouseX) {
			ttl[i].x += dx / 50;
		}
		else {
			ttl[i].x -= dx / 20;
		}
		dy = abs(ttl[i].y - mouseY);
		if (ttl[i].y < mouseY) {
			ttl[i].y += dy / 100 + i;
		}
		else {
			ttl[i].y -= dy / 100 + i;
		}
	}
}



//---------------------------------------------------------------------------
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 week’s project, because the prompt was so vague I was not entirely sure what I wanted my end product to be. However, I did want my computational turtles to be interactive with the mouse, so I centered the project around a turtle that would follow your mouse tracking and leave behind a trace. I played around with ellipses, rectangles, but then settled on a triangle because of how neatly some edges could settle in each other.