Inspired by the p5.js example Connect Particles

I want to connect this visual effect to some audio and rhythm effects. The first time I saw this coding example, I started imagining the sound of Marimba. So I went to a webpage where I could online playing the Marimba and record the notes.

In terms of connecting the interaction with sound, I divided the canvas into eight equal pieces based on the coordinates of the mouse and assigned each area a note. The sketch below is an illustration of how I divide the canvas using concentric circles.

Other than that, I also used what I learned from previous class—the colorMode(HSB), and I implemented it to this study by adjusting the background color based on the coordinates of the mouse.

↓↓↓CLICK THE SCREENSHOT TO PLAY ↓↓↓