Author: Angela Rubin

aerubin-Final Project

KEY – NOTE NAME

A STRING:
1 – A
2 – B
3 – C#
4 – D
5 – E

D STRING:
Q – D
W – E
E – F#
R – G
T – A

G STRING:
A – G
S – A
D – B
F – C
G – D

C STRING:
Z – C
X – D
C – E
V – F
B – G

My final project is a playable viola that creates art in the background based on the notes played and length of the notes played. I drew the viola utilizing arcs, triangles, lines, and other 2D shapes. Then I added sounds to the notes played and ellipses that move with the music.

Each note is connected to a key, that when pressed, plays a note and a visual representation of the sound as a green dot showing the placement of the note on the fingerboard. In addition, there are 20 uniquely colored balls hiding behind the viola that are connected to 20 notes that can be played with the keyboard. Each ball will move at its individual vertical and horizontal velocities when the key is pressed. When the key is lifted, the sound will stop and ball will stop in place. When the performer is finished playing, it will leave a pattern of balls in the background. With the end of each unique composition, the background will look unique, linking each unique piece of music with a unique piece of art.

Functioning Code Showing Moving Ellipses

Note: WordPress does not display the audio correctly, so here is a zip file with the audio files and functioning code. In order to run this code, you access it in the terminal and type “python -m SimpleHTTPServer” and the code will run properly. Above is a screenshot of the completely functioning code.

aerubin_Final_Project

Make sure to turn the volume up!

Angela Rubin – Final Project

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Final Project

//Initial Placement of Balls in Background
var x = 300;
var y = 175;
//Speed of Balls in both x and y directions
var dx = -1;
var dy = 2;

var x1 = 300;
var y1 = 175;
var dx1 = 2;
var dy1 = 1;

var x2 = 300;
var y2 = 175;
var dx2 = -1;
var dy2 = 1;

var x3 = 300;
var y3 = 175;
var dx3 = 2;
var dy3 = -2;

var x4 = 300;
var y4 = 175;
var dx4 = 2;
var dy4 = 3;

var x5 = 300;
var y5 = 175;
var dx5 = -3;
var dy5 = 2;

var x6 = 300;
var y6 = 175;
var dx6 = 3;
var dy6 = -3;

var x7 = 300;
var y7 = 175;
var dx7 = -3;
var dy7 = 4;

var x8 = 300;
var y8 = 175;
var dx8 = 4;
var dy8 = 3;

var x9 = 300;
var y9 = 175;
var dx9 = -4;
var dy9 = 4;

var x10 = 300;
var y10 = 175;
var dx10 = -1;
var dy10 = -2;

var x11 = 300;
var y11 = 175;
var dx11 = -2;
var dy11 = -1;

var x12 = 300;
var y12 = 175;
var dx12 = -2;
var dy12 = -2;

var x13 = 300;
var y13 = 175;
var dx13 = -2;
var dy13 = -3;

var x14 = 300;
var y14 = 175;
var dx14 = -3;
var dy14 = -2;

var x15 = 300;
var y15 = 175;
var dx15 = -3;
var dy15 = -4;

var x16 = 300;
var y16 = 175;
var dx16 = -4;
var dy16 = -3;

var x17 = 300;
var y17 = 175;
var dx17 = -1;
var dy17 = 2;

var x18 = 300;
var y18 = 175;
var dx18 = -2;
var dy18 = 3;

var x19 = 300;
var y19 = 175;
var dx19 = 3;
var dy19 = -2;

//Sound Names
var EonAString;
var DonAString;
var ConAString;
var BonAString;
var AonString;
var AonString2;
var GonDString;
var FonDString;
var EonDString;
var DonString;
var DonString2;
var ConGString;
var BonGString;
var AonGString;
var GonString;
var GonString2;
var FonCString;
var EonCString;
var DonCString;
var ConString;

//Background Pattern Variables
var diameter = 15; // diameter of the circles
var horizSpace = diameter; // horizontal spacing of the circles
var verSpace; // vertical spacing of the circles

function setup() {
    createCanvas(450, 350);
    verSpace = horizSpace * sqrt(0.75);   
}


function preload() {
    //Preloads each sound for each note
    EonAString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/E-A_String.m4a");
    DonAString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/D-A_String.m4a");
    ConAString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/C-A_String.m4a");
    BonAString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/B-A_String.m4a");
    AonString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/A-String.m4a");
    AonString2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/A-String2.m4a");
    GonDString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/G-D_String.m4a");
    FonDString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/F-D_String.m4a");
    EonDString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/E-D_String.m4a");
    DonString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/D-String.m4a");
    DonString2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/D-String2.m4a");
    ConGString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/C-G_String.m4a");
    BonGString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/B-G_String.m4a");
    AonGString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/A-G_String.m4a");
    GonString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/G-String.m4a");
    GonString2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/G-String2.m4a");
    FonCString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/F-C_String.m4a");
    EonCString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/E-C_String.m4a");
    DonCString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/D-C_String.m4a");
    ConString = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/C-String.m4a");
}

