韻 Blossom
Coding programmer, Art designer, Project planer - Ryan Yuan
Developed by P5.js
An Individual Project
Mar 2020 - April 2020
Project Run-through
Summary
韻(Blossom) is an individual web-based interactive music visualizer. With the help of the interface created by GUI.js, users can adjust the parameters to change the visuals. Also, users can drag their music to the page to be visualized. The project utilizes FFT to analyze music and break it into reachable data to generate animations. Users can adjust how sensitive the program detects the beats to cooperate the animation with different music under various BPM.
Intention
The concept of the project is to create a symphony of flowers, thus flowers will blossom according to the rhythm. Vines are to represent five frequency ranges, from bass to treble, their widths indicate the intensity of the corresponding frequency range. Thorns are generated along the veins for decoration. Blossoms represent the beats, each beat will generate a flower on one of the veins. All of the parameters related to the veins, thorns, and flowers are shown on the user interface, making the whole animation under users' control.
Production
Audio Analysis
I import the p5.sound.js library to do audio analysis. I utilize the FFT, Fast Fourier transform, to analyze the input. I can receive the volume, range of frequencies, and energy of each frequency from the analyses. Frequencies are divided into five ranges, bass, low-mid, mid, high-mid, and treble, each one controls one of the vines in the visualization. I could get the energy of each frequency range with the function getEnergy() and these values will influence the radius and opacity of the vines, the greater the energy is, the thicker and brighter the vine will be. Volume is used for beat detection. I set an initial volume level as a default, once the volume reaches that level the system will detect a beat, at the meantime, the default will be raised a bit to avoid misjudgment. I also have set a beatHold value and a beatDecay value.
The beatHold is used to determine how long the default level should remain after a beat is detected, and the beatDecay is used to determine how fast the default level will decline after the hold has passed. These two values could be manipulated in GUI by users for calibration.
GUI.js
I import the GUI.js library to create a user interface. It enables me to insert various types of parameters and offers corresponding ways of interaction. I could use a slider to determine the value within a range of numbers and the value of each step. I could use a check box for boolean parameters. I could use a color palette to determine the colors.
The most powerful part is that I could import self-modified functions to it. I add two functions, WIPE and SAVE, to the GUI. WIPE is to clear the whole screen to generate the visuals from the beginning. SAVE is to take a screenshot of the current frame and save it to the desktop.
Animation
Vine
The prototype of the visualization is the bouncing ball animation. I utilize trigonometric functions (cosine and sine functions) and Perlin noise to randomize the movements and the sizes. These balls are later used to generate the vines.
Thorn
To save computing power, I set a timer to control the generation of the thorns since the animation refreshes based on the framerate. The thorns are generated from the vines and their sizes are related to their life span, the longer they live, the more they expand.
During the generation of the thorns, I add a parameter called Stingtortuosity to twist these thorns randomly to make them look more natural.
Flower
Each time a beat is detected, a flower will bloom on one of the vines. A flower consists of six petals and its generation is determined by the analysis of the music. How high the volume of the beat determines how large the flower will be the same as how long its life span is. The same as the thorns, I set two parameters called Flowertortuosity and Angle to control how the petals twist. Users can change these parameters during the process of generation and will resulting in various shapes.
Interaction
Accelerate controls the speed of the vines.
Thorns and vines share the same RGB value, while flowers have their own.
Tortuosity is to control the extent of the twists, the smaller the tortuosity is, the straighter the lines will be. But the flowertortuosity is to control the twist direction of the petals, the petals will twist clockwise if the value is positive. Angle determines the extent of the twists.
Wipe clears the whole screen.
