Category: Section A

mmiller5-Looking Outwards-11


Computer generated chorale based off Bach’s compositions

This week, I’ll be looking at a Bach Style Chorale created by the program EMI (or Emmy, I dunno) and David Cope.  EMI, or Experiments in Musical Intelligence, is a program made by David Cope in 1981 that composes music in the styles of various composers, essentially making pieces that sound as though they were written by those composers.  Abstractly, the program works in three steps: deconstruction–analyzing pieces of the selected works–, signatures–identifying common aspects of works–, and compatibility– recombining these parts into new pieces.  I find this to be very inspiring because its goal is to computationally analyze musical structure and then produce something from that, potentially creating limitless numbers of works that follow existing styles.  This method could be utilized by composers to analyze their own works to aid their composing process, allowing man and machine to work together to make works of art.

hschung-LookingOutwards-11

My LookingOutwards-04 was more about uniquely produced music, so I am taking the opportunity to explore sound art.

As I was searching for computational sound art, I came across a website for EarSketch- a program used to teach students about computer science through coding music. Students are taught to code in Python or Javascript, and learn how to use loops, compose beats, and add effects to make music.

EarSketch hosts a national competition every year to encourage students to code music creatively. I liked a winning submission from the 2017 competition, titled Mid Day Parade Competition Song, created by student Robert Marcez. I thoroughly enjoy his song because it actually sounds good, like a real song. It’s full of complexities, crescendos, and even a beat drop of sorts, that make it feel like a full song. More than that, I’m impressed that this high school student made a song from scratch via the medium of code, which is something I actually haven’t thought much about before. He was able to manipulate different components of the song, make his own functions to easily manipulate them, and creatively exercise his knowledge of code. It reminds me there are many ways to blend the fields of science and art.

Robert’s coded song- press the play button to listen! It’s quite good.
https://earsketch.gatech.edu/earsketch2/#?sharing=2K1nSohUQd3YaLpD4Zvohw

A list of the winners from 2017. Robert’s song is posted first, and there’s a blurb from him about what he was thinking as he created his song.
https://earsketch.gatech.edu/landing/#

yushano_Project 11

sketch

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 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(random(255),random(255),0),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, 
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

function setup() {
    createCanvas(480, 480);
    background(0);

}

var turtleX = [];
var turtleY = [];
var radius = 5;

function draw() {
  for (var num=0; num<turtleX.length; num++){
    var turtle = makeTurtle(turtleX[num], turtleY[num]);
    var angle=20;
    
    for (var i=0; i<20; i++) {
        turtle.penDown();
        turtle.right(angle);
        turtle.forward(radius);
      
      turtle.penUp();
      turtle.x = turtleX[num];
      turtle.y = turtleY[num];
    }
  }
  if(radius<200){
    radius += 0.5;
  }
}

function mousePressed(){
  
  turtleX.push(random(width));
  turtleY.push(random(height));

}

When users press the mouse on the canvas, there will be a turtle that is placed randomly on canvas generated. The size of each firework is also changing. This idea is inspired by the firework that we can see on celebration days.

hannahk2-Project11

sketch

//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Project-11

//creates variable to be mapped
var move=500

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

function draw() {
	//maps value to be used in right command
	var m = map(move, 0, mouseX, 200, 400);
    
    background(0);

    //draws darkest circular turtle which moves according to mouse
    var turtle4 = makeTurtle(mouseX, mouseY); //150
    turtle4.penDown();
    turtle4.setColor(color(20, 36, 62));
        for (var i = 0; i < 2000; i++) {
        turtle4.forward(300);
        turtle4.right(m);
        turtle4.forward(200);
    }

    //draws middle colored circular turtle which moves according to mouse
    var turtle5 = makeTurtle(mouseX+200, mouseY+200); //150
    turtle5.penDown();
    turtle5.setColor(color(85, 108, 122));
        for (var i = 0; i < 2000; i++) {
        turtle5.forward(300);
        turtle5.right(m-500);
        turtle5.forward(200);
    }

    //draws lightest colored circular turtle which moves according to mouse
    var turtle6 = makeTurtle(mouseX-200, mouseY-200); //150
    turtle6.penDown();
    turtle6.setColor(color(139, 202, 191));
        for (var i = 0; i < 2000; i++) {
        turtle6.forward(300);
        turtle6.right(m+500);
        turtle6.forward(200);
    }
}


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 did not make any sketches for this, but here are images of some compositions I liked.

For this project, I wanted to create a simple turtle collage which interacted with the mouse and created interesting compositions with eachother with every movement of the mouse. I am pretty happy with my results, and how the tiniest movement can create a different composition and pattern.