function draw() {
    background(255);

    noStroke();
    for(var i = 0; i < 30; i++) {
        if (i%2==1) {var c = -1;}
        if (i%2==0) {c = 0;}
        for(var n = 0; n < 35+c; n++) {
            fill(i*10, n*10, 255-(i*4));
            ellipse(horizSpace*n+(-7.5*c), verSpace*i, diameter, diameter);
        }
    }

    //Drawing the Balls in Background
    fill(248, 179, 147);
    ellipse(x, y, 50, 50);

    fill(239, 117, 129);
    ellipse(x1, y1, 50, 50);

    fill(191, 109, 135);
    ellipse(x2, y2, 50, 50);

    fill(109, 93, 128);
    ellipse(x3, y3, 50, 50);

    fill(53, 94, 128);
    ellipse(x4, y4, 50, 50);

    fill(156, 196, 176);
    ellipse(x5, y5, 50, 50);

    fill(176, 221, 202);
    ellipse(x6, y6, 50, 50);

    fill(218, 237, 197);
    ellipse(x7, y7, 50, 50);

    fill(246, 166, 168);
    ellipse(x8, y8, 50, 50);

    fill(150, 89, 91);
    ellipse(x9, y9, 50, 50);

    fill(163, 128, 129);
    ellipse(x10, y10, 50, 50);

    fill(170, 210, 189);
    ellipse(x11, y11, 50, 50);

    fill(218, 255, 253);
    ellipse(x12, y12, 50, 50);

    fill(208, 163, 171);
    ellipse(x13, y13, 50, 50);

    fill(247, 193, 172);
    ellipse(x14, y14, 50, 50);

    fill(72, 158, 151);
    ellipse(x15, y15, 50, 50);

    fill(235, 180, 166);
    ellipse(x16, y16, 50, 50);

    fill(211, 200, 215);
    ellipse(x17, y17, 50, 50);

    fill(250, 162, 134);
    ellipse(x18, y18, 50, 50);

    fill(179, 179, 163);
    ellipse(x19, y19, 50, 50);

    //Viola Function to Draw Viola
    makeViola();

    //Color of Dots on Fingerboard
    fill(0, 255, 0);
    noStroke();

    //B Natural, A String, KEY = 2
    if (keyIsDown(50)) {
        BonAString.play();
        ellipse(86, (height/2)-6.7, 4, 4);
        y+=dy;
        x+=dx;
        if(y>height-25 || y<25) {
            dy=-dy;
        }
        if(x>width-25 || x<25) {
            dx=-dx;
        }
    }
    else {BonAString.stop();}

    //C#, A String, KEY = 3
    if (keyIsDown(51)) {
        ConAString.play();
        ellipse(105, (height/2)-7, 4, 4);
        y1+=dy1;
        x1+=dx1;
        if(y1>height-25 || y1<25) {
            dy1=-dy1;
        }
        if(x1>width-25 || x1<25) {
            dx1=-dx1;
        }
    }
    else {ConAString.stop();}

    //D Natural, A String, KEY = 4
    if (keyIsDown(52)) {
        DonAString.play();
        ellipse(114, (height/2)-7.3, 4, 4);
        y2+=dy2;
        x2+=dx2;
        if(y2>height-25 || y2<25) {
            dy2=-dy2;
        }
        if(x2>width-25 || x2<25) {
            dx2=-dx2;
        }
    }
    else {DonAString.stop();}

    //E Natural, A String, KEY = 5
    if (keyIsDown(53)) {
        EonAString.play();
        ellipse(130, (height/2)-7.8, 4, 4);
        y3+=dy3;
        x3+=dx3;
        if(y3>height-25 || y3<25) {
            dy3=-dy3;
        }
        if(x3>width-25 || x3<25) {
            dx3=-dx3;
        }
    }
    else {EonAString.stop();}

    //E Natural, D String, KEY = W
    if (keyIsDown(87)) {
        EonDString.play();
        ellipse(86, (height/2)-2.2, 4, 4);
        y4+=dy4;
        x4+=dx4;
        if(y4>height-25 || y4<25) {
            dy4=-dy4;
        }
        if(x4>width-25 || x4<25) {
            dx4=-dx4;
        }
    }
    else {EonDString.stop();}

    //F#, D String, KEY = E
    if (keyIsDown(69)) {
        FonDString.play();
        ellipse(105, (height/2)-2.3, 4, 4);
        y5+=dy5;
        x5+=dx5;
        if(y5>height-25 || y5<25) {
            dy5=-dy5;
        }
        if(x5>width-25 || x5<25) {
            dx5=-dx5;
        }
    }
    else {FonDString.stop();}

    //G Natural, D String, KEY = R
    if (keyIsDown(82)) {
        GonDString.play();
        ellipse(114, (height/2)-2.5, 4, 4);
        y6+=dy6;
        x6+=dx6;
        if(y6>height-25 || y6<25) {
            dy6=-dy6;
        }
        if(x6>width-25 || x6<25) {
            dx6=-dx6;
        }
    }
    else {GonDString.stop();}

    //A Natural, D String, KEY = T
    if (keyIsDown(84)) {
        AonString.play();
        ellipse(130, (height/2)-2.9, 4, 4);
        y7+=dy7;
        x7+=dx7;
        if(y7>height-25 || y7<25) {
            dy7=-dy7;
        }
        if(x7>width-25 || x7<25) {
            dx7=-dx7;
        }
    }
    else {AonString.stop();}

    //A Natural, A String, KEY = 1
    if (keyIsDown(49)) {
        AonString2.play();
        y16+=dy16;
        x16+=dx16;
        if(y16>height-25 || y16<25) {
            dy16=-dy16;
        }
        if(x16>width-25 || x16<25) {
            dx16=-dx16;
        }
    }
    else {AonString2.stop();}


    //A Natural, G String, KEY = S
    if (keyIsDown(83)) {
        AonGString.play();
        ellipse(86, (height/2)+2.2, 4, 4);
        y8+=dy8;
        x8+=dx8;
        if(y8>height-25 || y8<25) {
            dy8=-dy8;
        }
        if(x8>width-25 || x8<25) {
            dx8=-dx8;
        }
    }
    else {AonGString.stop();}


    //B Natural, G String, KEY = D
    if (keyIsDown(68)) {
        BonGString.play();
        ellipse(105, (height/2)+2.3, 4, 4);
        y9+=dy9;
        x9+=dx9;
        if(y9>height-25 || y9<25) {
            dy9=-dy9;
        }
        if(x9>width-25 || x9<25) {
            dx9=-dx9;
        }
    }
    else {BonGString.stop();}

    //C Natural, G String, KEY = F
    if (keyIsDown(70)) {
        ConGString.play();
        ellipse(114, (height/2)+2.5, 4, 4);
        y10+=dy10;
        x10+=dx10;
        if(y10>height-25 || y10<25) {
            dy10=-dy10;
        }
        if(x10>width-25 || x10<25) {
            dx10=-dx10;
        }
    }
    else {ConGString.stop();}

    //D Natural, G String, KEY = G
    if (keyIsDown(71)) {
        DonString.play();
        ellipse(130, (height/2)+2.9, 4, 4);
        y11+=dy11;
        x11+=dx11;
        if(y11>height-25 || y11<25) {
            dy11=-dy11;
        }
        if(x11>width-25 || x11<25) {
            dx11=-dx11;
        }
    }
    else {DonString.stop();}

    //D Natural, D String, KEY = Q
    if (keyIsDown(81)) {
        DonString2.play();
        y17+=dy17;
        x17+=dx17;
        if(y17>height-25 || y17<25) {
            dy17=-dy17;
        }
        if(x17>width-25 || x17<25) {
            dx17=-dx17;
        }
    }
    else {DonString2.stop();}

    //D Natural, C String, KEY = X
    if (keyIsDown(88)) {
        DonCString.play();
        ellipse(86, (height/2)+6.3, 4, 4);
        y12+=dy12;
        x12+=dx12;
        if(y12>height-25 || y12<25) {
            dy12=-dy12;
        }
        if(x12>width-25 || x12<25) {
            dx12=-dx12;
        }
    }
    else {DonCString.stop();}

    //E Natural, C String, KEY = C
    if (keyIsDown(67)) {
        EonCString.play();
        ellipse(105, (height/2)+6.7, 4, 4);
        y13+=dy13;
        x13+=dx13;
        if(y13>height-25 || y13<25) {
            dy13=-dy13;
        }
        if(x13>width-25 || x13<25) {
            dx13=-dx13;
        }
    }
    else {EonCString.stop();}

    //F Natural, C String, KEY = V
    if (keyIsDown(86)) {
        FonCString.play();
        ellipse(114, (height/2)+7, 4, 4);
        y14+=dy14;
        x14+=dx14;
        if(y14>height-25 || y14<25) {
            dy14=-dy14;
        }
        if(x14>width-25 || x14<25) {
            dx14=-dx14;
        }
    }
    else {FonCString.stop();}
    
    //G Natural, C String, KEY = B
    if (keyIsDown(66)) {
        GonString.play();
        ellipse(130, (height/2)+7.5, 4, 4);
        y15+=dy15;
        x15+=dx15;
        if(y15>height-25 || y15<25) {
            dy15=-dy15;
        }
        if(x15>width-25 || x15<25) {
            dx15=-dx15;
        }
    }
    else {GonString.stop();}

    //G Natural, G String, KEY = A
    if (keyIsDown(65)) {
        GonString2.play();
        y18+=dy18;
        x18+=dx18;
        if(y18>height-25 || y18<25) {
            dy18=-dy18;
        }
        if(x18>width-25 || x18<25) {
            dx18=-dx18;
        }
    }
    else {GonString2.stop();}

    //C Natural, C String, KEY = Z
    if (keyIsDown(90)) {
        ConString.play();
        y19+=dy19;
        x19+=dx19;
        if(y19>height-25 || y19<25) {
            dy19=-dy19;
        }
        if(x19>width-25 || x19<25) {
            dx19=-dx19;
        }
    }
    else {ConString.stop();}
}

