This project is based on the idea of bubbles under the sea and the different sound made by the little mermaid in the ocean have different pitch and tone. The original idea was clicking on bubbles to make it disappear and generate sounds, which is based on the touch pianist. However, I found that I can not reach this effect as I expected. So I changed to the current sketch. In the sketch, the user can click on certain areas to leave the sound of the little mermaid and the breath of the mermaid will generate a series of bubbles. All the tracks of sea animals will finally compose of a piece of melody. The slider under the text will can adjust the pitch of the entire melody created in the sketch. Meanwhile, the mouse will continuously generate series of bubbles at the mouse position. The final sketch looks like below. The link to my sketch is attached.
During the coding process, I originally want to create several series of bubbles when mouseClicked, the bubble on certain area disappear on the sketch with the code below, but I found it do not work well. Then I tried to use mouse position to generate bubbles in my current sketch. Therefore, I have question of how to call class functions several times in one sketch with my previous failed experience of mixing arrays and class.
Also when I debugged my code, I found the brackets including octave and map() function in the code below is very important, without it, the code went wrong, which made me very confused. Because I thought it was just adding something and the brackets is not necessary in the calculation.
let pitch = noteName + (octave+map(slider.value(),0,100,0,4));