thlai-LookingOutwards11-Computer-Music

Yuri Suzuki

The artist I am choosing for this Looking Outwards is actually the same from my Looking Outwards 08: Yuri Suzuki. I wanted to explore his projects more in depth and choose another one that drew me in.

Suzuki’s project This Looks Like Music takes a whimsical approach to computational music. Suzuki created an audiovisual installation for Mudam Publics Summer Project – the project consists of a mini robot that detects and follows a black line on paper. The robot responds to colored reference points and translates it into sound. I imagine that the robots sense and calculate the color of the markers (kind of like this week’s assignment) and outputs a sound that corresponds to it.

The best part about this installation is that it invites the audience to co-create the music (the audience includes small children!). Having an interactive installation makes it much more relatable and tangible, especially for something like music.

thlai-Project11-Composition

I still have trouble creating compositions using turtle graphics, but this project certainly helped me learn a lot. I created a hexagonal grid (inspired by a past assignment) and a spiral web that responds to the mouse position. The web and hive are both natural phenomena created by small creatures and have unique and distinctive shapes.

sketch

// Tiffany Lai
// 15-104, Section A
// thlai@andrew.cmu.edu
// Project 11 - Turtle

var ox = 80; // offset of x position
var oy = 90; // offset of y position
var tw = 15; // spacing between hexagons (width)
var th = 18; // spacing between hexagons (height)

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

function draw() {
	background(35, 36, 49, 50);
	// draw hexagons
  for (var x = 0; x < 6; x++) {
		for (var y = 0; y < 20; y++) {
			var t1 = makeTurtle(ox + x * tw, oy + y * th);
			hexagon(t1);
		}
		if (x%2 == 0) { // offset every other column
			oy = 80;
		} else {
			oy = 90;
		}
	}

	// draw spiral of circles
	var t2 = makeTurtle(0, 0);
	var translateX = map(mouseX, 0, width, 100, 200);
	var translateY = map(mouseY, 0, height, 100, 200);
	var radius = map(mouseX, 0, width, 160, 170);

	translate(translateX, translateY); // translate based on mouse position
	for (var i = 0; i < 100; i++) {
		t2.setColor(color(97, 121, 120, 20)); // yellow-y color
		t2.forward(i * 5); // creating spiral
		t2.left(radius);
		circle(t2);
	}
	pop();

function hexagon(t1) {
	for (var i = 0; i < 6; i++) {
		t1.setColor(color(175, 35, 45));
		t1.forward(10);
		t1.left(60);
	}
}

function circle(t2) {
	for (var i = 0; i < 20; i++) {
		t2.setColor(color(213, 215, 181, 60));
		t2.forward(0.5);
		t2.left(360/20);
	}
}

//======= CONDENSED TURTLE CODE =======//
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;}}

amui1-Project-11-Composition

amui1-p11

//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-11
//

//variables for rain
var x = 30;
var y = 30;
var xSpeed = 0.5;
var ySpeed = 3;
var treex = 10;

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

function draw() {
    background(51,79,102);

    noStroke();
    fill(178,198,204);

    //make rows of rain
    for (row = 0; row < 10; row++) {
      ellipse(x + row*50,y,5,10);
      //make columns of rain
      for (col = 0; col < 5; col++) {
        ellipse(x+row*50,y-80*col,5,10);
      }
    }
    //move rain a different way based on location
    if (y < height/4){
      x -= xSpeed;
    }
    //move rain a different way based on location
    if (y > height/4){
      x += xSpeed;
    }
    //move rain down canvas
    y += ySpeed;
    //if rain off the page, go back to top
    if (y > height/2+10) {
      y = 0;
    }
    //if mouse is pressed, then show lightning
    if (mouseIsPressed) {
      lightning();
    }



    //move tree based on wind based on wind position
    //reposition trunk and tree based on how wind is moving the tree
    if (mouseX > width/2 - 10 & mouseX < width/2+10) {
      wind = 118;
      treew = 68;
      trunkw = 90;
      trunkDist = 50;

    }
    if (mouseX < width/2-10) {
      wind = 110;
      treew = 70;
      trunkw = 80;
      trunkDist = 50;
    }
    if (mouseX > width/2+10) {
      wind = 135;
      treew = 60;
      trunkw = 100;
      trunkDist = 38;
    }

    //make 5 trees
    for (t = 0; t < 5; t++) {
      turtleTree(treex+t*100,wind,treew,trunkw,trunkDist);
    }
}