function makeViola() {
    stroke(255);
    strokeWeight(.4);

    push();
    noStroke();
    strokeWeight(1);
    fill(187, 74, 28);
    //Upper Bout
    arc(205, (height/2)+.5, 100, 120, 1.5, 4.81, CHORD);
    //Lower Bout
    arc(358, (height/2)+.5, 110, 125, 4.6, 8, CHORD);

    quad(210, (height/2)-59, 208, (height/2)+60.5, 255, (height/2)+52, 255, (height/2)-52);

    noFill();
    strokeWeight(4);
    stroke(187, 74, 28);
    //little curve
    arc(254, (height/2)-55, 11, 10, -.2, 2);
    arc(254, (height/2)+55, 11, 10, 4.3, 6.2);

    //Waist of Viola
    arc(285, (height/2)-55, 50, 30, -.2, 3);
    arc(285, (height/2)+55, 50, 30, 3, 6.6);

    //lower bout
    arc(328.5, (height/2)-62, 48, 14, .12, 2.9);
    arc(329, (height/2)+64, 48, 14, 3.3, 6.1);

    fill(187, 74, 28);
    //filling in sparce areas
    quad(252, (height/2)-48, 252, (height/2)+48, 260, (height/2)+51, 260, (height/2)-51);
    quad(260, (height/2)-45, 260, (height/2)+47, 280, (height/2)+38, 280, (height/2)-36);
    quad(279, (height/2)-38, 279, (height/2)+38, 307, (height/2)+44, 306, (height/2)-43);
    quad(305, (height/2)-44, 306, (height/2)+46, 313, (height/2)+52, 313, (height/2)-52);
    quad(312, (height/2)-53, 312, (height/2)+55, 333, (height/2)+53, 333, (height/2)-52);
    quad(332, (height/2)-53, 332, (height/2)+53, 352, (height/2)+58, 352, (height/2)-58);

    //Black Outline of Body
    strokeWeight(1);
    stroke(0);
    noFill();
    arc(205, (height/2)+.5, 100-7, 120-7, 1.5, 4.81);
    arc(358, (height/2)+.5, 110-7, 125-7, 4.6, 8);
    line(209, (height/2)-59+3, 254, (height/2)-52+3);
    line(209, (height/2)+59-3, 254, (height/2)+52-3);
    arc(254, (height/2)-55+1.6, 11, 10, -.2, 1.7);
    arc(254, (height/2)+55, 11, 10, 4.5, 6.2);
    arc(285, (height/2)-54, 50, 30, -.2, 3.1);
    arc(285, (height/2)+54, 50, 30, 3, 6.6);
    arc(328.5, (height/2)-62, 52, 15, .17, 2.88);
    arc(329.5, (height/2)+64-.5, 49, 16, 3.3, 6.05);
    pop();

    //finger board
    fill(0);
    quad(80-10, (height/2)-10, 80-10, (height/2)+10, 250+26, (height/2)+18, 250+26, (height/2)-18);

    //Pegs
    stroke(0);
    quad(38, (height/2)+9, 38+5-1, (height/2)+9, 38+5-1, (height/2)-17, 38, (height/2)-17);
    quad(38+8, (height/2)+9+8, 38+5+8-1, (height/2)+9+8, 38+5+8-1, (height/2)-17+8, 38+8, (height/2)-17+8);
    quad(38+16, (height/2)+9+1, 38+5+16-1, (height/2)+9+1, 38+5+16-1, (height/2)-17+1, 38+16, (height/2)-17+1);
    quad(38+24, (height/2)+9+7, 38+5+24-1, (height/2)+9+7, 38+5+24-1, (height/2)-17+7, 38+24, (height/2)-17+7);

    //Peg Ends
    fill(0);
    arc(40, (height/2)-20+1, 12, 12, 2.5, 6.9, CHORD);
    arc(40+16, (height/2)-20, 12, 12, 2.5, 6.9, CHORD);
    arc(40+8, (height/2)+20-1, 12, 12, 4+3-1.3, 3+.85, CHORD);
    arc(40+24, (height/2)+20, 12, 12, 4+3-1.3, 3+.85, CHORD);

    //Peg Dots
    ellipse(40, (height/2)-26, 2, 2);
    ellipse(40+16, (height/2)-26-1, 2, 2);
    ellipse(40+8, (height/2)+26, 2, 2);
    ellipse(40+24, (height/2)+26+1, 2, 2);

    //Peg Triangles
    triangle(36, (height/2)-13.5, 44, (height/2)-13.5, 40, (height/2)-23);
    triangle(36+16, (height/2)-13.5-1, 44+16, (height/2)-13.5-1, 40+16, (height/2)-23-1);
    triangle(36+8, (height/2)+13.5, 44+8, (height/2)+13.5, 40+8, (height/2)+23);
    triangle(36+24, (height/2)+13.5+1, 44+24, (height/2)+13.5+1, 40+24, (height/2)+23+1);

    stroke(255);
    //peg box
    fill(187, 74, 28);
    quad(70, (height/2)-10, 70, (height/2)+10, 30, (height/2)+7, 30, (height/2)-7);
    stroke(252, 185, 91);

    //Black Section of Peg Box
    fill(0);
    quad(35, (height/2)-3.5, 35, (height/2)+3.5, 70, (height/2)+6.5, 70, (height/2)-6.5);
    line(35, (height/2)-3.5, 70, (height/2)-6.5);
    line(35, (height/2)+3.5, 70, (height/2)+6.5);

    push();
    //String colors in peg box
    stroke(250, 127, 164); //pink
    line(37.5, (height/2)-3, 42.5, (height/2)-3);
    line(37.5, (height/2)-1.5, 42.5, (height/2)-1.5);
    line(37.5, (height/2), 42.5, (height/2));

    stroke(180, 101, 40); //brown
    line(37.5+8, (height/2)-3+3, 42.5+8, (height/2)-3+3);
    line(37.5+8, (height/2)-1.5+3, 42.5+8, (height/2)-1.5+3);
    line(37.5+8, (height/2)+3, 42.5+8, (height/2)+3);

    stroke(255, 0, 0); //red
    line(37.5+16, (height/2)-3-1, 42.5+16, (height/2)-3-1);
    line(37.5+16, (height/2)-1.5-1, 42.5+16, (height/2)-1.5-1);
    line(37.5+16, (height/2)-1, 42.5+16, (height/2)-1);

    stroke(216, 154, 253); //purple
    line(37.5+8+16, (height/2)-3+3+1, 42.5+8+16, (height/2)-3+3+1);
    line(37.5+8+16, (height/2)-1.5+3+1, 42.5+8+16, (height/2)-1.5+3+1);
    line(37.5+8+16, (height/2)+3+1, 42.5+8+16, (height/2)+3+1);
    pop();

    fill(187, 74, 28);
    //Inner Most Scroll Piece
    quad(15, (height/2)-18+1, 15, (height/2), 43-18-3.5, (height/2), 43-18-3.5, (height/2)-18+1);
    quad(15, (height/2)+18-1, 15, (height/2), 43-18-3.5, (height/2), 43-18-3.5, (height/2)+18-1);

    //Middle Scroll Piece
    quad(13-2, (height/2)-13+1, 13-2, (height/2), 43-18+2, (height/2), 43-18+2, (height/2)-16+1);
    quad(13-2, (height/2)+13-1, 13-2, (height/2), 43-18+2, (height/2), 43-18+2, (height/2)+16-1);
    
    //Outer Most Scroll Piece
    quad(14-9, (height/2)-6, 14-9, height/2, 43-10, height/2, 43-10, (height/2)-11);
    quad(14-9, (height/2)+6, 14-9, height/2, 43-10, height/2, 43-10, (height/2)+11);

    //Bridge
    stroke(223, 210, 194);
    strokeWeight(3);
    line(311, (height/2)-16, 311, (height/2)+16);
    stroke(30);
    strokeWeight(1);
    //Tail piece
    fill(0);
    triangle(345, (height/2)-18, 345, (height/2)+18, 410, (height/2));

    //Chin rest
    push();
    rotate(radians(19));
    ellipse(437, (height/2)-118, 40, 60);
    pop();

    push();
    stroke(251, 198, 212);
    strokeWeight(2.5);
    line(86, (height/2)-9.5, 86, (height/2)+9.5);
    line(105, (height/2)-10, 105, (height/2)+10);
    line(114, (height/2)-10.5, 114, (height/2)+10.5);
    line(130, (height/2)-11, 130, (height/2)+11);
    pop();

    //Strings
    stroke(240);
    strokeWeight(.7);
    line(58, (height/2)-4.5, 70, (height/2)-6); //Upper A String
    line(70, (height/2)-6, 311, (height/2)-14); //A String
    line(43, (height/2)-2, 311, (height/2)-5); //D String
    line(51, (height/2)+2, 311, (height/2)+4); //G String
    line(70, (height/2)+5.7, 311, (height/2)+13); //C String
    line(66, (height/2)+4.5, 70, (height/2)+5.5); //Upper C String

    line(311, (height/2)-14, 348, (height/2)-11); //Lower A String
    line(311, (height/2)-5, 348, (height/2)-4); //Lower D String
    line(311, (height/2)+4, 348, (height/2)+3.5); //Lower G String
    line(311, (height/2)+13, 348, (height/2)+11); //Lower C String

    stroke(255, 0, 0); //Red String Ends
    strokeWeight(1.3);
    line(330, (height/2)-12.6, 348, (height/2)-11);
    stroke(11, 85, 25); //Green String Ends
    line(330, (height/2)-4.5, 348, (height/2)-4);
    line(330, (height/2)+3.8, 348, (height/2)+3.5);
    line(330, (height/2)+12, 348, (height/2)+11);

    //Fine Tuner
    strokeWeight(1);
    stroke(255, 206, 79);
    fill(255, 220, 123);
    ellipse(349, (height/2)-11, 4, 4);

    stroke(0);
    strokeWeight(3);
    noFill();
    //Upper F Hole
    arc(296, (height/2)-25, 30, 12, 2.7, 4);
    line(291, (height/2)-31, 315, (height/2)-34.6);
    arc(310, (height/2)-40, 30, 12, 5.7, 7);
    
    //Lower F Hole
    arc(296, (height/2)+25.5, 30, 12, 2.3, 3.65);
    line(291, (height/2)+31, 315, (height/2)+34.6);
    arc(310, (height/2)+40.6, 30, 12, 5.5, 6.8);

    //little lines on F Holes
    strokeWeight(.8);
    line(305, (height/2)-30, 304, (height/2)-35);
    line(305, (height/2)+31, 304, (height/2)+36);

    //Dots on F Holes
    fill(0);
    ellipse(287, (height/2)-21.5, 4.3, 4.3);
    ellipse(287.2, (height/2)+21.9, 4.3, 4.3);

    ellipse(316.5, (height/2)-43.5, 5, 5);
    ellipse(317, (height/2)+44, 5, 5);
}

