![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2020/08/stop-banner.png)
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!
//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();
}
}
}