//make turtle for lightning
function lightning() {
    light = makeTurtle(mouseX,mouseY);
    light.setColor(color(233,255,103));
    light.setWeight(5);
    light.penDown();
    light.forward(20);
    light.right(115);
    light.forward(30);
    light.left(135);
    light.forward(10);
    light.right(140);
    light.forward(30);
    light.left(125);
    light.forward(10);
    light.right(130);
    light.forward(40);
    light.right(150);
    light.forward(20);
    light.left(115);
    light.forward(10);
    light.right(130);
    light.forward(30);
    light.left(120);
    light.forward(10);
    light.right(123);
    light.forward(41);
    light.penUp();
}

//make turtle tree
function turtleTree(treex,wind,treew,trunkw,trunkDist) {

    trunk = makeTurtle(treex+25,height-trunkDist);
    trunk.setColor(color(95,81,48));
    trunk.setWeight(3);
    trunk.penDown();
    trunk.right(trunkw);
    trunk.forward(48);
    trunk.left(90);
    trunk.forward(10);
    trunk.left(90);
    trunk.forward(48);
    tree = makeTurtle(treex,height-50);
    tree.setColor(color(93,134,67));
    tree.setWeight(3);
    tree.penDown();
    tree.left(65);
    tree.forward(15);
    tree.left(125);
    tree.forward(8);
    tree.right(130);
    tree.forward(15);
    tree.left(125);
    tree.forward(8);
    tree.right(wind);
    tree.forward(80);
    tree.right(130);
    tree.forward(80);
    tree.left(230);
    tree.forward(8);
    tree.left(135);
    tree.forward(15);
    tree.left(240);
    tree.forward(8);
    tree.right(240);
    tree.forward(20);
    tree.right(122);
    tree.forward(treew);
    tree.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 had trouble coming up with a concept for this project. It was so open ended, that I wasn’t sure exactly what I should do. I managed to come to the idea of depicting a storm. The user can interact with the program by pressing the mouse to show lightning or move the mouse left and right to portray how wind would behave.

Caption: The user moved to the left side, as the “wind”, which swayed the trees on the bottom left.

Caption: The user clicked the mouse and the lightning appeared.

amui1-LookingOutwards-11

For this week’s Looking Outwards, I researched the Japanese artist, Notuv.

Caption: Above, he is pictured playing at one of his live sets.

I specifically chose to do my Looking Outwards on his piece, Fucertc, released in 2013. It can be found in the video below:

I admire Notuv and this piece because he combines sound control with a unique visual design. He controls the sound with a program called MaxMSP and the visuals with OpenFrameworks. I particularly admire this piece, Fucertc because he uses such a minimalistic approach with only a 2 step “vibe” and percussional sounds. I also like how as each measure comes, there is a new sound introduced, but with the same consistent background beat. The full writeup for Fucertc can be found here.

hannahk2-LookingOutwards-11

For this week’s Looking Outwards, I chose Maxime Causeret’s computer generated video and music work, “Order from Chaos”. The work is a blend of computationally generated biological forms and simulations, and computer generated music. Causeret aimed to represent the idea of emergence in the audio and visuals in his video, and even generated the rhythm of the track in an emergent manner. He took audio samples of rain falling, and mapped the transients for the drips, and forced the mapped points towards the nearest drumming grid positions using the computer. The result was that a steady rhythm emerged, and over this audio he added layers and layers of different instruments. He used computer animation to simulate complex biological processes such as endosymbiosis, flocking behavior, etc. The creators artistic sensibilities are clearly manifested in the final work, seeing his other works and his fascination with biological processes on the microscopic scale, and his use of bright, thin lines. I admire this project because of its consistency in the theme of emergence, in all aspects of the video including visuals, sound, etc. The forms displayed are simply mesmerizing and morph into each other beautifully, and the music is enchanting. The whole video seems otherworldly to me, and I really admire that.

 

Max Cooper – Order from Chaos – Official Video by Maxime Causeret from Max Cooper on Vimeo.

ssharada-lookingoutwards11

^Cope’s Emmy Bach style prelude.

David Copeis an American author, composer, scientist, and former professor of music at the University of California, Santa Cruz. His primary area of research involves artificial intelligence and music; he writes programs and algorithms that can analyse existing music and create new compositions in the style of the original input music. His EMI (Experiments in Musical Intelligence) software has produced works in the style of various composers, some of which have been commercially recorded (Cockrell 2001)—ranging from short pieces to full length operas. As a composer, Cope’s own work has encompassed a variety of styles—from the traditional to the avant-garde—and techniques, such as unconventional manners of playing, experimental musical instrument, and microtonal scales, including a 33-note system of just intonation he developed himself (Cockrell 2001). Most recently, all of his original compositions have been written in collaboration with the computer—based on an input of his earlier works. He seeks a synergy between composer creativity and computer algorithm as his principal creative direction