aerubin-LookingOutwards-12-Section-C

Steve Reich – “Clapping Music”

Steve Reich is a contemporary composer that works with generative music. Generative music is music that is ever-different and changing, and that is created by a system. One of Steve Reich’s most famous pieces is “Clapping Music,” (linked above) where he created a rhythm and overlays the same rhythms on top, but one or more eighth notes apart from the original version. The interest and music is created from how the same rhythms interact with each other depending on how much time is spaced in between the two rhythms. The video above shows the rhythm which can be counted as “one two three, one two, one, one two” in which the commas are counted as rests. When shift is called, the rhythm is shifted one eighth note apart from the original and the distance increases until they are both in unison by the end of the clip.

Francis Dhomont – “Citadel Interieure”

Francis Dhomont is a composer in the late 1900’s that focused on composing music that drew from natural sounds. This technique is called Musique concrète which is music created by everyday sounds such as people talking or drawers closing and any sound that we would not normally associate with music production. Utilizing this technique for composition sometimes leads to the final piece to lack melody, harmony, rhythm, and meter. However, this music can tell stories that cannot be told with typical instruments.
His piece “Citadel Interieure,” (linked above) tells a story of a denied reality in a Subterranean Labyrinth, which would be difficult to create the same effect with standard instruments, even with a full orchestra. His innovative compositions evoke new specific emotions that opened new boundaries in the field of music.

