Author: NatalieKS

While this project was stressful, it was really fun to be able to put something together using things I had learned this semester. One of my goals was to be able to create a small, fun game, and I’m proud to say that I have accomplished that goal. I wanted to create something clean, almost child-like in terms of visuals, and I wanted to employ a variety of instruments for the various sounds. One thing I wish I knew how to do was adjust the volume of each sound; some of them are louder than others, and I would’ve liked them all to be the same volume. Even so, it was cool to be able to create something a bit more advanced (as opposed to a still image) and to create an actual game from scratch. I hope you have as much fun playing the game and discovering the different sounds as I had putting them all together!

~

My project is a sound-based game, so please make sure your sound is on!

How to Play:

Press any key to begin, and continue pressing keys (the ones with letters on them) to play the game. You have 15 seconds to create a musical composition, and then judges will judge you. Have fun!

nksFinal

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Final Project

//indicate when the game starts
var startGame;
//keep track of how many seconds have passed since
//the game started
var secondsPassed;
//keep track of how many times the key is pressed
var count = 0;
//indicate whether the game has started or not
var isGamePlayed = false;
//indicate whether to display the end message
var isEndMessage = false;
//use for probability of the faces
var r;
//x position of the faces
var x;
//y position of the faces
var y;
//position of the note
var noteX;
//x position of the notes
var noteXPos = [];
//y position of the notes
var noteYPos = [];

//I tried to avoid having too many
//characters on one line,
//but I didn't want to break the link into
//two separate lines
function preload() {
    boomcrash = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/boomcrash.wav");
    snare = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/snare.wav");
    acousticKick = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/acousticKick.wav");
    drumstick = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/drumstick.wav");
    rattleDrum2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/rattleDrum2.wav");
    smallHighHat = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/small-highhat.wav");
    smallCymbal = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/smallCymbal.wav");
    deepCymbal = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/deepCymbal.wav");
    highStrings = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/highStrings.wav");
    lowStrings = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/lowString2.wav");
    synth1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/synth1.wav");
    synth2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/synth2.wav");
    synth3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/synth3.wav");
    bassStrings = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/bassStrings.wav");
    highStrings2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/highStrings2.wav");
    pianoDo = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/pianoDo.wav");
    pianoRe = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/pianoRe.wav");
    pianoMi = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/pianoMi.wav");
    pianoFa = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/pianoFa.wav");
    pianoSo = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/pianoSo.wav");
    pianoLa = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/pianoLa.wav");
    pianoTi = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/pianoTi.wav");
    pianoOctave = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/pianoHighDo.wav");
    frenchhorn1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/frenchhorn1.wav");
    frenchhorn2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/frenchhorn2.wav");
    frenchhorn3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2017/12/frenchhorn3.wav");
}

function setup() {
    createCanvas(480, 480);
    startGame = second();
    r = floor(random(1, 10));
    frameRate(10);
//set the starting position of the note
    noteX = 640;
}

function draw() {
    background(236, 101, 114);
    scale(0.75, 0.75);
    noStroke();
//leftmost judge
    judge1();
//center judge
    judge2();
//rightmost judge
    judge3();
//display the staff and moving notes
    musicNotes();
//if the game has started, keep track of how
//many seconds have passed!
    if (isGamePlayed == true) {
    //Time when the game ends
        e = new Date();
        print(e.getTime());
        secondsPassed = e/1000 - d/1000;
    //display the seconds passed as a timer
        textSize(50);
        text(nf(secondsPassed, 2, 1), 260, 50);
    }
//if 15 seconds have passed since the game started,
//display end message
    if (secondsPassed >= 15.0) {
        isGamePlayed = false;
        isEndMessage = true;
        endMessage();
    }
//draw the notes
    for(var i = 0; i < noteXPos.length; i++) {
        noFill();
        stroke(0);
        strokeWeight(4);
        if (isGamePlayed == true) {
            ellipse(noteXPos[i], noteYPos[i], 15, 10);
        //make them move across the screen
            noteXPos[i] -= 8;
        }
    }
//if the game hasn't started, display the start message
    if (isGamePlayed == false & isEndMessage == false) {
        startMessage();
    }
}

//message before the game starts
function startMessage() {
    noStroke();
    fill(236, 198, 21);
    rect(65, 30, 500, 170, 20);
    fill(255);
    rect(75, 30, 500, 160, 20);
    textSize(30);
    fill(236, 198, 21);
    text("Welcome!", 240, 60);
    fill(0);
    textSize(15);
    text("Here's how to play:", 245, 85);
    text("Each key corresponds to a different sound." + " "
        + "Once you press the first key,", 85, 105);
    text("the timer will start." + " "
        + "You have 15 seconds to create your own", 125, 125);
    text("musical masterpiece. When you're done," + " "
        + "the three judges will judge you!", 85, 145);
    textSize(25);
    fill(236, 198, 21);
    text("Have fun, and good luck!", 185, 175);
}

