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

Looking Outwards-11 Computer Music-Veronica

(Video of performance using MI.MU gloves)

MI.MU gloves are designed by musician and artist, Imogen Heap, as alternatives to instruments during musical performances. Imogen set out to create a better relationship with the music software and hardware that forms her musical toolbox and came across the idea of making music using a pair of musical gloves.

“MI.MU exists to revolutionize the way we make music through movement”

Behind the product is a team of specialist musicians, artists, scientists, and technologists developing cutting-edge wearable technology for the performance and composition of music and specializing in textiles, electronics, sensors, software and, music.

GLOVOLUTIONsmall — Iterations and evolution of glove design

anatomy of a glove tech — Glove design details

Mi. Mu works by capturing movement and hand gestures with sensors and send information wirelessly from the board on the wrists to a computer backstage. The software enables performers to map that data to” musical control signals” and combine different gestures and movements to make more complex controls. Additionally, the gloves can also be programmed to control third-party music production and editing software.

On her product website, it says that “The glove technology evolved in a symbiotic relationship with Imogen’s performances and writing. Real performances drove the development of the gloves, leading to an instrument and controller fit for professional musicians, ready to make complex, beautiful and engaging music.”

(Imogen Heap and a long exposure shot of her using the gloves)

I think the project is really successful at changing music composing into an intuitive and fun process and allowing for a different way of performing music. It also allows performers and artists to experiment with different types of music instruments without having to purchase physical instruments. Dancers and people with disabilities were also able to use these gloves to express themselves through music.

Jenna Kim (Jeeyoon Kim)- Looking Outwards Week 10- Sound Art

How light frequency is translated to sound

Christopher Yamane’s “wassiliscope” is a project in which Yamane developed a telescope that translates light frequencies from the eyes to audible frequencies. I admire this because it is a fresh, original idea of something transparent to a form that you can feel and hear at the same time. I personally like how there is less of subjectivity and abstraction to this sound art because it also involves some concepts from physics. I also admire the form of the wassiliscope because of its simplicity, but translation process from sound to music is not so simple. The wassiliscope analyzes the average frequency of the light waves to the center of the telescope with a camera inside Then, the light waves are sent to the triangle wave oscillator and transfer to the head phones that are attached to the telescope. There is artist’s sensibility to the form of the wassiliscope because he made the wassiliscope look as though the telescope and the headphones are one object. There is no unnaturalness to the form although the headphones are attached to the back of the telescope. Also, the simple white color of “wassiliscope” gives a nice delicate, simple feeling.

URLs:
https://superduperstudio.co/wassiliscope/

christopher yamane turns light into sound with wassiliscope

Kai Zhang-Project-11-Composition

sketch

//Kai Zhang
//Section B
//kaiz1@andrew.cmu.edu
//Project-11


var ttl = []; //turtle array
var strW = 3; //stroke weight of turtles
var num = 20;
var col = 0;



function setup() {
    createCanvas(400, 400);
    background(0);
    strokeJoin(MITER);
    strokeCap(PROJECT);


    for (var i = 0; i < num; i++) {
        ttl.push(makeTurtle(200, 200));
        ttl[i].penDown();
        ttl[i].right(360 / num * i);
    }   
}

function draw() {
        var dire = random(-45, 45);
        var dist = random(0, 2.5);
        if (col < 200) {
            col += random(0, 0.5);
        }
        var rest = random(0, 5);

    for (var i = 0; i < num; i++) {
        ttl[i].setColor(col);
        ttl[i].setWeight(strW);
        ttl[i].forward(dist);
        ttl[i].right(dire);

    }

}


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’ve got inspiration from the Kaleidoscopes feature of the game Monument Valley 2 when you customize all your path and it shows up in a rotational symmetry manner. So in my code, I set the turtle to go from the center of the canvas and to several different directions. All the initial directions are evenly distributed along the 360 degrees. Also, the paths of all turtles are completely identical. As they start walking, I’m assigning random directions and random stepping lengths for the turtles so they’re walking in a crooked style. But because they’re all going for the same paths, the result can be really interesting. I used different numbers of turtles, and the path started off being really dark and slowly turn white, which is an aesthetic choice that adds to the “vibrance“ of the imagery.

3 turtles

4 turtles

6 turtles

8 turtles

20 turtles

Jenny Hu — Project 11: Composition

jenny’s sketch

//Jenny Hu
//Section E
//jjh1@andrew.cmu.edu
//Project 11