Click here to learn more about Generative Music
Click here to learn more about Musique Concrète

aerubin-Project-12-Proposal

For my final project, I would like to create an interactive viola that allows the user to play the viola digitally. The instrument will be controlled by either the mouse or the keypad, depending on which would make the instrument easier to play and more intuitive for the user.

A Sketch of the Viola User Interface

As a viola performance major, I have pondered how great it would be if I did not have to lug my instrument around or go walk the way to CFA to practice. The solution would be to create a computer program that would allow me to practice in the comfort of my own home without carrying my instrument around. The interface would include a digital depiction of a viola that would show the four strings to the user. Then, when a note is played, the location of that note will change color or “light up” to have a visual representation of where the note would be played on an actual viola.

aerubin-Project-11-Composition

For this project, I was inspired by the intricacies of different snowflakes. Each snowflake is made out of a pattern that repeats throughout the design of the snowflake. I first made an initial leg of a snowflake, and afterward I put them into a for loop to make them repeat in a circular pattern to replicate a snowflake.

One of the Snowflake Designs that inspired my project

Attached are two images that inspired two of my snowflake designs. I am very pleased with the final result and I think I made it just in time for Pittsburgh’s first snow!

Another Snowflake Design that inspired my project

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-11-Playing with Turtles

//initial x and y positions of snowflakes
var x1 = 40;
var y1 = 10;
var x2 = 200;
var y2 = 50;
var x3 = 330;
var y3 = 50;
var x4 = 250;
var y4 = 200;

//velocities for snowflakes
var yvel1 = 1;
var yvel2 = .75;
var yvel3 = 1.5;
var yvel4 = .5;

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

