This project was created using HTML, CSS, and JavaScript to illustrate various music notes through sine waves. It took about 7 hours to create. This project utilizes input musical notes, converts them to their corresponding frequencies, and graphs them as sinusoids. Customization options are available, such as changing the color, volume, and line thickness of the generated sinusoid.
The site can be accessed using GitHub Pages. To use the art generator, utilize the note keyboard at the bottom of the webpage to type in notes to generate a sinusoid to. Then, you can mess with the color picker, volume slider, and line width slider to change the respective settings of the sinusoid. You can also press the Start Recording button to record your sinusoid once you begin generating it. Once you're ready to create your art, press the button at the bottom that says "Generate art!" to hear the notes as they're graphed. You can edit the color, volume, and line thickness as you generate, resulting in an interesting artwork.
I love both mathematics (both abstract and applied) and music, so I decided that this project would teach me a lot about one of the many intersections between the two!
Throughout working on this project, I struggled a lot with parsing elements by their ID using JavaScript, as there are a lot of different inputs in this project and it was difficult to keep track of when and where they should be referenced. I also struggled with initially understanding the concepts that were covered in the Oscillart tutorial, such as frequencies and how sinusoids model sound. I ended up learning a lot about JavaScript objects and events, specifically how to reference variables throughout a project and generate objects for different purposes.