var myTurtle;
var startFrame;
var newWeight;
var newColor;
var randWeight;

function setup() {
    createCanvas(400, 400);
    background(250);
    myTurtle = makeTurtle(width / 2, height / 2);
    myTurtle.setColor(color(20));
    myTurtle.penDown();

    resetCanvas();
    frameRate(10);
}

function draw() {
    var step = (frameCount - startFrame)/30.0;
    // timePassed();
    //change the grayness of the turtle
    newColor = random(0 , 70);
    myTurtle.setColor(color(newColor));

    //change the weight of the turtle
    newWeight = random(0,1);
    ink(myTurtle);

    //move my turtle
    myTurtle.forward(step);
    myTurtle.left(16.0);
  
    //stops, so you can admire the cute fingerprint composition
    if (myTurtle.y < 100) {
      myTurtle.penUp();
  }
}

//reset the turtle when you click
function mousePressed(){
     resetCanvas();
}

//reset the turtle
function resetCanvas() {
    background(250);
    startFrame = frameCount;
    myTurtle.penUp();
    myTurtle.goto(width / 2, height / 2);
    myTurtle.penDown();
}

//changes the weight of the turtle to resemble ink
function ink(myTurtle){
  randWeight = random(0 , 2);
  newWeight = newWeight + randWeight;
  myTurtle.setWeight(newWeight);
}

///API Below///


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 do something akin to a ‘computer’s fingerprint’. I was interested to give it the feeling of ink, which makes each print feel unique. Unlike humans where each print is different, a computer is capable of making ‘perfect’ geometries— which makes the spiral feel fitting. Each generation of this spiral is unique though, due to the random generation of both width of each stroke and tone of gray.

Click the mouse anywhere to reset.

Jenna Kim (Jeeyoon Kim) – Project 11 – Composition

jeeyoonk-11

var turtle
var a = 5;

function setup(){
    createCanvas(400,400);
    background(94,69,255);
    frameRate(10);
    turtle = makeTurtle(random(0,width), random(0,height));
    //create geometric shape
}

function draw(){
    //circular geometric shape 
    for (var i = 0; i < 50; i++){
        turtle.setColor(color(243, 231, 177));
        turtle.penDown();
        turtle.setWeight(.2);
        turtle.right(20); //turns 100 degrees every times it loops
        turtle.forward(a);

}
    turtle.left(20);
    a += 0.1; //the length increases
    turtle.penUp();

    if (mouseIsPressed){ //BIRD creating a NEST
    fill(240, 77, 37) //BODY
    ellipse(mouseX + 30, mouseY + 10, 50, 30);
    fill(254, 225, 115); //beak
    triangle(mouseX, mouseY, mouseX-5, mouseY-5, mouseX-20, mouseY+20);
    fill(240, 77, 37) //HEAD
    ellipse(mouseX, mouseY, 20, 20);
    fill(146, 211, 203) //eye
    ellipse(mouseX - 1, mouseY, 5, 5);
    }

}


function mousePressed(){
    turtle = makeTurtle(mouseX, mouseY);
}


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 used turtle to create a nest for each bird. Every time you click on the screen, a nest and a bird will appear. The nest’s size will eventually keep increasing to create a chaos. It was really enjoyable to experimenting with different angles and sizes.

Below are the screenshots of the results:

Victoria Reiter – Looking Outwards 11 – Computer Music

Kling Klang Machine

This week in my Looking Outwards post I am investigating an interactive app created by British electronic pop group Kraftwerk. The app is called “Kling Klang Machine No1”, a reference to the elusive and undisclosed studio where the group produces their music.

Some alterable variables that customize the music produced

The app’s map registers which time zone the user is in, and uses algorithms to make a custom tune based on this location and timezone, meaning that the same song with never be heard at a different time or place. Users can also tweak aspects such as volume, echo, and tune, or even choose a different region in which to listen to a composition.

Example video of “Kling Klang Machine No1”

I think this app is cool because of how specific it is to each region and time. I love travelling hehehe…so it would be cool to have another way to experience different places, by experiencing the different custom music generated there!

Kraftwerk’s website found here, and

Kling Klang Machine details found here.

Jonathan Liang – Looking Outwards – 11

Adrien Kaeser’s Weather Thingy is a custom built sounds controller that modifies the sounds produced by musical instruments based on real-time climate settings. Weather Thingy is composed of two parts: a weather station on a tripod microphone and a custom built controller connected to a weather station. The station has climate sensors like a rain gauge, a wind vane, and a anemometer that assign various parameters received to audio effects. The main goal of Adrien’s work is to offer a new perspective to a replayability of a song. Since the same song with change based on the surrounding climate, it offers an unique experience each time the song is heard.

Weather Thingy – Real time climate sound controller

Emily Zhou –– Composition

tortle

var ttl;

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

function coolShape(ttl) {
    var count = 100;
    for (var i = 0; i < width; i++) {
        ttl.forward(10);
        var mx = map(mouseX, 50, 400, 200, 400);
        ttl.left(mx * 0.01 * sin(radians(i)));
        count += 1;
    }
}

function draw() {
    background("Lavender");
    for (var i = 0; i < 20; i++) {
        ttl = makeTurtle(width / 2, height / 2);
        ttl.left((360 / 20) * i);
        ttl.penDown();
        var R = map(mouseX, 0, width, 200, 255);
        ttl.setColor(color(R, 255, 255));
        ttl.setWeight(3);
        coolShape(ttl);
    }
}

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


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 wanted to use turtle graphics to create an interesting line composition that interacts with the mouse based on shape and colour. I had fun experimenting with slight differences in numerical values that drastically changed the result.

Screenshots of the composition at varying mouse positions:

Looking Outwards – 11

I found this project really interesting because the visual artist, Palmer Eldritch, combined a series of tech-noir chaos, their reactivity, and rotoscoping into his video and audio outputs. The sequences are made possible through the use of Max/Jitter with a bunch of different visual elements that are made by softwares like Ready, After Effects, GForce Suite, 3DSMax/VRay, Sound Forge/Waves, and many others. This work was also possible courtesy of Paul Fennell through his creations made on Max/Jitter. Eldritch made changes and modified an open source code to suit his thoughts and the direction of his project. As a result, many overlays were a result of experimentation with noise patterns and sonifications courtesy of Tomasz Sulej.

Article: by FilipVisnjic, January 3rd, 2017

Judy Li-Project-11-Composition

judyli: Composition Project 11

/*
Judy Li
Section A
judyli@andrew.cmu.edu
Project-11
*/

var ttl1 = [];//turtle 1
var ttl2 = [];//turtle 2
var ttl3 = [];//turtle 3
var ttl4 = [];//turtle 4
var opacity = 255;//starting color

function setup() {
    createCanvas(480, 480);
    background("white");
    strokeJoin(MITER);
    strokeCap(PROJECT);
    //ttl1
    for (var i = 0; i < 10; i++) {
        ttl1.push(makeTurtle(0, 0));
        ttl1[i].penDown();
        ttl1[i].right(36 * i);
    }
    //ttl2
    for (var j = 0; j < 10; j++) {
        ttl2.push(makeTurtle(480, 0));
        ttl2[j].penDown();
        ttl2[j].left(36 * j);
    }
    //ttl3
    for (var k = 0; k < 10; k++) {
        ttl3.push(makeTurtle(0, 480));
        ttl3[k].penDown();
        ttl3[k].right(36 * k);
    }
    //ttl4
    for (var l = 0; l < 10; l++) {
        ttl4.push(makeTurtle(480, 480));
        ttl4[l].penDown();
        ttl4[l].left(36 * l);
    }
}

function draw() {
    var dir = random(15, 90);
    var dist = random(10, 25);
    if (opacity > 100) {
        opacity -= 10;
    }
    else opacity = 205;
    for (var i = 0; i < 10; i++) {
        //1
        ttl1[i].setColor(opacity);
        ttl1[i].setWeight(2);
        ttl1[i].forward(dist);
        ttl1[i].right(dir);
        //2
        ttl2[i].setColor(opacity);
        ttl2[i].setWeight(2);
        ttl2[i].forward(dist);
        ttl2[i].left(dir);
        //3
        ttl3[i].setColor(opacity);
        ttl3[i].setWeight(2);
        ttl3[i].forward(dist);
        ttl3[i].right(dir);
        //4
        ttl4[i].setColor(opacity);
        ttl4[i].setWeight(2);
        ttl4[i].forward(dist);
        ttl4[i].left(dir);
    }
}


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 create a turtle pattern that fills up the background. I made turtles at four different starting points so that the canvas is filled up more quickly and with more depth of color through differences in color as they move about. When I played with different moves and directions, I liked this composition the best because it looks like the way a knit hat is supposed to be made.