The basic idea of the design refers from the concept of Chinese ink painting, which uses less color and less lines to generate the feeling of endless mountains and beautiful waterfalls among it. I tried to sketch the feeling in the p5js design style by just using lines and light color to associate with the feeling. The link to p5js is here.
For the interactive part, the entire design is to make users add other short elements into the basic song, kind of a remix feeling? Users can add these shorts elements at any time. The y position of the bird changes the volume of one track and the visualization of amplitude of another track is triggered by type the key “s”. It finally works like this.
The most difficult challenge for me is how to link the volume of one track with the y position of the bird I draw on sketch. I first wanted to use mouseDragged function and I found it weird when the user does not really how the function works, so I just simplified with moving the mouse position to change the volume.
Note:
For the sounds, the three tracks are splited by the tool splitter.ai and the original track is “Jasmine – DPR Live” downloaded from Spotify.
The tracks of bass and simple are downloaded from the Legowelt website.