https://reonluck.github.io/reon-cclab/Reon_MusicMuseum%20copy/
“Music Museum” by Reon Chen
This work is an attempt to visualize my music website, but also a combination of my personal original music and programming work, and I hope users will feel happy from enjoying my work.
This is an introduction page, the picture is my electronic piano:)
This is an piano editing app called pianoteq, I use it to edit my songs and debug the notes.
This is the homepage of my work, which consists of three songs and corresponding canvases, and the user can play the tunes by tapping the screen.
Process and Design
First, I first distributed the JavaScript files corresponding to the different pieces of music and then integrated them.
The figure above shows the visualization logic of my first song, controlling the radius of the circle based on the size of the amplitude. Here I set the circle to the lights of the city to simulate a sense of the beauty of the city at night.
The main visualization logic of the second song is based on the FFT size, accompanied by a map function that makes the circular real lines in the canvas fluctuate with the music.
The third song adds a lateral moving ripple to the second song by calculating the framecount and side length to simulate the speed of the waves moving, and on the shore the shape of the original function fluctuation is modified to make it resemble the reflection of the lake.
After completing the three separate pieces, I made the three canvases appear on the same page of the website by means of an iframe funciton.
After completing a series of frame work, I built three additional pages to make the pages more informative: two introduction pages and finally an introduction page for the arranger.
Algorithm use：In this work I fully used the preload function, let function, iframe function, class, a, img, div function in HTML and various design functions in CSS.
One of the most difficult functions would be the use of the iframe function and the preload function, and I had a very big dilemma in using these two functions at the beginning. In addition, the design of the FFT function in the design of the third canvas: Ripple also had great difficulties, but Sam helped me overcome part of the algorithmic dilemma.
Reflection and Future Development:
Just as Professor Moon mentioned in the class, if possible, it would be better to make the songs in the form of albums, which would be more in line with the original intention of a music website.
For me, maybe I’ll add more tunes to the page first. Also, I would like to adjust the canvas function of the third ripple, because the existing wave effect in the upper part does not meet my expectations.
At the end of the day I think the interactivity of the project could be increased, as the website is now more like a showcase.
Special Thanks: Sam, Leon !!
Works Cited:
https:// www.youtube.com/watch?v=uk96O7N1Yo0
https://p5js.org/reference/