To use some tones for this assignment, I had initially wanted to make a rhythm game. I decided to try the Tone.js library. The first step i did was to find an “arrangement” with an array of music notes. I couldn’t really find anything online so I asked chatgpt to help me with it
A whole lot of notes but sounded so wrong
The only ones chatgpt got correct were the very simple songs
Because I couldn’t find anything that was both rich and accurate enough to be made into a game, I decided to just do some mouse to tone interaction and see how it goes.
Chatgpt did help me organise a neat array of notes that map to frequencies though
I first split the X axis of the canvas into different “steps” based on the number of notes there are. When the mouse hovers over the different lines, the note changes.
I used the Tone library’s synth and had an interval to play the tone every 100ms when there was a mouseX input. I also created a stopTone function to stop playing when the mouse is out because it was annoying.
This created this spacey sounding music when I run my mouse across the lines. This gave me the idea to make something space-related.. like some galaxy sky thing that is generated on mouse input. My biggest struggle turned out to be working with the intricacies of p5’s canvas layers.
I needed two main components:
The difficulty for me was having some objects that when drawn, fade out (particles) and some that do not fade out(main controller).