//message when the game is over
function endMessage() {
    noStroke();
    fill(236, 198, 21);
    rect(65, 30, 500, 160, 20);
    fill(255);
    rect(75, 30, 500, 150, 20);
    fill(0);
    textSize(40);
    fill(236, 198, 21);
    text("The End!", 225, 75);
    textSize(20);
    fill(0);
    text("Look at the judges to see" + " "
        + "how you did!", 150, 110);
    text("Thanks for playing!", 230, 135);
    textSize(15);
    text("Refresh the page if you'd" + " "
        + "like to play again!", 170, 165);
}

//create the leftmost judge: the happy judge
function judge1() {
    x = 80;
    y = 355;
//light gray shadow
    fill(220);
    ellipse(90, 575, 100, 350);
//white body
    fill(255);
    ellipse(100, 575, 100, 350);
//head shadow
    fill(220);
    ellipse(90, 370, 125, 125);
//white head
    fill(255);
    ellipse(100, 370, 125, 125);

//determine expressions
    if (isGamePlayed == true) {
        thinkingFace();
    }
    if (secondsPassed >= 15.0) {
        if (r <= 6) {
            happyFace();
        }
        else if (r >= 7 & r <= 9) {
            surprisedFace();
        }
        else {
            mehFace();
        }
    }
}

//create the center judge: the equal judge
function judge2() {
    x = 280;
    y = 355;
    noStroke();
//light gray shadow
    fill(220);
    ellipse(290, 575, 100, 350);
//white body
    fill(255);
    ellipse(300, 575, 100, 350);
//head shadow
    fill(220);
    ellipse(290, 370, 125, 125);
//white head
    fill(255);
    ellipse(300, 370, 125, 125);

//determine expressions
    if (isGamePlayed == true) {
        thinkingFace();
    }
    if (secondsPassed >= 15) {
        if (r <= 4) {
            happyFace();
        }
        else if (r >= 5 & r <= 7) {
           surprisedFace();
        }
        else {
            mehFace();
        }
    }
}

//create the rightmost judge:
//the hard to impress judge
function judge3() {
    x = 480;
    y = 355;
    noStroke();
//light gray shadow for body
    fill(220);
    ellipse(490, 575, 100, 350);
//white body
    fill(255);
    ellipse(500, 575, 100, 350);
//light gray shadow for head
    fill(220);
    ellipse(490, 370, 125, 125);
//white head
    fill(255);
    ellipse(500, 370, 125, 125);

//determine expressions for game
    if (isGamePlayed == true) {
        thinkingFace();
    }
    if (secondsPassed >= 15) {
        if (r <= 4) {
            surprisedFace();
        }
        else {
            mehFace();
        }
    }
}

//create surprised expression
function surprisedFace() {
    stroke(0);
    strokeWeight(1);
//eyelashes left eye
    stroke(1);
    line(x - 1, y - 15, x - 1, y - 25);
    line(x - 5, y - 15, x - 7, y - 25);
    line(x + 3, y - 15, x + 5, y - 25);
//eyelashes right eye
    line(x + 39, y - 15, x + 39, y - 25);
    line(x + 35, y - 15, x + 33, y - 25);
    line(x + 43, y - 15, x + 45, y - 25);
//eyes
    fill(255);
    ellipse(x, y, 25, 30);
    ellipse(x + 40, y, 25, 30);
//pupils
    fill(0);
    ellipse(x, y, 15, 15);
    ellipse(x + 40, y, 15, 15);
//mouth
    ellipse(x + 20, y + 45, 20, 30);

//display message
    noStroke();
    fill(236, 198, 21);
    rect(x + 40, y - 145, 90, 85, 20);
    triangle(x + 43, y - 70, x + 70, y - 60,
        x + 33, y - 55);
    fill(255);
    rect(x + 50, y - 145, 90, 80, 20);
    triangle(x + 53, y - 75, x + 80, y - 65,
        x + 43, y - 60);
    fill(0);
    textSize(30);
    text("Wow!", x + 60, y - 95);
}

//create unimpressed "meh" expression
function mehFace() {
    fill(0);
    noStroke();
//pupils
    ellipse(x + 5, y, 15, 15);
    ellipse(x + 45, y, 15, 15);
//eyelids (the curves)
    noFill();
    stroke(0);
    strokeWeight(1);
    arc(x + 1, y - 1, 20, 20, PI, 0);
    arc(x + 41, y - 1, 20, 20, PI, 0);
//mouth
    line(x + 10, y + 35, x + 40, y + 35);
    arc(x, y + 35, 20, 20, 3*PI/2, HALF_PI);

//display message
    noStroke();
    fill(236, 198, 21);
    rect(x + 40, y - 145, 90, 85, 20);
    triangle(x + 43, y - 70, x + 70, y - 60,
        x + 33, y - 55);
    fill(255);
    rect(x + 50, y - 145, 90, 80, 20);
    triangle(x + 53, y - 75, x + 80, y - 65,
        x + 43, y - 60);
    fill(0);
    textSize(30);
    text("meh", x + 64, y - 95);
}

