CONCEPT
Link to the sketch: https://editor.p5js.org/MR_Shark/full/oYWGrKk87
My initial idea for the project was to give a user an opportunity to experience playing the piano. While working on my project, I realized that I could create not only a musical instrument simulator, but I could also create a whole educational project aimed at teaching people how to play simple piano pieces. Furthermore, this project can provide people with a tool that could give a partial overview of what it feels like to play the piano without acquiring an actual instrument.
DESCRIPTION OF THE PROJECT
The user experience begins with a start screen and the music piece composed by Ludovico Einaudi – “Fly”
Clicking on the screen takes the user to the actual piano simulator.
The keys are assigned to the user’s keyboard so that they replicate the actual piano experience. However, due to the limited width of the computer keyboard, the piano is divided into two halves.
The octaves from 3 to 5 are available to the user as they cover the scope of the most compositions.
Clicking the buttons at the bottom of the page makes the canvas display the notes of the piano pieces that a user can learn how to play. Clicking the left button displays the notes as they appear on the screen (e.g. A, D, F# etc.). Clicking on the right button displays the notes as they appear on a user’s keyboard (e.g. Q,V, [ , M etc.)
Parts of the code I’m proud of
soundFormats("mp3", "ogg");
mainscreensound = loadSound(
"x2mate.com - Ludovico Einaudi - Fly (Intouchables Soundtrack) (192 kbps).mp3"
);
let a = 0;
for (let letter = unchar("A"); letter < 72; letter++) {
for (i = 3; i < 6; i++) {
let fileName = char(letter) + i + ".mp3";
soundfiles[a] = loadSound(fileName);
a = a + 1;
}
if (letter != 67 && letter != 70) {
for (i = 3; i < 6; i++) {
let fileName = char(letter) + "b" + i + ".mp3";
soundfiles[a] = loadSound(fileName);
a = a + 1;
}
}
}
I had a problem with importing a large number of audio files into the program, and I’m proud of the way I managed to solve the problem with importing a large number of sound files (thank you, Professor Shiloh) using char and unchar functions.
Furthermore, I enjoyed creating classes for the piano keyboard. The code for creating black keys is designed in such a way that they appear as meaningful class objects with properties:
class BlackKey {
constructor(x, y) {
this.note = blackkeys[y % 5];
this.octave = Math.floor(y / 5);
}
display(x, y) {
fill("black");
rect(30 + 30 * x, 300, 20, 75, 3);
fill("white");
textFont(font);
textAlign(CENTER);
text(blackkeys[y % 5], 40 + 30 * x, 365);
}
}
REFLECTIONS
The project helped me implement the knowledge I gained throughout the lectures and readings. I see a lot of room for improvement in this project, either technical or graphical. I believe that if I choose to continue the work on the project, creating a broader range of choices for users, improving graphics, and adding more musical instruments, this project could potentially become a widely known useful tool for people trying to get an understanding of what the experience of playing musical instruments feels like without actually possessing the instrument.