function draw() {
    background(148, 164, 183);
    strokeJoin(MITER);
    strokeCap(PROJECT);

    //first snowflake on left
    var turtle = makeTurtle(x1, y1); //initial position of snowflake
    turtle.penDown();
    turtle.setWeight(1);
    turtle.setColor(255);
    var ed1 = 5;
    var ed2 = ed1 * 2;
    var ed3 = ed1 * 3;

    for (var i = 0; i < 6; i++) {
        turtle.right(25);
        turtle.forward(ed3-ed1);
        turtle.left(115);
        turtle.forward(ed1+(ed1/5)*3);
        turtle.left(40);
        turtle.forward(ed2);
        turtle.right(40);
        turtle.forward(ed1+ed1);
        turtle.right(140);
        turtle.forward(ed2);
        turtle.left(140);
        turtle.forward(ed2-ed1);
        turtle.left(40);
        turtle.forward(ed2-ed1);
        turtle.right(75);
        turtle.forward(ed2+ed1);
        //after tip of snowflake
        turtle.right(105);
        turtle.forward(ed2+ed1);
        turtle.right(75);
        turtle.forward(ed2-ed1);
        turtle.left(35);
        turtle.forward(ed2-ed1);
        turtle.left(140);
        turtle.forward(ed2);
        turtle.right(140);
        turtle.forward(ed1+ed1);
        turtle.right(40);
        turtle.forward(ed2);
        turtle.left(40);
        turtle.forward(ed1+(ed1/5)*3);
        turtle.left(115);
        turtle.forward(ed3-ed1);
        turtle.right(85);
    }
    turtle.penUp();
    turtle.right(60);
    turtle.forward(ed2);
    for(var n = 0; n < 6; n++) {
        turtle.penDown();
        turtle.left(30);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(60);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(120);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(60);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.penUp();
        turtle.right(90);
        turtle.forward(20);
        turtle.right(120);
    }

    //second snowflake in middle
    var turtle2 = makeTurtle(x2, y2); //initial position of snowflake
    turtle2.penDown();
    turtle2.setWeight(2);
    turtle2.setColor(255);
    var s1 = 6;
    var s2 = (s1 * 2)-2;
    var s3 = s1 * 5;

    for(a = 0; a < 4; a++) {
        turtle2.forward(s3);
        turtle2.back(s1);
        turtle2.left(50)
        turtle2.forward(s2)
        turtle2.back(s2);
        turtle2.right(110);
        turtle2.forward(s2);
        turtle2.back(s2);
        turtle2.right(120);
        turtle2.forward(s2+s1/3);
        turtle2.left(130);
        //start of inner diamond shape
        turtle2.forward(s2);
        turtle2.right(116);
        turtle2.forward(s2);
        turtle2.right(55);
        turtle2.forward(s3-s2-s1);
        turtle2.back(s3-s2-s1);
        turtle2.back(s3);
        turtle2.forward(s1);
        turtle2.left(130);
        turtle2.forward(s2);
        turtle2.back(s2);
        turtle2.left(100);
        turtle2.forward(s2);
        turtle2.back(s2);
        turtle2.left(130);
        turtle2.forward(s1);
        turtle2.right(130);
        turtle2.forward(s2+s1/2);
        turtle2.back(s2+s1/2);
        turtle2.right(100);
        turtle2.forward(s2+s1/2);
        turtle2.back(s2+s1/2);
        turtle2.right(130);
        turtle2.forward(s2+s2/1.3);
        turtle2.left(120);
        turtle2.forward(s2);
        turtle2.right(110);
        turtle2.forward(s2);
        turtle2.right(55);
        turtle2.forward(s2+s1/.8);
    }

    //third snowflake right
    var turtle3 = makeTurtle(x3, y3); //initial position of snowflake
    turtle3.setWeight(1);
    turtle3.setColor(255);

    var w1 = 5;
    var w2 = w1*2;
    var w3 = w1*7;
    var w4 = w1*3;
    var w5 = w1*4;
    var w6 = w1*8;
    var w7 = w1*6;

    for (m = 0; m < 6; m++) {
        turtle3.penUp();
        turtle3.left(180);
        turtle3.forward(w6);
        turtle3.right(45); //changes closeness of petals
        turtle3.penDown();
        turtle3.forward(w2);
        turtle3.right(90);
        turtle3.forward(w2);
        turtle3.left(110);
        turtle3.forward(w4);
        turtle3.right(65);
        //tip of snowflake
        turtle3.forward(w5);
        turtle3.right(90);
        turtle3.forward(w5);
        turtle3.right(60);
        turtle3.forward(w4);
        turtle3.penUp();
        turtle3.forward(w6);
    }
    //inner diamonds 
    turtle3.left(60);
    turtle3.forward(w1);
    turtle3.right(48);
    for(var q = 0; q < 6; q++) {
        turtle3.penDown();   
        turtle3.forward(w7);
        turtle3.left(50);
        turtle3.forward(w1);
        turtle3.left(90);
        turtle3.forward(w1);
        turtle3.left(53);
        turtle3.forward(w7);
        turtle3.penUp();
        turtle3.forward(w2+w1);
        turtle3.left(120);
        turtle3.forward(w2);
        turtle3.right(11);
    }

    //fourth turtle (smaller version of first snowflake)
    var turtle = makeTurtle(x4, y4); //initial position of snowflake
    turtle.penDown();
    turtle.setWeight(1);
    turtle.setColor(255);
    var ed1 = 4;
    var ed2 = ed1 * 2;
    var ed3 = ed1 * 3;

    for (var i = 0; i < 6; i++) {
        turtle.right(25);
        turtle.forward(ed3-ed1);
        turtle.left(115);
        turtle.forward(ed1+(ed1/5)*3);
        turtle.left(40);
        turtle.forward(ed2);
        turtle.right(40);
        turtle.forward(ed1+ed1);
        turtle.right(140);
        turtle.forward(ed2);
        turtle.left(140);
        turtle.forward(ed2-ed1);
        turtle.left(40);
        turtle.forward(ed2-ed1);
        turtle.right(75);
        turtle.forward(ed2+ed1);
        //after tip of snowflake
        turtle.right(105);
        turtle.forward(ed2+ed1);
        turtle.right(75);
        turtle.forward(ed2-ed1);
        turtle.left(35);
        turtle.forward(ed2-ed1);
        turtle.left(140);
        turtle.forward(ed2);
        turtle.right(140);
        turtle.forward(ed1+ed1);
        turtle.right(40);
        turtle.forward(ed2);
        turtle.left(40);
        turtle.forward(ed1+(ed1/5)*3);
        turtle.left(115);
        turtle.forward(ed3-ed1);
        turtle.right(85);
    }
    turtle.penUp();
    turtle.right(65);
    turtle.forward(ed2+2);

    //inner part of snowflake
    for(var n = 0; n < 6; n++) {
        turtle.penDown();
        turtle.left(30);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(60);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(120);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.right(60);
        turtle.forward(ed2-(ed1/5)*2);
        turtle.penUp();
        turtle.right(90);
        turtle.forward(15);
        turtle.right(120);
    }

    //make snowflake 1 fall at rate of yvel1
    y1+=yvel1;

    //if snowflake falls beyond canvas, start again at the top
    if (y1>height+40) {
        y1 = 0;
    }

    //make snowflake 2 fall at rate of yvel2
    y2+=yvel2;

    //if snowflake falls beyond canvas, start again at the top
    if (y2>height+40) {
        y2 = 0;
    }

    //make snowflake 3 fall at rate of yvel3
    y3+=yvel3;

    //if snowflake falls beyond canvas, start again at the top
    if (y3>height+40) {
        y3 = 0;
    }

    //make snowflake 4 fall at rate of yvel4
    y4+=yvel4;

    //if snowflake falls beyond canvas, start again at the top
    if (y4>height+40) {
        y4 = 0;
    }

    //make the snow covered ground
    fill(255);
    ellipse(width/2, 400, 500, 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;
}

aerubin-LookingOutwards-11-Section-C

A very interesting new instrument that is generated computationally is called the dub-step board. This is a board with buttons that light up that are placed in rows and columns. Each button is linked to a different sound, song, or beat that is pre-programed with computer software. As a result of its preprogramed nature, it is an instrument of infinite possibilities that can feature live and unique performances. Many of the videos and performances done utilizing this board mix different songs and beats together to make a piece of music.

I really admire the versatility of the board and how user friendly it is. Many of the antiquated instruments that are in the standard orchestra only have specific pitches for strings and can only perform a specific group of sounds (such as the sound of a piano). The dub-step board allows the performer to play different sounds from diverse instruments and even do a drum beat at the same time all in the reach of one’s two hands. As it is personable, one can program a certain group of pitches in the reach of their own hand, as each individual has different sized hands. One of the many challenges standard orchestral instrumentalist’s face is the ability to reach the notes with their own hand, especially for those who have smaller hands that play larger instruments (such as the double bass or piano). Although the dub-step board will probably never solo with the Berlin Philharmonic, it is definitely an innovative devise that combines both music and technology into a user friendly instrument.

Click to learn more about Dubstep

aerubin-Project-10-Landscape

Van Gogh Starry Night

I was inspired by Van Gogh’s Starry Night painting. I thought it would be interesting to see what his painting would look like if it was animated, since he painted a sky with wind that was painted with the intention of motion. I made each aspect of the painting into different functions, so they would be easier to place when each part was complete. I utilized many for loops in order to achieve his brush stroke affect. All in all, I think my code provides insight into what the wind in his painting would look like if it could be animated.

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-10-Generative Landscape

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

function draw() {
    background(73, 112, 137);
    //draw funtions, in order of background to foreground
    sky();
    push();
    stars();
    pop();
    push();
    translate(-180, -170);
    stars();
    pop();
    push();
    translate(-270, -20);
    stars();
    pop();
    push();
    wind();
    pop();
    push();
    translate(-300, 100);
    wind();
    pop();
    push();
    translate(-600, -100);
    wind();
    pop();
    push();
    translate(-900, 50);
    wind();
    pop();
    push();
    translate(-1200, -50);
    wind();
    pop();
    push();
    translate(-1500, 0);
    wind();
    pop();
    push();
    translate(-1800, 100);
    wind();
    pop();
    push();
    translate(-2100, -160);
    wind();
    pop();
    push();
    translate(-2500, -100);
    wind();
    pop();
    push();
    translate(-2900, 50);
    wind();
    pop();
    push();
    translate(-3200, -50);
    wind();
    pop();
    push();
    translate(-3500, 0);
    wind();
    pop();
    push();
    translate(-3900, 100);
    wind();
    pop();
    landscape();
    tree();
    
}
    //draws the tree in the foreground
function tree() {
    stroke(29, 47, 41);
    strokeWeight(2);
    fill(40, 32, 28);
    triangle(100, 200, 95, height, 105, height);
    triangle(100+5, 200-20, 95-6, height, 105-6, height);
    triangle(100-2, 200-40, 95+5, height, 105+5, height);
    triangle(100-7, 200+30, 95-3, height, 105-3, height);
    triangle(100+9, 200-10, 95+2, height, 105+2, height);
    triangle(100+3, 200-100, 95+4, height, 105+4, height);
    triangle(100-2, 200-80, 95-2, height, 105-2, height);
    triangle(100-2, 200-140, 95+6, height, 105+6, height);
    triangle(100+5, 200-120, 95-4, height, 105-4, height);
    triangle(100+22, 200+10, 95+15, height, 105+15, height);
    triangle(100+20, 200+30, 95+20, height, 105+20, height);
    triangle(100+14, 200, 95+14, height, 105+14, height);
    triangle(100-17, 200-30, 95, height, 105, height);
    triangle(100+18, 200+60, 95+20, height, 105+20, height);
}
    //draws the landscape of ellipses
function landscape() {
    noStroke();
    push();
    fill(28, 27, 29);
    rotate(radians(-20));
    ellipse(300+30, 310+50, 130, 50);
    pop();
    for(var b = 0; b < 10; b++) {
        fill(45, 58-b*7, 115-b*9);
        ellipse(10+b*60, 320-b*4, 100, 100+b*6);
    }

}

    //draws the dotted lines of the sky
function sky() {
    strokeWeight(6);
    for(var n = 0; n < 20; n++) {
        for(var i = 0; i < 40;i++) {
            stroke(178, 238, 237);
            line(0+(i*20), 3+(n*15), 10+(i*20), 0+(n*15));
        }
    }
    for(var n = 0; n < 20; n++) {
        for(var i = 0; i < 40;i++) {
            stroke(128, 194, 236);
            line(7+(i*20), 4+(n*15), 17+(i*20), 6+(n*15));
        }
    }
    for(var n = 0; n < 20; n++) {
        for(var i = 0; i < 40;i++) {
            stroke(118, 161, 169);
            line(4+(i*20), 2+(n*15), 14+(i*20), 2+(n*15));
        }
    }
    for(var n = 0; n < 18; n++) {
        for(var i = 0; i < 40;i++) {
            stroke(146, 169, 217);
            line(8+(i*20), 7+(n*15), 18+(i*20), 7+(n*15));
        }
    }
    for(var n = 0; n < 20; n++) {
        for(var i = 0; i < 40;i++) {
            stroke(103, 138, 167);
            line(0+(i*20), 10+(n*15), 10+(i*20), 10+(n*15));
        }
    }
    for(var n = 0; n < 15; n++) {
        for(var i = 0; i < 40; i++) {
            stroke(44, 67, 142);
            line(5+(i*20), 7.5+(n*15), 15+(i*20), 8+(n*15));
        }
    }
    
    for(var n = 0; n < 17; n++) {
        for(var i = 0; i < 40;i++) {
            stroke(54, 80, 164);
            line(10+(i*20), 3+(n*15), 20+(i*20), 2+(n*15));
        }
    }

    for(var n = 0; n < 10; n++) {
        for(var i = 0; i < 40; i++) {
            stroke(37, 48, 84);
            line((i*20), 4+(n*15), 10+(i*20), (n*15));
        }
    }
    for(var n = 0; n < 10; n++) {
        for(var i = 0; i < 40; i++) {
            stroke(46, 60, 121);
            line(4+(i*15), 2+(n*15), 14+(i*15), 4+(n*15));
        }
    }
    for(var n = 0; n < 5; n++) {
        for(var i = 0; i < 40; i++) {
            stroke(2, 38, 95);
            line(3+(i*15), 15+(n*15), 13+(i*15), 10+(n*15));
        }
    }
    strokeWeight(3);
    for(var n = 0; n < 20; n++) {
        for(var i = 0; i < 40; i++) {
            stroke(73, 112, 137);
            line(7+(i*15), 10+(n*10), 16+(i*15), 12+(n*10));
        }
    }

    //sun
    push();
    translate(400, 57)
    for(var i = 0; i < 30; i++) {
        stroke(199, 198, 129);
        rotate(.5);
            for(var n = 0; n < 4; n++) {
                line(25+(i*.1), 0+(n*10), 30+(i*.1), 0+(n*10));
        }
    }
    pop();

    noStroke();
    fill(180, 157, 61);
    arc(400, 55, 50, 50, HALF_PI, PI+HALF_PI);
}

    //draws the moving wind
function wind() {
    translate(millis()/70, 0); //rate at which wind moves
    strokeWeight(4);
    for(var n = 0; n < 5; n++) {
        for(var i = 0; i < 10; i++) {
            stroke(255);
            line(10+(i*20), 200-100+(n*10)+i, 20+(i*20), 200-100+(n*10)+i);
        }
    }
    for(var n = 0; n < 5; n++) {
        for(var i = 0; i < 10; i++) {
            stroke(105, 154, 201);
            line(7+(i*20), 203-100+(n*10)+i, 17+(i*20), 203-100+(n*10)+i);
        }
    }
    for(var n = 0; n < 5; n++) {
        for(var i = 0; i < 10; i++) {
            stroke(146, 171, 238);
            line(15+(i*20), 206-100+(n*10)+i, 25+(i*20), 206-100+(n*10)+i);
        }
    }
    for(var n = 0; n < 5; n++) {
        for(var i = 0; i < 10; i++) {
            stroke(29, 66, 124);
            line(20+(i*20), 200-100+(n*12)+i, 30+(i*20), 200-100+(n*12)+i);
        }
    }

    //upper spiral
    push();
    translate(220, 190);
    for(var i = 0; i < 12; i++) {
        stroke(255);
        rotate(-.25);
            for(var n = 0; n < 5; n++) {
                line(20+(i*.3), 30+(n*12), 30+(i*.3), 30+(n*12));
        }
    }
    pop();

    push();
    translate(220, 190);
    for(var i = 0; i < 12; i++) {
        stroke(105, 154, 201);
        rotate(-.25);
            for(var n = 0; n < 5; n++) {
                line(16+(i*.3), 33+(n*12), 26+(i*.3), 33+(n*12));
        }
    }
    pop();

    push();
    translate(220, 190);
    for(var i = 0; i < 12; i++) {
        stroke(146, 171, 238)
        rotate(-.25);
            for(var n = 0; n < 5; n++) {
                line(22+(i*.3), 25+(n*12), 32+(i*.3), 25+(n*12));
        }
    }
    pop();

    push();
    translate(220, 190);
    for(var i = 0; i < 12; i++) {
        stroke(29, 66, 124);
        rotate(-.25);
            for(var n = 0; n < 5; n++) {
                line(24+(i*.3), 32+(n*12), 34+(i*.3), 32+(n*12));
        }
    }
    pop();




    //lower spiral
    push();
    translate(280, 220);
    for(var i = 0; i < 13; i++) {
        stroke(255);
        rotate(.25);
            for(var n = 0; n < 5; n++) {
                line(20+(i*.4), 30+(n*12), 30+(i*.4), 30+(n*12));
        }
    }
    pop();

    push();
    translate(280, 220);
    for(var i = 0; i < 13; i++) {
        stroke(105, 154, 201);
        rotate(.25);
            for(var n = 0; n < 5; n++) {
                line(23+(i*.4), 33+(n*12), 33+(i*.4), 33+(n*12));
        }
    }
    pop();

    push();
    translate(280, 220);
    for(var i = 0; i < 12; i++) {
        stroke(146, 171, 238);
        rotate(.25);
            for(var n = 0; n < 5; n++) {
                line(16+(i*.4), 27+(n*12), 26+(i*.4), 27+(n*12));
        }
    }
    pop();

    push();
    translate(280, 220);
    for(var i = 0; i < 13; i++) {
        stroke(29, 66, 124);
        rotate(.25);
            for(var n = 0; n < 5; n++) {
                line(25+(i*.4), 23+(n*12), 35+(i*.4), 23+(n*12));
        }
    }
    pop();

}

    //draws the starts in the background
function stars() {
    translate(350, 220);
    push();
    for(var i = 0; i < 30; i++) {
        stroke(255);
        rotate(.25);
            for(var n = 0; n < 4; n++) {
                line(25+(i*.1), 0+(n*10), 30+(i*.1), 0+(n*10));
        }
    }
    pop(); 
    //draws the center of stars (yellow) 
    noStroke();
    fill(250, 226, 140);
    ellipse(0, 0, 40, 40);
}

aerubin-LookingOutwards-10-Section-C

One of Claudia Hart’s many Installations featuring “The Dolls House”

Claudia Hart is a computational fine artist that turns photographs into digital moving art. Originally from New York, New York, she attended school at New York University earning a BA in art history in 1978. She then studied architecture at the Columbia University Graduate School of Architecture and earned her MS is 1984. After exhibiting with the Pat Hearn Gallery, she received an NEA Fellowship in 1989 and moved her practice to Europe where she spent ten years and received many awards and fellowships such as the Kunstfond Bonn, the Stiftung Luftbruekendank Grant, and the Arts International Foundation Grant.

One of her many projects that I found notable portrayed one of her major themes: the blend of technology and nature. The piece is titled “Noh-timeGarden” and it is the third in a series of instillations. These works feature two side by side screens that portray nature in the form of animation. In this particular piece, she portrays a garden from two different points of views that are moving towards one another. Utilizing algorithms and a computer, she is able to digitize nature realistically enough that it appears three dimensional, although it still has the smoothness and perfection of being computationally rendered – seen in the smooth ground and perfectly green pointed leaves. I really admire her ability to make a social statement of nature and technology through her art.

More about “The Doll House”

More about Claudia Hart

aerubin-Project-09-Computational Portrait

Combination of Both Large and Small Squares

For this project, I selected an image that describes my passion for music and playing the viola. The portrait created from the code can be altered depending on where the mouse is located as the picture is being drawn one square at a time. The placement of the mouse determines the size of the squares. Pictured above, this is what occurs when both large and small squares are utilized.

Small Squares

Pictured directly above is when only small squares are utilized. This can be drawn by putting the mouse in the upper left hand corner.
Pictured below is when only large squares are used. This can be drawn by putting the mouse in the lower right hand corner.

Large Squares

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-09-Computational Portrait

var hiddenImage;

function preload() {
    var myImageURL = "https://i.imgur.com/7jZWZyX.jpg";
    hiddenImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(338, 450);
    background(255);
    hiddenImage.loadPixels();
    frameRate(100);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var ColXY = hiddenImage.get(ix, iy);

    noStroke();
    fill(ColXY);
    //if the mouse is in the upper half of the canvas, make 2x2 squares
    if(mouseY<height/2) {
        rectMode(CENTER);
        rect(px, py, 2, 2); 
    }
    //if the mouse is on the left side of the canvas, make 4X4 squares
    if(mouseX<width/2) {
        rectMode(CENTER);
        rect(px, py, 4, 4)
    }
    //if the mouse is on the right side of the canvas, make 8x8 squares
    if (mouseX>width/2) {
        rectMode(CENTER);
        rect(px, py, 8, 8);
    }
    //if the mouse is in the lower half of the canvas, make 12x12 squares
    if (mouseY>height/2) {
        rectMode(CENTER);
        rect(px, py, 12, 12);
    }
}

aerubin-LookingOutwards-09-Section-C

Anna Boyle wrote about the Flow Machines Project for her Week 4 Looking Outwards post. This project was designed to have a computer program compose music in the style of a specific composer. The video Anna provided was a computer composed piece in the style of the Beatles. She writes about the mathematical algorithms utilized to create sequences that then are combined to create a piece.

Although the melodies are composed utilizing this algorithm, there are still aspects of the piece that are created with help from human intelligence. The harmonization is all done by people as chord progressions that make musical sense are difficult to accomplish because the melodic line effects the sound of the chordal progression. In addition, the words were composed by humans as the syllables of the words must match the music and make cohesive sense. So although the melodic line is computer generated, many other aspects of the piece are still composed by humans.

Link to Anna’s Blog Post

aerubin-LookingOutwards-08-Section-C

Ben Rubin is a media artist currently based in New York City. He received a B.A. from Brown University and an M.S. afterwards from the MIT Media Lab. His artwork is displayed all around the world including the San Jose Museum of Art, the Reina Sofia Museum in Madrid, and the Fondation Cartier pour l’art contemporain in Paris. One of his most recent creations is the Shakespeare Machine for the Public Theater in New York which displays text on a chandeliered of quotes and adjectives Shakespeare wrote. Currently, he is a professor at the Bard MFA program and at the Yale School of Art.

Shakespeare Machine

Mr. Rubin gave a talk at the EYEO Festival in 2013 about his projects and inspiration. He began his talk by speaking about the importance of words and language in our society. He believes language is able to “write, transmit, interpret, regard, understand, perform, analyze, receive, and read,” and he desires these attributes in his artwork. This is why the major majority of his works all feature words. His first major project was inspired by the first text display ever in New York City. He implemented the conveyor belt design of horizontal words on an elevator shaft. This work would read the recent books checkout in a library, but would only show the word as the elevator was moving.

Elevator at Minneapolis Central Library

Another project he spoke about was the time when he worked closely with Steve Reich, one of the most innovative and well know of the living contemporary composers. Together, they made a program that translated works into syllabic rhythms that can be given to percussionists to perform. Steve Reich then added music on top of this to create a vocal composition accompanied by percussion that emulated the speech in drums. It is amazing how words can be so impactful in artwork, very similar to many of the beliefs of choral music that tells a story with words and music instead of just the notes. This is in correlation with artwork as he utilizes words and art to evoke a much deeper emotion than when they are separate.

Ben Rubin and Steve Reich’s Project

http://eyeofestival.com/2013/speaker/ben-rubin/