//create happy expression
function happyFace() {
//eyes
    stroke(0);
    strokeWeight(1);
//eyelashes left eye
    line(x - 1, y - 10, x - 1, y - 20);
    line(x - 5, y - 10, x - 7, y - 20);
    line(x + 3, y - 10, x + 5, y - 20);
//eyelashes right eye
    line(x + 39, y - 10, x + 39, y - 20);
    line(x + 35, y - 10, x + 33, y - 20);
    line(x + 43, y - 10, x + 45, y - 20);
//eyes
    arc(x, y, 25, 25, PI, 0);
    arc(x + 40, y, 25, 25, PI, 0);
//mouth
    arc(x + 20, y + 30, 50, 50, 0, PI);
//blush marks left
    stroke(236, 101, 114, 100);
    line(x - 35, y + 17, x - 25, y + 12);
    line(x - 25, y + 17, x - 15, y + 12);
    line(x - 15, y + 17, x - 5, y + 12);
//blush marks right
    line(x + 40, y + 17, x + 50, y + 12);
    line(x + 50, y + 17, x + 60, y + 12);
    line(x + 60, y + 17, x + 70, y + 12);

//display message
    noStroke();
    fill(236, 198, 21);
    rect(x + 40, y - 145, 90, 85, 20);
    triangle(x + 43, y - 70, x + 70, y - 60,
        x + 33, y - 55);
    fill(255);
    rect(x + 50, y - 145, 90, 80, 20);
    triangle(x + 53, y - 75, x + 80, y - 65,
        x + 43, y - 60);
    fill(0);
    textSize(28);
    text("Pretty!", x + 55, y - 95);
}

//create thinking face displayed
//during the game
function thinkingFace() {
    stroke(0);
    strokeWeight(1);
    fill(255);
//left eyelid
    arc(x, y + 10, 25, 25, PI, 0);
//right eyelid
    arc(x + 40, y + 10, 25, 25, PI, 0);
//mouth
    fill(255);
    arc(x +5, y + 35, 15, 15, 3*PI/2, HALF_PI);
    arc(x + 22, y + 28, 25, 25, PI/4, 3*PI/4);
}

function musicNotes() {
//music staff (lines)
    for (var i = 3; i < 8; i++) {
        stroke(0, 0, 0, 80);
        strokeWeight(3);
        line(0, i*20, 640, i*20);
//push the y position into the array
        noteYPos.push(i*20);
    }
}

function keyPressed() {
//keep track of how many times
//the keys are pressed
    count++;
//if a key is pressed, start the game
    if (count == 1) {
        isGamePlayed = true;
     // startGame = second();
     //Time when the key was pressed
        d = new Date();
    }
//push the current x position into the noteX array
    noteXPos.push(640);

//assign sounds to each letter
//and only play them if the game is being played
    if(isGamePlayed == true) {
        //letter a
        if (keyCode == 65) {
            boomcrash.play();
        }
        //letter s
        if (keyCode == 83) {
            snare.play();
        }
        //letter d
        if (keyCode == 68) {
            acousticKick.play();
        }
        //letter e
        if (keyCode == 69) {
            drumstick.play();
        }
        //letter w
        if (keyCode == 87) {
            rattleDrum2.play();
        }
        //letter x
        if (keyCode == 88) {
            smallHighHat.play();
        }
        //letter z
        if (keyCode == 90) {
            smallCymbal.play();
        }
        //letter q
        if (keyCode == 81) {
            deepCymbal.play();
        }
        //letter j
        if (keyCode == 74) {
            synth1.play();
        }
        //letter k
        if (keyCode == 75) {
            synth2.play();
        }
        //letter l
        if (keyCode == 76) {
            synth3.play();
        }
        //letter r
        if (keyCode == 82) {
            bassStrings.play();
        }
        //letter t
        if (keyCode == 84) {
            lowStrings.play();
        }
        //letter y
        if (keyCode == 89) {
            highStrings.play();
        }
        //letter u
        if (keyCode == 85) {
            highStrings2.play();
        }
        //letter f
        if (keyCode == 70) {
            pianoDo.play();
        }
        //letter g
        if (keyCode == 71) {
            pianoRe.play();
        }
        //letter h
        if (keyCode == 72) {
            pianoMi.play();
        }
        //letter c
        if (keyCode == 67) {
            pianoFa.play();
        }
        //letter v
        if (keyCode == 86) {
            pianoSo.play();
        }
        //letter b
        if (keyCode == 66) {
            pianoLa.play();
        }
        //letter n
        if (keyCode == 78) {
            pianoTi.play();
        }
        //letter m
        if (keyCode == 77) {
            pianoOctave.play();
        }
        //letter i
        if (keyCode == 73) {
            frenchhorn1.play();
        }
        //letter o
        if (keyCode == 79) {
            frenchhorn2.play();
        }
        //letter p
        if (keyCode == 80) {
            frenchhorn3.play();
        }
    }
}