The ARC creates generative music by responding to touch sensors in different objects
At the South by Southwest (SXSW) festival in 2016, Deloitte Digital created an interactive space where people could use touch sensors to generate electronic music. Known as the ARC (Audience Reactive Composition), the space holds programmable objects that use sensors to adjust the amplitude, pitch, and other elements of exclusive tracks. According to DJ Baio, an electronic artist with expertise on the project, the installation is controlled using Ableton software. Ableton, which is commonly used in electronic live concerts, can be used to adjust notes, frequency, and samples of audio to create unique versions of tracks so every performance is unique. I admire this project as it allows people with no experience in the computational sound world to create their own generative music. Moreover, adopting responsive technology to make music allows endless opportunities to create that would otherwise be impossible.
/*
Dani Delgado
Section E
ddelgad1@adnrew.cmu.edu
Project 11
*/
//set global variables
var trl;
var trlSet = 1;
function poly(){
//create the first polygon to iterate
for (var i = 0; i < 6; i ++) {
trl.penDown();
trl.forward(4.5);
trl.left(60);
trl.penUp();
}
}
function poly2() {
//create the second polygon to iterate
for (var j = 0; j < 5; j++) {
trl.penDown();
trl.forward(5);
trl.left(70);
trl.penUp();
}
}
function poly3() {
//create the third polygon to iterate
for (var j = 0; j < 1; j++) {
trl.penDown();
trl.forward(6);
trl.left(180);
trl.penUp();
}
}
function poly4() {
//create the fourth polygon to iterate
for (var p = 0; p < 50; p++){
trl.penDown();
trl.forward(0.1);
trl.left(360/50);
trl.penUp();
}
}
function setup() {
//setup canvas dimensions
createCanvas(480, 400);
frameRate(20);
}
function draw() {
var set = int(trlSet);
//the following if statements creates a list of possible turtle screens
//draw the first turtle screen
//this turtle is basic, cream background and gray spiral
if (set === 1) {
background(255, 240, 230);
//create the turtle
trl = makeTurtle(width / 2, height / 2);
trl.setColor(60);
trl.setWeight(1.25);
trl.penUp();
//draw the spiral
for (var j = 0; j < mouseY / 1.25; j ++){
trl.penUp();
var dist = 1 + j * 0.7;
trl.forward(dist)
poly();
trl.left(180);
trl.forward(dist);
trl.left(180);
//rotate
trl.left(mouseX / 25);
constrain(mouseX, 0, 480);
//change the widths as the turtle increases
if (j > 100) {
trl.setWeight(1.75);
}
if (j > 125) {
trl.setWeight(2.25);
}
if (j > 150) {
trl.setWeight(2.75);
}
}
}
//draw the second turtle screen
//this turtle is slightly modified from the first
//the colors are inverted and the spacing has changed
if (set === 2) {
background(60);
//create the turtle
trl = makeTurtle(width / 2, height / 2);
trl.setColor(255, 190, 180);
trl.setWeight(1.25);
trl.penUp();
for (var j = 0; j < mouseY * 1.1; j ++){
//draw a turtle spiral
var dist = 1 + j * 0.25;
trl.forward(dist)
poly();
trl.left(180);
trl.forward(dist);
trl.left(180);
//rotate
trl.left(mouseX / 25);
constrain(mouseX, 0, 480);
//change the widths as turtle increases
if (j > 100) {
trl.setWeight(1.75);
}
if (j > 125) {
trl.setWeight(2.25);
}
if (j > 150) {
trl.setWeight(2.75);
}
}
}
//create the third turtle screen
//for this one, I changed the color mode to HSB to get a rainbow
if (set === 3) {
background(240);
//create the turtle
trl = makeTurtle(width / 2, height / 2);
//set colors
push();
colorMode(HSB, 255);
var col = 0;
trl.setWeight(1.5);
trl.penUp();
//create spiral
for (var j = 0; j < mouseY / 1.5; j ++){
trl.penUp();
var dist = 1 + j * 2;
trl.forward(dist)
col = col + 255 / (mouseY / 1.25);
trl.setColor(color(col, 255, 255));
poly();
trl.left(180);
trl.forward(dist);
trl.left(180);
//rotate
trl.left(mouseX / 20);
constrain(mouseX, 0, 480);
//make the variable weights
if (j > 100) {
trl.setWeight(2);
}
if (j > 125) {
trl.setWeight(2.5);
}
if (j > 150) {
trl.setWeight(3);
}
}
pop();
}
//create the fourth trutle screen
//this screen has multiple turtle spirals
if (set === 4) {
push();
background(60);
//create the turtle
trl = makeTurtle(width / 2, height / 2);
//set colors
colorMode(HSB, 255);
var col = 0;
trl.setWeight(1.5);
trl.penUp();
//create the first spiral
for (var j = 0; j < mouseY / 1.10; j ++){
trl.penUp();
var dist = 1 + j * 0.25;
trl.forward(dist);
col = col + 255 / (mouseY / 1.25);
trl.setColor(color(col, col, col));
poly2();
trl.left(180);
trl.forward(dist);
trl.left(180);
//rotate
trl.left(mouseX / 15);
constrain(mouseX, 0, 480);
//variable wieghts
if (j > 100) {
trl.setWeight(2);
}
if (j > 125) {
trl.setWeight(2.5);
}
if (j > 150) {
trl.setWeight(3);
}
}
pop();
//create the second turtle spiral
//this one is dashed lines and on the top left
trl = makeTurtle(0, 0);
//set colors
push();
translate(100, 100)
colorMode(HSB, 255);
var col = 0;
trl.setWeight(1.5);
trl.penUp();
//make the spiral
for (var j = 0; j < mouseY; j ++){
trl.penUp();
var dist = 1 + j * 0.5;
trl.forward(dist)
col = col + 255 / (mouseY / 1.25);
trl.setColor(color(col, col, 255));
poly3();
trl.left(180);
trl.forward(dist);
trl.left(180);
//rotate
trl.left(mouseX);
constrain(mouseX, 0, 480);
//variable widths
if (j > 100) {
trl.setWeight(2);
}
if (j > 125) {
trl.setWeight(2.5);
}
if (j > 150) {
trl.setWeight(3);
}
}
pop();
//create the third spiral
//this one is dashed lines and on the bottom right
trl = makeTurtle(0, 0);
//set colors
push();
translate(350, 300)
colorMode(HSB, 255);
var col = 0;
trl.setWeight(1.5);
trl.penUp();
//spiral draw
for (var j = 0; j < mouseY; j ++){
trl.penUp();
var dist = 1 + j * 0.5;
trl.forward(dist)
col = col + 255 / (mouseY / 1.25);
trl.setColor(color(col, col, 255));
poly3();
trl.left(180);
trl.forward(dist);
trl.left(180);
//rotate
trl.left(mouseX);
//varaible widths
if (j > 100) {
trl.setWeight(2);
}
if (j > 125) {
trl.setWeight(2.5);
}
if (j > 150) {
trl.setWeight(3);
}
}
pop();
}
//create the fifth turtle screen
//this one is a thick spiral that gets darker in the center
if (set === 5) {
push();
background(255);
//create the turtle
trl = makeTurtle(width / 2, height / 2);
//set colors
colorMode(HSB, 255);
var col = 0;
trl.setWeight(30);
trl.penUp();
//draw the spiral
for (var j = 0; j < mouseY; j ++){
trl.penUp();
var dist = 1 + j * 0.2;
trl.forward(dist)
col = col + 255 / (mouseY / 1.25);
trl.setColor(color(255, col, col));
poly4();
trl.left(180);
trl.forward(dist);
trl.left(180);
//rotate
trl.left(mouseX / 25);
constrain(mouseX, 0, 480);
}
pop();
}
}
function mousePressed() {
//this function runs trhough all of the screens
trlSet += 1;
//if you reach the last screen, it reseats to the first
if (trlSet > 5) {
trlSet = 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;}
Spirals have always given me a great deal of difficulty to figure out, so I wanted to take advantage of this project to get some practice in playing around with some turtle spirals.
There were a lot of different variations I went through, so I decided that instead of choosing and over-complicating one, I should just put them all into one program which can flip through the different iterations to explore the process and play around with each one (as I find it kinda mesmerizing to see what placing your mouse on different parts of the page will do).
first turtle screensecond turtle screen (mouse X to the left)second turtle screen (mouseX to the right)third turtle screenfourth turtle screen (mouseX to the right)fourth turtle screen (mouseX in the middle)fifth and final turtle screen
/*Julie Choi
15-104 Section E
jjchoi@andrew.cmu.edu
Project-11
*/
var shapeSize = 50;
function setup() {
createCanvas(400, 400);
background(0);
}
function mousePressed(){
//randomize angle to create different compositions
var angle = random(30, 90);
//create turtle variable
var turtle = makeTurtle(mouseX, mouseY);
// set like color to light turquoise
turtle.setColor(color(162, 215, 207));
//draw geometric composition
for(var x = 0; x < 20; x++){
turtle.penDown();
turtle.forward(shapeSize);
turtle.right(angle);
turtle.forward(shapeSize);
turtle.right(angle);
turtle.forward(shapeSize);
turtle.right(angle);
turtle.forward(shapeSize);
turtle.right(angle);
//alter angle when ever new shape is drawn
shapeSize -= 1;
turtle.right(25);
}
}
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 composition project, I enjoyed the freedom that we had with the turtle graphics. My project was created after I had fun creating randomized circular geometric shapes. I used some techniques that I learned from the video lectures and the recitation.
After many clicks, my composition creates an abstract spider web.
Ryoji Ikeda is a sound artist primarily interested in generating sound tones and noise rather than instrumentals and voice. I am particularly interested in his audiovisual concert, Datamatics, which is an art project exploring making the intangible nature of data into something perceivable. Through a multisensory experience, Ikeda creates a soundscape generate based off of pure data. The soundtrack is jarring and almost hypnotic, with many layers and frequencies that create the feeling of being overwhelmed. Paired with the binary nature of the visuals, Ikeda presents a very accurate feeling of data and its presence in our lives. However, since I am viewing this work from a web page, I would like to know more about how this piece was incorporated into a physical environment and what other interactions were present within that space to enhance the communication of pure data.
// Justin Yook
// jyook@andrew.cmu.edu
// Section C
// Project 11
var blueTurtle;
var rCol = [];
var rFor;
function setup() {
createCanvas(360, 240);
background(0);
for (var i = 0; i < 50; i++) {
rCol[i] = color(random(0, 255), random(0, 255), random(0, 255));
}
blueTurtle = makeTurtle(0, height / 2);
blueTurtle.setWeight(3);
blueTurtle.setColor(color(255, 255, 255));
frameRate(60);
}
function draw() {
// CREATE THE ZIG ZAG PATTERN
blueTurtle.forward(1);
if (blueTurtle.x >= 45 & blueTurtle.x < 90) {
blueTurtle.face(300);
blueTurtle.forward(1);
}
if (blueTurtle.x >= 90 & blueTurtle.x < 135) {
blueTurtle.face(70);
blueTurtle.forward(1);
}
if (blueTurtle.x >= 135 & blueTurtle.x < 180) {
blueTurtle.face(-70);
blueTurtle.forward(1);
}
if (blueTurtle.x >= 180 & blueTurtle.x < 225) {
blueTurtle.face(70);
blueTurtle.forward(1);
}
if (blueTurtle.x >= 225 & blueTurtle.x < 270) {
blueTurtle.face(-70);
blueTurtle.forward(1);
}
if (blueTurtle.x >= 270 & blueTurtle.x < 315) {
blueTurtle.face(-300);
blueTurtle.forward(1);
}
if (blueTurtle.x >= 315 & blueTurtle.x < width) {
blueTurtle.face(0);
blueTurtle.forward(1);
}
if (blueTurtle.x >= width) {
blueTurtle.x = 0;
blueTurtle.y = random(0, 240);
blueTurtle.setColor(random(rCol));
}
}
// Implement Turtle
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 was inspired by how heartbeats and sound were represented on monitors, and created a zig-zag pattern similar to them. To add something interesting, I made an array with length 50, where each element is a random color. In addition, the y-coordinate of each pattern drawn after the first is random.
/*
Mimi Jiao
wjiao@andrew.cmu.edu
Section E
Project 11
*/
var toggle = 0; //toggle between images drawn
var increment = 0; //increment for moving turtle and drawing turtle
function setup() {
createCanvas(400, 400);
background(0);
}
function draw() {
//first drawing image
if (toggle === 0) {
for (var i = 0; i < 260; i ++) {
var play = makeTurtle(cos(i) * 100 + 200, 200 + sin(i) * 100);
play.penDown();
play.setColor(color(0, 255, 0));
play.right(increment);
play.forward(increment);
}
increment += 1;
if (increment > 850) {
fill(0)
rect(0, 0, width, height);
increment = 0;
}
}
//second drawing image
if (toggle === 1) {
for (var i = 0; i < 360; i ++) {
var play = makeTurtle(width / 2, 200 + sin(i));
play.penDown();
play.setColor(color(255, 0, 0));
play.left(increment);
play.forward(increment);
}
increment ++;
}
//third drawing image
if (toggle === 2) {
for (var i = 1; i <= 800; i ++) {
var play = makeTurtle(random(.1,.65) * 2**2 * cos(PI/i)/sin(PI/i),
2**cos(PI/i)/sin(PI/i)
);
play.penDown();
play.setColor(color(0, 0, 255));
play.right(i);
play.forward(i);
}
}
//fourth drawing image
if (toggle === 3) {
for (var i = 0; i < 360; i ++) {
//increment = map(mouseX, 0, windowWidth, 0, width);
var play = makeTurtle(random(400), random(400) + sin(i));
play.penDown();
play.setColor(color(255, 0, 255));
play.left(increment);
play.forward(increment);
}
increment += 1;
}
//fifth drawing image
if (toggle === 4) {
for (var i = 1; i <= 800; i ++) {
var play = makeTurtle(.45 * 2**2 * cos(PI/i)/sin(PI/i),
2**cos(PI/i)/sin(PI/i)
);
play.penDown();
play.setColor(color(0, 255, 255));
play.right(increment);
play.forward(increment);
}
increment += 1;
if (increment > 950) {
fill(0)
rect(0, 0, width, height);
increment = 0;
}
}
//image reset back to black
if (toggle === 5) {
fill(0);
rect(0, 0, width, height);
}
}
//if mouse is pressed, toggle between the drawn images
function mousePressed() {
toggle ++;
if (toggle > 5) {
toggle = 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: .005,
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 wanted to create something where you could toggle between states to see different drawings. I wanted to play with curves and spirals so I went back to mathworld.com to find some math equations.
Some process shots:
/* Rachel Lee
Section E
rwlee@andrew.cmu.edu
Project 11: Freestyle Turtles
*/
function setup() {
createCanvas(480, 480);
background(10, 50, 100);
}
function draw() {
var m = 300; // variable to be mapped
// maps mouseX position and controls scale/ how far turtle turns right
var scale = map(m, 0, mouseX, 100, 300);
// drawing first turtle (violet)
var turtle1 = makeTurtle(mouseX, mouseY);
turtle1.setColor(color(240, 185, 240, 60));
turtle1.setWeight(0.25);
for (i = 0; i < 360; i++) {
turtle1.penDown();
turtle1.right(60);
turtle1.forward(30);
turtle1.right(scale);
turtle1.forward(15);
}
// drawing second turtle (orange)
var turtle2 = makeTurtle(mouseX, mouseX);
scale = map(m, 0, mouseX, 20, 250);
turtle2.setColor(color(240, 165, 140, 150));
turtle2.setWeight(0.1);
for (i = 0; i < 100; i++) {
turtle2.penDown();
turtle2.right(60);
turtle2.forward(40);
turtle2.right(scale);
turtle2.forward(5);
}
frameRate(5); // slows down frame rate
}
// turtle graphics implementation for p5.js
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 assignment, I wanted to create a turtle graphics composition that was reminiscent of a spirograph. I really enjoyed playing with these when I was younger, and was constantly excited by what kinds of mandalas would yield from the different tracing tools. This assignment was really fun, especially experimenting with the intricacies of each mark made, playing with transparencies and investigating scale.
Example composition created via changing mouseX positions
For this week’s looking outwards, I chose to discuss Imogen Heap’s Mi.Mu gloves, a tool that gives musicians maximum freedom to improvise and allows simple movements to sculpt music. Mi.Mu Gloves are wireless, sensor-enabled gloves for creating and performing music through movement and gesture. The gloves are a fusion of textiles and electronic sensors. Combined with dedicated gesture detection and mapping software, the gloves offer a new and flexible approach to the control of music and visuals with intuitive human movement. When a hand makes a particular gesture/motion or when you activate a particular button on the glove, the Mi.Mu gloves alter the voice. I found this new tool to be innovative and creatively stimulating, as it pushes the boundaries of music and intertwines technology with music. I believe that these Mi.Mu gloves are a great example of advancing technology for creative/artistic purposes.
Prélude in ACGT by Pierry Jaquillard is a project that converts personal DNA data into into sounds. Jaquillard used his own DNA sequence to convert it into music. I admire this project because it combines biology and music together, two topics that can seem unrelated. It is a new way of expressing something through music, and it can open doors to creative and innovative ideas. Jacquillard used a midi Library for JavaScript to generate the midi signals in the main computer. Then he sent those signals to Ableton Live to play the sounds from webapps on iPads and iPhones. Even other musical elements such as tempo can be controlled on the application. There is no mention of a specific algorithm used with JavaScript. The creator’s artistic sensibilities show in his simple and intuitive design of the app.
Talking about computational music, one of the most hyped music type EDM (electric dance music) is definitely worth mentioning. And Deadmau5 is one of the EDM artists that I love the most. Here’s one of his latest release:
EDM is a music form that’s sythesized in computer using various music generating programs. In these programs, there are many different tools that can generate different sound effects as well as editing existing sound files. For this perticular sound type, there are usually repetitive beats sythesized and played along with back tracks. Often times, vocals are also involved that adds to the richness of the music piece. In Deadmau5’s music, usually there are very long repetitive elements but slowly more and more elements are added along with the change of flow.
Music taste is rather subjective, so what I want to highlight is his workflow. In the foloowing YouTube video, Deadmau5 is streaming his composition on a track. And that’s also what I appreciate about him, which is sharing the working process with his audience. Ableton Live is one of his many weapon in the toolkit that powers his music pieces. As in the video, he’s experimenting with all types of sound and see how they’re mixed in a harmonic style. And the tools are also very powerful of doing all kinds of gestures to the play of sound that makes into a masterpiece.
I also learned about making EDMs in one of the music department courses. And what I appreciate about his ideology about sound is that everyone can make very good music. EDM opens up unlimited possibilities that even if you can’t play any instrument, you can still make a musician.
![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
