Project #3 Score Generator

Whistle into your mic to create your own music score

Description

For this project, I really wanted to expand upon the Whistle detector example, and see if I could get the machine to replicates notes on a standard music score. When the code first loads, the user is asked to input a name for their piece. After they click submit, the blank score pops up. The code should add notes to the score as the user either whistles notes in the C5 scale (or plays them on the piano). The score will continue to grow as the user keeps whistling/playing (Thanks to whoever dropped that idea in the feedback notes). You can also hit space to restart the code

Design Process

I had a lot of difficulty coming up with the system for representing/drawing the notes in code. I ended up with the following:

The code then uses a nested for loop to go through the score and draw out all the notes. After learning about the DOM in class, I really wanted to add a way for users to actually name their music. I was able to use a mix of p5js documentation and this example(https://p5js.org/examples/dom-input-and-button.html) to create a system where the user could enter the title, and have it be displayed on their piece. I wasn't able to add any John Cage-like design for this project, but the mention of him made me think of his piece 4'33". This is a song that is just 4 minutes and 33 seconds of silence, with no instruments being played. The song is just whatever sounds are being created in the natural environment. The piece really highlights the importance of rests and silence in music, so I wanted to add a way to include that silence in this project. I had to come up with different criteria for drawing a rest, but I was able to implement a simple system where the code will draw a rest after a note if it hears background noise. If I had more time, I would love to make this project more functional/realistic. For example, including notes and rests beyond just a quarter note. I would also love to implement a system where users could tell the code that the piece is completed, the code would draw the score accordingly, and then users could save/print their creations.

Credits

Credit to Teachable Machine for providing the Machine Learning Model