Interactive Melody Study

I firsty drew a sketch on iPad. This is how I designed my project.

Here is my sketch in p5.js.

I created a view of sunset, with a orange sun, clouds and birds. A bird would appear by cliking on it and stands for the note ralated to its position (height). When play button is pressed, the sun would move from the left to the right and hight light the colume playing currently. Two clouds could also be interacted. The horizontal position of the cloud below could be changed by pressing key “A” and “D”, which is a reflection of bpm. The horizontal position of the cloud above is controled by key “Q” and “E” and it can change the pitch and octaves.

I replaced the colored rectangles in triggered cells by drawing of birds and add the clouds which actually serve the purpose of sliders. However, I found it hard to make the sun move in correct speed. I did math carefully and asked my friend to help me with it but it was still not going well.