Caroline Song – Final Project

sketch

var color1; 
var color2;
var cSharp4;
var d4;
var dSharp4;
var e4;
var f4;
var fSharp4;
var g4;
var gSharp4;
var a5;
var aSharp5;
var b5;
var c5;
var cSharp5;
var d5;
var dSharp5;
var e5;

function preload() {
    //call loadSound() for all media files here
    cSharp4 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/csharp.m4a");
    d4 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/d.m4a");
    dSharp4 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/dsharp.m4a");
    e4 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/e-1.m4a");
    f4 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/f.m4a");
    fSharp4 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/fsharp.m4a");
    g4 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/g.m4a");
    gSharp4 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/gsharp.m4a");
    a5 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/a.m4a");
    aSharp5 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/asharp.m4a");
    b5 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/b.m4a");
    c5 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/c.m4a");
    cSharp5 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/csharp2.m4a");
    d5 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/d2.m4a");
    dSharp5 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/dsharp2.m4a");
    e5 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/e2.m4a");
}

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

    //background color
    color1 = color(255, 248, 120);
    color2 = color(235, 101, 52);
    setGradient(color1, color2);

}

function draw() {
        //draw the piano
        drawPiano();

}

function setGradient(c1, c2) {
    //Creating red to yellow gradient
    for(var i = 0; i <= height/2; i++) {
      var x1 = map(i, 0, height/2, 0, 1);
      var c3 = lerpColor(color1, color2, x1);
      stroke(c3);
      line(0, i, width, i);
    }

}

function drawPiano() {
    //set stroke weight of piano
    stroke(0)
    strokeWeight(2);
    // draw white keys
    for (i = 0; i < width; i++) {
        fill(255);
        rect(0 + i * 70, 150, 70, 250);

    }
    // draw black keys
    for (i = 0; i < 2; i++) {
        fill(0);
        rect(-15 + 70 * i, 150, 30, 150);
        rect(475 + 70 * i, 150, 30, 150);
    }

    for(i = 0; i < 3; i++){
        fill(0);
        rect(195 + 70 * i, 150, 30, 150);
    }

}

function mousePressed() {
    //let each white key play a different whole note and display the note it's playing
    if (mouseX > 10 & mouseX < 60 && mouseY > 150 && mouseY < height) {
        d4.play();
        textSize(50);
        textAlign(CENTER);
        text('D4', width/2, height/3);
        fill(0);

    }

    if (mouseX > 80 & mouseX < 140 && mouseY > 150 && mouseY < height) {
        e4.play();
        textSize(50);
        textAlign(CENTER);
        text('E4', width/2, height/3);
        fill(0);
    }

    if (mouseX > 140 & mouseX < 200 && mouseY > 150 && mouseY < height) {
        f4.play();
        textSize(50);
        textAlign(CENTER);
        text('F4', width/2, height/3);
        fill(0);
    }

    if (mouseX > 220 & mouseX < 270 && mouseY > 150 && mouseY < height) {
        g4.play();
        textSize(50);
        textAlign(CENTER);
        text('G4', width/2, height/3);
        fill(0);
    }

    if (mouseX > 290 & mouseX < 340 && mouseY > 150 && mouseY < height) {
        a5.play();
        textSize(50);
        textAlign(CENTER);
        text('A5', width/2, height/3);
        fill(0);
    }

    if (mouseX > 360 & mouseX < 420 && mouseY > 150 && mouseY < height) {
        b5.play();
        textSize(50);
        textAlign(CENTER);
        text('B5', width/2, height/3);
        fill(0);
    }

    if (mouseX > 420 & mouseX < 480 && mouseY > 150 && mouseY < height) {
        c5.play();
        textSize(50);
        textAlign(CENTER);
        text('C5', width/2, height/3);
        fill(0);
    }

    if (mouseX > 500 & mouseX < 550 && mouseY > 150 && mouseY < height) {
        d5.play();
        textSize(50);
        textAlign(CENTER);
        text('D5', width/2, height/3);
        fill(0);
    }

    if (mouseX > 570 & mouseX < width && mouseY > 150 && mouseY < height) {
        e5.play();
        textSize(50);
        textAlign(CENTER);
        text('E5', width/2, height/3);
        fill(0);
    }

    //let each black key play a different sharp/flat note and display the note it's playing
    if (mouseX > 0 & mouseX < 20 && mouseY > 150 && mouseY < 300) {
        cSharp4.play();
        textSize(50);
        textAlign(CENTER);
        text('C#4', width/2, height/3);
        fill(0);
    }

    if (mouseX > 50 & mouseX < 90 && mouseY > 150 && mouseY < 300) {
        dSharp4.play();
        textSize(50);
        textAlign(CENTER);
        text('D#4', width/2, height/3);
        fill(0);
    }

    if (mouseX > 190 & mouseX < 230 && mouseY > 150 && mouseY < 300) {
        fSharp4.play();
        textSize(50);
        textAlign(CENTER);
        text('F#4', width/2, height/3);
        fill(0);
    }

    if (mouseX > 260 & mouseX < 300 && mouseY > 150 && mouseY < 300) {
        gSharp4.play();
        textSize(50);
        textAlign(CENTER);
        text('G#4', width/2, height/3);
        fill(0);
    }

    if (mouseX > 330 & mouseX < 370 && mouseY > 150 && mouseY < 300) {
        aSharp5.play();
        textSize(50);
        textAlign(CENTER);
        text('A#5', width/2, height/3);
        fill(0);
    }

    if (mouseX > 480 & mouseX < 510 && mouseY > 150 && mouseY < 300) {
        cSharp5.play();
        textSize(50);
        textAlign(CENTER);
        text('C#5', width/2, height/3);
        fill(0);
    }

    if (mouseX > 540 & mouseX < 580 && mouseY > 150 && mouseY < 300) {
        dSharp5.play();        
        textSize(50);
        textAlign(CENTER);
        text('D#5', width/2, height/3);
        fill(0);
    }

}

function mouseReleased() {
    //if mouse is released, the text disappears
    color1 = color(255, 248, 120);
    color2 = color(235, 101, 52);
    setGradient(color1, color2);
}

For my final project, I created an interactive piano, with the intention of having children who are just starting to learn how to play the piano use this program as sort of a beginners trial. When pressing on a certain key, the name of that key lights up in the middle of the canvas, with the purpose of having users understand the name of the key while playing around with the piano and learning the actual names of the keys as well.