The first design is counting stars:
The basic design of the sketch is attached above. The interaction of the music and elements in the sketch is listed below.
The left star: User can change the height of the star based on the mouse position. When the height of the star changes from low to high, the volume of the track “vocal.m4a” also changes from low to high.
The right star: Appear after user type the key “d”. The size of the star will change according to the amplitude of the track “drum.m4a”.
The moon: User can change the height of the moon based on the mouse position. When the height of the moon changes from low to high, the volume of the track “bass.m4a” also changes from low to high.
The wave of lake: The entire wave of lake moves according to the waveform of the sound of “other.m4a”.
For the sounds, the four tracks are splited by the tool splitter.ai and the original track is “Counting Stars -BEO” downloaded from Spotify.
The four tracks are attached below:
Bass:
Drum:
Other:
Vocal:
The second design is the setting sun:
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 and sketch it out as above.
The setting sun: When mouse is clicked, “drum.mp3” will be played and the size of the sun will change according to the amplitude of this track.
The bird: User can change the position of the bird based on the mouse position. When the height of the moon changes from low to high, the volume of the track “vocal.mp3” also changes from low to high.
The wave of mountain: One of the waves of mountain moves according to the waveform of the sound of “other.mp3” when key “m” is clicked.
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 three tracks are attached below:
Vocal:
Other:
Drum: